@siemens/ix 1.1.0-beta.3 → 1.1.0-beta.5

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

@@ -0,0 +1,197 @@
+/*
+ * 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

@@ -0,0 +1,126 @@
+/*
+ * 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

@@ -0,0 +1,162 @@
+/*
+ * 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

@@ -0,0 +1,127 @@
+/*
+ * 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;
+}