@siemens/ix 2.0.0-beta.0 → 2.0.0

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

@@ -1,435 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { L as LogicalFilterOperator, I as InputState } from './logical-filter-operator.js';
-import { d as defineCustomElement$6 } from './dropdown.js';
-import { d as defineCustomElement$5 } from './filter-chip.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
-import { d as defineCustomElement$2 } from './spinner.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 .reset-button.sc-ix-category-filter{position:absolute;top:0.25rem;right:0.25rem}.sc-ix-category-filter-h .reset-button.hide-reset-button.sc-ix-category-filter{display:none}.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 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}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter{min-width:10rem !important}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter{display:flex;flex-direction:column}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter .dropdown-item.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:2.5rem;margin:0.25rem 0.5rem;padding-inline:0.5rem;border-radius:100rem;width:auto}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter .category-item.sc-ix-category-filter{border-end-end-radius:0;border-start-end-radius:0}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter .category-item-value.sc-ix-category-filter{border-start-start-radius:0;border-end-start-radius:0}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .btn-toggle-operator.sc-ix-category-filter{margin-inline:0.5rem}";
-
-const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class CategoryFilter 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.textInput = undefined;
-    this.hasFocus = undefined;
-    this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;
-    this.inputValue = undefined;
-    this.category = undefined;
-    this.filterTokens = [];
-    this.initialState = undefined;
-    this.filterState = undefined;
-    this.placeholder = undefined;
-    this.categories = undefined;
-    this.nonSelectableCategories = {};
-    this.suggestions = undefined;
-    this.icon = 'search';
-    this.hideIcon = undefined;
-    this.repeatCategories = true;
-    this.tmpDisableScrollIntoView = true;
-    this.labelCategories = 'Categories';
-    this.i18nPlainText = 'Filter by text';
-  }
-  watchFilterState(newValue) {
-    this.setFilterState(newValue);
-  }
-  componentDidLoad() {
-    var _a, _b;
-    if (this.initialState !== undefined) {
-      this.setFilterState(this.initialState);
-    }
-    else if (this.filterState !== undefined) {
-      setTimeout(() => 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('ix-category-filter - unable to add event listeners to native input element');
-      return;
-    }
-    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.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();
-  }
-  closeDropdown() {
-    this.hostElement.querySelector('ix-dropdown').show = false;
-  }
-  handleFormElementKeyDown(e) {
-    switch (e.code) {
-      case 'Enter':
-      case 'NumpadEnter':
-        if (!document.activeElement.classList.contains('dropdown-item')) {
-          return;
-        }
-        const token = document.activeElement.getAttribute('data-id');
-        if (this.hasCategorySelection()) {
-          if (this.category) {
-            this.addToken(token, this.category);
-          }
-          else if (document.activeElement.classList.contains('category-item-id')) {
-            this.selectCategory(token);
-          }
-        }
-        else {
-          this.addToken(token);
-        }
-        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.hasToken(newToken)) {
-      return;
-    }
-    const pair = { id: category, value: newToken, operator };
-    this.filterTokens = [...this.filterTokens, pair];
-    this.textInput.value = '';
-    this.inputValue = '';
-    this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;
-    if (this.category) {
-      this.category = undefined;
-    }
-    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;
-  }
-  selectCategory(category) {
-    this.category = category;
-    this.textInput.value = '';
-    this.inputValue = '';
-    this.textInput.focus();
-  }
-  resetFilter() {
-    this.closeDropdown();
-    this.filterTokens = [];
-    this.emitFilterEvent();
-  }
-  filterMultiples(value) {
-    if (this.repeatCategories) {
-      return true;
-    }
-    const isCategoryAlreadySet = this.filterTokens.find((token) => token.id === value);
-    return !isCategoryAlreadySet;
-  }
-  hasToken(token) {
-    return this.filterTokens.some((filterToken) => {
-      const hasSameValue = filterToken.value === token;
-      if (!hasSameValue) {
-        return false;
-      }
-      if (this.category) {
-        return this.category === filterToken.id;
-      }
-      if (filterToken.id) {
-        return filterToken.id === this.ID_CUSTOM_FILTER_VALUE;
-      }
-      return hasSameValue;
-    });
-  }
-  filterDuplicateTokens(value) {
-    return !this.hasToken(value);
-  }
-  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}`;
-  }
-  getFilteredSuggestions() {
-    var _a, _b;
-    if (!((_a = this.suggestions) === null || _a === void 0 ? void 0 : _a.length)) {
-      return [];
-    }
-    return (_b = this.suggestions) === null || _b === void 0 ? void 0 : _b.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value));
-  }
-  hasCategorySelection() {
-    return this.categories !== undefined;
-  }
-  displayDropdown() {
-    if (this.hasCategorySelection()) {
-      return true;
-    }
-    if (this.suggestions !== undefined) {
-      return this.getFilteredSuggestions().length > 0;
-    }
-    return false;
-  }
-  renderPlainSuggestions() {
-    return (h("div", { class: "dropdown-item-container" }, this.getFilteredSuggestions().map((suggestion) => (h("button", { class: "dropdown-item", "data-id": suggestion, onClick: () => this.addToken(suggestion), key: suggestion, title: suggestion }, suggestion)))));
-  }
-  renderCategoryValues() {
-    var _a, _b;
-    return (h("div", { class: "dropdown-item-container" }, h("button", { class: "btn btn-invisible-secondary btn-icon btn-toggle-operator", onClick: () => this.toggleCategoryOperator(), tabindex: "-1" }, this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL
-      ? '='
-      : '!='), h("div", { class: "dropdown-header" }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label), (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 :
-      _b.options.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value)).map((id) => (h("button", { class: "dropdown-item category-item-value", "data-id": id, title: id, key: id, onClick: () => this.addToken(id, this.category) }, `${this.categoryLogicalOperator === LogicalFilterOperator.EQUAL
-        ? '='
-        : '!='} ${id}`)))));
-  }
-  renderDropdownContent() {
-    if (this.hasCategorySelection()) {
-      if (this.category) {
-        return this.renderCategoryValues();
-      }
-      else {
-        return this.renderCategorySelection();
-      }
-    }
-    else
-      return this.renderPlainSuggestions();
-  }
-  renderCategorySelection() {
-    var _a;
-    return (h("div", { class: "dropdown-item-container" }, (_a = this.getCategoryIds()) === null || _a === void 0 ? void 0 : _a.filter((id) => this.filterByInput(this.categories[id].label)).filter((id) => this.filterMultiples(id)).map((id) => {
-      var _a;
-      return (h("button", { class: "dropdown-item category-item category-item-id", "data-id": id, title: this.categories[id].label, key: id, onClick: () => this.selectCategory(id), tabindex: "0" }, (_a = this.categories[id]) === null || _a === void 0 ? void 0 : _a.label));
-    })));
-  }
-  getDropdownHeader() {
-    if (this.categories) {
-      if (this.category) {
-        return null;
-      }
-      else {
-        return this.labelCategories;
-      }
-    }
-    return this.i18nPlainText;
-  }
-  componentDidRender() {
-    if (this.isScrollStateDirty) {
-      if (!this.tmpDisableScrollIntoView) {
-        this.textInput.scrollIntoView();
-      }
-      this.isScrollStateDirty = false;
-    }
-  }
-  getResetButton() {
-    return (h("ix-icon-button", { onClick: () => this.resetFilter(), class: {
-        'reset-button': true,
-        'hide-reset-button': !this.filterTokens.length && !this.category,
-      }, variant: "primary", ghost: true, oval: true, icon: "clear", size: "16", tabindex: "1" }));
-  }
-  render() {
-    var _a;
-    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", { key: value.toString(), 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 }))), this.getResetButton())), h("ix-dropdown", { closeBehavior: "outside", trigger: this.textInput, triggerEvent: ['click', 'focus'], header: this.getDropdownHeader(), class: { 'd-none': !this.displayDropdown() } }, this.renderDropdownContent())));
-  }
-  get hostElement() { return this; }
-  static get watchers() { return {
-    "filterState": ["watchFilterState"]
-  }; }
-  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"],
-    "textInput": [32],
-    "hasFocus": [32],
-    "categoryLogicalOperator": [32],
-    "inputValue": [32],
-    "category": [32],
-    "filterTokens": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-category-filter", "ix-dropdown", "ix-filter-chip", "ix-icon", "ix-icon-button", "ix-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-category-filter":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CategoryFilter);
-      }
-      break;
-    case "ix-dropdown":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "ix-filter-chip":
-      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-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const IxCategoryFilter = CategoryFilter;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxCategoryFilter, defineCustomElement };
-
-//# sourceMappingURL=ix-category-filter.js.map

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

@@ -1 +0,0 @@
-{"file":"ix-category-filter.js","mappings":"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","names":[],"sources":["./src/components/category-filter/category-filter.scss?tag=ix-category-filter&encapsulation=scoped","./src/components/category-filter/category-filter.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/shadows';\n@import 'mixins/text-truncation';\n\n:host {\n  display: block;\n  position: relative;\n\n  .focus {\n    border-color: var(--theme-color-primary);\n    box-shadow: 0 0 $tiny-space 0 var(--theme-color-primary) !important;\n  }\n\n  .reset-button {\n    position: absolute;\n    top: $tiny-space;\n    right: $tiny-space;\n  }\n\n  .reset-button.hide-reset-button {\n    display: none;\n  }\n\n  .input-container {\n    display: flex;\n    height: 100%;\n    max-height: 3.75rem;\n    padding: 1px $large-space 1px $x-large-space;\n\n    &.no-icon {\n      padding-left: $tiny-space;\n    }\n  }\n\n  .token-container {\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .text-input {\n    @include ellipsis;\n    @include text-default;\n    background: transparent;\n    flex-grow: 1;\n    height: 1.75rem;\n\n    &,\n    &:hover,\n    &:focus-visible {\n      border: none;\n      outline: none;\n    }\n\n    &.hide-placeholder::placeholder {\n      opacity: 0;\n    }\n  }\n\n  .list-unstyled {\n    display: flex;\n    flex-wrap: wrap;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    overflow-y: auto;\n  }\n\n  ix-icon {\n    position: absolute;\n    top: $small-space;\n    left: $small-space;\n  }\n\n  ix-filter-chip {\n    margin-right: $small-space;\n  }\n\n  .category-preview {\n    display: flex;\n    align-items: center;\n    height: $large-space;\n    background-color: var(--theme-bg-3);\n    border-top-left-radius: $default-space;\n    border-bottom-left-radius: $default-space;\n    padding: $small-space;\n    margin: 2px 0;\n  }\n\n  ul {\n    height: 100%;\n  }\n\n  ul > li,\n  input {\n    padding-top: 2px;\n    padding-bottom: 2px;\n  }\n\n  ix-dropdown {\n    min-width: 10rem !important;\n\n    .dropdown-item-container {\n      display: flex;\n      flex-direction: column;\n\n      .dropdown-item {\n        @include text-default-single;\n        @include ellipsis;\n        height: $large-control-height;\n        margin: $tiny-space $small-space;\n        padding-inline: $small-space;\n        border-radius: 100rem;\n        width: auto;\n      }\n\n      .category-item {\n        border-end-end-radius: 0;\n        border-start-end-radius: 0;\n      }\n\n      .category-item-value {\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n      }\n    }\n\n    .btn-toggle-operator {\n      margin-inline: $small-space;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { FilterState } from './filter-state';\nimport { InputState } from './input-state';\nimport { LogicalFilterOperator } from './logical-filter-operator';\n\n@Component({\n  tag: 'ix-category-filter',\n  styleUrl: 'category-filter.scss',\n  scoped: true,\n})\nexport class CategoryFilter {\n  private readonly ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';\n\n  @State() private textInput?: HTMLInputElement;\n  private formElement?: HTMLFormElement;\n  private isScrollStateDirty: boolean;\n\n  @Element() hostElement: HTMLIxCategoryFilterElement;\n\n  @State() hasFocus: boolean;\n  @State() categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n  @State() inputValue: string;\n  @State() category: string;\n  @State() filterTokens: Array<{\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }> = [];\n\n  /**\n   * When set this will initially populate the component with the provided search criteria.\n   * This will trigger all input events accordingly.\n   * @deprecated Will be removed with 2.0.0. Use the member filterState instead.\n   */\n  @Prop() initialState: FilterState;\n\n  /**\n   * A set of search criteria to populate the component with.\n   */\n  @Prop() filterState: FilterState;\n\n  /**\n   * Placeholder text to be displayed in an empty input field.\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality.\n   * Each ID maps to an object with a label and an array of options to select from.\n   */\n  @Prop() categories: {\n    [id: string]: {\n      label: string;\n      options: string[];\n    };\n  };\n\n  /**\n   * In certain use cases some categories may not be available for selection anymore.\n   * To allow proper display of set filters with these categories this ID to label mapping can be populated.\n   *\n   * Configuration object hash used to supply labels to the filter chips in the input field.\n   * Each ID maps to a string representing the label to display.\n   */\n  @Prop() nonSelectableCategories?: {\n    [id: string]: string;\n  } = {};\n\n  /**\n   * A list of strings that will be supplied as typeahead suggestions not tied to any categories.\n   */\n  @Prop() suggestions: string[];\n\n  /**\n   * The icon next to the actual text input\n   * Defaults to 'search'\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Allows to hide the icon inside the text input.\n   * Defaults to false\n   */\n  @Prop() hideIcon: boolean;\n\n  /**\n   * If set to true allows that a single category can be set more than once.\n   * An already set category will not appear in the category dropdown if set to false.\n   *\n   * Defaults to true\n   */\n  @Prop() repeatCategories = true;\n\n  /**\n   * @internal For debugging purposes only!\n   */\n  @Prop() tmpDisableScrollIntoView = true;\n\n  /**\n   * i18n\n   */\n  @Prop() labelCategories = 'Categories';\n\n  /**\n   * i18n\n   */\n  @Prop() i18nPlainText = 'Filter by text';\n\n  /**\n   * Event dispatched whenever the text input changes.\n   */\n  @Event() inputChanged: EventEmitter<InputState>;\n\n  /**\n   * Event dispatched whenever the filter state changes.\n   */\n  @Event() filterChanged: EventEmitter<FilterState>;\n\n  @Watch('filterState')\n  watchFilterState(newValue) {\n    this.setFilterState(newValue);\n  }\n\n  componentDidLoad() {\n    if (this.initialState !== undefined) {\n      this.setFilterState(this.initialState);\n    } else if (this.filterState !== undefined) {\n      setTimeout(() => this.setFilterState(this.filterState));\n    }\n\n    this.hostElement?.addEventListener(\n      'keydown',\n      this.handleFormElementKeyDown.bind(this)\n    );\n\n    this.formElement?.addEventListener('submit', (e) => e.preventDefault());\n\n    if (this.textInput == null) {\n      console.warn(\n        'ix-category-filter - unable to add event listeners to native input element'\n      );\n      return;\n    }\n\n    this.textInput.addEventListener('focusin', () => {\n      this.hasFocus = true;\n    });\n    this.textInput.addEventListener('focusout', () => (this.hasFocus = false));\n    this.textInput.addEventListener('input', () => {\n      this.inputValue = this.textInput.value;\n      const inputState = new InputState(this.inputValue, this.category);\n      this.inputChanged.emit(inputState);\n    });\n    this.textInput.addEventListener(\n      'keydown',\n      this.handleInputElementKeyDown.bind(this)\n    );\n  }\n\n  private setFilterState(state: FilterState) {\n    this.filterTokens = [];\n\n    for (const token of state.tokens) {\n      this.addToken(\n        token,\n        this.ID_CUSTOM_FILTER_VALUE,\n        this.categoryLogicalOperator,\n        false\n      );\n    }\n\n    for (const category of state.categories) {\n      this.addToken(category.value, category.id, category.operator, false);\n    }\n\n    this.emitFilterEvent();\n  }\n\n  private closeDropdown() {\n    this.hostElement.querySelector('ix-dropdown').show = false;\n  }\n\n  private handleFormElementKeyDown(e: KeyboardEvent) {\n    switch (e.code) {\n      case 'Enter':\n      case 'NumpadEnter':\n        if (!document.activeElement.classList.contains('dropdown-item')) {\n          return;\n        }\n\n        const token = document.activeElement.getAttribute('data-id');\n\n        if (this.hasCategorySelection()) {\n          if (this.category) {\n            this.addToken(token, this.category);\n          } else if (\n            document.activeElement.classList.contains('category-item-id')\n          ) {\n            this.selectCategory(token);\n          }\n        } else {\n          this.addToken(token);\n        }\n\n        e.preventDefault();\n        break;\n\n      case 'ArrowUp':\n        this.focusPreviousItem();\n        e.preventDefault();\n        break;\n\n      case 'ArrowDown':\n        this.focusNextItem();\n        e.preventDefault();\n        break;\n\n      case 'Escape':\n        this.closeDropdown();\n        break;\n    }\n  }\n\n  private focusPreviousItem() {\n    const sibling = document.activeElement.previousSibling;\n    if (sibling instanceof HTMLElement) {\n      sibling.focus();\n    }\n  }\n\n  private focusNextItem() {\n    const sibling = document.activeElement.nextSibling;\n    if (sibling instanceof HTMLElement) {\n      sibling.focus();\n    }\n  }\n\n  private handleInputElementKeyDown(e: KeyboardEvent) {\n    switch (e.code) {\n      case 'ArrowDown':\n        const selector = `.category-item-${this.category ? 'value' : 'id'}`;\n        let item = this.hostElement.querySelector(selector);\n\n        if (item instanceof HTMLElement) {\n          item.focus();\n          e.stopPropagation();\n        } else if (this.suggestions?.length) {\n          item = this.hostElement.querySelector('.category-item');\n          if (item instanceof HTMLElement) {\n            item.focus();\n            e.stopPropagation();\n          }\n        }\n        break;\n\n      case 'Backspace':\n        if (this.textInput.value !== '') {\n          return;\n        }\n\n        if (this.category) {\n          this.category = undefined;\n          return;\n        }\n\n        const tokenCount = this.filterTokens.length;\n        if (tokenCount > 0) {\n          this.removeToken(tokenCount - 1);\n        }\n        break;\n\n      case 'Enter':\n      case 'NumpadEnter':\n        this.addToken(this.inputValue, this.category);\n        e.preventDefault();\n        break;\n    }\n  }\n\n  private emitFilterEvent() {\n    const tokens = this.filterTokens\n      .filter((item) => item.id === this.ID_CUSTOM_FILTER_VALUE)\n      .map((item) => item.value);\n    const categories = this.filterTokens.filter(\n      (item) => item.id !== this.ID_CUSTOM_FILTER_VALUE\n    );\n    const filterState: FilterState = {\n      tokens,\n      categories,\n    };\n\n    this.filterChanged.emit(filterState);\n  }\n\n  private addToken(\n    token: string,\n    category: string = this.ID_CUSTOM_FILTER_VALUE,\n    operator = this.categoryLogicalOperator,\n    emitEvent = true\n  ) {\n    if (token === undefined || token === null) {\n      return;\n    }\n\n    const newToken = token.trim();\n\n    if (newToken === '') {\n      return;\n    }\n\n    if (this.hasToken(newToken)) {\n      return;\n    }\n\n    const pair = { id: category, value: newToken, operator };\n    this.filterTokens = [...this.filterTokens, pair];\n    this.textInput.value = '';\n    this.inputValue = '';\n    this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n\n    if (this.category) {\n      this.category = undefined;\n    }\n\n    this.isScrollStateDirty = true;\n\n    this.textInput.focus();\n\n    if (emitEvent) {\n      this.emitFilterEvent();\n    }\n\n    this.closeDropdown();\n  }\n\n  private removeToken(index: number) {\n    this.filterTokens = this.filterTokens.filter((_, i) => i !== index);\n    this.emitFilterEvent();\n  }\n\n  private getCategoryIds() {\n    const ids = [];\n    for (const id in this.categories) {\n      if (Object.prototype.hasOwnProperty.call(this.categories, id)) {\n        ids.push(id);\n      }\n    }\n\n    return ids;\n  }\n\n  private selectCategory(category: string) {\n    this.category = category;\n    this.textInput.value = '';\n    this.inputValue = '';\n    this.textInput.focus();\n  }\n\n  private resetFilter() {\n    this.closeDropdown();\n    this.filterTokens = [];\n    this.emitFilterEvent();\n  }\n\n  private filterMultiples(value: string) {\n    if (this.repeatCategories) {\n      return true;\n    }\n\n    const isCategoryAlreadySet = this.filterTokens.find(\n      (token) => token.id === value\n    );\n\n    return !isCategoryAlreadySet;\n  }\n\n  private hasToken(token: string) {\n    return this.filterTokens.some((filterToken) => {\n      const hasSameValue = filterToken.value === token;\n\n      if (!hasSameValue) {\n        return false;\n      }\n\n      if (this.category) {\n        return this.category === filterToken.id;\n      }\n\n      if (filterToken.id) {\n        return filterToken.id === this.ID_CUSTOM_FILTER_VALUE;\n      }\n\n      return hasSameValue;\n    });\n  }\n\n  private filterDuplicateTokens(value: string) {\n    return !this.hasToken(value);\n  }\n\n  private filterByInput(value: string) {\n    if (this.inputValue === undefined || this.inputValue === '') {\n      return true;\n    }\n\n    return value.toLowerCase().indexOf(this.inputValue.toLowerCase()) !== -1;\n  }\n\n  private toggleCategoryOperator() {\n    switch (this.categoryLogicalOperator) {\n      case LogicalFilterOperator.EQUAL:\n        this.categoryLogicalOperator = LogicalFilterOperator.NOT_EQUAL;\n        break;\n\n      case LogicalFilterOperator.NOT_EQUAL:\n        this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n        break;\n    }\n  }\n\n  private getFilterChipLabel(value: {\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }): string {\n    if (value.id === this.ID_CUSTOM_FILTER_VALUE) {\n      return value.value;\n    }\n\n    const operatorString =\n      value.operator === LogicalFilterOperator.EQUAL ? '=' : '!=';\n    const label =\n      this.categories[value.id]?.label ??\n      this.nonSelectableCategories[value.id] ??\n      value.id;\n\n    return `${label} ${operatorString} ${value.value}`;\n  }\n\n  private getFilteredSuggestions() {\n    if (!this.suggestions?.length) {\n      return [];\n    }\n\n    return this.suggestions\n      ?.filter((value) => this.filterByInput(value))\n      .filter((value) => this.filterDuplicateTokens(value));\n  }\n\n  private hasCategorySelection() {\n    return this.categories !== undefined;\n  }\n\n  private displayDropdown() {\n    if (this.hasCategorySelection()) {\n      return true;\n    }\n\n    if (this.suggestions !== undefined) {\n      return this.getFilteredSuggestions().length > 0;\n    }\n\n    return false;\n  }\n\n  private renderPlainSuggestions() {\n    return (\n      <div class=\"dropdown-item-container\">\n        {this.getFilteredSuggestions().map((suggestion) => (\n          <button\n            class=\"dropdown-item\"\n            data-id={suggestion}\n            onClick={() => this.addToken(suggestion)}\n            key={suggestion}\n            title={suggestion}\n          >\n            {suggestion}\n          </button>\n        ))}\n      </div>\n    );\n  }\n\n  private renderCategoryValues() {\n    return (\n      <div class=\"dropdown-item-container\">\n        <button\n          class=\"btn btn-invisible-secondary btn-icon btn-toggle-operator\"\n          onClick={() => this.toggleCategoryOperator()}\n          tabindex=\"-1\"\n        >\n          {this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL\n            ? '='\n            : '!='}\n        </button>\n        <div class=\"dropdown-header\">\n          {this.categories[this.category]?.label}\n        </div>\n        {this.categories[this.category]?.options\n          .filter((value) => this.filterByInput(value))\n          .filter((value) => this.filterDuplicateTokens(value))\n          .map((id) => (\n            <button\n              class=\"dropdown-item category-item-value\"\n              data-id={id}\n              title={id}\n              key={id}\n              onClick={() => this.addToken(id, this.category)}\n            >\n              {`${\n                this.categoryLogicalOperator === LogicalFilterOperator.EQUAL\n                  ? '='\n                  : '!='\n              } ${id}`}\n            </button>\n          ))}\n      </div>\n    );\n  }\n\n  private renderDropdownContent() {\n    if (this.hasCategorySelection()) {\n      if (this.category) {\n        return this.renderCategoryValues();\n      } else {\n        return this.renderCategorySelection();\n      }\n    } else return this.renderPlainSuggestions();\n  }\n\n  private renderCategorySelection() {\n    return (\n      <div class=\"dropdown-item-container\">\n        {this.getCategoryIds()\n          ?.filter((id) => this.filterByInput(this.categories[id].label))\n          .filter((id) => this.filterMultiples(id))\n          .map((id) => (\n            <button\n              class=\"dropdown-item category-item category-item-id\"\n              data-id={id}\n              title={this.categories[id].label}\n              key={id}\n              onClick={() => this.selectCategory(id)}\n              tabindex=\"0\"\n            >\n              {this.categories[id]?.label}\n            </button>\n          ))}\n      </div>\n    );\n  }\n\n  private getDropdownHeader() {\n    if (this.categories) {\n      if (this.category) {\n        return null;\n      } else {\n        return this.labelCategories;\n      }\n    }\n\n    return this.i18nPlainText;\n  }\n\n  componentDidRender() {\n    if (this.isScrollStateDirty) {\n      if (!this.tmpDisableScrollIntoView) {\n        this.textInput.scrollIntoView();\n      }\n      this.isScrollStateDirty = false;\n    }\n  }\n\n  private getResetButton() {\n    return (\n      <ix-icon-button\n        onClick={() => this.resetFilter()}\n        class={{\n          'reset-button': true,\n          'hide-reset-button': !this.filterTokens.length && !this.category,\n        }}\n        variant=\"primary\"\n        ghost\n        oval\n        icon=\"clear\"\n        size=\"16\"\n        tabindex=\"1\"\n      ></ix-icon-button>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <form ref={(el) => (this.formElement = el)}>\n          <div\n            class={{\n              'form-control': true,\n              'input-container': true,\n              focus: this.hasFocus,\n              'no-icon': this.hideIcon,\n            }}\n          >\n            <ix-icon\n              class={{ 'd-none': this.hideIcon }}\n              name={this.icon}\n              size=\"16\"\n            ></ix-icon>\n            <div class=\"token-container\">\n              <ul class=\"list-unstyled\">\n                {this.filterTokens.map((value, index) => (\n                  <li\n                    key={value.toString()}\n                    class={{\n                      animate__animated: true,\n                      animate__fadein: true,\n                    }}\n                  >\n                    <ix-filter-chip\n                      onCloseClick={() => this.removeToken(index)}\n                    >\n                      {this.getFilterChipLabel(value)}\n                    </ix-filter-chip>\n                  </li>\n                ))}\n                {this.categories === undefined ? (\n                  ''\n                ) : (\n                  <li\n                    class={{\n                      'category-preview': true,\n                      'd-none': !this.category,\n                    }}\n                  >\n                    {this.categories[this.category]?.label}\n                  </li>\n                )}\n                <input\n                  class={{\n                    'text-input': true,\n                    'hide-placeholder': this.category !== undefined,\n                  }}\n                  ref={(el) => (this.textInput = el)}\n                  type=\"text\"\n                  placeholder={this.placeholder}\n                ></input>\n              </ul>\n            </div>\n            {this.getResetButton()}\n          </div>\n        </form>\n\n        <ix-dropdown\n          closeBehavior=\"outside\"\n          trigger={this.textInput}\n          triggerEvent={['click', 'focus']}\n          header={this.getDropdownHeader()}\n          class={{ 'd-none': !this.displayDropdown() }}\n        >\n          {this.renderDropdownContent()}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

@@ -1,106 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
-import { d as defineCustomElement$2 } from './spinner.js';
-
-const chipCss = ":host{display:inline-block;position:relative;height:2rem;max-height:2rem;margin-left:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host(.inactive){pointer-events:none}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;height:2rem;max-height:2rem;cursor:pointer}.container .with-icon{margin-right:0.25rem}.container .hidden{width:0px;margin-right:0px}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.icon{padding-left:0.75rem;padding-right:0.75rem}.container.closable{padding-right:0.25rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary:hover{background-color:var(--theme-chip-primary--background--hover)}.container.primary:active{background-color:var(--theme-chip-primary--background--active)}.container.primary:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.primary.outline{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-primary-outline--color);--ix-icon-button-color:var(--theme-chip-primary-outline--color)}.container.primary.outline:hover{background-color:var(--theme-chip-primary-outline--background--hover)}.container.primary.outline:active{background-color:var(--theme-chip-primary-outline--background--active)}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm: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}.container.alarm.active::after,.container.alarm: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}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.alarm:not(.outline).active::after,.container.alarm:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.alarm.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-alarm)}.container.alarm.outline:hover::after{display:none}.container.alarm.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.alarm.outline.active::after,.container.alarm.outline:active::after{display:none}.container.alarm.outline.active,.container.alarm.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.alarm:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical: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}.container.critical.active::after,.container.critical: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}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.critical:not(.outline).active::after,.container.critical:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.critical.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-critical)}.container.critical.outline:hover::after{display:none}.container.critical.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.critical.outline.active::after,.container.critical.outline:active::after{display:none}.container.critical.outline.active,.container.critical.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.critical:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning: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}.container.warning.active::after,.container.warning: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}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.warning:not(.outline).active::after,.container.warning:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.warning.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-warning)}.container.warning.outline:hover::after{display:none}.container.warning.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.warning.outline.active::after,.container.warning.outline:active::after{display:none}.container.warning.outline.active,.container.warning.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.warning:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.info{color:var(--theme-color-info--contrast)}.container.info: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}.container.info.active::after,.container.info: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}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.info:not(.outline).active::after,.container.info:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.info.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-info)}.container.info.outline:hover::after{display:none}.container.info.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.info.outline.active::after,.container.info.outline:active::after{display:none}.container.info.outline.active,.container.info.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.info:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral: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}.container.neutral.active::after,.container.neutral: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}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.neutral:not(.outline).active::after,.container.neutral:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.neutral.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-neutral)}.container.neutral.outline:hover::after{display:none}.container.neutral.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.neutral.outline.active::after,.container.neutral.outline:active::after{display:none}.container.neutral.outline.active,.container.neutral.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.neutral:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.success{color:var(--theme-color-success--contrast)}.container.success: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}.container.success.active::after,.container.success: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}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.success:not(.outline).active::after,.container.success:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.success.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-success)}.container.success.outline:hover::after{display:none}.container.success.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.success.outline.active::after,.container.success.outline:active::after{display:none}.container.success.outline.active,.container.success.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.success:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}";
-
-const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.close = createEvent(this, "close", 7);
-    this.closeChip = createEvent(this, "closeChip", 7);
-    this.variant = 'primary';
-    this.active = true;
-    this.closable = false;
-    this.icon = undefined;
-    this.background = undefined;
-    this.color = undefined;
-    this.outline = false;
-  }
-  getCloseButton() {
-    return (h("div", { class: "close-button-container" }, h("ix-icon-button", { type: "button", variant: "secondary", icon: "close-small", class: "close-button", oval: true, size: "16", style: this.variant === 'custom' ? { color: this.color } : {}, ghost: true, onClick: (event) => {
-        this.close.emit(event);
-        this.closeChip.emit(event);
-        event.stopPropagation();
-      } })));
-  }
-  render() {
-    const isInactive = this.active === false;
-    let customStyle = {};
-    if (this.variant === 'custom') {
-      customStyle = {
-        color: this.color,
-        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
-      };
-    }
-    return (h(Host, { tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
-        ? {
-          '--ix-icon-button-color': this.color,
-        }
-        : {} }, h("div", { style: Object.assign({}, customStyle), class: {
-        container: true,
-        outline: this.outline,
-        inactive: isInactive,
-        alarm: this.variant === 'alarm',
-        critical: this.variant === 'critical',
-        info: this.variant === 'info',
-        neutral: this.variant === 'neutral',
-        primary: this.variant === 'primary',
-        success: this.variant === 'success',
-        warning: this.variant === 'warning',
-        closable: this.closable,
-        icon: !!this.icon,
-      } }, h("ix-icon", { class: {
-        'with-icon': true,
-        hidden: this.icon === undefined || this.icon === '',
-      }, name: this.icon, size: '24' }), h("span", { class: "slot-container" }, h("slot", null)), isInactive === false && this.closable ? this.getCloseButton() : null)));
-  }
-  get el() { return this; }
-  static get style() { return chipCss; }
-}, [1, "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", "ix-icon-button", "ix-spinner"];
-  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$4();
-      }
-      break;
-    case "ix-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ix-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const IxChip = Chip;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxChip, defineCustomElement };
-
-//# sourceMappingURL=ix-chip.js.map