@siemens/ix 1.0.0-beta.2

package/dist/components/ix-chip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxChip extends Components.IxChip, HTMLElement {}
+export const IxChip: {
+  prototype: IxChip;
+  new (): IxChip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-chip.js

@@ -0,0 +1,74 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const chipCss = ".sc-ix-chip-h{display:inline-flex;position:relative;align-items:center;border-radius:100px;padding:0.5rem 0.75rem;height:2rem;max-height:2rem;cursor:pointer;margin-left:0.25rem}.sc-ix-chip-h .with-icon.sc-ix-chip{margin-right:0.25rem}.sc-ix-chip-h .close-button-container.sc-ix-chip{display:inline-flex;flex-grow:1;margin-left:0.75rem}.sc-ix-chip-h .close-button.sc-ix-chip{position:relative;width:1rem;height:1rem;min-width:unset;min-height:unset;margin-left:auto;margin-right:0}[variant=primary].sc-ix-chip-h{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}[variant=primary].sc-ix-chip-h .close-button.sc-ix-chip{color:var(--theme-chip-primary--color);pointer-events:auto}[variant=primary].sc-ix-chip-h:hover{background-color:var(--theme-chip-primary--background--hover)}[variant=primary].sc-ix-chip-h:active{background-color:var(--theme-chip-primary--background--active)}[variant=primary].sc-ix-chip-h:focus,[variant=primary].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}[variant=primary].outline.sc-ix-chip-h{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}[variant=primary].outline.sc-ix-chip-h .close-button.sc-ix-chip{color:var(--theme-chip-primary-outline--color)}[variant=primary].outline.sc-ix-chip-h:hover{background-color:var(--theme-chip-primary-outline--background--hover)}[variant=primary].outline.sc-ix-chip-h:active{background-color:var(--theme-chip-primary-outline--background--active)}[variant=alarm].sc-ix-chip-h{color:var(--theme-color-alarm--contrast)}[variant=alarm].sc-ix-chip-h:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}[variant=alarm].active.sc-ix-chip-h::after,[variant=alarm].sc-ix-chip-h:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}[variant=alarm].sc-ix-chip-h:not(.outline){background-color:var(--theme-color-alarm)}[variant=alarm].sc-ix-chip-h:not(.outline) .close-button.sc-ix-chip{color:var(--theme-color-alarm--contrast)}[variant=alarm].sc-ix-chip-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=alarm].sc-ix-chip-h:not(.outline).active::after,[variant=alarm].sc-ix-chip-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=alarm].outline.sc-ix-chip-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-alarm)}[variant=alarm].outline.sc-ix-chip-h:hover::after{display:none}[variant=alarm].outline.sc-ix-chip-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=alarm].outline.active.sc-ix-chip-h::after,[variant=alarm].outline.sc-ix-chip-h:active::after{display:none}[variant=alarm].outline.active.sc-ix-chip-h,[variant=alarm].outline.sc-ix-chip-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=alarm].sc-ix-chip-h:focus,[variant=alarm].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}[variant=critical].sc-ix-chip-h{color:var(--theme-color-critical--contrast)}[variant=critical].sc-ix-chip-h:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}[variant=critical].active.sc-ix-chip-h::after,[variant=critical].sc-ix-chip-h:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}[variant=critical].sc-ix-chip-h:not(.outline){background-color:var(--theme-color-critical)}[variant=critical].sc-ix-chip-h:not(.outline) .close-button.sc-ix-chip{color:var(--theme-color-critical--contrast)}[variant=critical].sc-ix-chip-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=critical].sc-ix-chip-h:not(.outline).active::after,[variant=critical].sc-ix-chip-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=critical].outline.sc-ix-chip-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-critical)}[variant=critical].outline.sc-ix-chip-h:hover::after{display:none}[variant=critical].outline.sc-ix-chip-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=critical].outline.active.sc-ix-chip-h::after,[variant=critical].outline.sc-ix-chip-h:active::after{display:none}[variant=critical].outline.active.sc-ix-chip-h,[variant=critical].outline.sc-ix-chip-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=critical].sc-ix-chip-h:focus,[variant=critical].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}[variant=warning].sc-ix-chip-h{color:var(--theme-color-warning--contrast)}[variant=warning].sc-ix-chip-h:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}[variant=warning].active.sc-ix-chip-h::after,[variant=warning].sc-ix-chip-h:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}[variant=warning].sc-ix-chip-h:not(.outline){background-color:var(--theme-color-warning)}[variant=warning].sc-ix-chip-h:not(.outline) .close-button.sc-ix-chip{color:var(--theme-color-warning--contrast)}[variant=warning].sc-ix-chip-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=warning].sc-ix-chip-h:not(.outline).active::after,[variant=warning].sc-ix-chip-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=warning].outline.sc-ix-chip-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-warning)}[variant=warning].outline.sc-ix-chip-h:hover::after{display:none}[variant=warning].outline.sc-ix-chip-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=warning].outline.active.sc-ix-chip-h::after,[variant=warning].outline.sc-ix-chip-h:active::after{display:none}[variant=warning].outline.active.sc-ix-chip-h,[variant=warning].outline.sc-ix-chip-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=warning].sc-ix-chip-h:focus,[variant=warning].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}[variant=info].sc-ix-chip-h{color:var(--theme-color-info--contrast)}[variant=info].sc-ix-chip-h:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}[variant=info].active.sc-ix-chip-h::after,[variant=info].sc-ix-chip-h:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}[variant=info].sc-ix-chip-h:not(.outline){background-color:var(--theme-color-info)}[variant=info].sc-ix-chip-h:not(.outline) .close-button.sc-ix-chip{color:var(--theme-color-info--contrast)}[variant=info].sc-ix-chip-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=info].sc-ix-chip-h:not(.outline).active::after,[variant=info].sc-ix-chip-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=info].outline.sc-ix-chip-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-info)}[variant=info].outline.sc-ix-chip-h:hover::after{display:none}[variant=info].outline.sc-ix-chip-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=info].outline.active.sc-ix-chip-h::after,[variant=info].outline.sc-ix-chip-h:active::after{display:none}[variant=info].outline.active.sc-ix-chip-h,[variant=info].outline.sc-ix-chip-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=info].sc-ix-chip-h:focus,[variant=info].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}[variant=neutral].sc-ix-chip-h{color:var(--theme-color-neutral--contrast)}[variant=neutral].sc-ix-chip-h:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}[variant=neutral].active.sc-ix-chip-h::after,[variant=neutral].sc-ix-chip-h:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}[variant=neutral].sc-ix-chip-h:not(.outline){background-color:var(--theme-color-neutral)}[variant=neutral].sc-ix-chip-h:not(.outline) .close-button.sc-ix-chip{color:var(--theme-color-neutral--contrast)}[variant=neutral].sc-ix-chip-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=neutral].sc-ix-chip-h:not(.outline).active::after,[variant=neutral].sc-ix-chip-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=neutral].outline.sc-ix-chip-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-neutral)}[variant=neutral].outline.sc-ix-chip-h:hover::after{display:none}[variant=neutral].outline.sc-ix-chip-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=neutral].outline.active.sc-ix-chip-h::after,[variant=neutral].outline.sc-ix-chip-h:active::after{display:none}[variant=neutral].outline.active.sc-ix-chip-h,[variant=neutral].outline.sc-ix-chip-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=neutral].sc-ix-chip-h:focus,[variant=neutral].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}[variant=success].sc-ix-chip-h{color:var(--theme-color-success--contrast)}[variant=success].sc-ix-chip-h:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}[variant=success].active.sc-ix-chip-h::after,[variant=success].sc-ix-chip-h:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}[variant=success].sc-ix-chip-h:not(.outline){background-color:var(--theme-color-success)}[variant=success].sc-ix-chip-h:not(.outline) .close-button.sc-ix-chip{color:var(--theme-color-success--contrast)}[variant=success].sc-ix-chip-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=success].sc-ix-chip-h:not(.outline).active::after,[variant=success].sc-ix-chip-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=success].outline.sc-ix-chip-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-success)}[variant=success].outline.sc-ix-chip-h:hover::after{display:none}[variant=success].outline.sc-ix-chip-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=success].outline.active.sc-ix-chip-h::after,[variant=success].outline.sc-ix-chip-h:active::after{display:none}[variant=success].outline.active.sc-ix-chip-h,[variant=success].outline.sc-ix-chip-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=success].sc-ix-chip-h:focus,[variant=success].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}[variant=custom].sc-ix-chip-h:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, var(--theme-l-hover));left:0;border-radius:100px;pointer-events:none}[variant=custom].active.sc-ix-chip-h::after,[variant=custom].sc-ix-chip-h:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, var(--theme-l-active));left:0;border-radius:100px;pointer-events:none}[variant=custom].sc-ix-chip-h:focus,[variant=custom].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.sc-ix-chip-h .slot-container.sc-ix-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
+
+const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.close = createEvent(this, "close", 7);
+    /**
+     * Chip variant
+     */
+    this.variant = 'primary';
+    /**
+     * Display chip in active state. Only working witht `variant="primary"`
+     */
+    this.active = false;
+    /**
+     * Show close icon
+     */
+    this.closable = false;
+    /**
+     * Show chip with outline style
+     */
+    this.outline = false;
+  }
+  getCloseButton() {
+    return (h("div", { class: "close-button-container" }, h("button", { type: "button", class: "btn btn-invisible-secondary btn-icon btn-oval close-button", onClick: (event) => this.close.emit(event) }, this.variant === 'custom' ? (h("i", { class: "glyph glyph-16 glyph-close-small", style: { color: this.color } })) : (h("ix-icon", { name: 'close-small', size: '16' })))));
+  }
+  render() {
+    return (h(Host, { class: {
+        outline: this.outline,
+      }, tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
+        ? {
+          color: this.color,
+          backgroundColor: this.background,
+        }
+        : {} }, this.icon ? (h("ix-icon", { class: 'with-icon', name: this.icon, size: '24' })) : null, h("span", { class: "slot-container" }, h("slot", null)), this.closable ? this.getCloseButton() : null));
+  }
+  get el() { return this; }
+  static get style() { return chipCss; }
+}, [6, "ix-chip", {
+    "variant": [513],
+    "active": [4],
+    "closable": [4],
+    "icon": [1],
+    "background": [1],
+    "color": [1],
+    "outline": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-chip", "ix-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-chip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Chip);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxChip = Chip;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxChip, defineCustomElement };

package/dist/components/ix-counter-pill.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxCounterPill extends Components.IxCounterPill, HTMLElement {}
+export const IxCounterPill: {
+  prototype: IxCounterPill;
+  new (): IxCounterPill;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-counter-pill.js

@@ -0,0 +1,59 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const counterPillCss = ".sc-ix-counter-pill-h{display:inline-flex;position:relative;align-items:center;justify-content:center;border-radius:100px;padding:0px 6px;margin-left:0.25rem;min-width:1.5rem;height:1.25rem;min-height:1.25rem;max-height:1.25rem;cursor:auto}.sc-ix-counter-pill-h .with-icon.sc-ix-counter-pill{margin-right:0.25rem}.align-left.sc-ix-counter-pill-h{justify-content:flex-start}[variant=primary].sc-ix-counter-pill-h{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}[variant=primary].sc-ix-counter-pill-h .close-button.sc-ix-counter-pill{color:var(--theme-chip-primary--color);pointer-events:auto}[variant=primary].outline.sc-ix-counter-pill-h{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}[variant=primary].outline.sc-ix-counter-pill-h .close-button.sc-ix-counter-pill{color:var(--theme-chip-primary-outline--color)}[variant=alarm].sc-ix-counter-pill-h{color:var(--theme-color-alarm--contrast)}[variant=alarm].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-alarm)}[variant=alarm].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-alarm--contrast)}[variant=alarm].sc-ix-counter-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=alarm].sc-ix-counter-pill-h:not(.outline).active::after,[variant=alarm].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=alarm].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-alarm)}[variant=alarm].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=alarm].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=alarm].outline.active.sc-ix-counter-pill-h::after,[variant=alarm].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=alarm].outline.active.sc-ix-counter-pill-h,[variant=alarm].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=critical].sc-ix-counter-pill-h{color:var(--theme-color-critical--contrast)}[variant=critical].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-critical)}[variant=critical].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-critical--contrast)}[variant=critical].sc-ix-counter-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=critical].sc-ix-counter-pill-h:not(.outline).active::after,[variant=critical].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=critical].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-critical)}[variant=critical].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=critical].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=critical].outline.active.sc-ix-counter-pill-h::after,[variant=critical].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=critical].outline.active.sc-ix-counter-pill-h,[variant=critical].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=warning].sc-ix-counter-pill-h{color:var(--theme-color-warning--contrast)}[variant=warning].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-warning)}[variant=warning].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-warning--contrast)}[variant=warning].sc-ix-counter-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=warning].sc-ix-counter-pill-h:not(.outline).active::after,[variant=warning].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=warning].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-warning)}[variant=warning].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=warning].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=warning].outline.active.sc-ix-counter-pill-h::after,[variant=warning].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=warning].outline.active.sc-ix-counter-pill-h,[variant=warning].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=info].sc-ix-counter-pill-h{color:var(--theme-color-info--contrast)}[variant=info].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-info)}[variant=info].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-info--contrast)}[variant=info].sc-ix-counter-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=info].sc-ix-counter-pill-h:not(.outline).active::after,[variant=info].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=info].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-info)}[variant=info].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=info].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=info].outline.active.sc-ix-counter-pill-h::after,[variant=info].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=info].outline.active.sc-ix-counter-pill-h,[variant=info].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=neutral].sc-ix-counter-pill-h{color:var(--theme-color-neutral--contrast)}[variant=neutral].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-neutral)}[variant=neutral].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-neutral--contrast)}[variant=neutral].sc-ix-counter-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=neutral].sc-ix-counter-pill-h:not(.outline).active::after,[variant=neutral].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=neutral].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-neutral)}[variant=neutral].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=neutral].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=neutral].outline.active.sc-ix-counter-pill-h::after,[variant=neutral].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=neutral].outline.active.sc-ix-counter-pill-h,[variant=neutral].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=success].sc-ix-counter-pill-h{color:var(--theme-color-success--contrast)}[variant=success].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-success)}[variant=success].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-success--contrast)}[variant=success].sc-ix-counter-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=success].sc-ix-counter-pill-h:not(.outline).active::after,[variant=success].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=success].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-success)}[variant=success].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=success].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=success].outline.active.sc-ix-counter-pill-h::after,[variant=success].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=success].outline.active.sc-ix-counter-pill-h,[variant=success].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}.sc-ix-counter-pill-h .slot.sc-ix-counter-pill{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-counter-pill-h{min-height:1rem;max-height:1rem;height:1rem;font-size:0.75rem;padding:0 0.25rem;min-width:1rem;width:auto;padding:0 4px}.sc-ix-counter-pill-h .slot-container.sc-ix-counter-pill{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
+
+const CounterPill = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Pill variant
+     */
+    this.variant = 'primary';
+    /**
+     * Show pill as outline
+     */
+    this.outline = false;
+    /**
+     * Align pill content left
+     */
+    this.alignLeft = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        outline: this.outline,
+        'align-left': this.alignLeft,
+      }, style: this.variant === 'custom'
+        ? {
+          color: this.color,
+          backgroundColor: this.background,
+        }
+        : {}, title: this.el.textContent }, h("span", { class: "slot-container" }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return counterPillCss; }
+}, [6, "ix-counter-pill", {
+    "variant": [513],
+    "outline": [4],
+    "background": [1],
+    "color": [1],
+    "alignLeft": [4, "align-left"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-counter-pill"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-counter-pill":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CounterPill);
+      }
+      break;
+  } });
+}
+
+const IxCounterPill = CounterPill;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxCounterPill, defineCustomElement };

package/dist/components/ix-date-picker.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxDatePicker extends Components.IxDatePicker, HTMLElement {}
+export const IxDatePicker: {
+  prototype: IxDatePicker;
+  new (): IxDatePicker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-date-picker.js

@@ -0,0 +1,6 @@
+import { D as DatePicker, d as defineCustomElement$1 } from './date-picker.js';
+
+const IxDatePicker = DatePicker;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDatePicker, defineCustomElement };

package/dist/components/ix-date-time-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxDateTimeCard extends Components.IxDateTimeCard, HTMLElement {}
+export const IxDateTimeCard: {
+  prototype: IxDateTimeCard;
+  new (): IxDateTimeCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-date-time-card.js

@@ -0,0 +1,6 @@
+import { D as DateTimeCard, d as defineCustomElement$1 } from './date-time-card.js';
+
+const IxDateTimeCard = DateTimeCard;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDateTimeCard, defineCustomElement };

package/dist/components/ix-datetime-picker.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxDatetimePicker extends Components.IxDatetimePicker, HTMLElement {}
+export const IxDatetimePicker: {
+  prototype: IxDatetimePicker;
+  new (): IxDatetimePicker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-datetime-picker.js

@@ -0,0 +1,105 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$8 } from './button.js';
+import { d as defineCustomElement$7 } from './date-picker.js';
+import { d as defineCustomElement$6 } from './date-time-card.js';
+import { d as defineCustomElement$5 } from './dropdown.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './time-picker.js';
+
+const datetimePickerCss = ".sc-ix-datetime-picker-h{background-color:var(--theme-menu--background);box-shadow:0 0 2px 0 var(--theme-input--border-color-bottom--disabled), 0 4px 8px 0 var(--theme-input--border-color-bottom--disabled), 0 12px 18px 0px var(--theme-input--border-color-bottom--disabled);border-radius:4px}.flex.sc-ix-datetime-picker{display:flex}.done.sc-ix-datetime-picker{display:flex;justify-content:flex-end;margin:0 1rem 1rem 0}";
+
+const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.done = createEvent(this, "done", 7);
+    /**
+     * Set range size
+     */
+    this.range = 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;
+  }
+  doneEvent() {
+    console.log(this.date + ' ' + this.time);
+    this.done.emit(this.date + ' ' + this.time);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "flex" }, h("ix-date-picker", { corners: "left", individual: false, range: this.range, onDateChange: (date) => (this.date = date.detail) }), h("ix-time-picker", { corners: "right", individual: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, showTimeReference: this.showTimeReference, onTimeChange: (time) => (this.time = time.detail) })), h("div", { class: "done" }, h("ix-button", { onClick: () => this.doneEvent() }, "Done"))));
+  }
+  static get style() { return datetimePickerCss; }
+}, [2, "ix-datetime-picker", {
+    "range": [4],
+    "showHour": [4, "show-hour"],
+    "showMinutes": [4, "show-minutes"],
+    "showSeconds": [4, "show-seconds"],
+    "showTimeReference": [4, "show-time-reference"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-datetime-picker", "ix-button", "ix-date-picker", "ix-date-time-card", "ix-dropdown", "ix-icon", "ix-icon-button", "ix-time-picker"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-datetime-picker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DatePicker);
+      }
+      break;
+    case "ix-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "ix-date-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "ix-date-time-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ix-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-time-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxDatetimePicker = DatePicker;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDatetimePicker, defineCustomElement };

package/dist/components/ix-drawer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxDrawer extends Components.IxDrawer, HTMLElement {}
+export const IxDrawer: {
+  prototype: IxDrawer;
+  new (): IxDrawer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-drawer.js

@@ -0,0 +1,155 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './icon-button.js';
+
+const drawerCss = ".drawer-container.sc-ix-drawer{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);visibility:hidden;display:flex;position:absolute;flex-flow:column nowrap;justify-content:flex-start;align-items:center;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;transition:all 300ms ease-out}.toggle.sc-ix-drawer{z-index:100;visibility:visible}.drawer-container.full-height.sc-ix-drawer{min-height:100%}.header.sc-ix-drawer{display:flex;position:relative;align-items:center;justify-content:flex-end;height:3.5rem;padding:0.5rem 1rem;width:100%;order:1}.header.sc-ix-drawer .header-content.sc-ix-drawer{flex-grow:1;margin-right:1rem}.content.sc-ix-drawer{position:relative;flex:1;flex-grow:1;order:2;height:100%;width:100%;overflow-y:auto}";
+
+const Drawer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.open = createEvent(this, "open", 7);
+    this.drawerClose = createEvent(this, "drawerClose", 7);
+    /**
+     * Show or hide the drawer
+     */
+    this.show = false;
+    /**
+     * Fired in case of an outside click during drawer showed state
+     */
+    this.closeOnClickOutside = true;
+    /**
+     * Render the drawer with maximum height
+     */
+    this.fullHeight = false;
+    /**
+     * Min width interpreted as REM
+     */
+    this.minWidth = 16;
+    /**
+     * Max width interpreted as REM
+     */
+    this.maxWidth = 28;
+    /**
+     * Width interpreted as REM if not set to 'auto'
+     */
+    this.width = this.minWidth;
+    this.callback = this.clickedOutside.bind(this);
+  }
+  onShowChanged(newValue) {
+    this.show = newValue !== undefined ? newValue : !this.show;
+    this.toggleDrawer(this.show);
+  }
+  /**
+   * Toggle or define show state of drawer
+   * @param show Overwrite toggle state with boolean
+   */
+  async toggleDrawer(show) {
+    this.show = show !== undefined ? show : !this.show;
+    if (show) {
+      this.open.emit();
+      this.slideInRight(this.divElement);
+      setTimeout(() => {
+        window.addEventListener('mousedown', this.callback);
+      }, 300);
+    }
+    else {
+      this.drawerClose.emit();
+      this.slideOutRight(this.divElement);
+      window.removeEventListener('mousedown', this.callback);
+    }
+    return Promise.resolve();
+  }
+  onCloseClicked() {
+    this.show = false;
+  }
+  clickedOutside(evt) {
+    if (!this.closeOnClickOutside) {
+      return;
+    }
+    const target = evt.target;
+    const closestElement = target.closest('#div-container');
+    const btn = target.closest('#drawer-btn');
+    if (closestElement !== this.divElement && target !== btn) {
+      this.show = false;
+    }
+  }
+  slideOutRight(el) {
+    anime({
+      targets: el,
+      duration: Drawer.duration,
+      translateX: [0, '16rem'],
+      opacity: [1, 0],
+      easing: 'easeInSine',
+      complete: () => {
+        el.classList.add('d-none');
+      },
+    });
+  }
+  slideInRight(el) {
+    anime({
+      targets: el,
+      duration: Drawer.duration,
+      translateX: ['16rem', 0],
+      opacity: [0, 1],
+      easing: 'easeOutSine',
+      begin: () => {
+        el.classList.remove('d-none');
+      },
+    });
+  }
+  render() {
+    return (h("div", { class: {
+        'drawer-container': true,
+        toggle: this.show,
+        'full-height': this.fullHeight,
+        'd-none': true,
+      }, style: {
+        width: this.width === 'auto' ? this.width : `${this.width}rem`,
+        'min-width': `${this.minWidth}rem`,
+        'max-width': `${this.maxWidth}rem`,
+      }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { class: "header" }, h("div", { class: "header-content" }, h("slot", { name: "header" })), h("ix-icon-button", { icon: "close", size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), h("div", { class: "content" }, h("slot", null))));
+  }
+  static get watchers() { return {
+    "show": ["onShowChanged"]
+  }; }
+  static get style() { return drawerCss; }
+}, [6, "ix-drawer", {
+    "show": [1028],
+    "closeOnClickOutside": [4, "close-on-click-outside"],
+    "fullHeight": [4, "full-height"],
+    "minWidth": [2, "min-width"],
+    "maxWidth": [2, "max-width"],
+    "width": [8],
+    "toggleDrawer": [64]
+  }]);
+Drawer.duration = 300;
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-drawer", "ix-icon", "ix-icon-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-drawer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Drawer);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxDrawer = Drawer;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDrawer, defineCustomElement };

package/dist/components/ix-dropdown-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxDropdownItem extends Components.IxDropdownItem, HTMLElement {}
+export const IxDropdownItem: {
+  prototype: IxDropdownItem;
+  new (): IxDropdownItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-dropdown-item.js

@@ -0,0 +1,6 @@
+import { D as DropdownItem, d as defineCustomElement$1 } from './dropdown-item.js';
+
+const IxDropdownItem = DropdownItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDropdownItem, defineCustomElement };

package/dist/components/ix-dropdown.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxDropdown extends Components.IxDropdown, HTMLElement {}
+export const IxDropdown: {
+  prototype: IxDropdown;
+  new (): IxDropdown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-dropdown.js

@@ -0,0 +1,6 @@
+import { D as Dropdown, d as defineCustomElement$1 } from './dropdown.js';
+
+const IxDropdown = Dropdown;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDropdown, defineCustomElement };

package/dist/components/ix-event-list-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxEventListItem extends Components.IxEventListItem, HTMLElement {}
+export const IxEventListItem: {
+  prototype: IxEventListItem;
+  new (): IxEventListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ix-event-list-item.js

@@ -0,0 +1,59 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const eventListItemCss = ".ix-event-list-item{display:flex;align-items:center;position:relative;height:2.5rem;max-height:2.5rem;border-radius:0.25rem;background-color:var(--theme-event-list-item-bg);overflow:hidden;cursor:pointer;margin-bottom:0.5rem}.ix-event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.ix-event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}.ix-event-list-item .cui-event-list-item-content-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-list-item-border);border-top-left-radius:0;border-top-right-radius:0.25rem;border-bottom-left-radius:0;border-bottom-right-radius:0.25rem;border-left:none;padding-left:1rem}.ix-event-list-item .chevron-icon{display:none;margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}.ix-event-list-item .event-content{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}.ix-event-list-item:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.disabled):not(:disabled):hover{background-color:var(--theme-event-list-item-hover)}.ix-event-list-item:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.disabled):not(:disabled):active{background-color:var(--theme-event-list-item-pressed)}.ix-event-list-item.selected{background-color:var(--theme-event-item--background--selected)}.ix-event-list-item[disabled],.ix-event-list-item.disabled{pointer-events:none}";
+
+const EventListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.itemClick = createEvent(this, "itemClick", 7);
+    /**
+     * Opacity of the status indicator.
+     * Defaults to 1.0
+     *
+     * @deprecated Will be removed in 7.0.0. Use color with alpha value.
+     */
+    this.opacity = 1;
+  }
+  handleItemClick() {
+    this.itemClick.emit();
+  }
+  render() {
+    return (h("div", { class: {
+        'ix-event-list-item': true,
+        selected: this.selected,
+        disabled: this.disabled,
+      } }, h("div", { class: `indicator ${!this.color ? 'indicator-empty' : ''}`, style: {
+        'background-color': this.color
+          ? `var(--theme-${this.color})`
+          : 'inherit',
+        opacity: `${this.disabled ? 0.4 : this.opacity}`,
+      } }), h("div", { class: "cui-event-list-item-content-container" }, h("div", { class: "event-content" }, h("slot", null)), h("i", { class: "glyph glyph-16 glyph-chevron-right chevron-icon" }))));
+  }
+  get el() { return this; }
+  static get style() { return eventListItemCss; }
+}, [4, "ix-event-list-item", {
+    "color": [1],
+    "selected": [4],
+    "disabled": [4],
+    "chevron": [4],
+    "opacity": [2]
+  }, [[1, "click", "handleItemClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-event-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-event-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, EventListItem);
+      }
+      break;
+  } });
+}
+
+const IxEventListItem = EventListItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxEventListItem, defineCustomElement };

package/dist/components/ix-event-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxEventList extends Components.IxEventList, HTMLElement {}
+export const IxEventList: {
+  prototype: IxEventList;
+  new (): IxEventList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;