@esportsplus/ui 0.55.0 → 0.56.3

package/build/components/tooltip/onclick.js

@@ -1,7 +1,8 @@
-import * as template_u0 from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
-const template_u2z = template_u0.template(`<div class='tooltip' >`);
+import { morph, morphing } from './utilities.js';
+const template_0p6u8352 = template_u1.template(`<div class='tooltip'>`);
 class ReactiveObject_0p6u8350 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     constructor() {
@@ -15,20 +16,39 @@ class ReactiveObject_0p6u8350 extends reactivity_u0.ReactiveObject {
     }
 }
 export default component(({ state = new ReactiveObject_0p6u8350(), toggle = false, ...attributes }, content) => {
-    let root_u2y = template_u2z(), element_u30 = root_u2y.firstChild;
-    template_u0.setProperties(element_u30, attributes);
-    template_u0.setList(element_u30, 'class', () => state.active && '--active');
-    template_u0.delegate(element_u30, 'click', function (e) {
-        state.active = this === e.target || toggle ? !state.active : true;
-    });
-    template_u0.ondocument(element_u30, 'click', function (event) {
-        if (!this?.isConnected || !state.active) {
-            return;
-        }
-        if (!this.contains(event.target)) {
-            state.active = false;
-        }
-    });
-    template_u0.slot(element_u30, content, 1);
-    return root_u2y;
+    let cancel;
+    return (() => {
+        let root_0p6u8351 = template_0p6u8352(), element_0p6u8353 = root_0p6u8351.firstChild;
+        template_u1.setProperties(element_0p6u8353, attributes);
+        template_u1.setList(element_0p6u8353, 'class', () => state.active && '--active');
+        template_u1.delegate(element_0p6u8353, 'animationcancel', morphing(false));
+        template_u1.delegate(element_0p6u8353, 'animationend', morphing(false));
+        template_u1.delegate(element_0p6u8353, 'animationstart', morphing(true));
+        template_u1.delegate(element_0p6u8353, 'click', function (e) {
+            let active = this === e.target || toggle ? !state.active : true;
+            cancel?.();
+            cancel = undefined;
+            if (active && !state.active) {
+                cancel = morph(this, () => {
+                    cancel = undefined;
+                    state.active = true;
+                });
+                return;
+            }
+            state.active = active;
+        });
+        template_u1.ondocument(element_0p6u8353, 'click', function (event) {
+            if (!this?.isConnected || !state.active) {
+                return;
+            }
+            if (!this.contains(event.target)) {
+                state.active = false;
+            }
+        });
+        template_u1.delegate(element_0p6u8353, 'transitioncancel', morphing(false));
+        template_u1.delegate(element_0p6u8353, 'transitionend', morphing(false));
+        template_u1.delegate(element_0p6u8353, 'transitionrun', morphing(true));
+        template_u1.slot(element_0p6u8353, content, 1);
+        return root_0p6u8351;
+    })();
 });