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

package/dist/esm/index.js

@@ -1,64 +0,0 @@
-export { I as InputState, L as LogicalFilterOperator } from './logical-filter-operator-1bf83315.js';
-export { F as FlipTileState } from './flip-tile-state-28a1f8ce.js';
-export { a as Modal, M as ModalContainer } from './modal-8ed87a6c.js';
-export { c as convertToAbbreviationString, a as convertToRemString } from './rwd.util-33a69d24.js';
-export { c as closeModal, d as dismissModal, m as modal } from './modal-utils-ec39c1bc.js';
-export { r as renderDefaultItem } from './default-tree-item-638c435a.js';
-export { U as UploadFileState } from './upload-file-state-631bb8a2.js';
-import './index-55cfd20d.js';
-import './typed-event-dd6c83dd.js';
-import './anime.es-185e9087.js';
-import './animation-b667a4c4.js';
-
-/*
- * SPDX-FileCopyrightText: 2022 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.
- */
-class FilterState {
-}
-
-/*
- * SPDX-FileCopyrightText: 2022 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.
- */
-function getToastContainer() {
-  const containerList = Array.from(document.querySelectorAll('ix-toast-container'));
-  const [container] = containerList;
-  if (containerList.length > 1) {
-    console.warn('Multiple toast container are found. Only there first is used.');
-    return container;
-  }
-  if (!container) {
-    const toastContainer = document.createElement('ix-toast-container');
-    document.body.appendChild(toastContainer);
-    return toastContainer;
-  }
-  return container;
-}
-async function toast(config) {
-  const context = getToastContainer();
-  const toast = await context.showToast(config);
-  return toast;
-}
-toast.info = (config) => {
-  return toast(Object.assign(Object.assign({}, config), { type: 'info' }));
-};
-toast.error = (config) => {
-  return toast(Object.assign(Object.assign({}, config), { type: 'error' }));
-};
-toast.success = (config) => {
-  return toast(Object.assign(Object.assign({}, config), { type: 'success' }));
-};
-toast.warning = (config) => {
-  return toast(Object.assign(Object.assign({}, config), { type: 'warning' }));
-};
-
-export { FilterState, toast };

package/dist/esm/ix-animated-tab_2.entry.js

@@ -1,212 +0,0 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-55cfd20d.js';
-import { a as anime } from './anime.es-185e9087.js';
-import { A as Animation } from './animation-b667a4c4.js';
-import { c as convertToAbbreviationString } from './rwd.util-33a69d24.js';
-
-const animatedTabCss = ".sc-ix-animated-tab-h{display:block;height:100%;width:100%;position:absolute}";
-
-const AnimatedTab = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-};
-AnimatedTab.style = animatedTabCss;
-
-const animatedTabsCss = ".sc-ix-animated-tabs-h{--animate-duration:300ms;display:flex;flex-direction:column;align-items:center;height:100%;width:100%;position:relative}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs{display:flex;padding:0;margin:0;position:relative}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs{display:flex;justify-content:center;width:5rem;height:4.5rem;cursor:pointer;padding-top:0.625rem}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.bottom.sc-ix-animated-tabs{padding-top:0.875rem}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs{background:var(--theme-animated-tab-circle--background);border:solid 1px var(--theme-animated-tab-circle--border-color);display:flex;align-items:center;justify-content:center;border-radius:6.25rem;width:3rem;height:3rem;position:relative;transition:150ms}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):hover{background:var(--theme-animated-tab-circle--background--hover);border-color:var(--theme-animated-tab-circle--border-color--hover)}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):hover ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--hover) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):active{background:var(--theme-animated-tab-circle--background--active);border-color:var(--theme-animated-tab-circle--border-color--active)}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):active ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--active) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.selected.sc-ix-animated-tabs{background:var(--theme-animated-tab-circle--background--selected);border-color:var(--theme-animated-tab-circle--border-color--selected) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.selected.sc-ix-animated-tabs ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--selected) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.selected.sc-ix-animated-tabs .count.sc-ix-animated-tabs{border-color:var(--theme-tab-pill--border-color--selected) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.disabled.sc-ix-animated-tabs ix-icon.sc-ix-animated-tabs,.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:disabled ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--disabled) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs .count.sc-ix-animated-tabs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);display:flex;align-items:center;height:1rem;position:absolute;background-color:var(--theme-pill-outline--background);bottom:-0.55rem;border:1px solid var(--theme-tab-pill--border-color);border-radius:6.25rem;color:var(--theme-pill-outline--color);padding:0 0.25rem;background:var(--theme-color-1);transition:150ms}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs .count.bottom.sc-ix-animated-tabs{top:-0.55rem}.sc-ix-animated-tabs-h .content-container.sc-ix-animated-tabs{display:flex;flex-direction:row;height:calc(100% - 4.5rem);width:100%;overflow-y:auto;overflow-x:hidden}.sc-ix-animated-tabs-h .tab-active-underline.sc-ix-animated-tabs{background-color:var(--theme-animated-tab-indicator--background--selected);height:0.125rem;width:5rem;margin-top:-0.125rem;transition:150ms;position:absolute;top:4.5rem}.sc-ix-animated-tabs-h .tab-active-underline.bottom.sc-ix-animated-tabs{top:0;margin-top:0}";
-
-const AnimatedTabs = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.tabClick = createEvent(this, "tabClick", 7);
-    /**
-     * @deprecated - For debugging purposes only
-     */
-    this.disableAnimations = false;
-    /**
-     * Current selected tab index
-     */
-    this.selectedIndex = 0;
-    /**
-     * Placement of the tabs
-     */
-    this.tabPlacement = 'top';
-    this.easing = 'easeInOutSine';
-    this.firstRender = true;
-  }
-  onTabSelectionChange(newSelectionIndex, oldSelectionIndex) {
-    this.updateTabAnimation(oldSelectionIndex, newSelectionIndex);
-  }
-  onMouseDown() {
-    this.activeIndex = undefined;
-  }
-  get animatedTabs() {
-    return Array.from(this.hostElement.querySelectorAll('ix-animated-tab'));
-  }
-  get tabsContainer() {
-    return this.hostElement.querySelector('.tabs-container');
-  }
-  get contentContainer() {
-    return this.hostElement.querySelector('.content-container');
-  }
-  componentWillLoad() {
-    this.tabs = this.animatedTabs;
-  }
-  componentDidLoad() {
-    this.onTabSelectionChange(this.selectedIndex, -1);
-    this.observer = new MutationObserver(() => {
-      // Will trigger a re-render even if only the count attribute of a child tab changed
-      this.tabs = this.animatedTabs;
-    });
-    this.observer.observe(this.contentContainer, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ['count'],
-    });
-  }
-  //@ts-expect-error
-  disconnectCallback() {
-    var _a;
-    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  isSelected(tab) {
-    return this.tabs.indexOf(tab) === this.selectedIndex;
-  }
-  showTab(tab) {
-    if (this.isSelected(tab)) {
-      tab.classList.remove('d-none');
-    }
-  }
-  hideTab(tab) {
-    if (!this.isSelected(tab)) {
-      tab.classList.add('d-none');
-    }
-  }
-  slideOutLeft(tab) {
-    if (this.disableAnimations) {
-      this.hideTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [1, 0],
-      translateX: [0, '-100%'],
-      easing: this.easing,
-      complete: () => {
-        this.hideTab(tab);
-      },
-    });
-  }
-  slideOutRight(tab) {
-    if (this.disableAnimations) {
-      this.hideTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [1, 0],
-      translateX: [0, '100%'],
-      easing: this.easing,
-      complete: () => {
-        this.hideTab(tab);
-      },
-    });
-  }
-  slideInLeft(tab) {
-    if (this.firstRender) {
-      tab.classList.remove('d-none');
-      this.firstRender = false;
-      return;
-    }
-    if (this.disableAnimations) {
-      this.showTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [0, 1],
-      translateX: ['-100%', 0],
-      easing: this.easing,
-      begin: () => {
-        this.showTab(tab);
-      },
-    });
-  }
-  slideInRight(tab) {
-    if (this.firstRender) {
-      tab.classList.remove('d-none');
-      this.firstRender = false;
-      return;
-    }
-    if (this.disableAnimations) {
-      this.showTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [0, 1],
-      translateX: ['100%', 0],
-      easing: this.easing,
-      begin: () => {
-        this.showTab(tab);
-      },
-    });
-  }
-  updateTabAnimation(oldIndex, newIndex) {
-    var _a;
-    (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab, tabIndex) => {
-      if (tabIndex === oldIndex) {
-        if (tabIndex < newIndex) {
-          this.slideOutLeft(tab);
-        }
-        else if (tabIndex > newIndex) {
-          this.slideOutRight(tab);
-        }
-      }
-      else if (tabIndex === newIndex) {
-        if (tabIndex < oldIndex) {
-          this.slideInLeft(tab);
-        }
-        else if (tabIndex > oldIndex) {
-          this.slideInRight(tab);
-        }
-      }
-      else {
-        tab.classList.add('d-none');
-      }
-    });
-  }
-  onTabClick(index) {
-    this.selectedIndex = index;
-    this.tabClick.emit(index);
-  }
-  onTabMouseDown(index) {
-    this.activeIndex = index;
-  }
-  render() {
-    return (h(Host, { class: { 'flex-column-reverse': this.tabPlacement === 'bottom' } }, h("ul", { class: "tabs-container" }, this.animatedTabs.map((element, index) => (h("li", { class: { bottom: this.tabPlacement === 'bottom' }, onClick: () => this.onTabClick(index), onMouseDown: () => this.onTabMouseDown(index) }, h("div", { class: {
-        'tab-container': true,
-        selected: this.selectedIndex === index,
-      } }, h("ix-icon", { name: element.icon }), element.count ? (h("span", { class: {
-        count: true,
-        bottom: this.tabPlacement === 'bottom',
-      } }, convertToAbbreviationString(element.count))) : (''))))), h("div", { class: {
-        'tab-active-underline': true,
-        bottom: this.tabPlacement === 'bottom',
-      }, style: { 'margin-left': `calc(${this.selectedIndex} * 5rem)` } })), h("div", { class: "content-container" }, h("slot", null))));
-  }
-  get hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "selectedIndex": ["onTabSelectionChange"]
-  }; }
-};
-AnimatedTabs.style = animatedTabsCss;
-
-export { AnimatedTab as ix_animated_tab, AnimatedTabs as ix_animated_tabs };

package/dist/esm/ix-application-header.entry.js

@@ -1,26 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-55cfd20d.js';
-
-const applicationHeaderCss = ":host{display:flex;align-items:center;position:relative;width:100%;height:2.75rem;padding-left:1rem;color:var(--theme-app-header-logo--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color)}:host .name{margin-left:2.5rem;margin-right:2.5rem}:host .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden}";
-
-const ApplicationHeader = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  componentDidLoad() {
-    this.attachSiemensLogoIfLoaded();
-  }
-  async attachSiemensLogoIfLoaded() {
-    await window.customElements.whenDefined('ix-siemens-logo');
-    const logoElement = document.createElement('ix-siemens-logo');
-    if (!this.host.querySelector('[slot="logo"]')) {
-      this.host.shadowRoot.querySelector('.logo').appendChild(logoElement);
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("span", { class: "name" }, this.name), h("slot", null)));
-  }
-  get host() { return getElement(this); }
-};
-ApplicationHeader.style = applicationHeaderCss;
-
-export { ApplicationHeader as ix_application_header };

package/dist/esm/ix-basic-navigation.entry.js

@@ -1,40 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-55cfd20d.js';
-
-const basicNavigationCss = ".sc-ix-basic-navigation-h{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.sc-ix-basic-navigation-h ix-application-header.sc-ix-basic-navigation{z-index:calc(var(--theme-z-index-sticky) + 1)}.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{display:flex;height:calc(100% - 2.75rem);width:calc(100% - 4rem);position:relative;margin-left:4rem;overflow:auto}.hide-header.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{height:100%}";
-
-const BasicNavigation = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Hide application header
-     */
-    this.hideHeader = false;
-  }
-  get menu() {
-    return this.hostElement.querySelector('ix-menu');
-  }
-  componentDidRender() {
-    if (this.menu) {
-      this.appendMenu();
-      this.adjustMenuHeight();
-      this.menu.applicationName = this.applicationName;
-    }
-  }
-  appendMenu() {
-    this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);
-  }
-  adjustMenuHeight() {
-    if (!this.hideHeader) {
-      this.menu.style.height = 'calc(100% - 2.75rem)';
-    }
-  }
-  render() {
-    return (h(Host, { class: {
-        'hide-header': this.hideHeader,
-      } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo" }))) : null, h("div", { id: "menu-placeholder" }), h("div", { class: "content", onClick: () => this.menu.toggleMenu(false) }, h("slot", null))));
-  }
-  get hostElement() { return getElement(this); }
-};
-BasicNavigation.style = basicNavigationCss;
-
-export { BasicNavigation as ix_basic_navigation };

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

@@ -1,85 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-55cfd20d.js';
-import { a as anime } from './anime.es-185e9087.js';
-
-const blindCss = ".sc-ix-blind-h{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}.sc-ix-blind-h .blind-header.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:1rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}.sc-ix-blind-h .blind-header.sc-ix-blind .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind .blind-header-title-default.sc-ix-blind{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind{border-radius:var(--theme-blind--border-radius)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--active)}.sc-ix-blind-h .blind-custom-header.sc-ix-blind{display:flex;align-items:center}.sc-ix-blind-h .blind-content.sc-ix-blind{display:block;padding:1rem;max-height:1;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}.sc-ix-blind-h .blind-content.hide.sc-ix-blind{max-height:0;padding-top:0px;padding-bottom:0px}";
-
-const Blind = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.collapsedChange = createEvent(this, "collapsedChange", 7);
-    /**
-     * Collapsed state
-     */
-    this.collapsed = false;
-  }
-  onHeaderClick(e) {
-    e.preventDefault();
-    e.stopImmediatePropagation();
-    this.collapsed = !this.collapsed;
-    this.collapsedChange.emit(this.collapsed);
-  }
-  componentDidLoad() {
-    this.animateCollapse(this.collapsed);
-  }
-  get content() {
-    return this.hostElement.querySelector('.blind-content');
-  }
-  animation(isCollapsed) {
-    this.animateCollapse(isCollapsed);
-  }
-  animateCollapse(isCollapsed) {
-    if (isCollapsed) {
-      this.rotateChevronRight();
-    }
-    else {
-      this.rotateChevronDown();
-    }
-  }
-  rotateChevronDown() {
-    anime({
-      targets: this.chevronRef,
-      duration: 150,
-      easing: 'easeInOutSine',
-      rotateZ: 90,
-    });
-    anime({
-      targets: this.content,
-      duration: 150,
-      easing: 'easeInOutSine',
-      opacity: 1,
-    });
-  }
-  rotateChevronRight() {
-    anime({
-      targets: this.chevronRef,
-      duration: 150,
-      easing: 'easeInOutSine',
-      rotateZ: 0,
-    });
-    anime({
-      targets: this.content,
-      duration: 150,
-      easing: 'easeInOutSine',
-      opacity: 0,
-    });
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        'blind-header': true,
-        closed: this.collapsed,
-      }, onClick: (e) => this.onHeaderClick(e) }, h("span", { ref: (ref) => (this.chevronRef = ref), class: {
-        glyph: true,
-        'glyph-chevron-right-small': true,
-      } }), h("div", { class: "blind-header-title" }, this.label !== undefined ? (h("span", { class: "blind-header-title-default" }, this.label)) : (h("slot", { name: "custom-header" })))), h("div", { class: {
-        'blind-content': true,
-        hide: this.collapsed,
-      } }, h("slot", null))));
-  }
-  get hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "collapsed": ["animation"]
-  }; }
-};
-Blind.style = blindCss;
-
-export { Blind as ix_blind };

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

@@ -1,150 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-55cfd20d.js';
-import { a as anime } from './anime.es-185e9087.js';
-import { c as createMutationObserver } from './mutation-observer-379959bb.js';
-
-const breadcrumbCss = ".sc-ix-breadcrumb-h{display:flex;height:2.5rem;justify-content:flex-start;align-items:center;background-color:transparent;overflow:hidden}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb{position:relative;display:flex;justify-content:flex-start;align-items:center;white-space:nowrap;border-radius:var(--theme-breadcrumb--border-radius);height:2rem;max-height:2rem;min-width:0;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem;padding:0.5rem 0 0.5rem 0.25rem;outline:none;cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-width:0;font-weight:700}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb ix-icon.sc-ix-breadcrumb{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;-webkit-margin-end:0;margin-inline-end:0}.sc-ix-breadcrumb-h .crumb.last.sc-ix-breadcrumb{background-color:transparent !important;cursor:default;-webkit-padding-end:0.25rem;padding-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(:last-of-type){flex-shrink:0;max-width:14rem}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb{overflow:visible}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .remove-anchor.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb{display:flex}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .more-text-ellipsis.sc-ix-breadcrumb{width:1rem;display:inline-block;font-weight:700}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{line-height:unset}.sc-ix-breadcrumb-h .crumb-items.sc-ix-breadcrumb{display:contents}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-btn--background);border:var(--theme-btn--btn-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color)}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color)}.sc-ix-breadcrumb-h .crumb.btn.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-last--color)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-ghost--background);border:var(--theme-btn--ghost-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color)}.sc-ix-breadcrumb-h .crumb.ghost.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-last--color)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-ghost--background--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-ghost--background--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--active)}.dropdown-overflow.sc-ix-breadcrumb .dropdown-menu.sc-ix-breadcrumb{max-height:25rem;overflow-y:auto}";
-
-const Breadcrumb = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.itemClick = createEvent(this, "itemClick", 7);
-    this.nextClick = createEvent(this, "nextClick", 7);
-    /**
-     * Excess items will get hidden inside of dropdown
-     */
-    this.visibleItemCount = 9;
-    /**
-     * Items will be accessible through a dropdown
-     */
-    this.nextItems = [];
-    /**
-     * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
-     */
-    this.ghost = false;
-    this.items = [];
-  }
-  get breadcrumbItems() {
-    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));
-  }
-  get crumbItems() {
-    return Array.from(this.hostElement.querySelectorAll('.crumb-items .crumb'));
-  }
-  onItemClick(item) {
-    this.itemClick.emit(item);
-  }
-  componentDidLoad() {
-    this.mutationObserver = createMutationObserver(() => {
-      const updatedItems = this.getItems();
-      const update = () => {
-        this.items = updatedItems;
-      };
-      if (updatedItems.length >= this.items.length) {
-        update();
-      }
-      else if (updatedItems.length < this.items.length) {
-        const last = this.crumbItems[this.crumbItems.length - 1];
-        this.animationFadeOut(last, () => update());
-      }
-    });
-    this.mutationObserver.observe(this.hostElement.querySelector('.crumb-items'), {
-      subtree: true,
-      childList: true,
-    });
-  }
-  componentWillLoad() {
-    this.items = this.getItems();
-  }
-  getItems() {
-    return this.breadcrumbItems.map((item) => {
-      return { label: item.label, icon: item.icon };
-    });
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  animationFadeOut(ref, complete) {
-    anime({
-      targets: ref,
-      translateX: '-100%',
-      duration: 150,
-      opacity: [1, 0],
-      easing: 'linear',
-      complete: () => complete(),
-    });
-  }
-  animationFadeIn(ref) {
-    anime({
-      targets: ref,
-      duration: 150,
-      opacity: [0, 1],
-      translateX: ['-100%', '0%'],
-      easing: 'linear',
-    });
-  }
-  handleLastButtonRef(ref, last) {
-    var _a;
-    if (last) {
-      this.animationFadeIn(ref);
-    }
-    if (last && ((_a = this.nextItems) === null || _a === void 0 ? void 0 : _a.length)) {
-      this.nextButtonRef = ref;
-    }
-  }
-  sliceHiddenItems() {
-    let sliceIndex = 0;
-    if (this.items.length > this.visibleItemCount) {
-      sliceIndex = this.items.length - this.visibleItemCount;
-    }
-    return this.items.slice(sliceIndex);
-  }
-  clickItem(item, last) {
-    if (!last) {
-      this.onItemClick(item);
-    }
-  }
-  renderBreadcrumbItems() {
-    return this.sliceHiddenItems().map((item, index, array) => {
-      var _a;
-      const last = index === array.length - 1;
-      const isLastItem = last && !((_a = this.nextItems) === null || _a === void 0 ? void 0 : _a.length);
-      return (h("div", { ref: (ref) => this.handleLastButtonRef(ref, last), "data-breadcrumb": index, class: {
-          crumb: true,
-          clickable: true,
-          ghost: this.ghost,
-          btn: !this.ghost,
-          last: isLastItem,
-          'remove-hover': isLastItem,
-        }, onClick: () => this.clickItem(item.label, last), "data-testid": "item" }, h("span", { class: "crumb-text remove-anchor" }, item.icon ? h("ix-icon", { name: item.icon, size: "16" }) : '', item.label), !isLastItem ? (h("span", { class: "glyph glyph-18 glyph-chevron-right-small text-default-text" })) : null));
-    });
-  }
-  render() {
-    var _a, _b, _c;
-    return (h(Host, null, h("ix-dropdown", { trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
-        ? this.previousButtonRef
-        : null }, this.items
-      .slice(0, this.items.length - this.visibleItemCount)
-      .map((item) => (h("ix-dropdown-item", { label: item.label, onClick: () => this.onItemClick(item.label) })))), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("div", { class: "crumb crumb-dropdown", ref: (ref) => (this.previousButtonRef = ref) }, h("span", { class: "remove-anchor more-text" }, h("span", { class: "more-text-ellipsis" }, "..."), h("span", { class: "glyph glyph-16 glyph-chevron-right" })))) : null, h("div", { class: "crumb-items" }, this.renderBreadcrumbItems(), h("slot", null)), h("ix-dropdown", { trigger: this.nextButtonRef }, (_c = this.nextItems) === null || _c === void 0 ? void 0 : _c.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
-        this.nextClick.emit({
-          event: e,
-          item,
-        });
-      } }))))));
-  }
-  get hostElement() { return getElement(this); }
-};
-Breadcrumb.style = breadcrumbCss;
-
-const breadcrumbItemCss = ".sc-ix-breadcrumb-item-h{display:block}";
-
-const BreadcrumbItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-};
-BreadcrumbItem.style = breadcrumbItemCss;
-
-export { Breadcrumb as ix_breadcrumb, BreadcrumbItem as ix_breadcrumb_item };

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

@@ -1,46 +0,0 @@
-import { r as registerInstance, h } from './index-55cfd20d.js';
-import { g as getButtonClasses } from './base-button-7bfb747f.js';
-
-const buttonCss = ".sc-ix-button-h{display:inline-block;height:2rem}[disabled].sc-ix-button-h{pointer-events:none}";
-
-const Button = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Button varaint
-     */
-    this.variant = 'Primary';
-    /**
-     * Outline button
-     */
-    this.outline = false;
-    /**
-     * Invisible button
-     *
-     * @deprecated use ghost property
-     */
-    this.invisible = false;
-    /**
-     * Button with no background or outline
-     */
-    this.ghost = false;
-    /**
-     * Show button as selected. Should be used with outline or invisible
-     */
-    this.selected = false;
-    /**
-     * Disable the button
-     */
-    this.disabled = false;
-    /**
-     * Type of the button
-     */
-    this.type = 'button';
-  }
-  render() {
-    return (h("button", { type: this.type, class: getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, false, false, this.selected, this.disabled) }, h("slot", null)));
-  }
-};
-Button.style = buttonCss;
-
-export { Button as ix_button };