@siemens/ix 1.0.0-beta.2

package/dist/cjs/index.cjs.js

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const logicalFilterOperator = require('./logical-filter-operator-467e2faf.js');
+const flipTileState = require('./flip-tile-state-c95639e5.js');
+const modal = require('./modal-5be2b1a3.js');
+const rwd_util = require('./rwd.util-482d41d4.js');
+const modalUtils = require('./modal-utils-5d7bb217.js');
+const defaultTreeItem = require('./default-tree-item-4597cd84.js');
+const uploadFileState = require('./upload-file-state-923b2c65.js');
+require('./index-1e4a348f.js');
+require('./typed-event-8f5a32a2.js');
+require('./anime.es-8822f296.js');
+require('./animation-dfe01edc.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' }));
+};
+
+exports.InputState = logicalFilterOperator.InputState;
+Object.defineProperty(exports, 'LogicalFilterOperator', {
+  enumerable: true,
+  get: function () {
+    return logicalFilterOperator.LogicalFilterOperator;
+  }
+});
+Object.defineProperty(exports, 'FlipTileState', {
+  enumerable: true,
+  get: function () {
+    return flipTileState.FlipTileState;
+  }
+});
+exports.Modal = modal.Modal;
+exports.ModalContainer = modal.ModalContainer;
+exports.convertToAbbreviationString = rwd_util.convertToAbbreviationString;
+exports.convertToRemString = rwd_util.convertToRemString;
+exports.closeModal = modalUtils.closeModal;
+exports.dismissModal = modalUtils.dismissModal;
+exports.modal = modalUtils.modal;
+exports.renderDefaultItem = defaultTreeItem.renderDefaultItem;
+Object.defineProperty(exports, 'UploadFileState', {
+  enumerable: true,
+  get: function () {
+    return uploadFileState.UploadFileState;
+  }
+});
+exports.FilterState = FilterState;
+exports.toast = toast;

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

@@ -0,0 +1,217 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e4a348f.js');
+const anime_es = require('./anime.es-8822f296.js');
+const animation = require('./animation-dfe01edc.js');
+const rwd_util = require('./rwd.util-482d41d4.js');
+
+const animatedTabCss = ".sc-ix-animated-tab-h{display:block;height:100%;width:100%;position:absolute}";
+
+const AnimatedTab = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.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) {
+    index.registerInstance(this, hostRef);
+    this.tabClick = index.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_es.anime({
+      targets: tab,
+      duration: animation.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_es.anime({
+      targets: tab,
+      duration: animation.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_es.anime({
+      targets: tab,
+      duration: animation.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_es.anime({
+      targets: tab,
+      duration: animation.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 (index.h(index.Host, { class: { 'flex-column-reverse': this.tabPlacement === 'bottom' } }, index.h("ul", { class: "tabs-container" }, this.animatedTabs.map((element, index$1) => (index.h("li", { class: { bottom: this.tabPlacement === 'bottom' }, onClick: () => this.onTabClick(index$1), onMouseDown: () => this.onTabMouseDown(index$1) }, index.h("div", { class: {
+        'tab-container': true,
+        selected: this.selectedIndex === index$1,
+      } }, index.h("ix-icon", { name: element.icon }), element.count ? (index.h("span", { class: {
+        count: true,
+        bottom: this.tabPlacement === 'bottom',
+      } }, rwd_util.convertToAbbreviationString(element.count))) : (''))))), index.h("div", { class: {
+        'tab-active-underline': true,
+        bottom: this.tabPlacement === 'bottom',
+      }, style: { 'margin-left': `calc(${this.selectedIndex} * 5rem)` } })), index.h("div", { class: "content-container" }, index.h("slot", null))));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "selectedIndex": ["onTabSelectionChange"]
+  }; }
+};
+AnimatedTabs.style = animatedTabsCss;
+
+exports.ix_animated_tab = AnimatedTab;
+exports.ix_animated_tabs = AnimatedTabs;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e4a348f.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) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "logo" }, index.h("slot", { name: "logo" })), index.h("span", { class: "name" }, this.name), index.h("slot", null)));
+  }
+};
+ApplicationHeader.style = applicationHeaderCss;
+
+exports.ix_application_header = ApplicationHeader;

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

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e4a348f.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) {
+    index.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 (index.h(index.Host, { class: {
+        'hide-header': this.hideHeader,
+      } }, !this.hideHeader ? (index.h("ix-application-header", { name: this.applicationName }, index.h("slot", { name: "logo" }))) : null, index.h("div", { id: "menu-placeholder" }), index.h("div", { class: "content", onClick: () => this.menu.toggleMenu(false) }, index.h("slot", null))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+BasicNavigation.style = basicNavigationCss;
+
+exports.ix_basic_navigation = BasicNavigation;

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

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e4a348f.js');
+const anime_es = require('./anime.es-8822f296.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) {
+    index.registerInstance(this, hostRef);
+    this.collapsedChange = index.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_es.anime({
+      targets: this.chevronRef,
+      duration: 150,
+      easing: 'easeInOutSine',
+      rotateZ: 90,
+    });
+    anime_es.anime({
+      targets: this.content,
+      duration: 150,
+      easing: 'easeInOutSine',
+      opacity: 1,
+    });
+  }
+  rotateChevronRight() {
+    anime_es.anime({
+      targets: this.chevronRef,
+      duration: 150,
+      easing: 'easeInOutSine',
+      rotateZ: 0,
+    });
+    anime_es.anime({
+      targets: this.content,
+      duration: 150,
+      easing: 'easeInOutSine',
+      opacity: 0,
+    });
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: {
+        'blind-header': true,
+        closed: this.collapsed,
+      }, onClick: (e) => this.onHeaderClick(e) }, index.h("span", { ref: (ref) => (this.chevronRef = ref), class: {
+        glyph: true,
+        'glyph-chevron-right-small': true,
+      } }), index.h("div", { class: "blind-header-title" }, this.label !== undefined ? (index.h("span", { class: "blind-header-title-default" }, this.label)) : (index.h("slot", { name: "custom-header" })))), index.h("div", { class: {
+        'blind-content': true,
+        hide: this.collapsed,
+      } }, index.h("slot", null))));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "collapsed": ["animation"]
+  }; }
+};
+Blind.style = blindCss;
+
+exports.ix_blind = Blind;

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

@@ -0,0 +1,155 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1e4a348f.js');
+const anime_es = require('./anime.es-8822f296.js');
+const mutationObserver = require('./mutation-observer-29bedada.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) {
+    index.registerInstance(this, hostRef);
+    this.itemClick = index.createEvent(this, "itemClick", 7);
+    this.nextClick = index.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 = 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_es.anime({
+      targets: ref,
+      translateX: '-100%',
+      duration: 150,
+      opacity: [1, 0],
+      easing: 'linear',
+      complete: () => complete(),
+    });
+  }
+  animationFadeIn(ref) {
+    anime_es.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$1, array) => {
+      var _a;
+      const last = index$1 === array.length - 1;
+      const isLastItem = last && !((_a = this.nextItems) === null || _a === void 0 ? void 0 : _a.length);
+      return (index.h("div", { ref: (ref) => this.handleLastButtonRef(ref, last), "data-breadcrumb": index$1, 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" }, index.h("span", { class: "crumb-text remove-anchor" }, item.icon ? index.h("ix-icon", { name: item.icon, size: "16" }) : '', item.label), !isLastItem ? (index.h("span", { class: "glyph glyph-18 glyph-chevron-right-small text-default-text" })) : null));
+    });
+  }
+  render() {
+    var _a, _b, _c;
+    return (index.h(index.Host, null, index.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) => (index.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 ? (index.h("div", { class: "crumb crumb-dropdown", ref: (ref) => (this.previousButtonRef = ref) }, index.h("span", { class: "remove-anchor more-text" }, index.h("span", { class: "more-text-ellipsis" }, "..."), index.h("span", { class: "glyph glyph-16 glyph-chevron-right" })))) : null, index.h("div", { class: "crumb-items" }, this.renderBreadcrumbItems(), index.h("slot", null)), index.h("ix-dropdown", { trigger: this.nextButtonRef }, (_c = this.nextItems) === null || _c === void 0 ? void 0 : _c.map((item) => (index.h("ix-dropdown-item", { label: item, onClick: (e) => {
+        this.nextClick.emit({
+          event: e,
+          item,
+        });
+      } }))))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+Breadcrumb.style = breadcrumbCss;
+
+const breadcrumbItemCss = ".sc-ix-breadcrumb-item-h{display:block}";
+
+const BreadcrumbItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
+BreadcrumbItem.style = breadcrumbItemCss;
+
+exports.ix_breadcrumb = Breadcrumb;
+exports.ix_breadcrumb_item = BreadcrumbItem;