@siemens/ix 1.2.0 → 1.3.0-beta.0

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

@@ -6,67 +6,65 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { createPopper, } from '@popperjs/core';
+import { autoPlacement, autoUpdate, computePosition, inline, offset, shift, } from '@floating-ui/dom';
 import { h, Host, } from '@stencil/core';
+import { getAlignment } from './alignment';
 export class Dropdown {
   constructor() {
+    this.autoUpdateCleanup = null;
     this.show = false;
     this.trigger = undefined;
     this.anchor = undefined;
     this.closeBehavior = 'both';
-    this.placement = 'bottom-end';
+    this.placement = 'bottom-start';
     this.positioningStrategy = 'fixed';
     this.adjustDropdownWidthToReferenceWith = false;
     this.adjustDropdownWidthToReferenceWidth = false;
     this.header = undefined;
+    this.offset = undefined;
     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);
+  async registerListener(element) {
+    this.triggerElement = await this.resolveElement(element);
+    if (this.triggerElement) {
+      this.triggerElement.addEventListener('click', this.openBind);
     }
-    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);
+  async unregisterListener(element) {
+    const trigger = await this.resolveElement(element);
     trigger.removeEventListener('click', this.openBind);
   }
-  componentDidRender() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
+  resolveElement(element) {
+    if (typeof element !== 'string') {
+      return Promise.resolve(element);
+    }
+    const selector = `#${element}`;
+    return new Promise((resolve) => {
+      if (document.querySelector(selector)) {
+        return resolve(document.querySelector(selector));
+      }
+      const observer = new MutationObserver(() => {
+        if (document.querySelector(selector)) {
+          resolve(document.querySelector(selector));
+          observer.disconnect();
+        }
+      });
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    });
   }
   async changedShow(newShow) {
-    var _a;
     if (newShow) {
-      this.anchorElement = this.anchor
+      this.anchorElement = await (this.anchor
         ? this.resolveElement(this.anchor)
-        : this.resolveElement(this.trigger);
+        : this.resolveElement(this.trigger));
       if (this.anchorElement) {
-        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-        this.popperInstance = 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`;
-            }
-          },
-        });
+        this.applyDropdownPosition();
       }
     }
   }
@@ -111,16 +109,64 @@ export class Dropdown {
     this.show = false;
     this.showChanged.emit(this.show);
   }
+  async applyDropdownPosition() {
+    if (this.anchorElement && this.dropdownRef) {
+      let positionConfig = {
+        strategy: this.positioningStrategy,
+        middleware: [],
+      };
+      if (this.placement.includes('auto')) {
+        positionConfig.middleware.push(autoPlacement({
+          alignment: getAlignment(this.placement),
+        }));
+      }
+      else {
+        positionConfig.placement = this.placement;
+      }
+      positionConfig.middleware = [
+        ...positionConfig.middleware,
+        inline(),
+        shift(),
+      ];
+      if (this.offset) {
+        positionConfig.middleware.push(offset(this.offset));
+      }
+      if (this.autoUpdateCleanup) {
+        this.autoUpdateCleanup();
+        this.autoUpdateCleanup = null;
+      }
+      this.autoUpdateCleanup = autoUpdate(this.anchorElement, this.dropdownRef, async () => {
+        const computeResponse = await computePosition(this.anchorElement, this.dropdownRef, positionConfig);
+        Object.assign(this.dropdownRef.style, {
+          top: '0',
+          left: '0',
+          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(computeResponse.y)}px)`,
+        });
+      }, {
+        ancestorResize: true,
+        ancestorScroll: true,
+        elementResize: true,
+      });
+    }
+  }
+  async componentDidLoad() {
+    if (this.trigger) {
+      this.registerListener(this.trigger);
+    }
+  }
+  async componentDidRender() {
+    await this.applyDropdownPosition();
+  }
   disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+    if (this.autoUpdateCleanup) {
+      this.autoUpdateCleanup();
+    }
   }
   /**
    * Update position of dropdown
    */
   async updatePosition() {
-    var _a;
-    await ((_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update());
+    this.applyDropdownPosition();
   }
   render() {
     return (h(Host, { ref: (ref) => (this.dropdownRef = ref), class: {
@@ -129,6 +175,7 @@ export class Dropdown {
       }, style: {
         margin: '0',
         minWidth: '0px',
+        position: this.positioningStrategy,
       } }, h("div", { style: { display: 'contents' } }, this.header ? h("div", { class: "dropdown-header" }, this.header) : '', h("slot", null))));
   }
   static get is() { return "ix-dropdown"; }
@@ -232,7 +279,7 @@ export class Dropdown {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@popperjs/core"
+              "path": "./placement"
             }
           }
         },
@@ -244,20 +291,15 @@ export class Dropdown {
         },
         "attribute": "placement",
         "reflect": false,
-        "defaultValue": "'bottom-end'"
+        "defaultValue": "'bottom-start'"
       },
       "positioningStrategy": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "PositioningStrategy",
+          "original": "'absolute' | 'fixed'",
           "resolved": "\"absolute\" | \"fixed\"",
-          "references": {
-            "PositioningStrategy": {
-              "location": "import",
-              "path": "@popperjs/core"
-            }
-          }
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -301,7 +343,10 @@ export class Dropdown {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "Will be removed. Not used anymore"
+            }],
           "text": "Adjust dropdown width to the parent width"
         },
         "attribute": "adjust-dropdown-width-to-reference-width",
@@ -324,6 +369,24 @@ export class Dropdown {
         },
         "attribute": "header",
         "reflect": false
+      },
+      "offset": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  }",
+          "resolved": "{ mainAxis?: number; crossAxis?: number; alignmentAxis?: number; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Move dropdown along main axis of alignment"
+        }
       }
     };
   }

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

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

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

@@ -0,0 +1,81 @@
+/*
+ * 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 */
+:host {
+  display: inline-block;
+  position: relative;
+  height: 2rem;
+}
+:host .dropdown-button {
+  position: relative;
+}
+:host .hide {
+  display: none;
+}
+:host .triangle {
+  position: absolute;
+  -webkit-margin-start: 1.5625rem;
+          margin-inline-start: 1.5625rem;
+  -webkit-margin-before: -0.4375rem;
+          margin-block-start: -0.4375rem;
+  border-right: 0 solid transparent;
+  border-left: 4px solid transparent;
+  border-top: 0 solid transparent;
+  border-bottom: 4px solid;
+  color: var(--theme-btn-primary--color);
+}
+:host .triangle.primary.ghost {
+  color: var(--theme-btn-invisible-primary--color);
+}
+:host .triangle.primary.outline {
+  color: var(--theme-btn-outline-primary--color);
+}
+:host .triangle.primary.ghost.disabled {
+  color: var(--theme-btn-invisible-primary--color--disabled);
+}
+:host .triangle.primary.outline.disabled {
+  color: var(--theme-btn-outline-primary--color--disabled);
+}
+:host .triangle.primary.disabled {
+  color: var(--theme-btn-primary--color--disabled);
+}
+:host .triangle.secondary.ghost {
+  color: var(--theme-btn-invisible-secondary--color);
+}
+:host .triangle.secondary.outline {
+  color: var(--theme-btn-outline-secondary--color);
+}
+:host .triangle.secondary.ghost.disabled {
+  color: var(--theme-btn-invisible-secondary--color--disabled);
+}
+:host .triangle.secondary.outline.disabled {
+  color: var(--theme-btn-outline-secondary--color--disabled);
+}
+:host .triangle.secondary.disabled {
+  color: var(--theme-btn-secondary--color--disabled);
+}
+:host .hide {
+  display: none;
+}
+:host .dropdown {
+  width: auto !important;
+  inset: auto !important;
+  transform: unset !important;
+}

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

@@ -0,0 +1,191 @@
+/*
+ * 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 { h, Host } from '@stencil/core';
+/**
+ * @since 1.3.0
+ */
+export class DropdownButton {
+  constructor() {
+    this.variant = 'Primary';
+    this.outline = false;
+    this.ghost = false;
+    this.active = false;
+    this.disabled = false;
+    this.label = '';
+    this.icon = undefined;
+    this.dropdownAnchor = undefined;
+  }
+  getTriangle() {
+    return (h("div", { class: {
+        triangle: true,
+        hide: this.label !== '',
+        primary: this.variant === 'Primary',
+        secondary: this.variant === 'Secondary',
+        ghost: this.ghost,
+        outline: this.outline,
+        disabled: this.disabled,
+      } }));
+  }
+  render() {
+    return (h(Host, null, 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))));
+  }
+  static get is() { return "ix-dropdown-button"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Buttons",
+          "resolved": "\"Primary\" | \"Secondary\"",
+          "references": {
+            "Buttons": {
+              "location": "import",
+              "path": "../utils/button-variants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button varaint"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'Primary'"
+      },
+      "outline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Outline button"
+        },
+        "attribute": "outline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "ghost": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button with no background or outline"
+        },
+        "attribute": "ghost",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active button"
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disable button"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set label"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button icon"
+        },
+        "attribute": "icon",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "dropdownAnchor": {}
+    };
+  }
+}

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

@@ -114,6 +114,7 @@
   position: absolute;
   border-radius: var(--theme-input--border-radius);
   right: 0px;
+  margin-right: 0.25rem;
 }
 :host .input {
   padding-left: 2rem !important;

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

@@ -74,7 +74,7 @@ export class ExpandingSearch {
       }, ref: (el) => (this.textInput = el), "data-testid": "input", placeholder: this.placeholder, type: "text", value: this.value, onBlur: () => {
         this.collapseInput();
         this.hasFocus = false;
-      }, onFocus: () => (this.hasFocus = true), onInput: (e) => this.onChange(e), tabindex: this.expanded ? 0 : -1 }), this.isFieldChanged ? (h("ix-icon-button", { class: "btn-clear", icon: "clear", ghost: true, size: "24", "data-testid": "clear-button", onClick: () => this.clearClicked() })) : null)));
+      }, onFocus: () => (this.hasFocus = true), onInput: (e) => this.onChange(e), tabindex: this.expanded ? 0 : -1 }), this.isFieldChanged ? (h("ix-icon-button", { class: "btn-clear", icon: "clear", ghost: true, size: "16", "data-testid": "clear-button", onClick: () => this.clearClicked() })) : null)));
   }
   static get is() { return "ix-expanding-search"; }
   static get encapsulation() { return "scoped"; }

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

@@ -6,37 +6,10 @@
  * 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 */
+:host.disabled {
+  pointer-events: none;
+}
 :host .icon-button {
   padding: 0;
   overflow: hidden;
-}
-:host .btn-icon-12 {
-  height: 1rem;
-  width: 1rem;
-  min-width: 1rem;
-  min-height: 1rem;
-}
-:host .btn-icon-16 {
-  height: 1.5rem;
-  width: 1.5rem;
-  min-width: 1.5rem;
-  min-height: 1.5rem;
-}
-:host .btn-icon-32 {
-  height: 2rem;
-  width: 2rem;
-  min-width: 2rem;
-  min-height: 2rem;
 }

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

@@ -6,7 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { getButtonClasses } from '../button/base-button';
 export class IconButton {
   constructor() {
@@ -26,7 +26,7 @@ export class IconButton {
     return Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, this.oval, this.selected, this.disabled)), { 'icon-button': true, 'btn-icon-12': this.size === '12', 'btn-icon-16': this.size === '16', 'btn-icon-32': this.size === '32' || this.size === '24' || !this.size });
   }
   render() {
-    return (h("button", { class: this.getIconButtonClasses(), type: this.type }, h("ix-icon", { size: this.size, name: this.icon, color: this.color }), h("div", { style: { display: 'none' } }, h("slot", null))));
+    return (h(Host, { class: { disabled: this.disabled } }, h("button", { class: this.getIconButtonClasses(), type: this.type }, h("ix-icon", { size: this.size, name: this.icon, color: this.color }), h("div", { style: { display: 'none' } }, h("slot", null)))));
   }
   static get is() { return "ix-icon-button"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/map-navigation/map-navigation.js

@@ -107,9 +107,10 @@ export class MapNavigation {
     overlayInstance.setAttribute('color', color);
     overlayInstance.setAttribute('name', name);
     overlayInstance.setAttribute('icon', icon);
+    overlayInstance.setAttribute('slot', 'overlay');
     overlayInstance.addEventListener('closeClick', () => this.closeOverlay());
     overlayInstance.appendChild(component);
-    this.overlay.appendChild(overlayInstance);
+    this.hostElement.appendChild(overlayInstance);
   }
   /**
    * Close current shown overlay
@@ -134,7 +135,7 @@ export class MapNavigation {
     });
   }
   render() {
-    return (h(Host, null, h("div", { id: "menu-placeholder" }), h("div", { class: "map-nav" }, h("div", { class: "map-nav-sidebar" }, h("div", { class: "map-nav-header" }, h("ix-application-header", { name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { name: "logo" }))), h("div", { class: "map-nav-sidebar-content" }, h("div", { class: "map-nav-sidebar-static-content" }, h("div", { class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: "context-menu", ghost: true, size: "24", variant: "Secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { class: "map-nav-sidebar-user-content" }, h("slot", { name: "sidebar-content" })))), h("div", { class: "content" }, h("div", { class: "map-nav-header-content bg-2" }, h("slot", { name: "content-header" })), h("main", null, h("slot", null))))));
+    return (h(Host, null, h("div", { id: "menu-placeholder" }), h("div", { class: "map-nav" }, h("div", { class: "map-nav-sidebar" }, h("div", { class: "map-nav-header" }, h("ix-application-header", { name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { name: "logo" }))), h("div", { class: "map-nav-sidebar-content" }, h("div", { class: "map-nav-sidebar-static-content" }, h("div", { class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: "context-menu", ghost: true, size: "24", variant: "Secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { class: "map-nav-sidebar-user-content" }, h("slot", { name: "sidebar-content" })))), h("div", { class: "content" }, h("div", { class: "map-nav-header-content bg-2" }, h("slot", { name: "content-header" })), h("main", null, h("slot", null), h("slot", { name: "overlay" }))))));
   }
   static get is() { return "ix-map-navigation"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/map-navigation-overlay/map-navigation-overlay.css

@@ -192,6 +192,7 @@ a {
   height: 100%;
   z-index: 2;
   top: 0;
+  left: 0;
   background-color: var(--theme-overlay--background);
 }
 :host .overlay-header {
@@ -208,7 +209,8 @@ a {
   min-width: 0;
 }
 :host .overlay-header-content ix-icon {
-  margin-left: 1rem;
+  -webkit-margin-start: 1rem;
+          margin-inline-start: 1rem;
   color: var(--theme-overlay-header--color);
 }
 :host .overlay-header-content .overlay-header-title {
@@ -223,7 +225,8 @@ a {
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--theme-overlay-header--color);
-  margin-left: 1rem;
+  -webkit-margin-start: 1rem;
+          margin-inline-start: 1rem;
 }
 :host .color-indicator {
   display: inline-block;
@@ -233,6 +236,8 @@ a {
   background-color: var(--theme-color-neutral);
 }
 :host .overlay-close {
-  margin-left: auto;
-  margin-right: 1rem;
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
+  -webkit-margin-end: 1rem;
+          margin-inline-end: 1rem;
 }

package/dist/collection/components/map-navigation-overlay/map-navigation-overlay.js

@@ -49,7 +49,7 @@ export class MapNavigationOverlay {
         'background-color': this.color
           ? `var(--theme-${this.color})`
           : '',
-      } }), h("div", { class: "overlay-header-content" }, h("ix-icon", { size: "32", name: this.icon }), h("span", { class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { class: "overlay-close", invisible: true, icon: "close", size: "24", onClick: () => this.closeOverlay() })), h("slot", null)));
+      } }), h("div", { class: "overlay-header-content" }, h("ix-icon", { size: "32", name: this.icon }), h("span", { class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { class: "overlay-close", ghost: true, icon: "close", size: "24", onClick: () => this.closeOverlay() })), h("slot", null)));
   }
   static get is() { return "ix-map-navigation-overlay"; }
   static get encapsulation() { return "scoped"; }