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

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

@@ -1,36 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-1e4a348f.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) {
-    index.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 (index.h(index.Host, null, index.h("div", { class: this.cardClasses() }, index.h("div", { class: "header" }, index.h("slot", { name: "header" })), index.h("div", { class: "separator" }), index.h("div", { class: "content" }, index.h("slot", null)))));
-  }
-  get hostElement() { return index.getElement(this); }
-};
-DateTimeCard.style = dateTimeCardCss;
-
-exports.ix_date_time_card = DateTimeCard;

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

@@ -1,113 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-1e4a348f.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) {
-    index.registerInstance(this, hostRef);
-    this.done = index.createEvent(this, "done", 7);
-    this.timeChange = index.createEvent(this, "timeChange", 7);
-    this.dateChange = index.createEvent(this, "dateChange", 7);
-    this.dateSelect = index.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 (index.h(index.Host, null, index.h("div", { class: "flex" }, index.h("div", { class: "separator" }), index.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 }), index.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 }), index.h("div", { class: "separator" })), index.h("div", { class: "done" }, index.h("ix-button", { onClick: () => this.onDone() }, this.textSelectDate))));
-  }
-};
-DatePicker.style = datetimePickerCss;
-
-exports.ix_datetime_picker = DatePicker;

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

@@ -1,122 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-1e4a348f.js');
-const anime_es = require('./anime.es-8822f296.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) {
-    index.registerInstance(this, hostRef);
-    this.open = index.createEvent(this, "open", 7);
-    this.drawerClose = index.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_es.anime({
-      targets: el,
-      duration: Drawer.duration,
-      translateX: [0, '16rem'],
-      opacity: [1, 0],
-      easing: 'easeInSine',
-      complete: () => {
-        el.classList.add('d-none');
-      },
-    });
-  }
-  slideInRight(el) {
-    anime_es.anime({
-      targets: el,
-      duration: Drawer.duration,
-      translateX: ['16rem', 0],
-      opacity: [0, 1],
-      easing: 'easeOutSine',
-      begin: () => {
-        el.classList.remove('d-none');
-      },
-    });
-  }
-  render() {
-    return (index.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" }, index.h("div", { class: "header" }, index.h("div", { class: "header-content" }, index.h("slot", { name: "header" })), index.h("ix-icon-button", { icon: "close", size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), index.h("div", { class: "content" }, index.h("slot", null))));
-  }
-  static get watchers() { return {
-    "show": ["onShowChanged"]
-  }; }
-};
-Drawer.duration = 300;
-Drawer.style = drawerCss;
-
-exports.ix_drawer = Drawer;

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

@@ -1,203 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-1e4a348f.js');
-const popper = require('./popper-d7a0f999.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) {
-    index.registerInstance(this, hostRef);
-    this.showChanged = index.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 = popper.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 (index.h(index.Host, { ref: (ref) => (this.dropdownRef = ref), class: {
-        'dropdown-menu': true,
-        show: this.show,
-      }, style: {
-        margin: '0',
-        minWidth: '0px',
-      } }, index.h("div", { style: { display: 'contents' } }, this.header ? index.h("div", { class: "dropdown-header" }, this.header) : '', index.h("slot", null))));
-  }
-  get hostElement() { return index.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) {
-    index.registerInstance(this, hostRef);
-    this.itemClick = index.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 (index.h(index.Host, { class: {
-        checked: this.checked,
-        'icon-text': this.label !== undefined && this.icon !== undefined,
-        'icon-only': this.label === undefined && this.icon !== undefined,
-      } }, index.h("button", { class: {
-        'dropdown-item': true,
-        hover: this.hover,
-        disabled: this.disabled,
-      }, onClick: () => this.emitItemClick() }, this.checked ? (index.h("ix-icon", { class: "checkmark", name: "single-check", size: "16" })) : null, this.icon ? (index.h("span", { class: {
-        glyph: true,
-        [`glyph-${this.icon}`]: true,
-      } })) : null, this.label ? index.h("span", { class: "label" }, this.label) : null, index.h("slot", null))));
-  }
-  get hostElement() { return index.getElement(this); }
-};
-DropdownItem.style = dropdownItemCss;
-
-exports.ix_dropdown = Dropdown;
-exports.ix_dropdown_item = DropdownItem;

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

@@ -1,151 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-1e4a348f.js');
-const mutationObserver = require('./mutation-observer-29bedada.js');
-const rwd_util = require('./rwd.util-482d41d4.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) {
-    index.registerInstance(this, hostRef);
-    this.mutationObserver = 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 = rwd_util.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 = rwd_util.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 (index.h(index.Host, { class: {
-        'item-size-s': this.itemHeight === 'S',
-        'item-size-l': this.itemHeight === 'L',
-        compact: this.compact,
-        chevron: this.chevron,
-      } }, index.h("ul", null, index.h("slot", null))));
-  }
-  get el() { return index.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) {
-    index.registerInstance(this, hostRef);
-    this.itemClick = index.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 (index.h("div", { class: {
-        'ix-event-list-item': true,
-        selected: this.selected,
-        disabled: this.disabled,
-      } }, index.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}`,
-      } }), index.h("div", { class: "event-list-item-container" }, index.h("div", { class: "event-content" }, index.h("slot", null)), index.h("i", { class: "glyph glyph-16 glyph-chevron-right chevron-icon" }))));
-  }
-  get el() { return index.getElement(this); }
-};
-EventListItem.style = eventListItemCss;
-
-exports.ix_event_list = EventList;
-exports.ix_event_list_item = EventListItem;