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

package/dist/collection/components/category-filter/category-filter.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
  *
@@ -35,7 +35,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,7 +43,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/category-filter/category-filter.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -344,7 +344,7 @@ export class CategoryFilter {
       } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { class: {
         'text-input': true,
         'hide-placeholder': this.category !== undefined,
-      }, ref: (el) => (this.textInput = el), type: "text", placeholder: this.placeholder }))), this.getResetButton())), h("ix-dropdown", { closeBehavior: "outside", trigger: this.textInput, header: this.getDropdownHeader(), class: { 'd-none': !this.displayDropdown() } }, this.renderDropdownContent())));
+      }, ref: (el) => (this.textInput = el), type: "text", placeholder: this.placeholder }))), this.getResetButton())), h("ix-dropdown", { closeBehavior: "outside", trigger: this.textInput, triggerEvent: ['click', 'focus'], header: this.getDropdownHeader(), class: { 'd-none': !this.displayDropdown() } }, this.renderDropdownContent())));
   }
   static get is() { return "ix-category-filter"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/category-filter/filter-state.js

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

package/dist/collection/components/category-filter/input-state.js

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

package/dist/collection/components/category-filter/logical-filter-operator.js

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

package/dist/collection/components/chip/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
  *
@@ -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
  *
@@ -27,7 +27,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

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

package/dist/collection/components/counter-pill/counter-pill.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
  *
@@ -35,7 +35,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -287,7 +287,7 @@
 }
 
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -299,7 +299,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/counter-pill/counter-pill.js

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

package/dist/collection/components/date-picker/date-picker.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
  *

package/dist/collection/components/date-picker/date-picker.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -521,7 +521,7 @@ export class DatePicker {
         "composed": true,
         "docs": {
           "tags": [{
-              "name": "depracted",
+              "name": "deprecated",
               "text": "String output will be removed. Set \u00B4doneEventDelimiter\u00B4 to undefined or null to get date change object instead of a string"
             }],
           "text": "Date change event\n\nIf datepicker is in range mode the event detail will be sperated with a `-` e.g.\n`2022/10/22 - 2022/10/24` (start and end). If range mode is choosen consider to use `dateRangeChange`."

package/dist/collection/components/date-time-card/date-time-card.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
  *

package/dist/collection/components/date-time-card/date-time-card.js

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

package/dist/collection/components/datetime-picker/datetime-picker.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
  *

package/dist/collection/components/datetime-picker/datetime-picker.js

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

package/dist/collection/components/divider/divider.css

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+:host {
+  display: block;
+  position: initial;
+}
+:host .line {
+  width: auto;
+  border: 0.0625rem solid var(--theme-color-x-weak-bdr);
+}

package/dist/collection/components/divider/divider.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 Divider {
+  render() {
+    return (h(Host, null, h("div", { class: "line" })));
+  }
+  static get is() { return "ix-divider"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["divider.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["divider.css"]
+    };
+  }
+}

package/dist/collection/components/drawer/drawer.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
  *

package/dist/collection/components/drawer/drawer.js

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

package/dist/collection/components/dropdown/dropdown-trigger-event.js

@@ -0,0 +1 @@
+export {};

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
  *
@@ -507,6 +507,9 @@
   -webkit-margin-end: 0.5rem;
           margin-inline-end: 0.5rem;
 }
+.dropdown-item > .glyph.disabled {
+  color: var(--color-weak-text);
+}
 .dropdown-item > .glyph.glyph-single-check {
   color: var(--theme-menu-item-icon-check--color);
 }

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

@@ -1,14 +1,13 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * 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 { autoPlacement, autoUpdate, computePosition, inline, offset, shift, } from '@floating-ui/dom';
+import { autoUpdate, computePosition, flip, inline, offset, shift, } from '@floating-ui/dom';
 import { h, Host, } from '@stencil/core';
-import { getAlignment } from './alignment';
 export class Dropdown {
   constructor() {
     this.autoUpdateCleanup = null;
@@ -22,20 +21,73 @@ export class Dropdown {
     this.adjustDropdownWidthToReferenceWidth = false;
     this.header = undefined;
     this.offset = undefined;
+    this.triggerEvent = 'click';
+    this.overwriteDropdownStyle = undefined;
+    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) {
@@ -91,23 +144,34 @@ export class Dropdown {
         }
         break;
       case 'inside':
-        if (this.dropdownRef.contains(target)) {
+        if (this.dropdownRef.contains(target) && this.hostElement !== target) {
           this.close();
         }
         break;
+      case 'both':
+        if (this.hostElement !== target)
+          this.close();
+        break;
       default:
         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) {
@@ -116,9 +180,7 @@ export class Dropdown {
         middleware: [],
       };
       if (this.placement.includes('auto')) {
-        positionConfig.middleware.push(autoPlacement({
-          alignment: getAlignment(this.placement),
-        }));
+        positionConfig.middleware.push(flip());
       }
       else {
         positionConfig.placement = this.placement;
@@ -142,6 +204,13 @@ export class Dropdown {
           left: '0',
           transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(computeResponse.y)}px)`,
         });
+        if (this.overwriteDropdownStyle) {
+          const overwriteStyle = await this.overwriteDropdownStyle({
+            dropdownRef: this.dropdownRef,
+            triggerRef: this.triggerElement,
+          });
+          Object.assign(this.dropdownRef.style, overwriteStyle);
+        }
       }, {
         ancestorResize: true,
         ancestorScroll: true,
@@ -226,7 +295,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 +456,63 @@ 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'"
+      },
+      "overwriteDropdownStyle": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>",
+          "resolved": "(delegate: { dropdownRef: HTMLElement; triggerRef?: HTMLElement; }) => Promise<Partial<CSSStyleDeclaration>>",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            },
+            "Promise": {
+              "location": "global"
+            },
+            "Partial": {
+              "location": "global"
+            },
+            "CSSStyleDeclaration": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        }
       }
     };
   }