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

package/dist/collection/components/event-list/event-list.js

@@ -1,197 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import { Component, Element, h, Host, Prop } from '@stencil/core';
-import { createMutationObserver } from '../utils/mutation-observer';
-import { convertToRemString } from '../utils/rwd.util';
-export class EventList {
-  constructor() {
-    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))));
-  }
-  static get is() { return "ix-event-list"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["event-list.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["event-list.css"]
-  }; }
-  static get properties() { return {
-    "itemHeight": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "'S' | 'L' | number",
-        "resolved": "\"L\" | \"S\" | number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Determines the height of list items.\nThis can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\nIn case a number is supplied it will get converted to rem internally.\nDefaults to 'S'."
-      },
-      "attribute": "item-height",
-      "reflect": false,
-      "defaultValue": "'S'"
-    },
-    "compact": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Make event-list items more compact"
-      },
-      "attribute": "compact",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "animated": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Animate state change transitions. Defaults to 'true'."
-      },
-      "attribute": "animated",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "chevron": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Display a chevron icon in list items. Defaults to 'false'"
-      },
-      "attribute": "chevron",
-      "reflect": false
-    }
-  }; }
-  static get elementRef() { return "el"; }
-}
-EventList.fadeOutDuration = 50;
-EventList.fadeInDuration = 150;

package/dist/collection/components/event-list-item/event-list-item.css

@@ -1,126 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/* Dimensions */
-/* Font sizes */
-/* Line heights */
-/* Animation timings */
-.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;
-}

package/dist/collection/components/event-list-item/event-list-item.js

@@ -1,162 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import { Component, Element, Event, h, Listen, Prop, } from '@stencil/core';
-export class EventListItem {
-  constructor() {
-    /**
-     * 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" }))));
-  }
-  static get is() { return "ix-event-list-item"; }
-  static get originalStyleUrls() { return {
-    "$": ["event-list-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["event-list-item.css"]
-  }; }
-  static get properties() { return {
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Color of the status indicator.\nAllowed values are all Core UI color names."
-      },
-      "attribute": "color",
-      "reflect": false
-    },
-    "selected": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Show event list item as selected"
-      },
-      "attribute": "selected",
-      "reflect": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disable event list item"
-      },
-      "attribute": "disabled",
-      "reflect": false
-    },
-    "chevron": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Show chevron on right side of the event list item"
-      },
-      "attribute": "chevron",
-      "reflect": false
-    },
-    "opacity": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "Will be removed in 7.0.0. Use color with alpha value."
-          }],
-        "text": "Opacity of the status indicator.\nDefaults to 1.0"
-      },
-      "attribute": "opacity",
-      "reflect": false,
-      "defaultValue": "1"
-    }
-  }; }
-  static get events() { return [{
-      "method": "itemClick",
-      "name": "itemClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event list item click"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "handleItemClick",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }]; }
-}

package/dist/collection/components/expanding-search/expanding-search.css

@@ -1,127 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/* Dimensions */
-/* Font sizes */
-/* Line heights */
-/* Animation timings */
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-:host {
-  display: inline-flex;
-  width: auto;
-  height: 2rem;
-  align-items: center;
-  justify-content: space-between;
-  /*collapsed view*/
-  /*expanded view*/
-}
-:host.right-position {
-  width: 11.5625rem !important;
-}
-:host .input-container {
-  transition: all 0.3s ease-in-out;
-}
-:host .disable-pointer {
-  pointer-events: none;
-}
-:host input {
-  box-shadow: var(--theme-input--box-shadow);
-}
-:host .expanded {
-  width: 11.5625rem;
-}
-:host .collapsed {
-  width: 1.5rem;
-  border: none;
-}
-:host .btn-search-icon {
-  align-self: center;
-  margin: auto;
-  position: relative;
-}
-:host .btn-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;
-}
-:host .btn-search:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .btn-search:not(.disabled):not(:disabled):hover {
-  border-color: transparent;
-}
-:host .btn-search:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .btn-search:not(.disabled):not(:disabled):active {
-  border-color: transparent;
-}
-:host .btn-search:not(.disabled):not(:disabled):focus-visible {
-  outline: none;
-}
-:host .btn-search:not(.disabled):not(:disabled):focus-visible {
-  outline: var(--focus--border-color);
-  outline-width: 1px;
-  outline-style: solid;
-}
-:host .btn-search:active {
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--theme-input--border-radius);
-  border: var(--theme-std-bdr-1) !important;
-}
-:host .input-container {
-  display: flex;
-  position: absolute;
-  align-items: center;
-  flex-wrap: nowrap;
-}
-:host .btn-clear {
-  position: absolute;
-  border-radius: var(--theme-input--border-radius);
-  right: 0px;
-}
-:host .input {
-  padding-left: 2rem !important;
-  padding-right: 2.5rem !important;
-}
-:host .opacity-before {
-  opacity: 0;
-}
-:host .opacity-after {
-  opacity: 1;
-}