{"version":3,"file":"splide.min.js","sources":["../../src/js/constants/media.ts","../../src/js/constants/states.ts","../../src/js/utils/array/empty/empty.ts","../../src/js/utils/arrayLike/slice/slice.ts","../../src/js/utils/function/apply/apply.ts","../../src/js/utils/function/noop/noop.ts","../../src/js/utils/function/nextTick/nextTick.ts","../../src/js/utils/function/raf/raf.ts","../../src/js/utils/type/type.ts","../../src/js/utils/array/toArray/toArray.ts","../../src/js/utils/array/forEach/forEach.ts","../../src/js/utils/array/includes/includes.ts","../../src/js/utils/array/push/push.ts","../../src/js/utils/dom/toggleClass/toggleClass.ts","../../src/js/utils/dom/addClass/addClass.ts","../../src/js/utils/dom/append/append.ts","../../src/js/utils/dom/before/before.ts","../../src/js/utils/dom/matches/matches.ts","../../src/js/utils/dom/children/children.ts","../../src/js/utils/dom/child/child.ts","../../src/js/utils/object/ownKeys/ownKeys.ts","../../src/js/utils/object/forOwn/forOwn.ts","../../src/js/utils/object/assign/assign.ts","../../src/js/utils/object/merge/merge.ts","../../src/js/utils/object/omit/omit.ts","../../src/js/utils/dom/removeAttribute/removeAttribute.ts","../../src/js/utils/dom/setAttribute/setAttribute.ts","../../src/js/utils/dom/create/create.ts","../../src/js/utils/dom/style/style.ts","../../src/js/utils/dom/display/display.ts","../../src/js/utils/dom/focus/focus.ts","../../src/js/utils/dom/getAttribute/getAttribute.ts","../../src/js/utils/dom/hasClass/hasClass.ts","../../src/js/utils/dom/rect/rect.ts","../../src/js/utils/dom/remove/remove.ts","../../src/js/utils/dom/parseHtml/parseHtml.ts","../../src/js/utils/dom/prevent/prevent.ts","../../src/js/utils/dom/query/query.ts","../../src/js/utils/dom/queryAll/queryAll.ts","../../src/js/utils/dom/removeClass/removeClass.ts","../../src/js/utils/dom/timeOf/timeOf.ts","../../src/js/utils/dom/unit/unit.ts","../../src/js/constants/project.ts","../../src/js/utils/error/assert/assert.ts","../../src/js/utils/math/math/math.ts","../../src/js/utils/math/approximatelyEqual/approximatelyEqual.ts","../../src/js/utils/math/between/between.ts","../../src/js/utils/math/clamp/clamp.ts","../../src/js/utils/math/sign/sign.ts","../../src/js/utils/string/format/format.ts","../../src/js/utils/string/pad/pad.ts","../../src/js/utils/string/uniqueId/uniqueId.ts","../../src/js/constructors/EventBinder/EventBinder.ts","../../src/js/constants/events.ts","../../src/js/constructors/EventInterface/EventInterface.ts","../../src/js/constructors/RequestInterval/RequestInterval.ts","../../src/js/constructors/State/State.ts","../../src/js/constants/arrows.ts","../../src/js/constants/directions.ts","../../src/js/components/Direction/Direction.ts","../../src/js/constants/attributes.ts","../../src/js/constants/classes.ts","../../src/js/components/Drag/constants.ts","../../src/js/constants/types.ts","../../src/js/components/Slides/Slide.ts","../../src/js/components/Autoplay/constants.ts","../../src/js/constants/listener-options.ts","../../src/js/utils/dom/normalizeKey/normalizeKey.ts","../../src/js/components/Keyboard/Keyboard.ts","../../src/js/components/LazyLoad/constants.ts","../../src/js/components/Sync/Sync.ts","../../src/js/components/Media/Media.ts","../../src/js/components/Elements/Elements.ts","../../src/js/utils/dom/closest/closest.ts","../../src/js/components/Slides/Slides.ts","../../src/js/components/Layout/Layout.ts","../../src/js/constructors/Throttle/Throttle.ts","../../src/js/components/Clones/Clones.ts","../../src/js/components/Move/Move.ts","../../src/js/components/Controller/Controller.ts","../../src/js/components/Arrows/Arrows.ts","../../src/js/components/Arrows/path.ts","../../src/js/components/Autoplay/Autoplay.ts","../../src/js/components/Cover/Cover.ts","../../src/js/components/Scroll/Scroll.ts","../../src/js/components/Scroll/constants.ts","../../src/js/components/Drag/Drag.ts","../../src/js/components/LazyLoad/LazyLoad.ts","../../src/js/components/Pagination/Pagination.ts","../../src/js/components/Wheel/Wheel.ts","../../src/js/components/Live/Live.ts","../../src/js/constants/defaults.ts","../../src/js/constants/i18n.ts","../../src/js/transitions/Fade/Fade.ts","../../src/js/transitions/Slide/Slide.ts","../../src/js/core/Splide/Splide.ts"],"sourcesContent":["/**\r\n * Matches when users request reducing non-essential animations.\r\n *\r\n * @link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion\r\n */\r\nexport const MEDIA_PREFERS_REDUCED_MOTION = '(prefers-reduced-motion: reduce)';","/**\r\n * Splide has been just created.\r\n */\r\nexport const CREATED = 1;\r\n\r\n/**\r\n * Splide has mounted components.\r\n */\r\nexport const MOUNTED = 2;\r\n\r\n/**\r\n * Splide is ready.\r\n */\r\nexport const IDLE = 3;\r\n\r\n/**\r\n * Splide is moving.\r\n */\r\nexport const MOVING = 4;\r\n\r\n/**\r\n * Splide is moving.\r\n */\r\nexport const SCROLLING = 5;\r\n\r\n/**\r\n * The user is dragging the slider.\r\n */\r\nexport const DRAGGING = 6;\r\n\r\n/**\r\n * Splide has been destroyed.\r\n */\r\nexport const DESTROYED = 7;\r\n\r\n/**\r\n * The collection of all states.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const STATES = {\r\n CREATED,\r\n MOUNTED,\r\n IDLE,\r\n MOVING,\r\n SCROLLING,\r\n DRAGGING,\r\n DESTROYED,\r\n};\r\n","/**\r\n * Empties the array.\r\n *\r\n * @param array - A array to empty.\r\n */\r\nexport function empty( array: any[] ): void {\r\n array.length = 0;\r\n}\r\n","/**\r\n * The slice method for an array-like object.\r\n *\r\n * @param arrayLike - An array-like object.\r\n * @param start - Optional. A start index.\r\n * @param end - Optional. A end index.\r\n *\r\n * @return An array with sliced elements.\r\n */\r\nexport function slice( arrayLike: ArrayLike, start?: number, end?: number ): T[] {\r\n return Array.prototype.slice.call( arrayLike, start, end );\r\n}\r\n","import { AnyFunction, ShiftN } from '../../../types';\r\nimport { slice } from '../../arrayLike';\r\n\r\n\r\n/**\r\n * Create a function where provided arguments are bound.\r\n * `this` parameter will be always null.\r\n *\r\n * @param func - A function.\r\n * @param args - Arguments to bind to the function.\r\n *\r\n * @return A function where arguments are bound.\r\n */\r\nexport function apply(\r\n func: F,\r\n ...args: A\r\n): ( ...args: ShiftN, A[\"length\"]> ) => ReturnType;\r\n\r\n/**\r\n * Create a function where provided arguments are bound.\r\n * `this` parameter will be always null.\r\n *\r\n * @param func - A function.\r\n */\r\nexport function apply( func: AnyFunction ): any {\r\n // eslint-disable-next-line prefer-rest-params, prefer-spread\r\n return func.bind( null, ...slice( arguments, 1 ) );\r\n}\r\n","/**\r\n * No operation.\r\n */\r\nexport const noop = (): void => {}; // eslint-disable-line no-empty-function, @typescript-eslint/no-empty-function\r\n","import { AnyFunction } from '../../../types';\r\n\r\n\r\n/**\r\n * Invokes the callback on the next tick.\r\n *\r\n * @param callback - A callback function.\r\n */\r\nexport const nextTick: ( callback: AnyFunction ) => ReturnType = setTimeout;\r\n","/**\r\n * The arias of `window.requestAnimationFrame()`.\r\n */\r\nexport function raf( func: FrameRequestCallback ): number {\r\n return requestAnimationFrame( func );\r\n}\r\n","import { AnyFunction } from '../../types';\r\nimport { apply } from '../function';\r\n\r\n\r\n/**\r\n * The alias of the type check function.\r\n *\r\n * @param type - A type.\r\n * @param subject - A subject to check.\r\n *\r\n * @return `true` if the subject is the specified type.\r\n */\r\nfunction typeOf( type: string, subject: unknown ): boolean {\r\n return typeof subject === type;\r\n}\r\n\r\n/**\r\n * Checks if the given subject is an object or not.\r\n *\r\n * @param subject - A subject to check.\r\n *\r\n * @return `true` if the subject is an object, or otherwise `false`.\r\n */\r\nexport function isObject( subject: unknown ): subject is object {\r\n return ! isNull( subject ) && typeOf( 'object', subject );\r\n}\r\n\r\n/**\r\n * Checks if the given subject is an array or not.\r\n *\r\n * @param subject - A subject to check.\r\n *\r\n * @return `true` if the subject is an array, or otherwise `false`.\r\n */\r\nexport const isArray: ( subject: unknown ) => subject is T[] = Array.isArray;\r\n\r\n/**\r\n * Checks if the given subject is a function or not.\r\n *\r\n * @param subject - A subject to check.\r\n *\r\n * @return `true` if the subject is a function, or otherwise `false`.\r\n */\r\nexport const isFunction = <( subject: unknown ) => subject is AnyFunction>apply( typeOf, 'function' );\r\n\r\n/**\r\n * Checks if the given subject is a string or not.\r\n *\r\n * @param subject - A subject to check.\r\n *\r\n * @return `true` if the subject is a string, or otherwise `false`.\r\n */\r\nexport const isString = <( subject: unknown ) => subject is string>apply( typeOf, 'string' );\r\n\r\n/**\r\n * Checks if the given subject is `undefined` or not.\r\n *\r\n * @param subject - A subject to check.\r\n *\r\n * @return `true` if the subject is `undefined`, or otherwise `false`.\r\n */\r\nexport const isUndefined = <( subject: unknown ) => subject is undefined>apply( typeOf, 'undefined' );\r\n\r\n/**\r\n * Checks if the given subject is `null` or not.\r\n *\r\n * @param subject - A subject to check.\r\n *\r\n * @return `true` if the subject is `null`, or otherwise `false`.\r\n */\r\nexport function isNull( subject: unknown ): subject is null {\r\n return subject === null;\r\n}\r\n\r\n/**\r\n * Checks if the given subject is an HTMLElement instance or not.\r\n * This method takes into account which `window` the node belongs to.\r\n *\r\n * @param subject - A subject to check.\r\n *\r\n * @return `true` if the subject is an HTMLElement instance, or otherwise `false`.\r\n */\r\nexport function isHTMLElement( subject: unknown ): subject is HTMLElement {\r\n try {\r\n return subject instanceof ( ( subject as Node ).ownerDocument.defaultView || window ).HTMLElement;\r\n } catch ( e ) {\r\n return false;\r\n }\r\n}","import { isArray } from '../../type/type';\r\n\r\n\r\n/**\r\n * Push the provided value to an array if the value is not an array.\r\n *\r\n * @param value - A value to push.\r\n *\r\n * @return An array containing the value, or the value itself if it is already an array.\r\n */\r\nexport function toArray( value: T | T[] ): T[] {\r\n return isArray( value ) ? value : [ value ];\r\n}\r\n","import { toArray } from '../toArray/toArray';\r\n\r\n\r\n/**\r\n * The extended `Array#forEach` method that accepts a single value as an argument.\r\n *\r\n * @param values - A value or values to iterate over.\r\n * @param iteratee - An iteratee function.\r\n */\r\nexport function forEach( values: T | T[], iteratee: ( value: T, index: number, array: T[] ) => void ): void {\r\n toArray( values ).forEach( iteratee );\r\n}\r\n","/**\r\n * Checks if the array includes the value or not.\r\n * `Array#includes` is not supported by IE.\r\n *\r\n * @param array - An array.\r\n * @param value - A value to search for.\r\n *\r\n * @return `true` if the array includes the value, or otherwise `false`.\r\n */\r\nexport function includes( array: T[], value: T ): boolean {\r\n return array.indexOf( value ) > -1;\r\n}\r\n","import { toArray } from '../toArray/toArray';\r\n\r\n\r\n/**\r\n * Extended `Array#push()` that accepts an item or an array with items.\r\n *\r\n * @param array - An array to push items.\r\n * @param items - An item or items to push.\r\n *\r\n * @return A provided array itself.\r\n */\r\nexport function push( array: T[], items: T | T[] ): T[] {\r\n array.push( ...toArray( items ) );\r\n return array;\r\n}\r\n","import { forEach } from '../../array';\r\n\r\n\r\n/**\r\n * Toggles the provided class or classes by following the `add` boolean.\r\n *\r\n * @param elm - An element whose classes are toggled.\r\n * @param classes - A class or class names.\r\n * @param add - Whether to add or remove a class.\r\n */\r\nexport function toggleClass( elm: Element, classes: string | string[], add: boolean ): void {\r\n if ( elm ) {\r\n forEach( classes, name => {\r\n if ( name ) {\r\n elm.classList[ add ? 'add' : 'remove' ]( name );\r\n }\r\n } );\r\n }\r\n}\r\n","import { isString } from '../../type/type';\r\nimport { toggleClass } from '../toggleClass/toggleClass';\r\n\r\n\r\n/**\r\n * Adds classes to the element.\r\n *\r\n * @param elm - An element to add classes to.\r\n * @param classes - Classes to add.\r\n */\r\nexport function addClass( elm: Element, classes: string | string[] ): void {\r\n toggleClass( elm, isString( classes ) ? classes.split( ' ' ) : classes, true );\r\n}\r\n","import { forEach } from '../../array';\r\n\r\n\r\n/**\r\n * Appends children to the parent element.\r\n *\r\n * @param parent - A parent element.\r\n * @param children - A child or children to append to the parent.\r\n */\r\nexport function append( parent: Element, children: Node | Node[] ): void {\r\n forEach( children, parent.appendChild.bind( parent ) );\r\n}\r\n","import { forEach } from '../../array';\r\n\r\n\r\n/**\r\n * Inserts a node or nodes before the specified reference node.\r\n *\r\n * @param nodes - A node or nodes to insert.\r\n * @param ref - A reference node.\r\n */\r\nexport function before( nodes: Node | Node[], ref: Node | null ): void {\r\n forEach( nodes, node => {\r\n const parent = ( ref || node ).parentNode;\r\n\r\n if ( parent ) {\r\n parent.insertBefore( node, ref );\r\n }\r\n } );\r\n}\r\n","import { isHTMLElement } from '../../type/type';\r\n\r\n\r\n/**\r\n * Checks if the element can be selected by the provided selector or not.\r\n *\r\n * @param elm - An element to check.\r\n * @param selector - A selector to test.\r\n *\r\n * @return `true` if the selector matches the element, or otherwise `false`.\r\n */\r\nexport function matches( elm: Element | EventTarget, selector: string ): boolean {\r\n return isHTMLElement( elm ) && ( elm[ 'msMatchesSelector' ] || elm.matches ).call( elm, selector );\r\n}\r\n","import { slice } from '../../arrayLike';\r\nimport { matches } from '../matches/matches';\r\n\r\n\r\n/**\r\n * Finds children that has the specified tag or class name.\r\n *\r\n * @param parent - A parent element.\r\n * @param selector - Optional. A selector to filter children.\r\n *\r\n * @return An array with filtered children.\r\n */\r\nexport function children( parent: HTMLElement, selector?: string ): E[] {\r\n const children = parent ? slice( parent.children ) as E[] : [];\r\n return selector ? children.filter( child => matches( child, selector ) ) : children;\r\n}\r\n","import { children } from '../children/children';\r\n\r\n\r\n/**\r\n * Returns a child element that matches the specified tag or class name.\r\n *\r\n * @param parent - A parent element.\r\n * @param selector - A selector to filter children.\r\n *\r\n * @return A matched child element if available, or otherwise `undefined`.\r\n */\r\nexport function child( parent: HTMLElement, selector?: string ): E | undefined {\r\n return selector ? children( parent, selector )[ 0 ] : parent.firstElementChild as E;\r\n}\r\n","/**\r\n * An alias of `Object.keys()`\r\n */\r\nexport const ownKeys = Object.keys;","import { ownKeys } from '../ownKeys/ownKeys';\r\n\r\n\r\n/**\r\n * Iterates over the provided object by own enumerable keys with calling the iteratee function.\r\n *\r\n * @param object - An object to iterate over.\r\n * @param iteratee - An iteratee function that takes `value` and `key` as arguments.\r\n * @param right - If `true`, the method iterates over the object from the end like `forEachRight()`.\r\n *\r\n * @return A provided object itself.\r\n */\r\nexport function forOwn(\r\n object: T,\r\n iteratee: ( value: T[ keyof T ], key: string ) => boolean | void,\r\n right?: boolean\r\n): T {\r\n if ( object ) {\r\n ( right ? ownKeys( object ).reverse() : ownKeys( object ) ).forEach( key => {\r\n key !== '__proto__' && iteratee( object[ key ], key );\r\n } );\r\n }\r\n\r\n return object;\r\n}\r\n","import { Cast, Head, Push, Resolve, Shift } from '../../../types';\r\nimport { slice } from '../../arrayLike';\r\nimport { forOwn } from '../forOwn/forOwn';\r\n\r\n\r\n/**\r\n * Assigns U to T.\r\n *\r\n * @typeParam T - An object to assign to.\r\n * @typeParam U - An object to assign.\r\n *\r\n * @return An assigned object type.\r\n */\r\nexport type Assign = Omit & U;\r\n\r\n/**\r\n * Recursively assigns U[] to T.\r\n *\r\n * @typeParam T - An object to assign to.\r\n * @typeParam U - A tuple contains objects.\r\n *\r\n * @return An assigned object type.\r\n */\r\nexport type Assigned = {\r\n 0: T,\r\n 1: Assigned>, Shift, N, Push>,\r\n}[ C['length'] extends N ? 0 : 1 ] extends infer A ? Cast : never;\r\n\r\nexport function assign( object: T ): T;\r\n\r\nexport function assign(\r\n object: T,\r\n ...sources: U\r\n): Resolve>\r\n\r\n/**\r\n * Assigns all own enumerable properties of all source objects to the provided object.\r\n *\r\n * @param object - An object to assign properties to.\r\n *\r\n * @return An object assigned properties of the sources to.\r\n */\r\nexport function assign( object: T ): any {\r\n // eslint-disable-next-line prefer-rest-params, prefer-spread\r\n slice( arguments, 1 ).forEach( source => {\r\n forOwn( source, ( value, key ) => {\r\n object[ key ] = source[ key ];\r\n } );\r\n } );\r\n\r\n return object;\r\n}\r\n","import { Cast, Head, Push, Resolve, Shift } from '../../../types';\r\nimport { slice } from '../../arrayLike';\r\nimport { isArray, isObject } from '../../type/type';\r\nimport { forOwn } from '../forOwn/forOwn';\r\n\r\n\r\n/**\r\n * Merges U to T.\r\n *\r\n * @typeParam T - An object to merge U into.\r\n * @typeParam U - An object to merge properties from.\r\n *\r\n * @return A merged object type.\r\n */\r\nexport type Merge = Omit & {\r\n [ K in ( keyof T & keyof U ) ]: U[ K ] extends object\r\n ? U[ K ] extends any[]\r\n ? U[ K ]\r\n : T[ K ] extends object\r\n ? Merge extends infer A ? Resolve> : never\r\n : U[ K ]\r\n : U[ K ];\r\n} & Omit;\r\n\r\n/**\r\n * Recursively merges U[] to T.\r\n *\r\n * @typeParam T - An object to assign to.\r\n * @typeParam U - A tuple contains objects.\r\n *\r\n * @return An assigned object type.\r\n */\r\nexport type Merged = {\r\n 0: T,\r\n 1: Merged>, Shift, N, Push>,\r\n}[ C['length'] extends N ? 0 : 1 ] extends infer A ? Cast : never;\r\n\r\nexport function merge( object: T ): T;\r\n\r\nexport function merge(\r\n object: T,\r\n ...sources: U\r\n): Resolve>\r\n\r\n/**\r\n * Recursively merges source properties to the object.\r\n * Be aware that this method does not merge arrays. They are just duplicated by `slice()`.\r\n *\r\n * @param object - An object to merge properties to.\r\n *\r\n * @return A new object with merged properties.\r\n */\r\nexport function merge( object: T ): any {\r\n // eslint-disable-next-line prefer-rest-params\r\n slice( arguments, 1 ).forEach( source => {\r\n forOwn( source, ( value, key ) => {\r\n if ( isArray( value ) ) {\r\n object[ key ] = value.slice();\r\n } else if ( isObject( value ) ) {\r\n object[ key ] = merge( {}, isObject( object[ key ] ) ? object[ key ] : {}, value );\r\n } else {\r\n object[ key ] = value;\r\n }\r\n } );\r\n } );\r\n\r\n return object;\r\n}\r\n","import { forEach } from '../../array';\r\nimport { ownKeys } from '../ownKeys/ownKeys';\r\n\r\n\r\n/**\r\n * Deletes specified own keys from the object.\r\n *\r\n * @param object - An object.\r\n * @param keys - A key or keys to delete. If not specified, all own enumerable keys will be deleted.\r\n */\r\nexport function omit( object: object, keys?: string | string[] ): void {\r\n forEach( keys || ownKeys( object ), key => {\r\n delete object[ key ];\r\n } );\r\n}","import { forEach } from '../../array';\r\n\r\n\r\n/**\r\n * Removes attributes from the element.\r\n *\r\n * @param elms - An element or elements.\r\n * @param attrs - An attribute or attributes to remove.\r\n */\r\nexport function removeAttribute( elms: Element | Element[], attrs: string | string[] ): void {\r\n forEach( elms, elm => {\r\n forEach( attrs, attr => {\r\n elm && elm.removeAttribute( attr );\r\n } );\r\n } );\r\n}\r\n","import { forEach } from '../../array';\r\nimport { forOwn } from '../../object';\r\nimport { isNull, isObject } from '../../type/type';\r\nimport { removeAttribute } from '../removeAttribute/removeAttribute';\r\n\r\n\r\nexport function setAttribute( elms: Element | Element[], attr: string, value: string | number | boolean ): void;\r\nexport function setAttribute( elms: Element | Element[], attrs: Record ): void;\r\n\r\n/**\r\n * Sets attribute/attributes to the element or elements.\r\n * If the value is `null` or an empty string, the attribute will be removed.\r\n *\r\n * @param elms - An element or an array with elements.\r\n * @param attrs - An attribute name of an object with pairs of a name and a value.\r\n * @param value - A value to set.\r\n */\r\nexport function setAttribute(\r\n elms: Element | Element[],\r\n attrs: string | Record,\r\n value?: string | number | boolean\r\n): void {\r\n if ( isObject( attrs ) ) {\r\n forOwn( attrs, ( value, name ) => {\r\n setAttribute( elms, name, value );\r\n } );\r\n } else {\r\n forEach( elms, elm => {\r\n isNull( value ) || value === '' ? removeAttribute( elm, attrs ) : elm.setAttribute( attrs, String( value ) );\r\n } );\r\n }\r\n}\r\n","import { isString } from '../../type/type';\r\nimport { addClass } from '../addClass/addClass';\r\nimport { append } from '../append/append';\r\nimport { setAttribute } from '../setAttribute/setAttribute';\r\n\r\n\r\nexport function create(\r\n tag: K,\r\n attrs?: Record | string,\r\n parent?: HTMLElement\r\n): HTMLElementTagNameMap[ K ];\r\n\r\nexport function create(\r\n tag: string,\r\n attrs?: Record | string,\r\n parent?: HTMLElement\r\n): HTMLElement;\r\n\r\n/**\r\n * Creates a HTML element.\r\n *\r\n * @param tag - A tag name.\r\n * @param attrs - Optional. An object with attributes to apply the created element to, or a string with classes.\r\n * @param parent - Optional. A parent element where the created element is appended.\r\n */\r\nexport function create(\r\n tag: K,\r\n attrs?: Record | string,\r\n parent?: HTMLElement\r\n): HTMLElementTagNameMap[ K ] {\r\n const elm = document.createElement( tag );\r\n\r\n if ( attrs ) {\r\n isString( attrs ) ? addClass( elm, attrs ) : setAttribute( elm, attrs );\r\n }\r\n\r\n parent && append( parent, elm );\r\n\r\n return elm;\r\n}\r\n","import { isNull, isUndefined } from '../../type/type';\r\n\r\n\r\nexport function style(\r\n elm: HTMLElement,\r\n prop: K,\r\n): CSSStyleDeclaration[ K ];\r\n\r\nexport function style(\r\n elm: HTMLElement,\r\n prop: string,\r\n): string;\r\n\r\nexport function style(\r\n elm: HTMLElement,\r\n prop: string,\r\n value: string | number\r\n): void;\r\n\r\n\r\n/**\r\n * Applies inline styles to the provided element by an object literal.\r\n *\r\n * @param elm - An element to apply styles to.\r\n * @param prop - An object literal with styles or a property name.\r\n * @param value - A value to set.\r\n */\r\nexport function style(\r\n elm: HTMLElement,\r\n prop: string,\r\n value?: string | number\r\n): string | void {\r\n if ( isUndefined( value ) ) {\r\n return getComputedStyle( elm )[ prop ];\r\n }\r\n\r\n if ( ! isNull( value ) ) {\r\n elm.style[ prop ] = `${ value }`;\r\n }\r\n}\r\n","import { style } from '../style/style';\r\n\r\n\r\n/**\r\n * Sets the `display` CSS value to the element.\r\n *\r\n * @param elm - An element to set a new value to.\r\n * @param display - A new `display` value.\r\n */\r\nexport function display( elm: HTMLElement, display: string ): void {\r\n style( elm, 'display', display );\r\n}\r\n","/**\r\n * Focuses the provided element without scrolling the ascendant element.\r\n *\r\n * @param elm - An element to focus.\r\n */\r\nexport function focus( elm: HTMLElement ): void {\r\n elm[ 'setActive' ] && elm[ 'setActive' ]() || elm.focus( { preventScroll: true } );\r\n}\r\n","/**\r\n * Returns the specified attribute value.\r\n *\r\n * @param elm - An element.\r\n * @param attr - An attribute to get.\r\n */\r\nexport function getAttribute( elm: Element, attr: string ): string | null {\r\n return elm.getAttribute( attr );\r\n}\r\n","/**\r\n * Checks if the element contains the specified class or not.\r\n *\r\n * @param elm - An element to check.\r\n * @param className - A class name that may be contained by the element.\r\n *\r\n * @return `true` if the element contains the class, or otherwise `false`.\r\n */\r\nexport function hasClass( elm: Element, className: string ): boolean {\r\n return elm && elm.classList.contains( className );\r\n}\r\n","/**\r\n * Returns a DOMRect object of the provided element.\r\n *\r\n * @param target - An element.\r\n */\r\nexport function rect( target: Element ): DOMRect {\r\n return target.getBoundingClientRect();\r\n}\r\n","import { forEach } from '../../array';\r\n\r\n\r\n/**\r\n * Removes the provided node from its parent.\r\n *\r\n * @param nodes - A node or nodes to remove.\r\n */\r\nexport function remove( nodes: Node | Node[] ): void {\r\n forEach( nodes, node => {\r\n if ( node && node.parentNode ) {\r\n node.parentNode.removeChild( node );\r\n }\r\n } );\r\n}\r\n","import { child } from '../child/child';\r\n\r\n\r\n/**\r\n * Parses the provided HTML string and returns the first element.\r\n *\r\n * @param html - An HTML string to parse.\r\n *\r\n * @return An Element on success, or otherwise `undefined`.\r\n */\r\nexport function parseHtml( html: string ): E | undefined {\r\n return child( new DOMParser().parseFromString( html, 'text/html' ).body );\r\n}\r\n","/**\r\n * Call the `preventDefault()` of the provided event.\r\n *\r\n * @param e - An Event object.\r\n * @param stopPropagation - Optional. Whether to stop the event propagation or not.\r\n */\r\nexport function prevent( e: Event, stopPropagation?: boolean ): void {\r\n e.preventDefault();\r\n\r\n if ( stopPropagation ) {\r\n e.stopPropagation();\r\n e.stopImmediatePropagation();\r\n }\r\n}\r\n","/**\r\n * Returns an element that matches the provided selector.\r\n *\r\n * @param parent - A parent element to start searching from.\r\n * @param selector - A selector to query.\r\n *\r\n * @return A found element or `null`.\r\n */\r\nexport function query( parent: Element | Document, selector: string ): E | null {\r\n return parent && parent.querySelector( selector );\r\n}\r\n","import { slice } from '../../arrayLike';\r\n\r\n\r\n/**\r\n * Returns elements that match the provided selector.\r\n *\r\n * @param parent - A parent element to start searching from.\r\n * @param selector - A selector to query.\r\n *\r\n * @return An array with matched elements.\r\n */\r\nexport function queryAll( parent: Element | Document, selector?: string ): E[] {\r\n return selector ? slice( parent.querySelectorAll( selector ) ) : [];\r\n}\r\n","import { toggleClass } from '../toggleClass/toggleClass';\r\n\r\n\r\n/**\r\n * Removes classes from the element.\r\n *\r\n * @param elm - An element to remove classes from.\r\n * @param classes - Classes to remove.\r\n */\r\nexport function removeClass( elm: Element, classes: string | string[] ): void {\r\n toggleClass( elm, classes, false );\r\n}\r\n","/**\r\n * Extracts the timestamp from the event object.\r\n *\r\n * @param e - An Event object.\r\n */\r\nexport function timeOf( e: Event ): number {\r\n return e.timeStamp;\r\n}","import { isString } from '../../type/type';\r\n\r\n\r\n/**\r\n * Appends `px` to the provided number.\r\n * If the value is already string, just returns it.\r\n *\r\n * @param value - A value to append `px` to.\r\n *\r\n * @return A string with the CSS unit.\r\n */\r\nexport function unit( value: number | string ): string {\r\n return isString( value ) ? value : value ? `${ value }px` : '';\r\n}\r\n","/**\r\n * The project code.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const PROJECT_CODE = 'splide';\r\n\r\n/**\r\n * The data attribute prefix.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const DATA_ATTRIBUTE = `data-${ PROJECT_CODE }`;\r\n","import { PROJECT_CODE } from '../../../constants/project';\r\n\r\n\r\n/**\r\n * Throws an error if the provided condition is falsy.\r\n *\r\n * @param condition - If falsy, an error is thrown.\r\n * @param message - Optional. A message to display.\r\n */\r\nexport function assert( condition: any, message?: string ): void {\r\n if ( ! condition ) {\r\n throw new Error( `[${ PROJECT_CODE }] ${ message || '' }` );\r\n }\r\n}\r\n","export const { min, max, floor, ceil, abs } = Math;\r\n","import { abs } from '../math/math';\r\n\r\n\r\n/**\r\n * Checks if the provided 2 numbers are approximately equal or not.\r\n *\r\n * @param x - A number.\r\n * @param y - Another number to compare.\r\n * @param epsilon - An accuracy that defines the approximation.\r\n *\r\n * @return `true` if 2 numbers are considered to be equal, or otherwise `false`.\r\n */\r\nexport function approximatelyEqual( x: number, y: number, epsilon: number ): boolean {\r\n return abs( x - y ) < epsilon;\r\n}\r\n","import { max, min } from '../math/math';\r\n\r\n\r\n/**\r\n * Checks if the subject number is between `x` and `y`.\r\n *\r\n * @param number - A subject number to check.\r\n * @param x - A min or max number.\r\n * @param y - A max or min number.\r\n * @param exclusive - Optional. Whether to exclude `x` or `y`.\r\n */\r\nexport function between( number: number, x: number, y: number, exclusive?: boolean ): boolean {\r\n const minimum = min( x, y );\r\n const maximum = max( x, y );\r\n return exclusive\r\n ? minimum < number && number < maximum\r\n : minimum <= number && number <= maximum;\r\n}\r\n","import { max, min } from '../math/math';\r\n\r\n\r\n/**\r\n * Clamps a number.\r\n *\r\n * @param number - A subject number to check.\r\n * @param x - A min or max number.\r\n * @param y - A min or max number.\r\n *\r\n * @return A clamped number.\r\n */\r\nexport function clamp( number: number, x: number, y: number ): number {\r\n const minimum = min( x, y );\r\n const maximum = max( x, y );\r\n return min( max( minimum, number ), maximum );\r\n}\r\n","/**\r\n * Returns the sign of the provided number.\r\n *\r\n * @param x - A number.\r\n *\r\n * @return `1` for positive numbers, `-1` for negative numbers, or `0` for `0`.\r\n */\r\nexport function sign( x: number ): number {\r\n return +( x > 0 ) - +( x < 0 );\r\n}\r\n","import { forEach } from '../../array';\r\n\r\n\r\n/**\r\n * Formats a string.\r\n *\r\n * @param string - A string to format.\r\n * @param replacements - A replacement or replacements.\r\n *\r\n * @return A formatted string.\r\n */\r\nexport function format( string: string, replacements: string | number | Array ): string {\r\n forEach( replacements, replacement => {\r\n string = string.replace( '%s', `${ replacement }` );\r\n } );\r\n\r\n return string;\r\n}\r\n","/**\r\n * Pads the number with 0.\r\n *\r\n * @param number - A number to pad.\r\n *\r\n * @return string - Padded number.\r\n */\r\nexport function pad( number: number ): string {\r\n return number < 10 ? `0${ number }` : `${ number }`;\r\n}\r\n","import { pad } from '../pad/pad';\r\n\r\n\r\n/**\r\n * Stores unique IDs.\r\n *\r\n * @since 3.0.0\r\n */\r\nconst ids: Record = {};\r\n\r\n/**\r\n * Returns a sequential unique ID as \"{ prefix }-{ number }\".\r\n *\r\n * @param prefix - A prefix for the ID.\r\n */\r\nexport function uniqueId( prefix: string ): string {\r\n return `${ prefix }${ pad( ( ids[ prefix ] = ( ids[ prefix ] || 0 ) + 1 ) ) }`;\r\n}\r\n","import { AnyFunction } from '../../types';\r\nimport { empty, forEach } from '../../utils';\r\n\r\n\r\n/**\r\n * The type for an EventTarget or an array with EventTarget objects.\r\n *\r\n * @since 4.0.0\r\n */\r\ntype EventTargets = EventTarget | EventTarget[];\r\n\r\n/**\r\n * The interface for the EventBinder object.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface EventBinderObject {\r\n bind( target: EventTargets, events: string | string[], callback: AnyFunction, options?: AddEventListenerOptions ): void\r\n unbind( target: EventTarget | EventTarget[], events: string | string[], callback?: AnyFunction ): void;\r\n dispatch( target: EventTarget, event: string, detail?: T ): void;\r\n destroy(): void;\r\n}\r\n\r\n/**\r\n * The constructor function to provide methods to subscribe native events.\r\n *\r\n * @since 4.0.0\r\n * @constructor\r\n *\r\n * @return An EventBinder object.\r\n */\r\nexport function EventBinder(): EventBinderObject {\r\n /**\r\n * Stores all handlers that listen to native events.\r\n * `[ target, event, namespace, callback, remover ]`\r\n */\r\n let listeners: [ EventTarget, string, string | undefined, AnyFunction, () => void ][] = [];\r\n\r\n /**\r\n * Listens to native events.\r\n * - `destroy()` can unsubscribe all events.\r\n * - In IE, mediaQueryList does not inherit EventTarget,\r\n * and only supports deprecated `addListener` and `removeListener`.\r\n *\r\n * @link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener\r\n *\r\n * @param targets - A target element, the window object or the document object.\r\n * @param events - An event or events to listen to.\r\n * @param callback - A callback function.\r\n * @param options - Optional. The options to pass to the `addEventListener` function.\r\n */\r\n function bind(\r\n targets: EventTargets,\r\n events: string | string[],\r\n callback: AnyFunction,\r\n options?: AddEventListenerOptions\r\n ): void {\r\n forEachEvent( targets, events, ( target, event, namespace ) => {\r\n const isEventTarget = 'addEventListener' in target;\r\n const remover = isEventTarget\r\n ? target.removeEventListener.bind( target, event, callback, options )\r\n : target[ 'removeListener' ].bind( target, callback );\r\n\r\n isEventTarget ? target.addEventListener( event, callback, options ) : target[ 'addListener' ]( callback );\r\n listeners.push( [ target, event, namespace, callback, remover ] );\r\n } );\r\n }\r\n\r\n /**\r\n * Removes the event handler.\r\n *\r\n * @param targets - A target element, the window object or the document object.\r\n * @param events - An event name or names to remove.\r\n * @param callback - Optional. Specify the callback to remove.\r\n */\r\n function unbind( targets: EventTargets, events: string | string[], callback?: AnyFunction ): void {\r\n forEachEvent( targets, events, ( target, event, namespace ) => {\r\n listeners = listeners.filter( listener => {\r\n if ( listener[ 0 ] === target\r\n && listener[ 1 ] === event\r\n && listener[ 2 ] === namespace\r\n && ( ! callback || listener[ 3 ] === callback )\r\n ) {\r\n listener[ 4 ]();\r\n return false;\r\n }\r\n\r\n return true;\r\n } );\r\n } );\r\n }\r\n\r\n /**\r\n * Dispatches a custom event of the target.\r\n *\r\n * @param target - An event target.\r\n * @param type - An event type.\r\n * @param detail - Optional. The `detail` object of the event.\r\n *\r\n * @return An event object.\r\n */\r\n function dispatch( target: EventTarget, type: string, detail?: T ): CustomEvent {\r\n let e: CustomEvent;\r\n const bubbles = true;\r\n\r\n if ( typeof CustomEvent === 'function' ) {\r\n e = new CustomEvent( type, { bubbles, detail } );\r\n } else {\r\n e = document.createEvent( 'CustomEvent' );\r\n e.initCustomEvent( type, bubbles, false, detail );\r\n }\r\n\r\n target.dispatchEvent( e );\r\n return e;\r\n }\r\n\r\n /**\r\n * Iterates over each target and event.\r\n *\r\n * @param targets - A target element, the window object or the document object.\r\n * @param events - An event name or names.\r\n * @param iteratee - An iteratee function.\r\n */\r\n function forEachEvent(\r\n targets: EventTargets,\r\n events: string | string[],\r\n iteratee: ( target: EventTarget, event: string, namespace: string | undefined ) => void\r\n ): void {\r\n forEach( targets, target => {\r\n target && forEach( events, events => {\r\n events.split( ' ' ).forEach( eventNS => {\r\n const fragment = eventNS.split( '.' );\r\n iteratee( target, fragment[ 0 ], fragment[ 1 ] );\r\n } );\r\n } );\r\n } );\r\n }\r\n\r\n /**\r\n * Removes all listeners.\r\n */\r\n function destroy(): void {\r\n listeners.forEach( data => { data[ 4 ]() } );\r\n empty( listeners );\r\n }\r\n\r\n return {\r\n bind,\r\n unbind,\r\n dispatch,\r\n destroy,\r\n };\r\n}\r\n","export const EVENT_MOUNTED = 'mounted';\r\nexport const EVENT_READY = 'ready';\r\nexport const EVENT_MOVE = 'move';\r\nexport const EVENT_MOVED = 'moved';\r\nexport const EVENT_CLICK = 'click';\r\nexport const EVENT_ACTIVE = 'active';\r\nexport const EVENT_INACTIVE = 'inactive';\r\nexport const EVENT_VISIBLE = 'visible';\r\nexport const EVENT_HIDDEN = 'hidden';\r\nexport const EVENT_REFRESH = 'refresh';\r\nexport const EVENT_UPDATED = 'updated';\r\nexport const EVENT_RESIZE = 'resize';\r\nexport const EVENT_RESIZED = 'resized';\r\nexport const EVENT_DRAG = 'drag';\r\nexport const EVENT_DRAGGING = 'dragging';\r\nexport const EVENT_DRAGGED = 'dragged';\r\nexport const EVENT_SCROLL = 'scroll';\r\nexport const EVENT_SCROLLED = 'scrolled';\r\nexport const EVENT_OVERFLOW = 'overflow';\r\nexport const EVENT_DESTROY = 'destroy';\r\nexport const EVENT_ARROWS_MOUNTED = 'arrows:mounted';\r\nexport const EVENT_ARROWS_UPDATED = 'arrows:updated';\r\nexport const EVENT_PAGINATION_MOUNTED = 'pagination:mounted';\r\nexport const EVENT_PAGINATION_UPDATED = 'pagination:updated';\r\nexport const EVENT_NAVIGATION_MOUNTED = 'navigation:mounted';\r\nexport const EVENT_AUTOPLAY_PLAY = 'autoplay:play';\r\nexport const EVENT_AUTOPLAY_PLAYING = 'autoplay:playing';\r\nexport const EVENT_AUTOPLAY_PAUSE = 'autoplay:pause';\r\nexport const EVENT_LAZYLOAD_LOADED = 'lazyload:loaded';\r\n\r\n/** @internal */\r\nexport const EVENT_SLIDE_KEYDOWN = 'sk';\r\nexport const EVENT_SHIFTED = 'sh';\r\nexport const EVENT_END_INDEX_CHANGED = 'ei';\r\n","import { EVENT_DESTROY } from '../../constants/events';\r\nimport { Splide } from '../../core/Splide/Splide';\r\nimport { AnyFunction, EventMap } from '../../types';\r\nimport { apply, assign, isArray, slice, toArray } from '../../utils';\r\nimport { EventBinder, EventBinderObject } from '../EventBinder/EventBinder';\r\n\r\n\r\n/**\r\n * The interface for the EventInterface object.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface EventInterfaceObject extends EventBinderObject {\r\n on( event: K, callback: EventMap[ K ] ): void;\r\n on( events: string | string[], callback: AnyFunction ): void;\r\n off( events: K | K[] | string | string[] ): void;\r\n emit( event: K, ...args: Parameters ): void\r\n emit( event: string, ...args: any[] ): void;\r\n\r\n /** @internal */\r\n bus: DocumentFragment;\r\n}\r\n\r\n/**\r\n * The constructor function that provides interface for internal and native events.\r\n *\r\n * @since 3.0.0\r\n * @constructor\r\n *\r\n * @param Splide - A Splide instance.\r\n *\r\n * @return A collection of interface functions.\r\n */\r\nexport function EventInterface( Splide?: Splide ): EventInterfaceObject {\r\n /**\r\n * The document fragment for internal events.\r\n * Provide the Splide instance to share the bus.\r\n */\r\n const bus = Splide ? Splide.event.bus : document.createDocumentFragment();\r\n\r\n /**\r\n * An event binder object.\r\n */\r\n const binder = EventBinder();\r\n\r\n /**\r\n * Listens to an internal event or events.\r\n *\r\n * @param events - An event name or names separated by spaces. Use a dot(.) to add a namespace.\r\n * @param callback - A callback function to register.\r\n */\r\n function on( events: string | string[], callback: AnyFunction ): void {\r\n binder.bind( bus, toArray( events ).join( ' ' ), e => {\r\n callback.apply( callback, isArray( e.detail ) ? e.detail : [] );\r\n } );\r\n }\r\n\r\n /**\r\n * Triggers callback functions.\r\n * This accepts additional arguments and passes them to callbacks.\r\n *\r\n * @param event - An event name.\r\n */\r\n function emit( event: string ): void {\r\n // eslint-disable-next-line prefer-rest-params, prefer-spread\r\n binder.dispatch( bus, event, slice( arguments, 1 ) );\r\n }\r\n\r\n if ( Splide ) {\r\n Splide.event.on( EVENT_DESTROY, binder.destroy );\r\n }\r\n\r\n return assign( binder, {\r\n bus,\r\n on,\r\n off: apply( binder.unbind, bus ),\r\n emit,\r\n } );\r\n}","import { min, raf } from '../../utils';\r\n\r\n\r\n/**\r\n * The interface for the returning value of the RequestInterval.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface RequestIntervalInterface {\r\n start( resume?: boolean ): void;\r\n pause(): void;\r\n rewind(): void;\r\n cancel(): void;\r\n set( interval: number ): void;\r\n isPaused(): boolean;\r\n}\r\n\r\n/**\r\n * Requests interval like the native `setInterval()` with using `requestAnimationFrame`.\r\n *\r\n * @since 3.0.0\r\n *\r\n * @param interval - The interval duration in milliseconds.\r\n * @param onInterval - The callback fired on every interval.\r\n * @param onUpdate - Optional. Called on every animation frame, taking the progress rate.\r\n * @param limit - Optional. Limits the number of interval.\r\n */\r\nexport function RequestInterval(\r\n interval: number,\r\n onInterval: () => void,\r\n onUpdate?: ( rate: number ) => void,\r\n limit?: number\r\n): RequestIntervalInterface {\r\n const { now } = Date;\r\n\r\n /**\r\n * The time when the interval starts.\r\n */\r\n let startTime: number;\r\n\r\n /**\r\n * The current progress rate.\r\n */\r\n let rate = 0;\r\n\r\n /**\r\n * The animation frame ID.\r\n */\r\n let id: number;\r\n\r\n /**\r\n * Indicates whether the interval is currently paused or not.\r\n */\r\n let paused = true;\r\n\r\n /**\r\n * The loop count. This only works when the `limit` argument is provided.\r\n */\r\n let count = 0;\r\n\r\n /**\r\n * The update function called on every animation frame.\r\n */\r\n function update(): void {\r\n if ( ! paused ) {\r\n rate = interval ? min( ( now() - startTime ) / interval, 1 ) : 1;\r\n onUpdate && onUpdate( rate );\r\n\r\n if ( rate >= 1 ) {\r\n onInterval();\r\n startTime = now();\r\n\r\n if ( limit && ++count >= limit ) {\r\n return pause();\r\n }\r\n }\r\n\r\n id = raf( update );\r\n }\r\n }\r\n\r\n /**\r\n * Starts the interval.\r\n *\r\n * @param resume - Optional. Whether to resume the paused progress or not.\r\n */\r\n function start( resume?: boolean ): void {\r\n resume || cancel();\r\n startTime = now() - ( resume ? rate * interval : 0 );\r\n paused = false;\r\n id = raf( update );\r\n }\r\n\r\n /**\r\n * Pauses the interval.\r\n */\r\n function pause(): void {\r\n paused = true;\r\n }\r\n\r\n /**\r\n * Rewinds the current progress.\r\n */\r\n function rewind(): void {\r\n startTime = now();\r\n rate = 0;\r\n\r\n if ( onUpdate ) {\r\n onUpdate( rate );\r\n }\r\n }\r\n\r\n /**\r\n * Cancels the interval.\r\n */\r\n function cancel() {\r\n id && cancelAnimationFrame( id );\r\n rate = 0;\r\n id = 0;\r\n paused = true;\r\n }\r\n\r\n /**\r\n * Sets new interval duration.\r\n *\r\n * @param time - The interval duration in milliseconds.\r\n */\r\n function set( time: number ): void {\r\n interval = time;\r\n }\r\n\r\n /**\r\n * Checks if the interval is paused or not.\r\n *\r\n * @return `true` if the interval is paused, or otherwise `false`.\r\n */\r\n function isPaused(): boolean {\r\n return paused;\r\n }\r\n\r\n return {\r\n start,\r\n rewind,\r\n pause,\r\n cancel,\r\n set,\r\n isPaused,\r\n };\r\n}\r\n","import { includes, toArray } from '../../utils';\r\n\r\n\r\n/**\r\n * The interface for the State object.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface StateObject {\r\n set( state: number ): void;\r\n is( states: number | number[] ): boolean;\r\n}\r\n\r\n/**\r\n * The function providing a super simple state system.\r\n *\r\n * @param initialState - Specifies the initial state.\r\n */\r\nexport function State( initialState: number ): StateObject {\r\n /**\r\n * The current state.\r\n */\r\n let state = initialState;\r\n\r\n /**\r\n * Sets a new state.\r\n *\r\n * @param value - A new state value.\r\n */\r\n function set( value: number ): void {\r\n state = value;\r\n }\r\n\r\n /**\r\n * Checks if the current state matches the provided one.\r\n *\r\n * @param states - A state to check.\r\n *\r\n * @return `true` if the current state is the provided one.\r\n */\r\n function is( states: number | number[] ): boolean {\r\n return includes( toArray( states ), state );\r\n }\r\n\r\n return { set, is };\r\n}\r\n","const ARROW = 'Arrow';\r\nexport const ARROW_LEFT = `${ ARROW }Left`;\r\nexport const ARROW_RIGHT = `${ ARROW }Right`;\r\nexport const ARROW_UP = `${ ARROW }Up`;\r\nexport const ARROW_DOWN = `${ ARROW }Down`;","/**\r\n * Enumerates slides from left to right.\r\n */\r\nexport const LTR = 'ltr';\r\n\r\n/**\r\n * Enumerates slides from right to left.\r\n */\r\nexport const RTL = 'rtl';\r\n\r\n/**\r\n * Enumerates slides in a col.\r\n */\r\nexport const TTB = 'ttb';\r\n","import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from '../../constants/arrows';\r\nimport { RTL, TTB } from '../../constants/directions';\r\nimport { Splide } from '../../core/Splide/Splide';\r\nimport { BaseComponent, Components, Options } from '../../types';\r\n\r\n\r\n/**\r\n * The interface for the Direction component.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface DirectionComponent extends BaseComponent {\r\n resolve( prop: string, axisOnly?: boolean, direction?: Options['direction'] ): string;\r\n orient( value: number ): number;\r\n}\r\n\r\n/**\r\n * The translation map for directions.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const ORIENTATION_MAP = {\r\n width : [ 'height' ],\r\n left : [ 'top', 'right' ],\r\n right : [ 'bottom', 'left' ],\r\n x : [ 'y' ],\r\n X : [ 'Y' ],\r\n Y : [ 'X' ],\r\n ArrowLeft : [ ARROW_UP, ARROW_RIGHT ],\r\n ArrowRight: [ ARROW_DOWN, ARROW_LEFT ],\r\n};\r\n\r\n/**\r\n * The component that absorbs the difference among directions.\r\n *\r\n * @since 3.0.0\r\n *\r\n * @param Splide - A Splide instance.\r\n * @param Components - A collection of components.\r\n * @param options - Options.\r\n *\r\n * @return A Direction component object.\r\n */\r\nexport function Direction( Splide: Splide, Components: Components, options: Options ): DirectionComponent {\r\n /**\r\n * Resolves the provided property name.\r\n *\r\n * @param prop - A property name to translate.\r\n * @param axisOnly - Optional. If `ture`, returns the same property for LTR and RTL.\r\n * @param direction - Optional. Specify the direction. The default value is the `direction` option.\r\n */\r\n function resolve( prop: string, axisOnly?: boolean, direction?: Options['direction'] ): string {\r\n direction = direction || options.direction;\r\n const index = direction === RTL && ! axisOnly ? 1 : direction === TTB ? 0 : -1;\r\n\r\n return ORIENTATION_MAP[ prop ] && ORIENTATION_MAP[ prop ][ index ]\r\n || prop.replace( /width|left|right/i, ( match, offset ) => {\r\n const replacement = ORIENTATION_MAP[ match.toLowerCase() ][ index ] || match;\r\n return offset > 0 ? replacement.charAt( 0 ).toUpperCase() + replacement.slice( 1 ) : replacement;\r\n } );\r\n }\r\n\r\n /**\r\n * Orients the value towards the current direction.\r\n *\r\n * @param value - A value to orient.\r\n *\r\n * @return The oriented value.\r\n */\r\n function orient( value: number ): number {\r\n return value * ( options.direction === RTL ? 1 : -1 );\r\n }\r\n\r\n return {\r\n resolve,\r\n orient,\r\n };\r\n}\r\n","export const ROLE = 'role';\r\nexport const TAB_INDEX = 'tabindex';\r\nexport const DISABLED = 'disabled';\r\n\r\nexport const ARIA_PREFIX = 'aria-';\r\nexport const ARIA_CONTROLS = `${ ARIA_PREFIX }controls`;\r\nexport const ARIA_CURRENT = `${ ARIA_PREFIX }current`;\r\nexport const ARIA_SELECTED = `${ ARIA_PREFIX }selected`;\r\nexport const ARIA_LABEL = `${ ARIA_PREFIX }label`;\r\nexport const ARIA_LABELLEDBY = `${ ARIA_PREFIX }labelledby`;\r\nexport const ARIA_HIDDEN = `${ ARIA_PREFIX }hidden`;\r\nexport const ARIA_ORIENTATION = `${ ARIA_PREFIX }orientation`;\r\nexport const ARIA_ROLEDESCRIPTION = `${ ARIA_PREFIX }roledescription`;\r\nexport const ARIA_LIVE = `${ ARIA_PREFIX }live`;\r\nexport const ARIA_BUSY = `${ ARIA_PREFIX }busy`;\r\nexport const ARIA_ATOMIC = `${ ARIA_PREFIX }atomic`;\r\n\r\n/**\r\n * The array with all attributes to remove later.\r\n * Need to manually remove attributes that are not in this.\r\n * Note that removing `aria-live` disables the live region until the page reload.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const ALL_ATTRIBUTES = [\r\n ROLE,\r\n TAB_INDEX,\r\n DISABLED,\r\n ARIA_CONTROLS,\r\n ARIA_CURRENT,\r\n ARIA_LABEL,\r\n ARIA_LABELLEDBY,\r\n ARIA_HIDDEN,\r\n ARIA_ORIENTATION,\r\n ARIA_ROLEDESCRIPTION,\r\n];\r\n","import { PROJECT_CODE } from './project';\r\n\r\n/**\r\n * The prefix for classes.\r\n *\r\n * @since 4.1.0\r\n */\r\nconst CLASS_PREFIX = `${ PROJECT_CODE }__`;\r\n\r\n/**\r\n * The prefix for status classes.\r\n *\r\n * @since 4.1.0\r\n */\r\nconst STATUS_CLASS_PREFIX = 'is-';\r\n\r\n/**\r\n * All classes as constants.\r\n */\r\nexport const CLASS_ROOT = PROJECT_CODE;\r\nexport const CLASS_TRACK = `${ CLASS_PREFIX }track`;\r\nexport const CLASS_LIST = `${ CLASS_PREFIX }list`;\r\nexport const CLASS_SLIDE = `${ CLASS_PREFIX }slide`;\r\nexport const CLASS_CLONE = `${ CLASS_SLIDE }--clone`;\r\nexport const CLASS_CONTAINER = `${ CLASS_SLIDE }__container`;\r\nexport const CLASS_ARROWS = `${ CLASS_PREFIX }arrows`;\r\nexport const CLASS_ARROW = `${ CLASS_PREFIX }arrow`;\r\nexport const CLASS_ARROW_PREV = `${ CLASS_ARROW }--prev`;\r\nexport const CLASS_ARROW_NEXT = `${ CLASS_ARROW }--next`;\r\nexport const CLASS_PAGINATION = `${ CLASS_PREFIX }pagination`;\r\nexport const CLASS_PAGINATION_PAGE = `${ CLASS_PAGINATION }__page`;\r\nexport const CLASS_PROGRESS = `${ CLASS_PREFIX }progress`;\r\nexport const CLASS_PROGRESS_BAR = `${ CLASS_PROGRESS }__bar`;\r\nexport const CLASS_TOGGLE = `${ CLASS_PREFIX }toggle`;\r\nexport const CLASS_TOGGLE_PLAY = `${ CLASS_TOGGLE }__play`;\r\nexport const CLASS_TOGGLE_PAUSE = `${ CLASS_TOGGLE }__pause`;\r\nexport const CLASS_SPINNER = `${ CLASS_PREFIX }spinner`;\r\nexport const CLASS_SR = `${ CLASS_PREFIX }sr`;\r\nexport const CLASS_INITIALIZED = `${ STATUS_CLASS_PREFIX }initialized`;\r\nexport const CLASS_ACTIVE = `${ STATUS_CLASS_PREFIX }active`;\r\nexport const CLASS_PREV = `${ STATUS_CLASS_PREFIX }prev`;\r\nexport const CLASS_NEXT = `${ STATUS_CLASS_PREFIX }next`;\r\nexport const CLASS_VISIBLE = `${ STATUS_CLASS_PREFIX }visible`;\r\nexport const CLASS_LOADING = `${ STATUS_CLASS_PREFIX }loading`;\r\nexport const CLASS_FOCUS_IN = `${ STATUS_CLASS_PREFIX }focus-in`;\r\nexport const CLASS_OVERFLOW = `${ STATUS_CLASS_PREFIX }overflow`;\r\n\r\n/**\r\n * The array with all status classes except for `is-initialized`.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const STATUS_CLASSES = [\r\n CLASS_ACTIVE,\r\n CLASS_VISIBLE,\r\n CLASS_PREV,\r\n CLASS_NEXT,\r\n CLASS_LOADING,\r\n CLASS_FOCUS_IN,\r\n CLASS_OVERFLOW,\r\n];\r\n\r\n/**\r\n * The collection of classes for elements that Splide dynamically creates.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const CLASSES = {\r\n slide : CLASS_SLIDE,\r\n clone : CLASS_CLONE,\r\n arrows : CLASS_ARROWS,\r\n arrow : CLASS_ARROW,\r\n prev : CLASS_ARROW_PREV,\r\n next : CLASS_ARROW_NEXT,\r\n pagination: CLASS_PAGINATION,\r\n page : CLASS_PAGINATION_PAGE,\r\n spinner : CLASS_SPINNER,\r\n};\r\n","/**\r\n * The power of the friction.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const FRICTION = 5;\r\n\r\n/**\r\n * If the user stops dragging for this duration with keeping the pointer down, updates the base coord and time.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const LOG_INTERVAL = 200;\r\n\r\n/**\r\n * Start events for dragging.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const POINTER_DOWN_EVENTS = 'touchstart mousedown';\r\n\r\n/**\r\n * Update events for dragging.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const POINTER_MOVE_EVENTS = 'touchmove mousemove';\r\n\r\n/**\r\n * End events for dragging.\r\n * The `click` event is required because the browser sometimes dispatches `drag` events instead of `mouse`.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const POINTER_UP_EVENTS = 'touchend touchcancel mouseup click';\r\n","/**\r\n * The type for the regular slider.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const SLIDE = 'slide';\r\n\r\n/**\r\n * The type for the carousel slider.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const LOOP = 'loop';\r\n\r\n/**\r\n * The type for the fade slider that can not have multiple slides in a page.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const FADE = 'fade';\r\n","import {\r\n ALL_ATTRIBUTES,\r\n ARIA_CONTROLS,\r\n ARIA_CURRENT,\r\n ARIA_HIDDEN,\r\n ARIA_LABEL,\r\n ARIA_ROLEDESCRIPTION,\r\n ROLE,\r\n TAB_INDEX,\r\n} from '../../constants/attributes';\r\nimport {\r\n CLASS_ACTIVE,\r\n CLASS_CONTAINER,\r\n CLASS_NEXT,\r\n CLASS_PREV,\r\n CLASS_VISIBLE,\r\n STATUS_CLASSES,\r\n} from '../../constants/classes';\r\nimport {\r\n EVENT_ACTIVE,\r\n EVENT_CLICK,\r\n EVENT_HIDDEN,\r\n EVENT_INACTIVE,\r\n EVENT_MOVE,\r\n EVENT_MOVED,\r\n EVENT_NAVIGATION_MOUNTED,\r\n EVENT_SCROLLED,\r\n EVENT_SHIFTED,\r\n EVENT_SLIDE_KEYDOWN,\r\n EVENT_VISIBLE,\r\n} from '../../constants/events';\r\nimport { MOVING, SCROLLING } from '../../constants/states';\r\nimport { FADE, LOOP } from '../../constants/types';\r\nimport { EventInterface } from '../../constructors';\r\nimport { Splide } from '../../core/Splide/Splide';\r\nimport { BaseComponent } from '../../types';\r\nimport {\r\n abs,\r\n apply,\r\n ceil,\r\n child,\r\n floor,\r\n focus,\r\n format,\r\n getAttribute,\r\n hasClass,\r\n min,\r\n pad,\r\n queryAll,\r\n rect,\r\n removeAttribute,\r\n removeClass,\r\n setAttribute,\r\n style as _style,\r\n toggleClass,\r\n} from '../../utils';\r\n\r\n\r\n/**\r\n * The interface for the Slide sub component.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface SlideComponent extends BaseComponent {\r\n index: number;\r\n slideIndex: number;\r\n slide: HTMLElement;\r\n container: HTMLElement;\r\n isClone: boolean;\r\n update(): void;\r\n style( prop: string, value: string | number, useContainer?: boolean ): void\r\n isWithin( from: number, distance: number ): boolean;\r\n}\r\n\r\n/**\r\n * The subcomponent for managing each slide.\r\n *\r\n * @since 3.0.0\r\n *\r\n * @param Splide - A Splide instance.\r\n * @param index - A slide index.\r\n * @param slideIndex - A slide index for clones. This must be `-1` if the slide is not a clone.\r\n * @param slide - A slide element.\r\n *\r\n * @return A Slide subcomponent.\r\n */\r\nexport function Slide( Splide: Splide, index: number, slideIndex: number, slide: HTMLElement ): SlideComponent {\r\n const event = EventInterface( Splide );\r\n const { on, emit, bind } = event;\r\n const { Components, root, options } = Splide;\r\n const { isNavigation, updateOnMove, i18n, pagination, slideFocus } = options;\r\n const { resolve } = Components.Direction;\r\n const styles = getAttribute( slide, 'style' );\r\n const label = getAttribute( slide, ARIA_LABEL );\r\n const isClone = slideIndex > -1;\r\n const container = child( slide, `.${ CLASS_CONTAINER }` );\r\n\r\n /**\r\n * Turns into `true` when the component is destroyed.\r\n */\r\n let destroyed: boolean;\r\n\r\n /**\r\n * Called when the component is mounted.\r\n */\r\n function mount( this: SlideComponent ): void {\r\n if ( ! isClone ) {\r\n slide.id = `${ root.id }-slide${ pad( index + 1 ) }`;\r\n setAttribute( slide, ROLE, pagination ? 'tabpanel' : 'group' );\r\n setAttribute( slide, ARIA_ROLEDESCRIPTION, i18n.slide );\r\n setAttribute( slide, ARIA_LABEL, label || format( i18n.slideLabel, [ index + 1, Splide.length ] ) );\r\n }\r\n\r\n listen();\r\n }\r\n\r\n /**\r\n * Listens to some events.\r\n */\r\n function listen(): void {\r\n bind( slide, 'click', apply( emit, EVENT_CLICK, self ) );\r\n bind( slide, 'keydown', apply( emit, EVENT_SLIDE_KEYDOWN, self ) );\r\n on( [ EVENT_MOVED, EVENT_SHIFTED, EVENT_SCROLLED ], update );\r\n on( EVENT_NAVIGATION_MOUNTED, initNavigation );\r\n\r\n if ( updateOnMove ) {\r\n on( EVENT_MOVE, onMove );\r\n }\r\n }\r\n\r\n /**\r\n * Destroys the component.\r\n */\r\n function destroy(): void {\r\n destroyed = true;\r\n event.destroy();\r\n removeClass( slide, STATUS_CLASSES );\r\n removeAttribute( slide, ALL_ATTRIBUTES );\r\n setAttribute( slide, 'style', styles );\r\n setAttribute( slide, ARIA_LABEL, label || '' );\r\n }\r\n\r\n /**\r\n * Initializes slides as navigation.\r\n */\r\n function initNavigation(): void {\r\n const controls = Splide.splides.map( target => {\r\n const Slide = target.splide.Components.Slides.getAt( index );\r\n return Slide ? Slide.slide.id : '';\r\n } ).join( ' ' );\r\n\r\n setAttribute( slide, ARIA_LABEL, format( i18n.slideX, ( isClone ? slideIndex : index ) + 1 ) );\r\n setAttribute( slide, ARIA_CONTROLS, controls );\r\n setAttribute( slide, ROLE, slideFocus ? 'button' : '' );\r\n slideFocus && removeAttribute( slide, ARIA_ROLEDESCRIPTION );\r\n }\r\n\r\n /**\r\n * If the `updateOnMove` option is `true`, called when the slider starts moving.\r\n */\r\n function onMove(): void {\r\n if ( ! destroyed ) {\r\n update();\r\n }\r\n }\r\n\r\n /**\r\n * Updates attribute and classes of the slide.\r\n */\r\n function update(): void {\r\n if ( ! destroyed ) {\r\n const { index: curr } = Splide;\r\n\r\n updateActivity();\r\n updateVisibility();\r\n toggleClass( slide, CLASS_PREV, index === curr - 1 );\r\n toggleClass( slide, CLASS_NEXT, index === curr + 1 );\r\n }\r\n }\r\n\r\n /**\r\n * Updates the status related with activity.\r\n */\r\n function updateActivity(): void {\r\n const active = isActive();\r\n\r\n if ( active !== hasClass( slide, CLASS_ACTIVE ) ) {\r\n toggleClass( slide, CLASS_ACTIVE, active );\r\n setAttribute( slide, ARIA_CURRENT, isNavigation && active || '' );\r\n emit( active ? EVENT_ACTIVE : EVENT_INACTIVE, self );\r\n }\r\n }\r\n\r\n /**\r\n * Updates classes and attributes related with visibility.\r\n * - Do not update aria-hidden on shifting to avoid Window Narrator from start reading contents.\r\n * - If the slide has focus and gets hidden, moves focus to the active slide.\r\n */\r\n function updateVisibility(): void {\r\n const visible = isVisible();\r\n const hidden = ! visible && ( ! isActive() || isClone );\r\n\r\n if ( ! Splide.state.is( [ MOVING, SCROLLING ] ) ) {\r\n setAttribute( slide, ARIA_HIDDEN, hidden || '' );\r\n }\r\n\r\n setAttribute( queryAll( slide, options.focusableNodes || '' ), TAB_INDEX, hidden ? -1 : '' );\r\n\r\n if ( slideFocus ) {\r\n setAttribute( slide, TAB_INDEX, hidden ? -1 : 0 );\r\n }\r\n\r\n if ( visible !== hasClass( slide, CLASS_VISIBLE ) ) {\r\n toggleClass( slide, CLASS_VISIBLE, visible );\r\n emit( visible ? EVENT_VISIBLE : EVENT_HIDDEN, self );\r\n }\r\n\r\n if ( ! visible && document.activeElement === slide ) {\r\n const Slide = Components.Slides.getAt( Splide.index );\r\n Slide && focus( Slide.slide );\r\n }\r\n }\r\n\r\n /**\r\n * Adds a CSS rule to the slider or the container.\r\n *\r\n * @param prop - A property name.\r\n * @param value - A CSS value to add.\r\n * @param useContainer - Optional. Determines whether to apply the rule to the container or not.\r\n */\r\n function style( prop: string, value: string | number, useContainer?: boolean ): void {\r\n _style( ( useContainer && container ) || slide, prop, value );\r\n }\r\n\r\n /**\r\n * Checks if the slide is active or not.\r\n *\r\n * @return `true` if the slide is active.\r\n */\r\n function isActive(): boolean {\r\n const { index: curr } = Splide;\r\n return curr === index || ( options.cloneStatus && curr === slideIndex );\r\n }\r\n\r\n /**\r\n * Checks if the slide is visible or not.\r\n */\r\n function isVisible(): boolean {\r\n if ( Splide.is( FADE ) ) {\r\n return isActive();\r\n }\r\n\r\n const trackRect = rect( Components.Elements.track );\r\n const slideRect = rect( slide );\r\n const left = resolve( 'left', true );\r\n const right = resolve( 'right', true );\r\n\r\n return floor( trackRect[ left ] ) <= ceil( slideRect[ left ] )\r\n && floor( slideRect[ right ] ) <= ceil( trackRect[ right ] );\r\n }\r\n\r\n /**\r\n * Calculates how far this slide is from another slide and\r\n * returns `true` if the distance is within the given number.\r\n *\r\n * @param from - An index of a base slide.\r\n * @param distance - `true` if the slide is within this number.\r\n *\r\n * @return `true` if the slide is within the `distance` from the base slide, or otherwise `false`.\r\n */\r\n function isWithin( from: number, distance: number ): boolean {\r\n let diff = abs( from - index );\r\n\r\n if ( ! isClone && ( options.rewind || Splide.is( LOOP ) ) ) {\r\n diff = min( diff, Splide.length - diff );\r\n }\r\n\r\n return diff <= distance;\r\n }\r\n\r\n const self = {\r\n index,\r\n slideIndex,\r\n slide,\r\n container,\r\n isClone,\r\n mount,\r\n destroy,\r\n update,\r\n style,\r\n isWithin,\r\n };\r\n\r\n return self;\r\n}\r\n","import { DATA_ATTRIBUTE } from '../../constants/project';\r\n\r\n\r\n/**\r\n * The data attribute for the autoplay interval duration.\r\n *\r\n * @since 3.5.0\r\n */\r\nexport const INTERVAL_DATA_ATTRIBUTE = `${ DATA_ATTRIBUTE }-interval`;\r\n","/**\r\n * AddEventListenerOptions for listeners that may prevent the browser scroll.\r\n *\r\n * @since 3.4.1\r\n */\r\nexport const SCROLL_LISTENER_OPTIONS = { passive: false, capture: true };\r\n","import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from '../../../constants/arrows';\r\nimport { isString } from '../../type/type';\r\n\r\n\r\n/**\r\n * The map to associate a non-standard name to the standard one.\r\n *\r\n * @since 4.0.0\r\n */\r\nexport const NORMALIZATION_MAP = {\r\n Spacebar: ' ',\r\n Right : ARROW_RIGHT,\r\n Left : ARROW_LEFT,\r\n Up : ARROW_UP,\r\n Down : ARROW_DOWN,\r\n};\r\n\r\n/**\r\n * Normalizes the key.\r\n *\r\n * @param key - A string or a KeyboardEvent object.\r\n *\r\n * @return A normalized key.\r\n */\r\nexport function normalizeKey( key: string | KeyboardEvent ): string {\r\n key = isString( key ) ? key : key.key;\r\n return NORMALIZATION_MAP[ key ] || key;\r\n}","import { ARROW_LEFT, ARROW_RIGHT } from '../../constants/arrows';\r\nimport { EVENT_MOVE, EVENT_UPDATED } from '../../constants/events';\r\nimport { EventInterface } from '../../constructors';\r\nimport { Splide } from '../../core/Splide/Splide';\r\nimport { BaseComponent, Components, Options } from '../../types';\r\nimport { nextTick } from '../../utils';\r\nimport { normalizeKey } from '../../utils/dom/normalizeKey/normalizeKey';\r\n\r\n\r\n/**\r\n * The interface for the Keyboard component.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface KeyboardComponent extends BaseComponent {\r\n disable( disabled: boolean ): void;\r\n}\r\n\r\n/**\r\n * The keyboard event name.\r\n *\r\n * @since 3.6.0\r\n */\r\nconst KEYBOARD_EVENT = 'keydown';\r\n\r\n/**\r\n * The component for controlling the slider by keyboards.\r\n *\r\n * @since 3.0.0\r\n *\r\n * @param Splide - A Splide instance.\r\n * @param Components - A collection of components.\r\n * @param options - Options.\r\n *\r\n * @return A Keyboard component object.\r\n */\r\nexport function Keyboard( Splide: Splide, Components: Components, options: Options ): KeyboardComponent {\r\n const { on, bind, unbind } = EventInterface( Splide );\r\n const { root } = Splide;\r\n const { resolve } = Components.Direction;\r\n\r\n /**\r\n * The target element of the keyboard event.\r\n */\r\n let target: Window | HTMLElement;\r\n\r\n /**\r\n * Indicates whether the component is currently disabled or not.\r\n */\r\n let disabled: boolean;\r\n\r\n /**\r\n * Called when the component is mounted.\r\n */\r\n function mount(): void {\r\n init();\r\n on( EVENT_UPDATED, destroy );\r\n on( EVENT_UPDATED, init );\r\n on( EVENT_MOVE, onMove );\r\n }\r\n\r\n /**\r\n * Initializes the component.\r\n */\r\n function init(): void {\r\n const { keyboard } = options;\r\n\r\n if ( keyboard ) {\r\n target = keyboard === 'global' ? window : root;\r\n bind( target, KEYBOARD_EVENT, onKeydown );\r\n }\r\n }\r\n\r\n /**\r\n * Destroys the component.\r\n */\r\n function destroy(): void {\r\n unbind( target, KEYBOARD_EVENT );\r\n }\r\n\r\n /**\r\n * Disables the keyboard input.\r\n *\r\n * @param value - Toggles disabling/enabling the keyboard input.\r\n */\r\n function disable( value: boolean ): void {\r\n disabled = value;\r\n }\r\n\r\n /**\r\n * Called when the slider moves.\r\n * To avoid the slider from moving twice, wait for a tick.\r\n */\r\n function onMove(): void {\r\n const _disabled = disabled;\r\n disabled = true;\r\n nextTick( () => { disabled = _disabled } );\r\n }\r\n\r\n /**\r\n * Called when any key is pressed on the target.\r\n *\r\n * @param e - A KeyboardEvent object.\r\n */\r\n function onKeydown( e: KeyboardEvent ): void {\r\n if ( ! disabled ) {\r\n const key = normalizeKey( e );\r\n\r\n if ( key === resolve( ARROW_LEFT ) ) {\r\n Splide.go( '<' );\r\n } else if ( key === resolve( ARROW_RIGHT ) ) {\r\n Splide.go( '>' );\r\n }\r\n }\r\n }\r\n\r\n return {\r\n mount,\r\n destroy,\r\n disable,\r\n };\r\n}\r\n","import { DATA_ATTRIBUTE } from '../../constants/project';\r\n\r\n\r\n/**\r\n * The data attribute for the src value.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const SRC_DATA_ATTRIBUTE = `${ DATA_ATTRIBUTE }-lazy`;\r\n\r\n/**\r\n * The data attribute for the srcset value.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const SRCSET_DATA_ATTRIBUTE = `${ SRC_DATA_ATTRIBUTE }-srcset`;\r\n\r\n/**\r\n * The selector string for images to load.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport const IMAGE_SELECTOR = `[${ SRC_DATA_ATTRIBUTE }], [${ SRCSET_DATA_ATTRIBUTE }]`;\r\n","import { ARIA_ORIENTATION } from '../../constants/attributes';\r\nimport { TTB } from '../../constants/directions';\r\nimport {\r\n EVENT_CLICK,\r\n EVENT_MOUNTED,\r\n EVENT_MOVE,\r\n EVENT_NAVIGATION_MOUNTED,\r\n EVENT_SLIDE_KEYDOWN,\r\n EVENT_UPDATED,\r\n} from '../../constants/events';\r\nimport { LOOP } from '../../constants/types';\r\nimport { EventInterface, EventInterfaceObject } from '../../constructors';\r\nimport { Splide } from '../../core/Splide/Splide';\r\nimport { BaseComponent, Components, Options } from '../../types';\r\nimport { apply, empty, includes, isUndefined, prevent, setAttribute } from '../../utils';\r\nimport { normalizeKey } from '../../utils/dom/normalizeKey/normalizeKey';\r\nimport { SlideComponent } from '../Slides/Slide';\r\n\r\n\r\n/**\r\n * The interface for the Sync component.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface SyncComponent extends BaseComponent {\r\n remount(): void;\r\n}\r\n\r\n/**\r\n * The keys for triggering the navigation slide.\r\n *\r\n * @since 3.0.0\r\n */\r\nconst TRIGGER_KEYS = [ ' ', 'Enter' ];\r\n\r\n/**\r\n * The component for syncing multiple sliders.\r\n *\r\n * @since 3.0.0\r\n *\r\n * @param Splide - A Splide instance.\r\n * @param Components - A collection of components.\r\n * @param options - Options.\r\n *\r\n * @return A Sync component object.\r\n */\r\nexport function Sync( Splide: Splide, Components: Components, options: Options ): SyncComponent {\r\n const { isNavigation, slideFocus } = options;\r\n\r\n /**\r\n * Stores event objects.\r\n */\r\n const events: EventInterfaceObject[] = [];\r\n\r\n /**\r\n * Called when the component is mounted.\r\n */\r\n function mount(): void {\r\n Splide.splides.forEach( target => {\r\n if ( ! target.isParent ) {\r\n sync( Splide, target.splide );\r\n sync( target.splide, Splide );\r\n }\r\n } );\r\n\r\n if ( isNavigation ) {\r\n navigate();\r\n }\r\n }\r\n\r\n /**\r\n * Destroys the component.\r\n */\r\n function destroy(): void {\r\n events.forEach( event => { event.destroy() } );\r\n empty( events );\r\n }\r\n\r\n /**\r\n * Remounts the component.\r\n *\r\n * @internal\r\n */\r\n function remount(): void {\r\n destroy();\r\n mount();\r\n }\r\n\r\n /**\r\n * Syncs the current index with a provided child splide instance.\r\n *\r\n * @param splide - A splide instance to sync with.\r\n * @param target - A target splide instance.\r\n */\r\n function sync( splide: Splide, target: Splide ): void {\r\n const event = EventInterface( splide );\r\n\r\n event.on( EVENT_MOVE, ( index, prev, dest ) => {\r\n target.go( target.is( LOOP ) ? dest : index );\r\n } );\r\n\r\n events.push( event );\r\n }\r\n\r\n /**\r\n * Makes slides clickable and moves the slider to the index of clicked slide.\r\n * Note that the direction of `menu` is implicitly `vertical` as default.\r\n */\r\n function navigate(): void {\r\n const event = EventInterface( Splide );\r\n const { on } = event;\r\n\r\n on( EVENT_CLICK, onClick );\r\n on( EVENT_SLIDE_KEYDOWN, onKeydown );\r\n on( [ EVENT_MOUNTED, EVENT_UPDATED ], update );\r\n\r\n events.push( event );\r\n event.emit( EVENT_NAVIGATION_MOUNTED, Splide.splides );\r\n }\r\n\r\n /**\r\n * Update attributes.\r\n */\r\n function update(): void {\r\n setAttribute( Components.Elements.list, ARIA_ORIENTATION, options.direction === TTB ? 'vertical' : '' );\r\n }\r\n\r\n /**\r\n * Called when the navigation slide is clicked.\r\n *\r\n * @param Slide - A clicked Slide component.\r\n */\r\n function onClick( Slide: SlideComponent ): void {\r\n Splide.go( Slide.index );\r\n }\r\n\r\n /**\r\n * Called when any key is pressed on the navigation slide.\r\n *\r\n * @param Slide - A Slide component.\r\n * @param e - A KeyboardEvent object.\r\n */\r\n function onKeydown( Slide: SlideComponent, e: KeyboardEvent ): void {\r\n if ( includes( TRIGGER_KEYS, normalizeKey( e ) ) ) {\r\n onClick( Slide );\r\n prevent( e );\r\n }\r\n }\r\n\r\n return {\r\n setup: apply(\r\n Components.Media.set,\r\n { slideFocus: isUndefined( slideFocus ) ? isNavigation : slideFocus },\r\n true\r\n ),\r\n mount,\r\n destroy,\r\n remount,\r\n };\r\n}\r\n","import { MEDIA_PREFERS_REDUCED_MOTION } from '../../constants/media';\r\nimport { CREATED, DESTROYED } from '../../constants/states';\r\nimport { EventBinder } from '../../constructors';\r\nimport { Splide } from '../../core/Splide/Splide';\r\nimport { BaseComponent, Components, Options } from '../../types';\r\nimport { merge, omit, ownKeys } from '../../utils';\r\nimport { EVENT_UPDATED } from '../../constants/events';\r\n\r\n\r\n/**\r\n * The interface for the Media component.\r\n *\r\n * @since 4.0.0\r\n */\r\nexport interface MediaComponent extends BaseComponent {\r\n /** @internal */\r\n reduce( reduced: boolean ): void;\r\n set( options: Options, base?: boolean, notify?: boolean ): void;\r\n}\r\n\r\n/**\r\n * The component for observing media queries and updating options if necessary.\r\n * This used to be the Options component.\r\n *\r\n * @since 4.0.0\r\n *\r\n * @param Splide - A Splide instance.\r\n * @param Components - A collection of components.\r\n * @param options - Options.\r\n *\r\n * @return A Media component object.\r\n */\r\nexport function Media( Splide: Splide, Components: Components, options: Options ): MediaComponent {\r\n const { state } = Splide;\r\n const breakpoints = options.breakpoints || {};\r\n const reducedMotion = options.reducedMotion || {};\r\n const binder = EventBinder();\r\n\r\n /**\r\n * Stores options and MediaQueryList object.\r\n */\r\n const queries: Array<[ Options, MediaQueryList ]> = [];\r\n\r\n /**\r\n * Called when the component is constructed.\r\n */\r\n function setup(): void {\r\n const isMin = options.mediaQuery === 'min';\r\n\r\n ownKeys( breakpoints )\r\n .sort( ( n, m ) => isMin ? +n - +m : +m - +n )\r\n .forEach( key => {\r\n register( breakpoints[ key ], `(${ isMin ? 'min' : 'max' }-width:${ key }px)` );\r\n } );\r\n\r\n register( reducedMotion, MEDIA_PREFERS_REDUCED_MOTION );\r\n update();\r\n }\r\n\r\n /**\r\n * Destroys the component.\r\n *\r\n * @param completely - Will be `true` for complete destruction.\r\n */\r\n function destroy( completely: boolean ): void {\r\n if ( completely ) {\r\n binder.destroy();\r\n }\r\n }\r\n\r\n /**\r\n * Registers entries as [ Options, media query string ].\r\n *\r\n * @param options - Options merged to current options when the document matches the query.\r\n * @param query - A query string.\r\n */\r\n function register( options: Options, query: string ): void {\r\n const queryList = matchMedia( query );\r\n binder.bind( queryList, 'change', update );\r\n queries.push( [ options, queryList ] );\r\n }\r\n\r\n /**\r\n * Checks all media queries in entries and updates options.\r\n */\r\n function update(): void {\r\n const destroyed = state.is( DESTROYED );\r\n const direction = options.direction;\r\n const merged = queries.reduce( ( merged, entry ) => {\r\n return merge( merged, entry[ 1 ].matches ? entry[ 0 ] : {} );\r\n }, {} );\r\n\r\n omit( options );\r\n set( merged );\r\n\r\n if ( options.destroy ) {\r\n Splide.destroy( options.destroy === 'completely' );\r\n } else if ( destroyed ) {\r\n destroy( true );\r\n Splide.mount();\r\n } else {\r\n direction !== options.direction && Splide.refresh();\r\n }\r\n }\r\n\r\n /**\r\n * Disables or enables `reducedMotion` options.\r\n * This method does nothing when the document does not match the query.\r\n *\r\n * @internal\r\n *\r\n * @param enable - Determines whether to apply `reducedMotion` options or not.\r\n */\r\n function reduce( enable: boolean ): void {\r\n if ( matchMedia( MEDIA_PREFERS_REDUCED_MOTION ).matches ) {\r\n enable ? merge( options, reducedMotion ) : omit( options, ownKeys( reducedMotion ) );\r\n }\r\n }\r\n\r\n /**\r\n * Sets current options or base options (prototype).\r\n * If changing base options, always emits the `updated` event.\r\n *\r\n * @internal\r\n *\r\n * @param opts - New options.\r\n * @param base - Optional. Determines whether to also update base options or not.\r\n * @param notify - Optional. If `true`, always emits the `update` event.\r\n */\r\n function set( opts: Options, base?: boolean, notify?: boolean ): void {\r\n merge( options, opts );\r\n base && merge( Object.getPrototypeOf( options ), opts );\r\n\r\n if ( notify || ! state.is( CREATED ) ) {\r\n Splide.emit( EVENT_UPDATED, options );\r\n }\r\n }\r\n\r\n return {\r\n setup,\r\n destroy,\r\n reduce,\r\n set,\r\n };\r\n}\r\n","import { ALL_ATTRIBUTES, ARIA_LABEL, ARIA_LABELLEDBY, ARIA_ROLEDESCRIPTION, ROLE } from '../../constants/attributes';\r\nimport {\r\n CLASS_ACTIVE,\r\n CLASS_ARROW_NEXT,\r\n CLASS_ARROW_PREV,\r\n CLASS_ARROWS,\r\n CLASS_CLONE,\r\n CLASS_FOCUS_IN,\r\n CLASS_LIST,\r\n CLASS_PAGINATION,\r\n CLASS_PROGRESS_BAR,\r\n CLASS_ROOT,\r\n CLASS_SLIDE,\r\n CLASS_TOGGLE,\r\n CLASS_TRACK,\r\n} from '../../constants/classes';\r\nimport { EVENT_REFRESH, EVENT_UPDATED } from '../../constants/events';\r\nimport { PROJECT_CODE } from '../../constants/project';\r\nimport { EventInterface } from '../../constructors';\r\nimport { Splide } from '../../core/Splide/Splide';\r\nimport { BaseComponent, Components, Options } from '../../types';\r\nimport {\r\n addClass,\r\n assert,\r\n assign,\r\n child,\r\n children,\r\n empty,\r\n forOwn,\r\n getAttribute,\r\n push,\r\n query,\r\n removeAttribute,\r\n removeClass,\r\n setAttribute,\r\n toggleClass,\r\n uniqueId,\r\n} from '../../utils';\r\nimport { closest } from '../../utils/dom/closest/closest';\r\nimport { POINTER_DOWN_EVENTS } from '../Drag/constants';\r\n\r\n\r\n/**\r\n * The interface for elements which the slider consists of.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface ElementCollection {\r\n root: HTMLElement;\r\n track: HTMLElement;\r\n list: HTMLElement;\r\n slides: HTMLElement[];\r\n arrows?: HTMLElement;\r\n pagination?: HTMLUListElement;\r\n prev?: HTMLButtonElement;\r\n next?: HTMLButtonElement;\r\n bar?: HTMLElement;\r\n toggle?: HTMLElement;\r\n}\r\n\r\n/**\r\n * The interface for the Elements component.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface ElementsComponent extends BaseComponent, ElementCollection {\r\n}\r\n\r\n/**\r\n * The component that collects and handles elements which the slider consists of.\r\n *\r\n * @since 3.0.0\r\n *\r\n * @param Splide - A Splide instance.\r\n * @param Components - A collection of components.\r\n * @param options - Options.\r\n *\r\n * @return An Elements component object.\r\n */\r\nexport function Elements( Splide: Splide, Components: Components, options: Options ): ElementsComponent {\r\n const { on, bind } = EventInterface( Splide );\r\n const { root } = Splide;\r\n const { i18n } = options;\r\n const elements: ElementCollection = {} as ElementCollection;\r\n\r\n /**\r\n * Stores all slide elements.\r\n */\r\n const slides: HTMLElement[] = [];\r\n\r\n /**\r\n * Stores all root classes.\r\n */\r\n let rootClasses: string[] = [];\r\n\r\n /**\r\n * Stores all list classes.\r\n */\r\n let trackClasses: string[] = [];\r\n\r\n /**\r\n * The track element.\r\n */\r\n let track: HTMLElement;\r\n\r\n /**\r\n * The list element.\r\n */\r\n let list: HTMLElement;\r\n\r\n /**\r\n * Turns into `true` when detecting keydown, and `false` when detecting pointerdown.\r\n */\r\n let isUsingKey: boolean;\r\n\r\n /**\r\n * Called when the component is constructed.\r\n */\r\n function setup(): void {\r\n collect();\r\n init();\r\n update();\r\n }\r\n\r\n /**\r\n * Called when the component is mounted.\r\n */\r\n function mount(): void {\r\n on( EVENT_REFRESH, destroy );\r\n on( EVENT_REFRESH, setup );\r\n on( EVENT_UPDATED, update );\r\n\r\n bind( document, `${ POINTER_DOWN_EVENTS } keydown`, e => {\r\n isUsingKey = e.type === 'keydown';\r\n }, { capture: true } );\r\n\r\n bind( root, 'focusin', () => {\r\n toggleClass( root, CLASS_FOCUS_IN, !! isUsingKey );\r\n } );\r\n }\r\n\r\n /**\r\n * Destroys the component.\r\n *\r\n * @param completely - Whether to destroy the component completely or not.\r\n */\r\n function destroy( completely?: boolean ): void {\r\n const attrs = ALL_ATTRIBUTES.concat( 'style' );\r\n\r\n empty( slides );\r\n removeClass( root, rootClasses );\r\n removeClass( track, trackClasses );\r\n removeAttribute( [ track, list ], attrs );\r\n removeAttribute( root, completely ? attrs : [ 'style', ARIA_ROLEDESCRIPTION ] );\r\n }\r\n\r\n /**\r\n * Updates the status of elements.\r\n */\r\n function update(): void {\r\n removeClass( root, rootClasses );\r\n removeClass( track, trackClasses );\r\n\r\n rootClasses = getClasses( CLASS_ROOT );\r\n trackClasses = getClasses( CLASS_TRACK );\r\n\r\n addClass( root, rootClasses );\r\n addClass( track, trackClasses );\r\n\r\n setAttribute( root, ARIA_LABEL, options.label );\r\n setAttribute( root, ARIA_LABELLEDBY, options.labelledby );\r\n }\r\n\r\n /**\r\n * Collects elements which the slider consists of.\r\n */\r\n function collect(): void {\r\n track = find( `.${ CLASS_TRACK }` );\r\n list = child( track, `.${ CLASS_LIST }` );\r\n\r\n assert( track && list, 'A track/list element is missing.' );\r\n push( slides, children( list, `.${ CLASS_SLIDE }:not(.${ CLASS_CLONE })` ) );\r\n\r\n forOwn( {\r\n arrows : CLASS_ARROWS,\r\n pagination: CLASS_PAGINATION,\r\n prev : CLASS_ARROW_PREV,\r\n next : CLASS_ARROW_NEXT,\r\n bar : CLASS_PROGRESS_BAR,\r\n toggle : CLASS_TOGGLE,\r\n }, ( className, key ) => {\r\n elements[ key ] = find( `.${ className }` );\r\n } );\r\n\r\n assign( elements, { root, track, list, slides } );\r\n }\r\n\r\n /**\r\n * Initializes essential elements.\r\n * Note that do not change the role of the root element,\r\n * which removes the region from the accessibility tree.\r\n */\r\n function init(): void {\r\n const id = root.id || uniqueId( PROJECT_CODE );\r\n const role = options.role;\r\n\r\n root.id = id;\r\n track.id = track.id || `${ id }-track`;\r\n list.id = list.id || `${ id }-list`;\r\n\r\n if ( ! getAttribute( root, ROLE ) && root.tagName !== 'SECTION' && role ) {\r\n setAttribute( root, ROLE, role );\r\n }\r\n\r\n setAttribute( root, ARIA_ROLEDESCRIPTION, i18n.carousel );\r\n setAttribute( list, ROLE, 'presentation' );\r\n }\r\n\r\n /**\r\n * Finds an element only in this slider, ignoring elements in a nested slider.\r\n *\r\n * @return A found element or null.\r\n */\r\n function find( selector: string ): HTMLElement | undefined {\r\n const elm = query( root, selector );\r\n return elm && closest( elm, `.${ CLASS_ROOT }` ) === root ? elm : undefined;\r\n }\r\n\r\n /**\r\n * Return an array with modifier classes.\r\n *\r\n * @param base - A base class name.\r\n *\r\n * @return An array with classes.\r\n */\r\n function getClasses( base: string ): string[] {\r\n return [\r\n `${ base }--${ options.type }`,\r\n `${ base }--${ options.direction }`,\r\n options.drag && `${ base }--draggable`,\r\n options.isNavigation && `${ base }--nav`,\r\n base === CLASS_ROOT && CLASS_ACTIVE,\r\n ];\r\n }\r\n\r\n return assign( elements, {\r\n setup,\r\n mount,\r\n destroy,\r\n } );\r\n}\r\n","import { isFunction } from '../../type/type';\r\nimport { matches } from '../matches/matches';\r\n\r\n\r\n/**\r\n * Starts from the provided element, searches for the first element that matches the selector in ascendants.\r\n *\r\n * @param from - An element to search from.\r\n * @param selector - A selector.\r\n *\r\n * @return The found element if available, or `null`.\r\n */\r\nexport function closest( from: HTMLElement, selector: string ): HTMLElement | null {\r\n if ( isFunction( from.closest ) ) {\r\n return from.closest( selector );\r\n }\r\n\r\n let elm: HTMLElement | null = from;\r\n\r\n while ( elm && elm.nodeType === 1 ) {\r\n if ( matches( elm, selector ) ) {\r\n break;\r\n }\r\n\r\n elm = elm.parentElement;\r\n }\r\n\r\n return elm;\r\n}","import { EVENT_REFRESH, EVENT_RESIZE } from '../../constants/events';\r\nimport { EventInterface } from '../../constructors';\r\nimport { Splide } from '../../core/Splide/Splide';\r\nimport { AnyFunction, BaseComponent, Components, Options } from '../../types';\r\nimport {\r\n addClass,\r\n append,\r\n apply,\r\n before,\r\n between,\r\n empty,\r\n forEach as forEachItem,\r\n includes,\r\n isFunction,\r\n isHTMLElement,\r\n isString,\r\n matches,\r\n parseHtml,\r\n queryAll,\r\n remove as removeNode,\r\n toArray,\r\n} from '../../utils';\r\nimport { Slide, SlideComponent } from './Slide';\r\n\r\n\r\n/**\r\n * The interface for the Slides component.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface SlidesComponent extends BaseComponent {\r\n update(): void;\r\n register( slide: HTMLElement, index: number, slideIndex: number ): void;\r\n get( excludeClones?: boolean ): SlideComponent[];\r\n getIn( page: number ): SlideComponent[];\r\n getAt( index: number ): SlideComponent | undefined;\r\n add( slide: string | Element | Array, index?: number ): void;\r\n remove( selector: SlideMatcher ): void;\r\n forEach( iteratee: SlidesIteratee, excludeClones?: boolean ): void;\r\n filter( matcher: SlideMatcher ): SlideComponent[];\r\n style( prop: string, value: string | number, useContainer?: boolean ): void\r\n getLength( excludeClones?: boolean ): number;\r\n isEnough(): boolean;\r\n}\r\n\r\n/**\r\n * The iteratee function for Slides.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport type SlidesIteratee = ( Slide: SlideComponent, index: number, Slides: SlideComponent[] ) => void\r\n\r\n/**\r\n * The predicate function for Slides.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport type SlidesPredicate = ( Slide: SlideComponent, index: number, Slides: SlideComponent[] ) => any\r\n\r\n/**\r\n * The type for filtering SlideComponent objects.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport type SlideMatcher = number | number[] | string | SlidesPredicate;\r\n\r\n/**\r\n * The component for managing all slides include clones.\r\n *\r\n * @since 3.0.0\r\n *\r\n * @param Splide - A Splide instance.\r\n * @param Components - A collection of components.\r\n * @param options - Options.\r\n *\r\n * @return An Slides component object.\r\n */\r\nexport function Slides( Splide: Splide, Components: Components, options: Options ): SlidesComponent {\r\n const { on, emit, bind } = EventInterface( Splide );\r\n const { slides, list } = Components.Elements;\r\n\r\n /**\r\n * Stores all SlideComponent objects.\r\n */\r\n const Slides: SlideComponent[] = [];\r\n\r\n /**\r\n * Called when the component is mounted.\r\n */\r\n function mount(): void {\r\n init();\r\n on( EVENT_REFRESH, destroy );\r\n on( EVENT_REFRESH, init );\r\n }\r\n\r\n /**\r\n * Initializes the component.\r\n */\r\n function init(): void {\r\n slides.forEach( ( slide, index ) => { register( slide, index, -1 ) } );\r\n }\r\n\r\n /**\r\n * Destroys the component.\r\n */\r\n function destroy(): void {\r\n forEach( Slide => { Slide.destroy() } );\r\n empty( Slides );\r\n }\r\n\r\n /**\r\n * Manually updates the status of all slides.\r\n */\r\n function update(): void {\r\n forEach( Slide => { Slide.update() } );\r\n }\r\n\r\n /**\r\n * Registers a slide element and creates a Slide object.\r\n * Needs to sort every time when a new slide is registered especially for clones.\r\n *\r\n * @param slide - A slide element to register.\r\n * @param index - A slide index.\r\n * @param slideIndex - A slide index for clones. This must be `-1` for regular slides.\r\n */\r\n function register( slide: HTMLElement, index: number, slideIndex: number ): void {\r\n const object = Slide( Splide, index, slideIndex, slide );\r\n object.mount();\r\n Slides.push( object );\r\n Slides.sort( ( Slide1, Slide2 ) => Slide1.index - Slide2.index );\r\n }\r\n\r\n /**\r\n * Returns all Slide objects.\r\n *\r\n * @param excludeClones - Optional. Determines whether to exclude clones or not.\r\n *\r\n * @return An array with Slide objects.\r\n */\r\n function get( excludeClones?: boolean ): SlideComponent[] {\r\n return excludeClones ? filter( Slide => ! Slide.isClone ) : Slides;\r\n }\r\n\r\n /**\r\n * Returns slides in the specified page.\r\n *\r\n * @param page - A page index.\r\n *\r\n * @return An array with slides that belong to the page.\r\n */\r\n function getIn( page: number ): SlideComponent[] {\r\n const { Controller } = Components;\r\n const index = Controller.toIndex( page );\r\n const max = Controller.hasFocus() ? 1 : options.perPage;\r\n return filter( Slide => between( Slide.index, index, index + max - 1 ) );\r\n }\r\n\r\n /**\r\n * Returns a Slide object at the specified index.\r\n *\r\n * @param index - A slide index.\r\n *\r\n * @return A Slide object if available, or otherwise `undefined`.\r\n */\r\n function getAt( index: number ): SlideComponent | undefined {\r\n return filter( index )[ 0 ];\r\n }\r\n\r\n /**\r\n * Inserts a slide or slides at a specified index.\r\n *\r\n * @param items - A slide element, an HTML string or an array with them.\r\n * @param index - Optional. An index to insert the slide at. If omitted, appends it to the list.\r\n */\r\n function add( items: string | Element | Array, index?: number ): void {\r\n forEachItem( items, slide => {\r\n if ( isString( slide ) ) {\r\n slide = parseHtml( slide );\r\n }\r\n\r\n if ( isHTMLElement( slide ) ) {\r\n const ref = slides[ index ];\r\n ref ? before( slide, ref ) : append( list, slide );\r\n addClass( slide, options.classes.slide );\r\n observeImages( slide, apply( emit, EVENT_RESIZE ) );\r\n }\r\n } );\r\n\r\n emit( EVENT_REFRESH );\r\n }\r\n\r\n /**\r\n * Removes slides that match the matcher\r\n * that can be an index, an array with indices, a selector, or an iteratee function.\r\n *\r\n * @param matcher - An index, an array with indices, a selector string, or an iteratee function.\r\n */\r\n function remove( matcher: SlideMatcher ): void {\r\n removeNode( filter( matcher ).map( Slide => Slide.slide ) );\r\n emit( EVENT_REFRESH );\r\n }\r\n\r\n /**\r\n * Iterates over Slide objects by the iteratee function.\r\n *\r\n * @param iteratee - An iteratee function that takes a Slide object, an index and an array with Slides.\r\n * @param excludeClones - Optional. Determines whether to exclude clones or not.\r\n */\r\n function forEach( iteratee: SlidesIteratee, excludeClones?: boolean ): void {\r\n get( excludeClones ).forEach( iteratee );\r\n }\r\n\r\n /**\r\n * Filters Slides by the matcher\r\n * that can be an index, an array with indices, a selector, or a predicate function.\r\n *\r\n * @param matcher - An index, an array with indices, a selector string, or a predicate function.\r\n *\r\n * @return An array with SlideComponent objects.\r\n */\r\n function filter( matcher: SlideMatcher ): SlideComponent[] {\r\n return Slides.filter( isFunction( matcher )\r\n ? matcher\r\n : Slide => isString( matcher )\r\n ? matches( Slide.slide, matcher )\r\n : includes( toArray( matcher ), Slide.index )\r\n );\r\n }\r\n\r\n /**\r\n * Adds a CSS rule to all slides or containers.\r\n *\r\n * @param prop - A property name.\r\n * @param value - A CSS value to add.\r\n * @param useContainer - Optional. Determines whether to apply the rule to the container or not.\r\n */\r\n function style( prop: string, value: string | number, useContainer?: boolean ): void {\r\n forEach( Slide => { Slide.style( prop, value, useContainer ) } );\r\n }\r\n\r\n /**\r\n * Invokes the callback after all images in the element are loaded.\r\n *\r\n * @param elm - An element that may contain images.\r\n * @param callback - A callback function.\r\n */\r\n function observeImages( elm: Element, callback: AnyFunction ): void {\r\n const images = queryAll( elm, 'img' );\r\n let { length } = images;\r\n\r\n if ( length ) {\r\n images.forEach( img => {\r\n bind( img, 'load error', () => {\r\n if ( ! --length ) {\r\n callback();\r\n }\r\n } );\r\n } );\r\n } else {\r\n callback();\r\n }\r\n }\r\n\r\n /**\r\n * Returns the length of slides.\r\n *\r\n * @param excludeClones - Optional. Determines whether to exclude clones or not.\r\n *\r\n * @return The length of slides.\r\n */\r\n function getLength( excludeClones?: boolean ): number {\r\n return excludeClones ? slides.length : Slides.length;\r\n }\r\n\r\n /**\r\n * Checks if the number of slides is over than the `perPage` option, including clones.\r\n *\r\n * @return `true` if there are enough slides, or otherwise `false`.\r\n */\r\n function isEnough(): boolean {\r\n return Slides.length > options.perPage;\r\n }\r\n\r\n return {\r\n mount,\r\n destroy,\r\n update,\r\n register,\r\n get,\r\n getIn,\r\n getAt,\r\n add,\r\n remove,\r\n forEach,\r\n filter,\r\n style,\r\n getLength,\r\n isEnough,\r\n };\r\n}\r\n","import { TTB } from '../../constants/directions';\r\nimport { EVENT_OVERFLOW, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_UPDATED } from '../../constants/events';\r\nimport { EventInterface, Throttle } from '../../constructors';\r\nimport { Splide } from '../../core/Splide/Splide';\r\nimport { BaseComponent, Components, Options } from '../../types';\r\nimport { abs, apply, assert, isObject, rect, style, toggleClass, unit } from '../../utils';\r\nimport { FADE } from '../../constants/types';\r\nimport { CLASS_OVERFLOW } from '../../constants/classes';\r\n\r\n\r\n/**\r\n * The interface for the Layout component.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface LayoutComponent extends BaseComponent {\r\n listSize(): number;\r\n slideSize( index: number, withoutGap?: boolean ): number;\r\n sliderSize( withoutGap?: boolean ): number;\r\n totalSize( index?: number, withoutGap?: boolean ): number;\r\n getPadding( right: boolean ): number;\r\n isOverflow(): boolean;\r\n\r\n /** @internal */\r\n resize( force?: boolean ): void;\r\n}\r\n\r\n/**\r\n * The component that adjusts slider styles and provides methods for dimensions.\r\n *\r\n * @since 3.0.0\r\n *\r\n * @param Splide - A Splide instance.\r\n * @param Components - A collection of components.\r\n * @param options - Options.\r\n *\r\n * @return An Layout component object.\r\n */\r\nexport function Layout( Splide: Splide, Components: Components, options: Options ): LayoutComponent {\r\n const { on, bind, emit } = EventInterface( Splide );\r\n const { Slides } = Components;\r\n const { resolve } = Components.Direction;\r\n const { root, track, list } = Components.Elements;\r\n const { getAt, style: styleSlides } = Slides;\r\n\r\n /**\r\n * Indicates whether the slider direction is vertical or not.\r\n */\r\n let vertical: boolean;\r\n\r\n /**\r\n * Keeps the DOMRect object of the root element.\r\n */\r\n let rootRect: DOMRect;\r\n\r\n /**\r\n * Turns into `true` when the carousel is wider than the list.\r\n */\r\n let overflow: boolean;\r\n\r\n /**\r\n * Called when the component is mounted.\r\n */\r\n function mount(): void {\r\n init();\r\n bind( window, 'resize load', Throttle( apply( emit, EVENT_RESIZE ) ) );\r\n on( [ EVENT_UPDATED, EVENT_REFRESH ], init );\r\n on( EVENT_RESIZE, resize );\r\n }\r\n\r\n /**\r\n * Initializes the component on `mount` or `updated`.\r\n * Uses `max-width` for the root to prevent the slider from exceeding the parent element.\r\n */\r\n function init(): void {\r\n vertical = options.direction === TTB;\r\n\r\n style( root, 'maxWidth', unit( options.width ) );\r\n style( track, resolve( 'paddingLeft' ), cssPadding( false ) );\r\n style( track, resolve( 'paddingRight' ), cssPadding( true ) );\r\n\r\n resize( true );\r\n }\r\n\r\n /**\r\n * Updates dimensions of some elements when the carousel is resized.\r\n * Also checks the carousel size and emits `overflow` events when it exceeds the list width.\r\n *\r\n * @param force - Skips checking the root dimension change and always performs the resizing process.\r\n */\r\n function resize( force?: boolean ): void {\r\n const newRect = rect( root );\r\n\r\n if ( force || rootRect.width !== newRect.width || rootRect.height !== newRect.height ) {\r\n style( track, 'height', cssTrackHeight() );\r\n\r\n styleSlides( resolve( 'marginRight' ), unit( options.gap ) );\r\n styleSlides( 'width', cssSlideWidth() );\r\n styleSlides( 'height', cssSlideHeight(), true );\r\n\r\n rootRect = newRect;\r\n emit( EVENT_RESIZED );\r\n\r\n if ( overflow !== ( overflow = isOverflow() ) ) {\r\n toggleClass( root, CLASS_OVERFLOW, overflow );\r\n emit( EVENT_OVERFLOW, overflow );\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Parses the padding option and returns the value for each side.\r\n * This method returns `paddingTop` or `paddingBottom` for the vertical slider.\r\n *\r\n * @param right - Determines whether to get `paddingRight/Bottom` or `paddingLeft/Top`.\r\n *\r\n * @return The padding value as a CSS string.\r\n */\r\n function cssPadding( right: boolean ): string {\r\n const { padding } = options;\r\n const prop = resolve( right ? 'right' : 'left' );\r\n return padding\r\n && unit( padding[ prop ] || ( isObject( padding ) ? 0 : padding ) )\r\n || '0px';\r\n }\r\n\r\n /**\r\n * Returns the height of the track element as a CSS string.\r\n *\r\n * @return The height of the track.\r\n */\r\n function cssTrackHeight(): string {\r\n let height = '';\r\n\r\n if ( vertical ) {\r\n height = cssHeight();\r\n assert( height, 'height or heightRatio is missing.' );\r\n height = `calc(${ height } - ${ cssPadding( false ) } - ${ cssPadding( true ) })`;\r\n }\r\n\r\n return height;\r\n }\r\n\r\n /**\r\n * Converts options related with height to a CSS string.\r\n *\r\n * @return The height as a CSS string if available, or otherwise an empty string.\r\n */\r\n function cssHeight(): string {\r\n return unit( options.height || rect( list ).width * options.heightRatio );\r\n }\r\n\r\n /**\r\n * Returns the width of the slide as a CSS string.\r\n *\r\n * @return The width of the slide.\r\n */\r\n function cssSlideWidth(): string | null {\r\n return options.autoWidth\r\n ? null\r\n : unit( options.fixedWidth ) || ( vertical ? '' : cssSlideSize() );\r\n }\r\n\r\n /**\r\n * Returns the height of the slide as a CSS string.\r\n *\r\n * @return The height of the slide.\r\n */\r\n function cssSlideHeight(): string | null {\r\n return unit( options.fixedHeight )\r\n || ( vertical ? ( options.autoHeight ? null : cssSlideSize() ) : cssHeight() );\r\n }\r\n\r\n /**\r\n * Returns the CSS string for slide width or height without gap.\r\n *\r\n * @return The CSS string for slide width or height.\r\n */\r\n function cssSlideSize(): string {\r\n const gap = unit( options.gap );\r\n return `calc((100%${ gap && ` + ${ gap }` })/${ options.perPage || 1 }${ gap && ` - ${ gap }` })`;\r\n }\r\n\r\n /**\r\n * Returns the list width for the horizontal slider, or the height for the vertical slider.\r\n *\r\n * @return The size of the list element in pixel.\r\n */\r\n function listSize(): number {\r\n return rect( list )[ resolve( 'width' ) ];\r\n }\r\n\r\n /**\r\n * Returns the slide width for the horizontal slider, or the height for the vertical slider.\r\n *\r\n * @param index - Optional. A slide index.\r\n * @param withoutGap - Optional. Determines whether to exclude the gap amount or not.\r\n *\r\n * @return The size of the specified slide element in pixel.\r\n */\r\n function slideSize( index?: number, withoutGap?: boolean ): number {\r\n const Slide = getAt( index || 0 );\r\n return Slide\r\n ? rect( Slide.slide )[ resolve( 'width' ) ] + ( withoutGap ? 0 : getGap() )\r\n : 0;\r\n }\r\n\r\n /**\r\n * Returns the total width or height of slides from the head of the slider to the specified index.\r\n * This includes sizes of clones before the first slide.\r\n *\r\n * @param index - A slide index. If omitted, uses the last index.\r\n * @param withoutGap - Optional. Determines whether to exclude the last gap or not.\r\n *\r\n * @return The total width of slides in the horizontal slider, or the height in the vertical one.\r\n */\r\n function totalSize( index: number, withoutGap?: boolean ): number {\r\n const Slide = getAt( index );\r\n\r\n if ( Slide ) {\r\n const right = rect( Slide.slide )[ resolve( 'right' ) ];\r\n const left = rect( list )[ resolve( 'left' ) ];\r\n return abs( right - left ) + ( withoutGap ? 0 : getGap() );\r\n }\r\n\r\n return 0;\r\n }\r\n\r\n /**\r\n * Returns the slider size without clones before the first slide.\r\n * Do not use the clone's size because it's unstable while initializing and refreshing process.\r\n *\r\n * @param withoutGap - Optional. Determines whether to exclude the last gap or not.\r\n *\r\n * @return The width or height of the slider without clones.\r\n */\r\n function sliderSize( withoutGap?: boolean ): number {\r\n return totalSize( Splide.length - 1 ) - totalSize( 0 ) + slideSize( 0, withoutGap );\r\n }\r\n\r\n /**\r\n * Returns the gap value in pixel by using the computed style of the first slide.\r\n *\r\n * @return The gap value in pixel.\r\n */\r\n function getGap(): number {\r\n const Slide = getAt( 0 );\r\n return Slide && parseFloat( style( Slide.slide, resolve( 'marginRight' ) ) ) || 0;\r\n }\r\n\r\n /**\r\n * Returns the padding value.\r\n * This method resolves the difference of the direction.\r\n *\r\n * @param right - Determines whether to get `paddingRight/Bottom` or `paddingLeft/Top`.\r\n *\r\n * @return The padding value in pixel.\r\n */\r\n function getPadding( right: boolean ): number {\r\n return parseFloat( style( track, resolve( `padding${ right ? 'Right' : 'Left' }` ) ) ) || 0;\r\n }\r\n\r\n /**\r\n * Checks if the carousel is wider than the list.\r\n * This method always returns `true` for a fade carousel.\r\n *\r\n * @return `true` if the carousel is wider than the list, or otherwise `false`.\r\n */\r\n function isOverflow(): boolean {\r\n return Splide.is( FADE ) || sliderSize( true ) > listSize();\r\n }\r\n\r\n return {\r\n mount,\r\n resize,\r\n listSize,\r\n slideSize,\r\n sliderSize,\r\n totalSize,\r\n getPadding,\r\n isOverflow,\r\n };\r\n}\r\n","import { AnyFunction } from '../../types';\r\nimport { RequestInterval } from '../RequestInterval/RequestInterval';\r\n\r\n\r\n/**\r\n * The interface for the returning value of the RequestInterval.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface ThrottleInstance extends Function {\r\n ( ...args: Parameters ): void;\r\n}\r\n\r\n/**\r\n * Returns the throttled function.\r\n *\r\n * @param func - A function to throttle.\r\n * @param duration - Optional. Throttle duration in milliseconds.\r\n *\r\n * @return A throttled function.\r\n */\r\nexport function Throttle(\r\n func: F,\r\n duration?: number\r\n): ThrottleInstance {\r\n const interval = RequestInterval( duration || 0, func, null, 1 );\r\n\r\n return () => {\r\n interval.isPaused() && interval.start();\r\n };\r\n}\r\n","import { EVENT_REFRESH, EVENT_RESIZE, EVENT_UPDATED } from '../../constants/events';\r\nimport { LOOP } from '../../constants/types';\r\nimport { EventInterface } from '../../constructors';\r\nimport { Splide } from '../../core/Splide/Splide';\r\nimport { BaseComponent, Components, Options } from '../../types';\r\nimport { addClass, append, before, ceil, empty, isUndefined, pad, push, rect, remove } from '../../utils';\r\n\r\n\r\n/**\r\n * The interface for the Clone component.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface ClonesComponent extends BaseComponent {\r\n}\r\n\r\n/**\r\n * The multiplier to determine the number of clones.\r\n *\r\n * @since 4.0.0\r\n */\r\nexport const MULTIPLIER = 2;\r\n\r\n/**\r\n * The component that generates clones for the loop slider.\r\n *\r\n * @since 3.0.0\r\n *\r\n * @param Splide - A Splide instance.\r\n * @param Components - A collection of components.\r\n * @param options - Options.\r\n *\r\n * @return A Clones component object.\r\n */\r\nexport function Clones( Splide: Splide, Components: Components, options: Options ): ClonesComponent {\r\n const event = EventInterface( Splide );\r\n const { on } = event;\r\n const { Elements, Slides } = Components;\r\n const { resolve } = Components.Direction;\r\n\r\n /**\r\n * Stores all cloned elements.\r\n */\r\n const clones: HTMLElement[] = [];\r\n\r\n /**\r\n * Keeps the current number of clones.\r\n */\r\n let cloneCount: number;\r\n\r\n /**\r\n * Called when the component is mounted.\r\n * Needs to remount the component on refresh, otherwise `refresh` event will be triggered again while refreshing.\r\n */\r\n function mount(): void {\r\n on( EVENT_REFRESH, remount );\r\n on( [ EVENT_UPDATED, EVENT_RESIZE ], observe );\r\n\r\n if ( ( cloneCount = computeCloneCount() ) ) {\r\n generate( cloneCount );\r\n Components.Layout.resize( true );\r\n }\r\n }\r\n\r\n /**\r\n * Remounts the component.\r\n */\r\n function remount(): void {\r\n destroy();\r\n mount();\r\n }\r\n\r\n /**\r\n * Destroys clones.\r\n */\r\n function destroy(): void {\r\n remove( clones );\r\n empty( clones );\r\n event.destroy();\r\n }\r\n\r\n /**\r\n * Observes the required clone count and refreshes the slider if necessary.\r\n */\r\n function observe(): void {\r\n const count = computeCloneCount();\r\n\r\n if ( cloneCount !== count ) {\r\n if ( cloneCount < count || ! count ) {\r\n event.emit( EVENT_REFRESH );\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Generates the specified number of clones.\r\n *\r\n * @param count - The number of clones to generate for each side.\r\n */\r\n function generate( count: number ): void {\r\n const slides = Slides.get().slice();\r\n const { length } = slides;\r\n\r\n if ( length ) {\r\n while ( slides.length < count ) {\r\n push( slides, slides );\r\n }\r\n\r\n push( slides.slice( -count ), slides.slice( 0, count ) ).forEach( ( Slide, index ) => {\r\n const isHead = index < count;\r\n const clone = cloneDeep( Slide.slide, index );\r\n isHead ? before( clone, slides[ 0 ].slide ) : append( Elements.list, clone );\r\n push( clones, clone );\r\n Slides.register( clone, index - count + ( isHead ? 0 : length ), Slide.index );\r\n } );\r\n }\r\n }\r\n\r\n /**\r\n * Deeply clones the provided element with removing the ID attribute.\r\n *\r\n * @param elm - An element to clone.\r\n * @param index - An index of the clone.\r\n *\r\n * @return A cloned element.\r\n */\r\n function cloneDeep( elm: HTMLElement, index: number ): HTMLElement {\r\n const clone = elm.cloneNode( true ) as HTMLElement;\r\n addClass( clone, options.classes.clone );\r\n clone.id = `${ Splide.root.id }-clone${ pad( index + 1 ) }`;\r\n return clone;\r\n }\r\n\r\n /**\r\n * Returns the number of elements to generate.\r\n * This always returns 0 if the slider type is not `'loop'`.\r\n *\r\n * @return The number of clones.\r\n */\r\n function computeCloneCount(): number {\r\n let { clones } = options;\r\n\r\n if ( ! Splide.is( LOOP ) ) {\r\n clones = 0;\r\n } else if ( isUndefined( clones ) ) {\r\n const fixedSize = options[ resolve( 'fixedWidth' ) ] && Components.Layout.slideSize( 0 );\r\n const fixedCount = fixedSize && ceil( rect( Elements.track )[ resolve( 'width' ) ] / fixedSize );\r\n clones = fixedCount || ( options[ resolve( 'autoWidth' ) ] && Splide.length ) || options.perPage * MULTIPLIER;\r\n }\r\n\r\n return clones;\r\n }\r\n\r\n return {\r\n mount,\r\n destroy,\r\n };\r\n}\r\n","import {\r\n EVENT_MOUNTED,\r\n EVENT_MOVE,\r\n EVENT_MOVED,\r\n EVENT_REFRESH,\r\n EVENT_RESIZED,\r\n EVENT_SHIFTED,\r\n EVENT_UPDATED,\r\n} from '../../constants/events';\r\nimport { IDLE, MOVING } from '../../constants/states';\r\nimport { FADE, LOOP, SLIDE } from '../../constants/types';\r\nimport { EventInterface } from '../../constructors';\r\nimport { Splide } from '../../core/Splide/Splide';\r\nimport { AnyFunction, BaseComponent, Components, Options, TransitionComponent } from '../../types';\r\nimport { abs, ceil, clamp, isUndefined, rect, style } from '../../utils';\r\n\r\n\r\n/**\r\n * The interface for the Move component.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface MoveComponent extends BaseComponent {\r\n move( dest: number, index: number, prev: number, callback?: AnyFunction ): void;\r\n jump( index: number ): void;\r\n translate( position: number, preventLoop?: boolean ): void;\r\n shift( position: number, backwards: boolean ): number;\r\n cancel(): void;\r\n toIndex( position: number ): number;\r\n toPosition( index: number, trimming?: boolean ): number;\r\n getPosition(): number;\r\n getLimit( max: boolean ): number;\r\n exceededLimit( max?: boolean | undefined, position?: number ): boolean;\r\n\r\n /** @internal */\r\n reposition(): void;\r\n}\r\n\r\n/**\r\n * The component for moving the slider.\r\n *\r\n * @since 3.0.0\r\n *\r\n * @param Splide - A Splide instance.\r\n * @param Components - A collection of components.\r\n * @param options - Options.\r\n *\r\n * @return A Move component object.\r\n */\r\nexport function Move( Splide: Splide, Components: Components, options: Options ): MoveComponent {\r\n const { on, emit } = EventInterface( Splide );\r\n const { set } = Splide.state;\r\n const { slideSize, getPadding, totalSize, listSize, sliderSize } = Components.Layout;\r\n const { resolve, orient } = Components.Direction;\r\n const { list, track } = Components.Elements;\r\n\r\n /**\r\n * Holds the Transition component.\r\n */\r\n let Transition: TransitionComponent;\r\n\r\n /**\r\n * Called when the component is mounted.\r\n */\r\n function mount(): void {\r\n Transition = Components.Transition;\r\n on( [ EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH ], reposition );\r\n }\r\n\r\n /**\r\n * Repositions the slider.\r\n * - Do not call `cancel()` here because LazyLoad may emit resize while transitioning.\r\n * - iOS Safari emits window resize event while the user swipes the slider because of the bottom bar.\r\n */\r\n function reposition(): void {\r\n if ( ! Components.Controller.isBusy() ) {\r\n Components.Scroll.cancel();\r\n jump( Splide.index );\r\n Components.Slides.update();\r\n }\r\n }\r\n\r\n /**\r\n * Moves the slider to the dest index with the Transition component.\r\n *\r\n * @param dest - A destination index to go to, including clones'.\r\n * @param index - A slide index.\r\n * @param prev - A previous index.\r\n * @param callback - Optional. A callback function invoked after transition ends.\r\n */\r\n function move( dest: number, index: number, prev: number, callback?: AnyFunction ): void {\r\n if ( dest !== index && canShift( dest > prev ) ) {\r\n cancel();\r\n translate( shift( getPosition(), dest > prev ), true );\r\n }\r\n\r\n set( MOVING );\r\n emit( EVENT_MOVE, index, prev, dest );\r\n\r\n Transition.start( index, () => {\r\n set( IDLE );\r\n emit( EVENT_MOVED, index, prev, dest );\r\n callback && callback();\r\n } );\r\n }\r\n\r\n /**\r\n * Jumps to the slide at the specified index.\r\n *\r\n * @param index - An index to jump to.\r\n */\r\n function jump( index: number ): void {\r\n translate( toPosition( index, true ) );\r\n }\r\n\r\n /**\r\n * Moves the slider to the provided position.\r\n *\r\n * @param position - The position to move to.\r\n * @param preventLoop - Optional. If `true`, sets the provided position as is.\r\n */\r\n function translate( position: number, preventLoop?: boolean ): void {\r\n if ( ! Splide.is( FADE ) ) {\r\n const destination = preventLoop ? position : loop( position );\r\n style( list, 'transform', `translate${ resolve( 'X' ) }(${ destination }px)` );\r\n position !== destination && emit( EVENT_SHIFTED );\r\n }\r\n }\r\n\r\n /**\r\n * Loops the provided position if it exceeds bounds (limit indices).\r\n *\r\n * @param position - A position to loop.\r\n */\r\n function loop( position: number ): number {\r\n if ( Splide.is( LOOP ) ) {\r\n const index = toIndex( position );\r\n const exceededMax = index > Components.Controller.getEnd();\r\n const exceededMin = index < 0;\r\n\r\n if ( exceededMin || exceededMax ) {\r\n position = shift( position, exceededMax );\r\n }\r\n }\r\n\r\n return position;\r\n }\r\n\r\n /**\r\n * Adds or subtracts the slider width to the provided position.\r\n *\r\n * @param position - A position to shift.\r\n * @param backwards - Determines whether to shift the slider backwards or forwards.\r\n *\r\n * @return The shifted position.\r\n */\r\n function shift( position: number, backwards: boolean ): number {\r\n const excess = position - getLimit( backwards );\r\n const size = sliderSize();\r\n position -= orient( size * ( ceil( abs( excess ) / size ) || 1 ) ) * ( backwards ? 1 : -1 );\r\n return position;\r\n }\r\n\r\n /**\r\n * Cancels transition.\r\n */\r\n function cancel(): void {\r\n translate( getPosition(), true );\r\n Transition.cancel();\r\n }\r\n\r\n /**\r\n * Returns the closest index to the position.\r\n *\r\n * @param position - A position to convert.\r\n *\r\n * @return The closest index to the position.\r\n */\r\n function toIndex( position: number ): number {\r\n const Slides = Components.Slides.get();\r\n\r\n let index = 0;\r\n let minDistance = Infinity;\r\n\r\n for ( let i = 0; i < Slides.length; i++ ) {\r\n const slideIndex = Slides[ i ].index;\r\n const distance = abs( toPosition( slideIndex, true ) - position );\r\n\r\n if ( distance <= minDistance ) {\r\n minDistance = distance;\r\n index = slideIndex;\r\n } else {\r\n break;\r\n }\r\n }\r\n\r\n return index;\r\n }\r\n\r\n /**\r\n * Converts the slide index to the position.\r\n *\r\n * @param index - An index to convert.\r\n * @param trimming - Optional. Whether to trim edge spaces or not.\r\n *\r\n * @return The position corresponding with the index.\r\n */\r\n function toPosition( index: number, trimming?: boolean ): number {\r\n const position = orient( totalSize( index - 1 ) - offset( index ) );\r\n return trimming ? trim( position ) : position;\r\n }\r\n\r\n /**\r\n * Returns the current position.\r\n *\r\n * @return The position of the list element.\r\n */\r\n function getPosition(): number {\r\n const left = resolve( 'left' );\r\n return rect( list )[ left ] - rect( track )[ left ] + orient( getPadding( false ) );\r\n }\r\n\r\n /**\r\n * Trims spaces on the edge of the slider.\r\n *\r\n * @param position - A position to trim.\r\n *\r\n * @return A trimmed position.\r\n */\r\n function trim( position: number ): number {\r\n if ( options.trimSpace && Splide.is( SLIDE ) ) {\r\n position = clamp( position, 0, orient( sliderSize( true ) - listSize() ) );\r\n }\r\n\r\n return position;\r\n }\r\n\r\n /**\r\n * Returns the offset amount.\r\n *\r\n * @param index - An index.\r\n */\r\n function offset( index: number ): number {\r\n const { focus } = options;\r\n return focus === 'center' ? ( listSize() - slideSize( index, true ) ) / 2 : +focus * slideSize( index ) || 0;\r\n }\r\n\r\n /**\r\n * Returns the limit number that the slider can move to.\r\n *\r\n * @param max - Determines whether to return the maximum or minimum limit.\r\n *\r\n * @return The border number.\r\n */\r\n function getLimit( max: boolean ): number {\r\n return toPosition( max ? Components.Controller.getEnd() : 0, !! options.trimSpace );\r\n }\r\n\r\n /**\r\n * Checks if there is enough width to shift the slider.\r\n *\r\n * @param backwards - `true` for checking backwards, or `false` for doing forwards.\r\n *\r\n * @return `true` if the slider can be shifted for the specified direction, or otherwise `false`.\r\n */\r\n function canShift( backwards: boolean ): boolean {\r\n const shifted = orient( shift( getPosition(), backwards ) );\r\n return backwards\r\n ? shifted >= 0\r\n : shifted <= list[ resolve( 'scrollWidth' ) ] - rect( track )[ resolve( 'width' ) ];\r\n }\r\n\r\n /**\r\n * Checks if the provided position exceeds the minimum or maximum limit or not.\r\n *\r\n * @param max - Optional. `true` for testing max, `false` for min, and `undefined` for both.\r\n * @param position - Optional. A position to test. If omitted, tests the current position.\r\n *\r\n * @return `true` if the position exceeds the limit, or otherwise `false`.\r\n */\r\n function exceededLimit( max?: boolean | undefined, position?: number ): boolean {\r\n position = isUndefined( position ) ? getPosition() : position;\r\n const exceededMin = max !== true && orient( position ) < orient( getLimit( false ) );\r\n const exceededMax = max !== false && orient( position ) > orient( getLimit( true ) );\r\n return exceededMin || exceededMax;\r\n }\r\n\r\n return {\r\n mount,\r\n move,\r\n jump,\r\n translate,\r\n shift,\r\n cancel,\r\n toIndex,\r\n toPosition,\r\n getPosition,\r\n getLimit,\r\n exceededLimit,\r\n reposition,\r\n };\r\n}\r\n","import { EVENT_END_INDEX_CHANGED, EVENT_REFRESH, EVENT_RESIZED, EVENT_UPDATED } from '../../constants/events';\r\nimport { MOVING, SCROLLING } from '../../constants/states';\r\nimport { LOOP, SLIDE } from '../../constants/types';\r\nimport { EventInterface } from '../../constructors';\r\nimport { Splide } from '../../core/Splide/Splide';\r\nimport { AnyFunction, BaseComponent, Components, Options } from '../../types';\r\nimport { apply, approximatelyEqual, between, clamp, floor, isString, isUndefined, min } from '../../utils';\r\n\r\n\r\n/**\r\n * The interface for the Controller component.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface ControllerComponent extends BaseComponent {\r\n go( control: number | string, allowSameIndex?: boolean, callback?: AnyFunction ): void;\r\n scroll( destination: number, duration?: number, snap?: boolean, callback?: AnyFunction ): void;\r\n getNext( destination?: boolean ): number;\r\n getPrev( destination?: boolean ): number;\r\n getEnd(): number;\r\n setIndex( index: number ): void;\r\n getIndex( prev?: boolean ): number;\r\n toIndex( page: number ): number;\r\n toPage( index: number ): number;\r\n toDest( position: number ): number;\r\n hasFocus(): boolean;\r\n isBusy(): boolean;\r\n\r\n /** @internal */\r\n getAdjacent( prev: boolean, destination?: boolean ): number;\r\n}\r\n\r\n/**\r\n * The component for controlling the slider.\r\n *\r\n * @since 3.0.0\r\n *\r\n * @param Splide - A Splide instance.\r\n * @param Components - A collection of components.\r\n * @param options - Options.\r\n *\r\n * @return A Controller component object.\r\n */\r\nexport function Controller( Splide: Splide, Components: Components, options: Options ): ControllerComponent {\r\n const { on, emit } = EventInterface( Splide );\r\n const { Move } = Components;\r\n const { getPosition, getLimit, toPosition } = Move;\r\n const { isEnough, getLength } = Components.Slides;\r\n const { omitEnd } = options;\r\n const isLoop = Splide.is( LOOP );\r\n const isSlide = Splide.is( SLIDE );\r\n const getNext = apply( getAdjacent, false );\r\n const getPrev = apply( getAdjacent, true );\r\n\r\n /**\r\n * The current index.\r\n */\r\n let currIndex = options.start || 0;\r\n\r\n /**\r\n * The latest end index.\r\n */\r\n let endIndex: number;\r\n\r\n /**\r\n * The previous index.\r\n */\r\n let prevIndex = currIndex;\r\n\r\n /**\r\n * The latest number of slides.\r\n */\r\n let slideCount: number;\r\n\r\n /**\r\n * The latest `perMove` value.\r\n */\r\n let perMove: number;\r\n\r\n /**\r\n * The latest `perMove` value.\r\n */\r\n let perPage: number;\r\n\r\n /**\r\n * Called when the component is mounted.\r\n */\r\n function mount(): void {\r\n init();\r\n on( [ EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED ], init );\r\n on( EVENT_RESIZED, onResized );\r\n }\r\n\r\n /**\r\n * Initializes some parameters.\r\n * Needs to check the number of slides since the current index may be out of the range after refresh.\r\n * The process order must be Elements -> Controller -> Move.\r\n */\r\n function init(): void {\r\n slideCount = getLength( true );\r\n perMove = options.perMove;\r\n perPage = options.perPage;\r\n endIndex = getEnd();\r\n\r\n const index = clamp( currIndex, 0, omitEnd ? endIndex : slideCount - 1 );\r\n\r\n if ( index !== currIndex ) {\r\n currIndex = index;\r\n Move.reposition();\r\n }\r\n }\r\n\r\n /**\r\n * Called when the viewport width is changed.\r\n * The end index can change if `autoWidth` or `fixedWidth` is enabled.\r\n */\r\n function onResized(): void {\r\n if ( endIndex !== getEnd() ) {\r\n emit( EVENT_END_INDEX_CHANGED );\r\n }\r\n }\r\n\r\n /**\r\n * Moves the slider by the control pattern.\r\n *\r\n * @see `Splide#go()`\r\n *\r\n * @param control - A control pattern.\r\n * @param allowSameIndex - Optional. Determines whether to allow to go to the current index or not.\r\n * @param callback - Optional. A callback function invoked after transition ends.\r\n */\r\n function go( control: number | string, allowSameIndex?: boolean, callback?: AnyFunction ): void {\r\n if ( ! isBusy() ) {\r\n const dest = parse( control );\r\n const index = loop( dest );\r\n\r\n if ( index > -1 && ( allowSameIndex || index !== currIndex ) ) {\r\n setIndex( index );\r\n Move.move( dest, index, prevIndex, callback );\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Scrolls the slider to the specified destination with updating indices.\r\n *\r\n * @param destination - The position to scroll the slider to.\r\n * @param duration - Optional. Specifies the scroll duration.\r\n * @param snap - Optional. Whether to snap the slider to the closest slide or not.\r\n * @param callback - Optional. A callback function invoked after scroll ends.\r\n */\r\n function scroll( destination: number, duration?: number, snap?: boolean, callback?: AnyFunction ): void {\r\n Components.Scroll.scroll( destination, duration, snap, () => {\r\n const index = loop( Move.toIndex( getPosition() ) );\r\n setIndex( omitEnd ? min( index, endIndex ) : index );\r\n callback && callback();\r\n } );\r\n }\r\n\r\n /**\r\n * Parses the control and returns a slide index.\r\n *\r\n * @param control - A control pattern to parse.\r\n *\r\n * @return A `dest` index.\r\n */\r\n function parse( control: number | string ): number {\r\n let index = currIndex;\r\n\r\n if ( isString( control ) ) {\r\n const [ , indicator, number ] = control.match( /([+\\-<>])(\\d+)?/ ) || [];\r\n\r\n if ( indicator === '+' || indicator === '-' ) {\r\n index = computeDestIndex( currIndex + +`${ indicator }${ +number || 1 }`, currIndex );\r\n } else if ( indicator === '>' ) {\r\n index = number ? toIndex( +number ) : getNext( true );\r\n } else if ( indicator === '<' ) {\r\n index = getPrev( true );\r\n }\r\n } else {\r\n index = isLoop ? control : clamp( control, 0, endIndex );\r\n }\r\n\r\n return index;\r\n }\r\n\r\n /**\r\n * Returns an adjacent destination index.\r\n *\r\n * @internal\r\n *\r\n * @param prev - Determines whether to return a previous or next index.\r\n * @param destination - Optional. Determines whether to get a destination index or a slide one.\r\n *\r\n * @return An adjacent index if available, or otherwise `-1`.\r\n */\r\n function getAdjacent( prev: boolean, destination?: boolean ): number {\r\n const number = perMove || ( hasFocus() ? 1 : perPage );\r\n const dest = computeDestIndex( currIndex + number * ( prev ? -1 : 1 ), currIndex, ! ( perMove || hasFocus() ) );\r\n\r\n if ( dest === -1 && isSlide ) {\r\n if ( ! approximatelyEqual( getPosition(), getLimit( ! prev ), 1 ) ) {\r\n return prev ? 0 : endIndex;\r\n }\r\n }\r\n\r\n return destination ? dest : loop( dest );\r\n }\r\n\r\n /**\r\n * Converts the desired destination index to the valid one.\r\n * - If the `move` option is `true`, finds the dest index whose position is different with the current one.\r\n * - This may return clone indices if the editor is the loop mode,\r\n * or `-1` if there is no slide to go.\r\n * - There are still slides where the carousel can go if borders are between `from` and `dest`.\r\n * - If `focus` is available, needs to calculate the dest index even if there are enough number of slides.\r\n *\r\n * @param dest - The desired destination index.\r\n * @param from - A base index.\r\n * @param snapPage - Optional. Whether to snap a page or not.\r\n *\r\n * @return A converted destination index, including clones.\r\n */\r\n function computeDestIndex( dest: number, from: number, snapPage?: boolean ): number {\r\n if ( isEnough() || hasFocus() ) {\r\n const index = computeMovableDestIndex( dest );\r\n\r\n if ( index !== dest ) {\r\n from = dest;\r\n dest = index;\r\n snapPage = false;\r\n }\r\n\r\n if ( dest < 0 || dest > endIndex ) {\r\n if ( ! perMove && ( between( 0, dest, from, true ) || between( endIndex, from, dest, true ) ) ) {\r\n dest = toIndex( toPage( dest ) );\r\n } else {\r\n if ( isLoop ) {\r\n dest = snapPage\r\n ? dest < 0 ? - ( slideCount % perPage || perPage ) : slideCount\r\n : dest;\r\n } else if ( options.rewind ) {\r\n dest = dest < 0 ? endIndex : 0;\r\n } else {\r\n dest = -1;\r\n }\r\n }\r\n } else {\r\n if ( snapPage && dest !== from ) {\r\n dest = toIndex( toPage( from ) + ( dest < from ? -1 : 1 ) );\r\n }\r\n }\r\n } else {\r\n dest = -1;\r\n }\r\n\r\n return dest;\r\n }\r\n\r\n /**\r\n * Finds the dest index whose position is different with the current one for `trimSpace: 'move'`.\r\n * This can be negative or greater than `length - 1`.\r\n *\r\n * @param dest - A dest index.\r\n *\r\n * @return A dest index.\r\n */\r\n function computeMovableDestIndex( dest: number ): number {\r\n if ( isSlide && options.trimSpace === 'move' && dest !== currIndex ) {\r\n const position = getPosition();\r\n\r\n while ( position === toPosition( dest, true ) && between( dest, 0, Splide.length - 1, ! options.rewind ) ) {\r\n dest < currIndex ? --dest : ++dest;\r\n }\r\n }\r\n\r\n return dest;\r\n }\r\n\r\n /**\r\n * Loops the provided index only in the loop mode.\r\n *\r\n * @param index - An index to loop.\r\n *\r\n * @return A looped index.\r\n */\r\n function loop( index: number ): number {\r\n return isLoop ? ( index + slideCount ) % slideCount || 0 : index;\r\n }\r\n\r\n /**\r\n * Returns the end index where the slider can go.\r\n * For example, if the slider has 10 slides and the `perPage` option is 3,\r\n * the slider can go to the slide 8 (the index is 7).\r\n * If the `omitEnd` option is available, computes the index from the slide position.\r\n *\r\n * @return An end index.\r\n */\r\n function getEnd(): number {\r\n let end = slideCount - ( hasFocus() || ( isLoop && perMove ) ? 1 : perPage );\r\n\r\n while ( omitEnd && end-- > 0 ) {\r\n if ( toPosition( slideCount - 1, true ) !== toPosition( end, true ) ) {\r\n end++;\r\n break;\r\n }\r\n }\r\n\r\n return clamp( end, 0, slideCount - 1 );\r\n }\r\n\r\n /**\r\n * Converts the page index to the slide index.\r\n *\r\n * @param page - A page index to convert.\r\n *\r\n * @return A slide index.\r\n */\r\n function toIndex( page: number ): number {\r\n return clamp( hasFocus() ? page : perPage * page, 0, endIndex );\r\n }\r\n\r\n /**\r\n * Converts the slide index to the page index.\r\n *\r\n * @param index - An index to convert.\r\n *\r\n * @return A page index.\r\n */\r\n function toPage( index: number ): number {\r\n return hasFocus()\r\n ? min( index, endIndex )\r\n : floor( ( index >= endIndex ? slideCount - 1 : index ) / perPage );\r\n }\r\n\r\n /**\r\n * Converts the destination position to the dest index.\r\n *\r\n * @param destination - A position to convert.\r\n *\r\n * @return A dest index.\r\n */\r\n function toDest( destination: number ): number {\r\n const closest = Move.toIndex( destination );\r\n return isSlide ? clamp( closest, 0, endIndex ) : closest;\r\n }\r\n\r\n /**\r\n * Sets a new index and retains old one.\r\n *\r\n * @param index - A new index to set.\r\n */\r\n function setIndex( index: number ): void {\r\n if ( index !== currIndex ) {\r\n prevIndex = currIndex;\r\n currIndex = index;\r\n }\r\n }\r\n\r\n /**\r\n * Returns the current/previous index.\r\n *\r\n * @param prev - Optional. Whether to return previous index or not.\r\n */\r\n function getIndex( prev?: boolean ): number {\r\n return prev ? prevIndex : currIndex;\r\n }\r\n\r\n /**\r\n * Verifies if the focus option is available or not.\r\n *\r\n * @return `true` if the slider has the focus option.\r\n */\r\n function hasFocus(): boolean {\r\n return ! isUndefined( options.focus ) || options.isNavigation;\r\n }\r\n\r\n /**\r\n * Checks if the slider is moving/scrolling or not.\r\n *\r\n * @return `true` if the slider can move, or otherwise `false`.\r\n */\r\n function isBusy(): boolean {\r\n return Splide.state.is( [ MOVING, SCROLLING ] ) && !! options.waitForTransition;\r\n }\r\n\r\n return {\r\n mount,\r\n go,\r\n scroll,\r\n getNext,\r\n getPrev,\r\n getAdjacent,\r\n getEnd,\r\n setIndex,\r\n getIndex,\r\n toIndex,\r\n toPage,\r\n toDest,\r\n hasFocus,\r\n isBusy,\r\n };\r\n}\r\n","import { ALL_ATTRIBUTES, ARIA_CONTROLS, ARIA_LABEL } from '../../constants/attributes';\r\nimport { CLASS_ARROWS } from '../../constants/classes';\r\nimport {\r\n EVENT_ARROWS_MOUNTED,\r\n EVENT_ARROWS_UPDATED,\r\n EVENT_END_INDEX_CHANGED,\r\n EVENT_MOUNTED,\r\n EVENT_MOVED,\r\n EVENT_REFRESH,\r\n EVENT_SCROLLED,\r\n EVENT_UPDATED,\r\n} from '../../constants/events';\r\nimport { EventInterface } from '../../constructors';\r\nimport { Splide } from '../../core/Splide/Splide';\r\nimport { BaseComponent, Components, Options } from '../../types';\r\nimport {\r\n addClass,\r\n append,\r\n apply,\r\n assign,\r\n before,\r\n create,\r\n display,\r\n parseHtml,\r\n remove,\r\n removeAttribute,\r\n removeClass,\r\n setAttribute,\r\n} from '../../utils';\r\nimport { PATH, SIZE, XML_NAME_SPACE } from './path';\r\n\r\n\r\n/**\r\n * The interface for the Arrows component.\r\n *\r\n * @since 3.0.0\r\n */\r\nexport interface ArrowsComponent extends BaseComponent {\r\n arrows: { prev?: HTMLButtonElement, next?: HTMLButtonElement };\r\n\r\n /** @internal */\r\n update(): void;\r\n}\r\n\r\n/**\r\n * The component for handling previous and next arrows.\r\n *\r\n * @since 3.0.0\r\n *\r\n * @param Splide - A Splide instance.\r\n * @param Components - A collection of components.\r\n * @param options - Options.\r\n *\r\n * @return An Arrows component object.\r\n */\r\nexport function Arrows( Splide: Splide, Components: Components, options: Options ): ArrowsComponent {\r\n const event = EventInterface( Splide );\r\n const { on, bind, emit } = event;\r\n const { classes, i18n } = options;\r\n const { Elements, Controller } = Components;\r\n const { arrows: placeholder, track } = Elements;\r\n\r\n /**\r\n * The wrapper element.\r\n */\r\n let wrapper = placeholder;\r\n\r\n /**\r\n * The previous arrow element.\r\n */\r\n let prev = Elements.prev;\r\n\r\n /**\r\n * The next arrow element.\r\n */\r\n let next = Elements.next;\r\n\r\n /**\r\n * Indicates whether the component creates arrows or retrieved from the DOM.\r\n */\r\n let created: boolean;\r\n\r\n /**\r\n * Holds modifier classes.\r\n */\r\n let wrapperClasses: string;\r\n\r\n /**\r\n * An object with previous and next arrows.\r\n */\r\n const arrows: ArrowsComponent[ 'arrows' ] = {};\r\n\r\n /**\r\n * Called when the component is mounted.\r\n */\r\n function mount(): void {\r\n init();\r\n on( EVENT_UPDATED, remount );\r\n }\r\n\r\n /**\r\n * Remounts the component.\r\n */\r\n function remount(): void {\r\n destroy();\r\n mount();\r\n }\r\n\r\n /**\r\n * Initializes the component.\r\n */\r\n function init(): void {\r\n const enabled = options.arrows;\r\n\r\n if ( enabled && ! ( prev && next ) ) {\r\n createArrows();\r\n }\r\n\r\n if ( prev && next ) {\r\n assign( arrows, { prev, next } );\r\n display( wrapper, enabled ? '' : 'none' );\r\n addClass( wrapper, ( wrapperClasses = `${ CLASS_ARROWS }--${ options.direction }` ) );\r\n\r\n if ( enabled ) {\r\n listen();\r\n update();\r\n setAttribute( [ prev, next ], ARIA_CONTROLS, track.id );\r\n emit( EVENT_ARROWS_MOUNTED, prev, next );\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Destroys the component.\r\n */\r\n function destroy(): void {\r\n event.destroy();\r\n removeClass( wrapper, wrapperClasses );\r\n\r\n if ( created ) {\r\n remove( placeholder ? [ prev, next ] : wrapper );\r\n prev = next = null;\r\n } else {\r\n removeAttribute( [ prev, next ], ALL_ATTRIBUTES );\r\n }\r\n }\r\n\r\n /**\r\n * Listens to some events.\r\n */\r\n function listen(): void {\r\n on( [ EVENT_MOUNTED, EVENT_MOVED, EVENT_REFRESH, EVENT_SCROLLED, EVENT_END_INDEX_CHANGED ], update );\r\n bind( next, 'click', apply( go, '>' ) );\r\n bind( prev, 'click', apply( go, '<' ) );\r\n }\r\n\r\n /**\r\n * The wrapper function of Controller#go().\r\n *\r\n * @param control - The control pattern.\r\n */\r\n function go( control: string ): void {\r\n Controller.go( control, true );\r\n }\r\n\r\n /**\r\n * Create arrows and append them to the slider.\r\n */\r\n function createArrows(): void {\r\n wrapper = placeholder || create( 'div', classes.arrows );\r\n prev = createArrow( true );\r\n next = createArrow( false );\r\n created = true;\r\n\r\n append( wrapper, [ prev, next ] );\r\n ! placeholder && before( wrapper, track );\r\n }\r\n\r\n /**\r\n * Creates an arrow button.\r\n * In IE, A SVG element is focusable.\r\n *\r\n * @param prev - Determines whether to create a previous or next arrow.\r\n *\r\n * @return A created button element.\r\n */\r\n function createArrow( prev: boolean ): HTMLButtonElement {\r\n const arrow = `