@siemens/ix 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/collection/components/tabs/test/tabs.ct.js

@@ -0,0 +1,84 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+test('renders', async ({ mount, page }) => {
+  await mount(`
+    <ix-tabs>
+      <ix-tab-item>Item 1</ix-tab-item>
+      <ix-tab-item>Item 2</ix-tab-item>
+      <ix-tab-item>Item 3</ix-tab-item>
+    </ix-tabs>
+  `);
+  const tabs = page.locator('ix-tabs');
+  const tab = page.locator('ix-tab-item').nth(0);
+  await expect(tabs).toHaveClass(/hydrated/);
+  await expect(tab).toHaveClass(/selected/);
+});
+test('should change tab', async ({ mount, page }) => {
+  await mount(`
+    <ix-tabs>
+      <ix-tab-item>Item 1</ix-tab-item>
+      <ix-tab-item>Item 2</ix-tab-item>
+      <ix-tab-item>Item 3</ix-tab-item>
+    </ix-tabs>
+  `);
+  const tabs = page.locator('ix-tabs');
+  const tab = page.locator('ix-tab-item').nth(2);
+  await tab.click();
+  await expect(tabs).toHaveClass(/hydrated/);
+  await expect(tab).toHaveClass(/selected/);
+});
+test('should not change tab by tab click event', async ({ mount, page }) => {
+  await mount(`
+    <ix-tabs>
+      <ix-tab-item>Item 1</ix-tab-item>
+      <ix-tab-item>Item 2</ix-tab-item>
+      <ix-tab-item>Item 3</ix-tab-item>
+    </ix-tabs>
+  `);
+  const tabs = page.locator('ix-tabs');
+  const firstTab = page.locator('ix-tab-item').nth(0);
+  const lastTab = page.locator('ix-tab-item').nth(2);
+  lastTab.evaluate((tabElement) => {
+    tabElement.addEventListener('tabClick', (event) => event.preventDefault());
+  });
+  await lastTab.click();
+  await expect(tabs).toHaveClass(/hydrated/);
+  await expect(firstTab).toHaveClass(/selected/);
+  await expect(lastTab).not.toHaveClass(/selected/);
+});
+test('should not change tab by tabs event', async ({ mount, page }) => {
+  await mount(`
+    <ix-tabs>
+      <ix-tab-item>Item 1</ix-tab-item>
+      <ix-tab-item>Item 2</ix-tab-item>
+      <ix-tab-item>Item 3</ix-tab-item>
+    </ix-tabs>
+  `);
+  const tabs = page.locator('ix-tabs');
+  const firstTab = page.locator('ix-tab-item').nth(0);
+  const lastTab = page.locator('ix-tab-item').nth(2);
+  tabs.evaluate((tabElement) => {
+    tabElement.addEventListener('selectedChange', (event) => event.preventDefault());
+  });
+  await lastTab.click();
+  await expect(tabs).toHaveClass(/hydrated/);
+  await expect(firstTab).toHaveClass(/selected/);
+  await expect(lastTab).not.toHaveClass(/selected/);
+});
+//# sourceMappingURL=tabs.ct.js.map

package/dist/collection/components/tabs/test/tabs.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.ct.js","sourceRoot":"","sources":["../../../../src/components/tabs/test/tabs.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n    <ix-tabs>\n      <ix-tab-item>Item 1</ix-tab-item>\n      <ix-tab-item>Item 2</ix-tab-item>\n      <ix-tab-item>Item 3</ix-tab-item>\n    </ix-tabs>\n  `);\n  const tabs = page.locator('ix-tabs');\n  const tab = page.locator('ix-tab-item').nth(0);\n\n  await expect(tabs).toHaveClass(/hydrated/);\n  await expect(tab).toHaveClass(/selected/);\n});\n\ntest('should change tab', async ({ mount, page }) => {\n  await mount(`\n    <ix-tabs>\n      <ix-tab-item>Item 1</ix-tab-item>\n      <ix-tab-item>Item 2</ix-tab-item>\n      <ix-tab-item>Item 3</ix-tab-item>\n    </ix-tabs>\n  `);\n  const tabs = page.locator('ix-tabs');\n  const tab = page.locator('ix-tab-item').nth(2);\n\n  await tab.click();\n\n  await expect(tabs).toHaveClass(/hydrated/);\n  await expect(tab).toHaveClass(/selected/);\n});\n\ntest('should not change tab by tab click event', async ({ mount, page }) => {\n  await mount(`\n    <ix-tabs>\n      <ix-tab-item>Item 1</ix-tab-item>\n      <ix-tab-item>Item 2</ix-tab-item>\n      <ix-tab-item>Item 3</ix-tab-item>\n    </ix-tabs>\n  `);\n  const tabs = page.locator('ix-tabs');\n  const firstTab = page.locator('ix-tab-item').nth(0);\n  const lastTab = page.locator('ix-tab-item').nth(2);\n\n  lastTab.evaluate((tabElement) => {\n    tabElement.addEventListener('tabClick', (event) => event.preventDefault());\n  });\n\n  await lastTab.click();\n\n  await expect(tabs).toHaveClass(/hydrated/);\n  await expect(firstTab).toHaveClass(/selected/);\n  await expect(lastTab).not.toHaveClass(/selected/);\n});\n\ntest('should not change tab by tabs event', async ({ mount, page }) => {\n  await mount(`\n    <ix-tabs>\n      <ix-tab-item>Item 1</ix-tab-item>\n      <ix-tab-item>Item 2</ix-tab-item>\n      <ix-tab-item>Item 3</ix-tab-item>\n    </ix-tabs>\n  `);\n  const tabs = page.locator('ix-tabs');\n  const firstTab = page.locator('ix-tab-item').nth(0);\n  const lastTab = page.locator('ix-tab-item').nth(2);\n\n  tabs.evaluate((tabElement) => {\n    tabElement.addEventListener('selectedChange', (event) =>\n      event.preventDefault()\n    );\n  });\n\n  await lastTab.click();\n\n  await expect(tabs).toHaveClass(/hydrated/);\n  await expect(firstTab).toHaveClass(/selected/);\n  await expect(lastTab).not.toHaveClass(/selected/);\n});\n"]}

package/dist/collection/components/tile/tile.css

@@ -42,7 +42,19 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   min-width: 11.937rem;
   max-width: 11.937rem;
   width: 11.937rem;
@@ -59,6 +71,30 @@
 :host *::before {
   box-sizing: border-box;
 }
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
 :host .tile-header {
   display: flex;
   align-items: center;

package/dist/collection/components/time-picker/time-picker.css

@@ -26,7 +26,242 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+label {
+  color: var(--theme-color-soft-text);
+}
+
+input, input:-webkit-autofill {
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-size: var(--theme-ms-0);
+  line-height: var(--theme-line-height-md);
+  font-weight: var(--theme-font-weight-normal);
+  letter-spacing: var(--theme-letter-spacing-xl);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  min-height: 2rem;
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--theme-input--background);
+  color: var(--theme-input--color);
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
+  border-radius: var(--theme-input--border-radius);
+  box-shadow: var(--theme-input--box-shadow);
+}
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-input--background) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color) !important;
+  border-color: var(--theme-input--border-color) !important;
+}
+input::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+input::placeholder {
+  color: var(--theme-input-hint--color);
+}
+input.hover, input:hover {
+  border-color: var(--theme-input--border-color--hover);
+  background-color: var(--theme-input--background--hover);
+}
+input.focus, input:focus {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus);
+}
+input:-moz-read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+input.read-only, input:read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+input:disabled {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  color: var(--theme-input--color--disabled);
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
+}
+
+input[type=number] {
+  text-align: right;
+}
+input[type=number]::-webkit-inner-spin-button {
+  margin-right: -2px;
+  margin-left: 2px;
+  display: none;
+}
+
+textarea {
+  height: 3.25rem;
+  padding: 0.375rem 1.25rem 0.375rem 0.5rem;
+}
+textarea, textarea:-webkit-autofill {
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-size: var(--theme-ms-0);
+  line-height: var(--theme-line-height-md);
+  font-weight: var(--theme-font-weight-normal);
+  letter-spacing: var(--theme-letter-spacing-xl);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  min-height: 2rem;
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--theme-input--background);
+  color: var(--theme-input--color);
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
+  border-radius: var(--theme-input--border-radius);
+  box-shadow: var(--theme-input--box-shadow);
+}
+textarea:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-input--background) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color) !important;
+  border-color: var(--theme-input--border-color) !important;
+}
+textarea::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+textarea::placeholder {
+  color: var(--theme-input-hint--color);
+}
+textarea.hover, textarea:hover {
+  border-color: var(--theme-input--border-color--hover);
+  background-color: var(--theme-input--background--hover);
+}
+textarea.focus, textarea:focus {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus);
+}
+textarea:-moz-read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+textarea.read-only, textarea:read-only {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
+}
+textarea:disabled {
+  box-shadow: none;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  color: var(--theme-input--color--disabled);
+  border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
+}
+
+textarea ~ .valid-feedback,
+textarea ~ .invalid-feedback,
+input ~ .valid-feedback,
+input ~ .invalid-feedback {
+  display: none;
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-size: var(--theme-ms-0);
+  line-height: var(--theme-line-height-md);
+  font-weight: var(--theme-font-weight-normal);
+  letter-spacing: var(--theme-letter-spacing-xl);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+}
+
+form textarea ~ .valid-feedback,
+form input ~ .valid-feedback {
+  color: var(--theme-color-success);
+}
+form textarea ~ .invalid-feedback,
+form input ~ .invalid-feedback {
+  color: var(--theme-color-alarm-text);
+}
+
+form:not([novalidate]) :invalid,
+form:not([novalidate]) .is-invalid,
+form.was-validated :invalid,
+form.was-validated .is-invalid {
+  background-color: var(--theme-input-error--background);
+  border-color: var(--theme-input-error--border-color);
+  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
+  background-position: left calc(0.375em + 0.1875rem) center;
+  padding-right: 0.75rem;
+  padding-left: calc(1.5em + 0.75rem);
+  background-size: 18px;
+  background-repeat: no-repeat;
+}
+form:not([novalidate]) :invalid ~ .invalid-feedback,
+form:not([novalidate]) .is-invalid ~ .invalid-feedback,
+form.was-validated :invalid ~ .invalid-feedback,
+form.was-validated .is-invalid ~ .invalid-feedback {
+  display: block;
+}
+form:not([novalidate]) :valid ~ .valid-feedback,
+form:not([novalidate]) .is-valid ~ .valid-feedback,
+form.was-validated :valid ~ .valid-feedback,
+form.was-validated .is-valid ~ .valid-feedback {
+  display: block;
+}
+
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   /*
    * SPDX-FileCopyrightText: 2023 Siemens AG
    *
@@ -77,6 +312,30 @@
 :host *::before {
   box-sizing: border-box;
 }
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
 :host .form-control,
 :host .form-control-plaintext {
   -webkit-font-smoothing: antialiased;
@@ -116,12 +375,13 @@
 :host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, :host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover {
+:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, :host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, :host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, :host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover {
   background-color: var(--theme-input--background--hover);
   border-color: var(--theme-input--border-color--hover);
   cursor: auto;
 }
-:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,
+:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, :host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,
+:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,
 :host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover {
   background-color: var(--theme-input--background--hover);
   border-color: var(--theme-input--border-color--hover);
@@ -253,31 +513,31 @@
 :host input.disabled, :host input:disabled {
   color: var(--theme-input--color--disabled);
 }
+:host input:-moz-read-only {
+  cursor: default;
+}
+:host input:read-only, :host input.readonly {
+  cursor: default;
+}
 :host .header {
   display: flex;
   align-items: center;
   justify-content: center;
-}
-:host .title {
-  display: flex;
-  align-items: center;
-  font: var(--theme-text-default-title);
-  min-height: 2.5rem;
-  color: var(--theme-datepicker-time-header--color);
+  height: 2.5rem;
 }
 :host .clock {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 5rem 0;
+  padding: 4.25rem 0;
 }
 :host input,
 :host .time-reference {
   width: 2.625rem;
   height: 1.5rem;
   text-align: center;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
   /* Chrome, Safari, Edge, Opera */
   /* Firefox */
 }
@@ -319,5 +579,6 @@
   display: none;
 }
 :host .time-reference {
-  margin: 0.75rem 0;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }

package/dist/collection/components/time-picker/time-picker.js

@@ -179,7 +179,7 @@ export class TimePicker {
     }
     const hideHourSeperator = hideMinutes || hideHour;
     const hideMinutesSeperator = hideSeconds || hideMinutes;
-    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("div", { class: "title" }, "Time")), h("div", { class: "clock" }, h("div", { class: { columns: true, hidden: hideHour } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { hours: true }), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: "hours", type: "number", placeholder: "HH", min: "0", max: this.getMaxDisplayedHour(), value: this.getDisplayedHour(), ref: (ref) => (this.hourInputRef = ref), onChange: () => this.setInputValue(this.hourInputRef, Number(this.hourInputRef.value), this.getMaxDisplayedHour()) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { hours: true }), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideHourSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideMinutes } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { minutes: true }), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: "minutes", type: "number", placeholder: "MM", min: "0", max: "59", value: this.minutes, ref: (ref) => (this.minuteInputRef = ref), onChange: () => this.setInputValue(this.minuteInputRef, Number(this.minuteInputRef.value), 59) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { minutes: true }), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideMinutesSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideSeconds } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { seconds: true }), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: "seconds", type: "number", placeholder: "SS", min: "0", max: "59", value: this.seconds, ref: (ref) => (this.secondInputRef = ref), onChange: () => this.setInputValue(this.secondInputRef, Number(this.secondInputRef.value), 59) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { seconds: true }), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), h("div", { class: {
+    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("ix-typography", { variant: "default-title" }, "Time")), h("div", { class: "clock" }, h("div", { class: { columns: true, hidden: hideHour } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { hours: true }), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: "hours", type: "number", placeholder: "HH", min: "0", max: this.getMaxDisplayedHour(), value: this.getDisplayedHour(), ref: (ref) => (this.hourInputRef = ref), onChange: () => this.setInputValue(this.hourInputRef, Number(this.hourInputRef.value), this.getMaxDisplayedHour()) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { hours: true }), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideHourSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideMinutes } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { minutes: true }), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: "minutes", type: "number", placeholder: "MM", min: "0", max: "59", value: this.minutes, ref: (ref) => (this.minuteInputRef = ref), onChange: () => this.setInputValue(this.minuteInputRef, Number(this.minuteInputRef.value), 59) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { minutes: true }), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideMinutesSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideSeconds } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { seconds: true }), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: "seconds", type: "number", placeholder: "SS", min: "0", max: "59", value: this.seconds, ref: (ref) => (this.secondInputRef = ref), onChange: () => this.setInputValue(this.secondInputRef, Number(this.secondInputRef.value), 59) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { seconds: true }), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), h("div", { class: {
         columns: true,
         'default-space': true,
         hidden: hideTimeReference,

package/dist/collection/components/time-picker/time-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.js","sourceRoot":"","sources":["../../../src/components/time-picker/time-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\n\nexport type TimePickerCorners = DateTimeCardCorners;\n\n@Component({\n  tag: 'ix-time-picker',\n  styleUrl: 'time-picker.scss',\n  shadow: true,\n})\nexport class TimePicker {\n  /**\n   * Format of time string\n   *\n   * @since 1.1.0\n   */\n  @Prop() format: string = 'TT';\n\n  /**\n   * Corner style\n   */\n  @Prop() corners: TimePickerCorners = 'rounded';\n\n  /**\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = false;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = false;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = false;\n\n  /**\n   * Select time with format string\n   *\n   * @since 1.1.0\n   */\n  @Prop() time: string = DateTime.now().toFormat(this.format);\n\n  /**\n   * Show time reference input\n   *\n   * @since 1.1.0 time reference is default aligned with formt tt\n   */\n  @Prop({ mutable: true }) showTimeReference = undefined;\n\n  /**\n   * Set time reference\n   */\n  @Prop({ mutable: true }) timeReference: 'AM' | 'PM' = DateTime.fromFormat(\n    this.time,\n    this.format\n  ).toFormat('a') as 'PM' | 'AM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectTime = 'Done';\n\n  /**\n   * Time event\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Time change event\n   */\n  @Event() timeChange: EventEmitter<string>;\n\n  @State() hourInputRef: HTMLInputElement;\n  @State() minuteInputRef: HTMLInputElement;\n  @State() secondInputRef: HTMLInputElement;\n  @State() referenceInputRef: HTMLInputElement;\n\n  get hour() {\n    return this._time.hour;\n  }\n\n  get minutes() {\n    return this._time.minute;\n  }\n\n  get seconds() {\n    return this._time.second;\n  }\n\n  private _time: DateTime = DateTime.now();\n\n  private setInputValue(\n    inputElement: HTMLInputElement,\n    value: number,\n    max: number\n  ) {\n    if (value > max) {\n      inputElement.value = max.toString();\n    } else if (value < 0) {\n      inputElement.value = '0';\n    } else {\n      inputElement.value = value.toString();\n    }\n\n    this.updateAndEmitTime();\n  }\n\n  private updateAndEmitTime() {\n    this._time = this._time.set({\n      hour: Number(this.hourInputRef.value),\n      minute: Number(this.minuteInputRef.value),\n      second: Number(this.secondInputRef.value),\n    });\n\n    this.setHourAccordingToReference();\n\n    this.emitTimeChange();\n  }\n\n  private toggleInputValue(\n    inputElement: HTMLInputElement,\n    currentValue: number,\n    step: 'up' | 'down',\n    max: number\n  ) {\n    if (step === 'up') {\n      if (currentValue === max) {\n        inputElement.value = '0';\n      } else {\n        inputElement.stepUp();\n      }\n    } else {\n      if (currentValue === 0) {\n        inputElement.value = max.toString();\n      } else {\n        inputElement.stepDown();\n      }\n    }\n  }\n\n  private toggleHourInputWithRef(\n    inputElement: HTMLInputElement,\n    currentValue: number,\n    step: 'up' | 'down'\n  ) {\n    if (step === 'up') {\n      if (currentValue === this.getMaxHour()) {\n        inputElement.value = '0';\n      } else {\n        inputElement.stepUp();\n      }\n    } else {\n      if (\n        (this.showTimeReference &&\n          this.timeReference === 'PM' &&\n          currentValue === 12) ||\n        currentValue === 0\n      ) {\n        inputElement.value = this.getMaxDisplayedHour().toString();\n      } else {\n        inputElement.stepDown();\n      }\n    }\n  }\n\n  private updateInput(\n    step: 'up' | 'down',\n    { hours = undefined, minutes = undefined, seconds = undefined }\n  ) {\n    if (hours) {\n      if (this.showTimeReference) {\n        this.toggleHourInputWithRef(this.hourInputRef, this.hour, step);\n      } else {\n        this.toggleInputValue(this.hourInputRef, this.hour, step, 23);\n      }\n    }\n\n    if (minutes) {\n      this.toggleInputValue(this.minuteInputRef, this.minutes, step, 59);\n    }\n\n    if (seconds) {\n      this.toggleInputValue(this.secondInputRef, this.seconds, step, 59);\n    }\n\n    this.updateAndEmitTime();\n  }\n\n  private changeReference() {\n    if (this.timeReference === 'AM') {\n      this.timeReference = 'PM';\n    } else {\n      this.timeReference = 'AM';\n    }\n\n    this.setHourAccordingToReference();\n\n    this.emitTimeChange();\n  }\n\n  private setHourAccordingToReference() {\n    if (!this.showTimeReference) {\n      return;\n    }\n\n    let hour = Number(this.hourInputRef.value);\n\n    if (this.timeReference === 'PM') hour += 12;\n\n    this._time = this._time.set({ hour });\n  }\n\n  private emitTimeChange() {\n    const time = this._time.toFormat(this.format);\n    this.timeChange.emit(time);\n  }\n\n  componentWillLoad() {\n    this._time = DateTime.fromFormat(this.time, this.format);\n    if (this.showTimeReference === undefined) {\n      const matchedKeys = Object.keys(\n        DateTime.fromFormatExplain(this.time, this.format).matches\n      );\n      this.showTimeReference = matchedKeys.includes('a');\n    }\n  }\n\n  /**\n   * Get current time\n   */\n  @Method()\n  async getCurrentTime() {\n    return this._time.toFormat(this.format);\n  }\n\n  private getDisplayedHour() {\n    if (this.showTimeReference && this.timeReference === 'PM') {\n      return this._time.hour - 12;\n    }\n\n    return this._time.hour;\n  }\n\n  private getMaxDisplayedHour() {\n    if (this.showTimeReference) {\n      return 11;\n    }\n\n    return 23;\n  }\n\n  private getMaxHour() {\n    if (this.showTimeReference && this.timeReference === 'AM') {\n      return 11;\n    }\n\n    return 23;\n  }\n\n  render() {\n    let hideHour = !this.showHour;\n    let hideMinutes = !this.showMinutes;\n    let hideSeconds = !this.showSeconds;\n    const hideTimeReference = !this.showTimeReference;\n    const hideIndividual = !this.individual;\n\n    if (hideHour && hideMinutes && hideSeconds) {\n      hideHour = false;\n      hideMinutes = false;\n      hideSeconds = false;\n    }\n\n    const hideHourSeperator = hideMinutes || hideHour;\n    const hideMinutesSeperator = hideSeconds || hideMinutes;\n\n    return (\n      <Host>\n        <ix-date-time-card individual={this.individual} corners={this.corners}>\n          <div class=\"header\" slot=\"header\">\n            <div class=\"title\">Time</div>\n          </div>\n\n          <div class=\"clock\">\n            <div class={{ columns: true, hidden: hideHour }}>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('up', { hours: true })}\n                ghost\n                icon=\"chevron-up\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <input\n                class=\"form-control\"\n                name=\"hours\"\n                type=\"number\"\n                placeholder=\"HH\"\n                min=\"0\"\n                max={this.getMaxDisplayedHour()}\n                value={this.getDisplayedHour()}\n                ref={(ref) => (this.hourInputRef = ref)}\n                onChange={() =>\n                  this.setInputValue(\n                    this.hourInputRef,\n                    Number(this.hourInputRef.value),\n                    this.getMaxDisplayedHour()\n                  )\n                }\n              ></input>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('down', { hours: true })}\n                ghost\n                icon=\"chevron-down\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n\n            <div\n              class={{ 'column-seperator': true, hidden: hideHourSeperator }}\n            >\n              :\n            </div>\n\n            <div class={{ columns: true, hidden: hideMinutes }}>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('up', { minutes: true })}\n                ghost\n                icon=\"chevron-up\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <input\n                class=\"form-control\"\n                name=\"minutes\"\n                type=\"number\"\n                placeholder=\"MM\"\n                min=\"0\"\n                max=\"59\"\n                value={this.minutes}\n                ref={(ref) => (this.minuteInputRef = ref)}\n                onChange={() =>\n                  this.setInputValue(\n                    this.minuteInputRef,\n                    Number(this.minuteInputRef.value),\n                    59\n                  )\n                }\n              ></input>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('down', { minutes: true })}\n                ghost\n                icon=\"chevron-down\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n\n            <div\n              class={{ 'column-seperator': true, hidden: hideMinutesSeperator }}\n            >\n              :\n            </div>\n\n            <div class={{ columns: true, hidden: hideSeconds }}>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('up', { seconds: true })}\n                ghost\n                icon=\"chevron-up\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <input\n                class=\"form-control\"\n                name=\"seconds\"\n                type=\"number\"\n                placeholder=\"SS\"\n                min=\"0\"\n                max=\"59\"\n                value={this.seconds}\n                ref={(ref) => (this.secondInputRef = ref)}\n                onChange={() =>\n                  this.setInputValue(\n                    this.secondInputRef,\n                    Number(this.secondInputRef.value),\n                    59\n                  )\n                }\n              ></input>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('down', { seconds: true })}\n                ghost\n                icon=\"chevron-down\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n\n            <div\n              class={{\n                columns: true,\n                'default-space': true,\n                hidden: hideTimeReference,\n              }}\n            >\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.changeReference()}\n                ghost\n                icon=\"chevron-up\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <div class=\"time-reference\">{this.timeReference}</div>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.changeReference()}\n                ghost\n                icon=\"chevron-down\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n          </div>\n\n          <div class={{ button: true, hidden: hideIndividual }}>\n            <ix-button\n              onClick={() => this.done.emit(this._time.toFormat(this.format))}\n            >\n              {this.textSelectTime}\n            </ix-button>\n          </div>\n        </ix-date-time-card>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"time-picker.js","sourceRoot":"","sources":["../../../src/components/time-picker/time-picker.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAUjC,MAAM,OAAO,UAAU;;IAyFb,UAAK,GAAa,QAAQ,CAAC,GAAG,EAAE,CAAC;kBAnFhB,IAAI;mBAKQ,SAAS;sBAKhB,IAAI;oBAKf,KAAK;uBAKF,KAAK;uBAKL,KAAK;gBAOJ,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;6BAOd,SAAS;yBAKA,QAAQ,CAAC,UAAU,CACvE,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,MAAM,CACZ,CAAC,QAAQ,CAAC,GAAG,CAAgB;0BAOL,MAAM;;;;;;EAiB/B,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;EACzB,CAAC;EAED,IAAI,OAAO;IACT,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;EAC3B,CAAC;EAED,IAAI,OAAO;IACT,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;EAC3B,CAAC;EAIO,aAAa,CACnB,YAA8B,EAC9B,KAAa,EACb,GAAW;IAEX,IAAI,KAAK,GAAG,GAAG,EAAE;MACf,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;KACrC;SAAM,IAAI,KAAK,GAAG,CAAC,EAAE;MACpB,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC;KAC1B;SAAM;MACL,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;KACvC;IAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;EAC3B,CAAC;EAEO,iBAAiB;IACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;MAC1B,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACrC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;MACzC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;KAC1C,CAAC,CAAC;IAEH,IAAI,CAAC,2BAA2B,EAAE,CAAC;IAEnC,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAEO,gBAAgB,CACtB,YAA8B,EAC9B,YAAoB,EACpB,IAAmB,EACnB,GAAW;IAEX,IAAI,IAAI,KAAK,IAAI,EAAE;MACjB,IAAI,YAAY,KAAK,GAAG,EAAE;QACxB,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC;OAC1B;WAAM;QACL,YAAY,CAAC,MAAM,EAAE,CAAC;OACvB;KACF;SAAM;MACL,IAAI,YAAY,KAAK,CAAC,EAAE;QACtB,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;OACrC;WAAM;QACL,YAAY,CAAC,QAAQ,EAAE,CAAC;OACzB;KACF;EACH,CAAC;EAEO,sBAAsB,CAC5B,YAA8B,EAC9B,YAAoB,EACpB,IAAmB;IAEnB,IAAI,IAAI,KAAK,IAAI,EAAE;MACjB,IAAI,YAAY,KAAK,IAAI,CAAC,UAAU,EAAE,EAAE;QACtC,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC;OAC1B;WAAM;QACL,YAAY,CAAC,MAAM,EAAE,CAAC;OACvB;KACF;SAAM;MACL,IACE,CAAC,IAAI,CAAC,iBAAiB;QACrB,IAAI,CAAC,aAAa,KAAK,IAAI;QAC3B,YAAY,KAAK,EAAE,CAAC;QACtB,YAAY,KAAK,CAAC,EAClB;QACA,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC,QAAQ,EAAE,CAAC;OAC5D;WAAM;QACL,YAAY,CAAC,QAAQ,EAAE,CAAC;OACzB;KACF;EACH,CAAC;EAEO,WAAW,CACjB,IAAmB,EACnB,EAAE,KAAK,GAAG,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE;IAE/D,IAAI,KAAK,EAAE;MACT,IAAI,IAAI,CAAC,iBAAiB,EAAE;QAC1B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;OACjE;WAAM;QACL,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;OAC/D;KACF;IAED,IAAI,OAAO,EAAE;MACX,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;KACpE;IAED,IAAI,OAAO,EAAE;MACX,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;KACpE;IAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;EAC3B,CAAC;EAEO,eAAe;IACrB,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;MAC/B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;KAC3B;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;KAC3B;IAED,IAAI,CAAC,2BAA2B,EAAE,CAAC;IAEnC,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAEO,2BAA2B;IACjC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MAC3B,OAAO;KACR;IAED,IAAI,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAE3C,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI;MAAE,IAAI,IAAI,EAAE,CAAC;IAE5C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;EACxC,CAAC;EAEO,cAAc;IACpB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACzD,IAAI,IAAI,CAAC,iBAAiB,KAAK,SAAS,EAAE;MACxC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAC7B,QAAQ,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAC3D,CAAC;MACF,IAAI,CAAC,iBAAiB,GAAG,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACpD;EACH,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,cAAc;IAClB,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EAC1C,CAAC;EAEO,gBAAgB;IACtB,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;MACzD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC;KAC7B;IAED,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;EACzB,CAAC;EAEO,mBAAmB;IACzB,IAAI,IAAI,CAAC,iBAAiB,EAAE;MAC1B,OAAO,EAAE,CAAC;KACX;IAED,OAAO,EAAE,CAAC;EACZ,CAAC;EAEO,UAAU;IAChB,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;MACzD,OAAO,EAAE,CAAC;KACX;IAED,OAAO,EAAE,CAAC;EACZ,CAAC;EAED,MAAM;IACJ,IAAI,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC9B,IAAI,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;IACpC,IAAI,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;IACpC,MAAM,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC;IAClD,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IAExC,IAAI,QAAQ,IAAI,WAAW,IAAI,WAAW,EAAE;MAC1C,QAAQ,GAAG,KAAK,CAAC;MACjB,WAAW,GAAG,KAAK,CAAC;MACpB,WAAW,GAAG,KAAK,CAAC;KACrB;IAED,MAAM,iBAAiB,GAAG,WAAW,IAAI,QAAQ,CAAC;IAClD,MAAM,oBAAoB,GAAG,WAAW,IAAI,WAAW,CAAC;IAExD,OAAO,CACL,EAAC,IAAI;MACH,yBAAmB,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;QACnE,WAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;UAC/B,qBAAe,OAAO,EAAC,eAAe,WAAqB,CACvD;QAEN,WAAK,KAAK,EAAC,OAAO;UAChB,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE;YAC7C,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EACtD,KAAK,QACL,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE;YAClB,aACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,IAAI,EAChB,GAAG,EAAC,GAAG,EACP,GAAG,EAAE,IAAI,CAAC,mBAAmB,EAAE,EAC/B,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAC9B,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,EACvC,QAAQ,EAAE,GAAG,EAAE,CACb,IAAI,CAAC,aAAa,CAChB,IAAI,CAAC,YAAY,EACjB,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC/B,IAAI,CAAC,mBAAmB,EAAE,CAC3B,GAEI;YACT,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EACxD,KAAK,QACL,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE,CACd;UAEN,WACE,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM,EAAE,iBAAiB,EAAE,QAG1D;UAEN,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE;YAChD,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EACxD,KAAK,QACL,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE;YAClB,aACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,IAAI,EAChB,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,IAAI,EACR,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC,EACzC,QAAQ,EAAE,GAAG,EAAE,CACb,IAAI,CAAC,aAAa,CAChB,IAAI,CAAC,cAAc,EACnB,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EACjC,EAAE,CACH,GAEI;YACT,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAC1D,KAAK,QACL,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE,CACd;UAEN,WACE,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM,EAAE,oBAAoB,EAAE,QAG7D;UAEN,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE;YAChD,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EACxD,KAAK,QACL,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE;YAClB,aACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,IAAI,EAChB,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,IAAI,EACR,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC,EACzC,QAAQ,EAAE,GAAG,EAAE,CACb,IAAI,CAAC,aAAa,CAChB,IAAI,CAAC,cAAc,EACnB,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EACjC,EAAE,CACH,GAEI;YACT,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAC1D,KAAK,QACL,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE,CACd;UAEN,WACE,KAAK,EAAE;cACL,OAAO,EAAE,IAAI;cACb,eAAe,EAAE,IAAI;cACrB,MAAM,EAAE,iBAAiB;aAC1B;YAED,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACrC,KAAK,QACL,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE;YAClB,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,aAAa,CAAO;YACtD,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACrC,KAAK,QACL,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE,CACd,CACF;QAEN,WAAK,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE;UAClD,iBACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAE9D,IAAI,CAAC,cAAc,CACV,CACR,CACY,CACf,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\n\nexport type TimePickerCorners = DateTimeCardCorners;\n\n@Component({\n  tag: 'ix-time-picker',\n  styleUrl: 'time-picker.scss',\n  shadow: true,\n})\nexport class TimePicker {\n  /**\n   * Format of time string\n   *\n   * @since 1.1.0\n   */\n  @Prop() format: string = 'TT';\n\n  /**\n   * Corner style\n   */\n  @Prop() corners: TimePickerCorners = 'rounded';\n\n  /**\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = false;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = false;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = false;\n\n  /**\n   * Select time with format string\n   *\n   * @since 1.1.0\n   */\n  @Prop() time: string = DateTime.now().toFormat(this.format);\n\n  /**\n   * Show time reference input\n   *\n   * @since 1.1.0 time reference is default aligned with formt tt\n   */\n  @Prop({ mutable: true }) showTimeReference = undefined;\n\n  /**\n   * Set time reference\n   */\n  @Prop({ mutable: true }) timeReference: 'AM' | 'PM' = DateTime.fromFormat(\n    this.time,\n    this.format\n  ).toFormat('a') as 'PM' | 'AM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectTime = 'Done';\n\n  /**\n   * Time event\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Time change event\n   */\n  @Event() timeChange: EventEmitter<string>;\n\n  @State() hourInputRef: HTMLInputElement;\n  @State() minuteInputRef: HTMLInputElement;\n  @State() secondInputRef: HTMLInputElement;\n  @State() referenceInputRef: HTMLInputElement;\n\n  get hour() {\n    return this._time.hour;\n  }\n\n  get minutes() {\n    return this._time.minute;\n  }\n\n  get seconds() {\n    return this._time.second;\n  }\n\n  private _time: DateTime = DateTime.now();\n\n  private setInputValue(\n    inputElement: HTMLInputElement,\n    value: number,\n    max: number\n  ) {\n    if (value > max) {\n      inputElement.value = max.toString();\n    } else if (value < 0) {\n      inputElement.value = '0';\n    } else {\n      inputElement.value = value.toString();\n    }\n\n    this.updateAndEmitTime();\n  }\n\n  private updateAndEmitTime() {\n    this._time = this._time.set({\n      hour: Number(this.hourInputRef.value),\n      minute: Number(this.minuteInputRef.value),\n      second: Number(this.secondInputRef.value),\n    });\n\n    this.setHourAccordingToReference();\n\n    this.emitTimeChange();\n  }\n\n  private toggleInputValue(\n    inputElement: HTMLInputElement,\n    currentValue: number,\n    step: 'up' | 'down',\n    max: number\n  ) {\n    if (step === 'up') {\n      if (currentValue === max) {\n        inputElement.value = '0';\n      } else {\n        inputElement.stepUp();\n      }\n    } else {\n      if (currentValue === 0) {\n        inputElement.value = max.toString();\n      } else {\n        inputElement.stepDown();\n      }\n    }\n  }\n\n  private toggleHourInputWithRef(\n    inputElement: HTMLInputElement,\n    currentValue: number,\n    step: 'up' | 'down'\n  ) {\n    if (step === 'up') {\n      if (currentValue === this.getMaxHour()) {\n        inputElement.value = '0';\n      } else {\n        inputElement.stepUp();\n      }\n    } else {\n      if (\n        (this.showTimeReference &&\n          this.timeReference === 'PM' &&\n          currentValue === 12) ||\n        currentValue === 0\n      ) {\n        inputElement.value = this.getMaxDisplayedHour().toString();\n      } else {\n        inputElement.stepDown();\n      }\n    }\n  }\n\n  private updateInput(\n    step: 'up' | 'down',\n    { hours = undefined, minutes = undefined, seconds = undefined }\n  ) {\n    if (hours) {\n      if (this.showTimeReference) {\n        this.toggleHourInputWithRef(this.hourInputRef, this.hour, step);\n      } else {\n        this.toggleInputValue(this.hourInputRef, this.hour, step, 23);\n      }\n    }\n\n    if (minutes) {\n      this.toggleInputValue(this.minuteInputRef, this.minutes, step, 59);\n    }\n\n    if (seconds) {\n      this.toggleInputValue(this.secondInputRef, this.seconds, step, 59);\n    }\n\n    this.updateAndEmitTime();\n  }\n\n  private changeReference() {\n    if (this.timeReference === 'AM') {\n      this.timeReference = 'PM';\n    } else {\n      this.timeReference = 'AM';\n    }\n\n    this.setHourAccordingToReference();\n\n    this.emitTimeChange();\n  }\n\n  private setHourAccordingToReference() {\n    if (!this.showTimeReference) {\n      return;\n    }\n\n    let hour = Number(this.hourInputRef.value);\n\n    if (this.timeReference === 'PM') hour += 12;\n\n    this._time = this._time.set({ hour });\n  }\n\n  private emitTimeChange() {\n    const time = this._time.toFormat(this.format);\n    this.timeChange.emit(time);\n  }\n\n  componentWillLoad() {\n    this._time = DateTime.fromFormat(this.time, this.format);\n    if (this.showTimeReference === undefined) {\n      const matchedKeys = Object.keys(\n        DateTime.fromFormatExplain(this.time, this.format).matches\n      );\n      this.showTimeReference = matchedKeys.includes('a');\n    }\n  }\n\n  /**\n   * Get current time\n   */\n  @Method()\n  async getCurrentTime() {\n    return this._time.toFormat(this.format);\n  }\n\n  private getDisplayedHour() {\n    if (this.showTimeReference && this.timeReference === 'PM') {\n      return this._time.hour - 12;\n    }\n\n    return this._time.hour;\n  }\n\n  private getMaxDisplayedHour() {\n    if (this.showTimeReference) {\n      return 11;\n    }\n\n    return 23;\n  }\n\n  private getMaxHour() {\n    if (this.showTimeReference && this.timeReference === 'AM') {\n      return 11;\n    }\n\n    return 23;\n  }\n\n  render() {\n    let hideHour = !this.showHour;\n    let hideMinutes = !this.showMinutes;\n    let hideSeconds = !this.showSeconds;\n    const hideTimeReference = !this.showTimeReference;\n    const hideIndividual = !this.individual;\n\n    if (hideHour && hideMinutes && hideSeconds) {\n      hideHour = false;\n      hideMinutes = false;\n      hideSeconds = false;\n    }\n\n    const hideHourSeperator = hideMinutes || hideHour;\n    const hideMinutesSeperator = hideSeconds || hideMinutes;\n\n    return (\n      <Host>\n        <ix-date-time-card individual={this.individual} corners={this.corners}>\n          <div class=\"header\" slot=\"header\">\n            <ix-typography variant=\"default-title\">Time</ix-typography>\n          </div>\n\n          <div class=\"clock\">\n            <div class={{ columns: true, hidden: hideHour }}>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('up', { hours: true })}\n                ghost\n                icon=\"chevron-up\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <input\n                class=\"form-control\"\n                name=\"hours\"\n                type=\"number\"\n                placeholder=\"HH\"\n                min=\"0\"\n                max={this.getMaxDisplayedHour()}\n                value={this.getDisplayedHour()}\n                ref={(ref) => (this.hourInputRef = ref)}\n                onChange={() =>\n                  this.setInputValue(\n                    this.hourInputRef,\n                    Number(this.hourInputRef.value),\n                    this.getMaxDisplayedHour()\n                  )\n                }\n              ></input>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('down', { hours: true })}\n                ghost\n                icon=\"chevron-down\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n\n            <div\n              class={{ 'column-seperator': true, hidden: hideHourSeperator }}\n            >\n              :\n            </div>\n\n            <div class={{ columns: true, hidden: hideMinutes }}>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('up', { minutes: true })}\n                ghost\n                icon=\"chevron-up\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <input\n                class=\"form-control\"\n                name=\"minutes\"\n                type=\"number\"\n                placeholder=\"MM\"\n                min=\"0\"\n                max=\"59\"\n                value={this.minutes}\n                ref={(ref) => (this.minuteInputRef = ref)}\n                onChange={() =>\n                  this.setInputValue(\n                    this.minuteInputRef,\n                    Number(this.minuteInputRef.value),\n                    59\n                  )\n                }\n              ></input>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('down', { minutes: true })}\n                ghost\n                icon=\"chevron-down\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n\n            <div\n              class={{ 'column-seperator': true, hidden: hideMinutesSeperator }}\n            >\n              :\n            </div>\n\n            <div class={{ columns: true, hidden: hideSeconds }}>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('up', { seconds: true })}\n                ghost\n                icon=\"chevron-up\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <input\n                class=\"form-control\"\n                name=\"seconds\"\n                type=\"number\"\n                placeholder=\"SS\"\n                min=\"0\"\n                max=\"59\"\n                value={this.seconds}\n                ref={(ref) => (this.secondInputRef = ref)}\n                onChange={() =>\n                  this.setInputValue(\n                    this.secondInputRef,\n                    Number(this.secondInputRef.value),\n                    59\n                  )\n                }\n              ></input>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('down', { seconds: true })}\n                ghost\n                icon=\"chevron-down\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n\n            <div\n              class={{\n                columns: true,\n                'default-space': true,\n                hidden: hideTimeReference,\n              }}\n            >\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.changeReference()}\n                ghost\n                icon=\"chevron-up\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <div class=\"time-reference\">{this.timeReference}</div>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.changeReference()}\n                ghost\n                icon=\"chevron-down\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n          </div>\n\n          <div class={{ button: true, hidden: hideIndividual }}>\n            <ix-button\n              onClick={() => this.done.emit(this._time.toFormat(this.format))}\n            >\n              {this.textSelectTime}\n            </ix-button>\n          </div>\n        </ix-date-time-card>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/toast/toast.css

@@ -50,7 +50,19 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: flex;
   flex-direction: column;
   position: relative;
@@ -69,6 +81,30 @@
 :host *::before {
   box-sizing: border-box;
 }
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
 :host .toast-body {
   display: flex;
   position: relative;