@lumx/core 3.20.1-alpha.4 → 3.20.1-alpha.40

package/js/utils/className/getBasicClass.test.min.js

@@ -1 +0,0 @@
-"use strict";var e=require("./getBasicClass.min.js");require("lodash/isBoolean"),require("lodash/kebabCase"),describe(e.getBasicClass,()=>{it("should return correct basic CSS class for different types and values",()=>{expect(e.getBasicClass({prefix:"test",type:"color",value:"primary"})).toBe("test--color-primary"),expect(e.getBasicClass({prefix:"test",type:"variant",value:"button"})).toBe("test--variant-button"),expect(e.getBasicClass({prefix:"test",type:"isDark",value:!0})).toBe("test--is-dark"),expect(e.getBasicClass({prefix:"test",type:"dark",value:!0})).toBe("test--is-dark"),expect(e.getBasicClass({prefix:"test",type:"hasDark",value:!0})).toBe("test--has-dark"),expect(e.getBasicClass({prefix:"test",type:"isActive",value:!1})).toBe(""),expect(e.getBasicClass({prefix:"test",type:"hasBorder",value:!0})).toBe("test--has-border"),expect(e.getBasicClass({prefix:"test",type:"isVisible",value:!1})).toBe(""),expect(e.getBasicClass({prefix:"test",type:"variant",value:void 0})).toBe("test--variant-undefined")})});

package/js/utils/className/getBasicClass.test.ts

@@ -1,20 +0,0 @@
-import { getBasicClass } from './getBasicClass';
-
-describe(getBasicClass, () => {
-    it('should return correct basic CSS class for different types and values', () => {
-        // Test cases with different inputs
-        expect(getBasicClass({ prefix: 'test', type: 'color', value: 'primary' })).toBe('test--color-primary');
-        expect(getBasicClass({ prefix: 'test', type: 'variant', value: 'button' })).toBe('test--variant-button');
-        expect(getBasicClass({ prefix: 'test', type: 'isDark', value: true })).toBe('test--is-dark');
-        expect(getBasicClass({ prefix: 'test', type: 'dark', value: true })).toBe('test--is-dark');
-        expect(getBasicClass({ prefix: 'test', type: 'hasDark', value: true })).toBe('test--has-dark');
-        expect(getBasicClass({ prefix: 'test', type: 'isActive', value: false })).toBe('');
-
-        // Additional tests for boolean types
-        expect(getBasicClass({ prefix: 'test', type: 'hasBorder', value: true })).toBe('test--has-border');
-        expect(getBasicClass({ prefix: 'test', type: 'isVisible', value: false })).toBe('');
-
-        // Tests for undefined
-        expect(getBasicClass({ prefix: 'test', type: 'variant', value: undefined })).toBe('test--variant-undefined');
-    });
-});

package/js/utils/className/getBasicClass.ts

@@ -1,36 +0,0 @@
-import isBoolean from 'lodash/isBoolean';
-import kebabCase from 'lodash/kebabCase';
-
-/**
- * Get the basic CSS class for the given type.
- *
- * @param  prefix The class name prefix for the generated CSS class.
- * @param  type   The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).
- * @param  value  The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
- * @return The basic CSS class.
- */
-export function getBasicClass({
-    prefix,
-    type,
-    value,
-}: {
-    prefix: string;
-    type: string;
-    value: string | number | boolean | undefined;
-}): string {
-    if (isBoolean(value)) {
-        if (!value) {
-            // False value should not return a class.
-            return '';
-        }
-        const booleanPrefixes = ['has', 'is'];
-
-        if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {
-            return `${prefix}--${kebabCase(type)}`;
-        }
-
-        return `${prefix}--is-${kebabCase(type)}`;
-    }
-
-    return `${prefix}--${kebabCase(type)}-${value}`;
-}

package/js/utils/className/getRootClassName.min.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lodash/kebabCase"),t=require("../../constants/index.min.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../constants/keycodes.min.js");var s=r(e);const n=/^(.*)-(.+)$/gi;exports.getRootClassName=function(e,r){const o=`${t.CSS_PREFIX}-${s.default(e)}`;return r?o.replace(n,"$1__$2"):o};

package/js/utils/className/getRootClassName.test.js

@@ -1,15 +0,0 @@
-'use strict';
-
-var js_utils_className_getRootClassName = require('./getRootClassName.js');
-require('lodash/kebabCase');
-require('../../constants/index.js');
-require('../../constants/keycodes.js');
-
-describe(js_utils_className_getRootClassName.getRootClassName, () => {
-    it('should transform the component name into a lumx class', () => {
-        expect(js_utils_className_getRootClassName.getRootClassName('Table')).toBe('lumx-table');
-    });
-    it('should transform the sub component name into a lumx class', () => {
-        expect(js_utils_className_getRootClassName.getRootClassName('TableBody', true)).toBe('lumx-table__body');
-    });
-});

package/js/utils/className/getRootClassName.test.min.js

@@ -1 +0,0 @@
-"use strict";var e=require("./getRootClassName.min.js");require("lodash/kebabCase"),require("../../constants/index.min.js"),require("../../constants/keycodes.min.js"),describe(e.getRootClassName,()=>{it("should transform the component name into a lumx class",()=>{expect(e.getRootClassName("Table")).toBe("lumx-table")}),it("should transform the sub component name into a lumx class",()=>{expect(e.getRootClassName("TableBody",!0)).toBe("lumx-table__body")})});

package/js/utils/className/getRootClassName.test.ts

@@ -1,11 +0,0 @@
-import { getRootClassName } from './getRootClassName';
-
-describe(getRootClassName, () => {
-    it('should transform the component name into a lumx class', () => {
-        expect(getRootClassName('Table')).toBe('lumx-table');
-    });
-
-    it('should transform the sub component name into a lumx class', () => {
-        expect(getRootClassName('TableBody', true)).toBe('lumx-table__body');
-    });
-});

package/js/utils/className/getTypographyClassName.min.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.getTypographyClassName=e=>`lumx-typography-${e}`;

package/js/utils/className/getTypographyClassName.test.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var js_utils_className_getTypographyClassName = require('./getTypographyClassName.js');
-
-describe(js_utils_className_getTypographyClassName.getTypographyClassName, () => {
-    it('should generate lumx typography class', () => {
-        expect(js_utils_className_getTypographyClassName.getTypographyClassName('title')).toBe('lumx-typography-title');
-    });
-});

package/js/utils/className/getTypographyClassName.test.min.js

@@ -1 +0,0 @@
-"use strict";var e=require("./getTypographyClassName.min.js");describe(e.getTypographyClassName,()=>{it("should generate lumx typography class",()=>{expect(e.getTypographyClassName("title")).toBe("lumx-typography-title")})});

package/js/utils/className/getTypographyClassName.test.ts

@@ -1,7 +0,0 @@
-import { getTypographyClassName } from './getTypographyClassName';
-
-describe(getTypographyClassName, () => {
-    it('should generate lumx typography class', () => {
-        expect(getTypographyClassName('title')).toBe('lumx-typography-title');
-    });
-});

package/js/utils/className/handleBasicClasses.min.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("classnames"),a=require("lodash/isBoolean"),s=require("lodash/isEmpty"),r=require("./getBasicClass.min.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("lodash/kebabCase");var u=t(e),i=t(a),l=t(s);exports.handleBasicClasses=function({prefix:e,...a}){const s={};return l.default(a)||Object.keys(a).forEach(t=>{var u;s[r.getBasicClass({prefix:e,type:t,value:a[t]})]=i.default(a[t])?a[t]:!("number"==typeof(u=a[t])?0===u:l.default(u))}),u.default(e,s)};

package/js/utils/className/handleBasicClasses.test.js

@@ -1,35 +0,0 @@
-'use strict';
-
-var js_utils_className_handleBasicClasses = require('./handleBasicClasses.js');
-require('classnames');
-require('lodash/isBoolean');
-require('lodash/isEmpty');
-require('./getBasicClass.js');
-require('lodash/kebabCase');
-
-describe(js_utils_className_handleBasicClasses.handleBasicClasses, () => {
-    it('should return correct combined CSS classes based on props', () => {
-        const className = js_utils_className_handleBasicClasses.handleBasicClasses({
-            prefix: 'test',
-            // Undefined
-            undefined,
-            // Null
-            null: null,
-            // Empty string
-            emptyString: '',
-            // Empty array
-            emptyArray: [],
-            // Empty object
-            emptyObject: {},
-            // String
-            color: 'red',
-            // False property
-            isDisabled: false,
-            // Boolean without a prefix (is or has)
-            visible: true,
-            // Has prefix
-            hasButton: true,
-        });
-        expect(className).toBe('test test--color-red test--is-visible test--has-button');
-    });
-});

package/js/utils/className/handleBasicClasses.test.min.js

@@ -1 +0,0 @@
-"use strict";var e=require("./handleBasicClasses.min.js");require("classnames"),require("lodash/isBoolean"),require("lodash/isEmpty"),require("./getBasicClass.min.js"),require("lodash/kebabCase"),describe(e.handleBasicClasses,()=>{it("should return correct combined CSS classes based on props",()=>{const s=e.handleBasicClasses({prefix:"test",undefined:void 0,null:null,emptyString:"",emptyArray:[],emptyObject:{},color:"red",isDisabled:!1,visible:!0,hasButton:!0});expect(s).toBe("test test--color-red test--is-visible test--has-button")})});

package/js/utils/className/handleBasicClasses.test.ts

@@ -1,28 +0,0 @@
-import { handleBasicClasses } from './handleBasicClasses';
-
-describe(handleBasicClasses, () => {
-    it('should return correct combined CSS classes based on props', () => {
-        const className = handleBasicClasses({
-            prefix: 'test',
-            // Undefined
-            undefined,
-            // Null
-            null: null,
-            // Empty string
-            emptyString: '',
-            // Empty array
-            emptyArray: [],
-            // Empty object
-            emptyObject: {},
-            // String
-            color: 'red',
-            // False property
-            isDisabled: false,
-            // Boolean without a prefix (is or has)
-            visible: true,
-            // Has prefix
-            hasButton: true,
-        });
-        expect(className).toBe('test test--color-red test--is-visible test--has-button');
-    });
-});

package/js/utils/className/handleBasicClasses.ts

@@ -1,44 +0,0 @@
-import classNames from 'classnames';
-
-import isBoolean from 'lodash/isBoolean';
-import isEmpty from 'lodash/isEmpty';
-
-import { getBasicClass } from './getBasicClass';
-
-/**
- * Enhance isEmpty method to also works with numbers.
- *
- * @param  value The value to check.
- * @return Whether the input value is empty or != 0.
- */
-const _isEmpty = (value: any) => {
-    if (typeof value === 'number') {
-        return value === 0;
-    }
-
-    return isEmpty(value);
-};
-
-/**
- * Return all basic LumX CSS classes which are available for every components.
- *
- * @see {@link /src/components/index.d.ts} for the possible values of each parameter.
- *
- * @param  prefix The class name prefix for the generated CSS class.
- * @param  props  All the other props you want to generate a class.
- *                The rule of thumb: the key is the name of the prop in the class, the value a string that will
- *                be used in the classname to represent the value of the given prop.
- * @return All LumX basic CSS classes.
- */
-export function handleBasicClasses({ prefix, ...props }: { prefix: string; [prop: string]: any }): string {
-    const otherClasses: any = {};
-    if (!isEmpty(props)) {
-        Object.keys(props).forEach((prop) => {
-            otherClasses[getBasicClass({ prefix, type: prop, value: props[prop] })] = isBoolean(props[prop])
-                ? props[prop]
-                : !_isEmpty(props[prop]);
-        });
-    }
-
-    return classNames(prefix, otherClasses);
-}

package/js/utils/className/index.min.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s=require("./handleBasicClasses.min.js"),e=require("./getBasicClass.min.js"),a=require("./getRootClassName.min.js"),r=require("./getTypographyClassName.min.js"),o=require("./fontColorClass.min.js"),i=require("./resolveColorWithVariants.min.js");require("classnames"),require("lodash/isBoolean"),require("lodash/isEmpty"),require("lodash/kebabCase"),require("../../constants/index.min.js"),require("../../constants/keycodes.min.js"),exports.handleBasicClasses=s.handleBasicClasses,exports.getBasicClass=e.getBasicClass,exports.getRootClassName=a.getRootClassName,exports.getTypographyClassName=r.getTypographyClassName,exports.fontColorClass=o.fontColorClass,exports.resolveColorWithVariants=i.resolveColorWithVariants;

package/js/utils/className/resolveColorWithVariants.min.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.resolveColorWithVariants=function(e,t){if(!e)return[void 0,t];const[r,o]=e.split("-");return[r,t||o]};

package/js/utils/className/resolveColorWithVariants.test.js

@@ -1,30 +0,0 @@
-'use strict';
-
-var js_utils_className_resolveColorWithVariants = require('./resolveColorWithVariants.js');
-
-describe(js_utils_className_resolveColorWithVariants.resolveColorWithVariants, () => {
-    it('should handle undefined color', () => {
-        const result = js_utils_className_resolveColorWithVariants.resolveColorWithVariants(undefined);
-        expect(result).toEqual([undefined, undefined]);
-    });
-    it('should handle undefined color with variant', () => {
-        const result = js_utils_className_resolveColorWithVariants.resolveColorWithVariants(undefined, 'L2');
-        expect(result).toEqual([undefined, 'L2']);
-    });
-    it('should handle color with undefined variant', () => {
-        const result = js_utils_className_resolveColorWithVariants.resolveColorWithVariants('primary');
-        expect(result).toEqual(['primary', undefined]);
-    });
-    it('should handle color & variant separated', () => {
-        const result = js_utils_className_resolveColorWithVariants.resolveColorWithVariants('primary', 'L2');
-        expect(result).toEqual(['primary', 'L2']);
-    });
-    it('should handle color with variant all in one', () => {
-        const result = js_utils_className_resolveColorWithVariants.resolveColorWithVariants('primary-L2');
-        expect(result).toEqual(['primary', 'L2']);
-    });
-    it('should override color variant with the given color variant', () => {
-        const result = js_utils_className_resolveColorWithVariants.resolveColorWithVariants('primary-L2', 'D2');
-        expect(result).toEqual(['primary', 'D2']);
-    });
-});

package/js/utils/className/resolveColorWithVariants.test.min.js

@@ -1 +0,0 @@
-"use strict";var o=require("./resolveColorWithVariants.min.js");describe(o.resolveColorWithVariants,()=>{it("should handle undefined color",()=>{const r=o.resolveColorWithVariants(void 0);expect(r).toEqual([void 0,void 0])}),it("should handle undefined color with variant",()=>{const r=o.resolveColorWithVariants(void 0,"L2");expect(r).toEqual([void 0,"L2"])}),it("should handle color with undefined variant",()=>{const r=o.resolveColorWithVariants("primary");expect(r).toEqual(["primary",void 0])}),it("should handle color & variant separated",()=>{const r=o.resolveColorWithVariants("primary","L2");expect(r).toEqual(["primary","L2"])}),it("should handle color with variant all in one",()=>{const r=o.resolveColorWithVariants("primary-L2");expect(r).toEqual(["primary","L2"])}),it("should override color variant with the given color variant",()=>{const r=o.resolveColorWithVariants("primary-L2","D2");expect(r).toEqual(["primary","D2"])})});

package/js/utils/className/resolveColorWithVariants.test.ts

@@ -1,33 +0,0 @@
-import { resolveColorWithVariants } from './resolveColorWithVariants';
-
-describe(resolveColorWithVariants, () => {
-    it('should handle undefined color', () => {
-        const result = resolveColorWithVariants(undefined);
-        expect(result).toEqual([undefined, undefined]);
-    });
-
-    it('should handle undefined color with variant', () => {
-        const result = resolveColorWithVariants(undefined, 'L2');
-        expect(result).toEqual([undefined, 'L2']);
-    });
-
-    it('should handle color with undefined variant', () => {
-        const result = resolveColorWithVariants('primary');
-        expect(result).toEqual(['primary', undefined]);
-    });
-
-    it('should handle color & variant separated', () => {
-        const result = resolveColorWithVariants('primary', 'L2');
-        expect(result).toEqual(['primary', 'L2']);
-    });
-
-    it('should handle color with variant all in one', () => {
-        const result = resolveColorWithVariants('primary-L2');
-        expect(result).toEqual(['primary', 'L2']);
-    });
-
-    it('should override color variant with the given color variant', () => {
-        const result = resolveColorWithVariants('primary-L2', 'D2');
-        expect(result).toEqual(['primary', 'D2']);
-    });
-});

package/js/utils/className/resolveColorWithVariants.ts

@@ -1,11 +0,0 @@
-import { ColorPalette, ColorVariant, ColorWithVariants } from '../../constants';
-
-/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
-export function resolveColorWithVariants(
-    colorWithVariants?: ColorWithVariants,
-    colorVariant?: ColorVariant,
-): [color?: ColorPalette, colorVariant?: ColorVariant] {
-    if (!colorWithVariants) return [undefined, colorVariant];
-    const [color, baseColorVariant] = colorWithVariants.split('-');
-    return [color as ColorPalette, (colorVariant || baseColorVariant) as ColorVariant];
-}

package/js/utils/index.min.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lodash/noop"),t=require("./className/handleBasicClasses.min.js"),s=require("./className/getBasicClass.min.js"),r=require("./className/getRootClassName.min.js"),a=require("./className/getTypographyClassName.min.js"),n=require("./className/fontColorClass.min.js"),o=require("./className/resolveColorWithVariants.min.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("classnames"),require("lodash/isBoolean"),require("lodash/isEmpty"),require("lodash/kebabCase"),require("../constants/index.min.js"),require("../constants/keycodes.min.js");var u=i(e);exports.handleBasicClasses=t.handleBasicClasses,exports.getBasicClass=s.getBasicClass,exports.getRootClassName=r.getRootClassName,exports.getTypographyClassName=a.getTypographyClassName,exports.fontColorClass=n.fontColorClass,exports.resolveColorWithVariants=o.resolveColorWithVariants,exports.detectHorizontalSwipe=function(e,t){let s,r,a,n,o;const i=e=>{const[t]=Array.from(e.changedTouches);s=t.pageX,r=t.pageY,n=(new Date).getTime(),o=!1},c=e=>{if(o)return;if(a=(new Date).getTime()-n,a>300)return;const[i]=Array.from(e.changedTouches),u=i.pageX-s,c=i.pageY-r;if(!(Math.abs(u)>=150&&Math.abs(c)<=150))return;t(u<0?"left":"right"),o=!0},l=!!function(){let e=!1;try{const t=Object.defineProperty({},"passive",{get(){e=!0}});window.addEventListener("testPassiveEventSupport",u.default,t),window.removeEventListener("testPassiveEventSupport",u.default,t)}catch(e){}return e}()&&{passive:!0};return e.addEventListener("touchstart",i,l),e.addEventListener("touchmove",c,l),()=>{e.removeEventListener("touchstart",i,l),e.removeEventListener("touchmove",c,l)}},exports.detectSwipe=function(e,t=u.default){let s,r,a,n,o,i,c;const l=e=>{const[t]=Array.from(e.changedTouches);o="none",a=t.pageX,n=t.pageY,c=(new Date).getTime(),e.preventDefault()},p=e=>{e.preventDefault()},d=e=>{const[u]=Array.from(e.changedTouches);s=u.pageX-a,r=u.pageY-n,i=(new Date).getTime()-c,i<=300&&(Math.abs(s)>=150&&Math.abs(r)<=100?o=s<0?"left":"right":Math.abs(r)>=150&&Math.abs(s)<=100&&(o=r<0?"up":"down")),t(o),e.preventDefault()};return e.addEventListener("touchstart",l,!1),e.addEventListener("touchmove",p,!1),e.addEventListener("touchend",d,!1),()=>{e.removeEventListener("touchstart",l,!1),e.removeEventListener("touchmove",p,!1),e.removeEventListener("touchend",d,!1)}},exports.onButtonPressed=function(e){return t=>{"Enter"!==t.key&&" "!==t.key||e(t)}},exports.onEnterPressed=function(e){return t=>{"Enter"===t.key&&e(t)}},exports.onEscapePressed=function(e){return t=>{"Escape"===t.key&&e(t)}};

package/js/utils/index.ts

@@ -1,221 +0,0 @@
-import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
-
-import noop from 'lodash/noop';
-
-export * from './className';
-
-type KeyboardEventHandler<E extends KeyboardEvent | ReactKeyboardEvent> = (event: E) => void;
-
-/**
- * Make sure the pressed key is the enter key before calling the callback.
- *
- * @param  handler The handler to call on enter/return press.
- * @return The decorated function.
- */
-export function onEnterPressed<E extends KeyboardEvent | ReactKeyboardEvent>(
-    handler: KeyboardEventHandler<E>,
-): KeyboardEventHandler<E> {
-    return (evt) => {
-        if (evt.key !== 'Enter') {
-            return;
-        }
-        handler(evt);
-    };
-}
-
-/**
- * Make sure the pressed key is the escape key before calling the callback.
- *
- * @param  handler The handler to call on enter/return press.
- * @return The decorated function.
- */
-export function onEscapePressed<E extends KeyboardEvent | ReactKeyboardEvent>(
-    handler: KeyboardEventHandler<E>,
-): KeyboardEventHandler<E> {
-    return (evt) => {
-        if (evt.key !== 'Escape') {
-            return;
-        }
-        handler(evt);
-    };
-}
-
-/**
- * Handle button key pressed (Enter + Space).
- *
- * @param  handler The handler to call.
- * @return The decorated function.
- */
-export function onButtonPressed<E extends KeyboardEvent | ReactKeyboardEvent>(
-    handler: KeyboardEventHandler<E>,
-): KeyboardEventHandler<E> {
-    return (evt) => {
-        if (evt.key !== 'Enter' && evt.key !== ' ') {
-            return;
-        }
-        handler(evt);
-    };
-}
-
-declare type SwipeDirection = 'none' | 'up' | 'down' | 'left' | 'right';
-
-/**
- * Detects swipe direction.
- * Credits: http://javascriptkit.com/javatutors/touchevents2.shtml.
- *
- * @deprecated use `detectHorizontalSwipe` instead if possible (better performance and does not block scroll)
- * @param  touchSurface          Element that will hold touch events.
- * @param  handleSwipe Callback function.
- * @return Function to remove listeners.
- */
-export function detectSwipe(touchSurface: Element, handleSwipe: (direction: SwipeDirection) => void = noop) {
-    let distX: number;
-    let distY: number;
-    let startX: number;
-    let startY: number;
-    let direction: SwipeDirection;
-    // Required min distance traveled to be considered swipe.
-    const threshold = 150;
-    // Maximum distance allowed at the same time in perpendicular direction.
-    const restraint = 100;
-    // Maximum time allowed to travel that distance.
-    const allowedTime = 300;
-    let elapsedTime: number;
-    let startTime: number;
-
-    const onTouchStart = (evt: Event) => {
-        const [touch] = Array.from((evt as TouchEvent).changedTouches);
-        direction = 'none';
-        // Const dist = 0;
-        startX = touch.pageX;
-        startY = touch.pageY;
-        // Record time when finger first makes contact with surface.
-        startTime = new Date().getTime();
-        evt.preventDefault();
-    };
-
-    const onTouchMove = (evt: Event) => {
-        // Prevent scrolling when inside DIV.
-        evt.preventDefault();
-    };
-
-    const onTouchEnd = (evt: Event) => {
-        const [touch] = Array.from((evt as TouchEvent).changedTouches);
-        // Get horizontal dist traveled by finger while in contact with surface.
-        distX = touch.pageX - startX;
-        // Get vertical dist traveled by finger while in contact with surface.
-        distY = touch.pageY - startY;
-        // Get time elapsed.
-        elapsedTime = new Date().getTime() - startTime;
-        if (elapsedTime <= allowedTime) {
-            // First condition for awipe met.
-            if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
-                // 2nd condition for horizontal swipe met.
-                // If dist traveled is negative, it indicates left swipe.
-                direction = distX < 0 ? 'left' : 'right';
-            } else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
-                // 2nd condition for vertical swipe met.
-                // If dist traveled is negative, it indicates up swipe.
-                direction = distY < 0 ? 'up' : 'down';
-            }
-        }
-        handleSwipe(direction);
-        evt.preventDefault();
-    };
-
-    touchSurface.addEventListener('touchstart', onTouchStart, false);
-    touchSurface.addEventListener('touchmove', onTouchMove, false);
-    touchSurface.addEventListener('touchend', onTouchEnd, false);
-
-    return () => {
-        touchSurface.removeEventListener('touchstart', onTouchStart, false);
-        touchSurface.removeEventListener('touchmove', onTouchMove, false);
-        touchSurface.removeEventListener('touchend', onTouchEnd, false);
-    };
-}
-
-/**
- * Checks whether or not the browser support passive events.
- * @see https://github.com/Modernizr/Modernizr/blob/6d56d814b9682843313b16060adb25a58d83a317/feature-detects/dom/passiveeventlisteners.js
- */
-function isPassiveEventAvailable() {
-    let supportsPassiveOption = false;
-    try {
-        const opts = Object.defineProperty({}, 'passive', {
-            get() {
-                supportsPassiveOption = true;
-            },
-        });
-        window.addEventListener('testPassiveEventSupport', noop, opts);
-        window.removeEventListener('testPassiveEventSupport', noop, opts);
-    } catch (e) {
-        // ignored
-    }
-    return supportsPassiveOption;
-}
-
-/**
- * Detects horizontal swipe direction without blocking the browser scroll using passive event.
- * @see http://javascriptkit.com/javatutors/touchevents2.shtml
- * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
- */
-export function detectHorizontalSwipe(touchSurface: Element, handleSwipe: (direction: 'right' | 'left') => void) {
-    let startX: number;
-    let startY: number;
-    // Required min distance traveled to be considered swipe.
-    const threshold = 150;
-    // Maximum distance allowed at the same time in perpendicular direction.
-    const restraint = 150;
-    // Maximum time allowed to travel that distance.
-    const allowedTime = 300;
-    let elapsedTime: number;
-    let startTime: number;
-    let finished: boolean;
-
-    const onTouchStart = (evt: Event) => {
-        const [touch] = Array.from((evt as TouchEvent).changedTouches);
-        startX = touch.pageX;
-        startY = touch.pageY;
-        // Record time when finger first makes contact with surface.
-        startTime = new Date().getTime();
-        finished = false;
-    };
-
-    const onTouchMove = (evt: Event) => {
-        if (finished) {
-            return;
-        }
-
-        elapsedTime = new Date().getTime() - startTime;
-        if (elapsedTime > allowedTime) {
-            // Touch swipe too long to be considered.
-            return;
-        }
-
-        const [touch] = Array.from((evt as TouchEvent).changedTouches);
-        // Get horizontal dist traveled by finger while in contact with surface.
-        const distX = touch.pageX - startX;
-        // Get vertical dist traveled by finger while in contact with surface.
-        const distY = touch.pageY - startY;
-
-        if (!(Math.abs(distX) >= threshold && Math.abs(distY) <= restraint)) {
-            // Swipe is not horizontal.
-            return;
-        }
-        // Swipe direction.
-        const direction = distX < 0 ? 'left' : 'right';
-
-        handleSwipe(direction);
-        finished = true;
-    };
-
-    // Activate passive event if possible for better scrolling performance.
-    const eventOptions: any = isPassiveEventAvailable() ? { passive: true } : false;
-    touchSurface.addEventListener('touchstart', onTouchStart, eventOptions);
-    touchSurface.addEventListener('touchmove', onTouchMove, eventOptions);
-
-    return () => {
-        touchSurface.removeEventListener('touchstart', onTouchStart, eventOptions);
-        touchSurface.removeEventListener('touchmove', onTouchMove, eventOptions);
-    };
-}