@siemens/ix 1.0.0-beta.2

package/dist/esm/ix-category-filter.entry.js

@@ -0,0 +1,395 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-55cfd20d.js';
+import { a as convertToRemString } from './rwd.util-33a69d24.js';
+import { L as LogicalFilterOperator, I as InputState } from './logical-filter-operator-1bf83315.js';
+
+const categoryFilterCss = "@charset \"UTF-8\";.sc-ix-category-filter-h{display:block;position:relative}.sc-ix-category-filter-h .focus.sc-ix-category-filter{border-color:var(--theme-color-primary);box-shadow:0 0 0.25rem 0 var(--theme-color-primary) !important}.sc-ix-category-filter-h .btn-close.sc-ix-category-filter{position:absolute;top:0.25rem;right:0.25rem;min-width:1.5rem;width:1.5rem;height:1.5rem}.sc-ix-category-filter-h .input-container.sc-ix-category-filter{display:flex;height:100%;max-height:3.75rem;padding:1px 1.5rem 1px 2rem}.sc-ix-category-filter-h .input-container.no-icon.sc-ix-category-filter{padding-left:0.25rem}.sc-ix-category-filter-h .token-container.sc-ix-category-filter{flex-grow:1;overflow:hidden}.sc-ix-category-filter-h .text-input.sc-ix-category-filter{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;flex-grow:1;height:1.75rem}.sc-ix-category-filter-h .text-input.sc-ix-category-filter,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:hover,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:focus{border:none;outline:none}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::-moz-placeholder{opacity:0}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::placeholder{opacity:0}.sc-ix-category-filter-h .list-unstyled.sc-ix-category-filter{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;overflow-y:auto}.sc-ix-category-filter-h ix-icon.sc-ix-category-filter{position:absolute;top:0.5rem;left:0.5rem}.sc-ix-category-filter-h ix-filter-chip.sc-ix-category-filter{margin-right:0.5rem}.sc-ix-category-filter-h .category-preview.sc-ix-category-filter{display:flex;align-items:center;height:1.5rem;background-color:var(--theme-bg-3);border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:0.5rem;margin:2px 0}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter{box-shadow:var(--theme-box-shadow-level-1);background:var(--theme-color-1);position:absolute;top:2rem;overflow-y:auto;min-width:10rem;border:var(--theme-std-bdr-1);border-radius:0.25rem;padding:0.5rem;z-index:1}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item.sc-ix-category-filter,.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-header.sc-ix-category-filter{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:2rem;padding:0.5rem}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-header.sc-ix-category-filter{color:var(--theme-color-soft-text)}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-id.sc-ix-category-filter{border-top-left-radius:1rem;border-bottom-left-radius:1rem}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-value.sc-ix-category-filter{border-top-right-radius:1rem;border-bottom-right-radius:1rem}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item.sc-ix-category-filter{cursor:pointer}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item.sc-ix-category-filter:focus{background-color:var(--theme-generic-bg-active);outline:none}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .plain-text-suggestion.sc-ix-category-filter{border-radius:1rem}.sc-ix-category-filter-h ul.sc-ix-category-filter{height:100%}.sc-ix-category-filter-h ul.sc-ix-category-filter>li.sc-ix-category-filter,.sc-ix-category-filter-h input.sc-ix-category-filter{padding-top:2px;padding-bottom:2px}";
+
+const CategoryFilter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+  static get watchers() { return {
+    "filterState": ["watchFilterState"],
+    "showCategorySelection": ["watchShowCategorySelection"]
+  }; }
+};
+CategoryFilter.style = categoryFilterCss;
+
+export { CategoryFilter as ix_category_filter };

package/dist/esm/ix-chip.entry.js

@@ -0,0 +1,43 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-55cfd20d.js';
+
+const chipCss = ".sc-ix-chip-h{display:inline-flex;position:relative;align-items:center;border-radius:100px;padding:0.5rem 0.75rem;height:2rem;max-height:2rem;cursor:pointer;margin-left:0.25rem}.sc-ix-chip-h .with-icon.sc-ix-chip{margin-right:0.25rem}.sc-ix-chip-h .close-button-container.sc-ix-chip{display:inline-flex;flex-grow:1;margin-left:0.75rem}.sc-ix-chip-h .close-button.sc-ix-chip{position:relative;width:1rem;height:1rem;min-width:unset;min-height:unset;margin-left:auto;margin-right:0}[variant=primary].sc-ix-chip-h{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}[variant=primary].sc-ix-chip-h .close-button.sc-ix-chip{color:var(--theme-chip-primary--color);pointer-events:auto}[variant=primary].sc-ix-chip-h:hover{background-color:var(--theme-chip-primary--background--hover)}[variant=primary].sc-ix-chip-h:active{background-color:var(--theme-chip-primary--background--active)}[variant=primary].sc-ix-chip-h:focus,[variant=primary].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}[variant=primary].outline.sc-ix-chip-h{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}[variant=primary].outline.sc-ix-chip-h .close-button.sc-ix-chip{color:var(--theme-chip-primary-outline--color)}[variant=primary].outline.sc-ix-chip-h:hover{background-color:var(--theme-chip-primary-outline--background--hover)}[variant=primary].outline.sc-ix-chip-h:active{background-color:var(--theme-chip-primary-outline--background--active)}[variant=alarm].sc-ix-chip-h{color:var(--theme-color-alarm--contrast)}[variant=alarm].sc-ix-chip-h:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}[variant=alarm].active.sc-ix-chip-h::after,[variant=alarm].sc-ix-chip-h:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}[variant=alarm].sc-ix-chip-h:not(.outline){background-color:var(--theme-color-alarm)}[variant=alarm].sc-ix-chip-h:not(.outline) .close-button.sc-ix-chip{color:var(--theme-color-alarm--contrast)}[variant=alarm].sc-ix-chip-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=alarm].sc-ix-chip-h:not(.outline).active::after,[variant=alarm].sc-ix-chip-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=alarm].outline.sc-ix-chip-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-alarm)}[variant=alarm].outline.sc-ix-chip-h:hover::after{display:none}[variant=alarm].outline.sc-ix-chip-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=alarm].outline.active.sc-ix-chip-h::after,[variant=alarm].outline.sc-ix-chip-h:active::after{display:none}[variant=alarm].outline.active.sc-ix-chip-h,[variant=alarm].outline.sc-ix-chip-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=alarm].sc-ix-chip-h:focus,[variant=alarm].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}[variant=critical].sc-ix-chip-h{color:var(--theme-color-critical--contrast)}[variant=critical].sc-ix-chip-h:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}[variant=critical].active.sc-ix-chip-h::after,[variant=critical].sc-ix-chip-h:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}[variant=critical].sc-ix-chip-h:not(.outline){background-color:var(--theme-color-critical)}[variant=critical].sc-ix-chip-h:not(.outline) .close-button.sc-ix-chip{color:var(--theme-color-critical--contrast)}[variant=critical].sc-ix-chip-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=critical].sc-ix-chip-h:not(.outline).active::after,[variant=critical].sc-ix-chip-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=critical].outline.sc-ix-chip-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-critical)}[variant=critical].outline.sc-ix-chip-h:hover::after{display:none}[variant=critical].outline.sc-ix-chip-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=critical].outline.active.sc-ix-chip-h::after,[variant=critical].outline.sc-ix-chip-h:active::after{display:none}[variant=critical].outline.active.sc-ix-chip-h,[variant=critical].outline.sc-ix-chip-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=critical].sc-ix-chip-h:focus,[variant=critical].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}[variant=warning].sc-ix-chip-h{color:var(--theme-color-warning--contrast)}[variant=warning].sc-ix-chip-h:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}[variant=warning].active.sc-ix-chip-h::after,[variant=warning].sc-ix-chip-h:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}[variant=warning].sc-ix-chip-h:not(.outline){background-color:var(--theme-color-warning)}[variant=warning].sc-ix-chip-h:not(.outline) .close-button.sc-ix-chip{color:var(--theme-color-warning--contrast)}[variant=warning].sc-ix-chip-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=warning].sc-ix-chip-h:not(.outline).active::after,[variant=warning].sc-ix-chip-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=warning].outline.sc-ix-chip-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-warning)}[variant=warning].outline.sc-ix-chip-h:hover::after{display:none}[variant=warning].outline.sc-ix-chip-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=warning].outline.active.sc-ix-chip-h::after,[variant=warning].outline.sc-ix-chip-h:active::after{display:none}[variant=warning].outline.active.sc-ix-chip-h,[variant=warning].outline.sc-ix-chip-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=warning].sc-ix-chip-h:focus,[variant=warning].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}[variant=info].sc-ix-chip-h{color:var(--theme-color-info--contrast)}[variant=info].sc-ix-chip-h:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}[variant=info].active.sc-ix-chip-h::after,[variant=info].sc-ix-chip-h:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}[variant=info].sc-ix-chip-h:not(.outline){background-color:var(--theme-color-info)}[variant=info].sc-ix-chip-h:not(.outline) .close-button.sc-ix-chip{color:var(--theme-color-info--contrast)}[variant=info].sc-ix-chip-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=info].sc-ix-chip-h:not(.outline).active::after,[variant=info].sc-ix-chip-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=info].outline.sc-ix-chip-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-info)}[variant=info].outline.sc-ix-chip-h:hover::after{display:none}[variant=info].outline.sc-ix-chip-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=info].outline.active.sc-ix-chip-h::after,[variant=info].outline.sc-ix-chip-h:active::after{display:none}[variant=info].outline.active.sc-ix-chip-h,[variant=info].outline.sc-ix-chip-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=info].sc-ix-chip-h:focus,[variant=info].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}[variant=neutral].sc-ix-chip-h{color:var(--theme-color-neutral--contrast)}[variant=neutral].sc-ix-chip-h:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}[variant=neutral].active.sc-ix-chip-h::after,[variant=neutral].sc-ix-chip-h:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}[variant=neutral].sc-ix-chip-h:not(.outline){background-color:var(--theme-color-neutral)}[variant=neutral].sc-ix-chip-h:not(.outline) .close-button.sc-ix-chip{color:var(--theme-color-neutral--contrast)}[variant=neutral].sc-ix-chip-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=neutral].sc-ix-chip-h:not(.outline).active::after,[variant=neutral].sc-ix-chip-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=neutral].outline.sc-ix-chip-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-neutral)}[variant=neutral].outline.sc-ix-chip-h:hover::after{display:none}[variant=neutral].outline.sc-ix-chip-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=neutral].outline.active.sc-ix-chip-h::after,[variant=neutral].outline.sc-ix-chip-h:active::after{display:none}[variant=neutral].outline.active.sc-ix-chip-h,[variant=neutral].outline.sc-ix-chip-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=neutral].sc-ix-chip-h:focus,[variant=neutral].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}[variant=success].sc-ix-chip-h{color:var(--theme-color-success--contrast)}[variant=success].sc-ix-chip-h:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}[variant=success].active.sc-ix-chip-h::after,[variant=success].sc-ix-chip-h:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}[variant=success].sc-ix-chip-h:not(.outline){background-color:var(--theme-color-success)}[variant=success].sc-ix-chip-h:not(.outline) .close-button.sc-ix-chip{color:var(--theme-color-success--contrast)}[variant=success].sc-ix-chip-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=success].sc-ix-chip-h:not(.outline).active::after,[variant=success].sc-ix-chip-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=success].outline.sc-ix-chip-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-success)}[variant=success].outline.sc-ix-chip-h:hover::after{display:none}[variant=success].outline.sc-ix-chip-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=success].outline.active.sc-ix-chip-h::after,[variant=success].outline.sc-ix-chip-h:active::after{display:none}[variant=success].outline.active.sc-ix-chip-h,[variant=success].outline.sc-ix-chip-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=success].sc-ix-chip-h:focus,[variant=success].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}[variant=custom].sc-ix-chip-h:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, var(--theme-l-hover));left:0;border-radius:100px;pointer-events:none}[variant=custom].active.sc-ix-chip-h::after,[variant=custom].sc-ix-chip-h:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, var(--theme-l-active));left:0;border-radius:100px;pointer-events:none}[variant=custom].sc-ix-chip-h:focus,[variant=custom].sc-ix-chip-h:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.sc-ix-chip-h .slot-container.sc-ix-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
+
+const Chip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.close = createEvent(this, "close", 7);
+    /**
+     * Chip variant
+     */
+    this.variant = 'primary';
+    /**
+     * Display chip in active state. Only working witht `variant="primary"`
+     */
+    this.active = false;
+    /**
+     * Show close icon
+     */
+    this.closable = false;
+    /**
+     * Show chip with outline style
+     */
+    this.outline = false;
+  }
+  getCloseButton() {
+    return (h("div", { class: "close-button-container" }, h("button", { type: "button", class: "btn btn-invisible-secondary btn-icon btn-oval close-button", onClick: (event) => this.close.emit(event) }, this.variant === 'custom' ? (h("i", { class: "glyph glyph-16 glyph-close-small", style: { color: this.color } })) : (h("ix-icon", { name: 'close-small', size: '16' })))));
+  }
+  render() {
+    return (h(Host, { class: {
+        outline: this.outline,
+      }, tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
+        ? {
+          color: this.color,
+          backgroundColor: this.background,
+        }
+        : {} }, this.icon ? (h("ix-icon", { class: 'with-icon', name: this.icon, size: '24' })) : null, h("span", { class: "slot-container" }, h("slot", null)), this.closable ? this.getCloseButton() : null));
+  }
+  get el() { return getElement(this); }
+};
+Chip.style = chipCss;
+
+export { Chip as ix_chip };

package/dist/esm/ix-counter-pill.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-55cfd20d.js';
+
+const counterPillCss = ".sc-ix-counter-pill-h{display:inline-flex;position:relative;align-items:center;justify-content:center;border-radius:100px;padding:0px 6px;margin-left:0.25rem;min-width:1.5rem;height:1.25rem;min-height:1.25rem;max-height:1.25rem;cursor:auto}.sc-ix-counter-pill-h .with-icon.sc-ix-counter-pill{margin-right:0.25rem}.align-left.sc-ix-counter-pill-h{justify-content:flex-start}[variant=primary].sc-ix-counter-pill-h{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}[variant=primary].sc-ix-counter-pill-h .close-button.sc-ix-counter-pill{color:var(--theme-chip-primary--color);pointer-events:auto}[variant=primary].outline.sc-ix-counter-pill-h{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}[variant=primary].outline.sc-ix-counter-pill-h .close-button.sc-ix-counter-pill{color:var(--theme-chip-primary-outline--color)}[variant=alarm].sc-ix-counter-pill-h{color:var(--theme-color-alarm--contrast)}[variant=alarm].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-alarm)}[variant=alarm].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-alarm--contrast)}[variant=alarm].sc-ix-counter-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=alarm].sc-ix-counter-pill-h:not(.outline).active::after,[variant=alarm].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=alarm].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-alarm)}[variant=alarm].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=alarm].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=alarm].outline.active.sc-ix-counter-pill-h::after,[variant=alarm].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=alarm].outline.active.sc-ix-counter-pill-h,[variant=alarm].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=critical].sc-ix-counter-pill-h{color:var(--theme-color-critical--contrast)}[variant=critical].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-critical)}[variant=critical].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-critical--contrast)}[variant=critical].sc-ix-counter-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=critical].sc-ix-counter-pill-h:not(.outline).active::after,[variant=critical].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=critical].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-critical)}[variant=critical].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=critical].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=critical].outline.active.sc-ix-counter-pill-h::after,[variant=critical].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=critical].outline.active.sc-ix-counter-pill-h,[variant=critical].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=warning].sc-ix-counter-pill-h{color:var(--theme-color-warning--contrast)}[variant=warning].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-warning)}[variant=warning].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-warning--contrast)}[variant=warning].sc-ix-counter-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=warning].sc-ix-counter-pill-h:not(.outline).active::after,[variant=warning].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=warning].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-warning)}[variant=warning].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=warning].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=warning].outline.active.sc-ix-counter-pill-h::after,[variant=warning].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=warning].outline.active.sc-ix-counter-pill-h,[variant=warning].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=info].sc-ix-counter-pill-h{color:var(--theme-color-info--contrast)}[variant=info].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-info)}[variant=info].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-info--contrast)}[variant=info].sc-ix-counter-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=info].sc-ix-counter-pill-h:not(.outline).active::after,[variant=info].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=info].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-info)}[variant=info].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=info].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=info].outline.active.sc-ix-counter-pill-h::after,[variant=info].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=info].outline.active.sc-ix-counter-pill-h,[variant=info].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=neutral].sc-ix-counter-pill-h{color:var(--theme-color-neutral--contrast)}[variant=neutral].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-neutral)}[variant=neutral].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-neutral--contrast)}[variant=neutral].sc-ix-counter-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=neutral].sc-ix-counter-pill-h:not(.outline).active::after,[variant=neutral].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=neutral].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-neutral)}[variant=neutral].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=neutral].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=neutral].outline.active.sc-ix-counter-pill-h::after,[variant=neutral].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=neutral].outline.active.sc-ix-counter-pill-h,[variant=neutral].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=success].sc-ix-counter-pill-h{color:var(--theme-color-success--contrast)}[variant=success].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-success)}[variant=success].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-success--contrast)}[variant=success].sc-ix-counter-pill-h:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}[variant=success].sc-ix-counter-pill-h:not(.outline).active::after,[variant=success].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=success].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-success)}[variant=success].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=success].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=success].outline.active.sc-ix-counter-pill-h::after,[variant=success].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=success].outline.active.sc-ix-counter-pill-h,[variant=success].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}.sc-ix-counter-pill-h .slot.sc-ix-counter-pill{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-counter-pill-h{min-height:1rem;max-height:1rem;height:1rem;font-size:0.75rem;padding:0 0.25rem;min-width:1rem;width:auto;padding:0 4px}.sc-ix-counter-pill-h .slot-container.sc-ix-counter-pill{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
+
+const CounterPill = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Pill variant
+     */
+    this.variant = 'primary';
+    /**
+     * Show pill as outline
+     */
+    this.outline = false;
+    /**
+     * Align pill content left
+     */
+    this.alignLeft = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        outline: this.outline,
+        'align-left': this.alignLeft,
+      }, style: this.variant === 'custom'
+        ? {
+          color: this.color,
+          backgroundColor: this.background,
+        }
+        : {}, title: this.el.textContent }, h("span", { class: "slot-container" }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+CounterPill.style = counterPillCss;
+
+export { CounterPill as ix_counter_pill };