@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/collection/components/toast/toast-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast-container.js","sourceRoot":"","sources":["../../../src/components/toast/toast-container.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 { Component, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast-container',\n  shadow: true,\n})\nexport class ToastContainer {\n  /**\n   */\n  @Prop() containerId = 'toast-container';\n\n  /**\n   */\n  @Prop() containerClass = 'toast-container';\n\n  /**\n   */\n  @Prop() position: 'bottom-right' | 'top-right' = 'bottom-right';\n\n  private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n  get hostContainer() {\n    return document.getElementById(this.containerId);\n  }\n\n  componentDidLoad() {\n    if (!document.getElementById(this.containerId)) {\n      const toastContainer = document.createElement('div');\n      toastContainer.id = this.containerId;\n      toastContainer.classList.add(this.containerClass);\n      toastContainer.classList.add(\n        `${this.PREFIX_POSITION_CLASS}${this.position}`\n      );\n      document.body.appendChild(toastContainer);\n    }\n  }\n\n  @Watch('position')\n  onPositionChange(newPosition: string, oldPosition: string) {\n    const toastContainer = document.getElementById(this.containerId);\n    toastContainer.classList.remove(\n      `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n    );\n    toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n  }\n\n  /**\n   * Display a toast message\n   * @param config\n   */\n  @Method()\n  async showToast(config: ToastConfig) {\n    const toast = document.createElement('ix-toast');\n\n    const onClose = new TypedEvent<any | undefined>();\n\n    function removeToast(result?: any) {\n      toast.remove();\n      onClose.emit(result);\n    }\n\n    toast.toastTitle = config.title;\n    toast.type = config.type;\n    toast.autoClose = config.autoClose;\n    toast.autoCloseDelay = config.autoCloseDelay;\n    toast.icon = config.icon;\n    toast.iconColor = config.iconColor;\n    toast.addEventListener(\n      'closeToast',\n      (event: CustomEvent<any | undefined>) => {\n        const { detail } = event;\n        removeToast(detail);\n      }\n    );\n\n    if (typeof config.message === 'string') {\n      toast.innerText = config.message;\n    } else {\n      toast.appendChild(config.message);\n    }\n\n    this.hostContainer.appendChild(toast);\n\n    return {\n      onClose,\n      close: (result?: any) => {\n        removeToast(result);\n      },\n    };\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"]}
+{"version":3,"file":"toast-container.js","sourceRoot":"","sources":["../../../src/components/toast/toast-container.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 { Component, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast-container',\n  styleUrl: './styles/toast-container.scss',\n  shadow: true,\n})\nexport class ToastContainer {\n  /**\n   */\n  @Prop() containerId = 'toast-container';\n\n  /**\n   */\n  @Prop() containerClass = 'toast-container';\n\n  /**\n   */\n  @Prop() position: 'bottom-right' | 'top-right' = 'bottom-right';\n\n  private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n  get hostContainer() {\n    return document.getElementById(this.containerId);\n  }\n\n  componentDidLoad() {\n    if (!document.getElementById(this.containerId)) {\n      const toastContainer = document.createElement('div');\n      toastContainer.id = this.containerId;\n      toastContainer.classList.add(this.containerClass);\n      toastContainer.classList.add(\n        `${this.PREFIX_POSITION_CLASS}${this.position}`\n      );\n      document.body.appendChild(toastContainer);\n    }\n  }\n\n  @Watch('position')\n  onPositionChange(newPosition: string, oldPosition: string) {\n    const toastContainer = document.getElementById(this.containerId);\n    toastContainer.classList.remove(\n      `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n    );\n    toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n  }\n\n  /**\n   * Display a toast message\n   * @param config\n   */\n  @Method()\n  async showToast(config: ToastConfig) {\n    const toast = document.createElement('ix-toast');\n\n    const onClose = new TypedEvent<any | undefined>();\n\n    function removeToast(result?: any) {\n      toast.remove();\n      onClose.emit(result);\n    }\n\n    toast.toastTitle = config.title;\n    toast.type = config.type;\n    toast.autoClose = config.autoClose ?? true;\n    toast.autoCloseDelay = config.autoCloseDelay ?? 5000;\n    toast.icon = config.icon;\n    toast.iconColor = config.iconColor;\n    toast.addEventListener(\n      'closeToast',\n      (event: CustomEvent<any | undefined>) => {\n        const { detail } = event;\n        removeToast(detail);\n      }\n    );\n\n    if (typeof config.message === 'string') {\n      toast.innerText = config.message;\n    } else {\n      toast.appendChild(config.message);\n    }\n\n    setTimeout(() => {\n      this.hostContainer.appendChild(toast);\n    });\n\n    return {\n      onClose,\n      close: (result?: any) => {\n        removeToast(result);\n      },\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'toast-container--bottom-right': this.position === 'bottom-right',\n          'toast-container--top-right': this.position === 'top-right',\n        }}\n      >\n        {/* <slot></slot> */}\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,27 +81,48 @@
 :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;
+  min-height: 3.5rem;
   width: 100%;
   flex-grow: 1;
+  padding: 0.75rem;
 }
 :host .toast-body .toast-icon {
   display: flex;
   align-items: flex-start;
-  margin: 1rem;
+  margin-right: 1rem;
 }
 :host .toast-body .toast-content {
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0;
   width: 100%;
-  max-width: 10.25rem;
-  margin-top: calc(
-        1rem + var(--theme-toast--border-thickness)
-      );
-  margin-bottom: 0.75rem;
 }
 :host .toast-body .toast-content .toast-title {
   -webkit-font-smoothing: antialiased;
@@ -99,6 +132,7 @@
   font-weight: 700;
   line-height: 1.143em;
   color: var(--theme-color-std-text);
+  margin: 0.25rem 0px;
 }
 :host .toast-body .toast-content .toast-message {
   min-width: 0;
@@ -110,11 +144,15 @@
   line-height: 1.429em;
   color: var(--theme-color-std-text);
 }
+:host .toast-body .toast-icon + .toast-content {
+  max-width: 10.25rem;
+}
 :host .toast-close {
   display: flex;
   position: relative;
-  margin: 0.75rem;
   pointer-events: all;
+  margin-left: auto;
+  margin-right: 0px;
 }
 :host .toast-progress-bar {
   position: absolute;

package/dist/collection/components/toast/toast.js

@@ -55,7 +55,7 @@ export class Toast {
         this.touched = false;
       }, onPointerEnter: () => {
         this.touched = true;
-      } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title" }, this.toastTitle)) : null, h("div", { class: "toast-message" }, h("slot", null))), h("div", { class: "toast-close" }, h("ix-icon-button", { icon: "close", size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
+      } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title" }, this.toastTitle)) : null, h("div", { class: "toast-message" }, h("slot", null))), h("div", { class: "toast-close" }, h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
         this.close();
       }, onTransitionEnd: () => {
         if (this.progress === 0) {

package/dist/collection/components/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.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  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast',\n  styleUrl: 'toast.scss',\n  shadow: true,\n})\nexport class Toast {\n  /**\n   * Toast type\n   */\n  @Prop() type: ToastType = 'info';\n\n  /**\n   * Toast title\n   */\n  @Prop() toastTitle: string;\n\n  /**\n   * Autoclose title after delay\n   */\n  @Prop() autoCloseDelay = 5000;\n\n  /**\n   * Autoclose behavior\n   */\n  @Prop() autoClose = true;\n\n  /**\n   * Icon of toast\n   */\n  @Prop() icon: string;\n\n  /**\n   * Icon color of toast\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Toast closed\n   */\n  @Event() closeToast: EventEmitter;\n\n  @State() progress = 0;\n  @State() touched = false;\n\n  @Element() hostElement!: HTMLIxToastElement;\n\n  private getIcon() {\n    if (this.icon) {\n      return <ix-icon name={this.icon} color={this.iconColor} size=\"24\" />;\n    }\n\n    switch (this.type) {\n      case 'info':\n        return <ix-icon name={'info'} size=\"24\" color=\"color-std-text\" />;\n\n      case 'error':\n        return <ix-icon name={'error'} size=\"24\" color=\"color-alarm\" />;\n\n      case 'success':\n        return <ix-icon name={'success'} size=\"24\" color=\"color-success\" />;\n\n      case 'warning':\n        return <ix-icon name={'warning'} size=\"24\" color=\"color-warning\" />;\n\n      default:\n        return '';\n    }\n  }\n\n  private close() {\n    if (this.hostElement) {\n      this.hostElement.classList.add('animate__fadeOut');\n    }\n    setTimeout(() => {\n      this.closeToast.emit();\n    }, 250);\n  }\n\n  render() {\n    let progressBarStyle: Record<string, string> = {};\n\n    const progressBarClass = ['toast-progress-bar'];\n\n    progressBarStyle = {\n      animationDuration: `${this.autoCloseDelay}ms`,\n      animationPlayState: this.touched ? 'paused' : 'running',\n    };\n\n    progressBarClass.push('toast-progress-bar--animated');\n\n    return (\n      <Host class=\"animate__animated animate__fadeIn\">\n        <div\n          class=\"toast-body\"\n          onPointerLeave={() => {\n            this.touched = false;\n          }}\n          onPointerEnter={() => {\n            this.touched = true;\n          }}\n        >\n          {this.type || this.icon ? (\n            <div class=\"toast-icon\">{this.getIcon()}</div>\n          ) : null}\n          <div class=\"toast-content\">\n            {this.toastTitle ? (\n              <div class=\"toast-title\">{this.toastTitle}</div>\n            ) : null}\n            <div class=\"toast-message\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"toast-close\">\n            <ix-icon-button\n              icon=\"close\"\n              size=\"24\"\n              ghost\n              onClick={() => this.closeToast.emit()}\n            />\n          </div>\n        </div>\n        {this.autoClose ? (\n          <div\n            class={progressBarClass.join(' ')}\n            style={progressBarStyle}\n            onAnimationEnd={() => {\n              this.close();\n            }}\n            onTransitionEnd={() => {\n              if (this.progress === 0) {\n                this.close();\n              }\n            }}\n          ></div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAQvB,MAAM,OAAO,KAAK;;gBAIU,MAAM;;0BAUP,IAAI;qBAKT,IAAI;;;oBAiBJ,CAAC;mBACF,KAAK;;EAIhB,OAAO;IACb,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,IAAI,GAAG,CAAC;KACtE;IAED,QAAQ,IAAI,CAAC,IAAI,EAAE;MACjB,KAAK,MAAM;QACT,OAAO,eAAS,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,GAAG,CAAC;MAEpE,KAAK,OAAO;QACV,OAAO,eAAS,IAAI,EAAE,OAAO,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAG,CAAC;MAElE,KAAK,SAAS;QACZ,OAAO,eAAS,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,GAAG,CAAC;MAEtE,KAAK,SAAS;QACZ,OAAO,eAAS,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,GAAG,CAAC;MAEtE;QACE,OAAO,EAAE,CAAC;KACb;EACH,CAAC;EAEO,KAAK;IACX,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;KACpD;IACD,UAAU,CAAC,GAAG,EAAE;MACd,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC,EAAE,GAAG,CAAC,CAAC;EACV,CAAC;EAED,MAAM;IACJ,IAAI,gBAAgB,GAA2B,EAAE,CAAC;IAElD,MAAM,gBAAgB,GAAG,CAAC,oBAAoB,CAAC,CAAC;IAEhD,gBAAgB,GAAG;MACjB,iBAAiB,EAAE,GAAG,IAAI,CAAC,cAAc,IAAI;MAC7C,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;KACxD,CAAC;IAEF,gBAAgB,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;IAEtD,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,mCAAmC;MAC7C,WACE,KAAK,EAAC,YAAY,EAClB,cAAc,EAAE,GAAG,EAAE;UACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC,EACD,cAAc,EAAE,GAAG,EAAE;UACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC;QAEA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACxB,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,OAAO,EAAE,CAAO,CAC/C,CAAC,CAAC,CAAC,IAAI;QACR,WAAK,KAAK,EAAC,eAAe;UACvB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAO,CACjD,CAAC,CAAC,CAAC,IAAI;UACR,WAAK,KAAK,EAAC,eAAe;YACxB,eAAa,CACT,CACF;QACN,WAAK,KAAK,EAAC,aAAa;UACtB,sBACE,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,EACT,KAAK,QACL,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,GACrC,CACE,CACF;MACL,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,WACE,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,EACjC,KAAK,EAAE,gBAAgB,EACvB,cAAc,EAAE,GAAG,EAAE;UACnB,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC,EACD,eAAe,EAAE,GAAG,EAAE;UACpB,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,EAAE;YACvB,IAAI,CAAC,KAAK,EAAE,CAAC;WACd;QACH,CAAC,GACI,CACR,CAAC,CAAC,CAAC,IAAI,CACH,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  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast',\n  styleUrl: 'toast.scss',\n  shadow: true,\n})\nexport class Toast {\n  /**\n   * Toast type\n   */\n  @Prop() type: ToastType = 'info';\n\n  /**\n   * Toast title\n   */\n  @Prop() toastTitle: string;\n\n  /**\n   * Autoclose title after delay\n   */\n  @Prop() autoCloseDelay = 5000;\n\n  /**\n   * Autoclose behavior\n   */\n  @Prop() autoClose = true;\n\n  /**\n   * Icon of toast\n   */\n  @Prop() icon: string;\n\n  /**\n   * Icon color of toast\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Toast closed\n   */\n  @Event() closeToast: EventEmitter;\n\n  @State() progress = 0;\n  @State() touched = false;\n\n  @Element() hostElement!: HTMLIxToastElement;\n\n  private getIcon() {\n    if (this.icon) {\n      return <ix-icon name={this.icon} color={this.iconColor} size=\"24\" />;\n    }\n\n    switch (this.type) {\n      case 'info':\n        return <ix-icon name={'info'} size=\"24\" color=\"color-std-text\" />;\n\n      case 'error':\n        return <ix-icon name={'error'} size=\"24\" color=\"color-alarm\" />;\n\n      case 'success':\n        return <ix-icon name={'success'} size=\"24\" color=\"color-success\" />;\n\n      case 'warning':\n        return <ix-icon name={'warning'} size=\"24\" color=\"color-warning\" />;\n\n      default:\n        return '';\n    }\n  }\n\n  private close() {\n    if (this.hostElement) {\n      this.hostElement.classList.add('animate__fadeOut');\n    }\n    setTimeout(() => {\n      this.closeToast.emit();\n    }, 250);\n  }\n\n  render() {\n    let progressBarStyle: Record<string, string> = {};\n\n    const progressBarClass = ['toast-progress-bar'];\n\n    progressBarStyle = {\n      animationDuration: `${this.autoCloseDelay}ms`,\n      animationPlayState: this.touched ? 'paused' : 'running',\n    };\n\n    progressBarClass.push('toast-progress-bar--animated');\n\n    return (\n      <Host class=\"animate__animated animate__fadeIn\">\n        <div\n          class=\"toast-body\"\n          onPointerLeave={() => {\n            this.touched = false;\n          }}\n          onPointerEnter={() => {\n            this.touched = true;\n          }}\n        >\n          {this.type || this.icon ? (\n            <div class=\"toast-icon\">{this.getIcon()}</div>\n          ) : null}\n          <div class=\"toast-content\">\n            {this.toastTitle ? (\n              <div class=\"toast-title\">{this.toastTitle}</div>\n            ) : null}\n            <div class=\"toast-message\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"toast-close\">\n            <ix-icon-button\n              icon={'close'}\n              size=\"24\"\n              ghost\n              onClick={() => this.closeToast.emit()}\n            />\n          </div>\n        </div>\n        {this.autoClose ? (\n          <div\n            class={progressBarClass.join(' ')}\n            style={progressBarStyle}\n            onAnimationEnd={() => {\n              this.close();\n            }}\n            onTransitionEnd={() => {\n              if (this.progress === 0) {\n                this.close();\n              }\n            }}\n          ></div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/toggle/toggle.css

@@ -22,7 +22,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: inline-flex;
   position: relative;
   height: 2rem;
@@ -36,6 +48,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 .switch {
   position: relative;
   display: inline-block;

package/dist/collection/components/toggle-button/toggle-button.css

@@ -0,0 +1,447 @@
+/*
+ * 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.
+ */
+/*
+ * 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.
+ */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+  transition: 150ms;
+  padding: 0 0.5rem;
+  min-width: 5rem;
+  gap: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.btn .glyph {
+  margin-right: 0.25rem;
+  font-weight: 400;
+}
+.btn:focus-visible, .btn.focus {
+  box-shadow: none;
+}
+
+.btn-primary {
+  border-radius: var(--theme-btn--border-radius);
+}
+.btn-primary, .btn-primary.focus, .btn-primary:focus-visible {
+  background-color: var(--theme-btn-primary--background);
+  color: var(--theme-btn-primary--color);
+  --ix-button-color: var(--theme-btn-primary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-primary--border-color);
+  border-style: solid;
+}
+.btn-primary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-primary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+.btn-primary.hover, .btn-primary:hover {
+  border-color: var(--theme-btn-primary--border-color--hover);
+  background-color: var(--theme-btn-primary--background--hover);
+  color: var(--theme-btn-primary--color--hover);
+}
+.btn-primary.selected.hover, .btn-primary.selected:hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
+  border-color: var(--theme-btn-primary--border-color--active);
+  background-color: var(--theme-btn-primary--background--active);
+  color: var(--theme-btn-primary--color--active);
+}
+.btn-primary.selected:not(:disabled):not(.disabled):active, .btn-primary.selected:not(:disabled):not(.disabled).active, .show > .btn-primary.selected.dropdown-toggle {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+.btn-primary.disabled, .btn-primary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  border-color: var(--theme-btn-primary--border-color--disabled);
+  background-color: var(--theme-btn-primary--background--disabled);
+  color: var(--theme-btn-primary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-primary--color--disabled);
+}
+
+.btn-outline-primary {
+  border-radius: var(--theme-btn--border-radius);
+}
+.btn-outline-primary, .btn-outline-primary.focus, .btn-outline-primary:focus-visible {
+  background-color: var(--theme-btn-outline-primary--background);
+  color: var(--theme-btn-outline-primary--color);
+  --ix-button-color: var(--theme-btn-outline-primary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-outline-primary--border-color);
+  border-style: solid;
+}
+.btn-outline-primary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-outline-primary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+.btn-outline-primary.hover, .btn-outline-primary:hover {
+  border-color: var(--theme-btn-outline-primary--border-color--hover);
+  background-color: var(--theme-btn-outline-primary--background--hover);
+  color: var(--theme-btn-outline-primary--color--hover);
+}
+.btn-outline-primary.selected.hover, .btn-outline-primary.selected:hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
+  border-color: var(--theme-btn-outline-primary--border-color--active);
+  background-color: var(--theme-btn-outline-primary--background--active);
+  color: var(--theme-btn-outline-primary--color--active);
+}
+.btn-outline-primary.selected:not(:disabled):not(.disabled):active, .btn-outline-primary.selected:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.selected.dropdown-toggle {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+.btn-outline-primary.disabled, .btn-outline-primary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  border-color: var(--theme-btn-outline-primary--border-color--disabled);
+  background-color: var(--theme-btn-outline-primary--background--disabled);
+  color: var(--theme-btn-outline-primary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-outline-primary--color--disabled);
+}
+
+.btn-invisible-primary {
+  border-radius: var(--theme-btn--border-radius);
+  --bs-btn-border-width: 0px;
+  --bs-btn-active-border-color: none;
+}
+.btn-invisible-primary, .btn-invisible-primary.focus, .btn-invisible-primary:focus-visible {
+  background-color: var(--theme-btn-invisible-primary--background);
+  color: var(--theme-btn-invisible-primary--color);
+  --ix-button-color: var(--theme-btn-invisible-primary--color);
+  border-color: transparent;
+}
+.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-invisible-primary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+.btn-invisible-primary.hover, .btn-invisible-primary:hover {
+  background-color: var(--theme-btn-invisible-primary--background--hover);
+  color: var(--theme-btn-invisible-primary--color--hover);
+}
+.btn-invisible-primary.selected.hover, .btn-invisible-primary.selected:hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+.btn-invisible-primary:not(:disabled):not(.disabled):active, .btn-invisible-primary:not(:disabled):not(.disabled).active, .show > .btn-invisible-primary.dropdown-toggle {
+  background-color: var(--theme-btn-invisible-primary--background--active);
+  color: var(--theme-btn-invisible-primary--color--active);
+}
+.btn-invisible-primary.selected:not(:disabled):not(.disabled):active, .btn-invisible-primary.selected:not(:disabled):not(.disabled).active, .show > .btn-invisible-primary.selected.dropdown-toggle {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+.btn-invisible-primary.disabled, .btn-invisible-primary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  background-color: var(--theme-btn-invisible-primary--background--disabled);
+  color: var(--theme-btn-invisible-primary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-invisible-primary--color--disabled);
+}
+
+.btn-secondary {
+  border-radius: var(--theme-btn--border-radius);
+}
+.btn-secondary, .btn-secondary.focus, .btn-secondary:focus-visible {
+  background-color: var(--theme-btn-secondary--background);
+  color: var(--theme-btn-secondary--color);
+  --ix-button-color: var(--theme-btn-secondary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-secondary--border-color);
+  border-style: solid;
+}
+.btn-secondary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-secondary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+.btn-secondary.hover, .btn-secondary:hover {
+  border-color: var(--theme-btn-secondary--border-color--hover);
+  background-color: var(--theme-btn-secondary--background--hover);
+  color: var(--theme-btn-secondary--color--hover);
+}
+.btn-secondary.selected.hover, .btn-secondary.selected:hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
+  border-color: var(--theme-btn-secondary--border-color--active);
+  background-color: var(--theme-btn-secondary--background--active);
+  color: var(--theme-btn-secondary--color--active);
+}
+.btn-secondary.selected:not(:disabled):not(.disabled):active, .btn-secondary.selected:not(:disabled):not(.disabled).active, .show > .btn-secondary.selected.dropdown-toggle {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+.btn-secondary.disabled, .btn-secondary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  border-color: var(--theme-btn-secondary--border-color--disabled);
+  background-color: var(--theme-btn-secondary--background--disabled);
+  color: var(--theme-btn-secondary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-secondary--color--disabled);
+}
+
+.btn-outline-secondary {
+  border-radius: var(--theme-btn--border-radius);
+}
+.btn-outline-secondary, .btn-outline-secondary.focus, .btn-outline-secondary:focus-visible {
+  background-color: var(--theme-btn-outline-secondary--background);
+  color: var(--theme-btn-outline-secondary--color);
+  --ix-button-color: var(--theme-btn-outline-secondary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-outline-secondary--border-color);
+  border-style: solid;
+}
+.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-outline-secondary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+.btn-outline-secondary.hover, .btn-outline-secondary:hover {
+  border-color: var(--theme-btn-outline-secondary--border-color--hover);
+  background-color: var(--theme-btn-outline-secondary--background--hover);
+  color: var(--theme-btn-outline-secondary--color--hover);
+}
+.btn-outline-secondary.selected.hover, .btn-outline-secondary.selected:hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle {
+  border-color: var(--theme-btn-outline-secondary--border-color--active);
+  background-color: var(--theme-btn-outline-secondary--background--active);
+  color: var(--theme-btn-outline-secondary--color--active);
+}
+.btn-outline-secondary.selected:not(:disabled):not(.disabled):active, .btn-outline-secondary.selected:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.selected.dropdown-toggle {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  border-color: var(--theme-btn-outline-secondary--border-color--disabled);
+  background-color: var(--theme-btn-outline-secondary--background--disabled);
+  color: var(--theme-btn-outline-secondary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-outline-secondary--color--disabled);
+}
+
+.btn-invisible-secondary {
+  border-radius: var(--theme-btn--border-radius);
+  --bs-btn-border-width: 0px;
+  --bs-btn-active-border-color: none;
+}
+.btn-invisible-secondary, .btn-invisible-secondary.focus, .btn-invisible-secondary:focus-visible {
+  background-color: var(--theme-btn-invisible-secondary--background);
+  color: var(--theme-btn-invisible-secondary--color);
+  --ix-button-color: var(--theme-btn-invisible-secondary--color);
+  border-color: transparent;
+}
+.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-invisible-secondary.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+.btn-invisible-secondary.hover, .btn-invisible-secondary:hover {
+  background-color: var(--theme-btn-invisible-secondary--background--hover);
+  color: var(--theme-btn-invisible-secondary--color--hover);
+}
+.btn-invisible-secondary.selected.hover, .btn-invisible-secondary.selected:hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+.btn-invisible-secondary:not(:disabled):not(.disabled):active, .btn-invisible-secondary:not(:disabled):not(.disabled).active, .show > .btn-invisible-secondary.dropdown-toggle {
+  background-color: var(--theme-btn-invisible-secondary--background--active);
+  color: var(--theme-btn-invisible-secondary--color--active);
+}
+.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active, .btn-invisible-secondary.selected:not(:disabled):not(.disabled).active, .show > .btn-invisible-secondary.selected.dropdown-toggle {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+.btn-invisible-secondary.disabled, .btn-invisible-secondary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  background-color: var(--theme-btn-invisible-secondary--background--disabled);
+  color: var(--theme-btn-invisible-secondary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-invisible-secondary--color--disabled);
+}
+
+.btn-oval,
+.btn-icon {
+  min-width: 2rem;
+  width: 2rem;
+}
+.btn-oval .glyph,
+.btn-icon .glyph {
+  margin-right: 0;
+}
+
+.btn-oval {
+  border-radius: 6.25rem;
+  width: 2rem;
+}
+
+.btn-icon-xs,
+.btn-icon-12 {
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.btn-icon-s,
+.btn-icon-16 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+}
+
+.btn-icon-32 {
+  height: 2rem;
+  width: 2rem;
+  min-width: 2rem;
+  min-height: 2rem;
+}
+
+/*
+ * 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.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: inline-block;
+  width: auto;
+  height: 2rem;
+  vertical-align: middle;
+}
+:host *,
+:host *::after,
+: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 .btn {
+  width: 100%;
+  height: 100%;
+}
+:host button:not(:disabled) {
+  cursor: pointer;
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}