@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/components/select.js.map

@@ -1 +0,0 @@
-{"file":"select.js","mappings":"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","names":[],"sources":["./src/components/select/select.scss?tag=ix-select&encapsulation=scoped","./src/components/select/select.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/text-truncation';\n\n:host {\n  display: inline-block;\n  position: relative;\n  height: auto;\n  border-radius: var(--theme-input--border-radius);\n\n  .d-none {\n    display: none;\n  }\n\n  .select {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: auto;\n    background-color: var(--theme-input--background);\n    border: var(--theme-input--border-thickness) solid\n      var(--theme-input--border-color);\n    border-radius: var(--theme-input--border-radius);\n    padding: 0 0 0 $small-space;\n    box-shadow: var(--theme-inset-shadow-1) !important;\n\n    @include hover {\n      background-color: var(--theme-input--background--hover);\n      border-color: var(--theme-input--border-color--hover);\n    }\n\n    &:focus-within {\n      background-color: var(--theme-input--background--focus);\n      border-color: var(--theme-input--border-color--focus);\n      outline: 1px solid #119fff !important;\n      outline-offset: var(--theme-input--focus--outline-offset);\n    }\n  }\n\n  .select.readonly {\n    box-shadow: none !important;\n  }\n\n  .hidden {\n    display: none !important;\n  }\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n  }\n\n  .input-container {\n    display: flex;\n    position: relative;\n    align-items: flex-start;\n    width: 100%;\n\n    .chips {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      height: 100%;\n      max-height: 3.5rem;\n      flex-grow: 1;\n      overflow-y: auto;\n\n      > ix-filter-chip {\n        margin: 0.1rem;\n      }\n    }\n\n    input {\n      @include ellipsis;\n      @include text-default;\n      background: transparent;\n      height: 1.75rem;\n      width: 100%;\n\n      &,\n      &:hover,\n      &:focus-visible {\n        border: none;\n        outline: none;\n      }\n\n      &::placeholder {\n        color: var(--theme-input-select-icon--color);\n      }\n\n      &.hide-placeholder::placeholder {\n        opacity: 0;\n      }\n    }\n  }\n\n  .chevron-down-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    min-width: 2rem;\n    height: 2rem;\n\n    @include hover {\n      color: var(--theme-color-dynamic--hover);\n    }\n\n    @include active {\n      color: var(--theme-color-dynamic--hover);\n    }\n  }\n\n  .editable {\n    .chevron-down-container {\n      @include hover {\n        color: var(--theme-color-std-text);\n        background-color: var(\n          --theme-btn-invisible-secondary--background--hover\n        );\n      }\n\n      @include active {\n        color: var(--theme-color-std-text);\n        background-color: var(\n          --theme-btn-invisible-secondary--background--active\n        );\n      }\n    }\n  }\n\n  .add-item {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    position: relative;\n    width: 100%;\n  }\n\n  .select-list-header {\n    @include ellipsis;\n    display: flex;\n    align-items: center;\n    height: $default-control-height;\n    color: var(--theme-select-list-item-hint--color);\n    margin: 0 $small-space 0 1rem;\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  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\n\n@Component({\n  tag: 'ix-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select {\n  @Element() hostElement!: HTMLIxSelectElement;\n\n  /**\n   * Indices of selected items\n   * This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.\n   */\n  @Prop({ mutable: true }) selectedIndices: string | string[] = [];\n\n  /**\n   * Show clear button\n   */\n  @Prop() allowClear = false;\n\n  /**\n   * Selection mode\n   */\n  @Prop() mode: 'single' | 'multiple' = 'single';\n\n  /**\n   * Select is extendable\n   */\n  @Prop() editable = false;\n\n  /**\n   * If true the select will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the select will be in readonly mode\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Input field placeholder\n   */\n  @Prop() i18nPlaceholder = 'Select an option';\n\n  /**\n   * Input field placeholder for editable select\n   */\n  @Prop() i18nPlaceholderEditable = 'Type of select option';\n\n  /**\n   * Select list header\n   */\n  @Prop() i18nSelectListHeader = 'Please select an option';\n\n  /**\n   * Hint inside of dropdown if no items where found with current filter text\n   *\n   * @since 1.5.0\n   */\n  @Prop() i18nNoMatches = 'No matches';\n\n  /**\n   * Hide list header\n   *\n   * @since 1.5.0\n   @\n   */\n  @Prop() hideListHeader = false;\n\n  /**\n   * Item selection changed\n   */\n  @Event() itemSelectionChange: EventEmitter<string | string[]>;\n\n  /**\n   * Event dispatched whenever the text input changes.\n   *\n   * @since 2.0.0\n   */\n  @Event() inputChange: EventEmitter<string>;\n\n  /**\n   * Item added to selection\n   */\n  @Event() addItem: EventEmitter<string>;\n\n  @State() dropdownShow = false;\n  @State() value: string[];\n  @State() dropdownWrapperRef!: HTMLElement;\n  @State() dropdownAnchor!: HTMLElement;\n  @State() isDropdownEmpty = false;\n  @State() hasFocus = false;\n  @State() navigationItem: HTMLIxSelectItemElement;\n  @State() inputFilterText: string;\n  @State() inputValue: string;\n\n  private inputRef!: HTMLInputElement;\n  private dropdownRef!: HTMLIxDropdownElement;\n  private addItemRef!: HTMLDivElement;\n\n  private labelMutationObserver: MutationObserver;\n\n  get items() {\n    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));\n  }\n\n  get selectedItems() {\n    return this.items.filter((item) => item.selected);\n  }\n\n  get addItemButton() {\n    return this.hostElement.querySelector('.add-item');\n  }\n\n  get isSingleMode() {\n    return this.mode === 'single';\n  }\n\n  get isMultipleMode() {\n    return this.mode === 'multiple';\n  }\n\n  get isEveryDropdownItemHidden() {\n    return this.items.every((item) => item.classList.contains('d-none'));\n  }\n\n  @Watch('selectedIndices')\n  watchSelectedIndices(newId: string | string[]) {\n    if (!newId) {\n      this.selectValue([]);\n      return;\n    }\n\n    if (Array.isArray(newId)) {\n      this.selectValue([...newId]);\n      return;\n    }\n\n    this.selectValue([newId]);\n  }\n\n  @Listen('itemClick')\n  onItemClicked(event: CustomEvent<string>) {\n    const newId = event.detail;\n    this.emitItemClick(newId);\n  }\n\n  private emitItemClick(newId: string) {\n    if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {\n      if (this.selectedIndices.includes(newId)) {\n        this.selectedIndices = this.selectedIndices.filter((i) => i !== newId);\n      } else {\n        this.selectedIndices = [...this.selectedIndices, newId];\n      }\n    } else {\n      this.selectedIndices = [newId];\n    }\n\n    this.selectValue(this.selectedIndices);\n    this.itemSelectionChange.emit(this.selectedIndices);\n  }\n\n  private emitAddItem(value: string) {\n    if (value.trim() === '') {\n      return;\n    }\n\n    const newItem = document.createElement('ix-select-item');\n    newItem.value = value;\n    newItem.label = value;\n\n    this.addItemRef.appendChild(newItem);\n\n    this.clearInput();\n    this.emitItemClick(value);\n    this.addItem.emit(value);\n  }\n\n  private selectValue(ids: string[]) {\n    this.items.forEach((item) => {\n      item.selected = ids.some((i) => i === item.value);\n    });\n\n    this.value = this.selectedItems.map((item) => item.label);\n\n    if (this.isSingleMode) {\n      this.inputValue = this.value?.length ? this.value[0] : null;\n      return;\n    }\n\n    this.inputValue = null;\n  }\n\n  componentDidLoad() {\n    this.inputRef.addEventListener('input', () => {\n      this.inputChange.emit(this.inputRef.value);\n    });\n  }\n\n  componentWillLoad() {\n    if (this.selectedIndices) {\n      this.selectValue(\n        Array.isArray(this.selectedIndices)\n          ? this.selectedIndices\n          : [this.selectedIndices]\n      );\n    }\n  }\n\n  @Listen('ix-select-item:labelChange')\n  onLabelChange(event: IxSelectItemLabelChangeEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n    this.selectValue(\n      Array.isArray(this.selectedIndices)\n        ? this.selectedIndices\n        : [this.selectedIndices]\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.labelMutationObserver) {\n      this.labelMutationObserver.disconnect();\n    }\n  }\n\n  private itemExists(item: string) {\n    return this.items.find((i) => i.label === item);\n  }\n\n  private dropdownVisibilityChanged(event: CustomEvent<boolean>) {\n    this.dropdownShow = event.detail;\n    this.hasFocus = event.detail;\n\n    if (event.detail) {\n      this.inputRef.focus();\n      this.inputRef.select();\n\n      this.removeHiddenFromItems();\n      this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n    } else {\n      this.navigationItem = undefined;\n    }\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    if (!this.dropdownShow) {\n      return;\n    }\n\n    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {\n      this.onArrowNavigation(event);\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      await this.onEnterNavigation();\n    }\n\n    if (event.code === 'Escape') {\n      this.dropdownShow = false;\n    }\n  }\n\n  private async onEnterNavigation() {\n    if (this.isMultipleMode) {\n      return;\n    }\n\n    if (this.editable && !this.itemExists(this.inputFilterText)) {\n      this.emitAddItem(this.inputFilterText);\n      this.navigationItem = this.items[this.items.length - 1];\n    }\n\n    this.navigationItem?.onItemClick();\n    await this.dropdownRef?.updatePosition();\n\n    if (this.isSingleMode && !this.editable) {\n      this.dropdownShow = false;\n    }\n  }\n\n  private onArrowNavigation(event: KeyboardEvent) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const focusItem = this.items.find(\n      (item) => document.activeElement === item.querySelector('button')\n    );\n    this.navigationItem = focusItem;\n\n    const selectItems = this.items.filter(\n      (i) => !i.classList.contains('d-none')\n    );\n\n    const index = selectItems.indexOf(this.navigationItem);\n\n    if (event.code === 'ArrowDown' && index < selectItems.length - 1) {\n      this.navigationItem = selectItems[index + 1];\n    } else if (event.code === 'ArrowUp' && index > 0) {\n      this.navigationItem = selectItems[index - 1];\n    }\n\n    this.setHoverEffectForNavigatedSelectItem();\n  }\n\n  private setHoverEffectForNavigatedSelectItem() {\n    this.navigationItem?.querySelector('button').focus();\n  }\n\n  private filterItemsWithTypeahead() {\n    this.inputFilterText = this.inputRef.value;\n\n    if (this.inputFilterText) {\n      this.items.forEach((item) => {\n        item.classList.remove('d-none');\n        if (\n          !item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())\n        ) {\n          item.classList.add('d-none');\n        }\n      });\n    } else {\n      this.removeHiddenFromItems();\n    }\n\n    this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n  }\n\n  private removeHiddenFromItems() {\n    this.items.forEach((item) => {\n      item.classList.remove('d-none');\n    });\n  }\n\n  private clearInput() {\n    this.inputRef.value = '';\n    this.inputFilterText = '';\n  }\n\n  private clear() {\n    this.clearInput();\n    this.value = [];\n    this.selectedIndices = [];\n    this.itemSelectionChange.emit(null);\n    this.dropdownShow = false;\n  }\n\n  private onInputBlur(e) {\n    if (this.editable) {\n      return;\n    }\n\n    if (this.isSingleMode) {\n      if (this.dropdownShow && this.isDropdownEmpty) {\n        this.dropdownShow = false;\n      }\n    }\n\n    if (!this.dropdownShow && this.mode !== 'multiple') {\n      e.target['value'] = this.value;\n    }\n  }\n\n  private placeholderValue() {\n    if (this.editable) {\n      return this.i18nPlaceholderEditable;\n    }\n\n    if (this.readonly) {\n      return '';\n    }\n\n    return this.i18nPlaceholder;\n  }\n\n  private isAddItemVisible() {\n    return (\n      !this.itemExists(this.inputFilterText) &&\n      this.editable &&\n      this.inputFilterText\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'form-control': true,\n            select: true,\n            focus: this.hasFocus,\n            editable: this.editable,\n            disabled: this.disabled,\n            readonly: this.readonly,\n          }}\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n            if (!this.editable) this.dropdownWrapperRef = ref;\n          }}\n        >\n          <div class=\"input-container\">\n            <div class=\"chips\">\n              {this.isMultipleMode\n                ? this.selectedItems?.map((item) => (\n                    <ix-filter-chip\n                      disabled={this.disabled || this.readonly}\n                      key={item.value}\n                      onCloseClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        this.emitItemClick(item.value);\n                      }}\n                    >\n                      {item.label}\n                    </ix-filter-chip>\n                  ))\n                : ''}\n              <div class=\"trigger\">\n                <input\n                  data-testid=\"input\"\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  type=\"text\"\n                  class={{\n                    'allow-clear': this.allowClear && !!this.value?.length,\n                  }}\n                  placeholder={this.placeholderValue()}\n                  value={this.inputValue}\n                  ref={(ref) => (this.inputRef = ref)}\n                  onBlur={(e) => this.onInputBlur(e)}\n                  onInput={() => this.filterItemsWithTypeahead()}\n                />\n                {this.allowClear &&\n                (this.value?.length || this.inputFilterText) ? (\n                  <ix-icon-button\n                    class=\"clear\"\n                    icon=\"clear\"\n                    ghost\n                    oval\n                    size=\"16\"\n                    onClick={(e) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                      this.clear();\n                    }}\n                  />\n                ) : null}\n                {this.disabled || this.readonly ? null : (\n                  <div\n                    class=\"chevron-down-container\"\n                    ref={(ref) => {\n                      if (this.editable) this.dropdownWrapperRef = ref;\n                    }}\n                  >\n                    <ix-icon class=\"chevron\" name=\"chevron-down-small\" />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <ix-dropdown\n          ref={(ref) => (this.dropdownRef = ref)}\n          show={this.dropdownShow}\n          closeBehavior={this.isMultipleMode ? 'outside' : 'both'}\n          class={{\n            'd-none': this.disabled || this.readonly,\n          }}\n          anchor={this.dropdownAnchor}\n          trigger={this.dropdownWrapperRef}\n          onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n          placement=\"bottom-start\"\n          overwriteDropdownStyle={async () => {\n            return {\n              minWidth: `${this.hostElement.clientWidth}px`,\n            };\n          }}\n        >\n          <div\n            class={{\n              'select-list-header': true,\n              hidden: this.hideListHeader || this.isDropdownEmpty,\n            }}\n            title={this.i18nSelectListHeader}\n          >\n            {this.i18nSelectListHeader}\n          </div>\n          <slot></slot>\n          <div ref={(ref) => (this.addItemRef = ref)} class=\"d-contents\"></div>\n          {this.isAddItemVisible() ? (\n            <ix-dropdown-item\n              data-testid=\"add-item\"\n              icon=\"plus\"\n              class={{\n                'add-item': true,\n              }}\n              label={this.inputFilterText}\n              onItemClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                this.emitAddItem(this.inputFilterText);\n              }}\n            ></ix-dropdown-item>\n          ) : null}\n          {this.isDropdownEmpty && !this.editable ? (\n            <div class=\"select-list-header\">{this.i18nNoMatches}</div>\n          ) : (\n            ''\n          )}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/service.js

@@ -1,143 +0,0 @@
-import { T as TypedEvent } from './typed-event.js';
-
-/*
- * SPDX-FileCopyrightText: 2023 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-let supportedModes = ['small', 'medium', 'large'];
-const smallMediaQuery = `only screen and (max-width: 40em)`;
-const mediumMediaQuery = `only screen and (min-width: 40.063em) and (max-width: 64em)`;
-const largeMediaQuery = `only screen and (min-width: 64.063em)`;
-const setSupportedModes = (modes) => (supportedModes = modes);
-const createMediaQueryListener = (query, callback) => {
-  const listener = window.matchMedia(query);
-  const fn = (event) => {
-    callback(event);
-  };
-  listener.addEventListener('change', fn);
-  return {
-    matchMedia: listener,
-    dispose: () => {
-      listener.removeEventListener('change', fn);
-    },
-  };
-};
-const getFallbackMode = (modes, detectedMode) => {
-  if (modes.length === 1) {
-    return modes[0];
-  }
-  if (detectedMode === 'large' && !modes.includes(detectedMode)) {
-    return getFallbackMode(modes, 'medium');
-  }
-  if (detectedMode === 'medium' && !modes.includes(detectedMode)) {
-    return getFallbackMode(modes, 'large');
-  }
-  if (detectedMode === 'small' && !modes.includes(detectedMode)) {
-    return getFallbackMode(modes, 'medium');
-  }
-  return detectedMode;
-};
-const createModeListener = (modeChangeCallback) => {
-  const smallListener = createMediaQueryListener(smallMediaQuery, ({ matches }) => {
-    if (!matches) {
-      return;
-    }
-    modeChangeCallback(getFallbackMode(supportedModes, 'small'));
-  });
-  const mediumListener = createMediaQueryListener(mediumMediaQuery, ({ matches }) => {
-    if (!matches) {
-      return;
-    }
-    modeChangeCallback(getFallbackMode(supportedModes, 'medium'));
-  });
-  const largeListener = createMediaQueryListener(largeMediaQuery, ({ matches }) => {
-    if (!matches) {
-      return;
-    }
-    modeChangeCallback(getFallbackMode(supportedModes, 'large'));
-  });
-  const matchSmall = smallListener.matchMedia.matches;
-  const matchMedium = mediumListener.matchMedia.matches;
-  if (matchSmall) {
-    modeChangeCallback(getFallbackMode(supportedModes, 'small'));
-  }
-  else if (matchMedium) {
-    modeChangeCallback(getFallbackMode(supportedModes, 'medium'));
-  }
-  else {
-    modeChangeCallback(getFallbackMode(supportedModes, 'large'));
-  }
-  return {
-    dispose: () => {
-      smallListener.dispose();
-      mediumListener.dispose();
-      largeListener.dispose();
-    },
-    matchMedia: [
-      smallListener.matchMedia,
-      mediumListener.matchMedia,
-      largeListener.matchMedia,
-    ],
-  };
-};
-
-var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-  if (kind === "m") throw new TypeError("Private method is not writable");
-  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _ScreenMode_modeChangeListener, _ScreenMode_mode, _ScreenMode_isDetectionEnabled;
-class ScreenMode {
-  constructor() {
-    _ScreenMode_modeChangeListener.set(this, new TypedEvent());
-    _ScreenMode_mode.set(this, 'large');
-    _ScreenMode_isDetectionEnabled.set(this, true);
-    createModeListener((mode) => {
-      if (!__classPrivateFieldGet(this, _ScreenMode_isDetectionEnabled, "f")) {
-        return;
-      }
-      __classPrivateFieldGet(this, _ScreenMode_modeChangeListener, "f").emit(mode);
-      __classPrivateFieldSet(this, _ScreenMode_mode, mode, "f");
-    });
-  }
-  get mode() {
-    return __classPrivateFieldGet(this, _ScreenMode_mode, "f");
-  }
-  get onChange() {
-    return __classPrivateFieldGet(this, _ScreenMode_modeChangeListener, "f");
-  }
-  get isDetectionEnabled() {
-    return __classPrivateFieldGet(this, _ScreenMode_isDetectionEnabled, "f");
-  }
-  disableModeDetection() {
-    __classPrivateFieldSet(this, _ScreenMode_isDetectionEnabled, false, "f");
-  }
-  enableModeDetection() {
-    __classPrivateFieldSet(this, _ScreenMode_isDetectionEnabled, true, "f");
-  }
-  setMode(mode) {
-    __classPrivateFieldSet(this, _ScreenMode_mode, mode, "f");
-    __classPrivateFieldGet(this, _ScreenMode_modeChangeListener, "f").emit(mode);
-  }
-  setSupportedMods(modes) {
-    setSupportedModes(modes);
-    const mode = getFallbackMode(modes, __classPrivateFieldGet(this, _ScreenMode_mode, "f"));
-    this.setMode(mode);
-  }
-}
-_ScreenMode_modeChangeListener = new WeakMap(), _ScreenMode_mode = new WeakMap(), _ScreenMode_isDetectionEnabled = new WeakMap();
-const screenMode = new ScreenMode();
-
-export { screenMode as s };
-
-//# sourceMappingURL=service.js.map

package/dist/components/service.js.map

@@ -1 +0,0 @@
-{"file":"service.js","mappings":"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","names":[],"sources":["./src/components/utils/screen/mode.ts","./src/components/utils/screen/service.ts"],"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\nexport type Mode = 'large' | 'medium' | 'small';\n\nlet supportedModes: Mode[] = ['small', 'medium', 'large'];\n\nconst smallMediaQuery = `only screen and (max-width: 40em)`;\nconst mediumMediaQuery = `only screen and (min-width: 40.063em) and (max-width: 64em)`;\nconst largeMediaQuery = `only screen and (min-width: 64.063em)`;\n\nexport type MediaQueryListener = {\n  matchMedia: MediaQueryList;\n  dispose: () => void;\n};\n\nexport const setSupportedModes = (modes: Mode[]) => (supportedModes = modes);\n\nexport const createMediaQueryListener = (\n  query: string,\n  callback: (event: MediaQueryListEvent) => void\n): MediaQueryListener => {\n  const listener = window.matchMedia(query);\n  const fn = (event: MediaQueryListEvent) => {\n    callback(event);\n  };\n  listener.addEventListener('change', fn);\n\n  return {\n    matchMedia: listener,\n    dispose: () => {\n      listener.removeEventListener('change', fn);\n    },\n  };\n};\n\nexport const getFallbackMode = (modes: Mode[], detectedMode: Mode): Mode => {\n  if (modes.length === 1) {\n    return modes[0];\n  }\n\n  if (detectedMode === 'large' && !modes.includes(detectedMode)) {\n    return getFallbackMode(modes, 'medium');\n  }\n  if (detectedMode === 'medium' && !modes.includes(detectedMode)) {\n    return getFallbackMode(modes, 'large');\n  }\n  if (detectedMode === 'small' && !modes.includes(detectedMode)) {\n    return getFallbackMode(modes, 'medium');\n  }\n  return detectedMode;\n};\n\nexport type ModeChangeCallback = (mode: Mode) => void;\n\nexport const createModeListener = (\n  modeChangeCallback: (mode: Mode) => void\n) => {\n  const smallListener = createMediaQueryListener(\n    smallMediaQuery,\n    ({ matches }) => {\n      if (!matches) {\n        return;\n      }\n      modeChangeCallback(getFallbackMode(supportedModes, 'small'));\n    }\n  );\n\n  const mediumListener = createMediaQueryListener(\n    mediumMediaQuery,\n    ({ matches }) => {\n      if (!matches) {\n        return;\n      }\n      modeChangeCallback(getFallbackMode(supportedModes, 'medium'));\n    }\n  );\n\n  const largeListener = createMediaQueryListener(\n    largeMediaQuery,\n    ({ matches }) => {\n      if (!matches) {\n        return;\n      }\n      modeChangeCallback(getFallbackMode(supportedModes, 'large'));\n    }\n  );\n\n  const matchSmall = smallListener.matchMedia.matches;\n  const matchMedium = mediumListener.matchMedia.matches;\n\n  if (matchSmall) {\n    modeChangeCallback(getFallbackMode(supportedModes, 'small'));\n  } else if (matchMedium) {\n    modeChangeCallback(getFallbackMode(supportedModes, 'medium'));\n  } else {\n    modeChangeCallback(getFallbackMode(supportedModes, 'large'));\n  }\n\n  return {\n    dispose: () => {\n      smallListener.dispose();\n      mediumListener.dispose();\n      largeListener.dispose();\n    },\n    matchMedia: [\n      smallListener.matchMedia,\n      mediumListener.matchMedia,\n      largeListener.matchMedia,\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 */\nimport { TypedEvent } from '../typed-event';\nimport {\n  createModeListener,\n  getFallbackMode,\n  Mode,\n  setSupportedModes,\n} from './mode';\n\nclass ScreenMode {\n  #modeChangeListener = new TypedEvent<Mode>();\n  #mode: Mode = 'large';\n\n  #isDetectionEnabled = true;\n\n  constructor() {\n    createModeListener((mode) => {\n      if (!this.#isDetectionEnabled) {\n        return;\n      }\n\n      this.#modeChangeListener.emit(mode);\n      this.#mode = mode;\n    });\n  }\n\n  get mode() {\n    return this.#mode;\n  }\n\n  get onChange() {\n    return this.#modeChangeListener;\n  }\n\n  get isDetectionEnabled() {\n    return this.#isDetectionEnabled;\n  }\n\n  public disableModeDetection() {\n    this.#isDetectionEnabled = false;\n  }\n\n  public enableModeDetection() {\n    this.#isDetectionEnabled = true;\n  }\n\n  public setMode(mode: Mode) {\n    this.#mode = mode;\n    this.#modeChangeListener.emit(mode);\n  }\n\n  public setSupportedMods(modes: Mode[]) {\n    setSupportedModes(modes);\n    const mode = getFallbackMode(modes, this.#mode);\n\n    this.setMode(mode);\n  }\n}\n\nexport const screenMode = new ScreenMode();\n"],"version":3}

package/dist/components/spinner.js

@@ -1,48 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const spinnerCss = ":host(.xx-small){display:block;position:relative;width:0.75rem;height:0.75rem;min-width:0.75rem;min-height:0.75rem;max-width:0.75rem;max-height:0.75rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.xx-small) *,:host(.xx-small) *::after,:host(.xx-small) *::before{box-sizing:border-box}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.xx-small)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.xx-small)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.x-small){display:block;position:relative;width:1.25rem;height:1.25rem;min-width:1.25rem;min-height:1.25rem;max-width:1.25rem;max-height:1.25rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.x-small) *,:host(.x-small) *::after,:host(.x-small) *::before{box-sizing:border-box}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.x-small)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.x-small)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.small){display:block;position:relative;width:1.5rem;height:1.5rem;min-width:1.5rem;min-height:1.5rem;max-width:1.5rem;max-height:1.5rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.small) *,:host(.small) *::after,:host(.small) *::before{box-sizing:border-box}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.small)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.small)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.medium){display:block;position:relative;width:2rem;height:2rem;min-width:2rem;min-height:2rem;max-width:2rem;max-height:2rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.medium) *,:host(.medium) *::after,:host(.medium) *::before{box-sizing:border-box}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.medium)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.medium)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.large){display:block;position:relative;width:6rem;height:6rem;min-width:6rem;min-height:6rem;max-width:6rem;max-height:6rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.large) *,:host(.large) *::after,:host(.large) *::before{box-sizing:border-box}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.large)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.large)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}";
-
-const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.variant = 'secondary';
-    this.size = 'medium';
-    this.hideTrack = false;
-  }
-  render() {
-    return (h(Host, { class: {
-        primary: this.variant === 'primary',
-        'xx-small': this.size === 'xx-small',
-        'x-small': this.size === 'x-small',
-        small: this.size === 'small',
-        medium: this.size === 'medium',
-        large: this.size === 'large',
-        'hide-track': this.hideTrack,
-      } }));
-  }
-  get hostElement() { return this; }
-  static get style() { return spinnerCss; }
-}, [1, "ix-spinner", {
-    "variant": [1],
-    "size": [1],
-    "hideTrack": [4, "hide-track"]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-spinner":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Spinner);
-      }
-      break;
-  } });
-}
-
-export { Spinner as S, defineCustomElement as d };
-
-//# sourceMappingURL=spinner.js.map

package/dist/components/spinner.js.map

@@ -1 +0,0 @@
-{"file":"spinner.js","mappings":";;AAAA,MAAM,UAAU,GAAG,ylVAAylV;;MCgB/lV,OAAO;;;;;mBAMyB,WAAW;gBAMpD,QAAQ;qBAKU,KAAK;;EAEzB,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;QACpC,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QAClC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QAC9B,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QAC5B,YAAY,EAAE,IAAI,CAAC,SAAS;OAC7B,GACK,EACR;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","./src/components/spinner/spinner.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 'mixins/shadow-dom/component';\n\n@mixin ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 4px) {\n  :host(.#{$host-class}) {\n    @include ix-component;\n    display: block;\n    position: relative;\n\n    width: $size;\n    height: $size;\n    min-width: $size;\n    min-height: $size;\n    max-width: $size;\n    max-height: $size;\n    border-radius: 100%;\n    position: relative;\n    animation: rotate 2s linear infinite;\n\n    @keyframes rotate {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes clipMask {\n      0% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n      12.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n      }\n      25% {\n        clip-path: polygon(\n          50% 50%,\n          0 0,\n          100% 0,\n          100% 100%,\n          100% 100%,\n          100% 100%\n        );\n      }\n      37.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n      }\n      50% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      62.5% {\n        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      75% {\n        clip-path: polygon(\n          50% 50%,\n          100% 100%,\n          100% 100%,\n          100% 100%,\n          0 100%,\n          0 0\n        );\n      }\n      87.5% {\n        clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n      }\n      100% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n    }\n  }\n\n  :host(.#{$host-class})::after {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid\n      var(--ix-button-color, var(--theme-color-soft-text));\n    animation: clipMask 3s linear infinite;\n  }\n\n  :host(:not(.hide-track)):host(.#{$host-class})::before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid var(--theme-color-ghost--hover);\n  }\n\n  :host(.primary)::after {\n    border-color: var(--theme-color-dynamic);\n  }\n\n  :host(.primary)::before {\n    border-color: var(--theme-color-ghost--hover);\n  }\n}\n\n@include ix-spinner($host-class: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($host-class: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($host-class: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($host-class: 'large', $size: 6rem, $track-size: 4px);\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, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() hostElement!: HTMLIxSpinnerElement;\n\n  /**\n   * Variant of spinner\n   */\n  @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n  /**\n   * Size of spinner\n   */\n  @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n    'medium';\n\n  /**\n   * @internal\n   */\n  @Prop() hideTrack = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          primary: this.variant === 'primary',\n          'xx-small': this.size === 'xx-small',\n          'x-small': this.size === 'x-small',\n          small: this.size === 'small',\n          medium: this.size === 'medium',\n          large: this.size === 'large',\n          'hide-track': this.hideTrack,\n        }}\n      ></Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/tab-item.js

@@ -1,79 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const tabItemCss = "@charset \"UTF-8\";:host{position:relative;display:flex;align-items:center;justify-content:center;height:40px;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host .text span,:host .text span::before{pointer-events:none}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.selected::after{display:none}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .counter::after{display:none}:host .hidden{display:none}:host(.circle){height:72px}:host(.top) ::after{top:0}:host(.bottom) ::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle)) ::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle)) ::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled) ::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled)) ::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}";
-
-const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.selected = false;
-    this.disabled = false;
-    this.small = false;
-    this.icon = false;
-    this.rounded = false;
-    this.counter = undefined;
-    this.layout = 'auto';
-    this.placement = 'bottom';
-  }
-  tabItemClasses(props) {
-    return {
-      selected: props.selected,
-      disabled: props.disabled,
-      'small-tab': props.small,
-      icon: props.small,
-      stretched: props.layout === 'stretched',
-      bottom: props.placement === 'bottom',
-      top: props.placement === 'top',
-      circle: props.circle,
-    };
-  }
-  render() {
-    return (h(Host, { class: this.tabItemClasses({
-        selected: this.selected,
-        disabled: this.disabled,
-        small: this.small,
-        icon: this.icon,
-        layout: this.layout,
-        placement: this.placement,
-        circle: this.rounded,
-      }), tabIndex: 0 }, h("div", { class: {
-        circle: this.rounded,
-        text: !this.rounded,
-        selected: this.selected,
-        disabled: this.disabled,
-      } }, h("slot", null)), h("div", { class: {
-        counter: true,
-        selected: this.selected,
-        hidden: !(this.rounded && this.counter !== undefined),
-        disabled: this.disabled,
-      } }, this.counter)));
-  }
-  static get style() { return tabItemCss; }
-}, [1, "ix-tab-item", {
-    "selected": [4],
-    "disabled": [4],
-    "small": [4],
-    "icon": [4],
-    "rounded": [4],
-    "counter": [2],
-    "layout": [1],
-    "placement": [1]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-tab-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-tab-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TabItem);
-      }
-      break;
-  } });
-}
-
-export { TabItem as T, defineCustomElement as d };
-
-//# sourceMappingURL=tab-item.js.map

package/dist/components/tab-item.js.map

@@ -1 +0,0 @@
-{"file":"tab-item.js","mappings":";;AAAA,MAAM,UAAU,GAAG,6tHAA6tH;;MCgBnuH,OAAO;;;;;oBAIC,KAAK;oBAKL,KAAK;iBAKR,KAAK;gBAKN,KAAK;mBAKF,KAAK;;kBAUgB,MAAM;qBAKP,QAAQ;;EAEtC,cAAc,CAAC,KAQtB;IACC,OAAO;MACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,WAAW,EAAE,KAAK,CAAC,KAAK;MACxB,IAAI,EAAE,KAAK,CAAC,KAAK;MACjB,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;MACvC,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;MACpC,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;MAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;KACrB,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;QACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,MAAM,EAAE,IAAI,CAAC,OAAO;OACrB,CAAC,EACF,QAAQ,EAAE,CAAC,IAEX,WACE,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,OAAO;QACpB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAa,CACT,EACN,WACE,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;QACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAEA,IAAI,CAAC,OAAO,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","./src/components/tab-item/tab-item.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/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  padding: 10px $large-space;\n  line-height: 20px;\n  font-size: 14px;\n  font-weight: bold;\n  background-color: var(--theme-tab--background);\n  color: var(--theme-tab--color);\n\n  ::after {\n    content: '';\n    position: absolute;\n    background-color: var(--theme-tab-indicator--background);\n    width: 100%;\n    height: var(--theme-tab-indicator--height);\n    left: 0;\n  }\n\n  .text {\n    @include ellipsis;\n\n    span,\n    span::before {\n      pointer-events: none;\n    }\n\n    vertical-align: middle;\n  }\n\n  .circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 3rem;\n    width: 3rem;\n    background-color: var(--theme-animated-tab-indicator--background);\n    border-radius: 50%;\n    border: 2px solid var(--theme-animated-tab-circle--border-color);\n    color: var(--theme-an…icon--color);\n    cursor: pointer;\n\n    &.selected:not(.disabled) {\n      background-color: var(--theme-animated-tab-circle--background--selected);\n      color: var(--theme-animated-tab-icon--color--selected);\n      border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n      &:hover {\n        background-color: var(\n          --theme-animated-tab-circle--background--selected\n        );\n      }\n    }\n\n    &:hover {\n      background-color: var(--theme-animated-tab-circle--background--hover);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &.disabled {\n      background-color: var(--theme-animated-tab-circle--background--disabled);\n      border-color: var(--theme-animated-tab-circle--border-color--disabled);\n    }\n  }\n\n  .counter {\n    position: absolute;\n    z-index: 1;\n    height: 16px;\n    width: auto;\n    background-color: var(--theme-pill-outline--background);\n    border: 1px solid var(--theme-tab-pill--border-color);\n    border-radius: 100px;\n    bottom: 6px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-left: $tiny-space;\n    padding-right: $tiny-space;\n    font-size: 12px;\n    line-height: 14px;\n    color: var(--theme-pill-outline--color);\n    cursor: pointer;\n\n    &.selected {\n      border-color: var(--theme-tab-pill--border-color--selected);\n\n      &::after {\n        display: none;\n      }\n    }\n\n    &.disabled {\n      border-color: var(--theme-tab-pill--border-color--disabled);\n    }\n\n    &::after {\n      display: none;\n    }\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n\n:host(.circle) {\n  height: 72px;\n}\n\n:host(.top) {\n  ::after {\n    top: 0;\n  }\n}\n\n:host(.bottom) {\n  ::after {\n    bottom: 0;\n  }\n}\n\n:host(.stretched) {\n  flex-basis: 100%;\n  width: 100%;\n  @include ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n  background-color: var(--theme-tab--background--hover);\n  color: var(--theme-tab-color-hover);\n  cursor: pointer;\n\n  ::after {\n    background-color: var(--theme-tab-indicator--background--hover);\n  }\n}\n\n:host(:active:not(.circle)) {\n  background-color: var(--theme-tab--background--active);\n  color: var(--theme-tab-color--active);\n\n  ::after {\n    background-color: var(--theme-tab-indicator--background--active);\n  }\n}\n\n:host(:focus-visible) {\n  outline: 0px solid var(--focus--border-color);\n\n  .circle {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(:focus-visible:not(.circle)) {\n  outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n  pointer-events: none;\n  color: var(--theme-tab--color--disabled);\n  background-color: var(--theme-tab--background--disabled);\n\n  ::after {\n    background-color: var(--theme-tab-indicator--background--disabled);\n  }\n}\n\n:host(.selected:not(.disabled)) {\n  background-color: var(--theme-tab--background--selected);\n  color: var(--theme-tab--color--selected);\n\n  ::after {\n    background-color: var(--theme-tab-indicator--background--selected);\n  }\n}\n\n:host(.icon) {\n  padding: $large-space $small-space;\n}\n\n:host(.small-tab) {\n  height: 32px;\n  padding: $default-space;\n}\n\n:host(.small-tab.icon) {\n  padding: $default-space $tiny-space;\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, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-tab-item',\n  styleUrl: 'tab-item.scss',\n  shadow: true,\n})\nexport class TabItem {\n  /**\n   * Set selected tab\n   */\n  @Prop() selected = false;\n\n  /**\n   * Set disabled tab\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set small size tab\n   */\n  @Prop() small = false;\n\n  /**\n   * Set icon only tab\n   */\n  @Prop() icon = false;\n\n  /**\n   * Set rounded tab\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set counter value\n   */\n  @Prop() counter: number;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set selected placement\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  private tabItemClasses(props: {\n    selected: boolean;\n    disabled: boolean;\n    small: boolean;\n    icon: boolean;\n    circle: boolean;\n    layout: 'auto' | 'stretched';\n    placement: 'bottom' | 'top';\n  }) {\n    return {\n      selected: props.selected,\n      disabled: props.disabled,\n      'small-tab': props.small,\n      icon: props.small,\n      stretched: props.layout === 'stretched',\n      bottom: props.placement === 'bottom',\n      top: props.placement === 'top',\n      circle: props.circle,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.tabItemClasses({\n          selected: this.selected,\n          disabled: this.disabled,\n          small: this.small,\n          icon: this.icon,\n          layout: this.layout,\n          placement: this.placement,\n          circle: this.rounded,\n        })}\n        tabIndex={0}\n      >\n        <div\n          class={{\n            circle: this.rounded,\n            text: !this.rounded,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            counter: true,\n            selected: this.selected,\n            hidden: !(this.rounded && this.counter !== undefined),\n            disabled: this.disabled,\n          }}\n        >\n          {this.counter}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/tabs.js

@@ -1,218 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './icon.js';
-
-const tabsCss = ":host{width:auto;display:flex;align-items:center;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}:host .tab-items .items-content{display:flex;align-items:center}:host .arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-invisible-primary--color);background-color:var(--theme-btn-invisible-primary--background);z-index:2}:host .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}:host .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}:host .arrow.right{left:auto;right:0}:host .overflow-shadow{display:block;position:relative;height:100%;width:100%;pointer-events:all}:host .overflow-shadow.shadow-left{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px);mask-image:linear-gradient(90deg, transparent 0px, black 45px)}:host .overflow-shadow.shadow-right{-webkit-mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%)}:host .overflow-shadow.shadow-both{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%)}";
-
-let windowStartSize = window.innerWidth;
-const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.clickAction = {
-      timeout: null,
-      isClick: true,
-    };
-    this.small = false;
-    this.rounded = false;
-    this.selected = 0;
-    this.layout = 'auto';
-    this.placement = 'bottom';
-    this.totalItems = 0;
-    this.currentScrollAmount = 0;
-    this.scrollAmount = 100;
-    this.styleNextArrow = {};
-    this.stylePreviousArrow = {};
-    this.scrollActionAmount = 0;
-  }
-  onWindowResize() {
-    this.totalItems = 0;
-    this.totalItems = this.getTabs().length;
-    if (windowStartSize === 0)
-      return (windowStartSize = window.innerWidth);
-    this.move(windowStartSize - window.innerWidth);
-    windowStartSize = window.innerWidth;
-  }
-  getTabs() {
-    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));
-  }
-  getTab(tabIndex) {
-    return this.getTabs()[tabIndex];
-  }
-  getTabsWrapper() {
-    return this.hostElement.shadowRoot.querySelector('.items-content');
-  }
-  showArrows() {
-    try {
-      const tabWrapper = this.getTabsWrapper();
-      return (tabWrapper.scrollWidth >
-        Math.ceil(tabWrapper.getBoundingClientRect().width) &&
-        this.layout === 'auto');
-    }
-    catch (error) {
-      return false;
-    }
-  }
-  showPreviousArrow() {
-    try {
-      return this.showArrows() && this.scrollActionAmount < 0;
-    }
-    catch (error) {
-      return false;
-    }
-  }
-  showNextArrow() {
-    try {
-      const tabWrapper = this.getTabsWrapper();
-      const tabWrapperRect = tabWrapper.getBoundingClientRect();
-      return (this.showArrows() &&
-        this.scrollActionAmount >
-          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1);
-    }
-    catch (error) {
-      return false;
-    }
-  }
-  getArrowStyle(condition) {
-    return {
-      opacity: condition ? '1' : '0',
-      zIndex: condition ? '1' : '-1',
-    };
-  }
-  move(amount, click = false) {
-    const tabWrapper = this.getTabsWrapper();
-    const maxScrollWidth = (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;
-    amount = this.currentScrollAmount + amount;
-    amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;
-    const styles = [
-      `transform: translateX(${amount}px);`,
-      click ? 'transition: all ease-in-out 400ms;' : '',
-    ].join('');
-    tabWrapper.setAttribute('style', styles);
-    if (click)
-      this.currentScrollAmount = this.scrollActionAmount = amount;
-    else
-      this.scrollActionAmount = amount;
-  }
-  moveTabToView(tabIndex) {
-    if (!this.showArrows())
-      return;
-    const tab = this.getTab(tabIndex).getBoundingClientRect();
-    const amount = tab.x * -1;
-    this.move(amount, true);
-  }
-  setSelected(index) {
-    this.selected = index;
-  }
-  clickTab(index) {
-    if (this.dragStop())
-      return;
-    this.setSelected(index);
-    this.moveTabToView(index);
-  }
-  dragStart(element, event) {
-    if (!this.showArrows())
-      return;
-    if (event.button > 0)
-      return;
-    this.clickAction.timeout =
-      this.clickAction.timeout === null
-        ? setTimeout(() => (this.clickAction.isClick = false), 300)
-        : null;
-    const tabPositionX = parseFloat(window.getComputedStyle(element).left);
-    const mousedownPositionX = event.clientX;
-    const move = (event) => this.dragMove(event, tabPositionX, mousedownPositionX);
-    window.addEventListener('mouseup', () => {
-      window.removeEventListener('mousemove', move, false);
-      this.dragStop();
-    });
-    window.addEventListener('mousemove', move, false);
-  }
-  dragMove(event, tabX, mousedownX) {
-    this.move(event.clientX + tabX - mousedownX);
-  }
-  dragStop() {
-    clearTimeout(this.clickAction.timeout);
-    this.clickAction.timeout = null;
-    if (this.clickAction.isClick)
-      return false;
-    this.currentScrollAmount = this.scrollActionAmount;
-    this.clickAction.isClick = true;
-    return true;
-  }
-  componentDidRender() {
-    const tabs = this.getTabs();
-    this.totalItems = tabs.length;
-    tabs.forEach((element, index) => {
-      if (this.small)
-        element.setAttribute('small', 'true');
-      if (this.rounded)
-        element.setAttribute('rounded', 'true');
-      element.setAttribute('layout', this.layout);
-      element.setAttribute('selected', index === this.selected ? 'true' : 'false');
-      element.setAttribute('placement', this.placement);
-    });
-  }
-  componentWillRender() {
-    requestAnimationFrame(() => {
-      const showNextArrow = this.showNextArrow();
-      const previousArrow = this.showPreviousArrow();
-      this.styleNextArrow = this.getArrowStyle(showNextArrow);
-      this.stylePreviousArrow = this.getArrowStyle(previousArrow);
-    });
-  }
-  componentDidLoad() {
-    const tabs = this.getTabs();
-    tabs.forEach((element, index) => {
-      const isDisabled = element.getAttribute('disabled') !== null;
-      if (!isDisabled)
-        element.addEventListener('click', () => this.clickTab(index));
-      element.addEventListener('mousedown', (event) => this.dragStart(element, event));
-    });
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "arrow", style: this.stylePreviousArrow, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { name: "chevron-left-small" })), h("div", { class: {
-        'tab-items': true,
-        'overflow-shadow': true,
-        'shadow-left': this.showPreviousArrow(),
-        'shadow-right': this.showNextArrow(),
-        'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
-      } }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "arrow right", style: this.styleNextArrow, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { name: "chevron-right-small" }))));
-  }
-  get hostElement() { return this; }
-  static get style() { return tabsCss; }
-}, [1, "ix-tabs", {
-    "small": [4],
-    "rounded": [4],
-    "selected": [1026],
-    "layout": [1],
-    "placement": [1],
-    "totalItems": [32],
-    "currentScrollAmount": [32],
-    "scrollAmount": [32],
-    "styleNextArrow": [32],
-    "stylePreviousArrow": [32],
-    "scrollActionAmount": [32]
-  }, [[9, "resize", "onWindowResize"]]]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-tabs", "ix-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-tabs":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Tabs);
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { Tabs as T, defineCustomElement as d };
-
-//# sourceMappingURL=tabs.js.map