codexly-ui 0.13.4 → 0.13.6

package/fesm2022/codexly-ui.mjs

@@ -2788,6 +2788,15 @@ class ClxAnimateService {
             void element.offsetHeight;
         const animClass = `${PREFIX}${config.animation}`;
         const isInfinite = config.repeat === 'infinite';
+        // A fillMode: 'forwards' animation (an exit fade/slide, e.g. clx-toast's playExitAnimation)
+        // is almost always followed by the caller destroying the element on the same tick its promise
+        // resolves — stripping animClass in _cleanup right then would drop animation-fill-mode's hold
+        // on the last keyframe, snapping the element back to its static CSS state (opaque, in place)
+        // for one paintable frame before removal, which read as a flash/"ghost" re-appearance. Classes
+        // are only stripped for a non-forwards run; a forwards run keeps them and instead resets
+        // them at the START of runAnimation's own reflow-forced restart path above, so a persisted
+        // element that's re-animated later (e.g. clx-animate-directive on hover) still resets cleanly.
+        const keepClassesOnEnd = config.fillMode === 'forwards';
         element.style.setProperty('--clx-anim-duration', `${config.duration}ms`);
         element.style.setProperty('--clx-anim-delay', `${config.delay}ms`);
         element.style.setProperty('--clx-anim-repeat', isInfinite ? 'infinite' : String(config.repeat ?? 1));
@@ -2809,7 +2818,12 @@ class ClxAnimateService {
         return new Promise(resolve => {
             const handleEnd = (ev) => {
                 ev.stopPropagation();
-                this._cleanup(element, animClass);
+                if (keepClassesOnEnd) {
+                    this._cleanups.delete(element);
+                }
+                else {
+                    this._cleanup(element, animClass);
+                }
                 this._runningCount.update(c => Math.max(0, c - 1));
                 resolve();
             };
@@ -4583,13 +4597,25 @@ class ClxNumberComponent {
         this._onChange(v);
         this._onTouched();
     }
+    /** Number of decimal places implied by step() (e.g. 0.1 -> 1, 0.01 -> 2, 1 -> 0) — used to round
+     *  after +/- so a fractional step doesn't accumulate binary floating-point noise (0.1 isn't
+     *  exactly representable, so 2.2 + 0.1 naively yields 2.3000000000000003, not 2.3). */
+    _stepDecimals() {
+        const str = this.step().toString();
+        const dot = str.indexOf('.');
+        return dot === -1 ? 0 : str.length - dot - 1;
+    }
+    _roundToStep(value) {
+        const factor = 10 ** this._stepDecimals();
+        return Math.round(value * factor) / factor;
+    }
     _decrement() {
-        const next = this._value() - this.step();
+        const next = this._roundToStep(this._value() - this.step());
         const clamped = this.min() !== null ? Math.max(next, this.min()) : next;
         this._applyValue(clamped);
     }
     _increment() {
-        const next = this._value() + this.step();
+        const next = this._roundToStep(this._value() + this.step());
         const clamped = this.max() !== null ? Math.min(next, this.max()) : next;
         this._applyValue(clamped);
     }