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

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 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0px rgba(0, 0, 0, 0.1);border:1px solid var(--theme-menu--border-color);border-radius:4px}.card.left.sc-ix-date-time-card{border-radius:4px 0 0 4px;height:100%}.card.right.sc-ix-date-time-card{border-radius:0 4px 4px 0;height:100%}.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,109 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-55cfd20d.js';
+
+const datetimePickerCss = ".sc-ix-datetime-picker-h{display:block;background-color:var(--theme-menu--background);border-radius:4px}.flex.sc-ix-datetime-picker{display:flex;justify-content:center}.done.sc-ix-datetime-picker{display:inline-flex;justify-content:flex-end;padding:1rem;width:100%}.separator.sc-ix-datetime-picker{border:1px solid var(--theme-datepicker-separator--background);width:100%;margin-top:72px;height:1px}";
+
+const DatePicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.done = createEvent(this, "done", 7);
+    this.timeChange = createEvent(this, "timeChange", 7);
+    this.dateChange = createEvent(this, "dateChange", 7);
+    this.dateSelect = createEvent(this, "dateSelect", 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;
+    /**
+     * Date format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     *
+     * @since 1.1.0
+     */
+    this.dateFormat = 'yyyy/LL/dd';
+    /**
+     * Time format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     *
+     * @since 1.1.0
+     */
+    this.timeFormat = 'TT';
+    /**
+     * Picker date. If the picker is in range mode this property is the end date.
+     * If the picker is not in range mode leave this value `null`
+     *
+     * Format is based on `format`
+     *
+     * @since 1.1.0
+     */
+    this.to = null;
+    /**
+     * Show time reference input
+     *
+     * @since 1.1.0 time reference is default aligned with formt tt
+     */
+    this.showTimeReference = undefined;
+    /**
+     * Default behavior of the done event is to join the two events (date and time) into one combined string output.
+     * This combination can be configured over the delimiter
+     *
+     * @since 1.1.0
+     */
+    this.eventDelimiter = ' - ';
+    /**
+     * Text of date select button
+     *
+     * @since 1.1.0
+     */
+    this.textSelectDate = 'Done';
+  }
+  onDone() {
+    var _a;
+    this.done.emit([this._from, (_a = this._to) !== null && _a !== void 0 ? _a : '', this._time].join(this.eventDelimiter));
+    this.dateSelect.emit({
+      from: this._from,
+      to: this._to,
+      time: this._time,
+    });
+  }
+  async onDateChange(event) {
+    var _a, _b;
+    event.preventDefault();
+    event.stopPropagation();
+    const { detail: date } = event;
+    this.dateChange.emit(date);
+    const currentDateTime = await this.datePickerElement.getCurrentDate();
+    this._from = (_a = currentDateTime.start) === null || _a === void 0 ? void 0 : _a.toFormat(this.dateFormat);
+    this._to = (_b = currentDateTime.end) === null || _b === void 0 ? void 0 : _b.toFormat(this.dateFormat);
+  }
+  async onTimeChange(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const { detail: time } = event;
+    this.timeChange.emit(time);
+    const currentDateTime = await this.timePickerElement.getCurrentTime();
+    this._time = currentDateTime.toFormat(this.timeFormat);
+  }
+  componentDidLoad() {
+    this._from = this.from;
+    this._to = this.to;
+    this._time = this.time;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "flex" }, h("div", { class: "separator" }), h("ix-date-picker", { ref: (ref) => (this.datePickerElement = ref), corners: "left", individual: false, range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, eventDelimiter: this.eventDelimiter }), h("ix-time-picker", { ref: (ref) => (this.timePickerElement = ref), corners: "right", individual: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, showTimeReference: this.showTimeReference, onTimeChange: (event) => this.onTimeChange(event), time: this.time, format: this.timeFormat, timeReference: this.timeReference }), h("div", { class: "separator" })), h("div", { class: "done" }, h("ix-button", { onClick: () => this.onDone() }, this.textSelectDate))));
+  }
+};
+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 (evt.target.type !== "button" && 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-visible{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 .event-list-item-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) .event-list-item-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:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.disabled):not(:disabled):hover{background-color:var(--theme-event-item--background--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-item--background--active)}.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 .event-list-item-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 .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled):hover{border-color:var(--theme-event-item--border--hover)}.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled):active{border-color:var(--theme-event-item--border--active)}.ix-event-list-item.selected:not(:active,.active) .event-list-item-container{background-color:var(--theme-event-item--background--selected);border-color:var(--theme-event-item--border--selected)}.ix-event-list-item[disabled],.ix-event-list-item.disabled{pointer-events:none}.ix-event-list-item[disabled] .event-list-item-container,.ix-event-list-item.disabled .event-list-item-container{background-color:var(--theme-event-item--background--disabled);border-color:var(--theme-event-item--border--disabled)}.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}";
+
+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: "event-list-item-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 };