@siemens/ix 1.0.0-beta.2

package/dist/esm/index.js

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,212 @@
+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

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } 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-block;position:relative;height:32px;overflow:hidden}";
+
+const ApplicationHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("span", { class: "name" }, this.name), h("slot", null)));
+  }
+};
+ApplicationHeader.style = applicationHeaderCss;
+
+export { ApplicationHeader as ix_application_header };

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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,85 @@
+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,.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

@@ -0,0 +1,150 @@
+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,.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

@@ -0,0 +1,46 @@
+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}";
+
+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 };