\r\n \r\n 01Home\r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n 02Destination\r\n \r\n
\r\n \r\n \r\n\r\n \r\n \r\n 03Crews\r\n \r\n
\r\n \r\n \r\n\r\n \r\n \r\n 04Technology\r\n \r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default HeaderMenuItems;\r\n","import React from \"react\";\r\nimport { useState } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\n\r\nimport HeaderMenuItems from \"../header-menu-item/header-menu-item.component\";\r\n\r\nimport { ReactComponent as Logo } from \"../../assets/shared/logo.svg\";\r\n\r\nimport \"./header.styles.scss\";\r\n\r\nconst Header = () => {\r\n const [hidden, setHidden] = useState(true);\r\n const toggleHidden = () => {\r\n setHidden(!hidden);\r\n };\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n);\r\n\r\nexport default Home;\r\n","import React from \"react\";\r\n\r\nimport Home from \"../../component/home/home.component\";\r\n\r\nimport \"./home.page.styles.scss\";\r\n\r\nconst HomePage = () => {\r\n return (\r\n \r\n
\r\n\r\n \r\n Explore\r\n \r\n \r\n So, you want to travel to
\r\nSpace
\r\n\r\n Let’s face it; if you want to go to space, you might as well genuinely\r\n go to outer space and not hover kind of on the edge of it. Well sit\r\n back, and relax because we’ll give you a truly out of this world\r\n experience!\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default HomePage;\r\n","import React from \"react\";\r\n\r\nimport \"./dest-nav-item.styles.scss\";\r\n\r\nconst DestinationNavItems = ({ filter, setFilter }) => {\r\n const handleMoon = () => {\r\n setFilter(\"Moon\");\r\n };\r\n const handleMars = () => {\r\n setFilter(\"Mars\");\r\n };\r\n const handleEuropa = () => {\r\n setFilter(\"Europa\");\r\n };\r\n const handleTitan = () => {\r\n setFilter(\"Titan\");\r\n };\r\n return (\r\n <>\r\n \r\n \r\n Moon\r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n Mars\r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n Europa\r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n Titan\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default DestinationNavItems;\r\n","import React from \"react\";\r\n\r\nimport \"./dest-data.styles.scss\";\r\n\r\nconst DestinationData = ({ distance, travel }) => (\r\n \r\n
\r\n);\r\n\r\nexport default DestinationData;\r\n","import \"./subheader.styles.scss\";\r\n\r\nconst Subheader = ({ children }) => (\r\n \r\n
\r\n Avg. distance
\r\n{distance}
\r\n\r\n
\r\n \r\n Est. travel time\r\n
\r\n{travel}
\r\n{children}
\r\n);\r\n\r\nexport default Subheader;\r\n","import React from \"react\";\r\n\r\nimport DestinationNavItems from \"../destination-nav-item/dest-nav-item.component\";\r\nimport DestinationData from \"../destination-data/dest-data.component\";\r\nimport Subheader from \"../../component/subheader/subheader.component\";\r\n\r\nimport \"./destinations.styles.scss\";\r\n\r\nconst Destinations = ({ data, setFilter, filter }) => {\r\n const {\r\n name,\r\n images: { png },\r\n description,\r\n distance,\r\n travel,\r\n } = data;\r\n\r\n return (\r\n\r\n \r\n 01\r\n Pick your destination\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Destinations;\r\n","const DATA = {\n destinations: [\n {\n id: 0,\n name: \"Moon\",\n images: {\n png: require(\"./assets/destination/image-moon.png\"),\n webp: require(\"./assets/destination/image-moon.webp\"),\n },\n description:\n \"See our planet as you’ve never seen it before. A perfect relaxing trip away to help regain perspective and come back refreshed. While you’re there, take in some history by visiting the Luna 2 and Apollo 11 landing sites.\",\n distance: \"384,400 km\",\n travel: \"3 days\",\n },\n {\n id: 1,\n name: \"Mars\",\n images: {\n png: require(\"./assets/destination/image-mars.png\"),\n webp: require(\"./assets/destination/image-mars.webp\"),\n },\n description:\n \"Don’t forget to pack your hiking boots. You’ll need them to tackle Olympus Mons, the tallest planetary mountain in our solar system. It’s two and a half times the size of Everest!\",\n distance: \"225 mil. km\",\n travel: \"9 months\",\n },\n {\n id: 2,\n name: \"Europa\",\n images: {\n png: require(\"./assets/destination/image-europa.png\"),\n webp: require(\"./assets/destination/image-europa.webp\"),\n },\n description:\n \"The smallest of the four Galilean moons orbiting Jupiter, Europa is a winter lover’s dream. With an icy surface, it’s perfect for a bit of ice skating, curling, hockey, or simple relaxation in your snug wintery cabin.\",\n distance: \"628 mil. km\",\n travel: \"3 years\",\n },\n {\n id: 3,\n name: \"Titan\",\n images: {\n png: require(\"./assets/destination/image-titan.png\"),\n webp: require(\"./assets/destination/image-titan.webp\"),\n },\n description:\n \"The only moon known to have a dense atmosphere other than Earth, Titan is a home away from home (just a few hundred degrees colder!). As a bonus, you get striking views of the Rings of Saturn.\",\n distance: \"1.6 bil. km\",\n travel: \"7 years\",\n },\n ],\n crew: [\n {\n id: 0,\n name: \"Douglas Hurley\",\n images: {\n png: require(\"./assets/crew/image-douglas-hurley.png\"),\n webp: require(\"./assets/crew/image-douglas-hurley.webp\"),\n },\n role: \"Commander\",\n bio: \"Douglas Gerald Hurley is an American engineer, former Marine Corps pilot and former NASA astronaut. He launched into space for the third time as commander of Crew Dragon Demo-2.\",\n },\n {\n id: 1,\n name: \"Mark Shuttleworth\",\n images: {\n png: require(\"./assets/crew/image-mark-shuttleworth.png\"),\n webp: require(\"./assets/crew/image-mark-shuttleworth.webp\"),\n },\n role: \"Mission Specialist\",\n bio: \"Mark Richard Shuttleworth is the founder and CEO of Canonical, the company behind the Linux-based Ubuntu operating system. Shuttleworth became the first South African to travel to space as a space tourist.\",\n },\n {\n id: 2,\n name: \"Victor Glover\",\n images: {\n png: require(\"./assets/crew/image-victor-glover.png\"),\n webp: require(\"./assets/crew/image-victor-glover.webp\"),\n },\n role: \"Pilot\",\n bio: \"Pilot on the first operational flight of the SpaceX Crew Dragon to the International Space Station. Glover is a commander in the U.S. Navy where he pilots an F/A-18.He was a crew member of Expedition 64, and served as a station systems flight engineer.\",\n },\n {\n id: 3,\n name: \"Anousheh Ansari\",\n images: {\n png: require(\"./assets/crew/image-anousheh-ansari.png\"),\n webp: require(\"./assets/crew/image-anousheh-ansari.webp\"),\n },\n role: \"Flight Engineer\",\n bio: \"Anousheh Ansari is an Iranian American engineer and co-founder of Prodea Systems. Ansari was the fourth self-funded space tourist, the first self-funded woman to fly to the ISS, and the first Iranian in space.\",\n },\n ],\n technology: [\n {\n id: 0,\n name: \"Launch vehicle\",\n images: {\n portrait: require(\"./assets/technology/image-launch-vehicle-portrait.jpg\"),\n landscape: require(\"./assets/technology/image-launch-vehicle-landscape.jpg\"),\n },\n description:\n \"A launch vehicle or carrier rocket is a rocket-propelled vehicle used to carry a payload from Earth's surface to space, usually to Earth orbit or beyond. Our WEB-X carrier rocket is the most powerful in operation. Standing 150 metres tall, it's quite an awe-inspiring sight on the launch pad!\",\n },\n {\n id: 1,\n name: \"Spaceport\",\n images: {\n portrait: require(\"./assets/technology/image-spaceport-portrait.jpg\"),\n landscape: require(\"./assets/technology/image-spaceport-landscape.jpg\"),\n },\n description:\n \"A spaceport or cosmodrome is a site for launching (or receiving) spacecraft, by analogy to the seaport for ships or airport for aircraft. Based in the famous Cape Canaveral, our spaceport is ideally situated to take advantage of the Earth’s rotation for launch.\",\n },\n {\n id: 2,\n name: \"Space capsule\",\n images: {\n portrait: require(\"./assets/technology/image-space-capsule-portrait.jpg\"),\n landscape: require(\"./assets/technology/image-space-capsule-landscape.jpg\"),\n },\n description:\n \"A space capsule is an often-crewed spacecraft that uses a blunt-body reentry capsule to reenter the Earth's atmosphere without wings. Our capsule is where you'll spend your time during the flight. It includes a space gym, cinema, and plenty of other activities to keep you entertained.\",\n },\n ],\n};\n\nexport default DATA;\n","import React, { useState } from \"react\";\r\n\r\nimport Destinations from \"../../component/destination/destinations.component\";\r\n\r\nimport DATA from \"../../data\";\r\n\r\nimport \"./destination.page.styles.scss\";\r\n\r\nconst DestinationPage = () => {\r\n const destData = DATA.destinations;\r\n const [filter, setFilter] = useState(\"Moon\");\r\n return (\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n
\r\n {name}
\r\n{description}
\r\n \r\n\r\n {destData\r\n .filter((destination) => filter === destination.name)\r\n .map((destination) => (\r\n
\r\n );\r\n};\r\n\r\nexport default DestinationPage;\r\n","/*!\n * Glide.js v3.6.0\n * (c) 2013-2022 Jędrzej Chałubek (https://github.com/jedrzejchalubek/)\n * Released under the MIT License.\n */\n\nfunction _typeof(obj) {\n \"@babel/helpers - typeof\";\n\n if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") {\n _typeof = function (obj) {\n return typeof obj;\n };\n } else {\n _typeof = function (obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n };\n }\n\n return _typeof(obj);\n}\n\nfunction _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nfunction _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n return Constructor;\n}\n\nfunction _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n writable: true,\n configurable: true\n }\n });\n if (superClass) _setPrototypeOf(subClass, superClass);\n}\n\nfunction _getPrototypeOf(o) {\n _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n}\n\nfunction _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nfunction _isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n\nfunction _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}\n\nfunction _possibleConstructorReturn(self, call) {\n if (call && (typeof call === \"object\" || typeof call === \"function\")) {\n return call;\n } else if (call !== void 0) {\n throw new TypeError(\"Derived constructors may only return object or undefined\");\n }\n\n return _assertThisInitialized(self);\n}\n\nfunction _createSuper(Derived) {\n var hasNativeReflectConstruct = _isNativeReflectConstruct();\n\n return function _createSuperInternal() {\n var Super = _getPrototypeOf(Derived),\n result;\n\n if (hasNativeReflectConstruct) {\n var NewTarget = _getPrototypeOf(this).constructor;\n\n result = Reflect.construct(Super, arguments, NewTarget);\n } else {\n result = Super.apply(this, arguments);\n }\n\n return _possibleConstructorReturn(this, result);\n };\n}\n\nfunction _superPropBase(object, property) {\n while (!Object.prototype.hasOwnProperty.call(object, property)) {\n object = _getPrototypeOf(object);\n if (object === null) break;\n }\n\n return object;\n}\n\nfunction _get() {\n if (typeof Reflect !== \"undefined\" && Reflect.get) {\n _get = Reflect.get;\n } else {\n _get = function _get(target, property, receiver) {\n var base = _superPropBase(target, property);\n\n if (!base) return;\n var desc = Object.getOwnPropertyDescriptor(base, property);\n\n if (desc.get) {\n return desc.get.call(arguments.length < 3 ? target : receiver);\n }\n\n return desc.value;\n };\n }\n\n return _get.apply(this, arguments);\n}\n\nvar defaults = {\n /**\n * Type of the movement.\n *\n * Available types:\n * `slider` - Rewinds slider to the start/end when it reaches the first or last slide.\n * `carousel` - Changes slides without starting over when it reaches the first or last slide.\n *\n * @type {String}\n */\n type: 'slider',\n\n /**\n * Start at specific slide number defined with zero-based index.\n *\n * @type {Number}\n */\n startAt: 0,\n\n /**\n * A number of slides visible on the single viewport.\n *\n * @type {Number}\n */\n perView: 1,\n\n /**\n * Focus currently active slide at a specified position in the track.\n *\n * Available inputs:\n * `center` - Current slide will be always focused at the center of a track.\n * `0,1,2,3...` - Current slide will be focused on the specified zero-based index.\n *\n * @type {String|Number}\n */\n focusAt: 0,\n\n /**\n * A size of the gap added between slides.\n *\n * @type {Number}\n */\n gap: 10,\n\n /**\n * Change slides after a specified interval. Use `false` for turning off autoplay.\n *\n * @type {Number|Boolean}\n */\n autoplay: false,\n\n /**\n * Stop autoplay on mouseover event.\n *\n * @type {Boolean}\n */\n hoverpause: true,\n\n /**\n * Allow for changing slides with left and right keyboard arrows.\n *\n * @type {Boolean}\n */\n keyboard: true,\n\n /**\n * Stop running `perView` number of slides from the end. Use this\n * option if you don't want to have an empty space after\n * a slider. Works only with `slider` type and a\n * non-centered `focusAt` setting.\n *\n * @type {Boolean}\n */\n bound: false,\n\n /**\n * Minimal swipe distance needed to change the slide. Use `false` for turning off a swiping.\n *\n * @type {Number|Boolean}\n */\n swipeThreshold: 80,\n\n /**\n * Minimal mouse drag distance needed to change the slide. Use `false` for turning off a dragging.\n *\n * @type {Number|Boolean}\n */\n dragThreshold: 120,\n\n /**\n * A number of slides moved on single swipe.\n *\n * Available types:\n * `` - Moves slider by one slide per swipe\n * `|` - Moves slider between views per swipe (number of slides defined in `perView` options)\n *\n * @type {String}\n */\n perSwipe: '',\n\n /**\n * Moving distance ratio of the slides on a swiping and dragging.\n *\n * @type {Number}\n */\n touchRatio: 0.5,\n\n /**\n * Angle required to activate slides moving on swiping or dragging.\n *\n * @type {Number}\n */\n touchAngle: 45,\n\n /**\n * Duration of the animation in milliseconds.\n *\n * @type {Number}\n */\n animationDuration: 400,\n\n /**\n * Allows looping the `slider` type. Slider will rewind to the first/last slide when it's at the start/end.\n *\n * @type {Boolean}\n */\n rewind: true,\n\n /**\n * Duration of the rewinding animation of the `slider` type in milliseconds.\n *\n * @type {Number}\n */\n rewindDuration: 800,\n\n /**\n * Easing function for the animation.\n *\n * @type {String}\n */\n animationTimingFunc: 'cubic-bezier(.165, .840, .440, 1)',\n\n /**\n * Wait for the animation to finish until the next user input can be processed\n *\n * @type {boolean}\n */\n waitForTransition: true,\n\n /**\n * Throttle costly events at most once per every wait milliseconds.\n *\n * @type {Number}\n */\n throttle: 10,\n\n /**\n * Moving direction mode.\n *\n * Available inputs:\n * - 'ltr' - left to right movement,\n * - 'rtl' - right to left movement.\n *\n * @type {String}\n */\n direction: 'ltr',\n\n /**\n * The distance value of the next and previous viewports which\n * have to peek in the current view. Accepts number and\n * pixels as a string. Left and right peeking can be\n * set up separately with a directions object.\n *\n * For example:\n * `100` - Peek 100px on the both sides.\n * { before: 100, after: 50 }` - Peek 100px on the left side and 50px on the right side.\n *\n * @type {Number|String|Object}\n */\n peek: 0,\n\n /**\n * Defines how many clones of current viewport will be generated.\n *\n * @type {Number}\n */\n cloningRatio: 1,\n\n /**\n * Collection of options applied at specified media breakpoints.\n * For example: display two slides per view under 800px.\n * `{\n * '800px': {\n * perView: 2\n * }\n * }`\n */\n breakpoints: {},\n\n /**\n * Collection of internally used HTML classes.\n *\n * @todo Refactor `slider` and `carousel` properties to single `type: { slider: '', carousel: '' }` object\n * @type {Object}\n */\n classes: {\n swipeable: 'glide--swipeable',\n dragging: 'glide--dragging',\n direction: {\n ltr: 'glide--ltr',\n rtl: 'glide--rtl'\n },\n type: {\n slider: 'glide--slider',\n carousel: 'glide--carousel'\n },\n slide: {\n clone: 'glide__slide--clone',\n active: 'glide__slide--active'\n },\n arrow: {\n disabled: 'glide__arrow--disabled'\n },\n nav: {\n active: 'glide__bullet--active'\n }\n }\n};\n\n/**\n * Outputs warning message to the bowser console.\n *\n * @param {String} msg\n * @return {Void}\n */\nfunction warn(msg) {\n console.error(\"[Glide warn]: \".concat(msg));\n}\n\n/**\n * Converts value entered as number\n * or string to integer value.\n *\n * @param {String} value\n * @returns {Number}\n */\nfunction toInt(value) {\n return parseInt(value);\n}\n/**\n * Converts value entered as number\n * or string to flat value.\n *\n * @param {String} value\n * @returns {Number}\n */\n\nfunction toFloat(value) {\n return parseFloat(value);\n}\n/**\n * Indicates whether the specified value is a string.\n *\n * @param {*} value\n * @return {Boolean}\n */\n\nfunction isString(value) {\n return typeof value === 'string';\n}\n/**\n * Indicates whether the specified value is an object.\n *\n * @param {*} value\n * @return {Boolean}\n *\n * @see https://github.com/jashkenas/underscore\n */\n\nfunction isObject(value) {\n var type = _typeof(value);\n\n return type === 'function' || type === 'object' && !!value; // eslint-disable-line no-mixed-operators\n}\n/**\n * Indicates whether the specified value is a function.\n *\n * @param {*} value\n * @return {Boolean}\n */\n\nfunction isFunction(value) {\n return typeof value === 'function';\n}\n/**\n * Indicates whether the specified value is undefined.\n *\n * @param {*} value\n * @return {Boolean}\n */\n\nfunction isUndefined(value) {\n return typeof value === 'undefined';\n}\n/**\n * Indicates whether the specified value is an array.\n *\n * @param {*} value\n * @return {Boolean}\n */\n\nfunction isArray(value) {\n return value.constructor === Array;\n}\n\n/**\n * Creates and initializes specified collection of extensions.\n * Each extension receives access to instance of glide and rest of components.\n *\n * @param {Object} glide\n * @param {Object} extensions\n *\n * @returns {Object}\n */\n\nfunction mount(glide, extensions, events) {\n var components = {};\n\n for (var name in extensions) {\n if (isFunction(extensions[name])) {\n components[name] = extensions[name](glide, components, events);\n } else {\n warn('Extension must be a function');\n }\n }\n\n for (var _name in components) {\n if (isFunction(components[_name].mount)) {\n components[_name].mount();\n }\n }\n\n return components;\n}\n\n/**\n * Defines getter and setter property on the specified object.\n *\n * @param {Object} obj Object where property has to be defined.\n * @param {String} prop Name of the defined property.\n * @param {Object} definition Get and set definitions for the property.\n * @return {Void}\n */\nfunction define(obj, prop, definition) {\n Object.defineProperty(obj, prop, definition);\n}\n/**\n * Sorts aphabetically object keys.\n *\n * @param {Object} obj\n * @return {Object}\n */\n\nfunction sortKeys(obj) {\n return Object.keys(obj).sort().reduce(function (r, k) {\n r[k] = obj[k];\n return r[k], r;\n }, {});\n}\n/**\n * Merges passed settings object with default options.\n *\n * @param {Object} defaults\n * @param {Object} settings\n * @return {Object}\n */\n\nfunction mergeOptions(defaults, settings) {\n var options = Object.assign({}, defaults, settings); // `Object.assign` do not deeply merge objects, so we\n // have to do it manually for every nested object\n // in options. Although it does not look smart,\n // it's smaller and faster than some fancy\n // merging deep-merge algorithm script.\n\n if (settings.hasOwnProperty('classes')) {\n options.classes = Object.assign({}, defaults.classes, settings.classes);\n\n if (settings.classes.hasOwnProperty('direction')) {\n options.classes.direction = Object.assign({}, defaults.classes.direction, settings.classes.direction);\n }\n\n if (settings.classes.hasOwnProperty('type')) {\n options.classes.type = Object.assign({}, defaults.classes.type, settings.classes.type);\n }\n\n if (settings.classes.hasOwnProperty('slide')) {\n options.classes.slide = Object.assign({}, defaults.classes.slide, settings.classes.slide);\n }\n\n if (settings.classes.hasOwnProperty('arrow')) {\n options.classes.arrow = Object.assign({}, defaults.classes.arrow, settings.classes.arrow);\n }\n\n if (settings.classes.hasOwnProperty('nav')) {\n options.classes.nav = Object.assign({}, defaults.classes.nav, settings.classes.nav);\n }\n }\n\n if (settings.hasOwnProperty('breakpoints')) {\n options.breakpoints = Object.assign({}, defaults.breakpoints, settings.breakpoints);\n }\n\n return options;\n}\n\nvar EventsBus = /*#__PURE__*/function () {\n /**\n * Construct a EventBus instance.\n *\n * @param {Object} events\n */\n function EventsBus() {\n var events = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n _classCallCheck(this, EventsBus);\n\n this.events = events;\n this.hop = events.hasOwnProperty;\n }\n /**\n * Adds listener to the specifed event.\n *\n * @param {String|Array} event\n * @param {Function} handler\n */\n\n\n _createClass(EventsBus, [{\n key: \"on\",\n value: function on(event, handler) {\n if (isArray(event)) {\n for (var i = 0; i < event.length; i++) {\n this.on(event[i], handler);\n }\n\n return;\n } // Create the event's object if not yet created\n\n\n if (!this.hop.call(this.events, event)) {\n this.events[event] = [];\n } // Add the handler to queue\n\n\n var index = this.events[event].push(handler) - 1; // Provide handle back for removal of event\n\n return {\n remove: function remove() {\n delete this.events[event][index];\n }\n };\n }\n /**\n * Runs registered handlers for specified event.\n *\n * @param {String|Array} event\n * @param {Object=} context\n */\n\n }, {\n key: \"emit\",\n value: function emit(event, context) {\n if (isArray(event)) {\n for (var i = 0; i < event.length; i++) {\n this.emit(event[i], context);\n }\n\n return;\n } // If the event doesn't exist, or there's no handlers in queue, just leave\n\n\n if (!this.hop.call(this.events, event)) {\n return;\n } // Cycle through events queue, fire!\n\n\n this.events[event].forEach(function (item) {\n item(context || {});\n });\n }\n }]);\n\n return EventsBus;\n}();\n\nvar Glide$1 = /*#__PURE__*/function () {\n /**\r\n * Construct glide.\r\n *\r\n * @param {String} selector\r\n * @param {Object} options\r\n */\n function Glide(selector) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n _classCallCheck(this, Glide);\n\n this._c = {};\n this._t = [];\n this._e = new EventsBus();\n this.disabled = false;\n this.selector = selector;\n this.settings = mergeOptions(defaults, options);\n this.index = this.settings.startAt;\n }\n /**\r\n * Initializes glide.\r\n *\r\n * @param {Object} extensions Collection of extensions to initialize.\r\n * @return {Glide}\r\n */\n\n\n _createClass(Glide, [{\n key: \"mount\",\n value: function mount$1() {\n var extensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n this._e.emit('mount.before');\n\n if (isObject(extensions)) {\n this._c = mount(this, extensions, this._e);\n } else {\n warn('You need to provide a object on `mount()`');\n }\n\n this._e.emit('mount.after');\n\n return this;\n }\n /**\r\n * Collects an instance `translate` transformers.\r\n *\r\n * @param {Array} transformers Collection of transformers.\r\n * @return {Void}\r\n */\n\n }, {\n key: \"mutate\",\n value: function mutate() {\n var transformers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];\n\n if (isArray(transformers)) {\n this._t = transformers;\n } else {\n warn('You need to provide a array on `mutate()`');\n }\n\n return this;\n }\n /**\r\n * Updates glide with specified settings.\r\n *\r\n * @param {Object} settings\r\n * @return {Glide}\r\n */\n\n }, {\n key: \"update\",\n value: function update() {\n var settings = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n this.settings = mergeOptions(this.settings, settings);\n\n if (settings.hasOwnProperty('startAt')) {\n this.index = settings.startAt;\n }\n\n this._e.emit('update');\n\n return this;\n }\n /**\r\n * Change slide with specified pattern. A pattern must be in the special format:\r\n * `>` - Move one forward\r\n * `<` - Move one backward\r\n * `={i}` - Go to {i} zero-based slide (eq. '=1', will go to second slide)\r\n * `>>` - Rewinds to end (last slide)\r\n * `<<` - Rewinds to start (first slide)\r\n * `|>` - Move one viewport forward\r\n * `|<` - Move one viewport backward\r\n *\r\n * @param {String} pattern\r\n * @return {Glide}\r\n */\n\n }, {\n key: \"go\",\n value: function go(pattern) {\n this._c.Run.make(pattern);\n\n return this;\n }\n /**\r\n * Move track by specified distance.\r\n *\r\n * @param {String} distance\r\n * @return {Glide}\r\n */\n\n }, {\n key: \"move\",\n value: function move(distance) {\n this._c.Transition.disable();\n\n this._c.Move.make(distance);\n\n return this;\n }\n /**\r\n * Destroy instance and revert all changes done by this._c.\r\n *\r\n * @return {Glide}\r\n */\n\n }, {\n key: \"destroy\",\n value: function destroy() {\n this._e.emit('destroy');\n\n return this;\n }\n /**\r\n * Start instance autoplaying.\r\n *\r\n * @param {Boolean|Number} interval Run autoplaying with passed interval regardless of `autoplay` settings\r\n * @return {Glide}\r\n */\n\n }, {\n key: \"play\",\n value: function play() {\n var interval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n\n if (interval) {\n this.settings.autoplay = interval;\n }\n\n this._e.emit('play');\n\n return this;\n }\n /**\r\n * Stop instance autoplaying.\r\n *\r\n * @return {Glide}\r\n */\n\n }, {\n key: \"pause\",\n value: function pause() {\n this._e.emit('pause');\n\n return this;\n }\n /**\r\n * Sets glide into a idle status.\r\n *\r\n * @return {Glide}\r\n */\n\n }, {\n key: \"disable\",\n value: function disable() {\n this.disabled = true;\n return this;\n }\n /**\r\n * Sets glide into a active status.\r\n *\r\n * @return {Glide}\r\n */\n\n }, {\n key: \"enable\",\n value: function enable() {\n this.disabled = false;\n return this;\n }\n /**\r\n * Adds cuutom event listener with handler.\r\n *\r\n * @param {String|Array} event\r\n * @param {Function} handler\r\n * @return {Glide}\r\n */\n\n }, {\n key: \"on\",\n value: function on(event, handler) {\n this._e.on(event, handler);\n\n return this;\n }\n /**\r\n * Checks if glide is a precised type.\r\n *\r\n * @param {String} name\r\n * @return {Boolean}\r\n */\n\n }, {\n key: \"isType\",\n value: function isType(name) {\n return this.settings.type === name;\n }\n /**\r\n * Gets value of the core options.\r\n *\r\n * @return {Object}\r\n */\n\n }, {\n key: \"settings\",\n get: function get() {\n return this._o;\n }\n /**\r\n * Sets value of the core options.\r\n *\r\n * @param {Object} o\r\n * @return {Void}\r\n */\n ,\n set: function set(o) {\n if (isObject(o)) {\n this._o = o;\n } else {\n warn('Options must be an `object` instance.');\n }\n }\n /**\r\n * Gets current index of the slider.\r\n *\r\n * @return {Object}\r\n */\n\n }, {\n key: \"index\",\n get: function get() {\n return this._i;\n }\n /**\r\n * Sets current index a slider.\r\n *\r\n * @return {Object}\r\n */\n ,\n set: function set(i) {\n this._i = toInt(i);\n }\n /**\r\n * Gets type name of the slider.\r\n *\r\n * @return {String}\r\n */\n\n }, {\n key: \"type\",\n get: function get() {\n return this.settings.type;\n }\n /**\r\n * Gets value of the idle status.\r\n *\r\n * @return {Boolean}\r\n */\n\n }, {\n key: \"disabled\",\n get: function get() {\n return this._d;\n }\n /**\r\n * Sets value of the idle status.\r\n *\r\n * @return {Boolean}\r\n */\n ,\n set: function set(status) {\n this._d = !!status;\n }\n }]);\n\n return Glide;\n}();\n\nfunction Run (Glide, Components, Events) {\n var Run = {\n /**\n * Initializes autorunning of the glide.\n *\n * @return {Void}\n */\n mount: function mount() {\n this._o = false;\n },\n\n /**\n * Makes glides running based on the passed moving schema.\n *\n * @param {String} move\n */\n make: function make(move) {\n var _this = this;\n\n if (!Glide.disabled) {\n !Glide.settings.waitForTransition || Glide.disable();\n this.move = move;\n Events.emit('run.before', this.move);\n this.calculate();\n Events.emit('run', this.move);\n Components.Transition.after(function () {\n if (_this.isStart()) {\n Events.emit('run.start', _this.move);\n }\n\n if (_this.isEnd()) {\n Events.emit('run.end', _this.move);\n }\n\n if (_this.isOffset()) {\n _this._o = false;\n Events.emit('run.offset', _this.move);\n }\n\n Events.emit('run.after', _this.move);\n Glide.enable();\n });\n }\n },\n\n /**\n * Calculates current index based on defined move.\n *\n * @return {Number|Undefined}\n */\n calculate: function calculate() {\n var move = this.move,\n length = this.length;\n var steps = move.steps,\n direction = move.direction; // By default assume that size of view is equal to one slide\n\n var viewSize = 1; // While direction is `=` we want jump to\n // a specified index described in steps.\n\n if (direction === '=') {\n // Check if bound is true, \n // as we want to avoid whitespaces.\n if (Glide.settings.bound && toInt(steps) > length) {\n Glide.index = length;\n return;\n }\n\n Glide.index = steps;\n return;\n } // When pattern is equal to `>>` we want\n // fast forward to the last slide.\n\n\n if (direction === '>' && steps === '>') {\n Glide.index = length;\n return;\n } // When pattern is equal to `<<` we want\n // fast forward to the first slide.\n\n\n if (direction === '<' && steps === '<') {\n Glide.index = 0;\n return;\n } // pagination movement\n\n\n if (direction === '|') {\n viewSize = Glide.settings.perView || 1;\n } // we are moving forward\n\n\n if (direction === '>' || direction === '|' && steps === '>') {\n var index = calculateForwardIndex(viewSize);\n\n if (index > length) {\n this._o = true;\n }\n\n Glide.index = normalizeForwardIndex(index, viewSize);\n return;\n } // we are moving backward\n\n\n if (direction === '<' || direction === '|' && steps === '<') {\n var _index = calculateBackwardIndex(viewSize);\n\n if (_index < 0) {\n this._o = true;\n }\n\n Glide.index = normalizeBackwardIndex(_index, viewSize);\n return;\n }\n\n warn(\"Invalid direction pattern [\".concat(direction).concat(steps, \"] has been used\"));\n },\n\n /**\n * Checks if we are on the first slide.\n *\n * @return {Boolean}\n */\n isStart: function isStart() {\n return Glide.index <= 0;\n },\n\n /**\n * Checks if we are on the last slide.\n *\n * @return {Boolean}\n */\n isEnd: function isEnd() {\n return Glide.index >= this.length;\n },\n\n /**\n * Checks if we are making a offset run.\n *\n * @param {String} direction\n * @return {Boolean}\n */\n isOffset: function isOffset() {\n var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;\n\n if (!direction) {\n return this._o;\n }\n\n if (!this._o) {\n return false;\n } // did we view to the right?\n\n\n if (direction === '|>') {\n return this.move.direction === '|' && this.move.steps === '>';\n } // did we view to the left?\n\n\n if (direction === '|<') {\n return this.move.direction === '|' && this.move.steps === '<';\n }\n\n return this.move.direction === direction;\n },\n\n /**\n * Checks if bound mode is active\n *\n * @return {Boolean}\n */\n isBound: function isBound() {\n return Glide.isType('slider') && Glide.settings.focusAt !== 'center' && Glide.settings.bound;\n }\n };\n /**\n * Returns index value to move forward/to the right\n *\n * @param viewSize\n * @returns {Number}\n */\n\n function calculateForwardIndex(viewSize) {\n var index = Glide.index;\n\n if (Glide.isType('carousel')) {\n return index + viewSize;\n }\n\n return index + (viewSize - index % viewSize);\n }\n /**\n * Normalizes the given forward index based on glide settings, preventing it to exceed certain boundaries\n *\n * @param index\n * @param length\n * @param viewSize\n * @returns {Number}\n */\n\n\n function normalizeForwardIndex(index, viewSize) {\n var length = Run.length;\n\n if (index <= length) {\n return index;\n }\n\n if (Glide.isType('carousel')) {\n return index - (length + 1);\n }\n\n if (Glide.settings.rewind) {\n // bound does funny things with the length, therefor we have to be certain\n // that we are on the last possible index value given by bound\n if (Run.isBound() && !Run.isEnd()) {\n return length;\n }\n\n return 0;\n }\n\n if (Run.isBound()) {\n return length;\n }\n\n return Math.floor(length / viewSize) * viewSize;\n }\n /**\n * Calculates index value to move backward/to the left\n *\n * @param viewSize\n * @returns {Number}\n */\n\n\n function calculateBackwardIndex(viewSize) {\n var index = Glide.index;\n\n if (Glide.isType('carousel')) {\n return index - viewSize;\n } // ensure our back navigation results in the same index as a forward navigation\n // to experience a homogeneous paging\n\n\n var view = Math.ceil(index / viewSize);\n return (view - 1) * viewSize;\n }\n /**\n * Normalizes the given backward index based on glide settings, preventing it to exceed certain boundaries\n *\n * @param index\n * @param length\n * @param viewSize\n * @returns {*}\n */\n\n\n function normalizeBackwardIndex(index, viewSize) {\n var length = Run.length;\n\n if (index >= 0) {\n return index;\n }\n\n if (Glide.isType('carousel')) {\n return index + (length + 1);\n }\n\n if (Glide.settings.rewind) {\n // bound does funny things with the length, therefor we have to be certain\n // that we are on first possible index value before we to rewind to the length given by bound\n if (Run.isBound() && Run.isStart()) {\n return length;\n }\n\n return Math.floor(length / viewSize) * viewSize;\n }\n\n return 0;\n }\n\n define(Run, 'move', {\n /**\n * Gets value of the move schema.\n *\n * @returns {Object}\n */\n get: function get() {\n return this._m;\n },\n\n /**\n * Sets value of the move schema.\n *\n * @returns {Object}\n */\n set: function set(value) {\n var step = value.substr(1);\n this._m = {\n direction: value.substr(0, 1),\n steps: step ? toInt(step) ? toInt(step) : step : 0\n };\n }\n });\n define(Run, 'length', {\n /**\n * Gets value of the running distance based\n * on zero-indexing number of slides.\n *\n * @return {Number}\n */\n get: function get() {\n var settings = Glide.settings;\n var length = Components.Html.slides.length; // If the `bound` option is active, a maximum running distance should be\n // reduced by `perView` and `focusAt` settings. Running distance\n // should end before creating an empty space after instance.\n\n if (this.isBound()) {\n return length - 1 - (toInt(settings.perView) - 1) + toInt(settings.focusAt);\n }\n\n return length - 1;\n }\n });\n define(Run, 'offset', {\n /**\n * Gets status of the offsetting flag.\n *\n * @return {Boolean}\n */\n get: function get() {\n return this._o;\n }\n });\n return Run;\n}\n\n/**\n * Returns a current time.\n *\n * @return {Number}\n */\nfunction now() {\n return new Date().getTime();\n}\n\n/**\n * Returns a function, that, when invoked, will only be triggered\n * at most once during a given window of time.\n *\n * @param {Function} func\n * @param {Number} wait\n * @param {Object=} options\n * @return {Function}\n *\n * @see https://github.com/jashkenas/underscore\n */\n\nfunction throttle(func, wait, options) {\n var timeout, context, args, result;\n var previous = 0;\n if (!options) options = {};\n\n var later = function later() {\n previous = options.leading === false ? 0 : now();\n timeout = null;\n result = func.apply(context, args);\n if (!timeout) context = args = null;\n };\n\n var throttled = function throttled() {\n var at = now();\n if (!previous && options.leading === false) previous = at;\n var remaining = wait - (at - previous);\n context = this;\n args = arguments;\n\n if (remaining <= 0 || remaining > wait) {\n if (timeout) {\n clearTimeout(timeout);\n timeout = null;\n }\n\n previous = at;\n result = func.apply(context, args);\n if (!timeout) context = args = null;\n } else if (!timeout && options.trailing !== false) {\n timeout = setTimeout(later, remaining);\n }\n\n return result;\n };\n\n throttled.cancel = function () {\n clearTimeout(timeout);\n previous = 0;\n timeout = context = args = null;\n };\n\n return throttled;\n}\n\nvar MARGIN_TYPE = {\n ltr: ['marginLeft', 'marginRight'],\n rtl: ['marginRight', 'marginLeft']\n};\nfunction Gaps (Glide, Components, Events) {\n var Gaps = {\n /**\n * Applies gaps between slides. First and last\n * slides do not receive it's edge margins.\n *\n * @param {HTMLCollection} slides\n * @return {Void}\n */\n apply: function apply(slides) {\n for (var i = 0, len = slides.length; i < len; i++) {\n var style = slides[i].style;\n var direction = Components.Direction.value;\n\n if (i !== 0) {\n style[MARGIN_TYPE[direction][0]] = \"\".concat(this.value / 2, \"px\");\n } else {\n style[MARGIN_TYPE[direction][0]] = '';\n }\n\n if (i !== slides.length - 1) {\n style[MARGIN_TYPE[direction][1]] = \"\".concat(this.value / 2, \"px\");\n } else {\n style[MARGIN_TYPE[direction][1]] = '';\n }\n }\n },\n\n /**\n * Removes gaps from the slides.\n *\n * @param {HTMLCollection} slides\n * @returns {Void}\n */\n remove: function remove(slides) {\n for (var i = 0, len = slides.length; i < len; i++) {\n var style = slides[i].style;\n style.marginLeft = '';\n style.marginRight = '';\n }\n }\n };\n define(Gaps, 'value', {\n /**\n * Gets value of the gap.\n *\n * @returns {Number}\n */\n get: function get() {\n return toInt(Glide.settings.gap);\n }\n });\n define(Gaps, 'grow', {\n /**\n * Gets additional dimensions value caused by gaps.\n * Used to increase width of the slides wrapper.\n *\n * @returns {Number}\n */\n get: function get() {\n return Gaps.value * Components.Sizes.length;\n }\n });\n define(Gaps, 'reductor', {\n /**\n * Gets reduction value caused by gaps.\n * Used to subtract width of the slides.\n *\n * @returns {Number}\n */\n get: function get() {\n var perView = Glide.settings.perView;\n return Gaps.value * (perView - 1) / perView;\n }\n });\n /**\n * Apply calculated gaps:\n * - after building, so slides (including clones) will receive proper margins\n * - on updating via API, to recalculate gaps with new options\n */\n\n Events.on(['build.after', 'update'], throttle(function () {\n Gaps.apply(Components.Html.wrapper.children);\n }, 30));\n /**\n * Remove gaps:\n * - on destroying to bring markup to its inital state\n */\n\n Events.on('destroy', function () {\n Gaps.remove(Components.Html.wrapper.children);\n });\n return Gaps;\n}\n\n/**\n * Finds siblings nodes of the passed node.\n *\n * @param {Element} node\n * @return {Array}\n */\nfunction siblings(node) {\n if (node && node.parentNode) {\n var n = node.parentNode.firstChild;\n var matched = [];\n\n for (; n; n = n.nextSibling) {\n if (n.nodeType === 1 && n !== node) {\n matched.push(n);\n }\n }\n\n return matched;\n }\n\n return [];\n}\n/**\n * Checks if passed node exist and is a valid element.\n *\n * @param {Element} node\n * @return {Boolean}\n */\n\nfunction exist(node) {\n if (node && node instanceof window.HTMLElement) {\n return true;\n }\n\n return false;\n}\n/**\n * Coerces a NodeList to an Array.\n *\n * @param {NodeList} nodeList\n * @return {Array}\n */\n\nfunction toArray(nodeList) {\n return Array.prototype.slice.call(nodeList);\n}\n\nvar TRACK_SELECTOR = '[data-glide-el=\"track\"]';\nfunction Html (Glide, Components, Events) {\n var Html = {\n /**\n * Setup slider HTML nodes.\n *\n * @param {Glide} glide\n */\n mount: function mount() {\n this.root = Glide.selector;\n this.track = this.root.querySelector(TRACK_SELECTOR);\n this.collectSlides();\n },\n\n /**\n * Collect slides\n */\n collectSlides: function collectSlides() {\n this.slides = toArray(this.wrapper.children).filter(function (slide) {\n return !slide.classList.contains(Glide.settings.classes.slide.clone);\n });\n }\n };\n define(Html, 'root', {\n /**\n * Gets node of the glide main element.\n *\n * @return {Object}\n */\n get: function get() {\n return Html._r;\n },\n\n /**\n * Sets node of the glide main element.\n *\n * @return {Object}\n */\n set: function set(r) {\n if (isString(r)) {\n r = document.querySelector(r);\n }\n\n if (exist(r)) {\n Html._r = r;\n } else {\n warn('Root element must be a existing Html node');\n }\n }\n });\n define(Html, 'track', {\n /**\n * Gets node of the glide track with slides.\n *\n * @return {Object}\n */\n get: function get() {\n return Html._t;\n },\n\n /**\n * Sets node of the glide track with slides.\n *\n * @return {Object}\n */\n set: function set(t) {\n if (exist(t)) {\n Html._t = t;\n } else {\n warn(\"Could not find track element. Please use \".concat(TRACK_SELECTOR, \" attribute.\"));\n }\n }\n });\n define(Html, 'wrapper', {\n /**\n * Gets node of the slides wrapper.\n *\n * @return {Object}\n */\n get: function get() {\n return Html.track.children[0];\n }\n });\n /**\n * Add/remove/reorder dynamic slides\n */\n\n Events.on('update', function () {\n Html.collectSlides();\n });\n return Html;\n}\n\nfunction Peek (Glide, Components, Events) {\n var Peek = {\n /**\n * Setups how much to peek based on settings.\n *\n * @return {Void}\n */\n mount: function mount() {\n this.value = Glide.settings.peek;\n }\n };\n define(Peek, 'value', {\n /**\n * Gets value of the peek.\n *\n * @returns {Number|Object}\n */\n get: function get() {\n return Peek._v;\n },\n\n /**\n * Sets value of the peek.\n *\n * @param {Number|Object} value\n * @return {Void}\n */\n set: function set(value) {\n if (isObject(value)) {\n value.before = toInt(value.before);\n value.after = toInt(value.after);\n } else {\n value = toInt(value);\n }\n\n Peek._v = value;\n }\n });\n define(Peek, 'reductor', {\n /**\n * Gets reduction value caused by peek.\n *\n * @returns {Number}\n */\n get: function get() {\n var value = Peek.value;\n var perView = Glide.settings.perView;\n\n if (isObject(value)) {\n return value.before / perView + value.after / perView;\n }\n\n return value * 2 / perView;\n }\n });\n /**\n * Recalculate peeking sizes on:\n * - when resizing window to update to proper percents\n */\n\n Events.on(['resize', 'update'], function () {\n Peek.mount();\n });\n return Peek;\n}\n\nfunction Move (Glide, Components, Events) {\n var Move = {\n /**\n * Constructs move component.\n *\n * @returns {Void}\n */\n mount: function mount() {\n this._o = 0;\n },\n\n /**\n * Calculates a movement value based on passed offset and currently active index.\n *\n * @param {Number} offset\n * @return {Void}\n */\n make: function make() {\n var _this = this;\n\n var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;\n this.offset = offset;\n Events.emit('move', {\n movement: this.value\n });\n Components.Transition.after(function () {\n Events.emit('move.after', {\n movement: _this.value\n });\n });\n }\n };\n define(Move, 'offset', {\n /**\n * Gets an offset value used to modify current translate.\n *\n * @return {Object}\n */\n get: function get() {\n return Move._o;\n },\n\n /**\n * Sets an offset value used to modify current translate.\n *\n * @return {Object}\n */\n set: function set(value) {\n Move._o = !isUndefined(value) ? toInt(value) : 0;\n }\n });\n define(Move, 'translate', {\n /**\n * Gets a raw movement value.\n *\n * @return {Number}\n */\n get: function get() {\n return Components.Sizes.slideWidth * Glide.index;\n }\n });\n define(Move, 'value', {\n /**\n * Gets an actual movement value corrected by offset.\n *\n * @return {Number}\n */\n get: function get() {\n var offset = this.offset;\n var translate = this.translate;\n\n if (Components.Direction.is('rtl')) {\n return translate + offset;\n }\n\n return translate - offset;\n }\n });\n /**\n * Make movement to proper slide on:\n * - before build, so glide will start at `startAt` index\n * - on each standard run to move to newly calculated index\n */\n\n Events.on(['build.before', 'run'], function () {\n Move.make();\n });\n return Move;\n}\n\nfunction Sizes (Glide, Components, Events) {\n var Sizes = {\n /**\n * Setups dimensions of slides.\n *\n * @return {Void}\n */\n setupSlides: function setupSlides() {\n var width = \"\".concat(this.slideWidth, \"px\");\n var slides = Components.Html.slides;\n\n for (var i = 0; i < slides.length; i++) {\n slides[i].style.width = width;\n }\n },\n\n /**\n * Setups dimensions of slides wrapper.\n *\n * @return {Void}\n */\n setupWrapper: function setupWrapper() {\n Components.Html.wrapper.style.width = \"\".concat(this.wrapperSize, \"px\");\n },\n\n /**\n * Removes applied styles from HTML elements.\n *\n * @returns {Void}\n */\n remove: function remove() {\n var slides = Components.Html.slides;\n\n for (var i = 0; i < slides.length; i++) {\n slides[i].style.width = '';\n }\n\n Components.Html.wrapper.style.width = '';\n }\n };\n define(Sizes, 'length', {\n /**\n * Gets count number of the slides.\n *\n * @return {Number}\n */\n get: function get() {\n return Components.Html.slides.length;\n }\n });\n define(Sizes, 'width', {\n /**\n * Gets width value of the slider (visible area).\n *\n * @return {Number}\n */\n get: function get() {\n return Components.Html.track.offsetWidth;\n }\n });\n define(Sizes, 'wrapperSize', {\n /**\n * Gets size of the slides wrapper.\n *\n * @return {Number}\n */\n get: function get() {\n return Sizes.slideWidth * Sizes.length + Components.Gaps.grow + Components.Clones.grow;\n }\n });\n define(Sizes, 'slideWidth', {\n /**\n * Gets width value of a single slide.\n *\n * @return {Number}\n */\n get: function get() {\n return Sizes.width / Glide.settings.perView - Components.Peek.reductor - Components.Gaps.reductor;\n }\n });\n /**\n * Apply calculated glide's dimensions:\n * - before building, so other dimensions (e.g. translate) will be calculated propertly\n * - when resizing window to recalculate sildes dimensions\n * - on updating via API, to calculate dimensions based on new options\n */\n\n Events.on(['build.before', 'resize', 'update'], function () {\n Sizes.setupSlides();\n Sizes.setupWrapper();\n });\n /**\n * Remove calculated glide's dimensions:\n * - on destoting to bring markup to its inital state\n */\n\n Events.on('destroy', function () {\n Sizes.remove();\n });\n return Sizes;\n}\n\nfunction Build (Glide, Components, Events) {\n var Build = {\n /**\n * Init glide building. Adds classes, sets\n * dimensions and setups initial state.\n *\n * @return {Void}\n */\n mount: function mount() {\n Events.emit('build.before');\n this.typeClass();\n this.activeClass();\n Events.emit('build.after');\n },\n\n /**\n * Adds `type` class to the glide element.\n *\n * @return {Void}\n */\n typeClass: function typeClass() {\n Components.Html.root.classList.add(Glide.settings.classes.type[Glide.settings.type]);\n },\n\n /**\n * Sets active class to current slide.\n *\n * @return {Void}\n */\n activeClass: function activeClass() {\n var classes = Glide.settings.classes;\n var slide = Components.Html.slides[Glide.index];\n\n if (slide) {\n slide.classList.add(classes.slide.active);\n siblings(slide).forEach(function (sibling) {\n sibling.classList.remove(classes.slide.active);\n });\n }\n },\n\n /**\n * Removes HTML classes applied at building.\n *\n * @return {Void}\n */\n removeClasses: function removeClasses() {\n var _Glide$settings$class = Glide.settings.classes,\n type = _Glide$settings$class.type,\n slide = _Glide$settings$class.slide;\n Components.Html.root.classList.remove(type[Glide.settings.type]);\n Components.Html.slides.forEach(function (sibling) {\n sibling.classList.remove(slide.active);\n });\n }\n };\n /**\n * Clear building classes:\n * - on destroying to bring HTML to its initial state\n * - on updating to remove classes before remounting component\n */\n\n Events.on(['destroy', 'update'], function () {\n Build.removeClasses();\n });\n /**\n * Remount component:\n * - on resizing of the window to calculate new dimensions\n * - on updating settings via API\n */\n\n Events.on(['resize', 'update'], function () {\n Build.mount();\n });\n /**\n * Swap active class of current slide:\n * - after each move to the new index\n */\n\n Events.on('move.after', function () {\n Build.activeClass();\n });\n return Build;\n}\n\nfunction Clones (Glide, Components, Events) {\n var Clones = {\n /**\n * Create pattern map and collect slides to be cloned.\n */\n mount: function mount() {\n this.items = [];\n\n if (Glide.isType('carousel')) {\n this.items = this.collect();\n }\n },\n\n /**\n * Collect clones with pattern.\n *\n * @return {[]}\n */\n collect: function collect() {\n var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];\n var slides = Components.Html.slides;\n var _Glide$settings = Glide.settings,\n perView = _Glide$settings.perView,\n classes = _Glide$settings.classes,\n cloningRatio = _Glide$settings.cloningRatio;\n\n if (slides.length !== 0) {\n var peekIncrementer = +!!Glide.settings.peek;\n var cloneCount = perView + peekIncrementer + Math.round(perView / 2);\n var append = slides.slice(0, cloneCount).reverse();\n var prepend = slides.slice(cloneCount * -1);\n\n for (var r = 0; r < Math.max(cloningRatio, Math.floor(perView / slides.length)); r++) {\n for (var i = 0; i < append.length; i++) {\n var clone = append[i].cloneNode(true);\n clone.classList.add(classes.slide.clone);\n items.push(clone);\n }\n\n for (var _i = 0; _i < prepend.length; _i++) {\n var _clone = prepend[_i].cloneNode(true);\n\n _clone.classList.add(classes.slide.clone);\n\n items.unshift(_clone);\n }\n }\n }\n\n return items;\n },\n\n /**\n * Append cloned slides with generated pattern.\n *\n * @return {Void}\n */\n append: function append() {\n var items = this.items;\n var _Components$Html = Components.Html,\n wrapper = _Components$Html.wrapper,\n slides = _Components$Html.slides;\n var half = Math.floor(items.length / 2);\n var prepend = items.slice(0, half).reverse();\n var append = items.slice(half * -1).reverse();\n var width = \"\".concat(Components.Sizes.slideWidth, \"px\");\n\n for (var i = 0; i < append.length; i++) {\n wrapper.appendChild(append[i]);\n }\n\n for (var _i2 = 0; _i2 < prepend.length; _i2++) {\n wrapper.insertBefore(prepend[_i2], slides[0]);\n }\n\n for (var _i3 = 0; _i3 < items.length; _i3++) {\n items[_i3].style.width = width;\n }\n },\n\n /**\n * Remove all cloned slides.\n *\n * @return {Void}\n */\n remove: function remove() {\n var items = this.items;\n\n for (var i = 0; i < items.length; i++) {\n Components.Html.wrapper.removeChild(items[i]);\n }\n }\n };\n define(Clones, 'grow', {\n /**\n * Gets additional dimensions value caused by clones.\n *\n * @return {Number}\n */\n get: function get() {\n return (Components.Sizes.slideWidth + Components.Gaps.value) * Clones.items.length;\n }\n });\n /**\n * Append additional slide's clones:\n * - while glide's type is `carousel`\n */\n\n Events.on('update', function () {\n Clones.remove();\n Clones.mount();\n Clones.append();\n });\n /**\n * Append additional slide's clones:\n * - while glide's type is `carousel`\n */\n\n Events.on('build.before', function () {\n if (Glide.isType('carousel')) {\n Clones.append();\n }\n });\n /**\n * Remove clones HTMLElements:\n * - on destroying, to bring HTML to its initial state\n */\n\n Events.on('destroy', function () {\n Clones.remove();\n });\n return Clones;\n}\n\nvar EventsBinder = /*#__PURE__*/function () {\n /**\n * Construct a EventsBinder instance.\n */\n function EventsBinder() {\n var listeners = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n _classCallCheck(this, EventsBinder);\n\n this.listeners = listeners;\n }\n /**\n * Adds events listeners to arrows HTML elements.\n *\n * @param {String|Array} events\n * @param {Element|Window|Document} el\n * @param {Function} closure\n * @param {Boolean|Object} capture\n * @return {Void}\n */\n\n\n _createClass(EventsBinder, [{\n key: \"on\",\n value: function on(events, el, closure) {\n var capture = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;\n\n if (isString(events)) {\n events = [events];\n }\n\n for (var i = 0; i < events.length; i++) {\n this.listeners[events[i]] = closure;\n el.addEventListener(events[i], this.listeners[events[i]], capture);\n }\n }\n /**\n * Removes event listeners from arrows HTML elements.\n *\n * @param {String|Array} events\n * @param {Element|Window|Document} el\n * @param {Boolean|Object} capture\n * @return {Void}\n */\n\n }, {\n key: \"off\",\n value: function off(events, el) {\n var capture = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;\n\n if (isString(events)) {\n events = [events];\n }\n\n for (var i = 0; i < events.length; i++) {\n el.removeEventListener(events[i], this.listeners[events[i]], capture);\n }\n }\n /**\n * Destroy collected listeners.\n *\n * @returns {Void}\n */\n\n }, {\n key: \"destroy\",\n value: function destroy() {\n delete this.listeners;\n }\n }]);\n\n return EventsBinder;\n}();\n\nfunction Resize (Glide, Components, Events) {\n /**\n * Instance of the binder for DOM Events.\n *\n * @type {EventsBinder}\n */\n var Binder = new EventsBinder();\n var Resize = {\n /**\n * Initializes window bindings.\n */\n mount: function mount() {\n this.bind();\n },\n\n /**\n * Binds `rezsize` listener to the window.\n * It's a costly event, so we are debouncing it.\n *\n * @return {Void}\n */\n bind: function bind() {\n Binder.on('resize', window, throttle(function () {\n Events.emit('resize');\n }, Glide.settings.throttle));\n },\n\n /**\n * Unbinds listeners from the window.\n *\n * @return {Void}\n */\n unbind: function unbind() {\n Binder.off('resize', window);\n }\n };\n /**\n * Remove bindings from window:\n * - on destroying, to remove added EventListener\n */\n\n Events.on('destroy', function () {\n Resize.unbind();\n Binder.destroy();\n });\n return Resize;\n}\n\nvar VALID_DIRECTIONS = ['ltr', 'rtl'];\nvar FLIPED_MOVEMENTS = {\n '>': '<',\n '<': '>',\n '=': '='\n};\nfunction Direction (Glide, Components, Events) {\n var Direction = {\n /**\n * Setups gap value based on settings.\n *\n * @return {Void}\n */\n mount: function mount() {\n this.value = Glide.settings.direction;\n },\n\n /**\n * Resolves pattern based on direction value\n *\n * @param {String} pattern\n * @returns {String}\n */\n resolve: function resolve(pattern) {\n var token = pattern.slice(0, 1);\n\n if (this.is('rtl')) {\n return pattern.split(token).join(FLIPED_MOVEMENTS[token]);\n }\n\n return pattern;\n },\n\n /**\n * Checks value of direction mode.\n *\n * @param {String} direction\n * @returns {Boolean}\n */\n is: function is(direction) {\n return this.value === direction;\n },\n\n /**\n * Applies direction class to the root HTML element.\n *\n * @return {Void}\n */\n addClass: function addClass() {\n Components.Html.root.classList.add(Glide.settings.classes.direction[this.value]);\n },\n\n /**\n * Removes direction class from the root HTML element.\n *\n * @return {Void}\n */\n removeClass: function removeClass() {\n Components.Html.root.classList.remove(Glide.settings.classes.direction[this.value]);\n }\n };\n define(Direction, 'value', {\n /**\n * Gets value of the direction.\n *\n * @returns {Number}\n */\n get: function get() {\n return Direction._v;\n },\n\n /**\n * Sets value of the direction.\n *\n * @param {String} value\n * @return {Void}\n */\n set: function set(value) {\n if (VALID_DIRECTIONS.indexOf(value) > -1) {\n Direction._v = value;\n } else {\n warn('Direction value must be `ltr` or `rtl`');\n }\n }\n });\n /**\n * Clear direction class:\n * - on destroy to bring HTML to its initial state\n * - on update to remove class before reappling bellow\n */\n\n Events.on(['destroy', 'update'], function () {\n Direction.removeClass();\n });\n /**\n * Remount component:\n * - on update to reflect changes in direction value\n */\n\n Events.on('update', function () {\n Direction.mount();\n });\n /**\n * Apply direction class:\n * - before building to apply class for the first time\n * - on updating to reapply direction class that may changed\n */\n\n Events.on(['build.before', 'update'], function () {\n Direction.addClass();\n });\n return Direction;\n}\n\n/**\n * Reflects value of glide movement.\n *\n * @param {Object} Glide\n * @param {Object} Components\n * @return {Object}\n */\nfunction Rtl (Glide, Components) {\n return {\n /**\n * Negates the passed translate if glide is in RTL option.\n *\n * @param {Number} translate\n * @return {Number}\n */\n modify: function modify(translate) {\n if (Components.Direction.is('rtl')) {\n return -translate;\n }\n\n return translate;\n }\n };\n}\n\n/**\n * Updates glide movement with a `gap` settings.\n *\n * @param {Object} Glide\n * @param {Object} Components\n * @return {Object}\n */\nfunction Gap (Glide, Components) {\n return {\n /**\n * Modifies passed translate value with number in the `gap` settings.\n *\n * @param {Number} translate\n * @return {Number}\n */\n modify: function modify(translate) {\n var multiplier = Math.floor(translate / Components.Sizes.slideWidth);\n return translate + Components.Gaps.value * multiplier;\n }\n };\n}\n\n/**\n * Updates glide movement with width of additional clones width.\n *\n * @param {Object} Glide\n * @param {Object} Components\n * @return {Object}\n */\nfunction Grow (Glide, Components) {\n return {\n /**\n * Adds to the passed translate width of the half of clones.\n *\n * @param {Number} translate\n * @return {Number}\n */\n modify: function modify(translate) {\n return translate + Components.Clones.grow / 2;\n }\n };\n}\n\n/**\n * Updates glide movement with a `peek` settings.\n *\n * @param {Object} Glide\n * @param {Object} Components\n * @return {Object}\n */\n\nfunction Peeking (Glide, Components) {\n return {\n /**\n * Modifies passed translate value with a `peek` setting.\n *\n * @param {Number} translate\n * @return {Number}\n */\n modify: function modify(translate) {\n if (Glide.settings.focusAt >= 0) {\n var peek = Components.Peek.value;\n\n if (isObject(peek)) {\n return translate - peek.before;\n }\n\n return translate - peek;\n }\n\n return translate;\n }\n };\n}\n\n/**\n * Updates glide movement with a `focusAt` settings.\n *\n * @param {Object} Glide\n * @param {Object} Components\n * @return {Object}\n */\nfunction Focusing (Glide, Components) {\n return {\n /**\n * Modifies passed translate value with index in the `focusAt` setting.\n *\n * @param {Number} translate\n * @return {Number}\n */\n modify: function modify(translate) {\n var gap = Components.Gaps.value;\n var width = Components.Sizes.width;\n var focusAt = Glide.settings.focusAt;\n var slideWidth = Components.Sizes.slideWidth;\n\n if (focusAt === 'center') {\n return translate - (width / 2 - slideWidth / 2);\n }\n\n return translate - slideWidth * focusAt - gap * focusAt;\n }\n };\n}\n\n/**\n * Applies diffrent transformers on translate value.\n *\n * @param {Object} Glide\n * @param {Object} Components\n * @return {Object}\n */\n\nfunction mutator (Glide, Components, Events) {\n /**\n * Merge instance transformers with collection of default transformers.\n * It's important that the Rtl component be last on the list,\n * so it reflects all previous transformations.\n *\n * @type {Array}\n */\n var TRANSFORMERS = [Gap, Grow, Peeking, Focusing].concat(Glide._t, [Rtl]);\n return {\n /**\n * Piplines translate value with registered transformers.\n *\n * @param {Number} translate\n * @return {Number}\n */\n mutate: function mutate(translate) {\n for (var i = 0; i < TRANSFORMERS.length; i++) {\n var transformer = TRANSFORMERS[i];\n\n if (isFunction(transformer) && isFunction(transformer().modify)) {\n translate = transformer(Glide, Components, Events).modify(translate);\n } else {\n warn('Transformer should be a function that returns an object with `modify()` method');\n }\n }\n\n return translate;\n }\n };\n}\n\nfunction Translate (Glide, Components, Events) {\n var Translate = {\n /**\n * Sets value of translate on HTML element.\n *\n * @param {Number} value\n * @return {Void}\n */\n set: function set(value) {\n var transform = mutator(Glide, Components).mutate(value);\n var translate3d = \"translate3d(\".concat(-1 * transform, \"px, 0px, 0px)\");\n Components.Html.wrapper.style.mozTransform = translate3d; // needed for supported Firefox 10-15\n\n Components.Html.wrapper.style.webkitTransform = translate3d; // needed for supported Chrome 10-35, Safari 5.1-8, and Opera 15-22\n\n Components.Html.wrapper.style.transform = translate3d;\n },\n\n /**\n * Removes value of translate from HTML element.\n *\n * @return {Void}\n */\n remove: function remove() {\n Components.Html.wrapper.style.transform = '';\n },\n\n /**\n * @return {number}\n */\n getStartIndex: function getStartIndex() {\n var length = Components.Sizes.length;\n var index = Glide.index;\n var perView = Glide.settings.perView;\n\n if (Components.Run.isOffset('>') || Components.Run.isOffset('|>')) {\n return length + (index - perView);\n } // \"modulo length\" converts an index that equals length to zero\n\n\n return (index + perView) % length;\n },\n\n /**\n * @return {number}\n */\n getTravelDistance: function getTravelDistance() {\n var travelDistance = Components.Sizes.slideWidth * Glide.settings.perView;\n\n if (Components.Run.isOffset('>') || Components.Run.isOffset('|>')) {\n // reverse travel distance so that we don't have to change subtract operations\n return travelDistance * -1;\n }\n\n return travelDistance;\n }\n };\n /**\n * Set new translate value:\n * - on move to reflect index change\n * - on updating via API to reflect possible changes in options\n */\n\n Events.on('move', function (context) {\n if (!Glide.isType('carousel') || !Components.Run.isOffset()) {\n return Translate.set(context.movement);\n }\n\n Components.Transition.after(function () {\n Events.emit('translate.jump');\n Translate.set(Components.Sizes.slideWidth * Glide.index);\n });\n var startWidth = Components.Sizes.slideWidth * Components.Translate.getStartIndex();\n return Translate.set(startWidth - Components.Translate.getTravelDistance());\n });\n /**\n * Remove translate:\n * - on destroying to bring markup to its inital state\n */\n\n Events.on('destroy', function () {\n Translate.remove();\n });\n return Translate;\n}\n\nfunction Transition (Glide, Components, Events) {\n /**\n * Holds inactivity status of transition.\n * When true transition is not applied.\n *\n * @type {Boolean}\n */\n var disabled = false;\n var Transition = {\n /**\n * Composes string of the CSS transition.\n *\n * @param {String} property\n * @return {String}\n */\n compose: function compose(property) {\n var settings = Glide.settings;\n\n if (!disabled) {\n return \"\".concat(property, \" \").concat(this.duration, \"ms \").concat(settings.animationTimingFunc);\n }\n\n return \"\".concat(property, \" 0ms \").concat(settings.animationTimingFunc);\n },\n\n /**\n * Sets value of transition on HTML element.\n *\n * @param {String=} property\n * @return {Void}\n */\n set: function set() {\n var property = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transform';\n Components.Html.wrapper.style.transition = this.compose(property);\n },\n\n /**\n * Removes value of transition from HTML element.\n *\n * @return {Void}\n */\n remove: function remove() {\n Components.Html.wrapper.style.transition = '';\n },\n\n /**\n * Runs callback after animation.\n *\n * @param {Function} callback\n * @return {Void}\n */\n after: function after(callback) {\n setTimeout(function () {\n callback();\n }, this.duration);\n },\n\n /**\n * Enable transition.\n *\n * @return {Void}\n */\n enable: function enable() {\n disabled = false;\n this.set();\n },\n\n /**\n * Disable transition.\n *\n * @return {Void}\n */\n disable: function disable() {\n disabled = true;\n this.set();\n }\n };\n define(Transition, 'duration', {\n /**\n * Gets duration of the transition based\n * on currently running animation type.\n *\n * @return {Number}\n */\n get: function get() {\n var settings = Glide.settings;\n\n if (Glide.isType('slider') && Components.Run.offset) {\n return settings.rewindDuration;\n }\n\n return settings.animationDuration;\n }\n });\n /**\n * Set transition `style` value:\n * - on each moving, because it may be cleared by offset move\n */\n\n Events.on('move', function () {\n Transition.set();\n });\n /**\n * Disable transition:\n * - before initial build to avoid transitioning from `0` to `startAt` index\n * - while resizing window and recalculating dimensions\n * - on jumping from offset transition at start and end edges in `carousel` type\n */\n\n Events.on(['build.before', 'resize', 'translate.jump'], function () {\n Transition.disable();\n });\n /**\n * Enable transition:\n * - on each running, because it may be disabled by offset move\n */\n\n Events.on('run', function () {\n Transition.enable();\n });\n /**\n * Remove transition:\n * - on destroying to bring markup to its inital state\n */\n\n Events.on('destroy', function () {\n Transition.remove();\n });\n return Transition;\n}\n\n/**\n * Test via a getter in the options object to see\n * if the passive property is accessed.\n *\n * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection\n */\nvar supportsPassive = false;\n\ntry {\n var opts = Object.defineProperty({}, 'passive', {\n get: function get() {\n supportsPassive = true;\n }\n });\n window.addEventListener('testPassive', null, opts);\n window.removeEventListener('testPassive', null, opts);\n} catch (e) {}\n\nvar supportsPassive$1 = supportsPassive;\n\nvar START_EVENTS = ['touchstart', 'mousedown'];\nvar MOVE_EVENTS = ['touchmove', 'mousemove'];\nvar END_EVENTS = ['touchend', 'touchcancel', 'mouseup', 'mouseleave'];\nvar MOUSE_EVENTS = ['mousedown', 'mousemove', 'mouseup', 'mouseleave'];\nfunction Swipe (Glide, Components, Events) {\n /**\n * Instance of the binder for DOM Events.\n *\n * @type {EventsBinder}\n */\n var Binder = new EventsBinder();\n var swipeSin = 0;\n var swipeStartX = 0;\n var swipeStartY = 0;\n var disabled = false;\n var capture = supportsPassive$1 ? {\n passive: true\n } : false;\n var Swipe = {\n /**\n * Initializes swipe bindings.\n *\n * @return {Void}\n */\n mount: function mount() {\n this.bindSwipeStart();\n },\n\n /**\n * Handler for `swipestart` event. Calculates entry points of the user's tap.\n *\n * @param {Object} event\n * @return {Void}\n */\n start: function start(event) {\n if (!disabled && !Glide.disabled) {\n this.disable();\n var swipe = this.touches(event);\n swipeSin = null;\n swipeStartX = toInt(swipe.pageX);\n swipeStartY = toInt(swipe.pageY);\n this.bindSwipeMove();\n this.bindSwipeEnd();\n Events.emit('swipe.start');\n }\n },\n\n /**\n * Handler for `swipemove` event. Calculates user's tap angle and distance.\n *\n * @param {Object} event\n */\n move: function move(event) {\n if (!Glide.disabled) {\n var _Glide$settings = Glide.settings,\n touchAngle = _Glide$settings.touchAngle,\n touchRatio = _Glide$settings.touchRatio,\n classes = _Glide$settings.classes;\n var swipe = this.touches(event);\n var subExSx = toInt(swipe.pageX) - swipeStartX;\n var subEySy = toInt(swipe.pageY) - swipeStartY;\n var powEX = Math.abs(subExSx << 2);\n var powEY = Math.abs(subEySy << 2);\n var swipeHypotenuse = Math.sqrt(powEX + powEY);\n var swipeCathetus = Math.sqrt(powEY);\n swipeSin = Math.asin(swipeCathetus / swipeHypotenuse);\n\n if (swipeSin * 180 / Math.PI < touchAngle) {\n event.stopPropagation();\n Components.Move.make(subExSx * toFloat(touchRatio));\n Components.Html.root.classList.add(classes.dragging);\n Events.emit('swipe.move');\n } else {\n return false;\n }\n }\n },\n\n /**\n * Handler for `swipeend` event. Finitializes user's tap and decides about glide move.\n *\n * @param {Object} event\n * @return {Void}\n */\n end: function end(event) {\n if (!Glide.disabled) {\n var _Glide$settings2 = Glide.settings,\n perSwipe = _Glide$settings2.perSwipe,\n touchAngle = _Glide$settings2.touchAngle,\n classes = _Glide$settings2.classes;\n var swipe = this.touches(event);\n var threshold = this.threshold(event);\n var swipeDistance = swipe.pageX - swipeStartX;\n var swipeDeg = swipeSin * 180 / Math.PI;\n this.enable();\n\n if (swipeDistance > threshold && swipeDeg < touchAngle) {\n Components.Run.make(Components.Direction.resolve(\"\".concat(perSwipe, \"<\")));\n } else if (swipeDistance < -threshold && swipeDeg < touchAngle) {\n Components.Run.make(Components.Direction.resolve(\"\".concat(perSwipe, \">\")));\n } else {\n // While swipe don't reach distance apply previous transform.\n Components.Move.make();\n }\n\n Components.Html.root.classList.remove(classes.dragging);\n this.unbindSwipeMove();\n this.unbindSwipeEnd();\n Events.emit('swipe.end');\n }\n },\n\n /**\n * Binds swipe's starting event.\n *\n * @return {Void}\n */\n bindSwipeStart: function bindSwipeStart() {\n var _this = this;\n\n var _Glide$settings3 = Glide.settings,\n swipeThreshold = _Glide$settings3.swipeThreshold,\n dragThreshold = _Glide$settings3.dragThreshold;\n\n if (swipeThreshold) {\n Binder.on(START_EVENTS[0], Components.Html.wrapper, function (event) {\n _this.start(event);\n }, capture);\n }\n\n if (dragThreshold) {\n Binder.on(START_EVENTS[1], Components.Html.wrapper, function (event) {\n _this.start(event);\n }, capture);\n }\n },\n\n /**\n * Unbinds swipe's starting event.\n *\n * @return {Void}\n */\n unbindSwipeStart: function unbindSwipeStart() {\n Binder.off(START_EVENTS[0], Components.Html.wrapper, capture);\n Binder.off(START_EVENTS[1], Components.Html.wrapper, capture);\n },\n\n /**\n * Binds swipe's moving event.\n *\n * @return {Void}\n */\n bindSwipeMove: function bindSwipeMove() {\n var _this2 = this;\n\n Binder.on(MOVE_EVENTS, Components.Html.wrapper, throttle(function (event) {\n _this2.move(event);\n }, Glide.settings.throttle), capture);\n },\n\n /**\n * Unbinds swipe's moving event.\n *\n * @return {Void}\n */\n unbindSwipeMove: function unbindSwipeMove() {\n Binder.off(MOVE_EVENTS, Components.Html.wrapper, capture);\n },\n\n /**\n * Binds swipe's ending event.\n *\n * @return {Void}\n */\n bindSwipeEnd: function bindSwipeEnd() {\n var _this3 = this;\n\n Binder.on(END_EVENTS, Components.Html.wrapper, function (event) {\n _this3.end(event);\n });\n },\n\n /**\n * Unbinds swipe's ending event.\n *\n * @return {Void}\n */\n unbindSwipeEnd: function unbindSwipeEnd() {\n Binder.off(END_EVENTS, Components.Html.wrapper);\n },\n\n /**\n * Normalizes event touches points accorting to different types.\n *\n * @param {Object} event\n */\n touches: function touches(event) {\n if (MOUSE_EVENTS.indexOf(event.type) > -1) {\n return event;\n }\n\n return event.touches[0] || event.changedTouches[0];\n },\n\n /**\n * Gets value of minimum swipe distance settings based on event type.\n *\n * @return {Number}\n */\n threshold: function threshold(event) {\n var settings = Glide.settings;\n\n if (MOUSE_EVENTS.indexOf(event.type) > -1) {\n return settings.dragThreshold;\n }\n\n return settings.swipeThreshold;\n },\n\n /**\n * Enables swipe event.\n *\n * @return {self}\n */\n enable: function enable() {\n disabled = false;\n Components.Transition.enable();\n return this;\n },\n\n /**\n * Disables swipe event.\n *\n * @return {self}\n */\n disable: function disable() {\n disabled = true;\n Components.Transition.disable();\n return this;\n }\n };\n /**\n * Add component class:\n * - after initial building\n */\n\n Events.on('build.after', function () {\n Components.Html.root.classList.add(Glide.settings.classes.swipeable);\n });\n /**\n * Remove swiping bindings:\n * - on destroying, to remove added EventListeners\n */\n\n Events.on('destroy', function () {\n Swipe.unbindSwipeStart();\n Swipe.unbindSwipeMove();\n Swipe.unbindSwipeEnd();\n Binder.destroy();\n });\n return Swipe;\n}\n\nfunction Images (Glide, Components, Events) {\n /**\n * Instance of the binder for DOM Events.\n *\n * @type {EventsBinder}\n */\n var Binder = new EventsBinder();\n var Images = {\n /**\n * Binds listener to glide wrapper.\n *\n * @return {Void}\n */\n mount: function mount() {\n this.bind();\n },\n\n /**\n * Binds `dragstart` event on wrapper to prevent dragging images.\n *\n * @return {Void}\n */\n bind: function bind() {\n Binder.on('dragstart', Components.Html.wrapper, this.dragstart);\n },\n\n /**\n * Unbinds `dragstart` event on wrapper.\n *\n * @return {Void}\n */\n unbind: function unbind() {\n Binder.off('dragstart', Components.Html.wrapper);\n },\n\n /**\n * Event handler. Prevents dragging.\n *\n * @return {Void}\n */\n dragstart: function dragstart(event) {\n event.preventDefault();\n }\n };\n /**\n * Remove bindings from images:\n * - on destroying, to remove added EventListeners\n */\n\n Events.on('destroy', function () {\n Images.unbind();\n Binder.destroy();\n });\n return Images;\n}\n\nfunction Anchors (Glide, Components, Events) {\n /**\n * Instance of the binder for DOM Events.\n *\n * @type {EventsBinder}\n */\n var Binder = new EventsBinder();\n /**\n * Holds detaching status of anchors.\n * Prevents detaching of already detached anchors.\n *\n * @private\n * @type {Boolean}\n */\n\n var detached = false;\n /**\n * Holds preventing status of anchors.\n * If `true` redirection after click will be disabled.\n *\n * @private\n * @type {Boolean}\n */\n\n var prevented = false;\n var Anchors = {\n /**\n * Setups a initial state of anchors component.\n *\n * @returns {Void}\n */\n mount: function mount() {\n /**\n * Holds collection of anchors elements.\n *\n * @private\n * @type {HTMLCollection}\n */\n this._a = Components.Html.wrapper.querySelectorAll('a');\n this.bind();\n },\n\n /**\n * Binds events to anchors inside a track.\n *\n * @return {Void}\n */\n bind: function bind() {\n Binder.on('click', Components.Html.wrapper, this.click);\n },\n\n /**\n * Unbinds events attached to anchors inside a track.\n *\n * @return {Void}\n */\n unbind: function unbind() {\n Binder.off('click', Components.Html.wrapper);\n },\n\n /**\n * Handler for click event. Prevents clicks when glide is in `prevent` status.\n *\n * @param {Object} event\n * @return {Void}\n */\n click: function click(event) {\n if (prevented) {\n event.stopPropagation();\n event.preventDefault();\n }\n },\n\n /**\n * Detaches anchors click event inside glide.\n *\n * @return {self}\n */\n detach: function detach() {\n prevented = true;\n\n if (!detached) {\n for (var i = 0; i < this.items.length; i++) {\n this.items[i].draggable = false;\n }\n\n detached = true;\n }\n\n return this;\n },\n\n /**\n * Attaches anchors click events inside glide.\n *\n * @return {self}\n */\n attach: function attach() {\n prevented = false;\n\n if (detached) {\n for (var i = 0; i < this.items.length; i++) {\n this.items[i].draggable = true;\n }\n\n detached = false;\n }\n\n return this;\n }\n };\n define(Anchors, 'items', {\n /**\n * Gets collection of the arrows HTML elements.\n *\n * @return {HTMLElement[]}\n */\n get: function get() {\n return Anchors._a;\n }\n });\n /**\n * Detach anchors inside slides:\n * - on swiping, so they won't redirect to its `href` attributes\n */\n\n Events.on('swipe.move', function () {\n Anchors.detach();\n });\n /**\n * Attach anchors inside slides:\n * - after swiping and transitions ends, so they can redirect after click again\n */\n\n Events.on('swipe.end', function () {\n Components.Transition.after(function () {\n Anchors.attach();\n });\n });\n /**\n * Unbind anchors inside slides:\n * - on destroying, to bring anchors to its initial state\n */\n\n Events.on('destroy', function () {\n Anchors.attach();\n Anchors.unbind();\n Binder.destroy();\n });\n return Anchors;\n}\n\nvar NAV_SELECTOR = '[data-glide-el=\"controls[nav]\"]';\nvar CONTROLS_SELECTOR = '[data-glide-el^=\"controls\"]';\nvar PREVIOUS_CONTROLS_SELECTOR = \"\".concat(CONTROLS_SELECTOR, \" [data-glide-dir*=\\\"<\\\"]\");\nvar NEXT_CONTROLS_SELECTOR = \"\".concat(CONTROLS_SELECTOR, \" [data-glide-dir*=\\\">\\\"]\");\nfunction Controls (Glide, Components, Events) {\n /**\n * Instance of the binder for DOM Events.\n *\n * @type {EventsBinder}\n */\n var Binder = new EventsBinder();\n var capture = supportsPassive$1 ? {\n passive: true\n } : false;\n var Controls = {\n /**\n * Inits arrows. Binds events listeners\n * to the arrows HTML elements.\n *\n * @return {Void}\n */\n mount: function mount() {\n /**\n * Collection of navigation HTML elements.\n *\n * @private\n * @type {HTMLCollection}\n */\n this._n = Components.Html.root.querySelectorAll(NAV_SELECTOR);\n /**\n * Collection of controls HTML elements.\n *\n * @private\n * @type {HTMLCollection}\n */\n\n this._c = Components.Html.root.querySelectorAll(CONTROLS_SELECTOR);\n /**\n * Collection of arrow control HTML elements.\n *\n * @private\n * @type {Object}\n */\n\n this._arrowControls = {\n previous: Components.Html.root.querySelectorAll(PREVIOUS_CONTROLS_SELECTOR),\n next: Components.Html.root.querySelectorAll(NEXT_CONTROLS_SELECTOR)\n };\n this.addBindings();\n },\n\n /**\n * Sets active class to current slide.\n *\n * @return {Void}\n */\n setActive: function setActive() {\n for (var i = 0; i < this._n.length; i++) {\n this.addClass(this._n[i].children);\n }\n },\n\n /**\n * Removes active class to current slide.\n *\n * @return {Void}\n */\n removeActive: function removeActive() {\n for (var i = 0; i < this._n.length; i++) {\n this.removeClass(this._n[i].children);\n }\n },\n\n /**\n * Toggles active class on items inside navigation.\n *\n * @param {HTMLElement} controls\n * @return {Void}\n */\n addClass: function addClass(controls) {\n var settings = Glide.settings;\n var item = controls[Glide.index];\n\n if (!item) {\n return;\n }\n\n if (item) {\n item.classList.add(settings.classes.nav.active);\n siblings(item).forEach(function (sibling) {\n sibling.classList.remove(settings.classes.nav.active);\n });\n }\n },\n\n /**\n * Removes active class from active control.\n *\n * @param {HTMLElement} controls\n * @return {Void}\n */\n removeClass: function removeClass(controls) {\n var item = controls[Glide.index];\n\n if (item) {\n item.classList.remove(Glide.settings.classes.nav.active);\n }\n },\n\n /**\n * Calculates, removes or adds `Glide.settings.classes.disabledArrow` class on the control arrows\n */\n setArrowState: function setArrowState() {\n if (Glide.settings.rewind) {\n return;\n }\n\n var next = Controls._arrowControls.next;\n var previous = Controls._arrowControls.previous;\n this.resetArrowState(next, previous);\n\n if (Glide.index === 0) {\n this.disableArrow(previous);\n }\n\n if (Glide.index === Components.Run.length) {\n this.disableArrow(next);\n }\n },\n\n /**\n * Removes `Glide.settings.classes.disabledArrow` from given NodeList elements\n *\n * @param {NodeList[]} lists\n */\n resetArrowState: function resetArrowState() {\n var settings = Glide.settings;\n\n for (var _len = arguments.length, lists = new Array(_len), _key = 0; _key < _len; _key++) {\n lists[_key] = arguments[_key];\n }\n\n lists.forEach(function (list) {\n toArray(list).forEach(function (element) {\n element.classList.remove(settings.classes.arrow.disabled);\n });\n });\n },\n\n /**\n * Adds `Glide.settings.classes.disabledArrow` to given NodeList elements\n *\n * @param {NodeList[]} lists\n */\n disableArrow: function disableArrow() {\n var settings = Glide.settings;\n\n for (var _len2 = arguments.length, lists = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n lists[_key2] = arguments[_key2];\n }\n\n lists.forEach(function (list) {\n toArray(list).forEach(function (element) {\n element.classList.add(settings.classes.arrow.disabled);\n });\n });\n },\n\n /**\n * Adds handles to the each group of controls.\n *\n * @return {Void}\n */\n addBindings: function addBindings() {\n for (var i = 0; i < this._c.length; i++) {\n this.bind(this._c[i].children);\n }\n },\n\n /**\n * Removes handles from the each group of controls.\n *\n * @return {Void}\n */\n removeBindings: function removeBindings() {\n for (var i = 0; i < this._c.length; i++) {\n this.unbind(this._c[i].children);\n }\n },\n\n /**\n * Binds events to arrows HTML elements.\n *\n * @param {HTMLCollection} elements\n * @return {Void}\n */\n bind: function bind(elements) {\n for (var i = 0; i < elements.length; i++) {\n Binder.on('click', elements[i], this.click);\n Binder.on('touchstart', elements[i], this.click, capture);\n }\n },\n\n /**\n * Unbinds events binded to the arrows HTML elements.\n *\n * @param {HTMLCollection} elements\n * @return {Void}\n */\n unbind: function unbind(elements) {\n for (var i = 0; i < elements.length; i++) {\n Binder.off(['click', 'touchstart'], elements[i]);\n }\n },\n\n /**\n * Handles `click` event on the arrows HTML elements.\n * Moves slider in direction given via the\n * `data-glide-dir` attribute.\n *\n * @param {Object} event\n * @return {void}\n */\n click: function click(event) {\n if (!supportsPassive$1 && event.type === 'touchstart') {\n event.preventDefault();\n }\n\n var direction = event.currentTarget.getAttribute('data-glide-dir');\n Components.Run.make(Components.Direction.resolve(direction));\n }\n };\n define(Controls, 'items', {\n /**\n * Gets collection of the controls HTML elements.\n *\n * @return {HTMLElement[]}\n */\n get: function get() {\n return Controls._c;\n }\n });\n /**\n * Swap active class of current navigation item:\n * - after mounting to set it to initial index\n * - after each move to the new index\n */\n\n Events.on(['mount.after', 'move.after'], function () {\n Controls.setActive();\n });\n /**\n * Add or remove disabled class of arrow elements\n */\n\n Events.on(['mount.after', 'run'], function () {\n Controls.setArrowState();\n });\n /**\n * Remove bindings and HTML Classes:\n * - on destroying, to bring markup to its initial state\n */\n\n Events.on('destroy', function () {\n Controls.removeBindings();\n Controls.removeActive();\n Binder.destroy();\n });\n return Controls;\n}\n\nfunction Keyboard (Glide, Components, Events) {\n /**\n * Instance of the binder for DOM Events.\n *\n * @type {EventsBinder}\n */\n var Binder = new EventsBinder();\n var Keyboard = {\n /**\n * Binds keyboard events on component mount.\n *\n * @return {Void}\n */\n mount: function mount() {\n if (Glide.settings.keyboard) {\n this.bind();\n }\n },\n\n /**\n * Adds keyboard press events.\n *\n * @return {Void}\n */\n bind: function bind() {\n Binder.on('keyup', document, this.press);\n },\n\n /**\n * Removes keyboard press events.\n *\n * @return {Void}\n */\n unbind: function unbind() {\n Binder.off('keyup', document);\n },\n\n /**\n * Handles keyboard's arrows press and moving glide foward and backward.\n *\n * @param {Object} event\n * @return {Void}\n */\n press: function press(event) {\n var perSwipe = Glide.settings.perSwipe;\n\n if (event.code === 'ArrowRight') {\n Components.Run.make(Components.Direction.resolve(\"\".concat(perSwipe, \">\")));\n }\n\n if (event.code === 'ArrowLeft') {\n Components.Run.make(Components.Direction.resolve(\"\".concat(perSwipe, \"<\")));\n }\n }\n };\n /**\n * Remove bindings from keyboard:\n * - on destroying to remove added events\n * - on updating to remove events before remounting\n */\n\n Events.on(['destroy', 'update'], function () {\n Keyboard.unbind();\n });\n /**\n * Remount component\n * - on updating to reflect potential changes in settings\n */\n\n Events.on('update', function () {\n Keyboard.mount();\n });\n /**\n * Destroy binder:\n * - on destroying to remove listeners\n */\n\n Events.on('destroy', function () {\n Binder.destroy();\n });\n return Keyboard;\n}\n\nfunction Autoplay (Glide, Components, Events) {\n /**\n * Instance of the binder for DOM Events.\n *\n * @type {EventsBinder}\n */\n var Binder = new EventsBinder();\n var Autoplay = {\n /**\n * Initializes autoplaying and events.\n *\n * @return {Void}\n */\n mount: function mount() {\n this.enable();\n this.start();\n\n if (Glide.settings.hoverpause) {\n this.bind();\n }\n },\n\n /**\n * Enables autoplaying\n *\n * @returns {Void}\n */\n enable: function enable() {\n this._e = true;\n },\n\n /**\n * Disables autoplaying.\n *\n * @returns {Void}\n */\n disable: function disable() {\n this._e = false;\n },\n\n /**\n * Starts autoplaying in configured interval.\n *\n * @param {Boolean|Number} force Run autoplaying with passed interval regardless of `autoplay` settings\n * @return {Void}\n */\n start: function start() {\n var _this = this;\n\n if (!this._e) {\n return;\n }\n\n this.enable();\n\n if (Glide.settings.autoplay) {\n if (isUndefined(this._i)) {\n this._i = setInterval(function () {\n _this.stop();\n\n Components.Run.make('>');\n\n _this.start();\n\n Events.emit('autoplay');\n }, this.time);\n }\n }\n },\n\n /**\n * Stops autorunning of the glide.\n *\n * @return {Void}\n */\n stop: function stop() {\n this._i = clearInterval(this._i);\n },\n\n /**\n * Stops autoplaying while mouse is over glide's area.\n *\n * @return {Void}\n */\n bind: function bind() {\n var _this2 = this;\n\n Binder.on('mouseover', Components.Html.root, function () {\n if (_this2._e) {\n _this2.stop();\n }\n });\n Binder.on('mouseout', Components.Html.root, function () {\n if (_this2._e) {\n _this2.start();\n }\n });\n },\n\n /**\n * Unbind mouseover events.\n *\n * @returns {Void}\n */\n unbind: function unbind() {\n Binder.off(['mouseover', 'mouseout'], Components.Html.root);\n }\n };\n define(Autoplay, 'time', {\n /**\n * Gets time period value for the autoplay interval. Prioritizes\n * times in `data-glide-autoplay` attrubutes over options.\n *\n * @return {Number}\n */\n get: function get() {\n var autoplay = Components.Html.slides[Glide.index].getAttribute('data-glide-autoplay');\n\n if (autoplay) {\n return toInt(autoplay);\n }\n\n return toInt(Glide.settings.autoplay);\n }\n });\n /**\n * Stop autoplaying and unbind events:\n * - on destroying, to clear defined interval\n * - on updating via API to reset interval that may changed\n */\n\n Events.on(['destroy', 'update'], function () {\n Autoplay.unbind();\n });\n /**\n * Stop autoplaying:\n * - before each run, to restart autoplaying\n * - on pausing via API\n * - on destroying, to clear defined interval\n * - while starting a swipe\n * - on updating via API to reset interval that may changed\n */\n\n Events.on(['run.before', 'swipe.start', 'update'], function () {\n Autoplay.stop();\n });\n Events.on(['pause', 'destroy'], function () {\n Autoplay.disable();\n Autoplay.stop();\n });\n /**\n * Start autoplaying:\n * - after each run, to restart autoplaying\n * - on playing via API\n * - while ending a swipe\n */\n\n Events.on(['run.after', 'swipe.end'], function () {\n Autoplay.start();\n });\n /**\n * Start autoplaying:\n * - after each run, to restart autoplaying\n * - on playing via API\n * - while ending a swipe\n */\n\n Events.on(['play'], function () {\n Autoplay.enable();\n Autoplay.start();\n });\n /**\n * Remount autoplaying:\n * - on updating via API to reset interval that may changed\n */\n\n Events.on('update', function () {\n Autoplay.mount();\n });\n /**\n * Destroy a binder:\n * - on destroying glide instance to clearup listeners\n */\n\n Events.on('destroy', function () {\n Binder.destroy();\n });\n return Autoplay;\n}\n\n/**\n * Sorts keys of breakpoint object so they will be ordered from lower to bigger.\n *\n * @param {Object} points\n * @returns {Object}\n */\n\nfunction sortBreakpoints(points) {\n if (isObject(points)) {\n return sortKeys(points);\n } else {\n warn(\"Breakpoints option must be an object\");\n }\n\n return {};\n}\n\nfunction Breakpoints (Glide, Components, Events) {\n /**\n * Instance of the binder for DOM Events.\n *\n * @type {EventsBinder}\n */\n var Binder = new EventsBinder();\n /**\n * Holds reference to settings.\n *\n * @type {Object}\n */\n\n var settings = Glide.settings;\n /**\n * Holds reference to breakpoints object in settings. Sorts breakpoints\n * from smaller to larger. It is required in order to proper\n * matching currently active breakpoint settings.\n *\n * @type {Object}\n */\n\n var points = sortBreakpoints(settings.breakpoints);\n /**\n * Cache initial settings before overwritting.\n *\n * @type {Object}\n */\n\n var defaults = Object.assign({}, settings);\n var Breakpoints = {\n /**\n * Matches settings for currectly matching media breakpoint.\n *\n * @param {Object} points\n * @returns {Object}\n */\n match: function match(points) {\n if (typeof window.matchMedia !== 'undefined') {\n for (var point in points) {\n if (points.hasOwnProperty(point)) {\n if (window.matchMedia(\"(max-width: \".concat(point, \"px)\")).matches) {\n return points[point];\n }\n }\n }\n }\n\n return defaults;\n }\n };\n /**\n * Overwrite instance settings with currently matching breakpoint settings.\n * This happens right after component initialization.\n */\n\n Object.assign(settings, Breakpoints.match(points));\n /**\n * Update glide with settings of matched brekpoint:\n * - window resize to update slider\n */\n\n Binder.on('resize', window, throttle(function () {\n Glide.settings = mergeOptions(settings, Breakpoints.match(points));\n }, Glide.settings.throttle));\n /**\n * Resort and update default settings:\n * - on reinit via API, so breakpoint matching will be performed with options\n */\n\n Events.on('update', function () {\n points = sortBreakpoints(points);\n defaults = Object.assign({}, settings);\n });\n /**\n * Unbind resize listener:\n * - on destroying, to bring markup to its initial state\n */\n\n Events.on('destroy', function () {\n Binder.off('resize', window);\n });\n return Breakpoints;\n}\n\nvar COMPONENTS = {\n // Required\n Html: Html,\n Translate: Translate,\n Transition: Transition,\n Direction: Direction,\n Peek: Peek,\n Sizes: Sizes,\n Gaps: Gaps,\n Move: Move,\n Clones: Clones,\n Resize: Resize,\n Build: Build,\n Run: Run,\n // Optional\n Swipe: Swipe,\n Images: Images,\n Anchors: Anchors,\n Controls: Controls,\n Keyboard: Keyboard,\n Autoplay: Autoplay,\n Breakpoints: Breakpoints\n};\n\nvar Glide = /*#__PURE__*/function (_Core) {\n _inherits(Glide, _Core);\n\n var _super = _createSuper(Glide);\n\n function Glide() {\n _classCallCheck(this, Glide);\n\n return _super.apply(this, arguments);\n }\n\n _createClass(Glide, [{\n key: \"mount\",\n value: function mount() {\n var extensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n return _get(_getPrototypeOf(Glide.prototype), \"mount\", this).call(this, Object.assign({}, COMPONENTS, extensions));\n }\n }]);\n\n return Glide;\n}(Glide$1);\n\nexport { Glide as default };\n","import React from \"react\";\r\nimport \"./crew.styles.scss\";\r\n\r\nconst Crew = ({ data }) => {\r\n const {\r\n name,\r\n images: { webp },\r\n role,\r\n bio,\r\n } = data;\r\n\r\n return (\r\n \r\n
\r\n {role}
\r\n{name}
\r\n{bio}
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default CrewsPage;\r\n","import React from \"react\";\r\n\r\nimport \"./tech.styles.scss\";\r\n\r\nconst Tech = ({ techData, filter, setFilter }) => {\r\n const {\r\n name,\r\n description,\r\n images: { portrait, landscape },\r\n } = techData;\r\n\r\n const handleTech0 = () => {\r\n setFilter(0);\r\n };\r\n const handleTech1 = () => {\r\n setFilter(1);\r\n };\r\n const handleTech2 = () => {\r\n setFilter(2);\r\n };\r\n return (\r\n \r\n \r\n 02\r\n Meet your crew\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {/* - \r\n {crewData.map((crew, index) => (\r\n
*/}\r\n {/*
*/}\r\n \r\n ❮\r\n
\r\n \">\r\n ❯\r\n
*/}\r\n {/* \r\n
\r\n );\r\n};\r\n\r\nexport default Tech;\r\n","import React, { useState } from \"react\";\r\n\r\nimport DATA from \"../../data\";\r\nimport Subheader from \"../../component/subheader/subheader.component\";\r\nimport Tech from \"../../component/tech/tech.component\";\r\n\r\nimport \"./technology.page.scss\";\r\n\r\nconst TechnologyPage = () => {\r\n const techData = DATA.technology;\r\n const [filter, setFilter] = useState(0);\r\n return (\r\n - \r\n
\r\n
\r\n The terminology...
\r\n{name}
\r\n{description}
\r\n\r\n \r\n 03\r\n Space launch 101\r\n \r\n {techData\r\n .filter((tech) => tech.id === filter)\r\n .map((tech) => (\r\n
\r\n );\r\n};\r\n\r\nexport default TechnologyPage;\r\n","import React from \"react\";\nimport { Routes, Route } from \"react-router-dom\";\nimport { HashRouter as Router } from \"react-router-dom\";\n\nimport Header from \"./component/header/header.component\";\nimport HomePage from \"./pages/home/home.page\";\nimport DestinationPage from \"./pages/destination/destination.page\";\nimport CrewsPage from \"./pages/crew/crews.page\";\nimport TechnologyPage from \"./pages/technology/technology.page\";\n\nimport \"./App.scss\";\n\nfunction App() {\n return (\n \n \n \n
\n