@siemens/ix 1.0.0-beta.2

package/dist/esm/ix-date-time-card.entry.js

@@ -0,0 +1,32 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-55cfd20d.js';
+
+const dateTimeCardCss = ".card.sc-ix-date-time-card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset}.card.individual.sc-ix-date-time-card{box-shadow:0 0 2px 0 var(--theme-input--border-color-bottom--disabled), 0 4px 8px 0 var(--theme-input--border-color-bottom--disabled), 0 12px 18px 0px var(--theme-input--border-color-bottom--disabled);border:1px solid var(--theme-menu--border-color);border-radius:4px}.card.left.sc-ix-date-time-card{border-radius:4px 0 0 4px}.card.right.sc-ix-date-time-card{border-radius:0 4px 4px 0}.card.sc-ix-date-time-card .header.sc-ix-date-time-card{padding:1rem}.card.sc-ix-date-time-card .separator.sc-ix-date-time-card{border:1px solid var(--theme-datepicker-separator--background);width:100%}.card.sc-ix-date-time-card .content.sc-ix-date-time-card{height:100%;padding:0px 1rem 1rem 1rem}";
+
+const DateTimeCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * set styles
+     */
+    this.individual = true;
+    /**
+     * Set corners style
+     */
+    this.corners = 'rounded';
+  }
+  cardClasses() {
+    return {
+      card: true,
+      individual: this.individual,
+      left: this.corners === 'left',
+      right: this.corners === 'right',
+    };
+  }
+  render() {
+    return (h(Host, null, h("div", { class: this.cardClasses() }, h("div", { class: "header" }, h("slot", { name: "header" })), h("div", { class: "separator" }), h("div", { class: "content" }, h("slot", null)))));
+  }
+  get hostElement() { return getElement(this); }
+};
+DateTimeCard.style = dateTimeCardCss;
+
+export { DateTimeCard as ix_date_time_card };

package/dist/esm/ix-datetime-picker.entry.js

@@ -0,0 +1,40 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-55cfd20d.js';
+
+const datetimePickerCss = ".sc-ix-datetime-picker-h{background-color:var(--theme-menu--background);box-shadow:0 0 2px 0 var(--theme-input--border-color-bottom--disabled), 0 4px 8px 0 var(--theme-input--border-color-bottom--disabled), 0 12px 18px 0px var(--theme-input--border-color-bottom--disabled);border-radius:4px}.flex.sc-ix-datetime-picker{display:flex}.done.sc-ix-datetime-picker{display:flex;justify-content:flex-end;margin:0 1rem 1rem 0}";
+
+const DatePicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.done = createEvent(this, "done", 7);
+    /**
+     * Set range size
+     */
+    this.range = true;
+    /**
+     * Show Hour Input
+     */
+    this.showHour = false;
+    /**
+     * Show Minutes Input
+     */
+    this.showMinutes = false;
+    /**
+     * Show Seconds Input
+     */
+    this.showSeconds = false;
+    /**
+     * Show Time Reference Input
+     */
+    this.showTimeReference = false;
+  }
+  doneEvent() {
+    console.log(this.date + ' ' + this.time);
+    this.done.emit(this.date + ' ' + this.time);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "flex" }, h("ix-date-picker", { corners: "left", individual: false, range: this.range, onDateChange: (date) => (this.date = date.detail) }), h("ix-time-picker", { corners: "right", individual: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, showTimeReference: this.showTimeReference, onTimeChange: (time) => (this.time = time.detail) })), h("div", { class: "done" }, h("ix-button", { onClick: () => this.doneEvent() }, "Done"))));
+  }
+};
+DatePicker.style = datetimePickerCss;
+
+export { DatePicker as ix_datetime_picker };

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

@@ -0,0 +1,118 @@
+import { r as registerInstance, c as createEvent, h } from './index-55cfd20d.js';
+import { a as anime } from './anime.es-185e9087.js';
+
+const drawerCss = ".drawer-container.sc-ix-drawer{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);visibility:hidden;display:flex;position:absolute;flex-flow:column nowrap;justify-content:flex-start;align-items:center;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;transition:all 300ms ease-out}.toggle.sc-ix-drawer{z-index:100;visibility:visible}.drawer-container.full-height.sc-ix-drawer{min-height:100%}.header.sc-ix-drawer{display:flex;position:relative;align-items:center;justify-content:flex-end;height:3.5rem;padding:0.5rem 1rem;width:100%;order:1}.header.sc-ix-drawer .header-content.sc-ix-drawer{flex-grow:1;margin-right:1rem}.content.sc-ix-drawer{position:relative;flex:1;flex-grow:1;order:2;height:100%;width:100%;overflow-y:auto}";
+
+const Drawer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.open = createEvent(this, "open", 7);
+    this.drawerClose = createEvent(this, "drawerClose", 7);
+    /**
+     * Show or hide the drawer
+     */
+    this.show = false;
+    /**
+     * Fired in case of an outside click during drawer showed state
+     */
+    this.closeOnClickOutside = true;
+    /**
+     * Render the drawer with maximum height
+     */
+    this.fullHeight = false;
+    /**
+     * Min width interpreted as REM
+     */
+    this.minWidth = 16;
+    /**
+     * Max width interpreted as REM
+     */
+    this.maxWidth = 28;
+    /**
+     * Width interpreted as REM if not set to 'auto'
+     */
+    this.width = this.minWidth;
+    this.callback = this.clickedOutside.bind(this);
+  }
+  onShowChanged(newValue) {
+    this.show = newValue !== undefined ? newValue : !this.show;
+    this.toggleDrawer(this.show);
+  }
+  /**
+   * Toggle or define show state of drawer
+   * @param show Overwrite toggle state with boolean
+   */
+  async toggleDrawer(show) {
+    this.show = show !== undefined ? show : !this.show;
+    if (show) {
+      this.open.emit();
+      this.slideInRight(this.divElement);
+      setTimeout(() => {
+        window.addEventListener('mousedown', this.callback);
+      }, 300);
+    }
+    else {
+      this.drawerClose.emit();
+      this.slideOutRight(this.divElement);
+      window.removeEventListener('mousedown', this.callback);
+    }
+    return Promise.resolve();
+  }
+  onCloseClicked() {
+    this.show = false;
+  }
+  clickedOutside(evt) {
+    if (!this.closeOnClickOutside) {
+      return;
+    }
+    const target = evt.target;
+    const closestElement = target.closest('#div-container');
+    const btn = target.closest('#drawer-btn');
+    if (closestElement !== this.divElement && target !== btn) {
+      this.show = false;
+    }
+  }
+  slideOutRight(el) {
+    anime({
+      targets: el,
+      duration: Drawer.duration,
+      translateX: [0, '16rem'],
+      opacity: [1, 0],
+      easing: 'easeInSine',
+      complete: () => {
+        el.classList.add('d-none');
+      },
+    });
+  }
+  slideInRight(el) {
+    anime({
+      targets: el,
+      duration: Drawer.duration,
+      translateX: ['16rem', 0],
+      opacity: [0, 1],
+      easing: 'easeOutSine',
+      begin: () => {
+        el.classList.remove('d-none');
+      },
+    });
+  }
+  render() {
+    return (h("div", { class: {
+        'drawer-container': true,
+        toggle: this.show,
+        'full-height': this.fullHeight,
+        'd-none': true,
+      }, style: {
+        width: this.width === 'auto' ? this.width : `${this.width}rem`,
+        'min-width': `${this.minWidth}rem`,
+        'max-width': `${this.maxWidth}rem`,
+      }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { class: "header" }, h("div", { class: "header-content" }, h("slot", { name: "header" })), h("ix-icon-button", { icon: "close", size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), h("div", { class: "content" }, h("slot", null))));
+  }
+  static get watchers() { return {
+    "show": ["onShowChanged"]
+  }; }
+};
+Drawer.duration = 300;
+Drawer.style = drawerCss;
+
+export { Drawer as ix_drawer };

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

@@ -0,0 +1,198 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-55cfd20d.js';
+import { c as createPopper } from './popper-42db9fbd.js';
+
+const dropdownCss = ".dropup,.dropend,.dropdown,.dropstart,.dropup-center,.dropdown-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\";border-top:0.3em solid;border-right:0.3em solid transparent;border-bottom:0;border-left:0.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex:1000;--bs-dropdown-min-width:10rem;--bs-dropdown-padding-x:0;--bs-dropdown-padding-y:0.5rem;--bs-dropdown-spacer:0.125rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color:#212529;--bs-dropdown-bg:#fff;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-border-radius:0.375rem;--bs-dropdown-border-width:1px;--bs-dropdown-inner-border-radius:calc(0.375rem - 1px);--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-divider-margin-y:0.5rem;--bs-dropdown-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-dropdown-link-color:#212529;--bs-dropdown-link-hover-color:#1e2125;--bs-dropdown-link-hover-bg:#e9ecef;--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-item-padding-x:1rem;--bs-dropdown-item-padding-y:0.25rem;--bs-dropdown-header-color:#6c757d;--bs-dropdown-header-padding-x:1rem;--bs-dropdown-header-padding-y:0.5rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}.dropdown-menu-start{--bs-position:start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position:end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width: 576px){.dropdown-menu-sm-start{--bs-position:start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position:end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 768px){.dropdown-menu-md-start{--bs-position:start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position:end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 992px){.dropdown-menu-lg-start{--bs-position:start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position:end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 1200px){.dropdown-menu-xl-start{--bs-position:start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position:end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 1400px){.dropdown-menu-xxl-start{--bs-position:start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{--bs-position:end}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}.dropup .dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\";border-top:0;border-right:0.3em solid transparent;border-bottom:0.3em solid;border-left:0.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}.dropend .dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\";border-top:0.3em solid transparent;border-right:0;border-bottom:0.3em solid transparent;border-left:0.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\"}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:0.255em;vertical-align:0.255em;content:\"\";border-top:0.3em solid transparent;border-right:0.3em solid;border-bottom:0.3em solid transparent}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:var(--bs-dropdown-divider-margin-y) 0;overflow:hidden;border-top:1px solid var(--bs-dropdown-divider-bg);opacity:1}.dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:400;color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:hover,.dropdown-item:focus{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}.dropdown-item.active,.dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);margin-bottom:0;font-size:0.875rem;color:var(--bs-dropdown-header-color);white-space:nowrap}.dropdown-item-text{display:block;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);color:var(--bs-dropdown-link-color)}.dropdown-menu-dark{--bs-dropdown-color:#dee2e6;--bs-dropdown-bg:#343a40;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-link-color:#dee2e6;--bs-dropdown-link-hover-color:#fff;--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-link-hover-bg:rgba(255, 255, 255, 0.15);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-header-color:#adb5bd}.dropup .btn,.dropright .btn,.dropdown .btn,.dropleft .btn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;text-align:left;width:100%}.dropdown-group{margin:0.687rem;display:block;position:relative;width:21.562rem;border-radius:0.25rem;background-color:#f8f9fa;border:solid 0.062rem rgba(0, 0, 0, 0.25)}.dropdown-group .dropdown-group-title{display:block;position:relative;font-size:0.875rem;text-align:left;margin:0.937rem 0 1.25rem 0.937rem}.dropdown-group .dropdown-group-content{position:relative;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:11.562rem;margin:0.937rem 0 0.937rem 0.937rem}.dropdown-group .dropdown-group-content>*{margin-bottom:1rem}.dropdown-group-submit{display:flex;justify-content:space-between;margin:0 0.687rem 0 0.687rem}.dropdown-menu{background-color:var(--theme-menu--background);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);border:var(--theme-menu--border-thickness) solid var(--theme-menu--border--color);border-radius:var(--theme-menu--border-radius);max-width:100vw;padding:0.25rem 0;transition:background-color 150ms;box-shadow:var(--theme-menu--box-shadow)}.dropdown-menu.xl>.dropdown-item{height:2.5rem;line-height:2.187rem}.dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}.dropdown-buttons{display:flex;padding:0.25rem 0.5rem}.dropdown-buttons ix-icon-button+ix-icon-button{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.dropdown-item{display:flex;height:2.5rem;position:relative;align-items:center;cursor:pointer;padding:0 2rem;border:1px solid transparent;color:var(--theme-menu-item--color)}.dropdown-item:focus{background-color:var(--theme-menu-item--background);color:var(--theme-menu-item--color)}.dropdown-item:focus-visible{outline:none;background-color:var(--theme-menu-item--background);border-color:#119fff;color:var(--theme-menu-item--color--focus)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):hover{color:var(--theme-menu-item--color--hover);background-color:var(--theme-menu-item--background--hover)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):active{color:var(--theme-menu-item--color--active);background-color:var(--theme-menu-item--background--active)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--theme-menu-item--color--disabled);background-color:var(--theme-menu-item--background--disabled)}.dropdown-item>a,.dropdown-item a:hover,.dropdown-item a:active{color:var(--theme-color-std-text)}.dropdown-item>.glyph{color:var(--theme-menu-item-icon--color);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.dropdown-item>.glyph.glyph-single-check{color:var(--theme-menu-item-icon-check--color)}.dropdown-item>input[type=checkbox]+label{margin-bottom:0px}.dropdown-item>input[type=checkbox]+label::before{margin-right:1rem}.dropdown-divider{border-top:1px solid var(--theme-menu-separator--background);margin:0.25rem 0}button.dropdown-toggle{position:relative;padding-right:1.5rem}button.dropdown-toggle::after{position:absolute;top:45%;right:0.5rem}:host{min-width:0px}";
+
+const Dropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.showChanged = createEvent(this, "showChanged", 7);
+    /**
+     * Show dropdown
+     */
+    this.show = false;
+    /**
+     * Close behavior
+     */
+    this.closeBehavior = 'both';
+    /**
+     * Placement of the dropdown
+     */
+    this.placement = 'bottom-end';
+    /**
+     * Position strategy
+     */
+    this.positioningStrategy = 'fixed';
+    /**
+     * Adjust dropdown width to the parent width
+     * @deprecated - property has a typo and will get removed in the next major version. Use `adjustDropdownWidthToReferenceWidth` instead.
+     */
+    this.adjustDropdownWidthToReferenceWith = false;
+    /**
+     * Adjust dropdown width to the parent width
+     */
+    this.adjustDropdownWidthToReferenceWidth = false;
+    this.openBind = this.open.bind(this);
+  }
+  get dropdownItems() {
+    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));
+  }
+  resolveElement(prop) {
+    if (typeof prop === 'string') {
+      return document.querySelector('#' + prop);
+    }
+    return prop;
+  }
+  async componentDidLoad() {
+    if (this.trigger) {
+      this.registerListener(this.trigger);
+    }
+  }
+  registerListener(element) {
+    this.triggerElement = this.resolveElement(element);
+    this.triggerElement.addEventListener('click', this.openBind);
+  }
+  unregisterListener(element) {
+    const trigger = this.resolveElement(element);
+    trigger.removeEventListener('click', this.openBind);
+  }
+  componentDidRender() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
+  }
+  async changedShow(newShow) {
+    var _a;
+    if (newShow) {
+      this.anchorElement = this.anchor
+        ? this.resolveElement(this.anchor)
+        : this.resolveElement(this.trigger);
+      if (this.anchorElement) {
+        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.popperInstance = createPopper(this.anchorElement, this.dropdownRef, {
+          placement: this.placement,
+          strategy: this.positioningStrategy,
+          onFirstUpdate: ({ elements }) => {
+            if (this.adjustDropdownWidthToReferenceWith ||
+              this.adjustDropdownWidthToReferenceWidth) {
+              const { popper, reference } = elements;
+              const width = reference.getBoundingClientRect().width;
+              popper.style.width = `${width}px`;
+            }
+          },
+        });
+      }
+    }
+  }
+  changedTrigger(newTriggerValue, oldTriggerValue) {
+    if (newTriggerValue) {
+      this.registerListener(newTriggerValue);
+    }
+    if (oldTriggerValue) {
+      this.unregisterListener(oldTriggerValue);
+    }
+  }
+  clickOutside(event) {
+    const target = event.target;
+    if (this.show === false ||
+      this.closeBehavior === false ||
+      this.anchorElement === target ||
+      this.triggerElement === target) {
+      return;
+    }
+    switch (this.closeBehavior) {
+      case 'outside':
+        if (!this.dropdownRef.contains(target)) {
+          this.close();
+        }
+        break;
+      case 'inside':
+        if (this.dropdownRef.contains(target)) {
+          this.close();
+        }
+        break;
+      default:
+        this.close();
+    }
+  }
+  open(event) {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    this.show = !this.show;
+    this.showChanged.emit(this.show);
+  }
+  close() {
+    this.show = false;
+    this.showChanged.emit(this.show);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  /**
+   * Update position of dropdown
+   */
+  async updatePosition() {
+    var _a;
+    await ((_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update());
+  }
+  render() {
+    return (h(Host, { ref: (ref) => (this.dropdownRef = ref), class: {
+        'dropdown-menu': true,
+        show: this.show,
+      }, style: {
+        margin: '0',
+        minWidth: '0px',
+      } }, h("div", { style: { display: 'contents' } }, this.header ? h("div", { class: "dropdown-header" }, this.header) : '', h("slot", null))));
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "show": ["changedShow"],
+    "trigger": ["changedTrigger"]
+  }; }
+};
+Dropdown.style = dropdownCss;
+
+const dropdownItemCss = ".sc-ix-dropdown-item-h{display:block;min-width:10rem}.icon-only.sc-ix-dropdown-item-h{min-width:0}.icon-only.sc-ix-dropdown-item-h .dropdown-item.sc-ix-dropdown-item{padding:0.25rem 0.5rem}.icon-only.sc-ix-dropdown-item-h .dropdown-item.sc-ix-dropdown-item:not(.disabled):not(:disabled):focus-visible{border-color:#199fff}.sc-ix-dropdown-item-h .checkmark.sc-ix-dropdown-item{position:absolute;left:0.5rem}.checked.sc-ix-dropdown-item-h{background-color:var(--theme-select-list-item--background--selected)}.sc-ix-dropdown-item-h .label.sc-ix-dropdown-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
+
+const DropdownItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.itemClick = createEvent(this, "itemClick", 7);
+    /**
+     * Display hover state
+     */
+    this.hover = false;
+    /**
+     * Disable item and remove event listeners
+     */
+    this.disabled = false;
+    /**
+     * Whether the item is checked or not. If true a checkmark will mark the item as checked.
+     */
+    this.checked = false;
+  }
+  /**
+   * Internal usage only
+   */
+  async emitItemClick() {
+    this.itemClick.emit(this.hostElement);
+  }
+  render() {
+    return (h(Host, { class: {
+        checked: this.checked,
+        'icon-text': this.label !== undefined && this.icon !== undefined,
+        'icon-only': this.label === undefined && this.icon !== undefined,
+      } }, h("button", { class: {
+        'dropdown-item': true,
+        hover: this.hover,
+        disabled: this.disabled,
+      }, onClick: () => this.emitItemClick() }, this.checked ? (h("ix-icon", { class: "checkmark", name: "single-check", size: "16" })) : null, this.icon ? (h("span", { class: {
+        glyph: true,
+        [`glyph-${this.icon}`]: true,
+      } })) : null, this.label ? h("span", { class: "label" }, this.label) : null, h("slot", null))));
+  }
+  get hostElement() { return getElement(this); }
+};
+DropdownItem.style = dropdownItemCss;
+
+export { Dropdown as ix_dropdown, DropdownItem as ix_dropdown_item };

package/dist/esm/ix-event-list_2.entry.js

@@ -0,0 +1,146 @@
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-55cfd20d.js';
+import { c as createMutationObserver } from './mutation-observer-379959bb.js';
+import { a as convertToRemString } from './rwd.util-33a69d24.js';
+
+const eventListCss = ".sc-ix-event-list-h{display:block;position:relative}ul.sc-ix-event-list{list-style:none;padding:0;margin-bottom:0}.sc-ix-event-list-s>.sc-ix-event-list-h:not(.item-size-s) .ix-event-list-item,.sc-ix-event-list-h:not(.item-size-l) .ix-event-list-item.sc-ix-event-list{display:none}.sc-ix-event-list-h.chevron .sc-ix-event-list-s .ix-event-list-item .chevron-icon{display:initial}.item-size-l .sc-ix-event-list-s .ix-event-list-item{height:6.5rem;max-height:6.5rem}.item-size-l .sc-ix-event-list-s .ix-event-list-item .event-content{height:6.5rem;max-height:6.5rem;white-space:normal}.compact .sc-ix-event-list-s .ix-event-list-item{margin-bottom:0px;border-radius:0px}.compact .sc-ix-event-list-s .ix-event-list-item .indicator{border-top-left-radius:0px;border-bottom-left-radius:0px}.compact .sc-ix-event-list-s .ix-event-list-item .cui-event-list-item-content-container{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.compact .sc-ix-event-list-s .ix-event-list-item i.glyph{display:none}.compact.sc-ix-event-list .compact.sc-ix-event-list:not(:last-child) .cui-event-list-item-content-container.sc-ix-event-list{border-bottom:none}";
+
+const EventList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.mutationObserver = createMutationObserver(this.onMutation.bind(this));
+    /**
+     * Determines the height of list items.
+     * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.
+     * In case a number is supplied it will get converted to rem internally.
+     * Defaults to 'S'.
+     */
+    this.itemHeight = 'S';
+    /**
+     * Make event-list items more compact
+     */
+    this.compact = false;
+    /**
+     * Animate state change transitions. Defaults to 'true'.
+     */
+    this.animated = true;
+  }
+  componentDidLoad() {
+    if (this.animated) {
+      this.triggerFadeIn();
+    }
+    if (typeof this.itemHeight === 'number') {
+      const height = convertToRemString(this.itemHeight);
+      this.el.querySelectorAll('.ix-event-list-item').forEach((item) => {
+        item.classList.add('d-flex');
+        this.setCustomHeight(item, height);
+      });
+    }
+    this.mutationObserver.observe(this.el, { childList: true, subtree: true });
+  }
+  onMutation(mutationRecords) {
+    this.triggerFadeOut().then(() => {
+      if (typeof this.itemHeight === 'number') {
+        const height = convertToRemString(this.itemHeight);
+        mutationRecords
+          .filter((mutation) => mutation.type === 'childList')
+          .forEach((mutation) => mutation.addedNodes.forEach((item) => {
+          var _a;
+          const itemHtml = item;
+          if (!((_a = itemHtml.classList) === null || _a === void 0 ? void 0 : _a.contains('ix-event-list-item'))) {
+            return;
+          }
+          itemHtml.classList.add('d-flex');
+          this.setCustomHeight(itemHtml, height);
+        }));
+      }
+      this.triggerFadeIn();
+    });
+  }
+  setCustomHeight(item, height) {
+    item.style.height = height;
+    item.style.maxHeight = height;
+  }
+  triggerFadeOut() {
+    if (!this.animated) {
+      return Promise.resolve();
+    }
+    const keyframes = [
+      {
+        opacity: 1,
+        easing: 'ease-in',
+      },
+      { opacity: 0 },
+    ];
+    const listElement = this.el.querySelector('ul');
+    return listElement.animate(keyframes, {
+      duration: EventList.fadeOutDuration,
+    }).finished;
+  }
+  triggerFadeIn() {
+    if (!this.animated) {
+      return;
+    }
+    const listItems = this.el.querySelectorAll('.ix-event-list-item');
+    listItems.forEach((e, i) => {
+      const delay = i * 80;
+      const offset = delay / (delay + EventList.fadeInDuration);
+      const keyframes = [
+        { opacity: 0 },
+        { opacity: 0, easing: 'ease-out', offset },
+        { opacity: 1 },
+      ];
+      const options = {
+        duration: EventList.fadeInDuration + delay,
+        iterations: 1,
+      };
+      e.animate(keyframes, options);
+    });
+  }
+  render() {
+    return (h(Host, { class: {
+        'item-size-s': this.itemHeight === 'S',
+        'item-size-l': this.itemHeight === 'L',
+        compact: this.compact,
+        chevron: this.chevron,
+      } }, h("ul", null, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+EventList.fadeOutDuration = 50;
+EventList.fadeInDuration = 150;
+EventList.style = eventListCss;
+
+const eventListItemCss = ".ix-event-list-item{display:flex;align-items:center;position:relative;height:2.5rem;max-height:2.5rem;border-radius:0.25rem;background-color:var(--theme-event-list-item-bg);overflow:hidden;cursor:pointer;margin-bottom:0.5rem}.ix-event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.ix-event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}.ix-event-list-item .cui-event-list-item-content-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-list-item-border);border-top-left-radius:0;border-top-right-radius:0.25rem;border-bottom-left-radius:0;border-bottom-right-radius:0.25rem;border-left:none;padding-left:1rem}.ix-event-list-item .chevron-icon{display:none;margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}.ix-event-list-item .event-content{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}.ix-event-list-item:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.disabled):not(:disabled):hover{background-color:var(--theme-event-list-item-hover)}.ix-event-list-item:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.disabled):not(:disabled):active{background-color:var(--theme-event-list-item-pressed)}.ix-event-list-item.selected{background-color:var(--theme-event-item--background--selected)}.ix-event-list-item[disabled],.ix-event-list-item.disabled{pointer-events:none}";
+
+const EventListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.itemClick = createEvent(this, "itemClick", 7);
+    /**
+     * Opacity of the status indicator.
+     * Defaults to 1.0
+     *
+     * @deprecated Will be removed in 7.0.0. Use color with alpha value.
+     */
+    this.opacity = 1;
+  }
+  handleItemClick() {
+    this.itemClick.emit();
+  }
+  render() {
+    return (h("div", { class: {
+        'ix-event-list-item': true,
+        selected: this.selected,
+        disabled: this.disabled,
+      } }, h("div", { class: `indicator ${!this.color ? 'indicator-empty' : ''}`, style: {
+        'background-color': this.color
+          ? `var(--theme-${this.color})`
+          : 'inherit',
+        opacity: `${this.disabled ? 0.4 : this.opacity}`,
+      } }), h("div", { class: "cui-event-list-item-content-container" }, h("div", { class: "event-content" }, h("slot", null)), h("i", { class: "glyph glyph-16 glyph-chevron-right chevron-icon" }))));
+  }
+  get el() { return getElement(this); }
+};
+EventListItem.style = eventListItemCss;
+
+export { EventList as ix_event_list, EventListItem as ix_event_list_item };

package/dist/esm/ix-expanding-search.entry.js

@@ -0,0 +1,87 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-55cfd20d.js';
+
+const expandingSearchCss = ".sc-ix-expanding-search-h{display:flex;width:11.5625rem;height:2rem;align-items:center;justify-content:space-between}.sc-ix-expanding-search-h .input-container.sc-ix-expanding-search{transition:all 0.3s ease-in-out}.sc-ix-expanding-search-h .disable-pointer.sc-ix-expanding-search{pointer-events:none}.sc-ix-expanding-search-h input.sc-ix-expanding-search{box-shadow:var(--theme-input--box-shadow)}.sc-ix-expanding-search-h .expanded.sc-ix-expanding-search{width:11.5625rem}.sc-ix-expanding-search-h .collapsed.sc-ix-expanding-search{width:1.5rem;border:none}.sc-ix-expanding-search-h .btn-search-icon.sc-ix-expanding-search{align-self:center;margin:auto;position:relative}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search{display:flex;max-width:2rem;max-height:2rem;border-radius:var(--theme-input--border-radius);transition:all 0.15s ease-in-out;z-index:1;align-items:center;position:relative;border:none}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):hover{border-color:transparent}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):active{border-color:transparent}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):focus,.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):focus-visible{outline:none}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):focus-visible{outline:var(--focus--border-color);outline-width:1px;outline-style:solid}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:active{width:2rem;height:2rem;border-radius:var(--theme-input--border-radius);border:var(--theme-std-bdr-1) !important}.sc-ix-expanding-search-h .input-container.sc-ix-expanding-search{display:flex;position:absolute;align-items:center;flex-wrap:nowrap}.sc-ix-expanding-search-h .btn-clear.sc-ix-expanding-search{position:absolute;border-radius:var(--theme-input--border-radius);right:0px}.sc-ix-expanding-search-h .input.sc-ix-expanding-search{padding-left:2rem !important;padding-right:2.5rem !important}.sc-ix-expanding-search-h .opacity-before.sc-ix-expanding-search{opacity:0}.sc-ix-expanding-search-h .opacity-after.sc-ix-expanding-search{opacity:1}";
+
+const ExpandingSearch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    /**
+     * Search icon
+     */
+    this.icon = 'search';
+    /**
+     * Placeholder text
+     */
+    this.placeholder = 'Enter text here';
+    /**
+     * Default value
+     */
+    this.value = '';
+    this.isFieldChanged = false;
+    this.expanded = false;
+    this.hasFocus = false;
+    this.focusTextInput = this.focusTextInput.bind(this);
+  }
+  expandInput() {
+    setTimeout(this.focusTextInput, 300);
+    this.expanded = true;
+  }
+  collapseInput() {
+    if (!this.isFieldChanged && this.expanded) {
+      this.expanded = false;
+    }
+  }
+  clearInput() {
+    this.value = '';
+    this.isFieldChanged = false;
+  }
+  onChange(e) {
+    this.value = e.target.value;
+    if (this.isFieldChanged && this.value === '') {
+      this.isFieldChanged = false;
+    }
+    else {
+      this.isFieldChanged = true;
+    }
+    this.valueChange.emit(this.value);
+  }
+  focusTextInput() {
+    var _a;
+    (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  clearClicked() {
+    var _a;
+    this.clearInput();
+    (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+    this.valueChange.emit(this.value);
+  }
+  render() {
+    return (h(Host, { class: {
+        expanded: this.expanded,
+      } }, h("button", { class: {
+        btn: true,
+        'btn-invisible-primary': true,
+        'btn-icon': true,
+        'btn-search': true,
+        'disable-pointer': this.expanded,
+      }, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0 }, h("ix-icon", { class: "btn-search-icon", name: this.icon, size: this.expanded ? '16' : '24', color: this.hasFocus ? 'input-search-icon--color--focus' : undefined })), h("div", { class: {
+        expanded: this.expanded,
+        collapsed: !this.expanded,
+        'disable-pointer': !this.expanded,
+        'input-container': true,
+      }, "data-testid": "input-wrapper" }, h("input", { class: {
+        'form-control': true,
+        input: this.expanded,
+        'disable-pointer': !this.expanded,
+        'opacity-before': !this.expanded,
+        'opacity-after': this.expanded,
+      }, ref: (el) => (this.textInput = el), "data-testid": "input", placeholder: this.placeholder, type: "text", value: this.value, onBlur: () => {
+        this.collapseInput();
+        this.hasFocus = false;
+      }, onFocus: () => (this.hasFocus = true), onInput: (e) => this.onChange(e), tabindex: this.expanded ? 0 : -1 }), this.isFieldChanged ? (h("ix-icon-button", { class: "btn-clear", icon: "clear", ghost: true, size: "24", "data-testid": "clear-button", onClick: () => this.clearClicked() })) : null)));
+  }
+};
+ExpandingSearch.style = expandingSearchCss;
+
+export { ExpandingSearch as ix_expanding_search };

package/dist/esm/ix-filter-chip.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-55cfd20d.js';
+
+const filterChipCss = ".sc-ix-filter-chip-h{display:flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid transparent;border-radius:2rem;background-color:var(--theme-chip--background);color:var(--theme-chip--color)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):hover{background-color:var(--theme-chip--background--hover)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):active{background-color:var(--theme-chip--background--active)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):focus,.sc-ix-filter-chip-h:not(.disabled):not(:disabled):focus-visible{border-color:#199fff}.sc-ix-filter-chip-h .slot-container.sc-ix-filter-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-filter-chip-h .slot-container.sc-ix-filter-chip .disabled.sc-ix-filter-chip-h,.disabled .sc-ix-filter-chip-h{color:var(--theme-chip--color-diabled)}.sc-ix-filter-chip-h .btn-oval.sc-ix-filter-chip{height:1.5rem;width:1.5rem;min-width:1.5rem;margin-left:0.25rem;padding:0;vertical-align:top}.sc-ix-filter-chip-h .btn-oval.sc-ix-filter-chip:not(.disabled):not(:disabled):focus,.sc-ix-filter-chip-h .btn-oval.sc-ix-filter-chip:not(.disabled):not(:disabled):focus-visible{outline:none;border-color:#199fff}";
+
+const FilterChip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closeClick = createEvent(this, "closeClick", 7);
+    /**
+     * If true the filter chip will be in disabled state
+     */
+    this.disabled = false;
+  }
+  onCloseClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.closeClick.emit();
+  }
+  render() {
+    return (h(Host, { class: { disabled: this.disabled }, title: this.el.textContent }, h("div", { class: "slot-container" }, h("slot", null)), h("button", { disabled: this.disabled, class: "btn btn-invisible-secondary btn-oval", onClick: (e) => this.onCloseClick(e) }, h("ix-icon", { name: "close-small", size: "16" }))));
+  }
+  get el() { return getElement(this); }
+};
+FilterChip.style = filterChipCss;
+
+export { FilterChip as ix_filter_chip };