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

package/dist/components/ix-breadcrumb.js

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

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

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

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

@@ -1,447 +0,0 @@
-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 = ".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-visible{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 };