@agnos-ui/core 0.2.0 → 0.3.0

package/services/transitions/baseTransitions.js

@@ -1,182 +1,171 @@
-import { batch, computed, derived, writable } from '@amadeus-it-group/tansu';
-import { typeBoolean, typeBooleanOrNull, typeFunction } from '../../utils/writables';
-import { promiseWithResolve } from '../../utils/internal/promise';
-import { noop } from '../../utils/internal/func';
-import { bindableDerived, stateStores, writablesForProps } from '../../utils/stores';
-import { createStoreDirective, directiveSubscribe, directiveUpdate, mergeDirectives } from '../../utils/directive';
+import { computed, writable, derived, batch } from "@amadeus-it-group/tansu";
+import { c as typeBoolean, f as typeFunction, d as typeBooleanOrNull } from "../../writables-DoU_XYTX.js";
+import { c as promiseWithResolve } from "../../promise-CY2U8bTP.js";
+import { n as noop } from "../../func-DR0n-ShK.js";
+import { writablesForProps, bindableDerived, stateStores } from "../../utils/stores.js";
+import { h as createStoreDirective, k as mergeDirectives, d as directiveSubscribe, e as directiveUpdate } from "../../directive-DCYlDznf.js";
 const neverEndingPromise = new Promise(noop);
-/**
- * A transition to show / hide an element without any animation. It uses the HTML `display` attribute.
- *
- * @param element - the element to animate
- * @param direction - the direction
- */
-export const noAnimation = async (element, direction) => {
-    element.style.display = direction === 'show' ? '' : 'none';
+const noAnimation = async (element, direction) => {
+  element.style.display = direction === "show" ? "" : "none";
 };
 const defaultValues = {
-    animation: true,
-    animationOnInit: false,
-    initDone: null,
-    visible: true,
-    transition: noAnimation,
-    onShown: noop,
-    onHidden: noop,
-    onVisibleChange: noop,
+  animated: true,
+  animatedOnInit: false,
+  initDone: null,
+  visible: true,
+  transition: noAnimation,
+  onShown: noop,
+  onHidden: noop,
+  onVisibleChange: noop
 };
 const configValidator = {
-    animation: typeBoolean,
-    animationOnInit: typeBoolean,
-    visible: typeBoolean,
-    transition: typeFunction,
-    onShown: typeFunction,
-    onHidden: typeFunction,
-    onVisibleChange: typeFunction,
-    initDone: typeBooleanOrNull,
+  animated: typeBoolean,
+  animatedOnInit: typeBoolean,
+  visible: typeBoolean,
+  transition: typeFunction,
+  onShown: typeFunction,
+  onHidden: typeFunction,
+  onVisibleChange: typeFunction,
+  initDone: typeBooleanOrNull
 };
-/**
- * Create a transition widget.
- *
- * The widget will include a patch function, stores to track the animation states and a directive to apply the animation to an element.
- *
- * @param config - the props config of the transition
- * @returns the transition widget
- */
-export const createTransition = (config) => {
-    const [{ animation$, initDone$, visible$: requestedVisible$, transition$, onShown$, onHidden$, onVisibleChange$, animationOnInit$ }, patch] = writablesForProps(defaultValues, config, configValidator);
-    const { element$, directive: storeDirective } = createStoreDirective();
-    const elementPresent$ = computed(() => !!element$());
-    const visible$ = bindableDerived(onVisibleChange$, [requestedVisible$], ([visible]) => visible);
-    const currentTransition$ = writable(null);
-    const transitioning$ = computed(() => !!currentTransition$());
-    const stop = () => {
-        let context;
-        currentTransition$.update((currentTransition) => {
-            currentTransition?.abort.abort();
-            context = currentTransition?.context;
-            return null;
-        });
-        return context;
-    };
-    const runTransition = (visible, animation, element, transitionFn) => batch(() => {
-        const abort = new AbortController();
-        const signal = abort.signal;
-        const context = stop() ?? {};
-        const { promise, resolve } = promiseWithResolve();
-        const currentTransition = {
-            abort,
-            animation,
-            visible,
-            context,
-            element,
-            transitionFn,
-            promise,
-        };
-        currentTransition$.set(currentTransition);
-        resolve((async () => {
-            try {
-                await transitionFn(element, visible ? 'show' : 'hide', animation, signal, context);
-            }
-            finally {
-                if (signal.aborted) {
-                    await neverEndingPromise;
-                }
-                else {
-                    currentTransition$.set(null);
-                    (visible ? onShown$ : onHidden$)()?.();
-                }
-            }
-        })());
-        return currentTransition;
+const createTransition = (config) => {
+  const [{ animated$, initDone$, visible$: requestedVisible$, transition$, onShown$, onHidden$, onVisibleChange$, animatedOnInit$ }, patch] = writablesForProps(defaultValues, config, configValidator);
+  const { element$, directive: storeDirective } = createStoreDirective();
+  const elementPresent$ = computed(() => !!element$());
+  const visible$ = bindableDerived(onVisibleChange$, [requestedVisible$], ([visible]) => visible);
+  const currentTransition$ = writable(
+    null
+  );
+  const transitioning$ = computed(() => !!currentTransition$());
+  const stop = () => {
+    let context;
+    currentTransition$.update((currentTransition) => {
+      currentTransition == null ? void 0 : currentTransition.abort.abort();
+      context = currentTransition == null ? void 0 : currentTransition.context;
+      return null;
     });
-    const shown$ = computed(() => !transitioning$() && visible$() && elementPresent$());
-    const hidden$ = computed(() => !transitioning$() && !visible$());
-    const effectiveAnimation$ = computed(() => (initDone$() ? animation$() : animationOnInit$()));
-    const animationFromToggle$ = writable(null);
-    let previousElement;
-    let previousVisible = requestedVisible$();
-    let pendingTransition = null;
-    const visibleAction$ = derived([visible$, element$, effectiveAnimation$, animationFromToggle$, transition$, currentTransition$], ([visible, element, animation, animationFromToggle, transition, currentTransition]) => {
-        const elementChanged = previousElement !== element;
-        previousElement = element;
-        const visibleChanged = previousVisible !== visible;
-        previousVisible = visible;
-        if (element) {
-            if (initDone$() == null) {
-                initDone$.set(true);
-            }
-            const interruptAnimation = animationFromToggle != null && currentTransition && currentTransition.animation != animationFromToggle;
-            if (elementChanged || visibleChanged || interruptAnimation) {
-                if (visibleChanged || animationFromToggle != null) {
-                    pendingTransition = null;
-                }
-                const animate = animationFromToggle ?? pendingTransition?.animation ?? (elementChanged && !visible ? false : animation);
-                currentTransition = runTransition(visible, animate, element, transition);
-                pendingTransition?.resolve(currentTransition.promise);
-                pendingTransition = null;
-            }
+    return context;
+  };
+  const runTransition = (visible, animated, element, transitionFn) => batch(() => {
+    const abort = new AbortController();
+    const signal = abort.signal;
+    const context = stop() ?? {};
+    const { promise, resolve } = promiseWithResolve();
+    const currentTransition = {
+      abort,
+      animated,
+      visible,
+      context,
+      element,
+      transitionFn,
+      promise
+    };
+    currentTransition$.set(currentTransition);
+    resolve(
+      (async () => {
+        var _a;
+        try {
+          await transitionFn(element, visible ? "show" : "hide", animated, signal, context);
+        } finally {
+          if (signal.aborted) {
+            await neverEndingPromise;
+          } else {
+            currentTransition$.set(null);
+            (_a = (visible ? onShown$ : onHidden$)()) == null ? void 0 : _a();
+          }
         }
-        else {
-            if (elementChanged) {
-                // just removed from the DOM: stop animation if any
-                stop();
-                currentTransition = null;
-            }
-            if (visibleChanged || (visible && pendingTransition?.animation !== animationFromToggle)) {
-                pendingTransition =
-                    visible && animationFromToggle != null
-                        ? {
-                            // toggle was called to display the element, but the element is not yet in the DOM
-                            // let's keep the animation setting from toggle and provide the promise for the end of toggle
-                            animation: animationFromToggle,
-                            ...promiseWithResolve(),
-                        }
-                        : null;
-            }
+      })()
+    );
+    return currentTransition;
+  });
+  const shown$ = computed(() => !transitioning$() && visible$() && elementPresent$());
+  const hidden$ = computed(() => !transitioning$() && !visible$());
+  const effectiveAnimation$ = computed(() => initDone$() ? animated$() : animatedOnInit$());
+  const animationFromToggle$ = writable(null);
+  let previousElement;
+  let previousVisible = requestedVisible$();
+  let pendingTransition = null;
+  const visibleAction$ = derived(
+    [visible$, element$, effectiveAnimation$, animationFromToggle$, transition$, currentTransition$],
+    ([visible, element, animated, animationFromToggle, transition, currentTransition]) => {
+      const elementChanged = previousElement !== element;
+      previousElement = element;
+      const visibleChanged = previousVisible !== visible;
+      previousVisible = visible;
+      if (element) {
+        if (initDone$() == null) {
+          initDone$.set(true);
         }
-        return pendingTransition?.promise ?? currentTransition?.promise;
-    });
-    let lastToggle = {};
-    const toggle = async (visible = !requestedVisible$(), animation = effectiveAnimation$()) => {
-        const currentToggle = {};
-        lastToggle = currentToggle;
-        try {
-            await batch(() => {
-                try {
-                    animationFromToggle$.set(animation);
-                    requestedVisible$.set(visible);
-                    return visibleAction$();
-                }
-                finally {
-                    animationFromToggle$.set(null);
-                }
-            });
+        const interruptAnimation = animationFromToggle != null && currentTransition && currentTransition.animated != animationFromToggle;
+        if (elementChanged || visibleChanged || interruptAnimation) {
+          if (visibleChanged || animationFromToggle != null) {
+            pendingTransition = null;
+          }
+          const animate = animationFromToggle ?? (pendingTransition == null ? void 0 : pendingTransition.animated) ?? (elementChanged && !visible ? false : animated);
+          currentTransition = runTransition(visible, animate, element, transition);
+          pendingTransition == null ? void 0 : pendingTransition.resolve(currentTransition.promise);
+          pendingTransition = null;
         }
-        finally {
-            if (lastToggle !== currentToggle) {
-                await neverEndingPromise;
-            }
+      } else {
+        if (elementChanged) {
+          stop();
+          currentTransition = null;
         }
-    };
-    const directive = mergeDirectives(storeDirective, directiveUpdate(patch), directiveSubscribe(visibleAction$));
-    return {
-        ...stateStores({
-            visible$,
-            element$,
-            elementPresent$,
-            transitioning$,
-            shown$,
-            hidden$,
-        }),
-        patch,
-        directives: {
-            directive,
-        },
-        actions: {},
-        api: {
-            show: toggle.bind(null, true),
-            hide: toggle.bind(null, false),
-            toggle,
-        },
-    };
+        if (visibleChanged || visible && (pendingTransition == null ? void 0 : pendingTransition.animated) !== animationFromToggle) {
+          pendingTransition = visible && animationFromToggle != null ? {
+            // toggle was called to display the element, but the element is not yet in the DOM
+            // let's keep the animation setting from toggle and provide the promise for the end of toggle
+            animated: animationFromToggle,
+            ...promiseWithResolve()
+          } : null;
+        }
+      }
+      return (pendingTransition == null ? void 0 : pendingTransition.promise) ?? (currentTransition == null ? void 0 : currentTransition.promise);
+    }
+  );
+  let lastToggle = {};
+  const toggle = async (visible = !requestedVisible$(), animated = effectiveAnimation$()) => {
+    const currentToggle = {};
+    lastToggle = currentToggle;
+    try {
+      await batch(() => {
+        try {
+          animationFromToggle$.set(animated);
+          requestedVisible$.set(visible);
+          return visibleAction$();
+        } finally {
+          animationFromToggle$.set(null);
+        }
+      });
+    } finally {
+      if (lastToggle !== currentToggle) {
+        await neverEndingPromise;
+      }
+    }
+  };
+  const directive = mergeDirectives(storeDirective, directiveUpdate(patch), directiveSubscribe(visibleAction$));
+  return {
+    ...stateStores({
+      visible$,
+      element$,
+      elementPresent$,
+      transitioning$,
+      shown$,
+      hidden$
+    }),
+    patch,
+    directives: {
+      directive
+    },
+    actions: {},
+    api: {
+      show: toggle.bind(null, true),
+      hide: toggle.bind(null, false),
+      toggle
+    }
+  };
+};
+export {
+  createTransition,
+  noAnimation
 };

package/services/transitions/collapse.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_directive = require("../../directive-BTSEYLF3.cjs");
+const services_transitions_cssTransitions = require("./cssTransitions.cjs");
+const createCollapseTransition = ({
+  dimension = "height",
+  showClasses,
+  hideClasses,
+  animationPendingClasses
+} = {}) => services_transitions_cssTransitions.createCSSTransition((element, direction, animated, context) => {
+  if (animated && utils_directive.isBrowserHTMLElement(element)) {
+    let { maxSize, minSize } = context;
+    if (!maxSize) {
+      utils_directive.removeClasses(element, animationPendingClasses);
+      utils_directive.removeClasses(element, hideClasses);
+      utils_directive.addClasses(element, showClasses);
+      maxSize = element.getBoundingClientRect()[dimension] + "px";
+      context.maxSize = maxSize;
+    }
+    if (!minSize) {
+      utils_directive.removeClasses(element, animationPendingClasses);
+      utils_directive.removeClasses(element, showClasses);
+      utils_directive.addClasses(element, hideClasses);
+      minSize = element.getBoundingClientRect()[dimension] + "px";
+      context.minSize = minSize;
+    }
+    utils_directive.removeClasses(element, showClasses);
+    utils_directive.removeClasses(element, hideClasses);
+    const values = direction === "show" ? [minSize, maxSize] : [maxSize, minSize];
+    element.style[dimension] = values[0];
+    utils_directive.reflow(element);
+    utils_directive.addClasses(element, animationPendingClasses);
+    utils_directive.reflow(element);
+    element.style[dimension] = values[1];
+  } else {
+    utils_directive.removeClasses(element, direction === "show" ? hideClasses : showClasses);
+  }
+  return () => {
+    utils_directive.removeClasses(element, animationPendingClasses);
+    utils_directive.addClasses(element, direction === "show" ? showClasses : hideClasses);
+    element.style[dimension] = "";
+  };
+});
+exports.createCollapseTransition = createCollapseTransition;

package/services/transitions/collapse.js

@@ -1,52 +1,44 @@
-import { createCSSTransition } from './cssTransitions';
-import { addClasses, reflow, removeClasses } from '../../utils/internal/dom';
-/**
- * Create a collapse transition.
- *
- * The transition attaches / removes classes during the different states of the collapse transition.
- * It also updates the dimension value when reaching a non-pending state.
- *
- * @param config - the collapse config
- * @param config.dimension - the dimension, `height` or `width`, on which the collapse applies
- * @param config.showClasses - the classes to attach when the element is fully visible
- * @param config.hideClasses - the classes to attach when the element is fully collapsed
- * @param config.animationPendingClasses - the classes to attach when the transition is pending
- * @returns the collapse transition
- */
-export const createCollapseTransition = ({ dimension = 'height', showClasses, hideClasses, animationPendingClasses, } = {}) => createCSSTransition((element, direction, animation, context) => {
-    if (animation) {
-        let { maxSize, minSize } = context;
-        if (!maxSize) {
-            // measure the element in its show state
-            removeClasses(element, animationPendingClasses);
-            removeClasses(element, hideClasses);
-            addClasses(element, showClasses);
-            maxSize = element.getBoundingClientRect()[dimension] + 'px';
-            context.maxSize = maxSize;
-        }
-        if (!minSize) {
-            // measure the element in its hide state
-            removeClasses(element, animationPendingClasses);
-            removeClasses(element, showClasses);
-            addClasses(element, hideClasses);
-            minSize = element.getBoundingClientRect()[dimension] + 'px';
-            context.minSize = minSize;
-        }
-        removeClasses(element, showClasses);
-        removeClasses(element, hideClasses);
-        const values = direction === 'show' ? [minSize, maxSize] : [maxSize, minSize];
-        element.style[dimension] = values[0];
-        reflow(element); // explicitly applies the initial state
-        addClasses(element, animationPendingClasses);
-        reflow(element);
-        element.style[dimension] = values[1];
+import { i as isBrowserHTMLElement, v as removeClasses, w as addClasses, x as reflow } from "../../directive-DCYlDznf.js";
+import { createCSSTransition } from "./cssTransitions.js";
+const createCollapseTransition = ({
+  dimension = "height",
+  showClasses,
+  hideClasses,
+  animationPendingClasses
+} = {}) => createCSSTransition((element, direction, animated, context) => {
+  if (animated && isBrowserHTMLElement(element)) {
+    let { maxSize, minSize } = context;
+    if (!maxSize) {
+      removeClasses(element, animationPendingClasses);
+      removeClasses(element, hideClasses);
+      addClasses(element, showClasses);
+      maxSize = element.getBoundingClientRect()[dimension] + "px";
+      context.maxSize = maxSize;
     }
-    else {
-        removeClasses(element, direction === 'show' ? hideClasses : showClasses);
+    if (!minSize) {
+      removeClasses(element, animationPendingClasses);
+      removeClasses(element, showClasses);
+      addClasses(element, hideClasses);
+      minSize = element.getBoundingClientRect()[dimension] + "px";
+      context.minSize = minSize;
     }
-    return () => {
-        removeClasses(element, animationPendingClasses);
-        addClasses(element, direction === 'show' ? showClasses : hideClasses);
-        element.style[dimension] = '';
-    };
+    removeClasses(element, showClasses);
+    removeClasses(element, hideClasses);
+    const values = direction === "show" ? [minSize, maxSize] : [maxSize, minSize];
+    element.style[dimension] = values[0];
+    reflow(element);
+    addClasses(element, animationPendingClasses);
+    reflow(element);
+    element.style[dimension] = values[1];
+  } else {
+    removeClasses(element, direction === "show" ? hideClasses : showClasses);
+  }
+  return () => {
+    removeClasses(element, animationPendingClasses);
+    addClasses(element, direction === "show" ? showClasses : hideClasses);
+    element.style[dimension] = "";
+  };
 });
+export {
+  createCollapseTransition
+};

package/services/transitions/cssTransitions.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_directive = require("../../directive-BTSEYLF3.cjs");
+const func = require("../../func-Qd3cD9a3.cjs");
+const promise = require("../../promise-BMJ8qhA8.cjs");
+function hasTransition(element) {
+  return window.getComputedStyle(element).transitionProperty !== "none";
+}
+function getTransitionDurationMs(element) {
+  const { transitionDelay, transitionDuration } = window.getComputedStyle(element);
+  const transitionDelaySec = parseFloat(transitionDelay);
+  const transitionDurationSec = parseFloat(transitionDuration);
+  return (transitionDelaySec + transitionDurationSec) * 1e3;
+}
+const createCSSTransition = (start) => async (element, direction, animated, signal, context) => {
+  const endFn = start(element, direction, animated, context) ?? func.noop;
+  if (utils_directive.isBrowserHTMLElement(element) && animated && hasTransition(element)) {
+    const abort = promise.promiseFromEvent(signal, "abort");
+    const transitionEnd = promise.promiseFromEvent(element, "transitionend");
+    const timer = promise.promiseFromTimeout(getTransitionDurationMs(element));
+    await Promise.race([abort.promise, transitionEnd.promise, timer.promise]);
+    abort.unsubscribe();
+    transitionEnd.unsubscribe();
+    timer.unsubscribe();
+  }
+  if (!signal.aborted) {
+    endFn();
+  }
+};
+exports.createCSSTransition = createCSSTransition;
+exports.getTransitionDurationMs = getTransitionDurationMs;
+exports.hasTransition = hasTransition;

package/services/transitions/cssTransitions.d.ts

@@ -1,3 +1,4 @@
+import type { SSRHTMLElement } from '../../types';
 import type { TransitionFn } from './baseTransitions';
 /**
  * Check if the provided html element has a transition
@@ -11,7 +12,7 @@ export declare function hasTransition(element: HTMLElement): boolean;
  * @returns transition duration in milli seconds
  */
 export declare function getTransitionDurationMs(element: HTMLElement): number;
-export type CSSTransitionFn = (element: HTMLElement, direction: 'show' | 'hide', animation: boolean, context: object) => void | (() => void);
+export type CSSTransitionFn = (element: SSRHTMLElement, direction: 'show' | 'hide', animated: boolean, context: object) => void | (() => void);
 /**
  * Create a simple css transition.
  *

package/services/transitions/cssTransitions.js

@@ -1,42 +1,32 @@
-import { noop } from '../../utils/internal/func';
-import { promiseFromEvent, promiseFromTimeout } from '../../utils/internal/promise';
-/**
- * Check if the provided html element has a transition
- * @param element - the html element
- * @returns true if the element has a transition
- */
-export function hasTransition(element) {
-    return window.getComputedStyle(element).transitionProperty !== 'none';
+import { i as isBrowserHTMLElement } from "../../directive-DCYlDznf.js";
+import { n as noop } from "../../func-DR0n-ShK.js";
+import { a as promiseFromEvent, b as promiseFromTimeout } from "../../promise-CY2U8bTP.js";
+function hasTransition(element) {
+  return window.getComputedStyle(element).transitionProperty !== "none";
 }
-/**
- * Retrieve the transition duration of the provided html element in milli seconds
- * @param element - the html element
- * @returns transition duration in milli seconds
- */
-export function getTransitionDurationMs(element) {
-    const { transitionDelay, transitionDuration } = window.getComputedStyle(element);
-    const transitionDelaySec = parseFloat(transitionDelay);
-    const transitionDurationSec = parseFloat(transitionDuration);
-    return (transitionDelaySec + transitionDurationSec) * 1000;
+function getTransitionDurationMs(element) {
+  const { transitionDelay, transitionDuration } = window.getComputedStyle(element);
+  const transitionDelaySec = parseFloat(transitionDelay);
+  const transitionDurationSec = parseFloat(transitionDuration);
+  return (transitionDelaySec + transitionDurationSec) * 1e3;
 }
-/**
- * Create a simple css transition.
- *
- * @param start - a function that creates the css animation and returns a clean-up function
- * @returns the css transition
- */
-export const createCSSTransition = (start) => async (element, direction, animation, signal, context) => {
-    const endFn = start(element, direction, animation, context) ?? noop;
-    if (animation && hasTransition(element)) {
-        const abort = promiseFromEvent(signal, 'abort');
-        const transitionEnd = promiseFromEvent(element, 'transitionend');
-        const timer = promiseFromTimeout(getTransitionDurationMs(element));
-        await Promise.race([abort.promise, transitionEnd.promise, timer.promise]);
-        abort.unsubscribe();
-        transitionEnd.unsubscribe();
-        timer.unsubscribe();
-    }
-    if (!signal.aborted) {
-        endFn();
-    }
+const createCSSTransition = (start) => async (element, direction, animated, signal, context) => {
+  const endFn = start(element, direction, animated, context) ?? noop;
+  if (isBrowserHTMLElement(element) && animated && hasTransition(element)) {
+    const abort = promiseFromEvent(signal, "abort");
+    const transitionEnd = promiseFromEvent(element, "transitionend");
+    const timer = promiseFromTimeout(getTransitionDurationMs(element));
+    await Promise.race([abort.promise, transitionEnd.promise, timer.promise]);
+    abort.unsubscribe();
+    transitionEnd.unsubscribe();
+    timer.unsubscribe();
+  }
+  if (!signal.aborted) {
+    endFn();
+  }
+};
+export {
+  createCSSTransition,
+  getTransitionDurationMs,
+  hasTransition
 };

package/services/transitions/simpleClassTransition.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const services_transitions_cssTransitions = require("./cssTransitions.cjs");
+const utils_directive = require("../../directive-BTSEYLF3.cjs");
+const createSimpleClassTransition = (config) => {
+  const { animationPendingClasses, animationPendingShowClasses, animationPendingHideClasses, showClasses, hideClasses } = config;
+  return services_transitions_cssTransitions.createCSSTransition((element, direction, animated, context) => {
+    utils_directive.removeClasses(element, showClasses);
+    utils_directive.removeClasses(element, hideClasses);
+    if (animated) {
+      utils_directive.removeClasses(element, direction === "show" ? animationPendingHideClasses : animationPendingShowClasses);
+      if (!context.started) {
+        context.started = true;
+        const classes = direction === "show" ? hideClasses : showClasses;
+        utils_directive.addClasses(element, classes);
+        utils_directive.reflow(element);
+        utils_directive.removeClasses(element, classes);
+      }
+      utils_directive.addClasses(element, animationPendingClasses);
+      utils_directive.reflow(element);
+      utils_directive.addClasses(element, direction === "show" ? animationPendingShowClasses : animationPendingHideClasses);
+    }
+    return () => {
+      utils_directive.removeClasses(element, animationPendingClasses);
+      utils_directive.removeClasses(element, animationPendingShowClasses);
+      utils_directive.removeClasses(element, animationPendingHideClasses);
+      utils_directive.addClasses(element, direction === "show" ? showClasses : hideClasses);
+    };
+  });
+};
+exports.createSimpleClassTransition = createSimpleClassTransition;