@siemens/ix 1.3.0 → 1.4.0-beta.1

package/dist/collection/components/dropdown/dropdown.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -340,7 +340,7 @@
 }
 
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -348,7 +348,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -356,7 +356,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -364,7 +364,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/dropdown/dropdown.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -22,20 +22,72 @@ export class Dropdown {
     this.adjustDropdownWidthToReferenceWidth = false;
     this.header = undefined;
     this.offset = undefined;
+    this.triggerEvent = 'click';
+    this.toggleBind = this.toggle.bind(this);
     this.openBind = this.open.bind(this);
   }
   get dropdownItems() {
     return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));
   }
+  addEventListenersFor(triggerEvent) {
+    switch (triggerEvent) {
+      case 'click':
+        if (this.closeBehavior === 'outside') {
+          this.triggerElement.addEventListener('click', this.openBind);
+        }
+        else {
+          this.triggerElement.addEventListener('click', this.toggleBind);
+        }
+        break;
+      case 'hover':
+        this.triggerElement.addEventListener('mouseenter', this.openBind);
+        break;
+      case 'focus':
+        this.triggerElement.addEventListener('focusin', this.openBind);
+        break;
+    }
+  }
+  removeEventListenersFor(triggerEvent, triggerElement) {
+    switch (triggerEvent) {
+      case 'click':
+        if (this.closeBehavior === 'outside') {
+          triggerElement.removeEventListener('click', this.openBind);
+        }
+        else {
+          triggerElement.removeEventListener('click', this.toggleBind);
+        }
+        break;
+      case 'hover':
+        triggerElement.removeEventListener('mouseenter', this.openBind);
+        break;
+      case 'focus':
+        triggerElement.removeEventListener('focusin', this.openBind);
+        break;
+    }
+  }
   async registerListener(element) {
     this.triggerElement = await this.resolveElement(element);
     if (this.triggerElement) {
-      this.triggerElement.addEventListener('click', this.openBind);
+      if (Array.isArray(this.triggerEvent)) {
+        this.triggerEvent.forEach((triggerEvent) => {
+          this.addEventListenersFor(triggerEvent);
+        });
+      }
+      else {
+        this.addEventListenersFor(this.triggerEvent);
+      }
     }
   }
   async unregisterListener(element) {
     const trigger = await this.resolveElement(element);
-    trigger.removeEventListener('click', this.openBind);
+    if (Array.isArray(this.triggerEvent)) {
+      this.triggerEvent.forEach((triggerEvent) => {
+        this.removeEventListenersFor(triggerEvent, trigger);
+      });
+    }
+    else {
+      this.removeEventListenersFor(this.triggerEvent, trigger);
+    }
   }
   resolveElement(element) {
     if (typeof element !== 'string') {
@@ -77,11 +129,12 @@ export class Dropdown {
     }
   }
   clickOutside(event) {
+    var _a, _b;
     const target = event.target;
     if (this.show === false ||
       this.closeBehavior === false ||
-      this.anchorElement === target ||
-      this.triggerElement === target) {
+      ((_a = this.anchorElement) === null || _a === void 0 ? void 0 : _a.contains(target)) ||
+      ((_b = this.triggerElement) === null || _b === void 0 ? void 0 : _b.contains(target))) {
       return;
     }
     switch (this.closeBehavior) {
@@ -99,15 +152,22 @@ export class Dropdown {
         this.close();
     }
   }
-  open(event) {
+  toggle(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() {
+  open(event) {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    this.show = true;
+    this.showChanged.emit(true);
+  }
+  close(event) {
+    if (event === null || event === void 0 ? void 0 : event.defaultPrevented) {
+      return;
+    }
     this.show = false;
-    this.showChanged.emit(this.show);
+    this.showChanged.emit(false);
   }
   async applyDropdownPosition() {
     if (this.anchorElement && this.dropdownRef) {
@@ -226,7 +286,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define an element that triggers the dropdown.\nA trigger can either be a string that will be interprated as id attribute or a DOM element."
+          "text": "Define an element that triggers the dropdown.\nA trigger can either be a string that will be interpreted as id attribute or a DOM element."
         },
         "attribute": "trigger",
         "reflect": false
@@ -387,6 +447,32 @@ export class Dropdown {
             }],
           "text": "Move dropdown along main axis of alignment"
         }
+      },
+      "triggerEvent": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DropdownTriggerEvent | DropdownTriggerEvent[]",
+          "resolved": "\"click\" | \"focus\" | \"hover\" | DropdownTriggerEvent[]",
+          "references": {
+            "DropdownTriggerEvent": {
+              "location": "import",
+              "path": "./dropdown-trigger-event"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Define one or more events to open dropdown"
+        },
+        "attribute": "trigger-event",
+        "reflect": false,
+        "defaultValue": "'click'"
       }
     };
   }

package/dist/collection/components/dropdown-button/dropdown-button.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -22,12 +22,23 @@
   display: inline-block;
   position: relative;
   height: 2rem;
+  width: auto;
+}
+:host.disabled {
+  pointer-events: none;
 }
 :host .dropdown-button {
+  display: block;
   position: relative;
+  width: 100%;
+  height: 100%;
+}
+:host .dropdown-button > ix-button {
+  width: 100%;
+  height: 100%;
 }
-:host .hide {
-  display: none;
+:host .dropdown-button .button-label {
+  margin-right: auto;
 }
 :host .triangle {
   position: absolute;
@@ -71,9 +82,6 @@
 :host .triangle.secondary.disabled {
   color: var(--theme-btn-secondary--color--disabled);
 }
-:host .hide {
-  display: none;
-}
 :host .dropdown {
   width: auto !important;
   inset: auto !important;

package/dist/collection/components/dropdown-button/dropdown-button.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -33,9 +33,11 @@ export class DropdownButton {
       } }));
   }
   render() {
-    return (h(Host, null, h("div", { class: "dropdown-button", ref: (ref) => {
+    return (h(Host, { class: {
+        disabled: this.disabled,
+      } }, h("div", { class: "dropdown-button", ref: (ref) => {
         this.dropdownAnchor = ref;
-      } }, h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, class: { hide: this.label === '' } }, h("ix-icon", { name: this.icon, size: "24", class: { hide: this.icon === '' || this.icon === undefined } }), this.label, h("ix-icon", { name: "chevron-down-small", size: "24" })), h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, class: { hide: this.label !== '' } }), this.getTriangle()), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownAnchor, placement: "bottom", positioningStrategy: 'fixed', adjustDropdownWidthToReferenceWidth: true }, h("slot", null))));
+      } }, this.label !== '' ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }, h("ix-icon", { name: this.icon, size: "24", class: { hide: this.icon === '' || this.icon === undefined } }), h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: "chevron-down-small", size: "24" }))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownAnchor, placement: "bottom", positioningStrategy: 'fixed', adjustDropdownWidthToReferenceWidth: true }, h("slot", null))));
   }
   static get is() { return "ix-dropdown-button"; }
   static get encapsulation() { return "scoped"; }
@@ -60,7 +62,7 @@ export class DropdownButton {
           "references": {
             "Buttons": {
               "location": "import",
-              "path": "../utils/button-variants"
+              "path": "../button/button-variants"
             }
           }
         },

package/dist/collection/components/dropdown-item/dropdown-item.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -27,7 +27,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -41,6 +41,10 @@
 :host.icon-only {
   min-width: 0;
 }
+:host.icon-only .dropdown-item > .glyph {
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+}
 :host.icon-only .dropdown-item {
   padding: 0.25rem 0.5rem;
 }
@@ -58,4 +62,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+
+::slotted(ix-icon) {
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
 }

package/dist/collection/components/dropdown-item/dropdown-item.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/dropdown-quick-actions/dropdown-quick-actions.css

@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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: 2023 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 */
+:host {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  -webkit-margin-start: 1.5rem;
+          margin-inline-start: 1.5rem;
+  -webkit-margin-end: 1.5rem;
+          margin-inline-end: 1.5rem;
+  -webkit-margin-after: 0.25rem;
+          margin-block-end: 0.25rem;
+}
+:host slot::slotted(*) {
+  display: flex;
+  -webkit-margin-end: 0.625rem;
+          margin-inline-end: 0.625rem;
+}

package/dist/collection/components/dropdown-quick-actions/dropdown-quick-actions.js

@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 { h, Host } from '@stencil/core';
+/**
+ * @since 1.4.0
+ */
+export class DropdownQuickActions {
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "ix-dropdown-quick-actions"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown-quick-actions.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown-quick-actions.css"]
+    };
+  }
+}

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -15,7 +15,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -23,7 +23,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -43,6 +43,7 @@
   border-radius: 0.25rem;
   background-color: var(--theme-event-item--background);
   overflow: hidden;
+  transition: 150ms;
   cursor: pointer;
   margin-bottom: 0.5rem;
 }
@@ -103,6 +104,9 @@
   background-color: var(--theme-event-item--background--selected);
   border-color: var(--theme-event-item--border--selected);
 }
+.ix-event-list-item.selected:not(:active, .active) :hover {
+  border-color: var(--theme-event-item--border--selected) !important;
+}
 .ix-event-list-item[disabled], .ix-event-list-item.disabled {
   pointer-events: none;
 }

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -27,7 +27,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/filter-chip/filter-chip.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -27,7 +27,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/filter-chip/filter-chip.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/flip-tile/flip-tile-state.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/flip-tile/flip-tile.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -27,7 +27,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/flip-tile/flip-tile.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/flip-tile-content/flip-tile-content.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/flip-tile-content/flip-tile-content.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/group/group-context-menu.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/group/group-context-menu.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -24,9 +24,6 @@ export class GroupContextMenu {
   componentWillRender() {
     this.showContextMenu = !!this.dropdownElement;
   }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
   render() {
     return (h(Host, null, h("ix-icon-button", { class: { hide: !this.showContextMenu }, ref: (ref) => this.dropdownElement ? this.configureDropdown(ref) : null, size: "24", ghost: true, icon: "context-menu" }), h("slot", null)));
   }