funnel-gfx-wc 0.1.37 → 0.1.39

package/dist/collection/components/funnel-app/funnel-gfx.js

@@ -1,57 +1,40 @@
 import { h } from "@stencil/core";
-import { funnelDefs, colorFor, ColorPlugin, } from "../../utils";
-import Between from "between.js";
-Between._plugins.color = ColorPlugin;
+import { animate } from "animejs";
+import { funnelDefs, colorFor } from "../../utils";
 let barHeight = [];
 let barRefs = undefined;
 const bgdFill = colorFor('white');
 const xFill = colorFor('bada55');
-let lastHex = '#bada55';
 let tween = undefined;
-let lastVal = [0, 0, 0, 0, 0];
 let tween2 = [undefined, undefined, undefined, undefined, undefined];
 const processColor = (next) => {
     if (!barRefs)
         return;
-    const hex1 = lastHex;
     const hex2 = colorFor(next);
     // IMPORTANT:  we are tweening between the hex values, not the names...
-    if (hex1 !== null && hex1 !== hex2) {
-        if (tween) {
-            tween.pause();
-        }
-        tween = new Between(hex1, hex2)
-            .time(1000)
-            .easing(Between.Easing.Cubic.InOut)
-            .on('update', (v) => {
-            barRefs.forEach(bar => {
-                bar.setAttribute('fill', `${v}`);
-            });
-            lastHex = v;
-        });
+    if (tween) {
+        tween.pause();
     }
+    tween = animate(barRefs, {
+        fill: hex2,
+        ease: 'inOutCubic',
+    });
 };
 const processValues = (next) => {
     if (!barRefs)
         return;
     barRefs.forEach((bar, index) => {
         const height = barHeight[index];
-        const last = lastVal[index];
         const value = next[index];
-        if (last !== null && last !== value) {
-            if (tween2[index]) {
-                tween2[index].pause();
-            }
-            // NOTE:  next & last are values between 0-100 (aka. percentage)
-            tween2[index] = new Between(last, value)
-                .time(1000)
-                .easing(Between.Easing.Cubic.InOut)
-                .on('update', (v) => {
-                const y = height * ((100 - v) / 100);
-                bar.setAttribute('y', `${y}`);
-                lastVal[index] = v;
-            });
+        if (tween2[index]) {
+            tween2[index].pause();
         }
+        // NOTE:  next & last are values between 0-100 (aka. percentage)
+        const y = height * ((100 - value) / 100);
+        tween2[index] = animate(bar, {
+            y: y,
+            ease: 'inOutCubic',
+        });
     });
 };
 const createFunnel = ({ id, height, width, x, y, drop }) => {

package/dist/collection/styles/shadow.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {

package/dist/collection/tokens.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {

package/dist/collection/utils/index.js

@@ -1,4 +1,3 @@
-export * from './color-plugin';
 export * from './funnel-defs';
 export * from './named-colors';
 export * from './store';

package/dist/collection/utils/tw-version.js

@@ -1,4 +1,4 @@
 // WARNING:  generated file...
-const TW_VERSION = '4.1.4';
+const TW_VERSION = '4.1.5';
 export { TW_VERSION };
 export default TW_VERSION;