@ukic/canary-web-components 3.0.0-canary.32 → 3.0.0-canary.33

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

@@ -1 +1 @@
-{"version":3,"file":"ic-time-input.stories.js","sourceRoot":"","sources":["../../../../../src/components/ic-time-input/ic-time-input.stories.js"],"names":[],"mappings":"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","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/Time Input\",\n  component: \"ic-time-input\",\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use the time input component to manually type in a time in different formats.\n *\n * The input `label` is the only required attribute for time input.\n *\n * Click the 'Component API' tab to view all the available attributes, events and slots for time input.\n *\n * To use the time input component, import `@ukic/canary-web-components` into your application.\n *\n * Times can be added by manually typing into the input or using the up and down arrow keys.\n *\n * To move between hour, minute and second using the keyboard, provide the required values based on the placeholders or use `:`.\n *\n * By default, the helper text displays the time format.\n */\nexport const Default = {\n  render: () => html`<ic-time-input\n    label=\"What time would you like to collect your coffee?\"\n  ></ic-time-input>`,\n  name: \"Default\",\n};\n\n/**\n * Retrieving the time input value via `icChange` returns the time as a Date object.\n *\n * The event returns the Date object once hour, minute and second have been entered.\n */\nexport const IcChangeEvent = {\n  render: () => html`<ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n    ></ic-time-input>\n    <script>\n      var timeInput = document.querySelector(\"ic-time-input\");\n      timeInput.addEventListener(\"icChange\", function (event) {\n        console.log(event.detail.value, event.detail.utcValue);\n      });\n    </script>`,\n  name: \"icChange event\",\n};\n\n/**\n * To set a value to the time input, pass the time value in the relevant time format.\n */\nexport const WithValue = {\n  render: () => html`<ic-time-input\n    id=\"time-input-default-time-with-value\"\n    label=\"What time would you like to collect your coffee?\"\n    time-format=\"HH:MM:SS\"\n    value=\"13:45:00\"\n  ></ic-time-input>`,\n  name: \"With value\",\n};\n\n/**\n * The time input also accepts a number of different time formats within the value attribute:\n * - [Date object](#date-object)\n * - [Zulu time](#zulu-time)\n */\nexport const DateObject = {\n  render: () => html`<ic-time-input\n      id=\"time-input-default-time-date\"\n      label=\"What time would you like to collect your coffee?\"\n    ></ic-time-input>\n    <script>\n      var timeInputDate = document.querySelector(\n        \"#time-input-default-time-date\"\n      );\n      timeInputDate.value = new Date(\"2025-07-14T15:30:45\");\n    </script>`,\n  name: \"Date object\",\n};\n\nexport const ZuluTime = {\n  render: () => html`<div>\n      <ic-time-input\n        id=\"time-input-default-zulu-time\"\n        label=\"What time would you like to collect your coffee?\"\n      ></ic-time-input>\n    </div>\n    <script>\n      var timeInputDate = document.querySelector(\n        \"#time-input-default-zulu-time\"\n      );\n      timeInputDate.value = \"15:30:45Z\";\n    </script>`,\n  name: \"Zulu time\",\n};\n\n/**\n * To set the time input as a required field, set the `required` attribute to `true`. This will add an asterisk at the end of the time input label.\n */\nexport const Required = {\n  render: () => html`<ic-time-input\n    label=\"What time would you like to collect your coffee?\"\n    required=\"true\"\n  ></ic-time-input>`,\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: () => html`<ic-time-input\n    label=\"What time would you like to collect your coffee?\"\n    hide-label=\"true\"\n  ></ic-time-input>`,\n  name: \"Hide label\",\n};\n\n/**\n * Set the `disabled` attribute to `true` to prevent interaction with the time input.\n */\nexport const Disabled = {\n  render: () => html`<ic-time-input\n    label=\"What time would you like to collect your coffee?\"\n    disabled=\"true\"\n  ></ic-time-input>`,\n};\n\n/**\n * The time input is available in three different sizes:\n * - `small`\n * - `medium` (default)\n * - `large`\n */\nexport const Sizes = {\n  render: () => html`<ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n      size=\"small\"\n    ></ic-time-input>\n    <br />\n    <ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n    ></ic-time-input>\n    <br />\n    <ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n      size=\"large\"\n    ></ic-time-input>`,\n  name: \"Sizes\",\n};\n\n/**\n * Use the helper text to add additional detail for the time input. Display custom content using the `helper-text` slot.\n */\nexport const CustomHelperText = {\n  render: () => html`<ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n      helper-text=\"We will have your order ready for you at this time\"\n    ></ic-time-input>\n    <br />\n    <ic-time-input label=\"What time would you like to collect your coffee?\"\n      ><ic-typography variant=\"caption\" slot=\"helper-text\">\n        <span>\n          For special requests,\n          <ic-link href=\"#\">contact us</ic-link> before choosing a time\n        </span>\n      </ic-typography></ic-time-input\n    >`,\n  name: \"Custom helper text\",\n};\n\nexport const HideHelperText = {\n  render: () => html`<ic-time-input\n    label=\"What time 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-time-input>`,\n  name: \"Hide helper text\",\n};\n\n/**\n * Validation on time input is set via `validation-status` and `validation-text`.\n *\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 Validation = {\n  render: () => html`<ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n      validation-status=\"error\"\n      validation-text=\"There is a coffee shortage forecast for that time. Please choose a different time.\"\n    ></ic-time-input>\n    <br />\n    <ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n      validation-status=\"warning\"\n      validation-text=\"Please be aware that there may be a coffee shortage at that time.\"\n    ></ic-time-input>\n    <br />\n    <ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n      validation-status=\"success\"\n      validation-text=\"Your coffee will be available for you to collect at this time.\"\n    ></ic-time-input>`,\n  name: \"Custom validation\",\n};\n\nexport const AriaLiveBehaviour = {\n  render: (args) =>\n    html`<ic-time-input\n        id=\"field-1\"\n        label=\"What time would you like to collect your coffee?\"\n        helper-text=\"Error already set on page load and aria-live overridden as 'assertive'\"\n        validation-status=\"error\"\n        validation-text=\"First error message\"\n        validation-aria-live=\"assertive\"\n      ></ic-time-input>\n      <br />\n      <ic-time-input\n        id=\"field-2\"\n        label=\"What time would you like to collect your coffee?\"\n        helper-text=\"Error set after page load and aria-live overridden as 'assertive'\"\n        validation-aria-live=\"assertive\"\n      ></ic-time-input>\n      <br />\n      <ic-button id=\"toggle-btn-1\">Toggle errors</ic-button>\n      <script>\n        let showErrors1 = false;\n        const btn1 = document.getElementById(\"toggle-btn-1\");\n        const field1 = document.getElementById(\"field-1\");\n        const field2 = document.getElementById(\"field-2\");\n\n        btn1.addEventListener(\"click\", () => {\n          showErrors1 = !showErrors1;\n\n          field1.setAttribute(\"validation-status\", showErrors1 ? \"\" : \"error\");\n          field1.setAttribute(\n            \"validation-text\",\n            showErrors1 ? \"\" : \"First error message\"\n          );\n\n          field2.setAttribute(\"validation-status\", showErrors1 ? \"error\" : \"\");\n          field2.setAttribute(\n            \"validation-text\",\n            showErrors1 ? \"Second error message\" : \"\"\n          );\n        });\n      </script>\n      <br />\n      <br />\n      <br />\n      <br />\n      <ic-time-input\n        id=\"field-3\"\n        label=\"What time would you like to collect your coffee?\"\n        helper-text=\"Default aria-live behaviour (i.e. 'polite')\"\n      ></ic-time-input>\n      <br />\n      <ic-time-input\n        id=\"field-4\"\n        label=\"What time would you like to collect your coffee?\"\n        helper-text=\"Default aria-live behaviour (i.e. 'polite')\"\n      ></ic-time-input>\n      <br />\n      <ic-button id=\"toggle-btn-2\">Toggle errors</ic-button>\n      <script>\n        let showErrors2 = false;\n        const btn2 = document.getElementById(\"toggle-btn-2\");\n        const field3 = document.getElementById(\"field-3\");\n        const field4 = document.getElementById(\"field-4\");\n\n        btn2.addEventListener(\"click\", () => {\n          showErrors2 = !showErrors2;\n\n          field3.setAttribute(\"validation-status\", showErrors2 ? \"error\" : \"\");\n          field3.setAttribute(\n            \"validation-text\",\n            showErrors2 ? \"Third error message\" : \"\"\n          );\n\n          field4.setAttribute(\"validation-status\", showErrors2 ? \"error\" : \"\");\n          field4.setAttribute(\n            \"validation-text\",\n            showErrors2 ? \"Fourth error message\" : \"\"\n          );\n        });\n      </script>`,\n\n  name: \"Aria-live behaviour\",\n};\n\n/**\n * The `IcChange` event is emitted by the time input every time an input field is changed.\n */\nexport const IcChangeEmitTimePartChanges = {\n  render: () => html`<ic-time-input\n      emit-time-part-change=\"true\"\n      label=\"What time would you like to collect your coffee?\"\n    ></ic-time-input>\n    <script>\n      var timeInput = document.querySelector(\"ic-time-input\");\n      timeInput.addEventListener(\"icChange\", function (event) {\n        console.log(\"icChange\", event.detail);\n      });\n    </script>`,\n  name: \"IcChange with emitTimePartChange\",\n};\n\n/**\n * Demonstrates the `time-period` prop for 12-hour and 24-hour time selection.\n */\nexport const TimePeriod = {\n  render: () => html`\n    <ic-time-input label=\"12-hour time\" time-period=\"12\"></ic-time-input>\n  `,\n  name: \"Time period\",\n};\n\n/**\n * Demonstrates the time format HH:MM.\n */\nexport const HHMM = {\n  render: () => html`<ic-time-input\n    label=\"What time would you like to collect your coffee?\"\n    time-format=\"HH:MM\"\n  ></ic-time-input>`,\n  name: \"Time format HH:MM\",\n};\n\n/**\n * Setting min time allows you to restrict the earliest time that can be selected.\n * The value can be in any format supported as `time-format`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.\n */\nexport const MinTime = {\n  render: () => html`<ic-time-input\n    label=\"What time would you like to collect your coffee?\"\n    min=\"08:00:00\"\n  ></ic-time-input>`,\n  name: \"Min time\",\n};\n\n/**\n * Setting max time allows you to restrict the latest time that can be selected.\n * The value can be in any format supported as `time-format`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.\n */\nexport const MaxTime = {\n  render: () => html`<ic-time-input\n    label=\"What time would you like to collect your coffee?\"\n    max=\"16:00:00\"\n  ></ic-time-input>`,\n  name: \"Max time\",\n};\n\n/**\n * To disable specific times in the time input, set the `disable-times` prop.\n * The `disable-times` prop accepts an array of time objects or strings.\n * Each time object can have a `start` and `end` property to define a range of disabled times, or it can be a single time string to disable that specific time.\n * The time can be in any format supported as `time-format`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.\n */\nexport const DisableTimes = {\n  render: () => html`<div>\n      <ic-time-input\n        id=\"time-input-default-disable-time\"\n        label=\"What time would you like to collect your coffee?\"\n      ></ic-time-input>\n    </div>\n    <script>\n      var timeInputDate = document.querySelector(\n        \"#time-input-default-disable-time\"\n      );\n      timeInputDate.disableTimes = [{ start: \"08:00\", end: \"10:00\" }, \"13:20\"];\n    </script>`,\n  name: \"Disable times\",\n};\n\n/**\n * The time 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: () => html`<ic-time-input\n      id=\"time-input-clear-value\"\n      label=\"What time you like to collect your coffee?\"\n      value=\"08:30:00\"\n    ></ic-time-input>\n    <br />\n    <ic-button id=\"update\">Update time</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(\"#time-input-clear-value\");\n      var btn = document.querySelector(\"#update\");\n      btn.addEventListener(\"click\", () => {\n        input.value = \"08:30:00\";\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  name: \"With clearing value\",\n};\n"]}
+{"version":3,"file":"ic-time-input.stories.js","sourceRoot":"","sources":["../../../../../src/components/ic-time-input/ic-time-input.stories.js"],"names":[],"mappings":"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","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/Time Input\",\n  component: \"ic-time-input\",\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use the time input component to manually type in a time in different formats.\n *\n * The input `label` is the only required attribute for time input.\n *\n * Click the 'Component API' tab to view all the available attributes, events and slots for time input.\n *\n * To use the time input component, import `@ukic/canary-web-components` into your application.\n *\n * Times can be added by manually typing into the input or using the up and down arrow keys.\n *\n * To move between hour, minute and second using the keyboard, provide the required values based on the placeholders or use `:`.\n *\n * By default, the helper text displays the time format.\n */\nexport const Default = {\n  render: () => html`<ic-time-input\n    label=\"What time would you like to collect your coffee?\"\n  ></ic-time-input>`,\n  name: \"Default\",\n};\n\n/**\n * Retrieving the time input value via `icTimeChange` returns the time as a Date object.\n *\n * The event returns the Date object once hour, minute and second have been entered.\n */\nexport const IcTimeChangeEvent = {\n  render: () => html`<ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n    ></ic-time-input>\n    <script>\n      var timeInput = document.querySelector(\"ic-time-input\");\n      timeInput.addEventListener(\"icTimeChange\", function (event) {\n        console.log(event.detail.value, event.detail.utcValue);\n      });\n    </script>`,\n  name: \"icTimeChange event\",\n};\n\n/**\n * To set a value to the time input, pass the time value in the relevant time format.\n */\nexport const WithValue = {\n  render: () => html`<ic-time-input\n    id=\"time-input-default-time-with-value\"\n    label=\"What time would you like to collect your coffee?\"\n    time-format=\"HH:MM:SS\"\n    value=\"13:45:00\"\n  ></ic-time-input>`,\n  name: \"With value\",\n};\n\n/**\n * The time input also accepts a number of different time formats within the value attribute:\n * - [Date object](#date-object)\n * - [Zulu time](#zulu-time)\n */\nexport const DateObject = {\n  render: () => html`<ic-time-input\n      id=\"time-input-default-time-date\"\n      label=\"What time would you like to collect your coffee?\"\n    ></ic-time-input>\n    <script>\n      var timeInputDate = document.querySelector(\n        \"#time-input-default-time-date\"\n      );\n      timeInputDate.value = new Date(\"2025-07-14T15:30:45\");\n    </script>`,\n  name: \"Date object\",\n};\n\nexport const ZuluTime = {\n  render: () => html`<div>\n      <ic-time-input\n        id=\"time-input-default-zulu-time\"\n        label=\"What time would you like to collect your coffee?\"\n      ></ic-time-input>\n    </div>\n    <script>\n      var timeInputDate = document.querySelector(\n        \"#time-input-default-zulu-time\"\n      );\n      timeInputDate.value = \"15:30:45Z\";\n    </script>`,\n  name: \"Zulu time\",\n};\n\n/**\n * To set the time input as a required field, set the `required` attribute to `true`. This will add an asterisk at the end of the time input label.\n */\nexport const Required = {\n  render: () => html`<ic-time-input\n    label=\"What time would you like to collect your coffee?\"\n    required=\"true\"\n  ></ic-time-input>`,\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: () => html`<ic-time-input\n    label=\"What time would you like to collect your coffee?\"\n    hide-label=\"true\"\n  ></ic-time-input>`,\n  name: \"Hide label\",\n};\n\n/**\n * Set the `disabled` attribute to `true` to prevent interaction with the time input.\n */\nexport const Disabled = {\n  render: () => html`<ic-time-input\n    label=\"What time would you like to collect your coffee?\"\n    disabled=\"true\"\n  ></ic-time-input>`,\n};\n\n/**\n * The time input is available in three different sizes:\n * - `small`\n * - `medium` (default)\n * - `large`\n */\nexport const Sizes = {\n  render: () => html`<ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n      size=\"small\"\n    ></ic-time-input>\n    <br />\n    <ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n    ></ic-time-input>\n    <br />\n    <ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n      size=\"large\"\n    ></ic-time-input>`,\n  name: \"Sizes\",\n};\n\n/**\n * Use the helper text to add additional detail for the time input. Display custom content using the `helper-text` slot.\n */\nexport const CustomHelperText = {\n  render: () => html`<ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n      helper-text=\"We will have your order ready for you at this time\"\n    ></ic-time-input>\n    <br />\n    <ic-time-input label=\"What time would you like to collect your coffee?\"\n      ><ic-typography variant=\"caption\" slot=\"helper-text\">\n        <span>\n          For special requests,\n          <ic-link href=\"#\">contact us</ic-link> before choosing a time\n        </span>\n      </ic-typography></ic-time-input\n    >`,\n  name: \"Custom helper text\",\n};\n\nexport const HideHelperText = {\n  render: () => html`<ic-time-input\n    label=\"What time 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-time-input>`,\n  name: \"Hide helper text\",\n};\n\n/**\n * Validation on time input is set via `validation-status` and `validation-text`.\n *\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 Validation = {\n  render: () => html`<ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n      validation-status=\"error\"\n      validation-text=\"There is a coffee shortage forecast for that time. Please choose a different time.\"\n    ></ic-time-input>\n    <br />\n    <ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n      validation-status=\"warning\"\n      validation-text=\"Please be aware that there may be a coffee shortage at that time.\"\n    ></ic-time-input>\n    <br />\n    <ic-time-input\n      label=\"What time would you like to collect your coffee?\"\n      validation-status=\"success\"\n      validation-text=\"Your coffee will be available for you to collect at this time.\"\n    ></ic-time-input>`,\n  name: \"Custom validation\",\n};\n\nexport const AriaLiveBehaviour = {\n  render: (args) =>\n    html`<ic-time-input\n        id=\"field-1\"\n        label=\"What time would you like to collect your coffee?\"\n        helper-text=\"Error already set on page load and aria-live overridden as 'assertive'\"\n        validation-status=\"error\"\n        validation-text=\"First error message\"\n        validation-aria-live=\"assertive\"\n      ></ic-time-input>\n      <br />\n      <ic-time-input\n        id=\"field-2\"\n        label=\"What time would you like to collect your coffee?\"\n        helper-text=\"Error set after page load and aria-live overridden as 'assertive'\"\n        validation-aria-live=\"assertive\"\n      ></ic-time-input>\n      <br />\n      <ic-button id=\"toggle-btn-1\">Toggle errors</ic-button>\n      <script>\n        let showErrors1 = false;\n        const btn1 = document.getElementById(\"toggle-btn-1\");\n        const field1 = document.getElementById(\"field-1\");\n        const field2 = document.getElementById(\"field-2\");\n\n        btn1.addEventListener(\"click\", () => {\n          showErrors1 = !showErrors1;\n\n          field1.setAttribute(\"validation-status\", showErrors1 ? \"\" : \"error\");\n          field1.setAttribute(\n            \"validation-text\",\n            showErrors1 ? \"\" : \"First error message\"\n          );\n\n          field2.setAttribute(\"validation-status\", showErrors1 ? \"error\" : \"\");\n          field2.setAttribute(\n            \"validation-text\",\n            showErrors1 ? \"Second error message\" : \"\"\n          );\n        });\n      </script>\n      <br />\n      <br />\n      <br />\n      <br />\n      <ic-time-input\n        id=\"field-3\"\n        label=\"What time would you like to collect your coffee?\"\n        helper-text=\"Default aria-live behaviour (i.e. 'polite')\"\n      ></ic-time-input>\n      <br />\n      <ic-time-input\n        id=\"field-4\"\n        label=\"What time would you like to collect your coffee?\"\n        helper-text=\"Default aria-live behaviour (i.e. 'polite')\"\n      ></ic-time-input>\n      <br />\n      <ic-button id=\"toggle-btn-2\">Toggle errors</ic-button>\n      <script>\n        let showErrors2 = false;\n        const btn2 = document.getElementById(\"toggle-btn-2\");\n        const field3 = document.getElementById(\"field-3\");\n        const field4 = document.getElementById(\"field-4\");\n\n        btn2.addEventListener(\"click\", () => {\n          showErrors2 = !showErrors2;\n\n          field3.setAttribute(\"validation-status\", showErrors2 ? \"error\" : \"\");\n          field3.setAttribute(\n            \"validation-text\",\n            showErrors2 ? \"Third error message\" : \"\"\n          );\n\n          field4.setAttribute(\"validation-status\", showErrors2 ? \"error\" : \"\");\n          field4.setAttribute(\n            \"validation-text\",\n            showErrors2 ? \"Fourth error message\" : \"\"\n          );\n        });\n      </script>`,\n\n  name: \"Aria-live behaviour\",\n};\n\n/**\n * The `IcTimeChange` event is emitted by the time input every time an input field is changed.\n */\nexport const IcTimeChangeEmitTimePartChanges = {\n  render: () => html`<ic-time-input\n      emit-time-part-change=\"true\"\n      label=\"What time would you like to collect your coffee?\"\n    ></ic-time-input>\n    <script>\n      var timeInput = document.querySelector(\"ic-time-input\");\n      timeInput.addEventListener(\"icTimeChange\", function (event) {\n        console.log(\"icTimeChange\", event.detail);\n      });\n    </script>`,\n  name: \"IcTimeChange with emitTimePartChange\",\n};\n\n/**\n * Demonstrates the `time-period` prop for 12-hour and 24-hour time selection.\n */\nexport const TimePeriod = {\n  render: () => html`\n    <ic-time-input label=\"12-hour time\" time-period=\"12\"></ic-time-input>\n  `,\n  name: \"Time period\",\n};\n\nexport const TimePeriodAMPMToggle = {\n  render: () => html`\n    <ic-time-input\n      label=\"12-hour time\"\n      time-period=\"12\"\n      show-am-pm-toggle=\"true\"\n    ></ic-time-input>\n  `,\n  name: \"Time period - with AM/PM toggle\",\n};\n\nexport const IcTimeChangeTimeParts12Hour = {\n  render: () => html`<ic-time-input\n      emit-time-part-change=\"true\"\n      label=\"What time would you like to collect your coffee?\"\n      time-period=\"12\"\n      show-am-pm-toggle=\"true\"\n    ></ic-time-input>\n    <script>\n      var timeInput = document.querySelector(\"ic-time-input\");\n      timeInput.addEventListener(\"icTimeChange\", function (event) {\n        console.log(\"icTimeChange\", event.detail);\n      });\n    </script>`,\n  name: \"IcTimeChange with emitTimePartChange - 12 hour\",\n};\n\n/**\n * Demonstrates the time format HH:MM.\n */\nexport const HHMM = {\n  render: () => html`<ic-time-input\n    label=\"What time would you like to collect your coffee?\"\n    time-format=\"HH:MM\"\n  ></ic-time-input>`,\n  name: \"Time format HH:MM\",\n};\n\n/**\n * Demonstrates the time format HH:MM:SS.SSS.\n */\nexport const Milliseconds = {\n  render: () => html`<ic-time-input\n    label=\"What time would you like to collect your coffee?\"\n    time-format=\"HH:MM:SS.SSS\"\n  ></ic-time-input>`,\n  name: \"Time format HH:MM:SS.SSS\",\n};\n\nexport const IcTimeChangeTimePartsMilliseconds = {\n  render: () => html`<ic-time-input\n      emit-time-part-change=\"true\"\n      label=\"What time would you like to collect your coffee?\"\n      time-format=\"HH:MM:SS.SSS\"\n    ></ic-time-input>\n    <script>\n      var timeInput = document.querySelector(\"ic-time-input\");\n      timeInput.addEventListener(\"icTimeChange\", function (event) {\n        console.log(\"icTimeChange\", event.detail);\n      });\n    </script>`,\n  name: \"IcTimeChange with emitTimePartChange - Milliseconds\",\n};\n\n/**\n * Setting min time allows you to restrict the earliest time that can be selected.\n * The value can be in any format supported as `time-format`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.\n */\nexport const MinTime = {\n  render: () => html`<ic-time-input\n    label=\"What time would you like to collect your coffee?\"\n    min=\"08:00:00\"\n  ></ic-time-input>`,\n  name: \"Min time\",\n};\n\n/**\n * Setting max time allows you to restrict the latest time that can be selected.\n * The value can be in any format supported as `time-format`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.\n */\nexport const MaxTime = {\n  render: () => html`<ic-time-input\n    label=\"What time would you like to collect your coffee?\"\n    max=\"16:00:00\"\n  ></ic-time-input>`,\n  name: \"Max time\",\n};\n\n/**\n * To disable specific times in the time input, set the `disable-times` prop.\n * The `disable-times` prop accepts an array of time objects or strings.\n * Each time object can have a `start` and `end` property to define a range of disabled times, or it can be a single time string to disable that specific time.\n * The time can be in any format supported as `time-format`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.\n */\nexport const DisableTimes = {\n  render: () => html`<div>\n      <ic-time-input\n        id=\"time-input-default-disable-time\"\n        label=\"What time would you like to collect your coffee?\"\n      ></ic-time-input>\n    </div>\n    <script>\n      var timeInputDate = document.querySelector(\n        \"#time-input-default-disable-time\"\n      );\n      timeInputDate.disableTimes = [{ start: \"08:00\", end: \"10:00\" }, \"13:20\"];\n    </script>`,\n  name: \"Disable times\",\n};\n\n/**\n * The time 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: () => html`<ic-time-input\n      id=\"time-input-clear-value\"\n      label=\"What time you like to collect your coffee?\"\n      value=\"08:30:00\"\n    ></ic-time-input>\n    <br />\n    <ic-button id=\"update\">Update time</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(\"#time-input-clear-value\");\n      var btn = document.querySelector(\"#update\");\n      btn.addEventListener(\"click\", () => {\n        input.value = \"08:30:00\";\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  name: \"With clearing value\",\n};\n"]}

package/dist/collection/components/ic-time-input/test/helpers/ic-time-input.js

@@ -26,6 +26,7 @@ export const createTimeInputEnv = async (format) => {
     const hourInput = component.shadowRoot.querySelector(".hour-input");
     const minuteInput = component.shadowRoot.querySelector(".minute-input");
     const secondInput = component.shadowRoot.querySelector(".second-input");
+    const millisecondInput = component.shadowRoot.querySelector(".millisecond-input");
     const mockSelect = jest.fn();
     if (hourInput)
         hourInput.select = mockSelect;
@@ -40,6 +41,7 @@ export const createTimeInputEnv = async (format) => {
         hourInput,
         minuteInput,
         secondInput,
+        millisecondInput,
     };
 };
 //# sourceMappingURL=ic-time-input.js.map

package/dist/collection/components/ic-time-input/test/helpers/ic-time-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-time-input.js","sourceRoot":"","sources":["../../../../../../../src/components/ic-time-input/test/helpers/ic-time-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,qDAAqD,CAAC;AAsBnF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAM,GAAG,UAAU,EAAqB,EAAE,CACxE,WAAW,CAAC;IACV,UAAU,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;IACrC,QAAQ,EAAE,GAAG,EAAE,CAAC,CACd,qBAAe,KAAK,EAAC,YAAY,iBAAc,MAAM,GAAkB,CACxE;CACF,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAa,EAAE;IAChE,OAAO;QACL,SAAS,EAAE,YAAY;QACvB,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,KAAK,CAAC,KAAK;KAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,WAAmB,EAAiB,EAAE;IAClE,OAAO;QACL,GAAG,EAAE,GAAG,WAAW,EAAE;QACrB,cAAc,EAAE,GAAS,EAAE,CAAC,IAAI;KACjC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,EACrC,MAAe,EACS,EAAE;IAC1B,MAAM,IAAI,GAAG,MAAM,eAAe,CAAC,MAAM,CAAC,CAAC;IAE3C,MAAM,SAAS,GAAG,IAAI,CAAC,IAA8B,CAAC;IACtD,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC;IAE5C,MAAM,SAAS,GACb,SAAS,CAAC,UAAW,CAAC,aAAa,CAAmB,aAAa,CAAE,CAAC;IACxE,MAAM,WAAW,GACf,SAAS,CAAC,UAAW,CAAC,aAAa,CAAmB,eAAe,CAAE,CAAC;IAC1E,MAAM,WAAW,GACf,SAAS,CAAC,UAAW,CAAC,aAAa,CAAmB,eAAe,CAAE,CAAC;IAE1E,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAE7B,IAAI,SAAS;QAAE,SAAS,CAAC,MAAM,GAAG,UAAU,CAAC;IAC7C,IAAI,WAAW;QAAE,WAAW,CAAC,MAAM,GAAG,UAAU,CAAC;IACjD,IAAI,WAAW;QAAE,WAAW,CAAC,MAAM,GAAG,UAAU,CAAC;IAEjD,OAAO;QACL,IAAI;QACJ,SAAS;QACT,iBAAiB;QACjB,SAAS;QACT,WAAW;QACX,WAAW;KACZ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { SpecPage, newSpecPage } from \"@stencil/core/testing\";\nimport { TimeInput } from \"../../ic-time-input\";\nimport { h } from \"@stencil/core\";\nimport { IcInputLabel } from \"@ukic/web-components/dist/components/ic-input-label\";\n\ninterface EventType {\n  inputType: string;\n  target: HTMLInputElement;\n  data: string;\n}\n\ninterface KeyboardEvent {\n  key: string;\n  preventDefault: () => void;\n}\n\ninterface TimeInputType {\n  page: SpecPage;\n  component: HTMLIcTimeInputElement;\n  componentInstance: any;\n  hourInput: HTMLInputElement;\n  minuteInput: HTMLInputElement;\n  secondInput: HTMLInputElement;\n}\n\nexport const createTimeInput = (format = \"HH:MM:SS\"): Promise<SpecPage> =>\n  newSpecPage({\n    components: [TimeInput, IcInputLabel],\n    template: () => (\n      <ic-time-input label=\"Test label\" time-format={format}></ic-time-input>\n    ),\n  });\n\nexport const handleEvent = (input: HTMLInputElement): EventType => {\n  return {\n    inputType: \"insertText\",\n    target: input,\n    data: input.value,\n  };\n};\n\nexport const keyboardEvent = (keyboardKey: string): KeyboardEvent => {\n  return {\n    key: `${keyboardKey}`,\n    preventDefault: (): null => null,\n  };\n};\n\nexport const createTimeInputEnv = async (\n  format?: string\n): Promise<TimeInputType> => {\n  const page = await createTimeInput(format);\n\n  const component = page.root as HTMLIcTimeInputElement;\n  const componentInstance = page.rootInstance;\n\n  const hourInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\".hour-input\")!;\n  const minuteInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\".minute-input\")!;\n  const secondInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\".second-input\")!;\n\n  const mockSelect = jest.fn();\n\n  if (hourInput) hourInput.select = mockSelect;\n  if (minuteInput) minuteInput.select = mockSelect;\n  if (secondInput) secondInput.select = mockSelect;\n\n  return {\n    page,\n    component,\n    componentInstance,\n    hourInput,\n    minuteInput,\n    secondInput,\n  };\n};\n"]}
+{"version":3,"file":"ic-time-input.js","sourceRoot":"","sources":["../../../../../../../src/components/ic-time-input/test/helpers/ic-time-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,qDAAqD,CAAC;AAuBnF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAM,GAAG,UAAU,EAAqB,EAAE,CACxE,WAAW,CAAC;IACV,UAAU,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;IACrC,QAAQ,EAAE,GAAG,EAAE,CAAC,CACd,qBAAe,KAAK,EAAC,YAAY,iBAAc,MAAM,GAAkB,CACxE;CACF,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAa,EAAE;IAChE,OAAO;QACL,SAAS,EAAE,YAAY;QACvB,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,KAAK,CAAC,KAAK;KAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,WAAmB,EAAiB,EAAE;IAClE,OAAO;QACL,GAAG,EAAE,GAAG,WAAW,EAAE;QACrB,cAAc,EAAE,GAAS,EAAE,CAAC,IAAI;KACjC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,EACrC,MAAe,EACS,EAAE;IAC1B,MAAM,IAAI,GAAG,MAAM,eAAe,CAAC,MAAM,CAAC,CAAC;IAE3C,MAAM,SAAS,GAAG,IAAI,CAAC,IAA8B,CAAC;IACtD,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC;IAE5C,MAAM,SAAS,GACb,SAAS,CAAC,UAAW,CAAC,aAAa,CAAmB,aAAa,CAAE,CAAC;IACxE,MAAM,WAAW,GACf,SAAS,CAAC,UAAW,CAAC,aAAa,CAAmB,eAAe,CAAE,CAAC;IAC1E,MAAM,WAAW,GACf,SAAS,CAAC,UAAW,CAAC,aAAa,CAAmB,eAAe,CAAE,CAAC;IAC1E,MAAM,gBAAgB,GACpB,SAAS,CAAC,UAAW,CAAC,aAAa,CACjC,oBAAoB,CACpB,CAAC;IAEL,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAE7B,IAAI,SAAS;QAAE,SAAS,CAAC,MAAM,GAAG,UAAU,CAAC;IAC7C,IAAI,WAAW;QAAE,WAAW,CAAC,MAAM,GAAG,UAAU,CAAC;IACjD,IAAI,WAAW;QAAE,WAAW,CAAC,MAAM,GAAG,UAAU,CAAC;IAEjD,OAAO;QACL,IAAI;QACJ,SAAS;QACT,iBAAiB;QACjB,SAAS;QACT,WAAW;QACX,WAAW;QACX,gBAAgB;KACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { SpecPage, newSpecPage } from \"@stencil/core/testing\";\nimport { TimeInput } from \"../../ic-time-input\";\nimport { h } from \"@stencil/core\";\nimport { IcInputLabel } from \"@ukic/web-components/dist/components/ic-input-label\";\n\ninterface EventType {\n  inputType: string;\n  target: HTMLInputElement;\n  data: string;\n}\n\ninterface KeyboardEvent {\n  key: string;\n  preventDefault: () => void;\n}\n\ninterface TimeInputType {\n  page: SpecPage;\n  component: HTMLIcTimeInputElement;\n  componentInstance: any;\n  hourInput: HTMLInputElement;\n  minuteInput: HTMLInputElement;\n  secondInput: HTMLInputElement;\n  millisecondInput: HTMLInputElement;\n}\n\nexport const createTimeInput = (format = \"HH:MM:SS\"): Promise<SpecPage> =>\n  newSpecPage({\n    components: [TimeInput, IcInputLabel],\n    template: () => (\n      <ic-time-input label=\"Test label\" time-format={format}></ic-time-input>\n    ),\n  });\n\nexport const handleEvent = (input: HTMLInputElement): EventType => {\n  return {\n    inputType: \"insertText\",\n    target: input,\n    data: input.value,\n  };\n};\n\nexport const keyboardEvent = (keyboardKey: string): KeyboardEvent => {\n  return {\n    key: `${keyboardKey}`,\n    preventDefault: (): null => null,\n  };\n};\n\nexport const createTimeInputEnv = async (\n  format?: string\n): Promise<TimeInputType> => {\n  const page = await createTimeInput(format);\n\n  const component = page.root as HTMLIcTimeInputElement;\n  const componentInstance = page.rootInstance;\n\n  const hourInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\".hour-input\")!;\n  const minuteInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\".minute-input\")!;\n  const secondInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\".second-input\")!;\n  const millisecondInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\n      \".millisecond-input\"\n    )!;\n\n  const mockSelect = jest.fn();\n\n  if (hourInput) hourInput.select = mockSelect;\n  if (minuteInput) minuteInput.select = mockSelect;\n  if (secondInput) secondInput.select = mockSelect;\n\n  return {\n    page,\n    component,\n    componentInstance,\n    hourInput,\n    minuteInput,\n    secondInput,\n    millisecondInput,\n  };\n};\n"]}

package/dist/collection/components/ic-time-selector/ic-time-selector.css

@@ -0,0 +1,293 @@
+:host(.ic-time-selector-small) {
+  --time-selector-padded-item-height: var(--ic-space-lg);
+}
+
+:host(.ic-time-selector-medium) {
+  --time-selector-padded-item-height: calc(
+    var(--ic-space-lg) + var(--ic-space-xxs)
+  );
+}
+
+:host(.ic-time-selector-large) {
+  --time-selector-padded-item-height: var(--ic-space-xl);
+}
+
+.ic-time-selector-dialog-container {
+  background-color: var(--ic-time-picker-time-selector-bg);
+  border: var(--ic-space-1px) solid var(--ic-time-picker-time-selector-border);
+  border-radius: var(--ic-space-xxs);
+  padding: var(--ic-space-xs);
+  max-width: calc(
+    3 * var(--ic-space-xxl) + var(--ic-space-xl) + var(--ic-space-xxs)
+  );
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+:host(.ic-time-selector-small) .ic-time-selector-dialog-container {
+  padding: var(--ic-space-xxs);
+  max-width: calc(
+    3 * var(--ic-space-xxl) + var(--ic-space-lg) + var(--ic-space-xxs)
+  );
+}
+
+:host(.ic-time-selector-large) .ic-time-selector-dialog-container {
+  padding: var(--ic-space-md);
+  max-width: calc(
+    3 * var(--ic-space-xxl) + var(--ic-space-xl) + var(--ic-space-xs) +
+      var(--ic-space-xxs)
+  );
+}
+
+.ic-time-selector-item {
+  height: var(--ic-space-lg);
+  padding: var(--ic-space-xxxs);
+  text-align: center;
+  cursor: pointer;
+  scroll-snap-align: start;
+  transition: background 0.2s, color 0.2s;
+}
+
+:host(.ic-time-selector-small) .ic-time-selector-item {
+  padding: 0;
+}
+
+:host(.ic-time-selector-large) .ic-time-selector-item {
+  padding: var(--ic-space-xxs);
+}
+
+.ic-time-selector-item:hover:not(.disabled):not(.selected) {
+  background-color: var(--ic-time-picker-time-bg-hover);
+}
+
+.ic-time-selector-item:active:not(.disabled):not(.selected) {
+  background-color: var(--ic-time-picker-time-bg-pressed);
+}
+
+.ic-time-selector-item.selected {
+  background-color: var(--ic-time-picker-time-bg-selected);
+
+  --ic-typography-color: var(--ic-time-picker-time-text-selected);
+
+  position: relative;
+}
+
+.ic-time-selector-item.selected:hover {
+  background-color: var(--ic-time-picker-time-active-bg-hover);
+}
+
+.ic-time-selector-item.selected:active {
+  background-color: var(--ic-time-picker-time-active-bg-pressed);
+}
+
+.ic-time-selector-colon-selected {
+  background-color: var(--ic-time-picker-colon-bg-selected);
+  color: var(--ic-time-picker-colon-selected) !important;
+}
+
+.ic-time-selector-item.selected::before,
+.ic-time-selector-item.selected::after,
+.ic-time-selector-colon-selected::before,
+.ic-time-selector-colon-selected::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: var(--ic-space-1px);
+  background: var(--ic-time-picker-time-selector-bg);
+}
+
+.ic-time-selector-item.selected::before,
+.ic-time-selector-colon-selected::before {
+  top: 0;
+}
+
+.ic-time-selector-item.selected::after,
+.ic-time-selector-colon-selected::after {
+  bottom: 0;
+}
+
+.ic-time-selector-item.disabled {
+  --ic-typography-color: var(--ic-time-picker-time-text-disabled);
+
+  cursor: not-allowed;
+}
+
+.ic-time-selector-column-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.ic-time-selector-scroll-row {
+  height: var(--time-selector-padded-item-height) !important;
+  background: transparent !important;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: default !important;
+  box-sizing: border-box;
+}
+
+:host(.ic-time-selector-small) .ic-time-selector-scroll-row-last {
+  height: calc(var(--ic-space-1px) + var(--ic-space-xxxs)) !important;
+}
+
+:host(.ic-time-selector-medium) .ic-time-selector-scroll-row-last,
+:host(.ic-time-selector-large) .ic-time-selector-scroll-row-last {
+  height: calc(
+    var(--ic-space-1px) + var(--ic-space-xxxs) + var(--ic-space-md)
+  ) !important;
+}
+
+.ic-time-selector-scroll-row:hover,
+.ic-time-selector-scroll-row:active {
+  background: transparent !important;
+}
+
+.ic-time-selector-header-row {
+  color: var(--ic-time-picker-hh-label);
+
+  --ic-typography-color: var(--ic-time-picker-hh-label) !important;
+
+  background: transparent !important;
+  text-align: center;
+  height: var(--time-selector-padded-item-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ic-time-selector-header-border {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: var(--time-selector-padded-item-height);
+  height: var(--ic-space-1px);
+  background: var(--ic-time-picker-header-border);
+  pointer-events: none;
+}
+
+.ic-time-selector-colon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ic-time-picker-colon-default);
+  height: var(--time-selector-padded-item-height);
+  margin-top: calc(3 * var(--time-selector-padded-item-height));
+}
+
+.ic-time-selector-columns {
+  display: flex;
+  flex-direction: row;
+  border-bottom: var(--ic-space-1px) solid var(--ic-time-picker-lower-border);
+  margin: 0 var(--ic-space-xxs);
+  position: relative;
+  z-index: 1;
+}
+
+.ic-time-selector-highlight-lines {
+  position: relative;
+  width: 100%;
+}
+
+.ic-time-selector-highlight {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: var(--ic-space-1px);
+  background: var(--ic-time-picker-selection-border);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.ic-time-selector-highlight-top {
+  top: calc(3 * var(--time-selector-padded-item-height) - var(--ic-space-1px));
+}
+
+.ic-time-selector-highlight-bottom {
+  top: calc(4 * var(--time-selector-padded-item-height));
+}
+
+.ic-time-selector-column {
+  height: calc((5 * var(--ic-space-xxl)) + (3 * var(--ic-space-1px)));
+  overflow-y: auto;
+  width: calc(var(--ic-space-xl) + var(--ic-space-xs));
+  position: relative;
+  scroll-snap-type: y mandatory;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+:host(.ic-time-selector-small) .ic-time-selector-column {
+  width: calc(var(--ic-space-xl) + var(--ic-space-xxs) + var(--ic-space-xxxs));
+}
+
+:host(.ic-time-selector-large) .ic-time-selector-column {
+  width: calc(var(--ic-space-xl) + var(--ic-space-xs) + var(--ic-space-xxxs));
+}
+
+.ic-time-selector-column-period {
+  margin-left: var(--ic-space-xxs);
+}
+
+.ic-time-selector-column::-webkit-scrollbar {
+  display: none;
+}
+
+.ic-time-selector-column:focus-visible,
+.ic-time-selector-item:focus-visible {
+  outline: none;
+  background-color: transparent;
+}
+
+.ic-time-selector-column:focus {
+  box-shadow: var(--ic-border-focus);
+  border-radius: var(--ic-border-radius);
+  transition: var(--ic-easing-transition-fast);
+  z-index: 3;
+}
+
+.ic-time-selector-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ic-time-selector-actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  margin-top: var(--ic-space-xs);
+  margin-left: auto;
+}
+
+.ic-time-selector-check-btn {
+  margin-left: calc(var(--ic-space-xs) + var(--ic-space-xxxs));
+}
+
+.sr-only {
+  position: absolute;
+  left: -9999px;
+}
+
+@media (forced-colors: active) {
+  .ic-time-selector-item.selected {
+    background-color: highlight !important;
+  }
+
+  .ic-time-selector-item.disabled {
+    --ic-typography-color: GrayText !important;
+  }
+
+  .ic-time-selector-column:focus {
+    border: var(--ic-border-hc);
+  }
+
+  .ic-time-selector-highlight {
+    background: Highlight !important;
+  }
+}