@siemens/ix 1.1.0-beta.1 → 1.1.0-beta.2

package/dist/components/rwd.util.js

@@ -1,39 +0,0 @@
-/*
- * 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

@@ -1,71 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,207 +0,0 @@
-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

@@ -1,193 +0,0 @@
-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);
-    /**
-     * Format of time string
-     *
-     * @since 1.1.0
-     */
-    this.format = 'TT';
-    /**
-     * Corner style
-     */
-    this.corners = 'rounded';
-    /**
-     * @deprecated - will get removed with next major release
-     */
-    this.individual = true;
-    /**
-     * Show hour input
-     */
-    this.showHour = false;
-    /**
-     * Show minutes input
-     */
-    this.showMinutes = false;
-    /**
-     * Show seconds input
-     */
-    this.showSeconds = false;
-    /**
-     * Select time with format string
-     *
-     * @since 1.1.0
-     */
-    this.time = luxon.DateTime.now().toFormat(this.format);
-    /**
-     * Show time reference input
-     *
-     * @since 1.1.0 time reference is default aligned with formt tt
-     */
-    this.showTimeReference = undefined;
-    /**
-     * Set time reference
-     */
-    this.timeReference = luxon.DateTime.fromFormat(this.time, this.format).toFormat('a');
-    /**
-     * Text of date select button
-     *
-     * @since 1.1.0
-     */
-    this.textSelectTime = 'Done';
-    this._time = luxon.DateTime.fromFormat(this.time, this.format);
-  }
-  get hour() {
-    return this._time.hour;
-  }
-  get minutes() {
-    return this._time.minute;
-  }
-  get seconds() {
-    return this._time.second;
-  }
-  updateInput(step, { hours = undefined, minutes = undefined, seconds = undefined }) {
-    if (hours)
-      step === 'up' ? this.hourInputRef.stepUp() : this.hourInputRef.stepDown();
-    if (minutes)
-      step === 'up'
-        ? this.minuteInputRef.stepUp()
-        : this.minuteInputRef.stepDown();
-    if (seconds)
-      step === 'up'
-        ? this.secondInputRef.stepUp()
-        : this.secondInputRef.stepDown();
-    this._time = this._time.set({
-      hour: Number(this.hourInputRef.value),
-      minute: Number(this.minuteInputRef.value),
-      second: Number(this.secondInputRef.value),
-    });
-    this.emitTimeChange();
-  }
-  changeReference() {
-    this.referenceInputRef.value =
-      this.referenceInputRef.value === 'PM' ? 'AM' : 'PM';
-    this.setHourAccordingToReference();
-    this.emitTimeChange();
-  }
-  setHourAccordingToReference() {
-    let hour = Number(this.hourInputRef.value);
-    if (this.referenceInputRef.value === 'PM')
-      hour += 12;
-    this._time = this._time.set({ hour });
-  }
-  emitTimeChange() {
-    const time = this._time.toFormat(this.format);
-    this.timeChange.emit(time);
-  }
-  componentWillLoad() {
-    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;
-  }
-  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", value: this.hour, min: "0", disabled: true, max: this.showTimeReference === true ? 11 : 23, ref: (ref) => (this.hourInputRef = ref) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { hours: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideHourSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideMinutes } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { minutes: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { name: "minutes", type: "number", placeholder: "00", value: this.minutes, min: "0", max: "59", disabled: true, ref: (ref) => (this.minuteInputRef = ref) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { minutes: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideMinutesSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideSeconds } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { seconds: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { name: "seconds", type: "number", placeholder: "00", value: this.seconds, disabled: true, min: "0", max: "59", ref: (ref) => (this.secondInputRef = ref) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { seconds: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })), h("div", { class: {
-        columns: true,
-        'default-space': true,
-        hidden: hideTimeReference,
-      } }, h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { name: "reference", type: "text", ref: (ref) => (this.referenceInputRef = ref), value: this.timeReference, disabled: true, class: "text-align" }), h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" }))), h("div", { class: { button: true, hidden: hideIndividual } }, h("ix-button", { onClick: () => this.done.emit(this._time.toFormat(this.format)) }, this.textSelectTime)))));
-  }
-  get hostElement() { return this; }
-  static get style() { return timePickerCss; }
-}, [2, "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": [1, "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", "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 };