@siemens/ix 2.0.0-beta.1 → 2.0.1

package/components/tabs.js

@@ -0,0 +1,227 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const tabsCss = ":host{width:auto;display:flex;align-items:center;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}:host .tab-items .items-content{display:flex;align-items:center}:host .arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-invisible-primary--color);background-color:var(--theme-btn-invisible-primary--background);z-index:2}:host .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}:host .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}:host .arrow.right{left:auto;right:0}:host .overflow-shadow{display:block;position:relative;height:100%;width:100%;pointer-events:all}:host .overflow-shadow.shadow-left{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px);mask-image:linear-gradient(90deg, transparent 0px, black 45px)}:host .overflow-shadow.shadow-right{-webkit-mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%)}:host .overflow-shadow.shadow-both{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%)}";
+
+const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selectedChange = createEvent(this, "selectedChange", 7);
+    this.windowStartSize = window.innerWidth;
+    this.clickAction = {
+      timeout: null,
+      isClick: true,
+    };
+    this.small = false;
+    this.rounded = false;
+    this.selected = 0;
+    this.layout = 'auto';
+    this.placement = 'bottom';
+    this.totalItems = 0;
+    this.currentScrollAmount = 0;
+    this.scrollAmount = 100;
+    this.styleNextArrow = {};
+    this.stylePreviousArrow = {};
+    this.scrollActionAmount = 0;
+  }
+  onWindowResize() {
+    this.totalItems = 0;
+    this.totalItems = this.getTabs().length;
+    if (this.windowStartSize === 0)
+      return (this.windowStartSize = window.innerWidth);
+    this.move(this.windowStartSize - window.innerWidth);
+    this.windowStartSize = window.innerWidth;
+  }
+  getTabs() {
+    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));
+  }
+  getTab(tabIndex) {
+    return this.getTabs()[tabIndex];
+  }
+  getTabsWrapper() {
+    return this.hostElement.shadowRoot.querySelector('.items-content');
+  }
+  showArrows() {
+    try {
+      const tabWrapper = this.getTabsWrapper();
+      return (tabWrapper.scrollWidth >
+        Math.ceil(tabWrapper.getBoundingClientRect().width) &&
+        this.layout === 'auto');
+    }
+    catch (error) {
+      return false;
+    }
+  }
+  showPreviousArrow() {
+    try {
+      return this.showArrows() && this.scrollActionAmount < 0;
+    }
+    catch (error) {
+      return false;
+    }
+  }
+  showNextArrow() {
+    try {
+      const tabWrapper = this.getTabsWrapper();
+      const tabWrapperRect = tabWrapper.getBoundingClientRect();
+      return (this.showArrows() &&
+        this.scrollActionAmount >
+          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1);
+    }
+    catch (error) {
+      return false;
+    }
+  }
+  getArrowStyle(condition) {
+    return {
+      opacity: condition ? '1' : '0',
+      zIndex: condition ? '1' : '-1',
+    };
+  }
+  move(amount, click = false) {
+    const tabWrapper = this.getTabsWrapper();
+    const maxScrollWidth = (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;
+    amount = this.currentScrollAmount + amount;
+    amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;
+    const styles = [
+      `transform: translateX(${amount}px);`,
+      click ? 'transition: all ease-in-out 400ms;' : '',
+    ].join('');
+    tabWrapper.setAttribute('style', styles);
+    if (click)
+      this.currentScrollAmount = this.scrollActionAmount = amount;
+    else
+      this.scrollActionAmount = amount;
+  }
+  moveTabToView(tabIndex) {
+    if (!this.showArrows())
+      return;
+    const tab = this.getTab(tabIndex).getBoundingClientRect();
+    const amount = tab.x * -1;
+    this.move(amount, true);
+  }
+  setSelected(index) {
+    this.selected = index;
+  }
+  clickTab(index) {
+    if (this.dragStop()) {
+      return;
+    }
+    const { defaultPrevented } = this.selectedChange.emit(index);
+    if (defaultPrevented) {
+      return;
+    }
+    this.setSelected(index);
+    this.moveTabToView(index);
+  }
+  dragStart(element, event) {
+    if (!this.showArrows())
+      return;
+    if (event.button > 0)
+      return;
+    this.clickAction.timeout =
+      this.clickAction.timeout === null
+        ? setTimeout(() => (this.clickAction.isClick = false), 300)
+        : null;
+    const tabPositionX = parseFloat(window.getComputedStyle(element).left);
+    const mousedownPositionX = event.clientX;
+    const move = (event) => this.dragMove(event, tabPositionX, mousedownPositionX);
+    window.addEventListener('mouseup', () => {
+      window.removeEventListener('mousemove', move, false);
+      this.dragStop();
+    });
+    window.addEventListener('mousemove', move, false);
+  }
+  dragMove(event, tabX, mousedownX) {
+    this.move(event.clientX + tabX - mousedownX);
+  }
+  dragStop() {
+    clearTimeout(this.clickAction.timeout);
+    this.clickAction.timeout = null;
+    if (this.clickAction.isClick)
+      return false;
+    this.currentScrollAmount = this.scrollActionAmount;
+    this.clickAction.isClick = true;
+    return true;
+  }
+  componentDidRender() {
+    const tabs = this.getTabs();
+    this.totalItems = tabs.length;
+    tabs.forEach((element, index) => {
+      if (this.small)
+        element.setAttribute('small', 'true');
+      if (this.rounded)
+        element.setAttribute('rounded', 'true');
+      element.setAttribute('layout', this.layout);
+      element.setAttribute('selected', index === this.selected ? 'true' : 'false');
+      element.setAttribute('placement', this.placement);
+    });
+  }
+  componentWillRender() {
+    requestAnimationFrame(() => {
+      const showNextArrow = this.showNextArrow();
+      const previousArrow = this.showPreviousArrow();
+      this.styleNextArrow = this.getArrowStyle(showNextArrow);
+      this.stylePreviousArrow = this.getArrowStyle(previousArrow);
+    });
+  }
+  componentDidLoad() {
+    const tabs = this.getTabs();
+    tabs.forEach((element) => {
+      element.addEventListener('mousedown', (event) => this.dragStart(element, event));
+    });
+  }
+  onTabClick(event) {
+    if (event.defaultPrevented) {
+      return;
+    }
+    const target = event.target;
+    const tabs = this.getTabs();
+    tabs.forEach((tab, index) => {
+      if (!tab.disabled && tab === target) {
+        this.clickTab(index);
+      }
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "arrow", style: this.stylePreviousArrow, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { name: 'chevron-left-small' })), h("div", { class: {
+        'tab-items': true,
+        'overflow-shadow': true,
+        'shadow-left': this.showPreviousArrow(),
+        'shadow-right': this.showNextArrow(),
+        'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
+      } }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "arrow right", style: this.styleNextArrow, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { name: 'chevron-right-small' }))));
+  }
+  get hostElement() { return this; }
+  static get style() { return tabsCss; }
+}, [1, "ix-tabs", {
+    "small": [4],
+    "rounded": [4],
+    "selected": [1026],
+    "layout": [1],
+    "placement": [1],
+    "totalItems": [32],
+    "currentScrollAmount": [32],
+    "scrollAmount": [32],
+    "styleNextArrow": [32],
+    "stylePreviousArrow": [32],
+    "scrollActionAmount": [32]
+  }, [[9, "resize", "onWindowResize"], [0, "tabClick", "onTabClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Tabs);
+      }
+      break;
+  } });
+}
+
+export { Tabs as T, defineCustomElement as d };
+
+//# sourceMappingURL=tabs.js.map

package/components/tabs.js.map

@@ -0,0 +1 @@
+{"file":"tabs.js","mappings":"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","names":[],"sources":["./src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","./src/components/tabs/tabs.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/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  width: auto;\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  .tab-items {\n    overflow: hidden;\n    scroll-behavior: smooth;\n    width: 100%;\n\n    .items-content {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  .arrow {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto 0;\n    border-radius: 4px;\n    color: var(--theme-btn-invisible-primary--color);\n    background-color: var(--theme-btn-invisible-primary--background);\n    z-index: 2;\n\n    &:hover {\n      color: var(--theme-btn-invisible-primary--color--hover);\n      background-color: var(--theme-btn-invisible-primary--background--hover);\n    }\n\n    &:active {\n      color: var(--theme-btn-invisible-primary--color--active);\n      background-color: var(--theme-btn-invisible-primary--background--active);\n    }\n\n    &.right {\n      left: auto;\n      right: 0;\n    }\n  }\n\n  .overflow-shadow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n\n    &.shadow-left {\n      mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n    }\n\n    &.shadow-right {\n      mask-image: linear-gradient(\n        90deg,\n        black calc(100% - 45px),\n        transparent 100%\n      );\n    }\n\n    &.shadow-both {\n      mask-image: linear-gradient(\n        90deg,\n        transparent 0px,\n        black 45px,\n        black calc(100% - 45px),\n        transparent 100%\n      );\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  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true,\n})\nexport class Tabs {\n  @Element() hostElement!: HTMLIxTabsElement;\n\n  /**\n   * Set tab items to small size\n   */\n  @Prop() small = false;\n\n  /**\n   * Set rounded tabs\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set default selected tab by index\n   */\n  @Prop({ mutable: true }) selected = 0;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set placement style\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * `selected` property changed\n   *\n   * @since 2.0.0\n   */\n  @Event() selectedChange: EventEmitter<number>;\n\n  @State() totalItems = 0;\n  @State() currentScrollAmount = 0;\n  @State() scrollAmount = 100;\n  @State() styleNextArrow = {};\n  @State() stylePreviousArrow = {};\n\n  @State() scrollActionAmount = 0;\n\n  private windowStartSize = window.innerWidth;\n\n  private clickAction: {\n    timeout: NodeJS.Timeout;\n    isClick: boolean;\n  } = {\n    timeout: null,\n    isClick: true,\n  };\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.totalItems = 0;\n    this.totalItems = this.getTabs().length;\n\n    if (this.windowStartSize === 0)\n      return (this.windowStartSize = window.innerWidth);\n    this.move(this.windowStartSize - window.innerWidth);\n    this.windowStartSize = window.innerWidth;\n  }\n\n  private getTabs() {\n    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n  }\n\n  private getTab(tabIndex: number) {\n    return this.getTabs()[tabIndex];\n  }\n\n  private getTabsWrapper() {\n    return this.hostElement.shadowRoot.querySelector('.items-content');\n  }\n\n  private showArrows() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      return (\n        tabWrapper.scrollWidth >\n          Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n        this.layout === 'auto'\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showPreviousArrow() {\n    try {\n      return this.showArrows() && this.scrollActionAmount < 0;\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showNextArrow() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n      return (\n        this.showArrows() &&\n        this.scrollActionAmount >\n          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private getArrowStyle(condition: boolean) {\n    return {\n      opacity: condition ? '1' : '0',\n      zIndex: condition ? '1' : '-1',\n    };\n  }\n\n  private move(amount: number, click = false) {\n    const tabWrapper = this.getTabsWrapper();\n    const maxScrollWidth =\n      (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;\n\n    amount = this.currentScrollAmount + amount;\n    amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;\n\n    const styles = [\n      `transform: translateX(${amount}px);`,\n      click ? 'transition: all ease-in-out 400ms;' : '',\n    ].join('');\n\n    tabWrapper.setAttribute('style', styles);\n\n    if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n    else this.scrollActionAmount = amount;\n  }\n\n  private moveTabToView(tabIndex: number) {\n    if (!this.showArrows()) return;\n\n    const tab = this.getTab(tabIndex).getBoundingClientRect();\n    const amount = tab.x * -1;\n    this.move(amount, true);\n  }\n\n  private setSelected(index: number) {\n    this.selected = index;\n  }\n\n  private clickTab(index: number) {\n    if (this.dragStop()) {\n      return;\n    }\n\n    const { defaultPrevented } = this.selectedChange.emit(index);\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.setSelected(index);\n    this.moveTabToView(index);\n  }\n\n  private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n    if (!this.showArrows()) return;\n    if (event.button > 0) return;\n\n    this.clickAction.timeout =\n      this.clickAction.timeout === null\n        ? setTimeout(() => (this.clickAction.isClick = false), 300)\n        : null;\n\n    const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n    const mousedownPositionX = event.clientX;\n    const move = (event: MouseEvent) =>\n      this.dragMove(event, tabPositionX, mousedownPositionX);\n\n    window.addEventListener('mouseup', () => {\n      window.removeEventListener('mousemove', move, false);\n      this.dragStop();\n    });\n    window.addEventListener('mousemove', move, false);\n  }\n\n  private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n    this.move(event.clientX + tabX - mousedownX);\n  }\n\n  private dragStop() {\n    clearTimeout(this.clickAction.timeout);\n    this.clickAction.timeout = null;\n\n    if (this.clickAction.isClick) return false;\n\n    this.currentScrollAmount = this.scrollActionAmount;\n    this.clickAction.isClick = true;\n\n    return true;\n  }\n\n  componentDidRender() {\n    const tabs = this.getTabs();\n    this.totalItems = tabs.length;\n\n    tabs.forEach((element, index) => {\n      if (this.small) element.setAttribute('small', 'true');\n\n      if (this.rounded) element.setAttribute('rounded', 'true');\n\n      element.setAttribute('layout', this.layout);\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n      element.setAttribute('placement', this.placement);\n    });\n  }\n\n  componentWillRender() {\n    requestAnimationFrame(() => {\n      const showNextArrow = this.showNextArrow();\n      const previousArrow = this.showPreviousArrow();\n      this.styleNextArrow = this.getArrowStyle(showNextArrow);\n      this.stylePreviousArrow = this.getArrowStyle(previousArrow);\n    });\n  }\n\n  componentDidLoad() {\n    const tabs = this.getTabs();\n    tabs.forEach((element) => {\n      element.addEventListener('mousedown', (event) =>\n        this.dragStart(element, event)\n      );\n    });\n  }\n\n  @Listen('tabClick')\n  onTabClick(event: CustomEvent) {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const target = event.target;\n    const tabs = this.getTabs();\n\n    tabs.forEach((tab, index) => {\n      if (!tab.disabled && tab === target) {\n        this.clickTab(index);\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"arrow\"\n          style={this.stylePreviousArrow}\n          onClick={() => this.move(this.scrollAmount, true)}\n        >\n          <ix-icon name={'chevron-left-small'}></ix-icon>\n        </div>\n        <div\n          class={{\n            'tab-items': true,\n            'overflow-shadow': true,\n            'shadow-left': this.showPreviousArrow(),\n            'shadow-right': this.showNextArrow(),\n            'shadow-both': this.showNextArrow() && this.showPreviousArrow(),\n          }}\n        >\n          <div class=\"items-content\">\n            <slot></slot>\n          </div>\n        </div>\n        <div\n          class=\"arrow right\"\n          style={this.styleNextArrow}\n          onClick={() => this.move(-this.scrollAmount, true)}\n        >\n          <ix-icon name={'chevron-right-small'}></ix-icon>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/time-picker.js

@@ -0,0 +1,252 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { l as luxon } from './luxon.js';
+import { d as defineCustomElement$5 } from './button.js';
+import { d as defineCustomElement$4 } from './date-time-card.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './spinner.js';
+import { d as defineCustomElement$1 } from './typography.js';
+
+const timePickerCss = "label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input,input:-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover,input:hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}input.focus,input:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{height:3.25rem;padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea,textarea:-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover,textarea:hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}textarea.focus,textarea:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}:host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .form-control,:host .form-control-plaintext{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);-webkit-padding-start:0.5rem;padding-inline-start:0.5rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}:host .form-control::-moz-placeholder,:host .form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}:host .form-control::placeholder,:host .form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),:host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,:host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,:host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}:host .form-control:focus-visible{color:var(--theme-input--color)}:host .form-control[type=number]{text-align:right}:host .form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}:host .form-control.readonly,:host .form-control[readonly]{background:transparent !important;-webkit-border-before:none !important;border-block-start:none !important;-webkit-border-start:none !important;border-inline-start:none !important;-webkit-border-end:none !important;border-inline-end:none !important;border-radius:0rem}:host .form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}:host .form-control:read-only,:host .form-control[readonly],:host .form-control[readOnly],:host .form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}:host .form-control:read-only::-moz-placeholder,:host .form-control[readonly]::-moz-placeholder,:host .form-control[readOnly]::-moz-placeholder,:host .form-control.readonly::-moz-placeholder{color:transparent}:host .form-control:-moz-read-only::placeholder{color:transparent}:host .form-control:read-only::placeholder,:host .form-control[readonly]::placeholder,:host .form-control[readOnly]::placeholder,:host .form-control.readonly::placeholder{color:transparent}:host .form-control:disabled,:host .form-control.disabled{background:transparent !important;-webkit-border-before:none !important;border-block-start:none !important;-webkit-border-start:none !important;border-inline-start:none !important;-webkit-border-end:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}:host .form-control:disabled::-moz-placeholder,:host .form-control.disabled::-moz-placeholder{color:transparent}:host .form-control:disabled::placeholder,:host .form-control.disabled::placeholder{color:transparent}:host .form-control-plaintext{outline:0}:host .form-group{position:relative}:host .input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}:host .input-wrapper>.glyph{display:block;position:absolute;-webkit-margin-start:0.312rem;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}:host .input-wrapper>input{-webkit-padding-start:2.2rem;padding-inline-start:2.2rem}:host select.form-control{padding:0 0.312rem}:host textarea.form-control{padding:0.375rem 0.5rem}:host .was-validated .form-control:invalid,:host .was-validated .is-invalid{background-color:var(--theme-input-error--background);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center !important;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}:host input.disabled,:host input:disabled{color:var(--theme-input--color--disabled)}:host input:-moz-read-only{cursor:default}:host input:read-only,:host input.readonly{cursor:default}:host .header{display:flex;align-items:center;justify-content:center;height:2.5rem}:host .clock{display:flex;justify-content:center;align-items:center;padding:4.25rem 0}:host input,:host .time-reference{width:2.625rem;height:1.5rem;text-align:center;margin-top:0.25rem;margin-bottom:0.25rem;}:host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button,:host .time-reference::-webkit-outer-spin-button,:host .time-reference::-webkit-inner-spin-button{-webkit-appearance:none;margin:0 0.3125rem}:host input[type=number],:host .time-reference[type=number]{-moz-appearance:textfield}:host .form-control[type=number]{text-align:center}:host .columns{display:flex;flex-direction:column;align-items:center;justify-content:space-around}:host .column-seperator{display:flex;align-items:center;margin:0 0.25rem}:host .button{display:flex;justify-content:flex-end}:host .default-space{margin-left:1rem}:host .text-align{text-align:center}:host .hidden{display:none}:host .time-reference{margin-top:0.5rem;margin-bottom:0.5rem}";
+
+const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.done = createEvent(this, "done", 7);
+    this.timeChange = createEvent(this, "timeChange", 7);
+    this._time = luxon.DateTime.now();
+    this.format = 'TT';
+    this.corners = 'rounded';
+    this.individual = true;
+    this.showHour = false;
+    this.showMinutes = false;
+    this.showSeconds = false;
+    this.time = luxon.DateTime.now().toFormat(this.format);
+    this.showTimeReference = undefined;
+    this.timeReference = luxon.DateTime.fromFormat(this.time, this.format).toFormat('a');
+    this.textSelectTime = 'Done';
+    this.hourInputRef = undefined;
+    this.minuteInputRef = undefined;
+    this.secondInputRef = undefined;
+    this.referenceInputRef = undefined;
+  }
+  get hour() {
+    return this._time.hour;
+  }
+  get minutes() {
+    return this._time.minute;
+  }
+  get seconds() {
+    return this._time.second;
+  }
+  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() {
+    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.timeReference === 'PM')
+      hour += 12;
+    this._time = this._time.set({ hour });
+  }
+  emitTimeChange() {
+    const time = this._time.toFormat(this.format);
+    this.timeChange.emit(time);
+  }
+  componentWillLoad() {
+    this._time = luxon.DateTime.fromFormat(this.time, this.format);
+    if (this.showTimeReference === undefined) {
+      const matchedKeys = Object.keys(luxon.DateTime.fromFormatExplain(this.time, this.format).matches);
+      this.showTimeReference = matchedKeys.includes('a');
+    }
+  }
+  /**
+   * Get current time
+   */
+  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 (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("ix-typography", { variant: "default-title" }, "Time")), h("div", { class: "clock" }, h("div", { class: { columns: true, hidden: hideHour } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { hours: true }), ghost: true, icon: 'chevron-up', variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: "hours", type: "number", placeholder: "HH", min: "0", max: this.getMaxDisplayedHour(), value: this.getDisplayedHour(), ref: (ref) => (this.hourInputRef = ref), onChange: () => this.setInputValue(this.hourInputRef, Number(this.hourInputRef.value), this.getMaxDisplayedHour()) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { hours: true }), ghost: true, icon: 'chevron-down', variant: "primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideHourSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideMinutes } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { minutes: true }), ghost: true, icon: 'chevron-up', variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: "minutes", type: "number", placeholder: "MM", min: "0", max: "59", value: this.minutes, ref: (ref) => (this.minuteInputRef = ref), onChange: () => this.setInputValue(this.minuteInputRef, Number(this.minuteInputRef.value), 59) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { minutes: true }), ghost: true, icon: 'chevron-down', variant: "primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideMinutesSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideSeconds } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { seconds: true }), ghost: true, icon: 'chevron-up', variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: "seconds", type: "number", placeholder: "SS", min: "0", max: "59", value: this.seconds, ref: (ref) => (this.secondInputRef = ref), onChange: () => this.setInputValue(this.secondInputRef, Number(this.secondInputRef.value), 59) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { seconds: true }), ghost: true, icon: 'chevron-down', variant: "primary", class: "arrows" })), h("div", { class: {
+        columns: true,
+        'default-space': true,
+        hidden: hideTimeReference,
+      } }, 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)))));
+  }
+  static get style() { return timePickerCss; }
+}, [1, "ix-time-picker", {
+    "format": [1],
+    "corners": [1],
+    "individual": [4],
+    "showHour": [4, "show-hour"],
+    "showMinutes": [4, "show-minutes"],
+    "showSeconds": [4, "show-seconds"],
+    "time": [1],
+    "showTimeReference": [1032, "show-time-reference"],
+    "timeReference": [1025, "time-reference"],
+    "textSelectTime": [1, "text-select-time"],
+    "hourInputRef": [32],
+    "minuteInputRef": [32],
+    "secondInputRef": [32],
+    "referenceInputRef": [32],
+    "getCurrentTime": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-time-picker", "ix-button", "ix-date-time-card", "ix-icon-button", "ix-spinner", "ix-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-time-picker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TimePicker);
+      }
+      break;
+    case "ix-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-date-time-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { TimePicker as T, defineCustomElement as d };
+
+//# sourceMappingURL=time-picker.js.map

package/components/time-picker.js.map

@@ -0,0 +1 @@
+{"file":"time-picker.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,+5hBAA+5hB;;MC6Bx6hB,UAAU;;;;;;;IAyFb,UAAK,GAAaA,cAAQ,CAAC,GAAG,EAAE,CAAC;kBAnFhB,IAAI;mBAKQ,SAAS;sBAKhB,IAAI;oBAKf,KAAK;uBAKF,KAAK;uBAKL,KAAK;gBAOJA,cAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;6BAOd,SAAS;yBAKAA,cAAQ,CAAC,UAAU,CACvE,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,MAAM,CACZ,CAAC,QAAQ,CAAC,GAAG,CAAgB;0BAOL,MAAM;;;;;;EAiB/B,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;GACxB;EAED,IAAI,OAAO;IACT,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;GAC1B;EAED,IAAI,OAAO;IACT,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;GAC1B;EAIO,aAAa,CACnB,YAA8B,EAC9B,KAAa,EACb,GAAW;IAEX,IAAI,KAAK,GAAG,GAAG,EAAE;MACf,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;KACrC;SAAM,IAAI,KAAK,GAAG,CAAC,EAAE;MACpB,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC;KAC1B;SAAM;MACL,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;KACvC;IAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;GAC1B;EAEO,iBAAiB;IACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;MAC1B,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACrC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;MACzC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;KAC1C,CAAC,CAAC;IAEH,IAAI,CAAC,2BAA2B,EAAE,CAAC;IAEnC,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAEO,gBAAgB,CACtB,YAA8B,EAC9B,YAAoB,EACpB,IAAmB,EACnB,GAAW;IAEX,IAAI,IAAI,KAAK,IAAI,EAAE;MACjB,IAAI,YAAY,KAAK,GAAG,EAAE;QACxB,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC;OAC1B;WAAM;QACL,YAAY,CAAC,MAAM,EAAE,CAAC;OACvB;KACF;SAAM;MACL,IAAI,YAAY,KAAK,CAAC,EAAE;QACtB,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;OACrC;WAAM;QACL,YAAY,CAAC,QAAQ,EAAE,CAAC;OACzB;KACF;GACF;EAEO,sBAAsB,CAC5B,YAA8B,EAC9B,YAAoB,EACpB,IAAmB;IAEnB,IAAI,IAAI,KAAK,IAAI,EAAE;MACjB,IAAI,YAAY,KAAK,IAAI,CAAC,UAAU,EAAE,EAAE;QACtC,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC;OAC1B;WAAM;QACL,YAAY,CAAC,MAAM,EAAE,CAAC;OACvB;KACF;SAAM;MACL,IACE,CAAC,IAAI,CAAC,iBAAiB;QACrB,IAAI,CAAC,aAAa,KAAK,IAAI;QAC3B,YAAY,KAAK,EAAE;QACrB,YAAY,KAAK,CAAC,EAClB;QACA,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC,QAAQ,EAAE,CAAC;OAC5D;WAAM;QACL,YAAY,CAAC,QAAQ,EAAE,CAAC;OACzB;KACF;GACF;EAEO,WAAW,CACjB,IAAmB,EACnB,EAAE,KAAK,GAAG,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE;IAE/D,IAAI,KAAK,EAAE;MACT,IAAI,IAAI,CAAC,iBAAiB,EAAE;QAC1B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;OACjE;WAAM;QACL,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;OAC/D;KACF;IAED,IAAI,OAAO,EAAE;MACX,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;KACpE;IAED,IAAI,OAAO,EAAE;MACX,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;KACpE;IAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;GAC1B;EAEO,eAAe;IACrB,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;MAC/B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;KAC3B;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;KAC3B;IAED,IAAI,CAAC,2BAA2B,EAAE,CAAC;IAEnC,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAEO,2BAA2B;IACjC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MAC3B,OAAO;KACR;IAED,IAAI,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAE3C,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI;MAAE,IAAI,IAAI,EAAE,CAAC;IAE5C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;GACvC;EAEO,cAAc;IACpB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5B;EAED,iBAAiB;IACf,IAAI,CAAC,KAAK,GAAGA,cAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACzD,IAAI,IAAI,CAAC,iBAAiB,KAAK,SAAS,EAAE;MACxC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAC7BA,cAAQ,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAC3D,CAAC;MACF,IAAI,CAAC,iBAAiB,GAAG,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACpD;GACF;;;;EAMD,MAAM,cAAc;IAClB,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACzC;EAEO,gBAAgB;IACtB,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;MACzD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC;KAC7B;IAED,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;GACxB;EAEO,mBAAmB;IACzB,IAAI,IAAI,CAAC,iBAAiB,EAAE;MAC1B,OAAO,EAAE,CAAC;KACX;IAED,OAAO,EAAE,CAAC;GACX;EAEO,UAAU;IAChB,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;MACzD,OAAO,EAAE,CAAC;KACX;IAED,OAAO,EAAE,CAAC;GACX;EAED,MAAM;IACJ,IAAI,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC9B,IAAI,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;IACpC,IAAI,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;IACpC,MAAM,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC;IAClD,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IAExC,IAAI,QAAQ,IAAI,WAAW,IAAI,WAAW,EAAE;MAC1C,QAAQ,GAAG,KAAK,CAAC;MACjB,WAAW,GAAG,KAAK,CAAC;MACpB,WAAW,GAAG,KAAK,CAAC;KACrB;IAED,MAAM,iBAAiB,GAAG,WAAW,IAAI,QAAQ,CAAC;IAClD,MAAM,oBAAoB,GAAG,WAAW,IAAI,WAAW,CAAC;IAExD,QACE,EAAC,IAAI,QACH,yBAAmB,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACnE,WAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,IAC/B,qBAAe,OAAO,EAAC,eAAe,WAAqB,CACvD,EAEN,WAAK,KAAK,EAAC,OAAO,IAChB,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAC7C,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EACtD,KAAK,QACL,IAAI,EAAE,YAAY,EAClB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE,EAClB,aACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,IAAI,EAChB,GAAG,EAAC,GAAG,EACP,GAAG,EAAE,IAAI,CAAC,mBAAmB,EAAE,EAC/B,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAC9B,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,EACvC,QAAQ,EAAE,MACR,IAAI,CAAC,aAAa,CAChB,IAAI,CAAC,YAAY,EACjB,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC/B,IAAI,CAAC,mBAAmB,EAAE,CAC3B,GAEI,EACT,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EACxD,KAAK,QACL,IAAI,EAAE,cAAc,EACpB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE,CACd,EAEN,WACE,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM,EAAE,iBAAiB,EAAE,QAG1D,EAEN,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,IAChD,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EACxD,KAAK,QACL,IAAI,EAAE,YAAY,EAClB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE,EAClB,aACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,IAAI,EAChB,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,IAAI,EACR,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC,EACzC,QAAQ,EAAE,MACR,IAAI,CAAC,aAAa,CAChB,IAAI,CAAC,cAAc,EACnB,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EACjC,EAAE,CACH,GAEI,EACT,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAC1D,KAAK,QACL,IAAI,EAAE,cAAc,EACpB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE,CACd,EAEN,WACE,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM,EAAE,oBAAoB,EAAE,QAG7D,EAEN,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,IAChD,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EACxD,KAAK,QACL,IAAI,EAAE,YAAY,EAClB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE,EAClB,aACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,IAAI,EAChB,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,IAAI,EACR,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC,EACzC,QAAQ,EAAE,MACR,IAAI,CAAC,aAAa,CAChB,IAAI,CAAC,cAAc,EACnB,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EACjC,EAAE,CACH,GAEI,EACT,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAC1D,KAAK,QACL,IAAI,EAAE,cAAc,EACpB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE,CACd,EAEN,WACE,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,eAAe,EAAE,IAAI;QACrB,MAAM,EAAE,iBAAiB;OAC1B,IAED,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,EACrC,KAAK,QACL,IAAI,EAAE,YAAY,EAClB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE,EAClB,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,aAAa,CAAO,EACtD,sBACE,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,EACrC,KAAK,QACL,IAAI,EAAE,cAAc,EACpB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,GACE,CACd,CACF,EAEN,WAAK,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,IAClD,iBACE,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAE9D,IAAI,CAAC,cAAc,CACV,CACR,CACY,CACf,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DateTime"],"sources":["./src/components/time-picker/time-picker.scss?tag=ix-time-picker&encapsulation=shadow","./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@import 'mixins/shadow-dom/component';\n@import 'components/form/input';\n\n:host {\n  @include ix-component;\n\n  @import 'legacy/components/forms';\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: $large-control-height;\n  }\n\n  .clock {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 4.25rem 0;\n  }\n\n  input,\n  .time-reference {\n    width: 2.625rem;\n    height: $large-space;\n    text-align: center;\n    margin-top: 0.25rem;\n    margin-bottom: 0.25rem;\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  .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-top: 0.5rem;\n    margin-bottom: 0.5rem;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\n\nexport type TimePickerCorners = DateTimeCardCorners;\n\n@Component({\n  tag: 'ix-time-picker',\n  styleUrl: 'time-picker.scss',\n  shadow: true,\n})\nexport class TimePicker {\n  /**\n   * Format of time string\n   *\n   * @since 1.1.0\n   */\n  @Prop() format: string = 'TT';\n\n  /**\n   * Corner style\n   */\n  @Prop() corners: TimePickerCorners = 'rounded';\n\n  /**\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = false;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = false;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = false;\n\n  /**\n   * Select time with format string\n   *\n   * @since 1.1.0\n   */\n  @Prop() time: string = DateTime.now().toFormat(this.format);\n\n  /**\n   * Show time reference input\n   *\n   * @since 1.1.0 time reference is default aligned with formt tt\n   */\n  @Prop({ mutable: true }) showTimeReference = undefined;\n\n  /**\n   * Set time reference\n   */\n  @Prop({ mutable: true }) timeReference: 'AM' | 'PM' = DateTime.fromFormat(\n    this.time,\n    this.format\n  ).toFormat('a') as 'PM' | 'AM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectTime = 'Done';\n\n  /**\n   * Time event\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Time change event\n   */\n  @Event() timeChange: EventEmitter<string>;\n\n  @State() hourInputRef: HTMLInputElement;\n  @State() minuteInputRef: HTMLInputElement;\n  @State() secondInputRef: HTMLInputElement;\n  @State() referenceInputRef: HTMLInputElement;\n\n  get hour() {\n    return this._time.hour;\n  }\n\n  get minutes() {\n    return this._time.minute;\n  }\n\n  get seconds() {\n    return this._time.second;\n  }\n\n  private _time: DateTime = DateTime.now();\n\n  private setInputValue(\n    inputElement: HTMLInputElement,\n    value: number,\n    max: number\n  ) {\n    if (value > max) {\n      inputElement.value = max.toString();\n    } else if (value < 0) {\n      inputElement.value = '0';\n    } else {\n      inputElement.value = value.toString();\n    }\n\n    this.updateAndEmitTime();\n  }\n\n  private updateAndEmitTime() {\n    this._time = this._time.set({\n      hour: Number(this.hourInputRef.value),\n      minute: Number(this.minuteInputRef.value),\n      second: Number(this.secondInputRef.value),\n    });\n\n    this.setHourAccordingToReference();\n\n    this.emitTimeChange();\n  }\n\n  private toggleInputValue(\n    inputElement: HTMLInputElement,\n    currentValue: number,\n    step: 'up' | 'down',\n    max: number\n  ) {\n    if (step === 'up') {\n      if (currentValue === max) {\n        inputElement.value = '0';\n      } else {\n        inputElement.stepUp();\n      }\n    } else {\n      if (currentValue === 0) {\n        inputElement.value = max.toString();\n      } else {\n        inputElement.stepDown();\n      }\n    }\n  }\n\n  private toggleHourInputWithRef(\n    inputElement: HTMLInputElement,\n    currentValue: number,\n    step: 'up' | 'down'\n  ) {\n    if (step === 'up') {\n      if (currentValue === this.getMaxHour()) {\n        inputElement.value = '0';\n      } else {\n        inputElement.stepUp();\n      }\n    } else {\n      if (\n        (this.showTimeReference &&\n          this.timeReference === 'PM' &&\n          currentValue === 12) ||\n        currentValue === 0\n      ) {\n        inputElement.value = this.getMaxDisplayedHour().toString();\n      } else {\n        inputElement.stepDown();\n      }\n    }\n  }\n\n  private updateInput(\n    step: 'up' | 'down',\n    { hours = undefined, minutes = undefined, seconds = undefined }\n  ) {\n    if (hours) {\n      if (this.showTimeReference) {\n        this.toggleHourInputWithRef(this.hourInputRef, this.hour, step);\n      } else {\n        this.toggleInputValue(this.hourInputRef, this.hour, step, 23);\n      }\n    }\n\n    if (minutes) {\n      this.toggleInputValue(this.minuteInputRef, this.minutes, step, 59);\n    }\n\n    if (seconds) {\n      this.toggleInputValue(this.secondInputRef, this.seconds, step, 59);\n    }\n\n    this.updateAndEmitTime();\n  }\n\n  private changeReference() {\n    if (this.timeReference === 'AM') {\n      this.timeReference = 'PM';\n    } else {\n      this.timeReference = 'AM';\n    }\n\n    this.setHourAccordingToReference();\n\n    this.emitTimeChange();\n  }\n\n  private setHourAccordingToReference() {\n    if (!this.showTimeReference) {\n      return;\n    }\n\n    let hour = Number(this.hourInputRef.value);\n\n    if (this.timeReference === 'PM') hour += 12;\n\n    this._time = this._time.set({ hour });\n  }\n\n  private emitTimeChange() {\n    const time = this._time.toFormat(this.format);\n    this.timeChange.emit(time);\n  }\n\n  componentWillLoad() {\n    this._time = DateTime.fromFormat(this.time, this.format);\n    if (this.showTimeReference === undefined) {\n      const matchedKeys = Object.keys(\n        DateTime.fromFormatExplain(this.time, this.format).matches\n      );\n      this.showTimeReference = matchedKeys.includes('a');\n    }\n  }\n\n  /**\n   * Get current time\n   */\n  @Method()\n  async getCurrentTime() {\n    return this._time.toFormat(this.format);\n  }\n\n  private getDisplayedHour() {\n    if (this.showTimeReference && this.timeReference === 'PM') {\n      return this._time.hour - 12;\n    }\n\n    return this._time.hour;\n  }\n\n  private getMaxDisplayedHour() {\n    if (this.showTimeReference) {\n      return 11;\n    }\n\n    return 23;\n  }\n\n  private getMaxHour() {\n    if (this.showTimeReference && this.timeReference === 'AM') {\n      return 11;\n    }\n\n    return 23;\n  }\n\n  render() {\n    let hideHour = !this.showHour;\n    let hideMinutes = !this.showMinutes;\n    let hideSeconds = !this.showSeconds;\n    const hideTimeReference = !this.showTimeReference;\n    const hideIndividual = !this.individual;\n\n    if (hideHour && hideMinutes && hideSeconds) {\n      hideHour = false;\n      hideMinutes = false;\n      hideSeconds = false;\n    }\n\n    const hideHourSeperator = hideMinutes || hideHour;\n    const hideMinutesSeperator = hideSeconds || hideMinutes;\n\n    return (\n      <Host>\n        <ix-date-time-card individual={this.individual} corners={this.corners}>\n          <div class=\"header\" slot=\"header\">\n            <ix-typography variant=\"default-title\">Time</ix-typography>\n          </div>\n\n          <div class=\"clock\">\n            <div class={{ columns: true, hidden: hideHour }}>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('up', { hours: true })}\n                ghost\n                icon={'chevron-up'}\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <input\n                class=\"form-control\"\n                name=\"hours\"\n                type=\"number\"\n                placeholder=\"HH\"\n                min=\"0\"\n                max={this.getMaxDisplayedHour()}\n                value={this.getDisplayedHour()}\n                ref={(ref) => (this.hourInputRef = ref)}\n                onChange={() =>\n                  this.setInputValue(\n                    this.hourInputRef,\n                    Number(this.hourInputRef.value),\n                    this.getMaxDisplayedHour()\n                  )\n                }\n              ></input>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('down', { hours: true })}\n                ghost\n                icon={'chevron-down'}\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n\n            <div\n              class={{ 'column-seperator': true, hidden: hideHourSeperator }}\n            >\n              :\n            </div>\n\n            <div class={{ columns: true, hidden: hideMinutes }}>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('up', { minutes: true })}\n                ghost\n                icon={'chevron-up'}\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <input\n                class=\"form-control\"\n                name=\"minutes\"\n                type=\"number\"\n                placeholder=\"MM\"\n                min=\"0\"\n                max=\"59\"\n                value={this.minutes}\n                ref={(ref) => (this.minuteInputRef = ref)}\n                onChange={() =>\n                  this.setInputValue(\n                    this.minuteInputRef,\n                    Number(this.minuteInputRef.value),\n                    59\n                  )\n                }\n              ></input>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('down', { minutes: true })}\n                ghost\n                icon={'chevron-down'}\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n\n            <div\n              class={{ 'column-seperator': true, hidden: hideMinutesSeperator }}\n            >\n              :\n            </div>\n\n            <div class={{ columns: true, hidden: hideSeconds }}>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('up', { seconds: true })}\n                ghost\n                icon={'chevron-up'}\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <input\n                class=\"form-control\"\n                name=\"seconds\"\n                type=\"number\"\n                placeholder=\"SS\"\n                min=\"0\"\n                max=\"59\"\n                value={this.seconds}\n                ref={(ref) => (this.secondInputRef = ref)}\n                onChange={() =>\n                  this.setInputValue(\n                    this.secondInputRef,\n                    Number(this.secondInputRef.value),\n                    59\n                  )\n                }\n              ></input>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('down', { seconds: true })}\n                ghost\n                icon={'chevron-down'}\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n\n            <div\n              class={{\n                columns: true,\n                'default-space': true,\n                hidden: hideTimeReference,\n              }}\n            >\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.changeReference()}\n                ghost\n                icon={'chevron-up'}\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <div class=\"time-reference\">{this.timeReference}</div>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.changeReference()}\n                ghost\n                icon={'chevron-down'}\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n          </div>\n\n          <div class={{ button: true, hidden: hideIndividual }}>\n            <ix-button\n              onClick={() => this.done.emit(this._time.toFormat(this.format))}\n            >\n              {this.textSelectTime}\n            </ix-button>\n          </div>\n        </ix-date-time-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}