@siemens/ix 1.5.0 → 1.6.0

package/dist/components/spinner.js.map

@@ -1 +1 @@
-{"file":"spinner.js","mappings":";;AAAA,MAAM,UAAU,GAAG,8kBAA8kB;;MCgBplB,OAAO;;;;mBAIuC,WAAW;gBAKjC,QAAQ;;EAE3C,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;OAC7B,IAED,WACE,OAAO,EAAC,WAAW,EACnB,OAAO,EAAC,KAAK,EACb,KAAK,EAAC,4BAA4B,IAElC,SACE,EAAE,EAAC,cAAc,EACjB,MAAM,EAAC,MAAM,kBACA,GAAG,EAChB,IAAI,EAAC,MAAM,eACD,SAAS,IAEnB,SACE,EAAE,EAAC,QAAQ,EACX,SAAS,EAAC,mBAAmB,eACnB,SAAS,EACnB,MAAM,EAAC,SAAS,qBACA,OAAO,IAEvB,eACE,EAAE,EAAC,IAAI,EACP,MAAM,EAAC,2CAA2C,EAClD,UAAU,EAAC,QAAQ,IAEnB,WACE,aAAa,EAAC,YAAY,EAC1B,KAAK,EAAC,aAAa,EACnB,EAAE,EAAC,SAAS,GACZ,EACF,eACE,EAAE,EAAC,KAAK,EACR,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,aAAa,EACnB,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,2CAA2C,EAChD,EAAE,EAAC,2CAA2C,EAC9C,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,eACE,EAAE,EAAC,MAAM,EACT,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,UAAU,EAChB,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,2CAA2C,EAChD,EAAE,EAAC,+CAA+C,EAClD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,QAAQ,GAAG,CACvD,EAEV,eACE,EAAE,EAAC,IAAI,EACP,MAAM,EAAC,6CAA6C,EACpD,UAAU,EAAC,QAAQ,IAEnB,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,GAAG,EAC/D,eACE,EAAE,EAAC,KAAK,EACR,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,SAAS,EACf,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,6CAA6C,EAClD,EAAE,EAAC,8CAA8C,EACjD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,eACE,EAAE,EAAC,MAAM,EACT,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,UAAU,EAChB,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,8CAA8C,EACnD,EAAE,EAAC,iDAAiD,EACpD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,QAAQ,GAAG,CACvD,EAEV,eACE,EAAE,EAAC,IAAI,EACP,MAAM,EAAC,iDAAiD,EACxD,UAAU,EAAC,QAAQ,IAEnB,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,GAAG,EAC/D,eACE,EAAE,EAAC,KAAK,EACR,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,SAAS,EACf,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,iDAAiD,EACtD,EAAE,EAAC,6CAA6C,EAChD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,eACE,EAAE,EAAC,MAAM,EACT,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,UAAU,EAChB,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,6CAA6C,EAClD,EAAE,EAAC,6CAA6C,EAChD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,QAAQ,GAAG,CACvD,EAEV,eACE,EAAE,EAAC,IAAI,EACP,MAAM,EAAC,6CAA6C,EACpD,UAAU,EAAC,QAAQ,IAEnB,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,GAAG,EAC/D,eACE,EAAE,EAAC,KAAK,EACR,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,SAAS,EACf,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,6CAA6C,EAClD,EAAE,EAAC,gDAAgD,EACnD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,eACE,EAAE,EAAC,MAAM,EACT,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,UAAU,EAChB,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,gDAAgD,EACrD,EAAE,EAAC,gDAAgD,EACnD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,QAAQ,GAAG,CACvD,EAEV,eACE,EAAE,EAAC,IAAI,EACP,MAAM,EAAC,kDAAkD,EACzD,UAAU,EAAC,QAAQ,IAEnB,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,GAAG,EAC/D,eACE,EAAE,EAAC,KAAK,EACR,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,SAAS,EACf,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,kDAAkD,EACvD,EAAE,EAAC,mDAAmD,EACtD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,eACE,EAAE,EAAC,MAAM,EACT,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,UAAU,EAChB,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,mDAAmD,EACxD,EAAE,EAAC,+CAA+C,EAClD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,QAAQ,GAAG,CACvD,EAEV,eACE,EAAE,EAAC,IAAI,EACP,MAAM,EAAC,iDAAiD,EACxD,UAAU,EAAC,QAAQ,IAEnB,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,GAAG,EAC/D,eACE,EAAE,EAAC,KAAK,EACR,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,SAAS,EACf,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,iDAAiD,EACtD,EAAE,EAAC,+CAA+C,EAClD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,eACE,EAAE,EAAC,MAAM,EACT,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,UAAU,EAChB,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,+CAA+C,EACpD,EAAE,EAAC,2CAA2C,EAC9C,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,QAAQ,GAAG,CACvD,CACR,EACJ,SACE,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,mBAAmB,EAC7B,IAAI,EAAC,SAAS,eACJ,SAAS,IAEnB,eACE,EAAE,EAAC,IAAI,EACP,MAAM,EAAC,2CAA2C,EAClD,UAAU,EAAC,QAAQ,IAEnB,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,GAAG,EAC/D,eACE,EAAE,EAAC,KAAK,EACR,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,SAAS,EACf,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,2CAA2C,EAChD,EAAE,EAAC,2CAA2C,EAC9C,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,eACE,EAAE,EAAC,MAAM,EACT,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,gBAAgB,EACtB,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,2CAA2C,EAChD,EAAE,EAAC,+CAA+C,EAClD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,QAAQ,GAAG,CACvD,EAEV,eACE,EAAE,EAAC,IAAI,EACP,MAAM,EAAC,6CAA6C,EACpD,UAAU,EAAC,QAAQ,IAEnB,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,GAAG,EAC/D,eACE,EAAE,EAAC,KAAK,EACR,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,SAAS,EACf,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,6CAA6C,EAClD,EAAE,EAAC,8CAA8C,EACjD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,eACE,EAAE,EAAC,MAAM,EACT,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,UAAU,EAChB,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,8CAA8C,EACnD,EAAE,EAAC,iDAAiD,EACpD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,QAAQ,GAAG,CACvD,EAEV,eACE,EAAE,EAAC,IAAI,EACP,MAAM,EAAC,iDAAiD,EACxD,UAAU,EAAC,QAAQ,IAEnB,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,GAAG,EAC/D,eACE,EAAE,EAAC,KAAK,EACR,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,SAAS,EACf,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,iDAAiD,EACtD,EAAE,EAAC,6CAA6C,EAChD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,eACE,EAAE,EAAC,MAAM,EACT,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,UAAU,EAChB,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,6CAA6C,EAClD,EAAE,EAAC,6CAA6C,EAChD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,QAAQ,GAAG,CACvD,EAEV,eACE,EAAE,EAAC,IAAI,EACP,MAAM,EAAC,6CAA6C,EACpD,UAAU,EAAC,QAAQ,IAEnB,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,GAAG,EAC/D,eACE,EAAE,EAAC,KAAK,EACR,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,SAAS,EACf,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,6CAA6C,EAClD,EAAE,EAAC,gDAAgD,EACnD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,eACE,EAAE,EAAC,MAAM,EACT,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,UAAU,EAChB,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,gDAAgD,EACrD,EAAE,EAAC,gDAAgD,EACnD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,QAAQ,GAAG,CACvD,EAEV,eACE,EAAE,EAAC,IAAI,EACP,MAAM,EAAC,kDAAkD,EACzD,UAAU,EAAC,QAAQ,IAEnB,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,GAAG,EAC/D,eACE,EAAE,EAAC,KAAK,EACR,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,SAAS,EACf,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,kDAAkD,EACvD,EAAE,EAAC,mDAAmD,EACtD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,eACE,EAAE,EAAC,MAAM,EACT,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,UAAU,EAChB,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,mDAAmD,EACxD,EAAE,EAAC,+CAA+C,EAClD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,QAAQ,GAAG,CACvD,EAEV,eACE,EAAE,EAAC,IAAI,EACP,MAAM,EAAC,iDAAiD,EACxD,UAAU,EAAC,QAAQ,IAEnB,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,GAAG,EAC/D,eACE,EAAE,EAAC,KAAK,EACR,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,SAAS,EACf,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,iDAAiD,EACtD,EAAE,EAAC,+CAA+C,EAClD,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,eACE,EAAE,EAAC,MAAM,EACT,aAAa,EAAC,QAAQ,EACtB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,UAAU,EAChB,GAAG,EAAC,MAAM,EACV,QAAQ,EAAC,KAAK,EACd,IAAI,EAAC,+CAA+C,EACpD,EAAE,EAAC,2CAA2C,EAC9C,UAAU,EAAC,WAAW,EACtB,IAAI,EAAC,QAAQ,GACb,EACF,WAAK,aAAa,EAAC,YAAY,EAAC,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,QAAQ,GAAG,CACvD,CACR,CACF,CACA,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=scoped","./src/components/spinner/spinner.tsx"],"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:host {\n  display: flex;\n  position: relative;\n  height: 2rem;\n  width: 2rem;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    height: 2rem;\n    width: 2rem;\n  }\n\n  #fill {\n    fill: var(--theme-color-weak-text);\n  }\n\n  #stroke {\n    stroke: var(--theme-color-weak-text);\n  }\n}\n\n:host(.primary) {\n  #fill {\n    fill: var(--theme-color-primary);\n  }\n\n  #stroke {\n    stroke: var(--theme-color-primary);\n  }\n}\n\n:host(.large) {\n  height: 6rem;\n  width: 6rem;\n\n  svg {\n    height: 5.75rem;\n    width: 6rem;\n  }\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 */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-spinner',\n  styleUrl: 'spinner.scss',\n  scoped: true,\n})\nexport class Spinner {\n  /**\n   * Variant of spinner\n   */\n  @Prop() variant: 'primary' | 'sencodary' | 'secondary' = 'secondary';\n\n  /**\n   * Size of spinner\n   */\n  @Prop() size: 'medium' | 'large' = 'medium';\n\n  render() {\n    return (\n      <Host\n        class={{\n          primary: this.variant === 'primary',\n          large: this.size === 'large',\n        }}\n      >\n        <svg\n          viewBox=\"0 0 32 32\"\n          version=\"1.1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <g\n            id=\"waiting-anim\"\n            stroke=\"none\"\n            stroke-width=\"1\"\n            fill=\"none\"\n            fill-rule=\"evenodd\"\n          >\n            <g\n              id=\"stroke\"\n              transform=\"translate(4.5, 3)\"\n              fill-rule=\"nonzero\"\n              stroke=\"#0F8287\"\n              stroke-linejoin=\"round\"\n            >\n              <polygon\n                id=\"w1\"\n                points=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n                visibility=\"hidden\"\n              >\n                <set\n                  attributeName=\"visibility\"\n                  begin=\"0s;w6ul.end\"\n                  to=\"visible\"\n                />\n                <animate\n                  id=\"w1l\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"0s;w6ul.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n                  to=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"w1ul\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f6uf.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n                  to=\"16.88749535 9.25 22.5166605 6.5 11.2583302 13\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"w1ul.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"w2\"\n                points=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"w1l.end\" to=\"visible\" />\n                <animate\n                  id=\"w2l\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w1l.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n                  to=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"w2ul\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w1ul.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n                  to=\"16.88749535 16.25 22.5166605 19.5 11.2583302 13\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"w2ul.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"w3\"\n                points=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"w2l.end\" to=\"visible\" />\n                <animate\n                  id=\"w3l\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w2l.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n                  to=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"w3ul\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w2ul.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n                  to=\"11.2583302 13 11.2583302 19.5 11.2583302 26\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"w3ul.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"w4\"\n                points=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"w3l.end\" to=\"visible\" />\n                <animate\n                  id=\"w4l\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w3l.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n                  to=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"w4ul\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w3ul.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n                  to=\"5.62651 16.25 4.4408921e-15 19.5 11.2583302 13\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"w4ul.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"w5\"\n                points=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"w4l.end\" to=\"visible\" />\n                <animate\n                  id=\"w5l\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w4l.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n                  to=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"w5ul\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w4ul.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n                  to=\"11.2583302 13 5.6291651 9.75 1.687539e-14 6.5\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"w5ul.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"w6\"\n                points=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"w5l.end\" to=\"visible\" />\n                <animate\n                  id=\"w6l\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w5l.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n                  to=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"w6ul\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w5ul.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n                  to=\"11.2583302 0 11.2583302 13 11.2583302 6.5\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"w6ul.end\" to=\"hidden\" />\n              </polygon>\n            </g>\n            <g\n              id=\"fill\"\n              transform=\"translate(4.5, 3)\"\n              fill=\"#0F8287\"\n              fill-rule=\"nonzero\"\n            >\n              <polygon\n                id=\"f1\"\n                points=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"w6l.end\" to=\"visible\" />\n                <animate\n                  id=\"f1f\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w6l.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n                  to=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"f1uf\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f6f.end + 0.2s\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n                  to=\"16.88749535 9.25 22.5166605 6.5 11.2583302 13\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"f1uf.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"f2\"\n                points=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"f1f.end\" to=\"visible\" />\n                <animate\n                  id=\"f2f\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f1f.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n                  to=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"f2uf\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f1uf.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n                  to=\"16.88749535 16.25 22.5166605 19.5 11.2583302 13\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"f2uf.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"f3\"\n                points=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"f2f.end\" to=\"visible\" />\n                <animate\n                  id=\"f3f\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f2f.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n                  to=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"f3uf\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f2uf.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n                  to=\"11.2583302 13 11.2583302 19.5 11.2583302 26\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"f3uf.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"f4\"\n                points=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"f3f.end\" to=\"visible\" />\n                <animate\n                  id=\"f4f\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f3f.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n                  to=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"f4uf\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f3uf.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n                  to=\"5.62651 16.25 4.4408921e-15 19.5 11.2583302 13\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"f4uf.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"f5\"\n                points=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"f4f.end\" to=\"visible\" />\n                <animate\n                  id=\"f5f\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f4f.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n                  to=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"f5uf\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f4uf.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n                  to=\"11.2583302 13 5.6291651 9.75 1.687539e-14 6.5\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"f5uf.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"f6\"\n                points=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"f5f.end\" to=\"visible\" />\n                <animate\n                  id=\"f6f\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f5f.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n                  to=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"f6uf\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f5uf.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n                  to=\"11.2583302 0 11.2583302 13 11.2583302 6.5\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"f6uf.end\" to=\"hidden\" />\n              </polygon>\n            </g>\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"spinner.js","mappings":"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","names":[],"sources":["./src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  height: 2rem;\n  width: 2rem;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    height: 2rem;\n    width: 2rem;\n  }\n\n  #fill {\n    fill: var(--theme-color-weak-text);\n  }\n\n  #stroke {\n    stroke: var(--theme-color-weak-text);\n  }\n}\n\n:host(.primary) {\n  #fill {\n    fill: var(--theme-color-primary);\n  }\n\n  #stroke {\n    stroke: var(--theme-color-primary);\n  }\n}\n\n:host(.large) {\n  height: 6rem;\n  width: 6rem;\n\n  svg {\n    height: 5.75rem;\n    width: 6rem;\n  }\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 */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  /**\n   * Variant of spinner\n   */\n  @Prop() variant: 'primary' | 'sencodary' | 'secondary' = 'secondary';\n\n  /**\n   * Size of spinner\n   */\n  @Prop() size: 'medium' | 'large' = 'medium';\n\n  render() {\n    return (\n      <Host\n        class={{\n          primary: this.variant === 'primary',\n          large: this.size === 'large',\n        }}\n      >\n        <svg\n          viewBox=\"0 0 32 32\"\n          version=\"1.1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <g\n            id=\"waiting-anim\"\n            stroke=\"none\"\n            stroke-width=\"1\"\n            fill=\"none\"\n            fill-rule=\"evenodd\"\n          >\n            <g\n              id=\"stroke\"\n              transform=\"translate(4.5, 3)\"\n              fill-rule=\"nonzero\"\n              stroke=\"#0F8287\"\n              stroke-linejoin=\"round\"\n            >\n              <polygon\n                id=\"w1\"\n                points=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n                visibility=\"hidden\"\n              >\n                <set\n                  attributeName=\"visibility\"\n                  begin=\"0s;w6ul.end\"\n                  to=\"visible\"\n                />\n                <animate\n                  id=\"w1l\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"0s;w6ul.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n                  to=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"w1ul\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f6uf.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n                  to=\"16.88749535 9.25 22.5166605 6.5 11.2583302 13\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"w1ul.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"w2\"\n                points=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"w1l.end\" to=\"visible\" />\n                <animate\n                  id=\"w2l\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w1l.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n                  to=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"w2ul\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w1ul.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n                  to=\"16.88749535 16.25 22.5166605 19.5 11.2583302 13\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"w2ul.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"w3\"\n                points=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"w2l.end\" to=\"visible\" />\n                <animate\n                  id=\"w3l\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w2l.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n                  to=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"w3ul\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w2ul.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n                  to=\"11.2583302 13 11.2583302 19.5 11.2583302 26\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"w3ul.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"w4\"\n                points=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"w3l.end\" to=\"visible\" />\n                <animate\n                  id=\"w4l\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w3l.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n                  to=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"w4ul\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w3ul.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n                  to=\"5.62651 16.25 4.4408921e-15 19.5 11.2583302 13\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"w4ul.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"w5\"\n                points=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"w4l.end\" to=\"visible\" />\n                <animate\n                  id=\"w5l\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w4l.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n                  to=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"w5ul\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w4ul.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n                  to=\"11.2583302 13 5.6291651 9.75 1.687539e-14 6.5\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"w5ul.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"w6\"\n                points=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"w5l.end\" to=\"visible\" />\n                <animate\n                  id=\"w6l\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w5l.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n                  to=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"w6ul\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w5ul.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n                  to=\"11.2583302 0 11.2583302 13 11.2583302 6.5\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"w6ul.end\" to=\"hidden\" />\n              </polygon>\n            </g>\n            <g\n              id=\"fill\"\n              transform=\"translate(4.5, 3)\"\n              fill=\"#0F8287\"\n              fill-rule=\"nonzero\"\n            >\n              <polygon\n                id=\"f1\"\n                points=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"w6l.end\" to=\"visible\" />\n                <animate\n                  id=\"f1f\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"w6l.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n                  to=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"f1uf\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f6f.end + 0.2s\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n                  to=\"16.88749535 9.25 22.5166605 6.5 11.2583302 13\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"f1uf.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"f2\"\n                points=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"f1f.end\" to=\"visible\" />\n                <animate\n                  id=\"f2f\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f1f.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n                  to=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"f2uf\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f1uf.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n                  to=\"16.88749535 16.25 22.5166605 19.5 11.2583302 13\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"f2uf.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"f3\"\n                points=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"f2f.end\" to=\"visible\" />\n                <animate\n                  id=\"f3f\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f2f.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n                  to=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"f3uf\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f2uf.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n                  to=\"11.2583302 13 11.2583302 19.5 11.2583302 26\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"f3uf.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"f4\"\n                points=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"f3f.end\" to=\"visible\" />\n                <animate\n                  id=\"f4f\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f3f.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n                  to=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"f4uf\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f3uf.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n                  to=\"5.62651 16.25 4.4408921e-15 19.5 11.2583302 13\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"f4uf.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"f5\"\n                points=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"f4f.end\" to=\"visible\" />\n                <animate\n                  id=\"f5f\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f4f.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n                  to=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"f5uf\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f4uf.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n                  to=\"11.2583302 13 5.6291651 9.75 1.687539e-14 6.5\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"f5uf.end\" to=\"hidden\" />\n              </polygon>\n\n              <polygon\n                id=\"f6\"\n                points=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n                visibility=\"hidden\"\n              >\n                <set attributeName=\"visibility\" begin=\"f5f.end\" to=\"visible\" />\n                <animate\n                  id=\"f6f\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f5f.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n                  to=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n                  keySplines=\"1 0 0.8 1\"\n                  fill=\"freeze\"\n                />\n                <animate\n                  id=\"f6uf\"\n                  attributeName=\"points\"\n                  calcMode=\"spline\"\n                  begin=\"f5uf.end\"\n                  dur=\"0.4s\"\n                  keyTimes=\"0;1\"\n                  from=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n                  to=\"11.2583302 0 11.2583302 13 11.2583302 6.5\"\n                  keySplines=\"0.2 0 0 1\"\n                  fill=\"freeze\"\n                />\n                <set attributeName=\"visibility\" begin=\"f6uf.end\" to=\"hidden\" />\n              </polygon>\n            </g>\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/time-picker.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './date-time-card.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon-button.js';
 
-const timePickerCss = ".header.sc-ix-time-picker{display:flex;align-items:center;justify-content:center}.title.sc-ix-time-picker{display:flex;align-items:center;font-size:16px;font-weight:bold;line-height:20px;min-height:40px;color:var(--theme-datepicker-time-header--color)}.clock.sc-ix-time-picker{height:100%;display:flex;justify-content:center;align-items:center;padding:80px 0}input.sc-ix-time-picker{background-color:var(--theme-input--background);border-radius:2px;border:1px solid var(--theme-input--border-color);box-shadow:inset 0 2px 4px 0 var(--theme-color-1) 12;width:42px;height:32px;text-align:right;color:var(--theme-input--color);margin-top:0.5rem;margin-bottom:0.5rem}input.sc-ix-time-picker::-webkit-outer-spin-button,input.sc-ix-time-picker::-webkit-inner-spin-button{-webkit-appearance:none;margin:0 5px}input[type=number].sc-ix-time-picker{-moz-appearance:textfield}.columns.sc-ix-time-picker{display:flex;flex-direction:column;align-items:center}.column-seperator.sc-ix-time-picker{display:flex;align-items:center;margin:0 0.25rem}.button.sc-ix-time-picker{display:flex;justify-content:flex-end}.default-space.sc-ix-time-picker{margin-left:1rem}.text-align.sc-ix-time-picker{text-align:center}.hidden.sc-ix-time-picker{display:none}";
+const timePickerCss = ".header.sc-ix-time-picker{display:flex;align-items:center;justify-content:center}.title.sc-ix-time-picker{display:flex;align-items:center;font:var(--theme-text-default-title);min-height:2.5rem;color:var(--theme-datepicker-time-header--color)}.clock.sc-ix-time-picker{height:100%;display:flex;justify-content:center;align-items:center;padding:5rem 0}input.sc-ix-time-picker,.time-reference.sc-ix-time-picker{width:2.625rem;height:1.5rem;text-align:center;margin-top:0.5rem;margin-bottom:0.5rem}input.sc-ix-time-picker::-webkit-outer-spin-button,input.sc-ix-time-picker::-webkit-inner-spin-button,.time-reference.sc-ix-time-picker::-webkit-outer-spin-button,.time-reference.sc-ix-time-picker::-webkit-inner-spin-button{-webkit-appearance:none;margin:0 0.3125rem}input[type=number].sc-ix-time-picker,.time-reference[type=number].sc-ix-time-picker{-moz-appearance:textfield}.form-control[type=number].sc-ix-time-picker{text-align:center}.columns.sc-ix-time-picker{display:flex;flex-direction:column;align-items:center;justify-content:space-around}.column-seperator.sc-ix-time-picker{display:flex;align-items:center;margin:0 0.25rem}.button.sc-ix-time-picker{display:flex;justify-content:flex-end}.default-space.sc-ix-time-picker{margin-left:1rem}.text-align.sc-ix-time-picker{text-align:center}.hidden.sc-ix-time-picker{display:none}.time-reference.sc-ix-time-picker{margin:0.75rem 0}";
 
 const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTMLElement {
   constructor() {
@@ -38,33 +38,99 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
   get seconds() {
     return this._time.second;
   }
-  updateInput(step, { hours = undefined, minutes = undefined, seconds = undefined }) {
-    if (hours)
-      step === 'up' ? this.hourInputRef.stepUp() : this.hourInputRef.stepDown();
-    if (minutes)
-      step === 'up'
-        ? this.minuteInputRef.stepUp()
-        : this.minuteInputRef.stepDown();
-    if (seconds)
-      step === 'up'
-        ? this.secondInputRef.stepUp()
-        : this.secondInputRef.stepDown();
+  setInputValue(inputElement, value, max) {
+    if (value > max) {
+      inputElement.value = max.toString();
+    }
+    else if (value < 0) {
+      inputElement.value = '0';
+    }
+    else {
+      inputElement.value = value.toString();
+    }
+    this.updateAndEmitTime();
+  }
+  updateAndEmitTime() {
     this._time = this._time.set({
       hour: Number(this.hourInputRef.value),
       minute: Number(this.minuteInputRef.value),
       second: Number(this.secondInputRef.value),
     });
+    this.setHourAccordingToReference();
     this.emitTimeChange();
   }
+  toggleInputValue(inputElement, currentValue, step, max) {
+    if (step === 'up') {
+      if (currentValue === max) {
+        inputElement.value = '0';
+      }
+      else {
+        inputElement.stepUp();
+      }
+    }
+    else {
+      if (currentValue === 0) {
+        inputElement.value = max.toString();
+      }
+      else {
+        inputElement.stepDown();
+      }
+    }
+  }
+  toggleHourInputWithRef(inputElement, currentValue, step) {
+    if (step === 'up') {
+      if (currentValue === this.getMaxHour()) {
+        inputElement.value = '0';
+      }
+      else {
+        inputElement.stepUp();
+      }
+    }
+    else {
+      if ((this.showTimeReference &&
+        this.timeReference === 'PM' &&
+        currentValue === 12) ||
+        currentValue === 0) {
+        inputElement.value = this.getMaxDisplayedHour().toString();
+      }
+      else {
+        inputElement.stepDown();
+      }
+    }
+  }
+  updateInput(step, { hours = undefined, minutes = undefined, seconds = undefined }) {
+    if (hours) {
+      if (this.showTimeReference) {
+        this.toggleHourInputWithRef(this.hourInputRef, this.hour, step);
+      }
+      else {
+        this.toggleInputValue(this.hourInputRef, this.hour, step, 23);
+      }
+    }
+    if (minutes) {
+      this.toggleInputValue(this.minuteInputRef, this.minutes, step, 59);
+    }
+    if (seconds) {
+      this.toggleInputValue(this.secondInputRef, this.seconds, step, 59);
+    }
+    this.updateAndEmitTime();
+  }
   changeReference() {
-    this.referenceInputRef.value =
-      this.referenceInputRef.value === 'PM' ? 'AM' : 'PM';
+    if (this.timeReference === 'AM') {
+      this.timeReference = 'PM';
+    }
+    else {
+      this.timeReference = 'AM';
+    }
     this.setHourAccordingToReference();
     this.emitTimeChange();
   }
   setHourAccordingToReference() {
+    if (!this.showTimeReference) {
+      return;
+    }
     let hour = Number(this.hourInputRef.value);
-    if (this.referenceInputRef.value === 'PM')
+    if (this.timeReference === 'PM')
       hour += 12;
     this._time = this._time.set({ hour });
   }
@@ -85,24 +151,42 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
   async getCurrentTime() {
     return this._time.toFormat(this.format);
   }
+  getDisplayedHour() {
+    if (this.showTimeReference && this.timeReference === 'PM') {
+      return this._time.hour - 12;
+    }
+    return this._time.hour;
+  }
+  getMaxDisplayedHour() {
+    if (this.showTimeReference) {
+      return 11;
+    }
+    return 23;
+  }
+  getMaxHour() {
+    if (this.showTimeReference && this.timeReference === 'AM') {
+      return 11;
+    }
+    return 23;
+  }
   render() {
     let hideHour = !this.showHour;
     let hideMinutes = !this.showMinutes;
     let hideSeconds = !this.showSeconds;
     const hideTimeReference = !this.showTimeReference;
     const hideIndividual = !this.individual;
-    if (!this.showHour && !this.showMinutes && !this.showSeconds) {
+    if (hideHour && hideMinutes && hideSeconds) {
       hideHour = false;
       hideMinutes = false;
       hideSeconds = false;
     }
     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", { name: "hours", type: "number", placeholder: "00", value: this.hour, min: "0", disabled: true, max: this.showTimeReference === true ? 11 : 23, ref: (ref) => (this.hourInputRef = ref) }), 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", { name: "minutes", type: "number", placeholder: "00", value: this.minutes, min: "0", max: "59", disabled: true, ref: (ref) => (this.minuteInputRef = ref) }), 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", { name: "seconds", type: "number", placeholder: "00", value: this.seconds, disabled: true, min: "0", max: "59", ref: (ref) => (this.secondInputRef = ref) }), 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("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: {
         columns: true,
         'default-space': true,
         hidden: hideTimeReference,
-      } }, h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { name: "reference", type: "text", ref: (ref) => (this.referenceInputRef = ref), value: this.timeReference, disabled: true, class: "text-align" }), h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" }))), h("div", { class: { button: true, hidden: hideIndividual } }, h("ix-button", { onClick: () => this.done.emit(this._time.toFormat(this.format)) }, this.textSelectTime)))));
+      } }, h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("div", { class: "time-reference" }, this.timeReference), h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" }))), h("div", { class: { button: true, hidden: hideIndividual } }, h("ix-button", { onClick: () => this.done.emit(this._time.toFormat(this.format)) }, this.textSelectTime)))));
   }
   get hostElement() { return this; }
   static get style() { return timePickerCss; }
@@ -115,7 +199,7 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
     "showSeconds": [4, "show-seconds"],
     "time": [1],
     "showTimeReference": [1032, "show-time-reference"],
-    "timeReference": [1, "time-reference"],
+    "timeReference": [1025, "time-reference"],
     "textSelectTime": [1, "text-select-time"],
     "hourInputRef": [32],
     "minuteInputRef": [32],

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

@@ -1 +1 @@
-{"file":"time-picker.js","mappings":"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","names":["DateTime"],"sources":["./src/components/time-picker/time-picker.scss?tag=ix-time-picker&encapsulation=scoped","./src/components/time-picker/time-picker.tsx"],"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@import 'common-variables';\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  font-size: 16px;\n  font-weight: bold;\n  line-height: 20px;\n  min-height: 40px;\n  color: var(--theme-datepicker-time-header--color);\n}\n\n.clock {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 80px 0;\n}\n\ninput {\n  background-color: var(--theme-input--background);\n  border-radius: 2px;\n  border: 1px solid var(--theme-input--border-color);\n  box-shadow: inset 0 2px 4px 0 var(--theme-color-1) 12;\n  width: 42px;\n  height: 32px;\n  text-align: right;\n  color: var(--theme-input--color);\n  margin-top: $small-space;\n  margin-bottom: $small-space;\n\n  /* Chrome, Safari, Edge, Opera */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0 5px;\n  }\n\n  /* Firefox */\n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n}\n\n.columns {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.column-seperator {\n  display: flex;\n  align-items: center;\n  margin: 0 $tiny-space;\n}\n\n.button {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.default-space {\n  margin-left: $default-space;\n}\n\n.text-align {\n  text-align: center;\n}\n\n.hidden {\n  display: none;\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 */\n\nimport {\n  Component,\n  Element,\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  scoped: true,\n})\nexport class TimePicker {\n  @Element() hostElement!: HTMLIxTimePickerElement;\n\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() 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 updateInput(\n    step: 'up' | 'down',\n    { hours = undefined, minutes = undefined, seconds = undefined }\n  ) {\n    if (hours)\n      step === 'up' ? this.hourInputRef.stepUp() : this.hourInputRef.stepDown();\n    if (minutes)\n      step === 'up'\n        ? this.minuteInputRef.stepUp()\n        : this.minuteInputRef.stepDown();\n    if (seconds)\n      step === 'up'\n        ? this.secondInputRef.stepUp()\n        : this.secondInputRef.stepDown();\n\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.emitTimeChange();\n  }\n\n  private changeReference() {\n    this.referenceInputRef.value =\n      this.referenceInputRef.value === 'PM' ? 'AM' : 'PM';\n\n    this.setHourAccordingToReference();\n\n    this.emitTimeChange();\n  }\n\n  private setHourAccordingToReference() {\n    let hour = Number(this.hourInputRef.value);\n\n    if (this.referenceInputRef.value === '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  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 (!this.showHour && !this.showMinutes && !this.showSeconds) {\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                name=\"hours\"\n                type=\"number\"\n                placeholder=\"00\"\n                value={this.hour}\n                min=\"0\"\n                disabled\n                max={this.showTimeReference === true ? 11 : 23}\n                ref={(ref) => (this.hourInputRef = ref)}\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                name=\"minutes\"\n                type=\"number\"\n                placeholder=\"00\"\n                value={this.minutes}\n                min=\"0\"\n                max=\"59\"\n                disabled\n                ref={(ref) => (this.minuteInputRef = ref)}\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                name=\"seconds\"\n                type=\"number\"\n                placeholder=\"00\"\n                value={this.seconds}\n                disabled\n                min=\"0\"\n                max=\"59\"\n                ref={(ref) => (this.secondInputRef = ref)}\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              <input\n                name=\"reference\"\n                type=\"text\"\n                ref={(ref) => (this.referenceInputRef = ref)}\n                value={this.timeReference}\n                disabled\n                class=\"text-align\"\n              ></input>\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","mappings":"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","names":["DateTime"],"sources":["./src/components/time-picker/time-picker.scss?tag=ix-time-picker&encapsulation=scoped","./src/components/time-picker/time-picker.tsx"],"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@import 'common-variables';\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  font: var(--theme-text-default-title);\n  min-height: $large-control-height;\n  color: var(--theme-datepicker-time-header--color);\n}\n\n.clock {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 5rem 0;\n}\n\ninput,\n.time-reference {\n  width: 2.625rem;\n  height: $large-space;\n  text-align: center;\n  margin-top: $small-space;\n  margin-bottom: $small-space;\n\n  /* Chrome, Safari, Edge, Opera */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0 0.3125rem;\n  }\n\n  /* Firefox */\n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n}\n\n.form-control[type=number] {\n  text-align: center;\n}\n\n.columns {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n}\n\n.column-seperator {\n  display: flex;\n  align-items: center;\n  margin: 0 $tiny-space;\n}\n\n.button {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.default-space {\n  margin-left: $default-space;\n}\n\n.text-align {\n  text-align: center;\n}\n\n.hidden {\n  display: none;\n}\n\n.time-reference {\n  margin: $medium-space 0;\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 */\n\nimport {\n  Component,\n  Element,\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  scoped: true,\n})\nexport class TimePicker {\n  @Element() hostElement!: HTMLIxTimePickerElement;\n\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}

package/dist/components/toast.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon-button.js';
 
-const toastCss = ".sc-ix-toast-h{display:flex;flex-direction:column;position:relative;min-width:17.5rem;max-width:17.5rem;min-height:3.5rem;pointer-events:all;background-color:var(--theme-toast--background);border:var(--theme-toast--border-thickness) solid var(--theme-toast--border-color);border-radius:var(--theme-toast--border-radius);box-shadow:var(--theme-toast--box-shadow);--animate-duration:300ms}.sc-ix-toast-h .toast-body.sc-ix-toast{display:flex;position:relative;width:100%;flex-grow:1}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-icon.sc-ix-toast{display:flex;align-items:flex-start;margin:1rem}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-content.sc-ix-toast{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%;max-width:10.25rem;margin-top:calc(\n        1rem + var(--theme-toast--border-thickness)\n      );margin-bottom:0.75rem}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-content.sc-ix-toast .toast-message.sc-ix-toast{min-width:0}.sc-ix-toast-h .toast-close.sc-ix-toast{display:flex;position:relative;margin:0.75rem;pointer-events:all}.sc-ix-toast-h .toast-progress-bar.sc-ix-toast{position:absolute;bottom:0;height:0.25rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}.sc-ix-toast-h .toast-progress-bar--animated.sc-ix-toast{animation:trackProgress linear 1 forwards}.sc-ix-toast-h .toast-progress-bar--touched.sc-ix-toast{transition:transform 1s}.sc-ix-toast-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-toast-h:not(.disabled):not(:disabled):hover .toast-progress-bar.sc-ix-toast{visibility:hidden;transition:none}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";
+const toastCss = ".sc-ix-toast-h{display:flex;flex-direction:column;position:relative;min-width:17.5rem;max-width:17.5rem;min-height:3.5rem;pointer-events:all;background-color:var(--theme-toast--background);border:var(--theme-toast--border-thickness) solid var(--theme-toast--border-color);border-radius:var(--theme-toast--border-radius);box-shadow:var(--theme-toast--box-shadow);--animate-duration:300ms}.sc-ix-toast-h .toast-body.sc-ix-toast{display:flex;position:relative;width:100%;flex-grow:1}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-icon.sc-ix-toast{display:flex;align-items:flex-start;margin:1rem}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-content.sc-ix-toast{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%;max-width:10.25rem;margin-top:calc(\n        1rem + var(--theme-toast--border-thickness)\n      );margin-bottom:0.75rem}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-content.sc-ix-toast .toast-message.sc-ix-toast{min-width:0}.sc-ix-toast-h .toast-close.sc-ix-toast{display:flex;position:relative;margin:0.75rem;pointer-events:all}.sc-ix-toast-h .toast-progress-bar.sc-ix-toast{position:absolute;bottom:0;height:0.25rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}.sc-ix-toast-h .toast-progress-bar--animated.sc-ix-toast{animation:trackProgress linear 1 forwards}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";
 
 const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
   constructor() {
@@ -16,7 +16,6 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
     this.icon = undefined;
     this.iconColor = undefined;
     this.progress = 0;
-    this.isRunning = true;
     this.touched = false;
   }
   getIcon() {
@@ -45,35 +44,18 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
     }, 250);
   }
   render() {
-    let progressBarElement;
     let progressBarStyle = {};
     const progressBarClass = ['toast-progress-bar'];
-    if (!this.touched) {
-      progressBarStyle = {
-        animationDuration: `${this.autoCloseDelay}ms`,
-        animationPlayState: this.isRunning ? 'running' : 'paused',
-      };
-      progressBarClass.push('toast-progress-bar--animated');
-    }
-    else {
-      progressBarClass.push('toast-progress-bar--touched');
-    }
-    const updateProgress = () => {
-      requestAnimationFrame(() => {
-        if (progressBarElement) {
-          progressBarElement.style.transform = `scaleX(${this.progress})`;
-        }
-      });
+    progressBarStyle = {
+      animationDuration: `${this.autoCloseDelay}ms`,
+      animationPlayState: this.touched ? 'paused' : 'running',
     };
+    progressBarClass.push('toast-progress-bar--animated');
     return (h(Host, { class: "animate__animated animate__fadeIn" }, h("div", { class: "toast-body", onPointerLeave: () => {
-        this.progress = 0;
-        updateProgress();
+        this.touched = false;
       }, onPointerEnter: () => {
-        this.isRunning = false;
         this.touched = true;
-        this.progress = 1;
-        updateProgress();
-      } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title text-default-title-single" }, this.toastTitle)) : null, h("div", { class: "toast-message text-default" }, 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, ref: (r) => (progressBarElement = r), 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 text-default-title-single" }, this.toastTitle)) : null, h("div", { class: "toast-message text-default" }, 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) {
@@ -91,7 +73,6 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
     "icon": [1],
     "iconColor": [1, "icon-color"],
     "progress": [32],
-    "isRunning": [32],
     "touched": [32]
   }]);
 function defineCustomElement() {

package/dist/components/toast.js.map

@@ -1 +1 @@
-{"file":"toast.js","mappings":"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","names":[],"sources":["./src/components/toast/toast.scss?tag=ix-toast&encapsulation=scoped","./src/components/toast/toast.tsx"],"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@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-width: 17.5rem;\n  max-width: 17.5rem;\n  min-height: 3.5rem;\n\n  pointer-events: all;\n\n  background-color: var(--theme-toast--background);\n  border: var(--theme-toast--border-thickness) solid\n    var(--theme-toast--border-color);\n  border-radius: var(--theme-toast--border-radius);\n  box-shadow: var(--theme-toast--box-shadow);\n\n  --animate-duration: #{$medium-time};\n\n  .toast-body {\n    display: flex;\n    position: relative;\n    width: 100%;\n    flex-grow: 1;\n\n    .toast-icon {\n      display: flex;\n      align-items: flex-start;\n      margin: $default-space;\n    }\n\n    .toast-content {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: 0;\n      width: 100%;\n      max-width: 10.25rem;\n      margin-top: calc(\n        #{$default-space} + var(--theme-toast--border-thickness)\n      );\n      margin-bottom: $medium-space;\n\n      .toast-message {\n        min-width: 0;\n      }\n    }\n  }\n\n  .toast-close {\n    display: flex;\n    position: relative;\n    margin: $medium-space;\n    pointer-events: all;\n  }\n\n  .toast-progress-bar {\n    position: absolute;\n    bottom: 0;\n    height: $tiny-space;\n    width: 100%;\n    background-color: var(--theme-toast-timer-value--background);\n    transform-origin: left;\n\n    &--animated {\n      animation: trackProgress linear 1 forwards;\n    }\n\n    &--touched {\n      transition: transform 1s;\n    }\n  }\n\n  @include hover {\n    .toast-progress-bar {\n      visibility: hidden;\n      transition: none;\n    }\n  }\n\n  @keyframes trackProgress {\n    0% {\n      transform: scaleX(1);\n    }\n    100% {\n      transform: scaleX(0);\n    }\n  }\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 */\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  scoped: 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() isRunning = true;\n  @State() touched = false;\n\n  @Element() host!: 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.host) {\n      this.host.classList.add('animate__fadeOut');\n    }\n    setTimeout(() => {\n      this.closeToast.emit();\n    }, 250);\n  }\n\n  render() {\n    let progressBarElement: HTMLElement;\n    let progressBarStyle: Record<string, string> = {};\n\n    const progressBarClass = ['toast-progress-bar'];\n\n    if (!this.touched) {\n      progressBarStyle = {\n        animationDuration: `${this.autoCloseDelay}ms`,\n        animationPlayState: this.isRunning ? 'running' : 'paused',\n      };\n\n      progressBarClass.push('toast-progress-bar--animated');\n    } else {\n      progressBarClass.push('toast-progress-bar--touched');\n    }\n\n    const updateProgress = () => {\n      requestAnimationFrame(() => {\n        if (progressBarElement) {\n          progressBarElement.style.transform = `scaleX(${this.progress})`;\n        }\n      });\n    };\n\n    return (\n      <Host class=\"animate__animated animate__fadeIn\">\n        <div\n          class=\"toast-body\"\n          onPointerLeave={() => {\n            this.progress = 0;\n            updateProgress();\n          }}\n          onPointerEnter={() => {\n            this.isRunning = false;\n            this.touched = true;\n            this.progress = 1;\n            updateProgress();\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 text-default-title-single\">\n                {this.toastTitle}\n              </div>\n            ) : null}\n            <div class=\"toast-message text-default\">\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            ref={(r) => (progressBarElement = r)}\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","mappings":"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","names":[],"sources":["./src/components/toast/toast.scss?tag=ix-toast&encapsulation=scoped","./src/components/toast/toast.tsx"],"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@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-width: 17.5rem;\n  max-width: 17.5rem;\n  min-height: 3.5rem;\n\n  pointer-events: all;\n\n  background-color: var(--theme-toast--background);\n  border: var(--theme-toast--border-thickness) solid\n    var(--theme-toast--border-color);\n  border-radius: var(--theme-toast--border-radius);\n  box-shadow: var(--theme-toast--box-shadow);\n\n  --animate-duration: #{$medium-time};\n\n  .toast-body {\n    display: flex;\n    position: relative;\n    width: 100%;\n    flex-grow: 1;\n\n    .toast-icon {\n      display: flex;\n      align-items: flex-start;\n      margin: $default-space;\n    }\n\n    .toast-content {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: 0;\n      width: 100%;\n      max-width: 10.25rem;\n      margin-top: calc(\n        #{$default-space} + var(--theme-toast--border-thickness)\n      );\n      margin-bottom: $medium-space;\n\n      .toast-message {\n        min-width: 0;\n      }\n    }\n  }\n\n  .toast-close {\n    display: flex;\n    position: relative;\n    margin: $medium-space;\n    pointer-events: all;\n  }\n\n  .toast-progress-bar {\n    position: absolute;\n    bottom: 0;\n    height: $tiny-space;\n    width: 100%;\n    background-color: var(--theme-toast-timer-value--background);\n    transform-origin: left;\n\n    &--animated {\n      animation: trackProgress linear 1 forwards;\n    }\n  }\n\n  @keyframes trackProgress {\n    0% {\n      transform: scaleX(1);\n    }\n    100% {\n      transform: scaleX(0);\n    }\n  }\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 */\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  scoped: 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() host!: 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.host) {\n      this.host.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 text-default-title-single\">\n                {this.toastTitle}\n              </div>\n            ) : null}\n            <div class=\"toast-message text-default\">\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}

package/dist/components/typography.js

@@ -23,16 +23,23 @@ const IxTypography = /*@__PURE__*/ proxyCustomElement(class IxTypography extends
     this.__registerHost();
     this.__attachShadow();
     this.variant = 'default';
+    this.color = undefined;
   }
   render() {
     const typographyClass = {
       [VariantsMapping[this.variant]]: true,
     };
-    return (h("div", { class: typographyClass }, h("slot", null)));
+    const fontColor = this.color !== undefined
+      ? `var(--theme-color-${this.color}-text)`
+      : 'inherit';
+    return (h("div", { class: typographyClass, style: {
+        color: fontColor,
+      } }, h("slot", null)));
   }
   static get style() { return typographyCss; }
 }, [1, "ix-typography", {
-    "variant": [1]
+    "variant": [1],
+    "color": [1]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {