@siemens/ix 1.0.0-beta.2

package/dist/components/rwd.util.js

@@ -0,0 +1,39 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const convertToRemString = (value) => {
+  const valueRem = value / 16;
+  return `${valueRem}rem`;
+};
+const convertToAbbreviationString = (num) => {
+  if (isNaN(num) || num === null || num === undefined) {
+    return '';
+  }
+  let unit = '';
+  // Metric Units
+  const units = [
+    { unit: 'q', value: Math.pow(10, 15) },
+    { unit: 't', value: Math.pow(10, 12) },
+    { unit: 'B', value: Math.pow(10, 9) },
+    { unit: 'M', value: Math.pow(10, 6) },
+    { unit: 'K', value: Math.pow(10, 3) }, // 1000
+  ];
+  units.some(pow => {
+    let formattedNum = Math.abs(num);
+    if (formattedNum >= pow.value) {
+      formattedNum /= pow.value;
+      num = Math.round(formattedNum * 10) / 10;
+      unit = pow.unit;
+      return true;
+    }
+    return false;
+  });
+  return num + unit;
+};
+
+export { convertToRemString as a, convertToAbbreviationString as c };

package/dist/components/select-item.js

@@ -0,0 +1,71 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './dropdown-item.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const selectItemCss = ".sc-ix-select-item-h{display:block}.sc-ix-select-item-h ix-dropdown-item.sc-ix-select-item button.sc-ix-select-item{margin-left:1rem}";
+
+const SelectItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.itemClick = createEvent(this, "itemClick", 7);
+    /**
+     * Whether the item is selected.
+     */
+    this.selected = false;
+    /**
+     * ***Internal***
+     */
+    this.hover = false;
+  }
+  /**
+   * Internal
+   * @param event
+   */
+  async onItemClick(event) {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    this.itemClick.emit(this.value);
+  }
+  componentDidRender() {
+    if (!this.value) {
+      throw Error('ix-select-item must have a `value` property');
+    }
+  }
+  render() {
+    return (h(Host, null, h("ix-dropdown-item", { checked: this.selected, hover: this.hover, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
+  }
+  get hostElement() { return this; }
+  static get style() { return selectItemCss; }
+}, [2, "ix-select-item", {
+    "label": [513],
+    "value": [520],
+    "selected": [4],
+    "hover": [4],
+    "onItemClick": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-select-item", "ix-dropdown-item", "ix-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-select-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SelectItem);
+      }
+      break;
+    case "ix-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { SelectItem as S, defineCustomElement as d };

package/dist/components/spinner.js

@@ -0,0 +1,43 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const spinnerCss = ".sc-ix-spinner-h{display:flex;position:relative;height:2rem;width:2rem;justify-content:center;align-items:center}.sc-ix-spinner-h svg.sc-ix-spinner{height:2rem;width:2rem}.sc-ix-spinner-h #fill.sc-ix-spinner{fill:var(--theme-color-weak-text)}.sc-ix-spinner-h #stroke.sc-ix-spinner{stroke:var(--theme-color-weak-text)}.primary.sc-ix-spinner-h #fill.sc-ix-spinner{fill:var(--theme-color-primary)}.primary.sc-ix-spinner-h #stroke.sc-ix-spinner{stroke:var(--theme-color-primary)}.large.sc-ix-spinner-h{height:6rem;width:6rem}.large.sc-ix-spinner-h svg.sc-ix-spinner{height:5.75rem;width:6rem}";
+
+const Spinner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Variant of spinner
+     */
+    this.variant = 'secondary';
+    /**
+     * Size of spinner
+     */
+    this.size = 'medium';
+  }
+  render() {
+    return (h(Host, { class: {
+        primary: this.variant === 'primary',
+        large: this.size === 'large',
+      } }, h("svg", { viewBox: "0 0 32 32", version: "1.1", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "waiting-anim", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { id: "stroke", transform: "translate(4.5, 3)", "fill-rule": "nonzero", stroke: "#0F8287", "stroke-linejoin": "round" }, h("polygon", { id: "w1", points: "11.2583302 0 11.2583302 6.5 11.2583302 13", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "0s;w6ul.end", to: "visible" }), h("animate", { id: "w1l", attributeName: "points", calcMode: "spline", begin: "0s;w6ul.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 11.2583302 6.5 11.2583302 13", to: "11.2583302 0 22.5166605 6.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "w1ul", attributeName: "points", calcMode: "spline", begin: "f6uf.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 22.5166605 6.5 11.2583302 13", to: "16.88749535 9.25 22.5166605 6.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "w1ul.end", to: "hidden" })), h("polygon", { id: "w2", points: "22.5166605 6.5 16.88749535 10 11.2583302 13", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "w1l.end", to: "visible" }), h("animate", { id: "w2l", attributeName: "points", calcMode: "spline", begin: "w1l.end", dur: "0.4s", keyTimes: "0;1", from: "22.5166605 6.5 16.88749535 10 11.2583302 13", to: "22.5166605 6.5 22.5166605 19.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "w2ul", attributeName: "points", calcMode: "spline", begin: "w1ul.end", dur: "0.4s", keyTimes: "0;1", from: "22.5166605 6.5 22.5166605 19.5 11.2583302 13", to: "16.88749535 16.25 22.5166605 19.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "w2ul.end", to: "hidden" })), h("polygon", { id: "w3", points: "11.2583302 13 22.5166605 19.5 16.88749535 16.75", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "w2l.end", to: "visible" }), h("animate", { id: "w3l", attributeName: "points", calcMode: "spline", begin: "w2l.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 22.5166605 19.5 16.88749535 16.75", to: "11.2583302 13 22.5166605 19.5 11.2583302 26", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "w3ul", attributeName: "points", calcMode: "spline", begin: "w2ul.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 22.5166605 19.5 11.2583302 26", to: "11.2583302 13 11.2583302 19.5 11.2583302 26", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "w3ul.end", to: "hidden" })), h("polygon", { id: "w4", points: "11.2583302 26 11.2583302 19.5 11.2583302 13", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "w3l.end", to: "visible" }), h("animate", { id: "w4l", attributeName: "points", calcMode: "spline", begin: "w3l.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 26 11.2583302 19.5 11.2583302 13", to: "11.2583302 26 4.4408921e-15 19.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "w4ul", attributeName: "points", calcMode: "spline", begin: "w3ul.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 26 4.4408921e-15 19.5 11.2583302 13", to: "5.62651 16.25 4.4408921e-15 19.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "w4ul.end", to: "hidden" })), h("polygon", { id: "w5", points: "11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "w4l.end", to: "visible" }), h("animate", { id: "w5l", attributeName: "points", calcMode: "spline", begin: "w4l.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25", to: "11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "w5ul", attributeName: "points", calcMode: "spline", begin: "w4ul.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5", to: "11.2583302 13 5.6291651 9.75 1.687539e-14 6.5", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "w5ul.end", to: "hidden" })), h("polygon", { id: "w6", points: "5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "w5l.end", to: "visible" }), h("animate", { id: "w6l", attributeName: "points", calcMode: "spline", begin: "w5l.end", dur: "0.4s", keyTimes: "0;1", from: "5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5", to: "11.2583302 0 11.2583302 13 2.66453526e-15 6.5", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "w6ul", attributeName: "points", calcMode: "spline", begin: "w5ul.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 11.2583302 13 2.66453526e-15 6.5", to: "11.2583302 0 11.2583302 13 11.2583302 6.5", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "w6ul.end", to: "hidden" }))), h("g", { id: "fill", transform: "translate(4.5, 3)", fill: "#0F8287", "fill-rule": "nonzero" }, h("polygon", { id: "f1", points: "11.2583302 0 11.2583302 6.5 11.2583302 13", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "w6l.end", to: "visible" }), h("animate", { id: "f1f", attributeName: "points", calcMode: "spline", begin: "w6l.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 11.2583302 6.5 11.2583302 13", to: "11.2583302 0 22.5166605 6.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "f1uf", attributeName: "points", calcMode: "spline", begin: "f6f.end + 0.2s", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 22.5166605 6.5 11.2583302 13", to: "16.88749535 9.25 22.5166605 6.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "f1uf.end", to: "hidden" })), h("polygon", { id: "f2", points: "22.5166605 6.5 16.88749535 10 11.2583302 13", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "f1f.end", to: "visible" }), h("animate", { id: "f2f", attributeName: "points", calcMode: "spline", begin: "f1f.end", dur: "0.4s", keyTimes: "0;1", from: "22.5166605 6.5 16.88749535 10 11.2583302 13", to: "22.5166605 6.5 22.5166605 19.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "f2uf", attributeName: "points", calcMode: "spline", begin: "f1uf.end", dur: "0.4s", keyTimes: "0;1", from: "22.5166605 6.5 22.5166605 19.5 11.2583302 13", to: "16.88749535 16.25 22.5166605 19.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "f2uf.end", to: "hidden" })), h("polygon", { id: "f3", points: "11.2583302 13 22.5166605 19.5 16.88749535 16.75", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "f2f.end", to: "visible" }), h("animate", { id: "f3f", attributeName: "points", calcMode: "spline", begin: "f2f.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 22.5166605 19.5 16.88749535 16.75", to: "11.2583302 13 22.5166605 19.5 11.2583302 26", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "f3uf", attributeName: "points", calcMode: "spline", begin: "f2uf.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 22.5166605 19.5 11.2583302 26", to: "11.2583302 13 11.2583302 19.5 11.2583302 26", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "f3uf.end", to: "hidden" })), h("polygon", { id: "f4", points: "11.2583302 26 11.2583302 19.5 11.2583302 13", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "f3f.end", to: "visible" }), h("animate", { id: "f4f", attributeName: "points", calcMode: "spline", begin: "f3f.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 26 11.2583302 19.5 11.2583302 13", to: "11.2583302 26 4.4408921e-15 19.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "f4uf", attributeName: "points", calcMode: "spline", begin: "f3uf.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 26 4.4408921e-15 19.5 11.2583302 13", to: "5.62651 16.25 4.4408921e-15 19.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "f4uf.end", to: "hidden" })), h("polygon", { id: "f5", points: "11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "f4f.end", to: "visible" }), h("animate", { id: "f5f", attributeName: "points", calcMode: "spline", begin: "f4f.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25", to: "11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "f5uf", attributeName: "points", calcMode: "spline", begin: "f4uf.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5", to: "11.2583302 13 5.6291651 9.75 1.687539e-14 6.5", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "f5uf.end", to: "hidden" })), h("polygon", { id: "f6", points: "5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "f5f.end", to: "visible" }), h("animate", { id: "f6f", attributeName: "points", calcMode: "spline", begin: "f5f.end", dur: "0.4s", keyTimes: "0;1", from: "5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5", to: "11.2583302 0 11.2583302 13 2.66453526e-15 6.5", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "f6uf", attributeName: "points", calcMode: "spline", begin: "f5uf.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 11.2583302 13 2.66453526e-15 6.5", to: "11.2583302 0 11.2583302 13 11.2583302 6.5", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "f6uf.end", to: "hidden" })))))));
+  }
+  static get style() { return spinnerCss; }
+}, [2, "ix-spinner", {
+    "variant": [1],
+    "size": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Spinner);
+      }
+      break;
+  } });
+}
+
+export { Spinner as S, defineCustomElement as d };

package/dist/components/tab-item.js

@@ -0,0 +1,86 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tabItemCss = "@charset \"UTF-8\";ix-tab-item{position:relative;display:flex;align-items:center;justify-content:center;height:40px;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}ix-tab-item.circle{height:72px}ix-tab-item.top::after{top:0}ix-tab-item.bottom::after{bottom:0}ix-tab-item::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}ix-tab-item.stretched{flex-basis:100%;max-width:-moz-max-content;max-width:max-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ix-tab-item .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;vertical-align:middle}ix-tab-item .text span,ix-tab-item .text span::before{pointer-events:none}ix-tab-item:hover:not(.circle){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}ix-tab-item:hover:not(.circle)::after{background-color:var(--theme-tab-indicator--background--hover)}ix-tab-item:active:not(.circle){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}ix-tab-item:active:not(.circle)::after{background-color:var(--theme-tab-indicator--background--active)}ix-tab-item:focus-visible{outline:0px solid var(--focus--border-color)}ix-tab-item:focus-visible .circle{outline:1px solid var(--focus--border-color)}ix-tab-item:focus-visible:not(.circle){outline:1px solid var(--focus--border-color)}ix-tab-item.disabled{color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}ix-tab-item.disabled::after{background-color:var(--theme-tab-indicator--background--disabled)}ix-tab-item.selected:not(.disabled){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}ix-tab-item.selected:not(.disabled)::after{background-color:var(--theme-tab-indicator--background--selected)}ix-tab-item.icon{padding:1.5rem 0.5rem}ix-tab-item.small-tab{height:32px;padding:1rem}ix-tab-item.small-tab.icon{padding:1rem 0.25rem}ix-tab-item .circle{display:flex;justify-content:center;align-items:center;height:48px;width:48px;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}ix-tab-item .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}ix-tab-item .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}ix-tab-item .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}ix-tab-item .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}ix-tab-item .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}ix-tab-item .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}ix-tab-item .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:16px;color:var(--theme-pill-outline--color);cursor:pointer}ix-tab-item .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}ix-tab-item .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}ix-tab-item .hidden{display:none}";
+
+const TabItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Set selected tab
+     */
+    this.selected = false;
+    /**
+     * Set disabled tab
+     */
+    this.disabled = false;
+    /**
+     * Set small size tab
+     */
+    this.small = false;
+    /**
+     * Set icon only tab
+     */
+    this.icon = false;
+    /**
+     * Set rounded tab
+     */
+    this.rounded = false;
+    /**
+     * Set layout width style
+     */
+    this.layout = 'auto';
+    /**
+     * Set selected placement
+     */
+    this.placement = 'bottom';
+  }
+  tabItemClasses(props) {
+    return {
+      selected: props.selected,
+      disabled: props.disabled,
+      'small-tab': props.small,
+      icon: props.small,
+      stretched: props.layout === 'stretched',
+      bottom: props.placement === 'bottom',
+      top: props.placement === 'top',
+      circle: props.circle
+    };
+  }
+  render() {
+    return (h(Host, { class: this.tabItemClasses({
+        selected: this.selected,
+        disabled: this.disabled,
+        small: this.small,
+        icon: this.icon,
+        layout: this.layout,
+        placement: this.placement,
+        circle: this.rounded,
+      }), tabIndex: 0 }, h("div", { class: { circle: this.rounded, text: !this.rounded, selected: this.selected, disabled: this.disabled } }, h("slot", null)), h("div", { class: { counter: true, selected: this.selected, hidden: !(this.rounded && this.counter !== undefined), disabled: this.disabled } }, this.counter)));
+  }
+  static get style() { return tabItemCss; }
+}, [4, "ix-tab-item", {
+    "selected": [4],
+    "disabled": [4],
+    "small": [4],
+    "icon": [4],
+    "rounded": [4],
+    "counter": [2],
+    "layout": [1],
+    "placement": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-tab-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-tab-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TabItem);
+      }
+      break;
+  } });
+}
+
+export { TabItem as T, defineCustomElement as d };

package/dist/components/tabs.js

@@ -0,0 +1,207 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tabsCss = "ix-tabs{width:auto;display:flex;align-items:center;position:relative}ix-tabs .tab-items{overflow:hidden;scroll-behavior:smooth}ix-tabs .tab-items .items-content{display:flex;align-items:center}ix-tabs .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}ix-tabs .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}ix-tabs .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}ix-tabs .arrow.right{left:auto;right:0}ix-tabs .overflow-shadow{width:50px;height:40px;position:absolute;left:0;top:0;background:linear-gradient(90deg, var(--theme-color-1) 50%, transparent);z-index:1}ix-tabs .overflow-shadow.right{left:auto;right:0;background:linear-gradient(90deg, transparent, var(--theme-color-1) 50%)}";
+
+let windowStartSize = window.innerWidth;
+const Tabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Set tab items to small size
+     */
+    this.small = false;
+    /**
+     * Set rounded tabs
+     */
+    this.rounded = false;
+    /**
+     * Set default selected tab by index
+     */
+    this.selected = 0;
+    /**
+     * Set layout width style
+     */
+    this.layout = 'auto';
+    /**
+     * Set placement style
+     */
+    this.placement = 'bottom';
+    this.totalItems = 0;
+    this.currentScrollAmount = 0;
+    this.scrollAmount = 100;
+    this.scrollActionAmount = 0;
+    this.clickAction = {
+      timeout: null,
+      isClick: true,
+    };
+  }
+  onWindowResize() {
+    this.totalItems = 0;
+    this.totalItems = this.getTabs().length;
+    if (windowStartSize === 0)
+      return (windowStartSize = window.innerWidth);
+    this.move(windowStartSize - window.innerWidth);
+    windowStartSize = window.innerWidth;
+  }
+  getTabs() {
+    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));
+  }
+  getTab(tabIndex) {
+    return this.getTabs()[tabIndex];
+  }
+  getTabsWrapper() {
+    return this.hostElement.getElementsByClassName('items-content')[0];
+  }
+  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 &&
+        window.innerWidth <= tabWrapper.scrollWidth);
+    }
+    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;
+    this.setSelected(index);
+    this.moveTabToView(index);
+  }
+  dragStart(element, event) {
+    if (!this.showArrows())
+      return;
+    if (event.button > 0)
+      return; // ignore right click
+    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);
+    });
+  }
+  componentDidLoad() {
+    const tabs = this.getTabs();
+    tabs.forEach((element, index) => {
+      const isDisabled = element.getAttribute('disabled') !== null;
+      if (!isDisabled)
+        element.addEventListener('click', () => this.clickTab(index));
+      element.addEventListener('mousedown', (event) => this.dragStart(element, event));
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "overflow-shadow", style: this.getArrowStyle(this.showPreviousArrow()) }), h("div", { class: "arrow", style: this.getArrowStyle(this.showPreviousArrow()), onClick: () => this.move(this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-left-small" })), h("div", { class: "tab-items" }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "overflow-shadow right", style: this.getArrowStyle(this.showNextArrow()) }), h("div", { class: "arrow right", style: this.getArrowStyle(this.showNextArrow()), onClick: () => this.move(-this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-right-small" }))));
+  }
+  get hostElement() { return this; }
+  static get style() { return tabsCss; }
+}, [4, "ix-tabs", {
+    "small": [4],
+    "rounded": [4],
+    "selected": [1026],
+    "layout": [1],
+    "placement": [1],
+    "totalItems": [32],
+    "currentScrollAmount": [32],
+    "scrollAmount": [32],
+    "scrollActionAmount": [32]
+  }, [[9, "resize", "onWindowResize"]]]);
+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 };

package/dist/components/time-picker.js

@@ -0,0 +1,140 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { l as luxon } from './luxon.js';
+import { d as defineCustomElement$4 } from './button.js';
+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 TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.done = createEvent(this, "done", 7);
+    this.timeChange = createEvent(this, "timeChange", 7);
+    /**
+     * Set corners style
+     */
+    this.corners = 'rounded';
+    /**
+     * set styles
+     */
+    this.individual = true;
+    /**
+     * Show Hour Input
+     */
+    this.showHour = false;
+    /**
+     * Show Minutes Input
+     */
+    this.showMinutes = false;
+    /**
+     * Show Seconds Input
+     */
+    this.showSeconds = false;
+    /**
+     * Show Time Reference Input
+     */
+    this.showTimeReference = false;
+    this.time = luxon.DateTime.fromFormat('00:00:00 AM', 'tt');
+  }
+  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();
+    this.time = this.time.set({
+      hour: Number(this.hourInputRef.value),
+      minute: Number(this.minuteInputRef.value),
+      second: Number(this.secondInputRef.value),
+    });
+    this.setHourAccordingToReference();
+    this.timeChange.emit(this.time.toFormat('TT'));
+  }
+  changeReference() {
+    this.referenceInputRef.value =
+      this.referenceInputRef.value === 'PM' ? 'AM' : 'PM';
+    this.setHourAccordingToReference();
+    this.timeChange.emit(this.time.toFormat('TT'));
+  }
+  setHourAccordingToReference() {
+    let hour = Number(this.hourInputRef.value);
+    if (this.referenceInputRef.value === 'PM')
+      hour += 12;
+    this.time = this.time.set({ hour });
+  }
+  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) {
+      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", 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", 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", 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: {
+        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: "AM", 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('TT')) }, "Done")))));
+  }
+  get hostElement() { return this; }
+  static get style() { return timePickerCss; }
+}, [2, "ix-time-picker", {
+    "corners": [1],
+    "individual": [4],
+    "showHour": [4, "show-hour"],
+    "showMinutes": [4, "show-minutes"],
+    "showSeconds": [4, "show-seconds"],
+    "showTimeReference": [4, "show-time-reference"],
+    "hourInputRef": [32],
+    "minuteInputRef": [32],
+    "secondInputRef": [32],
+    "referenceInputRef": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-time-picker", "ix-button", "ix-date-time-card", "ix-icon", "ix-icon-button"];
+  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$4();
+      }
+      break;
+    case "ix-date-time-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { TimePicker as T, defineCustomElement as d };