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

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

@@ -7,7 +7,7 @@ import { d as defineCustomElement$2 } from './icon-button.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 extends HTMLElement {
+const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class CategoryFilter extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -47,7 +47,7 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     (_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');
+      console.warn('ix-category-filter - unable to add event listeners to native input element');
       return;
     }
     this.textInput.addEventListener('focusin', () => {
@@ -177,7 +177,7 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     if (newToken === '') {
       return;
     }
-    if (this.filterTokens.find((value) => (value === null || value === void 0 ? void 0 : value.value) === newToken)) {
+    if (this.hasToken(newToken)) {
       return;
     }
     const pair = { id: category, value: newToken, operator };
@@ -226,9 +226,23 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     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) {
-    const isTokenAlreadySet = this.filterTokens.some((token) => token.value === value);
-    return !isTokenAlreadySet;
+    return !this.hasToken(value);
   }
   filterByInput(value) {
     if (this.inputValue === undefined || this.inputValue === '') {
@@ -328,7 +342,7 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     return (h("ix-icon-button", { onClick: () => this.resetFilter(), class: {
         'reset-button': true,
         'hide-reset-button': !this.filterTokens.length && !this.category,
-      }, variant: "Secondary", ghost: true, oval: true, icon: "clear", size: "16", tabindex: "1" }));
+      }, variant: "Primary", ghost: true, oval: true, icon: "clear", size: "16", tabindex: "1" }));
   }
   render() {
     var _a;

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

@@ -1 +1 @@
-{"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        'Core UI 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.filterTokens.find((value) => value?.value === 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 filterDuplicateTokens(value: string) {\n    const isTokenAlreadySet = this.filterTokens.some(\n      (token) => token.value === value\n    );\n    return !isTokenAlreadySet;\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=\"Secondary\"\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}
+{"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.js

@@ -3,11 +3,12 @@ import { d as defineCustomElement$2 } from './icon.js';
 
 const chipCss = ".sc-ix-chip-h{display:inline-flex;width:-moz-fit-content;width:fit-content;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 .hidden.sc-ix-chip{width:0px;margin-right:0px}.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)}[variant=custom].outline.sc-ix-chip-h{border:solid 1px transparent;background-color:transparent}[variant=custom].outline.sc-ix-chip-h:hover{background-color:rgba(0, 0, 0, var(--theme-l-hover))}[variant=custom].outline.sc-ix-chip-h:active{background-color:rgba(0, 0, 0, var(--theme-l-active))}.sc-ix-chip-h .slot-container.sc-ix-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inactive.sc-ix-chip-h{pointer-events:none}";
 
-const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.close = createEvent(this, "close", 7);
+    this.closeChip = createEvent(this, "closeChip", 7);
     this.variant = 'primary';
     this.active = true;
     this.closable = false;
@@ -17,7 +18,11 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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' })))));
+    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.closeChip.emit(event);
+        event.stopPropagation();
+      } }, 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() {
     const isInactive = this.active === false;

package/dist/components/ix-chip.js.map

@@ -1 +1 @@
-{"file":"ix-chip.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,00YAA00Y;;MCwB70Y,IAAI;;;;;mBAcA,SAAS;kBAMP,IAAI;oBAKF,KAAK;;;;mBAoBN,KAAK;;EAOf,cAAc;IACpB,QACE,WAAK,KAAK,EAAC,wBAAwB,IACjC,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,4DAA4D,EAClE,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAEzC,IAAI,CAAC,OAAO,KAAK,QAAQ,IACxB,SACE,KAAK,EAAC,kCAAkC,EACxC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAC5B,KAEF,eAAS,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,GAAI,CAC7C,CACM,CACL,EACN;GACH;EAED,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,CAAC;IAEzC,IAAI,WAAW,GAAG,EAAE,CAAC;IAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE;MACvD,WAAW,GAAG;QACZ,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,eAAe,EAAE,IAAI,CAAC,UAAU;OACjC,CAAC;KACH;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;MACtD,WAAW,GAAG;QACZ,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,WAAW,EAAE,IAAI,CAAC,UAAU;OAC7B,CAAC;KACH;IAED,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,QAAQ,EAAE,UAAU;OACrB,EACD,QAAQ,EAAC,IAAI,EACb,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,EAC1B,KAAK,oBAAO,WAAW,KAEvB,eACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;OACpD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV,EACF,YAAM,KAAK,EAAC,gBAAgB,IAC1B,eAAa,CACR,EACN,UAAU,KAAK,KAAK,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAChE,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/chip/chip.scss?tag=ix-chip&encapsulation=scoped","./src/components/chip/chip.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 './chip-mixin';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n$border-radius: 100px;\n\n:host {\n  display: inline-flex;\n  width: fit-content;\n  position: relative;\n  align-items: center;\n  border-radius: $border-radius;\n  padding: $small-space $medium-space;\n\n  height: $default-control-height;\n  max-height: $default-control-height;\n\n  cursor: pointer;\n\n  .with-icon {\n    margin-right: $tiny-space;\n  }\n\n  .hidden {\n    width: 0px;\n    margin-right: 0px;\n  }\n\n  margin-left: $tiny-space;\n\n  .close-button-container {\n    display: inline-flex;\n    flex-grow: 1;\n    margin-left: $medium-space;\n  }\n\n  .close-button {\n    position: relative;\n    width: $default-space;\n    height: $default-space;\n    min-width: unset;\n    min-height: unset;\n    margin-left: auto;\n    margin-right: 0;\n  }\n\n  @include chip();\n\n  .slot-container {\n    @include ellipsis;\n  }\n}\n\n:host(.inactive) {\n  pointer-events: none;\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} from '@stencil/core';\n\n@Component({\n  tag: 'ix-chip',\n  styleUrl: 'chip.scss',\n  scoped: true,\n})\nexport class Chip {\n  @Element() el: HTMLIxChipElement;\n\n  /**\n   * Chip variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)\n   * will be possible and also the close button will not be present.\n   */\n  @Prop() active = true;\n\n  /**\n   * Show close icon\n   */\n  @Prop() closable = false;\n\n  /**\n   * Show icon\n   */\n  @Prop() icon: string | undefined;\n\n  /**\n   * Custom color for pill. Only working for `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   */\n  @Prop() color: string | undefined;\n\n  /**\n   * Show chip with outline style\n   */\n  @Prop() outline = false;\n\n  /**\n   * Fire event if close button is clicked\n   */\n  @Event() close: EventEmitter;\n\n  private getCloseButton() {\n    return (\n      <div class=\"close-button-container\">\n        <button\n          type=\"button\"\n          class=\"btn btn-invisible-secondary btn-icon btn-oval close-button\"\n          onClick={(event) => this.close.emit(event)}\n        >\n          {this.variant === 'custom' ? (\n            <i\n              class=\"glyph glyph-16 glyph-close-small\"\n              style={{ color: this.color }}\n            />\n          ) : (\n            <ix-icon name={'close-small'} size={'16'} />\n          )}\n        </button>\n      </div>\n    );\n  }\n\n  render() {\n    const isInactive = this.active === false;\n\n    let customStyle = {};\n\n    if (this.variant === 'custom' && this.outline === false) {\n      customStyle = {\n        color: this.color,\n        backgroundColor: this.background,\n      };\n    }\n\n    if (this.variant === 'custom' && this.outline === true) {\n      customStyle = {\n        color: this.color,\n        borderColor: this.background,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          outline: this.outline,\n          inactive: isInactive,\n        }}\n        tabIndex=\"-1\"\n        title={this.el.textContent}\n        style={{ ...customStyle }}\n      >\n        <ix-icon\n          class={{\n            'with-icon': true,\n            hidden: this.icon === undefined || this.icon === '',\n          }}\n          name={this.icon}\n          size={'24'}\n        />\n        <span class=\"slot-container\">\n          <slot></slot>\n        </span>\n        {isInactive === false && this.closable ? this.getCloseButton() : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-chip.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,00YAA00Y;;MCwB70Y,IAAI;;;;;;mBAcA,SAAS;kBAMP,IAAI;oBAKF,KAAK;;;;mBAoBN,KAAK;;EAgBf,cAAc;IACpB,QACE,WAAK,KAAK,EAAC,wBAAwB,IACjC,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,4DAA4D,EAClE,OAAO,EAAE,CAAC,KAAK;QACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,KAAK,CAAC,eAAe,EAAE,CAAC;OACzB,IAEA,IAAI,CAAC,OAAO,KAAK,QAAQ,IACxB,SACE,KAAK,EAAC,kCAAkC,EACxC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAC5B,KAEF,eAAS,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,GAAI,CAC7C,CACM,CACL,EACN;GACH;EAED,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,CAAC;IAEzC,IAAI,WAAW,GAAG,EAAE,CAAC;IAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE;MACvD,WAAW,GAAG;QACZ,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,eAAe,EAAE,IAAI,CAAC,UAAU;OACjC,CAAC;KACH;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;MACtD,WAAW,GAAG;QACZ,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,WAAW,EAAE,IAAI,CAAC,UAAU;OAC7B,CAAC;KACH;IAED,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,QAAQ,EAAE,UAAU;OACrB,EACD,QAAQ,EAAC,IAAI,EACb,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,EAC1B,KAAK,oBAAO,WAAW,KAEvB,eACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;OACpD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV,EACF,YAAM,KAAK,EAAC,gBAAgB,IAC1B,eAAa,CACR,EACN,UAAU,KAAK,KAAK,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAChE,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/chip/chip.scss?tag=ix-chip&encapsulation=scoped","./src/components/chip/chip.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 './chip-mixin';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n$border-radius: 100px;\n\n:host {\n  display: inline-flex;\n  width: fit-content;\n  position: relative;\n  align-items: center;\n  border-radius: $border-radius;\n  padding: $small-space $medium-space;\n\n  height: $default-control-height;\n  max-height: $default-control-height;\n\n  cursor: pointer;\n\n  .with-icon {\n    margin-right: $tiny-space;\n  }\n\n  .hidden {\n    width: 0px;\n    margin-right: 0px;\n  }\n\n  margin-left: $tiny-space;\n\n  .close-button-container {\n    display: inline-flex;\n    flex-grow: 1;\n    margin-left: $medium-space;\n  }\n\n  .close-button {\n    position: relative;\n    width: $default-space;\n    height: $default-space;\n    min-width: unset;\n    min-height: unset;\n    margin-left: auto;\n    margin-right: 0;\n  }\n\n  @include chip();\n\n  .slot-container {\n    @include ellipsis;\n  }\n}\n\n:host(.inactive) {\n  pointer-events: none;\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} from '@stencil/core';\n\n@Component({\n  tag: 'ix-chip',\n  styleUrl: 'chip.scss',\n  scoped: true,\n})\nexport class Chip {\n  @Element() el: HTMLIxChipElement;\n\n  /**\n   * Chip variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)\n   * will be possible and also the close button will not be present.\n   */\n  @Prop() active = true;\n\n  /**\n   * Show close icon\n   */\n  @Prop() closable = false;\n\n  /**\n   * Show icon\n   */\n  @Prop() icon: string | undefined;\n\n  /**\n   * Custom color for pill. Only working for `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   */\n  @Prop() color: string | undefined;\n\n  /**\n   * Show chip with outline style\n   */\n  @Prop() outline = false;\n\n  /**\n   * Fire event if close button is clicked\n   *\n   *  @deprecated Will be removed in 2.0.0. Use `closeChip`\n   */\n  @Event() close: EventEmitter;\n\n  /**\n   * Fire event if close button is clicked\n   *\n   * @since 1.5.0\n   */\n  @Event() closeChip: EventEmitter;\n\n  private getCloseButton() {\n    return (\n      <div class=\"close-button-container\">\n        <button\n          type=\"button\"\n          class=\"btn btn-invisible-secondary btn-icon btn-oval close-button\"\n          onClick={(event) => {\n            this.close.emit(event);\n            this.closeChip.emit(event);\n            event.stopPropagation();\n          }}\n        >\n          {this.variant === 'custom' ? (\n            <i\n              class=\"glyph glyph-16 glyph-close-small\"\n              style={{ color: this.color }}\n            />\n          ) : (\n            <ix-icon name={'close-small'} size={'16'} />\n          )}\n        </button>\n      </div>\n    );\n  }\n\n  render() {\n    const isInactive = this.active === false;\n\n    let customStyle = {};\n\n    if (this.variant === 'custom' && this.outline === false) {\n      customStyle = {\n        color: this.color,\n        backgroundColor: this.background,\n      };\n    }\n\n    if (this.variant === 'custom' && this.outline === true) {\n      customStyle = {\n        color: this.color,\n        borderColor: this.background,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          outline: this.outline,\n          inactive: isInactive,\n        }}\n        tabIndex=\"-1\"\n        title={this.el.textContent}\n        style={{ ...customStyle }}\n      >\n        <ix-icon\n          class={{\n            'with-icon': true,\n            hidden: this.icon === undefined || this.icon === '',\n          }}\n          name={this.icon}\n          size={'24'}\n        />\n        <span class=\"slot-container\">\n          <slot></slot>\n        </span>\n        {isInactive === false && this.closable ? this.getCloseButton() : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-counter-pill.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const counterPillCss = ".sc-ix-counter-pill-h{display:inline-flex;width:-moz-fit-content;width:fit-content;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)}[variant=custom].outline.sc-ix-counter-pill-h{border:solid 1px transparent;background-color:transparent}.sc-ix-counter-pill-h .slot.sc-ix-counter-pill{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-counter-pill-h .hidden.sc-ix-counter-pill{width:0px;margin-right:0px}.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const CounterPill = /*@__PURE__*/ proxyCustomElement(class CounterPill extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

package/dist/components/ix-datetime-picker.js

@@ -7,9 +7,9 @@ import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './time-picker.js';
 
-const datetimePickerCss = ".sc-ix-datetime-picker-h{display:block;background-color:var(--theme-menu--background);border-radius:4px}.flex.sc-ix-datetime-picker{display:flex;justify-content:center}.done.sc-ix-datetime-picker{display:inline-flex;justify-content:flex-end;padding:1rem;width:100%}.separator.sc-ix-datetime-picker{border:1px solid var(--theme-datepicker-separator--background);width:100%;margin-top:72px;height:1px}";
+const datetimePickerCss = ".sc-ix-datetime-picker-h{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:32.6875rem}.flex.sc-ix-datetime-picker{display:flex;justify-content:center}.btn-select-date.sc-ix-datetime-picker{position:absolute;bottom:1rem;right:1rem}.separator.sc-ix-datetime-picker{border:1px solid var(--theme-datepicker-separator--background);width:100%;margin-top:72px;height:1px}";
 
-const DateTimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const DateTimePicker = /*@__PURE__*/ proxyCustomElement(class DateTimePicker extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -65,7 +65,7 @@ const DateTimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this._time = this.time;
   }
   render() {
-    return (h(Host, null, h("div", { class: "flex" }, h("div", { class: "separator" }), h("ix-date-picker", { ref: (ref) => (this.datePickerElement = ref), corners: "left", individual: false, range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, eventDelimiter: this.eventDelimiter }), h("ix-time-picker", { ref: (ref) => (this.timePickerElement = ref), corners: "right", individual: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, showTimeReference: this.showTimeReference, onTimeChange: (event) => this.onTimeChange(event), time: this.time, format: this.timeFormat, timeReference: this.timeReference }), h("div", { class: "separator" })), h("div", { class: "done" }, h("ix-button", { onClick: () => this.onDone() }, this.textSelectDate))));
+    return (h(Host, null, h("div", { class: "flex" }, h("div", { class: "separator" }), h("ix-date-picker", { ref: (ref) => (this.datePickerElement = ref), corners: "left", individual: false, range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, eventDelimiter: this.eventDelimiter }), h("ix-time-picker", { ref: (ref) => (this.timePickerElement = ref), corners: "right", individual: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, showTimeReference: this.showTimeReference, onTimeChange: (event) => this.onTimeChange(event), time: this.time, format: this.timeFormat, timeReference: this.timeReference }), h("div", { class: "separator" })), h("ix-button", { class: "btn-select-date", onClick: () => this.onDone() }, this.textSelectDate)));
   }
   static get style() { return datetimePickerCss; }
 }, [2, "ix-datetime-picker", {

package/dist/components/ix-datetime-picker.js.map

@@ -1 +1 @@
-{"file":"ix-datetime-picker.js","mappings":"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","names":[],"sources":["./src/components/datetime-picker/datetime-picker.scss?tag=ix-datetime-picker&encapsulation=scoped","./src/components/datetime-picker/datetime-picker.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\n:host {\n  display: block;\n  background-color: var(--theme-menu--background);\n  border-radius: 4px;\n}\n\n.flex {\n  display: flex;\n  justify-content: center;\n}\n\n.done {\n  display: inline-flex;\n  justify-content: flex-end;\n  padding: $default-space;\n  width: 100%;\n}\n\n.separator {\n  border: 1px solid var(--theme-datepicker-separator--background);\n  width: 100%;\n  margin-top: 72px;\n  height: 1px;\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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { DateChangeEvent } from 'src/components';\n\nexport type DateTimeSelectEvent = {\n  from: string;\n  to: string;\n  time: string;\n};\n\nexport type DateTimeDateChangeEvent =\n  | string\n  | Omit<DateTimeSelectEvent, 'time'>;\n\n@Component({\n  tag: 'ix-datetime-picker',\n  styleUrl: 'datetime-picker.scss',\n  scoped: true,\n})\nexport class DateTimePicker {\n  /**\n   * Set range size\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = false;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = false;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = false;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n  /**\n   * Time format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() timeFormat: string = 'TT';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | null = null;\n\n  /**\n   * Select time with format string\n   *\n   * @since 1.1.0\n   */\n  @Prop() time: string;\n\n  /**\n   * Show time reference input\n   * Time reference is default aligned with @see {this.timeFormat}\n   *\n   * @since 1.1.0\n   */\n  @Prop() showTimeReference = undefined;\n\n  /**\n   * Default behavior of the done event is to join the two events (date and time) into one combined string output.\n   * This combination can be configured over the delimiter\n   *\n   * @since 1.1.0\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectDate = 'Done';\n\n  /**\n   * Done event\n   *\n   * Set `doneEventDelimiter` to null or undefine to get the typed event\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Time change\n   *\n   * @since 1.1.0\n   */\n  @Event() timeChange: EventEmitter<string>;\n\n  /**\n   * Date change\n   *\n   * @since 1.1.0\n   */\n  @Event() dateChange: EventEmitter<DateTimeDateChangeEvent>;\n\n  /**\n   * Date selection event is fired after confirm button is pressend\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement: HTMLIxDatePickerElement;\n  private timePickerElement: HTMLIxTimePickerElement;\n\n  private _from: string;\n  private _to: string;\n  private _time: string;\n\n  private onDone() {\n    this.done.emit(\n      [this._from, this._to ?? '', this._time].join(this.eventDelimiter)\n    );\n\n    this.dateSelect.emit({\n      from: this._from,\n      to: this._to,\n      time: this._time,\n    });\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n\n    const currentDateTime = await this.datePickerElement.getCurrentDate();\n    this._from = currentDateTime.start;\n    this._to = currentDateTime.end;\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n\n    const currentDateTime = await this.timePickerElement.getCurrentTime();\n    this._time = currentDateTime;\n  }\n\n  componentDidLoad() {\n    this._from = this.from;\n    this._to = this.to;\n    this._time = this.time;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"flex\">\n          <div class=\"separator\"></div>\n          <ix-date-picker\n            ref={(ref) => (this.datePickerElement = ref)}\n            corners=\"left\"\n            individual={false}\n            range={this.range}\n            onDateChange={(event) => this.onDateChange(event)}\n            from={this.from}\n            to={this.to}\n            format={this.dateFormat}\n            minDate={this.minDate}\n            maxDate={this.maxDate}\n            eventDelimiter={this.eventDelimiter}\n          ></ix-date-picker>\n\n          <ix-time-picker\n            ref={(ref) => (this.timePickerElement = ref)}\n            corners=\"right\"\n            individual={false}\n            showHour={this.showHour}\n            showMinutes={this.showMinutes}\n            showSeconds={this.showSeconds}\n            showTimeReference={this.showTimeReference}\n            onTimeChange={(event) => this.onTimeChange(event)}\n            time={this.time}\n            format={this.timeFormat}\n            timeReference={this.timeReference}\n          ></ix-time-picker>\n          <div class=\"separator\"></div>\n        </div>\n\n        <div class=\"done\">\n          <ix-button onClick={() => this.onDone()}>\n            {this.textSelectDate}\n          </ix-button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-datetime-picker.js","mappings":"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","names":[],"sources":["./src/components/datetime-picker/datetime-picker.scss?tag=ix-datetime-picker&encapsulation=scoped","./src/components/datetime-picker/datetime-picker.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\n:host {\n  display: block;\n  background-color: var(--theme-menu--background);\n  border-radius: 4px;\n  position: relative;\n  width: 32.6875rem;\n}\n\n.flex {\n  display: flex;\n  justify-content: center;\n}\n\n.btn-select-date{\n  position: absolute;\n  bottom: $default-space;\n  right: $default-space;\n}\n\n.separator {\n  border: 1px solid var(--theme-datepicker-separator--background);\n  width: 100%;\n  margin-top: 72px;\n  height: 1px;\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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { DateChangeEvent } from 'src/components';\n\nexport type DateTimeSelectEvent = {\n  from: string;\n  to: string;\n  time: string;\n};\n\nexport type DateTimeDateChangeEvent =\n  | string\n  | Omit<DateTimeSelectEvent, 'time'>;\n\n@Component({\n  tag: 'ix-datetime-picker',\n  styleUrl: 'datetime-picker.scss',\n  scoped: true,\n})\nexport class DateTimePicker {\n  /**\n   * Set range size\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = false;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = false;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = false;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n  /**\n   * Time format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() timeFormat: string = 'TT';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | null = null;\n\n  /**\n   * Select time with format string\n   *\n   * @since 1.1.0\n   */\n  @Prop() time: string;\n\n  /**\n   * Show time reference input\n   * Time reference is default aligned with @see {this.timeFormat}\n   *\n   * @since 1.1.0\n   */\n  @Prop() showTimeReference = undefined;\n\n  /**\n   * Default behavior of the done event is to join the two events (date and time) into one combined string output.\n   * This combination can be configured over the delimiter\n   *\n   * @since 1.1.0\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectDate = 'Done';\n\n  /**\n   * Done event\n   *\n   * Set `doneEventDelimiter` to null or undefine to get the typed event\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Time change\n   *\n   * @since 1.1.0\n   */\n  @Event() timeChange: EventEmitter<string>;\n\n  /**\n   * Date change\n   *\n   * @since 1.1.0\n   */\n  @Event() dateChange: EventEmitter<DateTimeDateChangeEvent>;\n\n  /**\n   * Date selection event is fired after confirm button is pressend\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement: HTMLIxDatePickerElement;\n  private timePickerElement: HTMLIxTimePickerElement;\n\n  private _from: string;\n  private _to: string;\n  private _time: string;\n\n  private onDone() {\n    this.done.emit(\n      [this._from, this._to ?? '', this._time].join(this.eventDelimiter)\n    );\n\n    this.dateSelect.emit({\n      from: this._from,\n      to: this._to,\n      time: this._time,\n    });\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n\n    const currentDateTime = await this.datePickerElement.getCurrentDate();\n    this._from = currentDateTime.start;\n    this._to = currentDateTime.end;\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n\n    const currentDateTime = await this.timePickerElement.getCurrentTime();\n    this._time = currentDateTime;\n  }\n\n  componentDidLoad() {\n    this._from = this.from;\n    this._to = this.to;\n    this._time = this.time;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"flex\">\n          <div class=\"separator\"></div>\n          <ix-date-picker\n            ref={(ref) => (this.datePickerElement = ref)}\n            corners=\"left\"\n            individual={false}\n            range={this.range}\n            onDateChange={(event) => this.onDateChange(event)}\n            from={this.from}\n            to={this.to}\n            format={this.dateFormat}\n            minDate={this.minDate}\n            maxDate={this.maxDate}\n            eventDelimiter={this.eventDelimiter}\n          ></ix-date-picker>\n\n          <ix-time-picker\n            ref={(ref) => (this.timePickerElement = ref)}\n            corners=\"right\"\n            individual={false}\n            showHour={this.showHour}\n            showMinutes={this.showMinutes}\n            showSeconds={this.showSeconds}\n            showTimeReference={this.showTimeReference}\n            onTimeChange={(event) => this.onTimeChange(event)}\n            time={this.time}\n            format={this.timeFormat}\n            timeReference={this.timeReference}\n          ></ix-time-picker>\n          <div class=\"separator\"></div>\n        </div>\n\n        <ix-button class=\"btn-select-date\" onClick={() => this.onDone()}>\n          {this.textSelectDate}\n        </ix-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-divider.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const dividerCss = ":host{display:block;position:relative;width:100%;border:0.0625rem solid var(--theme-color-x-weak-bdr);margin:0.25rem 0px}";
 
-const Divider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

package/dist/components/ix-drawer.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$2 } from './icon-button.js';
 
 const drawerCss = ".drawer-container.sc-ix-drawer{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);visibility:hidden;display:flex;position:absolute;flex-flow:column nowrap;justify-content:flex-start;align-items:center;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;transition:all 300ms ease-out}.toggle.sc-ix-drawer{z-index:100;visibility:visible}.drawer-container.full-height.sc-ix-drawer{min-height:100%}.header.sc-ix-drawer{display:flex;position:relative;align-items:center;justify-content:flex-end;height:3.5rem;padding:0.5rem 1rem;width:100%;order:1}.header.sc-ix-drawer .header-content.sc-ix-drawer{flex-grow:1;margin-right:1rem}.content.sc-ix-drawer{position:relative;flex:1;flex-grow:1;order:2;height:100%;width:100%;overflow-y:auto}";
 
-const Drawer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

package/dist/components/ix-dropdown-button.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$2 } from './icon-button.js';
 
 const dropdownButtonCss = ".sc-ix-dropdown-button-h{display:inline-block;position:relative;height:2rem;width:auto}.disabled.sc-ix-dropdown-button-h{pointer-events:none}.sc-ix-dropdown-button-h .hide.sc-ix-dropdown-button{display:none}.sc-ix-dropdown-button-h .dropdown-button.sc-ix-dropdown-button{display:block;position:relative;width:100%;height:100%}.sc-ix-dropdown-button-h .dropdown-button.sc-ix-dropdown-button>ix-button.sc-ix-dropdown-button{width:100%;height:100%}.sc-ix-dropdown-button-h .dropdown-button.sc-ix-dropdown-button .button-label.sc-ix-dropdown-button{margin-right:auto}.sc-ix-dropdown-button-h .triangle.sc-ix-dropdown-button{position:absolute;-webkit-margin-start:1.5625rem;margin-inline-start:1.5625rem;-webkit-margin-before:-0.4375rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}.sc-ix-dropdown-button-h .triangle.primary.ghost.sc-ix-dropdown-button{color:var(--theme-btn-invisible-primary--color)}.sc-ix-dropdown-button-h .triangle.primary.outline.sc-ix-dropdown-button{color:var(--theme-btn-outline-primary--color)}.sc-ix-dropdown-button-h .triangle.primary.ghost.disabled.sc-ix-dropdown-button{color:var(--theme-btn-invisible-primary--color--disabled)}.sc-ix-dropdown-button-h .triangle.primary.outline.disabled.sc-ix-dropdown-button{color:var(--theme-btn-outline-primary--color--disabled)}.sc-ix-dropdown-button-h .triangle.primary.disabled.sc-ix-dropdown-button{color:var(--theme-btn-primary--color--disabled)}.sc-ix-dropdown-button-h .triangle.secondary.ghost.sc-ix-dropdown-button{color:var(--theme-btn-invisible-secondary--color)}.sc-ix-dropdown-button-h .triangle.secondary.outline.sc-ix-dropdown-button{color:var(--theme-btn-outline-secondary--color)}.sc-ix-dropdown-button-h .triangle.secondary.ghost.disabled.sc-ix-dropdown-button{color:var(--theme-btn-invisible-secondary--color--disabled)}.sc-ix-dropdown-button-h .triangle.secondary.outline.disabled.sc-ix-dropdown-button{color:var(--theme-btn-outline-secondary--color--disabled)}.sc-ix-dropdown-button-h .triangle.secondary.disabled.sc-ix-dropdown-button{color:var(--theme-btn-secondary--color--disabled)}.sc-ix-dropdown-button-h .dropdown.sc-ix-dropdown-button{width:auto !important;inset:auto !important;transform:unset !important}";
 
-const DropdownButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const DropdownButton = /*@__PURE__*/ proxyCustomElement(class DropdownButton extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

package/dist/components/ix-dropdown-quick-actions.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const dropdownQuickActionsCss = ":host{display:flex;justify-content:center;align-items:center;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem;-webkit-margin-end:1.5rem;margin-inline-end:1.5rem;-webkit-margin-after:0.25rem;margin-block-end:0.25rem}:host slot::slotted(*){display:flex;-webkit-margin-end:0.625rem;margin-inline-end:0.625rem}";
 
-const DropdownQuickActions = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const DropdownQuickActions = /*@__PURE__*/ proxyCustomElement(class DropdownQuickActions extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

package/dist/components/ix-event-list-item.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 
 const eventListItemCss = ".ix-event-list-item{display:flex;align-items:center;position:relative;height:2.5rem;max-height:2.5rem;border-radius:0.25rem;background-color:var(--theme-event-item--background);overflow:hidden;transition:150ms;cursor:pointer;margin-bottom:0.5rem}.ix-event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.ix-event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}.ix-event-list-item .event-list-item-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-item--border);border-top-left-radius:0;border-top-right-radius:0.25rem;border-bottom-left-radius:0;border-bottom-right-radius:0.25rem;border-left:none;padding-left:1rem}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-event-item--background--hover)}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled):active{background-color:var(--theme-event-item--background--active)}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover{border-color:var(--theme-event-item--border--hover)}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):active{border-color:var(--theme-event-item--border--active)}.ix-event-list-item.selected .event-list-item-container{background-color:var(--theme-event-item--background--selected);border-color:var(--theme-event-item--border--selected)}.ix-event-list-item[disabled],.ix-event-list-item.disabled{pointer-events:none}.ix-event-list-item[disabled] .event-list-item-container,.ix-event-list-item.disabled .event-list-item-container{background-color:var(--theme-event-item--background--disabled);border-color:var(--theme-event-item--border--disabled)}.ix-event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}.ix-event-list-item .event-content{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}";
 
-const EventListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const EventListItem = /*@__PURE__*/ proxyCustomElement(class EventListItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

package/dist/components/ix-event-list.js

@@ -4,7 +4,7 @@ import { a as convertToRemString } from './rwd.util.js';
 
 const eventListCss = ".sc-ix-event-list-h{display:block;position:relative}ul.sc-ix-event-list{list-style:none;padding:0;margin-bottom:0}.sc-ix-event-list-s>.sc-ix-event-list-h:not(.item-size-s) .ix-event-list-item,.sc-ix-event-list-h:not(.item-size-l) .ix-event-list-item.sc-ix-event-list{display:none}.sc-ix-event-list-h.chevron .sc-ix-event-list-s .ix-event-list-item .chevron-icon{display:initial}.item-size-l .sc-ix-event-list-s .ix-event-list-item{height:6.5rem;max-height:6.5rem}.item-size-l .sc-ix-event-list-s .ix-event-list-item .event-content{height:6.5rem;max-height:6.5rem;white-space:normal}.compact .sc-ix-event-list-s .ix-event-list-item{margin-bottom:0px;border-radius:0px}.compact .sc-ix-event-list-s .ix-event-list-item .indicator{border-top-left-radius:0px;border-bottom-left-radius:0px}.compact .sc-ix-event-list-s .ix-event-list-item .event-list-item-container{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.compact.sc-ix-event-list .compact.sc-ix-event-list:not(:last-child) .event-list-item-container.sc-ix-event-list{border-bottom:none}";
 
-const EventList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const EventList = /*@__PURE__*/ proxyCustomElement(class EventList extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

package/dist/components/ix-expanding-search.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$2 } from './icon-button.js';
 
 const expandingSearchCss = ".sc-ix-expanding-search-h{display:inline-flex;width:auto;height:2rem;align-items:center;justify-content:space-between}.right-position.sc-ix-expanding-search-h{width:11.5625rem !important}.sc-ix-expanding-search-h .input-container.sc-ix-expanding-search{transition:all 0.3s ease-in-out}.sc-ix-expanding-search-h .disable-pointer.sc-ix-expanding-search{pointer-events:none}.sc-ix-expanding-search-h input.sc-ix-expanding-search{box-shadow:var(--theme-input--box-shadow)}.sc-ix-expanding-search-h .expanded.sc-ix-expanding-search{width:11.5625rem}.sc-ix-expanding-search-h .collapsed.sc-ix-expanding-search{width:1.5rem;border:none}.sc-ix-expanding-search-h .btn-search-icon.sc-ix-expanding-search{align-self:center;margin:auto;position:relative}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search{display:flex;max-width:2rem;max-height:2rem;border-radius:var(--theme-input--border-radius);transition:all 0.15s ease-in-out;z-index:1;align-items:center;position:relative;border:none}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):hover{border-color:transparent}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):active{border-color:transparent}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):focus-visible{outline:none}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):focus-visible{outline:var(--focus--border-color);outline-width:1px;outline-style:solid}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:active{width:2rem;height:2rem;border-radius:var(--theme-input--border-radius);border:var(--theme-std-bdr-1) !important}.sc-ix-expanding-search-h .input-container.sc-ix-expanding-search{display:flex;position:absolute;align-items:center;flex-wrap:nowrap}.sc-ix-expanding-search-h .btn-clear.sc-ix-expanding-search{position:absolute;border-radius:var(--theme-input--border-radius);right:0px;margin-right:0.25rem}.sc-ix-expanding-search-h .input.sc-ix-expanding-search{padding-left:2rem !important;padding-right:2.5rem !important}.sc-ix-expanding-search-h .opacity-before.sc-ix-expanding-search{opacity:0}.sc-ix-expanding-search-h .opacity-after.sc-ix-expanding-search{opacity:1}";
 
-const ExpandingSearch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const ExpandingSearch = /*@__PURE__*/ proxyCustomElement(class ExpandingSearch extends HTMLElement {
   expandInput() {
     setTimeout(this.focusTextInput, 300);
     this.expanded = true;

package/dist/components/ix-flip-tile-content.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const flipTileContentCss = ":host{display:block}";
 
-const FlipTileContent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const FlipTileContent = /*@__PURE__*/ proxyCustomElement(class FlipTileContent extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

package/dist/components/ix-flip-tile.js

@@ -3,9 +3,9 @@ import { F as FlipTileState } from './flip-tile-state.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 
-const flipTileCss = "@keyframes flip-animation{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}51%{transform:rotateY(270deg)}100%{transform:rotateY(360deg)}}.sc-ix-flip-tile-h{display:flex;flex-direction:column;width:16rem;min-width:16rem;max-width:16rem;height:15.125rem;perspective:1000px}.sc-ix-flip-tile-h .flip-tile-header.sc-ix-flip-tile{display:flex;align-items:center;height:2.5rem;padding:0 0.5rem 0 1rem}.sc-ix-flip-tile-h .flip-tile-header.sc-ix-flip-tile .header-slot-container.sc-ix-flip-tile{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;min-width:0}.sc-ix-flip-tile-h .content-container.sc-ix-flip-tile{flex-grow:1;margin:1rem}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile{display:flex;flex-direction:column;height:100%;background-color:var(--theme-blind-base--background);border:solid 1px var(--theme-blind-base--border-color);border-radius:var(--theme-flip-tile--border-radius) var(--theme-flip-tile--border-radius) 0 0;transform-style:preserve-3d}.sc-ix-flip-tile-h .flip-tile-container.flip-animation-active.sc-ix-flip-tile{animation:flip-animation 300ms, ease-in-out}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile{display:flex;height:3rem;align-items:center;justify-content:center;padding:0 0.5rem;color:var(--theme-flip-footer--color);background-color:var(--theme-blind-base--background)}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile .sc-ix-flip-tile:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%}.sc-ix-flip-tile-h .flip-tile-container .sc-ix-flip-tile-s>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;align-items:center;min-width:0}.sc-ix-flip-tile-h .flip-tile-container.primary.sc-ix-flip-tile{border-color:var(--theme-color-primary)}.sc-ix-flip-tile-h .flip-tile-container.primary.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-primary);color:var(--theme-color-primary--contrast)}.sc-ix-flip-tile-h .flip-tile-container.info.sc-ix-flip-tile{border-color:var(--theme-color-info)}.sc-ix-flip-tile-h .flip-tile-container.info.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-info);color:var(--theme-color-info--contrast)}.sc-ix-flip-tile-h .flip-tile-container.warning.sc-ix-flip-tile{border-color:var(--theme-color-warning)}.sc-ix-flip-tile-h .flip-tile-container.warning.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}.sc-ix-flip-tile-h .flip-tile-container.alarm.sc-ix-flip-tile{border-color:var(--theme-color-alarm)}.sc-ix-flip-tile-h .flip-tile-container.alarm.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}.sc-ix-flip-tile-h:hover .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile ix-icon.sc-ix-flip-tile{color:var(--theme-color-std-text)}";
+const flipTileCss = "@keyframes flip-animation{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}51%{transform:rotateY(270deg)}100%{transform:rotateY(360deg)}}.sc-ix-flip-tile-h{display:flex;flex-direction:column;perspective:1000px}.sc-ix-flip-tile-h .flip-tile-header.sc-ix-flip-tile{display:flex;align-items:center;height:2.5rem;padding:0 0.5rem 0 1rem}.sc-ix-flip-tile-h .flip-tile-header.sc-ix-flip-tile .header-slot-container.sc-ix-flip-tile{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;min-width:0}.sc-ix-flip-tile-h .content-container.sc-ix-flip-tile{flex-grow:1;margin:1rem}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile{display:flex;flex-direction:column;height:100%;background-color:var(--theme-blind-base--background);border:solid 1px var(--theme-blind-base--border-color);border-radius:var(--theme-flip-tile--border-radius) var(--theme-flip-tile--border-radius) 0 0;transform-style:preserve-3d}.sc-ix-flip-tile-h .flip-tile-container.flip-animation-active.sc-ix-flip-tile{animation:flip-animation 300ms, ease-in-out}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile{display:flex;height:3rem;align-items:center;justify-content:center;padding:0 0.5rem;color:var(--theme-flip-footer--color);background-color:var(--theme-blind-base--background)}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile .sc-ix-flip-tile:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%}.sc-ix-flip-tile-h .flip-tile-container .sc-ix-flip-tile-s>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;align-items:center;min-width:0}.sc-ix-flip-tile-h .flip-tile-container.primary.sc-ix-flip-tile{border-color:var(--theme-color-primary)}.sc-ix-flip-tile-h .flip-tile-container.primary.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-primary);color:var(--theme-color-primary--contrast)}.sc-ix-flip-tile-h .flip-tile-container.info.sc-ix-flip-tile{border-color:var(--theme-color-info)}.sc-ix-flip-tile-h .flip-tile-container.info.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-info);color:var(--theme-color-info--contrast)}.sc-ix-flip-tile-h .flip-tile-container.warning.sc-ix-flip-tile{border-color:var(--theme-color-warning)}.sc-ix-flip-tile-h .flip-tile-container.warning.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}.sc-ix-flip-tile-h .flip-tile-container.alarm.sc-ix-flip-tile{border-color:var(--theme-color-alarm)}.sc-ix-flip-tile-h .flip-tile-container.alarm.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}.sc-ix-flip-tile-h:hover .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile ix-icon.sc-ix-flip-tile{color:var(--theme-color-std-text)}";
 
-const FlipTile = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const FlipTile = /*@__PURE__*/ proxyCustomElement(class FlipTile extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -14,6 +14,8 @@ const FlipTile = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.isFlipAnimationActive = undefined;
     this.state = undefined;
     this.footer = undefined;
+    this.height = 15.125;
+    this.width = 16;
   }
   componentDidLoad() {
     this.contentItems = this.contentContainerElement.querySelectorAll('ix-flip-tile-content');
@@ -47,7 +49,14 @@ const FlipTile = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }, 2 * this.ANIMATION_DURATION);
   }
   render() {
-    return (h(Host, null, h("div", { class: {
+    return (h(Host, { style: {
+        height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
+        'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
+        'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
+        width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
+        'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
+        'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
+      } }, h("div", { class: {
         'flip-tile-container': true,
         info: this.state === FlipTileState.Info,
         warning: this.state === FlipTileState.Warning,
@@ -66,6 +75,8 @@ const FlipTile = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
 }, [6, "ix-flip-tile", {
     "state": [1],
     "footer": [1],
+    "height": [8],
+    "width": [8],
     "index": [32],
     "isFlipAnimationActive": [32]
   }]);