@siemens/ix 1.1.0-beta.0 → 1.1.0-beta.2

package/dist/cjs/ix-button.cjs.entry.js

@@ -1,50 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-1e4a348f.js');
-const baseButton = require('./base-button-eb1d47db.js');
-
-const buttonCss = ".sc-ix-button-h{display:inline-block;height:2rem}[disabled].sc-ix-button-h{pointer-events:none}";
-
-const Button = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Button varaint
-     */
-    this.variant = 'Primary';
-    /**
-     * Outline button
-     */
-    this.outline = false;
-    /**
-     * Invisible button
-     *
-     * @deprecated use ghost property
-     */
-    this.invisible = false;
-    /**
-     * Button with no background or outline
-     */
-    this.ghost = false;
-    /**
-     * Show button as selected. Should be used with outline or invisible
-     */
-    this.selected = false;
-    /**
-     * Disable the button
-     */
-    this.disabled = false;
-    /**
-     * Type of the button
-     */
-    this.type = 'button';
-  }
-  render() {
-    return (index.h("button", { type: this.type, class: baseButton.getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, false, false, this.selected, this.disabled) }, index.h("slot", null)));
-  }
-};
-Button.style = buttonCss;
-
-exports.ix_button = Button;

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

@@ -1,399 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-1e4a348f.js');
-const rwd_util = require('./rwd.util-482d41d4.js');
-const logicalFilterOperator = require('./logical-filter-operator-467e2faf.js');
-
-const categoryFilterCss = ".sc-ix-category-filter-h{display:block;position:relative}.sc-ix-category-filter-h .focus.sc-ix-category-filter{border-color:var(--theme-color-primary);box-shadow:0 0 0.25rem 0 var(--theme-color-primary) !important}.sc-ix-category-filter-h .btn-close.sc-ix-category-filter{position:absolute;top:0.25rem;right:0.25rem;min-width:1.5rem;width:1.5rem;height:1.5rem}.sc-ix-category-filter-h .input-container.sc-ix-category-filter{display:flex;height:100%;max-height:3.75rem;padding:1px 1.5rem 1px 2rem}.sc-ix-category-filter-h .input-container.no-icon.sc-ix-category-filter{padding-left:0.25rem}.sc-ix-category-filter-h .token-container.sc-ix-category-filter{flex-grow:1;overflow:hidden}.sc-ix-category-filter-h .text-input.sc-ix-category-filter{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;flex-grow:1;height:1.75rem}.sc-ix-category-filter-h .text-input.sc-ix-category-filter,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:hover,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:focus-visible{border:none;outline:none}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::-moz-placeholder{opacity:0}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::placeholder{opacity:0}.sc-ix-category-filter-h .list-unstyled.sc-ix-category-filter{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;overflow-y:auto}.sc-ix-category-filter-h ix-icon.sc-ix-category-filter{position:absolute;top:0.5rem;left:0.5rem}.sc-ix-category-filter-h ix-filter-chip.sc-ix-category-filter{margin-right:0.5rem}.sc-ix-category-filter-h .category-preview.sc-ix-category-filter{display:flex;align-items:center;height:1.5rem;background-color:var(--theme-bg-3);border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:0.5rem;margin:2px 0}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter{box-shadow:var(--theme-box-shadow-level-1);background:var(--theme-color-1);position:absolute;top:2rem;overflow-y:auto;min-width:10rem;border:var(--theme-std-bdr-1);border-radius:0.25rem;padding:0.5rem;z-index:1}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item.sc-ix-category-filter,.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-header.sc-ix-category-filter{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:2rem;padding:0.5rem}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-header.sc-ix-category-filter{color:var(--theme-color-soft-text)}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-id.sc-ix-category-filter{border-top-left-radius:1rem;border-bottom-left-radius:1rem}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-value.sc-ix-category-filter{border-top-right-radius:1rem;border-bottom-right-radius:1rem}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item.sc-ix-category-filter{cursor:pointer}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item.sc-ix-category-filter:focus{background-color:var(--theme-generic-bg-active);outline:none}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .plain-text-suggestion.sc-ix-category-filter{border-radius:1rem}.sc-ix-category-filter-h ul.sc-ix-category-filter{height:100%}.sc-ix-category-filter-h ul.sc-ix-category-filter>li.sc-ix-category-filter,.sc-ix-category-filter-h input.sc-ix-category-filter{padding-top:2px;padding-bottom:2px}";
-
-const CategoryFilter = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.inputChanged = index.createEvent(this, "inputChanged", 7);
-    this.filterChanged = index.createEvent(this, "filterChanged", 7);
-    this.ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';
-    this.categoryLogicalOperator = logicalFilterOperator.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 = rwd_util.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 logicalFilterOperator.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.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.LogicalFilterOperator.EQUAL:
-        this.categoryLogicalOperator = logicalFilterOperator.LogicalFilterOperator.NOT_EQUAL;
-        break;
-      case logicalFilterOperator.LogicalFilterOperator.NOT_EQUAL:
-        this.categoryLogicalOperator = logicalFilterOperator.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.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 = rwd_util.convertToRemString(newOffsetX);
-    const newOffsetYRem = rwd_util.convertToRemString(newOffsetY);
-    const maxWidthDropdown = this.hostElement.getBoundingClientRect().width - newOffsetX;
-    const maxHeightDropdown = this.calculateDropdownHeight(newOffsetY);
-    this.maxWidthDropdown = rwd_util.convertToRemString(maxWidthDropdown);
-    this.maxHeightDropdown = rwd_util.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 (index.h(index.Host, null, index.h("form", { ref: (el) => (this.formElement = el) }, index.h("div", { class: {
-        'form-control': true,
-        'input-container': true,
-        focus: this.hasFocus,
-        'no-icon': this.hideIcon,
-      } }, index.h("ix-icon", { class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), index.h("div", { class: "token-container" }, index.h("ul", { class: "list-unstyled" }, this.filterTokens.map((value, index$1) => (index.h("li", { class: {
-        animate__animated: true,
-        animate__fadein: true,
-      } }, index.h("ix-filter-chip", { onCloseClick: () => this.removeToken(index$1) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (index.h("li", { class: {
-        'category-preview': true,
-        'd-none': !this.category,
-      } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), index.h("input", { class: {
-        'text-input': true,
-        'hide-placeholder': this.category !== undefined,
-      }, ref: (el) => (this.textInput = el), type: "text", placeholder: this.placeholder, onFocus: () => this.openCategorySelection() }))), index.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" }, index.h("span", { class: "glyph glyph-error glyph-16" })))), index.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,
-      } }, index.h("div", { class: {
-        'd-none': !this.showCategorySelection || this.category !== undefined,
-      } }, index.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 (index.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));
-      })), index.h("div", { class: {
-        'd-none': this.category === undefined,
-      } }, index.h("button", { class: "btn btn-invisible-secondary btn-icon", onClick: () => this.toggleCategoryOperator(), tabindex: "-1" }, this.categoryLogicalOperator === logicalFilterOperator.LogicalFilterOperator.NOT_EQUAL
-      ? '='
-      : '!='), this.categories === undefined ? ('') : (index.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) => (index.h("div", { "data-id": id, title: id, class: "category-item category-item-value", onClick: () => this.addToken(id, this.category), tabindex: "0" }, `${this.categoryLogicalOperator ===
-        logicalFilterOperator.LogicalFilterOperator.EQUAL
-        ? '='
-        : '!='} ${id}`)))), index.h("div", { class: {
-        'category-item-header': true,
-        'd-none': this.category !== undefined ||
-          this.getCategoryIds().filter((value) => this.filterByInput(value)).length > 0,
-      } }, this.i18nPlainText), index.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) => (index.h("div", { "data-id": suggestion, class: "category-item plain-text-suggestion", onClick: () => this.addToken(suggestion), tabindex: "0" }, suggestion)))))));
-  }
-  get hostElement() { return index.getElement(this); }
-  static get watchers() { return {
-    "filterState": ["watchFilterState"],
-    "showCategorySelection": ["watchShowCategorySelection"]
-  }; }
-};
-CategoryFilter.style = categoryFilterCss;
-
-exports.ix_category_filter = CategoryFilter;

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

@@ -1,47 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-1e4a348f.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-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-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-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-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-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-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-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-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) {
-    index.registerInstance(this, hostRef);
-    this.close = index.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 (index.h("div", { class: "close-button-container" }, index.h("button", { type: "button", class: "btn btn-invisible-secondary btn-icon btn-oval close-button", onClick: (event) => this.close.emit(event) }, this.variant === 'custom' ? (index.h("i", { class: "glyph glyph-16 glyph-close-small", style: { color: this.color } })) : (index.h("ix-icon", { name: 'close-small', size: '16' })))));
-  }
-  render() {
-    return (index.h(index.Host, { class: {
-        outline: this.outline,
-      }, tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
-        ? {
-          color: this.color,
-          backgroundColor: this.background,
-        }
-        : {} }, this.icon ? (index.h("ix-icon", { class: 'with-icon', name: this.icon, size: '24' })) : null, index.h("span", { class: "slot-container" }, index.h("slot", null)), this.closable ? this.getCloseButton() : null));
-  }
-  get el() { return index.getElement(this); }
-};
-Chip.style = chipCss;
-
-exports.ix_chip = Chip;

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

@@ -1,40 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-1e4a348f.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) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Pill variant
-     */
-    this.variant = 'primary';
-    /**
-     * Show pill as outline
-     */
-    this.outline = false;
-    /**
-     * Align pill content left
-     */
-    this.alignLeft = false;
-  }
-  render() {
-    return (index.h(index.Host, { class: {
-        outline: this.outline,
-        'align-left': this.alignLeft,
-      }, style: this.variant === 'custom'
-        ? {
-          color: this.color,
-          backgroundColor: this.background,
-        }
-        : {}, title: this.el.textContent }, index.h("span", { class: "slot-container" }, index.h("slot", null))));
-  }
-  get el() { return index.getElement(this); }
-};
-CounterPill.style = counterPillCss;
-
-exports.ix_counter_pill = CounterPill;