@siemens/ix 1.2.1 → 1.3.0-beta.0

package/dist/collection/components/validation-tooltip/validation-tooltip.css

@@ -179,7 +179,8 @@ a {
 }
 
 :host {
-  display: block;
+  display: inline-block;
+  position: relative;
 }
 :host .validation-tooltip {
   background-color: var(--theme-tootlip--background);
@@ -206,31 +207,10 @@ a {
   transform: rotate(45deg);
   background-color: var(--theme-tootlip--background);
 }
-:host .validation-tooltip[data-popper-placement^=top] > #arrow {
+:host .validation-tooltip > #arrow {
   bottom: -5px;
 }
-:host .validation-tooltip[data-popper-placement^=top] > #arrow::before {
+:host .validation-tooltip > #arrow::before {
   border-right: 1px solid var(--theme-tooltip--border-color);
   border-bottom: 1px solid var(--theme-tooltip--border-color);
-}
-:host .validation-tooltip[data-popper-placement^=bottom] > #arrow {
-  top: -5px;
-}
-:host .validation-tooltip[data-popper-placement^=bottom] > #arrow::before {
-  border-left: 1px solid var(--theme-tooltip--border-color);
-  border-top: 1px solid var(--theme-tooltip--border-color);
-}
-:host .validation-tooltip[data-popper-placement^=left] > #arrow {
-  right: -5px;
-}
-:host .validation-tooltip[data-popper-placement^=left] > #arrow::before {
-  border-right: 1px solid var(--theme-tooltip--border-color);
-  border-top: 1px solid var(--theme-tooltip--border-color);
-}
-:host .validation-tooltip[data-popper-placement^=right] > #arrow {
-  left: -5px;
-}
-:host .validation-tooltip[data-popper-placement^=right] > #arrow::before {
-  border-left: 1px solid var(--theme-tooltip--border-color);
-  border-bottom: 1px solid var(--theme-tooltip--border-color);
 }

package/dist/collection/components/validation-tooltip/validation-tooltip.js

@@ -6,9 +6,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import '@popperjs/core';
-import { createPopper } from '@popperjs/core';
+import { arrow, autoPlacement, autoUpdate, computePosition, inline, offset, shift, } from '@floating-ui/dom';
 import { h, Host } from '@stencil/core';
+import { getAlignment } from '../dropdown/alignment';
 /**
  * @slot tooltip-message - Custom tooltip message with html support
  */
@@ -19,6 +19,8 @@ export class ValidationTooltip {
     this.message = undefined;
     this.placement = 'top';
     this.isInputValid = true;
+    this.tooltipPosition = undefined;
+    this.arrowPosition = undefined;
   }
   get arrow() {
     return this.hostElement.querySelector('#arrow');
@@ -32,6 +34,61 @@ export class ValidationTooltip {
   get tooltipElement() {
     return this.hostElement.querySelector('.validation-tooltip');
   }
+  destoryAutoUpdate() {
+    this.tooltipElement.style.display = 'none';
+    if (this.autoUpdateCleanup) {
+      this.autoUpdateCleanup();
+    }
+  }
+  applyTooltipPosition() {
+    this.tooltipElement.style.display = 'block';
+    let positionConfig = {
+      strategy: 'fixed',
+      middleware: [
+        inline(),
+        shift(),
+        offset({
+          mainAxis: 8,
+        }),
+      ],
+    };
+    if (this.placement.includes('auto')) {
+      positionConfig.middleware.push(autoPlacement({
+        alignment: getAlignment(this.placement),
+      }));
+    }
+    else {
+      positionConfig.placement = this.placement;
+    }
+    this.autoUpdateCleanup = autoUpdate(this.inputElement, this.tooltipElement, async () => {
+      positionConfig.middleware = [
+        ...positionConfig.middleware,
+        arrow({
+          element: this.arrow,
+        }),
+      ];
+      const computeResponse = await computePosition(this.inputElement, this.tooltipElement, positionConfig);
+      if (computeResponse.middlewareData.arrow) {
+        const { x, y } = computeResponse.middlewareData.arrow;
+        this.arrowPosition = {
+          x,
+          y,
+        };
+        Object.assign(this.arrow.style, {
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+        });
+      }
+      this.tooltipPosition = {
+        x: computeResponse.x,
+        y: computeResponse.y,
+      };
+    }, {
+      ancestorResize: true,
+      ancestorScroll: true,
+      elementResize: true,
+    });
+  }
   componentDidLoad() {
     if (!this.inputElement) {
       throw Error('Validation tooltip is only working with an direct input child.');
@@ -63,41 +120,29 @@ export class ValidationTooltip {
     }
   }
   disconnectedCallback() {
-    var _a, _b;
+    var _a;
     (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-    (_b = this.popper) === null || _b === void 0 ? void 0 : _b.destroy();
+    this.destoryAutoUpdate();
     this.formElement.removeEventListener('submit', this.onSubmitBind);
     this.inputElement.removeEventListener('focus', this.onInputFocusBind);
   }
   validationChanged() {
     if (!this.isInputValid) {
-      this.tooltipElement.style.display = 'block';
-      this.popper = createPopper(this.inputElement, this.tooltipElement, {
-        placement: this.placement,
-        strategy: 'absolute',
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [0, 8],
-            },
-          },
-          {
-            name: 'arrow',
-            options: {
-              element: this.arrow,
-            },
-          },
-        ],
-      });
+      this.applyTooltipPosition();
     }
     else {
-      this.tooltipElement.style.display = 'none';
-      this.popper.destroy();
+      this.destoryAutoUpdate();
     }
   }
   render() {
-    return (h(Host, null, h("slot", null), h("div", { role: "tooltip", style: { display: 'none' }, class: "validation-tooltip text-default" }, this.message, h("slot", { name: "tooltip-message" }), h("div", { id: "arrow", "data-popper-arrow": true }))));
+    var _a, _b;
+    return (h(Host, null, h("slot", null), h("div", { role: "tooltip", style: {
+        display: 'none',
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        transform: `translate(${Math.round(((_a = this.tooltipPosition) === null || _a === void 0 ? void 0 : _a.x) || 0)}px,${Math.round(((_b = this.tooltipPosition) === null || _b === void 0 ? void 0 : _b.y) || 0)}px)`,
+      }, class: "validation-tooltip text-default" }, this.message, h("slot", { name: "tooltip-message" }), h("div", { id: "arrow" }))));
   }
   static get is() { return "ix-validation-tooltip"; }
   static get encapsulation() { return "scoped"; }
@@ -139,7 +184,7 @@ export class ValidationTooltip {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@popperjs/core"
+              "path": "../dropdown/placement"
             }
           }
         },
@@ -157,7 +202,9 @@ export class ValidationTooltip {
   }
   static get states() {
     return {
-      "isInputValid": {}
+      "isInputValid": {},
+      "tooltipPosition": {},
+      "arrowPosition": {}
     };
   }
   static get elementRef() { return "hostElement"; }

package/dist/collection/exports.js

@@ -13,3 +13,4 @@ export * from './components/toast/toast-utils';
 export * from './components/tree-item/default-tree-item';
 export * from './components/tree/tree-model';
 export * from './components/upload/upload-file-state';
+export * from './components/utils/theme-switcher';