@siemens/ix 1.0.0-beta.2

package/dist/components/ix-breadcrumb.js

@@ -0,0 +1,180 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { c as createMutationObserver } from './mutation-observer.js';
+import { d as defineCustomElement$4 } from './dropdown.js';
+import { d as defineCustomElement$3 } from './dropdown-item.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const breadcrumbCss = ".sc-ix-breadcrumb-h{display:flex;height:2.5rem;justify-content:flex-start;align-items:center;background-color:transparent;overflow:hidden}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb{position:relative;display:flex;justify-content:flex-start;align-items:center;white-space:nowrap;border-radius:var(--theme-breadcrumb--border-radius);height:2rem;max-height:2rem;min-width:0;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem;padding:0.5rem 0 0.5rem 0.25rem;outline:none;cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-width:0;font-weight:700}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb ix-icon.sc-ix-breadcrumb{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;-webkit-margin-end:0;margin-inline-end:0}.sc-ix-breadcrumb-h .crumb.last.sc-ix-breadcrumb{background-color:transparent !important;cursor:default;-webkit-padding-end:0.25rem;padding-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):focus,.sc-ix-breadcrumb-h .crumb.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(:last-of-type){flex-shrink:0;max-width:14rem}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb{overflow:visible}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .remove-anchor.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb{display:flex}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .more-text-ellipsis.sc-ix-breadcrumb{width:1rem;display:inline-block;font-weight:700}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{line-height:unset}.sc-ix-breadcrumb-h .crumb-items.sc-ix-breadcrumb{display:contents}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-btn--background);border:var(--theme-btn--btn-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color)}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color)}.sc-ix-breadcrumb-h .crumb.btn.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-last--color)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-ghost--background);border:var(--theme-btn--ghost-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color)}.sc-ix-breadcrumb-h .crumb.ghost.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-last--color)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-ghost--background--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-ghost--background--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--active)}.dropdown-overflow.sc-ix-breadcrumb .dropdown-menu.sc-ix-breadcrumb{max-height:25rem;overflow-y:auto}";
+
+const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.itemClick = createEvent(this, "itemClick", 7);
+    this.nextClick = createEvent(this, "nextClick", 7);
+    /**
+     * Excess items will get hidden inside of dropdown
+     */
+    this.visibleItemCount = 9;
+    /**
+     * Items will be accessible through a dropdown
+     */
+    this.nextItems = [];
+    /**
+     * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
+     */
+    this.ghost = false;
+    this.items = [];
+  }
+  get breadcrumbItems() {
+    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));
+  }
+  get crumbItems() {
+    return Array.from(this.hostElement.querySelectorAll('.crumb-items .crumb'));
+  }
+  onItemClick(item) {
+    this.itemClick.emit(item);
+  }
+  componentDidLoad() {
+    this.mutationObserver = createMutationObserver(() => {
+      const updatedItems = this.getItems();
+      const update = () => {
+        this.items = updatedItems;
+      };
+      if (updatedItems.length >= this.items.length) {
+        update();
+      }
+      else if (updatedItems.length < this.items.length) {
+        const last = this.crumbItems[this.crumbItems.length - 1];
+        this.animationFadeOut(last, () => update());
+      }
+    });
+    this.mutationObserver.observe(this.hostElement.querySelector('.crumb-items'), {
+      subtree: true,
+      childList: true,
+    });
+  }
+  componentWillLoad() {
+    this.items = this.getItems();
+  }
+  getItems() {
+    return this.breadcrumbItems.map((item) => {
+      return { label: item.label, icon: item.icon };
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  animationFadeOut(ref, complete) {
+    anime({
+      targets: ref,
+      translateX: '-100%',
+      duration: 150,
+      opacity: [1, 0],
+      easing: 'linear',
+      complete: () => complete(),
+    });
+  }
+  animationFadeIn(ref) {
+    anime({
+      targets: ref,
+      duration: 150,
+      opacity: [0, 1],
+      translateX: ['-100%', '0%'],
+      easing: 'linear',
+    });
+  }
+  handleLastButtonRef(ref, last) {
+    var _a;
+    if (last) {
+      this.animationFadeIn(ref);
+    }
+    if (last && ((_a = this.nextItems) === null || _a === void 0 ? void 0 : _a.length)) {
+      this.nextButtonRef = ref;
+    }
+  }
+  sliceHiddenItems() {
+    let sliceIndex = 0;
+    if (this.items.length > this.visibleItemCount) {
+      sliceIndex = this.items.length - this.visibleItemCount;
+    }
+    return this.items.slice(sliceIndex);
+  }
+  clickItem(item, last) {
+    if (!last) {
+      this.onItemClick(item);
+    }
+  }
+  renderBreadcrumbItems() {
+    return this.sliceHiddenItems().map((item, index, array) => {
+      var _a;
+      const last = index === array.length - 1;
+      const isLastItem = last && !((_a = this.nextItems) === null || _a === void 0 ? void 0 : _a.length);
+      return (h("div", { ref: (ref) => this.handleLastButtonRef(ref, last), "data-breadcrumb": index, class: {
+          crumb: true,
+          clickable: true,
+          ghost: this.ghost,
+          btn: !this.ghost,
+          last: isLastItem,
+          'remove-hover': isLastItem,
+        }, onClick: () => this.clickItem(item.label, last), "data-testid": "item" }, h("span", { class: "crumb-text remove-anchor" }, item.icon ? h("ix-icon", { name: item.icon, size: "16" }) : '', item.label), !isLastItem ? (h("span", { class: "glyph glyph-18 glyph-chevron-right-small text-default-text" })) : null));
+    });
+  }
+  render() {
+    var _a, _b, _c;
+    return (h(Host, null, h("ix-dropdown", { trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
+        ? this.previousButtonRef
+        : null }, this.items
+      .slice(0, this.items.length - this.visibleItemCount)
+      .map((item) => (h("ix-dropdown-item", { label: item.label, onClick: () => this.onItemClick(item.label) })))), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("div", { class: "crumb crumb-dropdown", ref: (ref) => (this.previousButtonRef = ref) }, h("span", { class: "remove-anchor more-text" }, h("span", { class: "more-text-ellipsis" }, "..."), h("span", { class: "glyph glyph-16 glyph-chevron-right" })))) : null, h("div", { class: "crumb-items" }, this.renderBreadcrumbItems(), h("slot", null)), h("ix-dropdown", { trigger: this.nextButtonRef }, (_c = this.nextItems) === null || _c === void 0 ? void 0 : _c.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
+        this.nextClick.emit({
+          event: e,
+          item,
+        });
+      } }))))));
+  }
+  get hostElement() { return this; }
+  static get style() { return breadcrumbCss; }
+}, [6, "ix-breadcrumb", {
+    "visibleItemCount": [2, "visible-item-count"],
+    "nextItems": [16],
+    "ghost": [4],
+    "previousButtonRef": [32],
+    "nextButtonRef": [32],
+    "items": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-breadcrumb", "ix-dropdown", "ix-dropdown-item", "ix-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-breadcrumb":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Breadcrumb);
+      }
+      break;
+    case "ix-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxBreadcrumb = Breadcrumb;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxBreadcrumb, defineCustomElement };

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

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

package/dist/components/ix-button.js

@@ -0,0 +1,6 @@
+import { B as Button, d as defineCustomElement$1 } from './button.js';
+
+const IxButton = Button;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxButton, defineCustomElement };

package/dist/components/ix-category-filter.d.ts

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

package/dist/components/ix-category-filter.js

@@ -0,0 +1,447 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as convertToRemString } from './rwd.util.js';
+import { L as LogicalFilterOperator, I as InputState } from './logical-filter-operator.js';
+import { d as defineCustomElement$3 } from './filter-chip.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const categoryFilterCss = "@charset \"UTF-8\";.sc-ix-category-filter-h{display:block;position:relative}.sc-ix-category-filter-h .focus.sc-ix-category-filter{border-color:var(--theme-color-primary);box-shadow:0 0 0.25rem 0 var(--theme-color-primary) !important}.sc-ix-category-filter-h .btn-close.sc-ix-category-filter{position:absolute;top:0.25rem;right:0.25rem;min-width:1.5rem;width:1.5rem;height:1.5rem}.sc-ix-category-filter-h .input-container.sc-ix-category-filter{display:flex;height:100%;max-height:3.75rem;padding:1px 1.5rem 1px 2rem}.sc-ix-category-filter-h .input-container.no-icon.sc-ix-category-filter{padding-left:0.25rem}.sc-ix-category-filter-h .token-container.sc-ix-category-filter{flex-grow:1;overflow:hidden}.sc-ix-category-filter-h .text-input.sc-ix-category-filter{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;flex-grow:1;height:1.75rem}.sc-ix-category-filter-h .text-input.sc-ix-category-filter,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:hover,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:focus{border:none;outline:none}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::-moz-placeholder{opacity:0}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::placeholder{opacity:0}.sc-ix-category-filter-h .list-unstyled.sc-ix-category-filter{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;overflow-y:auto}.sc-ix-category-filter-h ix-icon.sc-ix-category-filter{position:absolute;top:0.5rem;left:0.5rem}.sc-ix-category-filter-h ix-filter-chip.sc-ix-category-filter{margin-right:0.5rem}.sc-ix-category-filter-h .category-preview.sc-ix-category-filter{display:flex;align-items:center;height:1.5rem;background-color:var(--theme-bg-3);border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:0.5rem;margin:2px 0}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter{box-shadow:var(--theme-box-shadow-level-1);background:var(--theme-color-1);position:absolute;top:2rem;overflow-y:auto;min-width:10rem;border:var(--theme-std-bdr-1);border-radius:0.25rem;padding:0.5rem;z-index:1}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item.sc-ix-category-filter,.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-header.sc-ix-category-filter{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:2rem;padding:0.5rem}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-header.sc-ix-category-filter{color:var(--theme-color-soft-text)}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-id.sc-ix-category-filter{border-top-left-radius:1rem;border-bottom-left-radius:1rem}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-value.sc-ix-category-filter{border-top-right-radius:1rem;border-bottom-right-radius:1rem}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item.sc-ix-category-filter{cursor:pointer}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item.sc-ix-category-filter:focus{background-color:var(--theme-generic-bg-active);outline:none}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .plain-text-suggestion.sc-ix-category-filter{border-radius:1rem}.sc-ix-category-filter-h ul.sc-ix-category-filter{height:100%}.sc-ix-category-filter-h ul.sc-ix-category-filter>li.sc-ix-category-filter,.sc-ix-category-filter-h input.sc-ix-category-filter{padding-top:2px;padding-bottom:2px}";
+
+const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.inputChanged = createEvent(this, "inputChanged", 7);
+    this.filterChanged = createEvent(this, "filterChanged", 7);
+    this.ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';
+    this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;
+    this.filterTokens = [];
+    /**
+     * In certain use cases some categories are not available for selection any more.
+     * To allow proper display of set filters with these categories this ID to label mapping can be populated.
+     * Configuration object hash used to supply labels to the filter chips in the input field.
+     * Each ID maps to a string representing the label to display.
+     */
+    this.nonSelectableCategories = {};
+    /**
+     * The icon next to the actual text input
+     * Defaults to 'search'
+     */
+    this.icon = 'search';
+    /**
+     * If set to true allows that a single category can be set more than once.
+     * An already set category will not appear in the category dropdown if set to false.
+     *
+     * Defaults to true
+     */
+    this.repeatCategories = true;
+    /**
+     * @deprecated For debugging purposes only!
+     */
+    this.tmpDisableScrollIntoView = true;
+    /**
+     * i18n
+     */
+    this.labelCategories = 'Categories';
+    /**
+     * i18n
+     */
+    this.i18nPlainText = 'Filter by text';
+    this.documentClickCallback = this.handleDocumentClick.bind(this);
+  }
+  watchFilterState(newValue) {
+    this.setFilterState(newValue);
+  }
+  watchShowCategorySelection(newValue) {
+    if (newValue) {
+      document.addEventListener('click', this.documentClickCallback);
+    }
+    else {
+      document.removeEventListener('click', this.documentClickCallback);
+    }
+  }
+  setDropdownOffset() {
+    const height = this.calculateDropdownHeight();
+    this.maxHeightDropdown = convertToRemString(height);
+  }
+  componentDidLoad() {
+    var _a, _b;
+    if (this.initialState !== undefined) {
+      this.setFilterState(this.initialState);
+    }
+    else if (this.filterState !== undefined) {
+      this.setFilterState(this.filterState);
+    }
+    (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.handleFormElementKeyDown.bind(this));
+    (_b = this.formElement) === null || _b === void 0 ? void 0 : _b.addEventListener('submit', (e) => e.preventDefault());
+    if (this.textInput == null) {
+      console.warn('Core UI category filter - unable to add event listeners to native input element');
+      return;
+    }
+    this.textInput.addEventListener('click', () => (this.showCategorySelection = true));
+    this.textInput.addEventListener('focusin', () => {
+      this.hasFocus = true;
+    });
+    this.textInput.addEventListener('focusout', () => (this.hasFocus = false));
+    this.textInput.addEventListener('input', () => {
+      this.inputValue = this.textInput.value;
+      const inputState = new InputState(this.inputValue, this.category);
+      this.inputChanged.emit(inputState);
+      this.showCategorySelection = true;
+    });
+    this.textInput.addEventListener('keydown', this.handleInputElementKeyDown.bind(this));
+  }
+  setFilterState(state) {
+    this.filterTokens = [];
+    for (const token of state.tokens) {
+      this.addToken(token, this.ID_CUSTOM_FILTER_VALUE, this.categoryLogicalOperator, false);
+    }
+    for (const category of state.categories) {
+      this.addToken(category.value, category.id, category.operator, false);
+    }
+    this.emitFilterEvent();
+  }
+  handleDocumentClick(ev) {
+    const target = ev.target;
+    if (!this.hostElement.contains(target)) {
+      this.closeDropdown();
+    }
+  }
+  closeDropdown() {
+    this.showCategorySelection = false;
+    this.category = undefined;
+  }
+  handleFormElementKeyDown(e) {
+    switch (e.code) {
+      case 'Enter':
+      case 'NumpadEnter':
+        if (this.category ||
+          document.activeElement.classList.contains('plain-text-suggestion')) {
+          const token = document.activeElement.getAttribute('data-id');
+          this.addToken(token, this.category);
+        }
+        else if (document.activeElement.classList.contains('category-item-id')) {
+          this.selectCategory(document.activeElement.getAttribute('data-id'));
+        }
+        e.preventDefault();
+        break;
+      case 'ArrowUp':
+        this.focusPreviousItem();
+        e.preventDefault();
+        break;
+      case 'ArrowDown':
+        this.focusNextItem();
+        e.preventDefault();
+        break;
+      case 'Escape':
+        this.closeDropdown();
+        break;
+    }
+  }
+  focusPreviousItem() {
+    const sibling = document.activeElement.previousSibling;
+    if (sibling instanceof HTMLElement) {
+      sibling.focus();
+    }
+  }
+  focusNextItem() {
+    const sibling = document.activeElement.nextSibling;
+    if (sibling instanceof HTMLElement) {
+      sibling.focus();
+    }
+  }
+  handleInputElementKeyDown(e) {
+    var _a;
+    switch (e.code) {
+      case 'ArrowDown':
+        const selector = `.category-item-${this.category ? 'value' : 'id'}`;
+        let item = this.hostElement.querySelector(selector);
+        if (item instanceof HTMLElement) {
+          item.focus();
+          e.stopPropagation();
+        }
+        else if ((_a = this.suggestions) === null || _a === void 0 ? void 0 : _a.length) {
+          item = this.hostElement.querySelector('.category-item');
+          if (item instanceof HTMLElement) {
+            item.focus();
+            e.stopPropagation();
+          }
+        }
+        break;
+      case 'Backspace':
+        if (this.textInput.value !== '') {
+          return;
+        }
+        if (this.category) {
+          this.category = undefined;
+          return;
+        }
+        const tokenCount = this.filterTokens.length;
+        if (tokenCount > 0) {
+          this.removeToken(tokenCount - 1);
+        }
+        break;
+      case 'Enter':
+      case 'NumpadEnter':
+        this.addToken(this.inputValue, this.category);
+        e.preventDefault();
+        break;
+    }
+  }
+  emitFilterEvent() {
+    const tokens = this.filterTokens
+      .filter((item) => item.id === this.ID_CUSTOM_FILTER_VALUE)
+      .map((item) => item.value);
+    const categories = this.filterTokens.filter((item) => item.id !== this.ID_CUSTOM_FILTER_VALUE);
+    const filterState = {
+      tokens,
+      categories,
+    };
+    this.filterChanged.emit(filterState);
+  }
+  addToken(token, category = this.ID_CUSTOM_FILTER_VALUE, operator = this.categoryLogicalOperator, emitEvent = true) {
+    if (token === undefined || token === null) {
+      return;
+    }
+    const newToken = token.trim();
+    if (newToken === '') {
+      return;
+    }
+    if (this.filterTokens.find((value) => (value === null || value === void 0 ? void 0 : value.value) === newToken)) {
+      return;
+    }
+    const pair = { id: category, value: newToken, operator };
+    this.filterTokens = [...this.filterTokens, pair];
+    this.textInput.value = '';
+    this.inputValue = '';
+    this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;
+    this.isScrollStateDirty = true;
+    this.textInput.focus();
+    if (emitEvent) {
+      this.emitFilterEvent();
+    }
+    this.closeDropdown();
+  }
+  removeToken(index) {
+    this.filterTokens = this.filterTokens.filter((_, i) => i !== index);
+    this.emitFilterEvent();
+  }
+  getCategoryIds() {
+    const ids = [];
+    for (const id in this.categories) {
+      if (Object.prototype.hasOwnProperty.call(this.categories, id)) {
+        ids.push(id);
+      }
+    }
+    return ids;
+  }
+  getCategoryLables() {
+    return this.getCategoryIds().map((id) => this.categories[id].label);
+  }
+  selectCategory(category) {
+    this.category = category;
+    this.textInput.value = '';
+    this.inputValue = '';
+    this.textInput.focus();
+  }
+  openCategorySelection() {
+    this.showCategorySelection = true;
+  }
+  resetFilter() {
+    this.closeDropdown();
+    this.filterTokens = [];
+    this.emitFilterEvent();
+  }
+  calculateDropdownX() {
+    var _a;
+    if (!this.textInput) {
+      return 0;
+    }
+    const xInput = this.textInput.getBoundingClientRect().x;
+    const xFrom = (_a = this.formElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x;
+    return xInput - xFrom;
+  }
+  calculateDropdownY() {
+    if (!this.textInput) {
+      return 32;
+    }
+    return this.hostElement.getBoundingClientRect().height;
+  }
+  calculateDropdownHeight(top = 32) {
+    const hostTop = this.hostElement.getBoundingClientRect().top;
+    const offset = hostTop + top;
+    return window.innerHeight - offset;
+  }
+  filterMultiples(value) {
+    if (this.repeatCategories) {
+      return true;
+    }
+    const isCategoryAlreadySet = this.filterTokens.find((token) => token.id === value);
+    return !isCategoryAlreadySet;
+  }
+  filterDuplicateTokens(value) {
+    const isTokenAlreadySet = this.filterTokens.some((token) => token.value === value);
+    return !isTokenAlreadySet;
+  }
+  filterByInput(value) {
+    if (this.inputValue === undefined || this.inputValue === '') {
+      return true;
+    }
+    return value.toLowerCase().indexOf(this.inputValue.toLowerCase()) !== -1;
+  }
+  toggleCategoryOperator() {
+    switch (this.categoryLogicalOperator) {
+      case LogicalFilterOperator.EQUAL:
+        this.categoryLogicalOperator = LogicalFilterOperator.NOT_EQUAL;
+        break;
+      case LogicalFilterOperator.NOT_EQUAL:
+        this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;
+        break;
+    }
+  }
+  getFilterChipLabel(value) {
+    var _a, _b, _c;
+    if (value.id === this.ID_CUSTOM_FILTER_VALUE) {
+      return value.value;
+    }
+    const operatorString = value.operator === LogicalFilterOperator.EQUAL ? '=' : '!=';
+    const label = (_c = (_b = (_a = this.categories[value.id]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : this.nonSelectableCategories[value.id]) !== null && _c !== void 0 ? _c : value.id;
+    return `${label} ${operatorString} ${value.value}`;
+  }
+  componentDidRender() {
+    const newOffsetX = this.calculateDropdownX();
+    const newOffsetY = this.calculateDropdownY();
+    const newOffsetXRem = convertToRemString(newOffsetX);
+    const newOffsetYRem = convertToRemString(newOffsetY);
+    const maxWidthDropdown = this.hostElement.getBoundingClientRect().width - newOffsetX;
+    const maxHeightDropdown = this.calculateDropdownHeight(newOffsetY);
+    this.maxWidthDropdown = convertToRemString(maxWidthDropdown);
+    this.maxHeightDropdown = convertToRemString(maxHeightDropdown);
+    // This will throw a warning
+    if (newOffsetXRem !== this.offsetDropdownX) {
+      this.offsetDropdownX = newOffsetXRem;
+    }
+    // This will throw a warning
+    if (newOffsetYRem !== this.offsetDropdownY) {
+      this.offsetDropdownY = newOffsetYRem;
+    }
+    if (this.isScrollStateDirty) {
+      if (!this.tmpDisableScrollIntoView) {
+        this.textInput.scrollIntoView();
+      }
+      this.isScrollStateDirty = false;
+    }
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f;
+    return (h(Host, null, h("form", { ref: (el) => (this.formElement = el) }, h("div", { class: {
+        'form-control': true,
+        'input-container': true,
+        focus: this.hasFocus,
+        'no-icon': this.hideIcon,
+      } }, h("ix-icon", { class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { class: "token-container" }, h("ul", { class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("li", { class: {
+        animate__animated: true,
+        animate__fadein: true,
+      } }, h("ix-filter-chip", { onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (h("li", { class: {
+        'category-preview': true,
+        'd-none': !this.category,
+      } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { class: {
+        'text-input': true,
+        'hide-placeholder': this.category !== undefined,
+      }, ref: (el) => (this.textInput = el), type: "text", placeholder: this.placeholder, onFocus: () => this.openCategorySelection() }))), h("button", { class: {
+        btn: true,
+        'btn-invisible-secondary': true,
+        'btn-oval': true,
+        'btn-close': true,
+        'd-none': !this.filterTokens.length && !this.category,
+      }, onClick: () => this.resetFilter(), tabindex: "1" }, h("span", { class: "glyph glyph-error glyph-16" })))), h("div", { class: {
+        'category-selection-container': true,
+        'd-none': !this.showCategorySelection && this.category === undefined,
+      }, style: {
+        left: this.offsetDropdownX,
+        top: this.offsetDropdownY,
+        'max-width': this.maxWidthDropdown,
+        'max-height': this.maxHeightDropdown,
+      } }, h("div", { class: {
+        'd-none': !this.showCategorySelection || this.category !== undefined,
+      } }, h("div", { class: {
+        'category-item-header': true,
+        'd-none': this.getCategoryLables().filter((value) => this.filterByInput(value)).length === 0,
+      } }, this.labelCategories), (_b = this.getCategoryIds()) === null || _b === void 0 ? void 0 :
+      _b.filter((id) => this.filterByInput(this.categories[id].label)).filter((id) => this.filterMultiples(id)).map((id) => {
+        var _a;
+        return (h("div", { "data-id": id, title: id, class: "category-item category-item-id", onClick: () => this.selectCategory(id), tabindex: "0" }, (_a = this.categories[id]) === null || _a === void 0 ? void 0 : _a.label));
+      })), h("div", { class: {
+        'd-none': this.category === undefined,
+      } }, h("button", { class: "btn btn-invisible-secondary btn-icon", onClick: () => this.toggleCategoryOperator(), tabindex: "-1" }, this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL
+      ? '='
+      : '!='), this.categories === undefined ? ('') : (h("div", { class: "category-item-header" }, (_c = this.categories[this.category]) === null || _c === void 0 ? void 0 : _c.label)), this.categories === undefined
+      ? ''
+      : (_d = this.categories[this.category]) === null || _d === void 0 ? void 0 : _d.options.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value)).map((id) => (h("div", { "data-id": id, title: id, class: "category-item category-item-value", onClick: () => this.addToken(id, this.category), tabindex: "0" }, `${this.categoryLogicalOperator ===
+        LogicalFilterOperator.EQUAL
+        ? '='
+        : '!='} ${id}`)))), h("div", { class: {
+        'category-item-header': true,
+        'd-none': this.category !== undefined ||
+          this.getCategoryIds().filter((value) => this.filterByInput(value)).length > 0,
+      } }, this.i18nPlainText), h("div", { class: {
+        'd-none': !((_e = this.suggestions) === null || _e === void 0 ? void 0 : _e.length) || this.category !== undefined,
+      } }, (_f = this.suggestions) === null || _f === void 0 ? void 0 : _f.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value)).map((suggestion) => (h("div", { "data-id": suggestion, class: "category-item plain-text-suggestion", onClick: () => this.addToken(suggestion), tabindex: "0" }, suggestion)))))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "filterState": ["watchFilterState"],
+    "showCategorySelection": ["watchShowCategorySelection"]
+  }; }
+  static get style() { return categoryFilterCss; }
+}, [2, "ix-category-filter", {
+    "initialState": [16],
+    "filterState": [16],
+    "placeholder": [1],
+    "categories": [16],
+    "nonSelectableCategories": [16],
+    "suggestions": [16],
+    "icon": [1],
+    "hideIcon": [4, "hide-icon"],
+    "repeatCategories": [4, "repeat-categories"],
+    "tmpDisableScrollIntoView": [4, "tmp-disable-scroll-into-view"],
+    "labelCategories": [1, "label-categories"],
+    "i18nPlainText": [1, "i-1-8n-plain-text"],
+    "hasFocus": [32],
+    "showCategorySelection": [32],
+    "categoryLogicalOperator": [32],
+    "inputValue": [32],
+    "category": [32],
+    "filterTokens": [32],
+    "offsetDropdownX": [32],
+    "offsetDropdownY": [32],
+    "maxHeightDropdown": [32],
+    "maxWidthDropdown": [32]
+  }, [[9, "resize", "setDropdownOffset"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-category-filter", "ix-filter-chip", "ix-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-category-filter":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CategoryFilter);
+      }
+      break;
+    case "ix-filter-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxCategoryFilter = CategoryFilter;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxCategoryFilter, defineCustomElement };