@swisspost/design-system-components 9.0.0-next.0 → 9.0.0-next.10

package/dist/components/post-tooltip2.js

@@ -1,13 +1,9 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, h, Host } from '@stencil/core/internal/client';
 import { v as version$1 } from './package.js';
 import { g as getAttributeObserver } from './attribute-observer.js';
-import { b as checkEmptyOrType } from './index2.js';
+import { e as checkEmptyOrType } from './index2.js';
 import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
 
-function timeout(delay) {
-    return new Promise(resolve => setTimeout(resolve, delay));
-}
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -4777,7 +4773,7 @@ const isFocusable = /*@__PURE__*/getDefaultExportFromCjs(focusable.exports);
 
 }(window, document));
 
-const postTooltipCss = ":host{--post-contrast-color:#fff;--post-bg-rgb:51, 51, 51}post-popovercontainer{padding:.25rem .5rem;max-width:13.5rem;min-height:1rem}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}";
+const postTooltipCss = "post-popovercontainer{padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:calc(2*var(--post-core-dimension-112) - var(--post-core-dimension-8));min-height:var(--post-core-dimension-16)}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}";
 const PostTooltipStyle0 = postTooltipCss;
 
 const OPEN_DELAY = 650; // matches HTML title delay
@@ -4791,21 +4787,32 @@ let tooltipInstances = 0;
 let hideTooltipTimeout = null;
 const tooltipTargetAttribute = 'data-tooltip-target';
 const tooltipTargetAttributeSelector = `[${tooltipTargetAttribute}]`;
+let globalCurrentTarget;
+let tooltipTimeout = null;
 /**
  * Global event listener to show tooltips. This is globalized so that triggers that are rendered
  * async will still work without the need to set listeners on the element itself
+ *
+ * This handler manages both pointer and focus events to properly trigger tooltips.
+ * If the event is a focus event (e.g., keyboard navigation), pointer events are ignored to avoid
+ * interference with tooltip behavior.
  * @param e Event
  * @returns
  */
 const globalInterestHandler = (e) => {
     const targetElement = e.target.closest(tooltipTargetAttributeSelector);
-    if (!targetElement || !('getAttribute' in targetElement))
+    globalCurrentTarget = targetElement;
+    if (!targetElement || !('getAttribute' in targetElement)) {
+        clearTimeout(tooltipTimeout);
         return;
+    }
     const tooltipTarget = targetElement.getAttribute(tooltipTargetAttribute);
     if (!tooltipTarget || tooltipTarget === '')
         return;
     const tooltip = document.getElementById(tooltipTarget);
-    void (tooltip === null || tooltip === void 0 ? void 0 : tooltip.show(targetElement));
+    // Determine if the tooltip was triggered by a focus event
+    const triggeredByFocus = e.type === 'focusin';
+    void (tooltip === null || tooltip === void 0 ? void 0 : tooltip.show(targetElement, triggeredByFocus));
     if (hideTooltipTimeout) {
         window.clearTimeout(hideTooltipTimeout);
         hideTooltipTimeout = null;
@@ -4862,6 +4869,7 @@ const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.wasOpenedByFocus = false;
         this.placement = 'top';
         this.arrow = true;
         this.delayed = false;
@@ -4921,11 +4929,32 @@ const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
     /**
      * Programmatically display the tooltip
      * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+     * @param triggeredByFocus A boolean indicating if the tooltip was triggered by a focus event.
      */
-    async show(target) {
-        if (this.delayed)
-            await timeout(OPEN_DELAY);
-        this.popoverRef.show(target);
+    async show(target, triggeredByFocus = false) {
+        const showTooltip = () => {
+            // If focus or pointer event is not on the button anymore, don't show the tooltip
+            if (globalCurrentTarget !== target)
+                return;
+            // Determine if the tooltip was opened by a focus event
+            this.wasOpenedByFocus = triggeredByFocus;
+            // Disable pointer events if triggered by focus, otherwise enable them
+            if (this.wasOpenedByFocus) {
+                this.host.style.pointerEvents = 'none';
+            }
+            else {
+                this.host.style.pointerEvents = 'auto';
+            }
+            this.popoverRef.show(target);
+        };
+        if (this.delayed) {
+            tooltipTimeout = setTimeout(() => {
+                showTooltip();
+            }, OPEN_DELAY);
+        }
+        else {
+            showTooltip();
+        }
     }
     /**
      * Programmatically hide this tooltip
@@ -4952,13 +4981,15 @@ const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
     }
     /**
      * Pointer or focus left the tooltip, initiate the hiding process
+     * Re-enable pointer events when the tooltip is no longer in focus or hovered
      */
     handleInterestLost() {
         globalHideTooltip(this);
+        this.host.style.pointerEvents = 'auto';
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: 'f543fa8f63cc6b65e1a86e34b1a59b4ca0bb9e47', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: 'e920d62462d209ff25593f7989ca16f6177b7292', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '607d7357cb201c7e6e62f9a241392bd5ef1f156e' }))));
+        return (h(Host, { key: '492f3f8b1b323417304ffba6c93f277c18f5b3d8', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '1b25c36c8351f0471e9acdf1fdf3073fa59683da', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '0c1f7d6c81e214155976d1fb6151ec0f97724724' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/slide.js

@@ -0,0 +1,25 @@
+const easing = 'ease';
+const duration = 500;
+const fill = 'forwards';
+const slideUp = (el, translateSize = '100%') => {
+    return el.animate([
+        { transform: `translateY(${translateSize})` }, // Starting position (no translation)
+        { transform: 'translateY(0)' }, // End position
+    ], {
+        duration: duration,
+        easing,
+        fill,
+    });
+};
+const slideDown = (el, translateSize = '100%') => {
+    return el.animate([
+        { transform: 'translateY(0)' }, // Starting position (no translation)
+        { transform: `translateY(${translateSize})` }, // End position
+    ], {
+        duration: duration,
+        easing,
+        fill,
+    });
+};
+
+export { slideDown as a, slideUp as s };