@beeq/core 1.8.0-beta.11 → 1.8.0-beta.12

package/dist/components/transition.js

@@ -1,131 +0,0 @@
-/*!
- * Built by Endavans
- * © https://beeq.design - Apache 2 License.
- */
-/* -------------------------------------------------------------------------- */
-/*            Credits to MikeMcCall for the original implementation           */
-/*            Github: https://github.com/mmccall10/el-transition              */
-/* -------------------------------------------------------------------------- */
-/**
- * Transition an element entry
- *
- * @param element The element to enter
- * @param transitionName The name of the transition
- * @returns A promise that resolves when the transition is complete
- */
-const enter = async (element, transitionName = null) => {
-    element.classList.remove('hidden');
-    await transition('enter', element, transitionName);
-};
-/**
- * Transition an element exit
- *
- * @param element The element to leave
- * @param transitionName The name of the transition
- * @returns A promise that resolves when the transition is complete
- */
-const leave = async (element, transitionName = null) => {
-    await transition('leave', element, transitionName);
-    element.classList.add('hidden');
-};
-/**
- * Toggle an element entry/exit
- *
- * @param element The element to toggle
- * @param transitionName The name of the transition
- * @returns A promise that resolves when the transition is complete
- */
-const toggle = async (element, transitionName = null) => {
-    if (element.classList.contains('hidden')) {
-        await enter(element, transitionName);
-    }
-    else {
-        await leave(element, transitionName);
-    }
-};
-/**
- * Perform a transition on an element
- *
- * @param direction The direction of the transition
- * @param element The element to transition
- * @param animation The animation to use
- * @returns A promise that resolves when the transition is complete
- * @internal
- */
-const transition = async (direction, element, animation) => {
-    const { dataset } = element;
-    const animationClass = animation ? `${animation}-${direction}` : direction;
-    const transitionKey = `transition${direction.charAt(0).toUpperCase() + direction.slice(1)}`;
-    // Get the genesis, start, and end classes
-    const genesisClasses = getDatasetValueOrDefault(dataset, transitionKey, animationClass);
-    const startClasses = getDatasetValueOrDefault(dataset, `${transitionKey}Start`, `${animationClass}-start`);
-    const endClasses = getDatasetValueOrDefault(dataset, `${transitionKey}End`, `${animationClass}-end`);
-    // Add genesis and start classes, then wait for the next frame
-    addClasses(element, genesisClasses);
-    addClasses(element, startClasses);
-    await nextFrame();
-    // Replace start classes with end classes, then wait for the transition to finish
-    removeClasses(element, startClasses);
-    addClasses(element, endClasses);
-    await afterTransition(element);
-    // Remove end and genesis classes
-    removeClasses(element, endClasses);
-    removeClasses(element, genesisClasses);
-};
-/**
- * Get the value of a dataset key or a default value
- *
- * @param dataset The dataset to get the value from
- * @param key The key to get the value for
- * @param defaultValue The default value to return if the key is not found
- * @returns The value of the dataset key or the default value
- * @internal
- */
-const getDatasetValueOrDefault = (dataset, key, defaultValue) => {
-    return dataset[key] ? dataset[key].split(' ') : [defaultValue];
-};
-/**
- * Add classes to an element
- *
- * @param element The element to add the CSS classes to
- * @param classes The classes to add
- * @internal
- */
-const addClasses = (element, classes) => {
-    element.classList.add(...classes);
-};
-/**
- * Remove classes from an element
- *
- * @param element The element to remove the CSS classes from
- * @param classes The classes to remove
- * @internal
- */
-const removeClasses = (element, classes) => {
-    element.classList.remove(...classes);
-};
-/**
- * Wait for the next frame
- * @returns A promise that resolves when the next frame is available
- * @internal
- */
-const nextFrame = () => {
-    return new Promise((resolve) => {
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => resolve());
-        });
-    });
-};
-/**
- * Wait for all animations to finish
- * @param element The element to wait for
- * @returns A promise that resolves when all animations are finished
- * @internal
- */
-const afterTransition = (element) => {
-    return Promise.all(element.getAnimations().map((animation) => animation.finished));
-};
-
-export { enter as e, leave as l, toggle as t };
-
-//# sourceMappingURL=transition.js.map

package/dist/components/transition.js.map

@@ -1 +0,0 @@
-{"file":"transition.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/shared/utils/transition.ts"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*            Credits to MikeMcCall for the original implementation           */\n/*            Github: https://github.com/mmccall10/el-transition              */\n/* -------------------------------------------------------------------------- */\n\ninterface HTMLElementWithAnimations extends HTMLElement {\n  getAnimations(): Animation[];\n}\n\n/**\n * Transition an element entry\n *\n * @param element The element to enter\n * @param transitionName The name of the transition\n * @returns A promise that resolves when the transition is complete\n */\nexport const enter = async (element: HTMLElement, transitionName: string | null = null): Promise<void> => {\n  element.classList.remove('hidden');\n  await transition('enter', element, transitionName);\n};\n\n/**\n * Transition an element exit\n *\n * @param element The element to leave\n * @param transitionName The name of the transition\n * @returns A promise that resolves when the transition is complete\n */\nexport const leave = async (element: HTMLElement, transitionName: string | null = null): Promise<void> => {\n  await transition('leave', element, transitionName);\n  element.classList.add('hidden');\n};\n\n/**\n * Toggle an element entry/exit\n *\n * @param element The element to toggle\n * @param transitionName The name of the transition\n * @returns A promise that resolves when the transition is complete\n */\nexport const toggle = async (element: HTMLElement, transitionName: string | null = null): Promise<void> => {\n  if (element.classList.contains('hidden')) {\n    await enter(element, transitionName);\n  } else {\n    await leave(element, transitionName);\n  }\n};\n\n/**\n * Perform a transition on an element\n *\n * @param direction The direction of the transition\n * @param element The element to transition\n * @param animation The animation to use\n * @returns A promise that resolves when the transition is complete\n * @internal\n */\nconst transition = async (direction: string, element: HTMLElement, animation: string | null): Promise<void> => {\n  const { dataset } = element;\n  const animationClass = animation ? `${animation}-${direction}` : direction;\n  const transitionKey = `transition${direction.charAt(0).toUpperCase() + direction.slice(1)}`;\n\n  // Get the genesis, start, and end classes\n  const genesisClasses = getDatasetValueOrDefault(dataset, transitionKey, animationClass);\n  const startClasses = getDatasetValueOrDefault(dataset, `${transitionKey}Start`, `${animationClass}-start`);\n  const endClasses = getDatasetValueOrDefault(dataset, `${transitionKey}End`, `${animationClass}-end`);\n\n  // Add genesis and start classes, then wait for the next frame\n  addClasses(element, genesisClasses);\n  addClasses(element, startClasses);\n  await nextFrame();\n\n  // Replace start classes with end classes, then wait for the transition to finish\n  removeClasses(element, startClasses);\n  addClasses(element, endClasses);\n  await afterTransition(element as HTMLElementWithAnimations);\n\n  // Remove end and genesis classes\n  removeClasses(element, endClasses);\n  removeClasses(element, genesisClasses);\n};\n\n/**\n * Get the value of a dataset key or a default value\n *\n * @param dataset The dataset to get the value from\n * @param key The key to get the value for\n * @param defaultValue The default value to return if the key is not found\n * @returns The value of the dataset key or the default value\n * @internal\n */\nconst getDatasetValueOrDefault = (dataset: DOMStringMap, key: string, defaultValue: string): string[] => {\n  return dataset[key] ? dataset[key].split(' ') : [defaultValue];\n};\n\n/**\n * Add classes to an element\n *\n * @param element The element to add the CSS classes to\n * @param classes The classes to add\n * @internal\n */\nconst addClasses = (element: HTMLElement, classes: string[]): void => {\n  element.classList.add(...classes);\n};\n\n/**\n * Remove classes from an element\n *\n * @param element The element to remove the CSS classes from\n * @param classes The classes to remove\n * @internal\n */\nconst removeClasses = (element: HTMLElement, classes: string[]): void => {\n  element.classList.remove(...classes);\n};\n\n/**\n * Wait for the next frame\n * @returns A promise that resolves when the next frame is available\n * @internal\n */\nconst nextFrame = (): Promise<void> => {\n  return new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => resolve());\n    });\n  });\n};\n\n/**\n * Wait for all animations to finish\n * @param element The element to wait for\n * @returns A promise that resolves when all animations are finished\n * @internal\n */\nconst afterTransition = (element: HTMLElementWithAnimations): Promise<Animation[]> => {\n  return Promise.all(element.getAnimations().map((animation) => animation.finished));\n};\n"],"version":3}