) {\r\n\t\tif (sub.isOnce && sub.isExecuted) {\r\n\t\t\tconst i = this.subscriptions.indexOf(sub);\r\n\t\t\tif (i > -1) {\r\n\t\t\t\tthis.subscriptions.splice(i, 1);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n","\r\n\r\nexport interface Queue {\r\n\t[index: string]: Listener[];\r\n}\r\n\r\nexport type Listener = (...args: any[]) => any;\r\n\r\nexport abstract class EventEmitter {\r\n\tprivate queue: Queue = {};\r\n\r\n\taddEventListener(type: string, listener: Listener): void {\r\n\t\tif (typeof this.queue[type] === 'undefined') {\r\n\t\t\tthis.queue[type] = [];\r\n\t\t}\r\n\r\n\t\tthis.queue[type].push(listener);\r\n\t}\r\n\r\n\tremoveEventListener(type: string, listener: Listener): void {\r\n\t\tconst queue = this.queue[type];\r\n\t\tif (typeof this.queue[type] === 'undefined') {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tfor (let i = 0; i < queue.length; i++) {\r\n\t\t\tif (queue[i] === listener) {\r\n\t\t\t\tqueue.splice(i, 1);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tprotected fireEvent(type: string, args?: any[]): void {\r\n\t\tconst queue = this.queue[type];\r\n\t\targs = args || [];\r\n\r\n\t\tif (typeof queue === 'undefined') {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tfor (const fn of queue) {\r\n\t\t\tfn(...args);\r\n\t\t}\r\n\t}\r\n}\r\n","import { dispatchCustomEvent } from '../dispatch-custom-event';\r\n\r\nexport function eventNamespaceFactory(namespace: string) {\r\n\treturn (element: EventTarget, eventName: string) =>\r\n\t\tdispatchCustomEvent(element, eventName + '.' + namespace);\r\n}\r\n","import { Component } from '@opten/compiler/metadata/component';\r\nimport { OnInit } from '@opten/compiler/metadata/lifecycle';\r\nimport { changeClass } from '@opten/dom/change-class';\r\n\r\n@Component({ className: 'js-form-field', observe: true })\r\nexport class FormField implements OnInit {\r\n\tconstructor(private element: HTMLInputElement | HTMLSelectElement) {}\r\n\r\n\tonInit(): void {\r\n\t\tthis.checkValue();\r\n\t\tthis.element.addEventListener('input', () => this.checkValue());\r\n\t\tthis.element.addEventListener('change', () => this.checkValue());\r\n\t}\r\n\r\n\tprivate checkValue() {\r\n\t\tchangeClass(this.element, 'is-filled', !!this.element.value);\r\n\t}\r\n}\r\n","export const KEYCODES = {\r\n\tDOWN: 40,\r\n\tENTER: 13,\r\n\tESCAPE: 27,\r\n\tSPACE: 32,\r\n\tUP: 38,\r\n};\r\n","// TODO: cannot import typings and somehow ts does not know where to look for\r\n//import 'googlemaps';\r\n\r\nexport class FitBoundsPadding {\r\n\ttop? = 0;\r\n\tleft? = 0;\r\n\tbottom? = 0;\r\n\tright? = 0;\r\n}\r\n\r\nexport function fitBoundsWithPadding(\r\n\tmap: google.maps.Map,\r\n\tbounds: google.maps.LatLngBounds,\r\n\tpadding: FitBoundsPadding\r\n) {\r\n\tconst projection = map.getProjection();\r\n\tif (projection) {\r\n\t\t// copying the bounds object, since we will extend it\r\n\t\tbounds = new google.maps.LatLngBounds(\r\n\t\t\tbounds.getSouthWest(),\r\n\t\t\tbounds.getNorthEast()\r\n\t\t);\r\n\r\n\t\t// SW\r\n\t\tlet point1 = projection.fromLatLngToPoint(bounds.getSouthWest());\r\n\t\tmap.fitBounds(bounds);\r\n\r\n\t\tlet point2 = new google.maps.Point(\r\n\t\t\t(typeof padding.left === 'number' ? padding.left : 0) /\r\n\t\t\t\tMath.pow(2, map.getZoom()) || 0,\r\n\t\t\t(typeof padding.bottom === 'number' ? padding.bottom : 0) /\r\n\t\t\t\tMath.pow(2, map.getZoom()) || 0\r\n\t\t);\r\n\r\n\t\tlet newPoint = projection.fromPointToLatLng(\r\n\t\t\tnew google.maps.Point(point1.x - point2.x, point1.y + point2.y)\r\n\t\t);\r\n\r\n\t\tbounds.extend(newPoint);\r\n\r\n\t\tpoint1 = projection.fromLatLngToPoint(bounds.getNorthEast());\r\n\t\tpoint2 = new google.maps.Point(\r\n\t\t\t(typeof padding.right === 'number' ? padding.right : 0) /\r\n\t\t\t\tMath.pow(2, map.getZoom()) || 0,\r\n\t\t\t(typeof padding.top === 'number' ? padding.top : 0) /\r\n\t\t\t\tMath.pow(2, map.getZoom()) || 0\r\n\t\t);\r\n\t\tnewPoint = projection.fromPointToLatLng(\r\n\t\t\tnew google.maps.Point(point1.x + point2.x, point1.y - point2.y)\r\n\t\t);\r\n\r\n\t\tbounds.extend(newPoint);\r\n\t\tmap.fitBounds(bounds);\r\n\t}\r\n}\r\n","import { Component } from '@opten/compiler/metadata/component';\r\nimport { MenuTrigger } from '.';\r\nimport { OnInit } from '@opten/compiler/metadata/lifecycle';\r\n\r\n@Component({ className: 'js-menu-trigger', observe: true })\r\nexport class MenuTriggerComponent implements OnInit {\r\n\tprivate menuTrigger: MenuTrigger;\r\n\r\n\tconstructor(private element: HTMLElement) {}\r\n\r\n\tonInit(): void {\r\n\t\tthis.menuTrigger = new MenuTrigger(this.element);\r\n\r\n\t\tthis.element.addEventListener('click', event => {\r\n\t\t\tevent.preventDefault();\r\n\t\t\tevent.stopPropagation();\r\n\r\n\t\t\tthis.menuTrigger.toggle();\r\n\t\t});\r\n\t}\r\n}\r\n","export * from './menu-trigger';\r\nexport * from './menu';\r\nexport * from './component';\r\n","import {\r\n\toverlay,\r\n\tOverlay,\r\n\tOverlayOptions,\r\n\tConnectedPositionStrategy,\r\n\tHorizontalConnectionPos,\r\n\tVerticalConnectionPos,\r\n\tOverlayPositionBuilder\r\n} from '../overlay';\r\nimport { KEYCODES } from '../keycodes';\r\nimport { getSelectorElementFromElement } from '../dom/get-selector-element-from-element';\r\nimport { eventNamespaceFactory } from '../events/event-namespace-factory';\r\nimport { Menu } from './menu';\r\nimport { RepositionScrollStrategy } from '../overlay/scroll/reposition-scroll-strategy';\r\n\r\nexport class MenuTriggerOptions {\r\n\tmenuElementSelector?: (element: HTMLElement) => HTMLElement;\r\n}\r\n\r\nexport class MenuTrigger {\r\n\tprivate overlayRef: Overlay;\r\n\tprivate menuOpen = false;\r\n\tprivate eventNamespaceFn = eventNamespaceFactory('opten.menu');\r\n\r\n\t// todo: can we use @ComponentRef? or somethin like Angular Material?\r\n\tmenu: Menu;\r\n\r\n\tprotected options: MenuTriggerOptions;\r\n\r\n\tprivate defaults: MenuTriggerOptions = {\r\n\t\tmenuElementSelector: element =>\r\n\t\t\tgetSelectorElementFromElement(element, 'data-target', true)\r\n\t};\r\n\r\n\tconstructor(protected element: HTMLElement, options?: MenuTriggerOptions) {\r\n\t\tthis.options = { ...this.defaults, ...options };\r\n\t\tthis.init();\r\n\t}\r\n\r\n\tprotected init() {\r\n\t\tconst menuElement = this.options.menuElementSelector(this.element);\r\n\r\n\t\tif (menuElement) {\r\n\t\t\tthis.menu = new Menu(menuElement);\r\n\t\t}\r\n\t}\r\n\r\n\topen(): void {\r\n\t\tif (this.menuOpen || !this.menu) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tthis.menuOpen = true;\r\n\r\n\t\tif (this.menu.lazyContent) {\r\n\t\t\tthis.menu.updatePortal();\r\n\t\t}\r\n\r\n\t\tthis.createOverlay().open();\r\n\r\n\t\tthis.eventNamespaceFn(this.element, 'open');\r\n\t}\r\n\r\n\tclose(): void {\r\n\t\tif (this.menuOpen && this.menu) {\r\n\t\t\tthis.overlayRef.close();\r\n\t\t}\r\n\t}\r\n\r\n\ttoggle() {\r\n\t\tthis.menuOpen ? this.close() : this.open();\r\n\t}\r\n\r\n\t/**\r\n\t * This method creates the overlay from the provided menu's template and saves its\r\n\t * OverlayRef so that it can be attached to the DOM when open is called.\r\n\t */\r\n\tprivate createOverlay(): Overlay {\r\n\t\tif (!this.overlayRef) {\r\n\t\t\tconst options: OverlayOptions = {\r\n\t\t\t\tscrollStrategy: new RepositionScrollStrategy(),\r\n\t\t\t\tpositionStrategy: this._getPosition(),\r\n\t\t\t\thasBackdrop: this.menu.hasBackdrop || true,\r\n\t\t\t\tbackdropClassName:\r\n\t\t\t\t\tthis.menu.backdropClassName ||\r\n\t\t\t\t\t'c-overlay-transparent-backdrop'\r\n\t\t\t};\r\n\r\n\t\t\tthis._subscribeToPositions(\r\n\t\t\t\toptions.positionStrategy as ConnectedPositionStrategy\r\n\t\t\t);\r\n\r\n\t\t\tthis.overlayRef = overlay(this.menu.portalElement, options);\r\n\r\n\t\t\tthis.overlayRef.backdropClick = () => this.close();\r\n\r\n\t\t\tthis.overlayRef.afterOpened = () =>\r\n\t\t\t\tthis.eventNamespaceFn(this.element, 'opened');\r\n\r\n\t\t\tthis.overlayRef.afterClosed = () => {\r\n\t\t\t\tthis.eventNamespaceFn(this.element, 'closed');\r\n\t\t\t\tthis.overlayRef.dispose();\r\n\t\t\t};\r\n\r\n\t\t\t// todo: better way? we need that here because of the RepositionScrollStrategy\r\n\t\t\tthis.overlayRef.onDetached = () => {\r\n\t\t\t\tthis.menuOpen = false;\r\n\t\t\t\tthis.eventNamespaceFn(this.element, 'close');\r\n\t\t\t};\r\n\r\n\t\t\t// close the menu, doesn't matter what's clicked!\r\n\t\t\tif (this.overlayRef.portalElement) {\r\n\t\t\t\tthis.overlayRef.portalElement.addEventListener('click', () =>\r\n\t\t\t\t\tthis.close()\r\n\t\t\t\t);\r\n\t\t\t}\r\n\r\n\t\t\tthis.overlayRef.onKeyboardEvent = event => {\r\n\t\t\t\tif (event.keyCode === KEYCODES.ESCAPE) {\r\n\t\t\t\t\tthis.close();\r\n\t\t\t\t}\r\n\t\t\t};\r\n\t\t}\r\n\r\n\t\treturn this.overlayRef;\r\n\t}\r\n\r\n\tprivate _getPosition(): ConnectedPositionStrategy {\r\n\t\tconst [originX, originFallbackX]: HorizontalConnectionPos[] =\r\n\t\t\tthis.menu.xPosition === 'before'\r\n\t\t\t\t? ['end', 'start']\r\n\t\t\t\t: ['start', 'end'];\r\n\r\n\t\tconst [overlayY, overlayFallbackY]: VerticalConnectionPos[] =\r\n\t\t\tthis.menu.yPosition === 'above'\r\n\t\t\t\t? ['bottom', 'top']\r\n\t\t\t\t: ['top', 'bottom'];\r\n\r\n\t\tlet [originY, originFallbackY] = [overlayY, overlayFallbackY];\r\n\t\tconst [overlayX, overlayFallbackX] = [originX, originFallbackX];\r\n\t\tconst offsetY = 0;\r\n\r\n\t\tif (!this.menu.overlapTrigger) {\r\n\t\t\toriginY = overlayY === 'top' ? 'bottom' : 'top';\r\n\t\t\toriginFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';\r\n\t\t}\r\n\r\n\t\t// todo: like angular material this.overlayRef.position()?\r\n\t\treturn new OverlayPositionBuilder()\r\n\t\t\t.connectedTo(\r\n\t\t\t\tthis.menu.connectTo ? this.menu.connectTo : this.element,\r\n\t\t\t\t{ originX, originY },\r\n\t\t\t\t{ overlayX, overlayY }\r\n\t\t\t)\r\n\t\t\t.withOffsetY(offsetY)\r\n\t\t\t.withFallbackPosition(\r\n\t\t\t\t{ originX: originFallbackX, originY },\r\n\t\t\t\t{ overlayX: overlayFallbackX, overlayY }\r\n\t\t\t)\r\n\t\t\t.withFallbackPosition(\r\n\t\t\t\t{ originX, originY: originFallbackY },\r\n\t\t\t\t{ overlayX, overlayY: overlayFallbackY },\r\n\t\t\t\tundefined,\r\n\t\t\t\t-offsetY\r\n\t\t\t)\r\n\t\t\t.withFallbackPosition(\r\n\t\t\t\t{ originX: originFallbackX, originY: originFallbackY },\r\n\t\t\t\t{ overlayX: overlayFallbackX, overlayY: overlayFallbackY },\r\n\t\t\t\tundefined,\r\n\t\t\t\t-offsetY\r\n\t\t\t);\r\n\t}\r\n\r\n\tprivate _subscribeToPositions(position: ConnectedPositionStrategy): void {\r\n\t\tposition.onPositionChange = change => {\r\n\t\t\tconst posX =\r\n\t\t\t\tchange.connectionPair.overlayX === 'start' ? 'after' : 'before';\r\n\t\t\tconst posY =\r\n\t\t\t\tchange.connectionPair.overlayY === 'top' ? 'below' : 'above';\r\n\r\n\t\t\tthis.overlayRef.portalElement.style.transformOrigin = `${\r\n\t\t\t\tposX === 'before' ? 'right' : 'left'\r\n\t\t\t} ${posY === 'below' ? 'top' : 'bottom'}`;\r\n\t\t};\r\n\t}\r\n}\r\n\r\nexport function menuTrigger(element: HTMLElement): MenuTrigger {\r\n\treturn new MenuTrigger(element);\r\n}\r\n","import { createNode } from '../dom/create-node';\r\nimport { getSelectorElementFromElement } from '../dom/get-selector-element-from-element';\r\n\r\nexport type MenuPositionX = 'before' | 'after';\r\n\r\nexport type MenuPositionY = 'above' | 'below';\r\n\r\nexport class Menu {\r\n\treadonly connectTo: HTMLElement;\r\n\treadonly xPosition: MenuPositionX;\r\n\treadonly yPosition: MenuPositionY;\r\n\treadonly overlapTrigger: boolean;\r\n\treadonly lazyContent: boolean;\r\n\treadonly backdropClassName?: string;\r\n\treadonly hasBackdrop?: boolean;\r\n\tportalElement: HTMLElement;\r\n\r\n\tconstructor(public element: HTMLElement) {\r\n\t\tthis.xPosition = this.element.hasAttribute('data-x-position')\r\n\t\t\t? (this.element.getAttribute('data-x-position') as MenuPositionX)\r\n\t\t\t: 'after';\r\n\t\tthis.yPosition = this.element.hasAttribute('data-y-position')\r\n\t\t\t? (this.element.getAttribute('data-y-position') as MenuPositionY)\r\n\t\t\t: 'below';\r\n\t\tthis.overlapTrigger = this.element.hasAttribute('data-overlap-trigger')\r\n\t\t\t? this.element.getAttribute('data-overlap-trigger') === 'true'\r\n\t\t\t: false;\r\n\t\tthis.connectTo = this.element.hasAttribute('data-connect-to')\r\n\t\t\t? getSelectorElementFromElement(\r\n\t\t\t\t\tthis.element,\r\n\t\t\t\t\t'data-connect-to',\r\n\t\t\t\t\tfalse\r\n\t\t\t )\r\n\t\t\t: null;\r\n\t\tthis.lazyContent = this.element.hasAttribute('data-lazy-content')\r\n\t\t\t? this.element.getAttribute('data-lazy-content') === 'true'\r\n\t\t\t: false;\r\n\t\tthis.backdropClassName = this.element.hasAttribute(\r\n\t\t\t'data-backdrop-class'\r\n\t\t)\r\n\t\t\t? this.element.getAttribute('data-backdrop-class')\r\n\t\t\t: null;\r\n\t\tthis.hasBackdrop = this.element.hasAttribute('data-has-backdrop')\r\n\t\t\t? this.element.getAttribute('data-has-backdrop') === 'true'\r\n\t\t\t: true;\r\n\r\n\t\tthis.portalElement = createNode(\r\n\t\t\t``\r\n\t\t);\r\n\t}\r\n\r\n\tupdatePortal() {\r\n\t\tthis.portalElement.innerHTML = this.getMenuContent();\r\n\t}\r\n\r\n\tgetMenuContent() {\r\n\t\treturn ``;\r\n\t}\r\n}\r\n","export function parseCssUnit(unit: string): number {\r\n\tconst units = ['px', 'rem', 'em'];\r\n\r\n\tif (!unit || !units.filter((u) => unit.indexOf(u) !== -1).length) {\r\n\t\treturn 0;\r\n\t}\r\n\r\n\tlet parsed = unit.replace(',', '.');\r\n\tunits.forEach((u) => (parsed = parsed.replace(u, '')));\r\n\r\n\treturn Number(parsed);\r\n}\r\n","export function byString(value: object, accessor: string) {\r\n\tconst cleanAccessor = accessor\r\n\t\t.replace(/^(this(?:\\.)?)/, '')\r\n\t\t.replace(/\\[(\\w+)\\]/g, '.$1')\r\n\t\t.replace(/^\\./, '');\r\n\tlet currentObject = value;\r\n\tif (accessor === '') {\r\n\t\treturn currentObject;\r\n\t}\r\n\tfor (const part of cleanAccessor.split('.')) {\r\n\t\tif (part in currentObject) {\r\n\t\t\tcurrentObject = currentObject[part];\r\n\t\t} else {\r\n\t\t\treturn;\r\n\t\t}\r\n\t}\r\n\treturn currentObject;\r\n}\r\n","export * from './position/connected-position-strategy';\r\nexport * from './position/connected-position';\r\nexport * from './position/global-position-strategy';\r\nexport * from './position/overlay-position-builder';\r\nexport * from './position/position-strategy';\r\nexport * from './overlay-options';\r\nexport * from './overlay';\r\n","import { Overlay } from '../overlay';\r\n\r\nexport class OverlayKeyboardDispatcher {\r\n\t/** Currently attached overlays in the order they were attached. */\r\n\tprivate attachedOverlays: Overlay[] = [];\r\n\r\n\tprivate document: Document;\r\n\tprivate isAttached: boolean;\r\n\r\n\tconstructor(document: Document) {\r\n\t\tthis.document = document;\r\n\t}\r\n\r\n\t/** Add a new overlay to the list of attached overlay refs. */\r\n\tadd(overlayRef: Overlay): void {\r\n\t\t// Lazily start dispatcher once first overlay is added\r\n\t\tif (!this.isAttached) {\r\n\t\t\tthis.document.body.addEventListener(\r\n\t\t\t\t'keydown',\r\n\t\t\t\tthis.keydownListener,\r\n\t\t\t\ttrue\r\n\t\t\t);\r\n\t\t\tthis.isAttached = true;\r\n\t\t}\r\n\r\n\t\tthis.attachedOverlays.push(overlayRef);\r\n\t}\r\n\r\n\t/** Remove an overlay from the list of attached overlay refs. */\r\n\tremove(overlayRef: Overlay): void {\r\n\t\tconst index = this.attachedOverlays.indexOf(overlayRef);\r\n\r\n\t\tif (index > -1) {\r\n\t\t\tthis.attachedOverlays.splice(index, 1);\r\n\t\t}\r\n\r\n\t\t// Remove the global listener once there are no more overlays.\r\n\t\tif (this.attachedOverlays.length === 0) {\r\n\t\t\tthis._detach();\r\n\t\t}\r\n\t}\r\n\r\n\t/** Select the appropriate overlay from a keydown event. */\r\n\tprivate _selectOverlayFromEvent(event: KeyboardEvent): Overlay {\r\n\t\t// Check if any overlays contain the event\r\n\t\tconst targetedOverlay = this.attachedOverlays.find(overlay => {\r\n\t\t\treturn (\r\n\t\t\t\toverlay.overlayElement === event.target ||\r\n\t\t\t\toverlay.overlayElement.contains(event.target as HTMLElement)\r\n\t\t\t);\r\n\t\t});\r\n\r\n\t\t// Use the overlay if it exists, otherwise choose the most recently attached one\r\n\t\treturn (\r\n\t\t\ttargetedOverlay ||\r\n\t\t\tthis.attachedOverlays[this.attachedOverlays.length - 1]\r\n\t\t);\r\n\t}\r\n\r\n\t/** Detaches the global keyboard event listener. */\r\n\tprivate _detach() {\r\n\t\tif (this.isAttached) {\r\n\t\t\tthis.document.body.removeEventListener(\r\n\t\t\t\t'keydown',\r\n\t\t\t\tthis.keydownListener,\r\n\t\t\t\ttrue\r\n\t\t\t);\r\n\t\t\tthis.isAttached = false;\r\n\t\t}\r\n\t}\r\n\r\n\t/** Keyboard event listener that will be attached to the body. */\r\n\tprivate keydownListener = (event: KeyboardEvent) => {\r\n\t\tif (this.attachedOverlays.length) {\r\n\t\t\t// Dispatch keydown event to the correct overlay.\r\n\t\t\tconst overlay = this._selectOverlayFromEvent(event);\r\n\r\n\t\t\tif (overlay.onKeyboardEvent) {\r\n\t\t\t\toverlay.onKeyboardEvent(event);\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n}\r\n","import { PositionStrategy } from './position/position-strategy';\r\nimport { ScrollStrategy } from './scroll/scroll-strategy';\r\n\r\nexport class OverlayOptions {\r\n\tpositionStrategy?: PositionStrategy;\r\n\tscrollStrategy?: ScrollStrategy;\r\n\tclassName? = 'c-overlay';\r\n\toverlayClassName?: string;\r\n\tbackdropClassName? = 'c-overlay-dark-backdrop';\r\n\thasBackdrop? = true;\r\n\twidth?: number | string;\r\n\theight?: number | string;\r\n\tminWidth?: number | string;\r\n\tminHeight?: number | string;\r\n\tmaxWidth?: number | string;\r\n\tmaxHeight?: number | string;\r\n\ttransitionDuration? = 300;\r\n\r\n\tconstructor(options?: OverlayOptions) {\r\n\t\tif (options) {\r\n\t\t\tObject.keys(options)\r\n\t\t\t\t.filter(key => typeof options[key] !== 'undefined')\r\n\t\t\t\t.forEach(key => (this[key] = options[key]));\r\n\t\t}\r\n\t}\r\n}\r\n","import { addClass } from '../dom/add-class';\r\nimport { newGuid } from '../common/new-guid';\r\nimport { createNode } from '../dom/create-node';\r\nimport { isAncestorOfClass } from '../dom/is-ancestor-of-class';\r\nimport { removeClass } from '../dom/remove-class';\r\nimport { addTransitionEndListener } from '../transition/add-transition-end-listener';\r\n\r\nimport { OverlayOptions } from './overlay-options';\r\nimport { OverlayKeyboardDispatcher } from './keyboard/overlay-keyboard-dispatcher';\r\n\r\n// todo: do it more like angular with backdrop configuration etc...\r\nexport class Overlay {\r\n\toverlayElement: HTMLElement;\r\n\tonAttached: () => void;\r\n\tonDetached: () => void;\r\n\tbeforeOpen: () => void;\r\n\tbeforeClose: () => void;\r\n\tafterOpened: () => void;\r\n\tafterClosed: () => void;\r\n\tonKeyboardEvent: (event: KeyboardEvent) => void;\r\n\tbackdropClick: (event: MouseEvent) => void;\r\n\r\n\tprivate uuid: string;\r\n\tprivate options: OverlayOptions;\r\n\tprivate overlayContainerElement: HTMLElement;\r\n\tprivate backdropElement: HTMLElement;\r\n\tprivate attached = false;\r\n\tprivate keyboardDispatcher = new OverlayKeyboardDispatcher(document);\r\n\r\n\tconstructor(public portalElement: HTMLElement, options?: OverlayOptions) {\r\n\t\tthis.options = new OverlayOptions(options);\r\n\r\n\t\tthis.uuid = newGuid();\r\n\r\n\t\tif (options.scrollStrategy) {\r\n\t\t\toptions.scrollStrategy.attach(this);\r\n\t\t}\r\n\t}\r\n\r\n\tcreate() {\r\n\t\t// we want to re-use existing containers\r\n\t\t// so search it in the dom before we create it again!\r\n\t\tconst overlayContainerElement = document.getElementsByClassName(\r\n\t\t\t`${this.options.className}__container`\r\n\t\t)[0] as HTMLElement;\r\n\r\n\t\tif (overlayContainerElement) {\r\n\t\t\tthis.overlayContainerElement = overlayContainerElement;\r\n\t\t} else {\r\n\t\t\tthis.overlayContainerElement = createNode(\r\n\t\t\t\t``\r\n\t\t\t);\r\n\r\n\t\t\tdocument.body.insertBefore(\r\n\t\t\t\tthis.overlayContainerElement,\r\n\t\t\t\tdocument.body.lastElementChild\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\tthis.overlayElement = createNode(\r\n\t\t\t``\r\n\t\t);\r\n\r\n\t\tif (this.options.overlayClassName) {\r\n\t\t\taddClass(this.overlayElement, this.options.overlayClassName);\r\n\t\t}\r\n\r\n\t\tthis.overlayContainerElement.appendChild(this.overlayElement);\r\n\t}\r\n\r\n\thasAttached() {\r\n\t\treturn this.attached;\r\n\t}\r\n\r\n\tdetachBackdrop() {\r\n\t\tconst backdropToDetach = this.backdropElement;\r\n\r\n\t\tif (backdropToDetach) {\r\n\t\t\tconst finishDetach = () => {\r\n\t\t\t\t// It may not be attached to anything in certain cases (e.g. unit tests).\r\n\t\t\t\tif (backdropToDetach && backdropToDetach.parentNode) {\r\n\t\t\t\t\tbackdropToDetach.parentNode.removeChild(backdropToDetach);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// It is possible that a new portal has been attached to this overlay since we started\r\n\t\t\t\t// removing the backdrop. If that is the case, only clear the backdrop reference if it\r\n\t\t\t\t// is still the same instance that we started to remove.\r\n\t\t\t\tif (this.backdropElement === backdropToDetach) {\r\n\t\t\t\t\tthis.backdropElement = null;\r\n\t\t\t\t}\r\n\t\t\t};\r\n\r\n\t\t\tremoveClass(backdropToDetach, 'is-showing');\r\n\r\n\t\t\tif (this.options.backdropClassName) {\r\n\t\t\t\tremoveClass(backdropToDetach, this.options.backdropClassName);\r\n\t\t\t}\r\n\r\n\t\t\taddTransitionEndListener(backdropToDetach, finishDetach, 500);\r\n\r\n\t\t\t// If the backdrop doesn't have a transition, the `transitionend` event won't fire.\r\n\t\t\t// In this case we make it unclickable and we try to remove it after a delay.\r\n\t\t\tbackdropToDetach.style.pointerEvents = 'none';\r\n\t\t}\r\n\t}\r\n\r\n\t/** Updates the position of the overlay based on the position strategy. */\r\n\tupdatePosition() {\r\n\t\tif (this.options.positionStrategy) {\r\n\t\t\tthis.options.positionStrategy.apply();\r\n\t\t}\r\n\t}\r\n\r\n\tgetOptions() {\r\n\t\treturn this.options;\r\n\t}\r\n\r\n\t/** Update the size properties of the overlay. */\r\n\tupdateSize(sizeConfig: OverlaySizeConfig) {\r\n\t\tthis.options = { ...this.options, ...sizeConfig };\r\n\t\tthis._updateElementSize();\r\n\t}\r\n\r\n\topen() {\r\n\t\tthis._attach();\r\n\r\n\t\t// Update the position once, so that the overlay will be fully rendered\r\n\t\t// before attempting to position it, as the position may depend on the size of the rendered\r\n\t\t// content.\r\n\t\tthis.updatePosition();\r\n\r\n\t\t// animate\r\n\t\taddClass(this.portalElement, 'is-showing');\r\n\r\n\t\tif (this.beforeOpen) {\r\n\t\t\tthis.beforeOpen();\r\n\t\t}\r\n\r\n\t\t// todo: Aniamte like Angular Material?\r\n\t\taddTransitionEndListener(\r\n\t\t\tthis.portalElement,\r\n\t\t\t() => {\r\n\t\t\t\tremoveClass(this.portalElement, 'is-showing');\r\n\t\t\t\taddClass(this.portalElement, 'is-visible');\r\n\r\n\t\t\t\tif (this.afterOpened) {\r\n\t\t\t\t\tthis.afterOpened();\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tthis.options.transitionDuration\r\n\t\t);\r\n\t}\r\n\r\n\tclose() {\r\n\t\tthis._detach();\r\n\r\n\t\t// animate\r\n\t\taddClass(this.portalElement, 'is-fade-out');\r\n\r\n\t\tif (this.beforeClose) {\r\n\t\t\tthis.beforeClose();\r\n\t\t}\r\n\r\n\t\taddTransitionEndListener(\r\n\t\t\tthis.portalElement,\r\n\t\t\t() => {\r\n\t\t\t\tremoveClass(this.portalElement, 'is-fade-out');\r\n\t\t\t\t// todo: why?! otherwise animation only works once...\r\n\t\t\t\tremoveClass(this.portalElement, 'is-showing');\r\n\t\t\t\tremoveClass(this.portalElement, 'is-visible');\r\n\r\n\t\t\t\t// should be called by caller\r\n\t\t\t\t// this._dispose();\r\n\r\n\t\t\t\tif (this.afterClosed) {\r\n\t\t\t\t\tthis.afterClosed();\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tthis.options.transitionDuration\r\n\t\t);\r\n\t}\r\n\r\n\t/** Cleans up the overlay from the DOM. */\r\n\tdispose() {\r\n\t\tif (this.portalElement && this.portalElement.parentElement) {\r\n\t\t\tthis.portalElement.parentElement!.removeChild(this.portalElement);\r\n\t\t}\r\n\r\n\t\tif (\r\n\t\t\tthis.options.positionStrategy &&\r\n\t\t\tthis.options.positionStrategy.dispose\r\n\t\t) {\r\n\t\t\tthis.options.positionStrategy.dispose();\r\n\t\t}\r\n\r\n\t\tif (this.options.scrollStrategy) {\r\n\t\t\tthis.options.scrollStrategy.disable();\r\n\t\t}\r\n\r\n\t\tthis.detachBackdrop();\r\n\r\n\t\t// Remove this overlay from keyboard dispatcher tracking\r\n\t\tthis.keyboardDispatcher.remove(this);\r\n\t}\r\n\r\n\tprivate _attach() {\r\n\t\t// todo: do it like angular so we have this method public\r\n\t\t// and we transfer the portalElement over here?\r\n\t\t// it should work with referencing the portalElement in e.g. select.ts\r\n\t\t// to calculate stuff. Because it works in menu.ts too (this.menu.portalElement.parentElement is c-overlay)!\r\n\t\t// Maybe then we can use ._overlayRef.position()... instead of OverlayPositionBuilder\r\n\r\n\t\tif (this.options.positionStrategy) {\r\n\t\t\tthis.options.positionStrategy.attach(this);\r\n\t\t}\r\n\r\n\t\tif (this.options.scrollStrategy) {\r\n\t\t\tthis.options.scrollStrategy.enable();\r\n\t\t}\r\n\r\n\t\tthis.overlayElement.appendChild(this.portalElement);\r\n\r\n\t\tthis._updateElementSize();\r\n\r\n\t\tthis.overlayElement.style.pointerEvents = 'auto';\r\n\r\n\t\tif (this.options.hasBackdrop) {\r\n\t\t\tthis._attachBackdrop();\r\n\t\t}\r\n\r\n\t\tthis.attached = true;\r\n\r\n\t\t// Track this overlay by the keyboard dispatcher\r\n\t\tthis.keyboardDispatcher.add(this);\r\n\r\n\t\tif (this.onAttached) {\r\n\t\t\tthis.onAttached();\r\n\t\t}\r\n\t}\r\n\r\n\tprivate _detach() {\r\n\t\tif (!this.hasAttached()) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tthis.detachBackdrop();\r\n\r\n\t\t// When the overlay is detached, the element should disable pointer events.\r\n\t\t// This is necessary because otherwise the element will cover the page and disable\r\n\t\t// pointer events therefore. Depends on the position strategy and the applied boundaries.\r\n\t\tthis.overlayElement.style.pointerEvents = 'none';\r\n\r\n\t\tif (\r\n\t\t\tthis.options.positionStrategy &&\r\n\t\t\tthis.options.positionStrategy.detach\r\n\t\t) {\r\n\t\t\tthis.options.positionStrategy.detach();\r\n\t\t}\r\n\r\n\t\tif (this.options.scrollStrategy) {\r\n\t\t\tthis.options.scrollStrategy.disable();\r\n\t\t}\r\n\r\n\t\t// Remove this overlay from keyboard dispatcher tracking\r\n\t\tthis.keyboardDispatcher.remove(this);\r\n\r\n\t\tif (this.onDetached) {\r\n\t\t\tthis.onDetached();\r\n\t\t}\r\n\t}\r\n\r\n\t/** Attaches a backdrop for this overlay. */\r\n\tprivate _attachBackdrop() {\r\n\t\tthis.backdropElement = createNode(\r\n\t\t\t``\r\n\t\t);\r\n\r\n\t\tif (this.options.backdropClassName) {\r\n\t\t\taddClass(this.backdropElement, this.options.backdropClassName);\r\n\t\t}\r\n\r\n\t\t// Insert the backdrop before the overlay in the DOM order,\r\n\t\t// in order to handle stacked overlays properly.\r\n\t\tthis.overlayElement.parentElement!.insertBefore(\r\n\t\t\tthis.backdropElement,\r\n\t\t\tthis.overlayElement\r\n\t\t);\r\n\r\n\t\t// Forward backdrop clicks such that the consumer of the overlay can perform whatever\r\n\t\t// action desired when such a click occurs (usually closing the overlay).\r\n\t\tthis.backdropElement.addEventListener('click', (event: MouseEvent) =>\r\n\t\t\tthis._handleBackdropClick(event)\r\n\t\t);\r\n\r\n\t\t// Add class to fade-in the backdrop after one frame.\r\n\t\trequestAnimationFrame(() => {\r\n\t\t\tif (this.backdropElement) {\r\n\t\t\t\taddClass(this.backdropElement, 'is-showing');\r\n\t\t\t}\r\n\t\t});\r\n\t}\r\n\r\n\t/** Updates the size of the overlay element based on the overlay config. */\r\n\tprivate _updateElementSize() {\r\n\t\tif (this.options.width || this.options.width === 0) {\r\n\t\t\tthis.overlayElement.style.width = formatCssUnit(this.options.width);\r\n\t\t}\r\n\r\n\t\tif (this.options.height || this.options.height === 0) {\r\n\t\t\tthis.overlayElement.style.height = formatCssUnit(\r\n\t\t\t\tthis.options.height\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\tif (this.options.minWidth || this.options.minWidth === 0) {\r\n\t\t\tthis.overlayElement.style.minWidth = formatCssUnit(\r\n\t\t\t\tthis.options.minWidth\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\tif (this.options.minHeight || this.options.minHeight === 0) {\r\n\t\t\tthis.overlayElement.style.minHeight = formatCssUnit(\r\n\t\t\t\tthis.options.minHeight\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\tif (this.options.maxWidth || this.options.maxWidth === 0) {\r\n\t\t\tthis.overlayElement.style.maxWidth = formatCssUnit(\r\n\t\t\t\tthis.options.maxWidth\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\tif (this.options.maxHeight || this.options.maxHeight === 0) {\r\n\t\t\tthis.overlayElement.style.maxHeight = formatCssUnit(\r\n\t\t\t\tthis.options.maxHeight\r\n\t\t\t);\r\n\t\t}\r\n\t}\r\n\r\n\tprivate _handleBackdropClick(event: MouseEvent) {\r\n\t\tif (\r\n\t\t\t!isAncestorOfClass(\r\n\t\t\t\tevent.target as Element,\r\n\t\t\t\tthis.options.className,\r\n\t\t\t\ttrue\r\n\t\t\t)\r\n\t\t) {\r\n\t\t\tif (this.backdropClick) {\r\n\t\t\t\tthis.backdropClick(event);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\nexport function overlay(\r\n\telement: HTMLElement,\r\n\toptions?: OverlayOptions\r\n): Overlay {\r\n\tconst overlayRef = new Overlay(element, options);\r\n\r\n\toverlayRef.create();\r\n\r\n\treturn overlayRef;\r\n}\r\n\r\nfunction formatCssUnit(value: number | string) {\r\n\t// todo: @opten/typescript?\r\n\treturn typeof value === 'string' ? (value as string) : `${value}px`;\r\n}\r\n\r\n/** Size properties for an overlay. */\r\nexport interface OverlaySizeConfig {\r\n\twidth?: number | string;\r\n\theight?: number | string;\r\n\tminWidth?: number | string;\r\n\tminHeight?: number | string;\r\n\tmaxWidth?: number | string;\r\n\tmaxHeight?: number | string;\r\n}\r\n","import { isElementClippedByScrolling } from '@opten/viewport/is-element-clipped-by-scrolling';\r\nimport { isElementScrolledOutsideView } from '@opten/viewport/is-element-scrolled-outside-view';\r\n\r\nimport { PositionStrategy } from './position-strategy';\r\n\r\nimport {\r\n\tConnectionPositionPair,\r\n\tOriginConnectionPosition,\r\n\tOverlayConnectionPosition,\r\n\tScrollingVisibility,\r\n\tConnectedOverlayPositionChange,\r\n\tvalidateHorizontalPosition,\r\n\tvalidateVerticalPosition\r\n} from './connected-position';\r\n\r\nimport { Overlay } from '../overlay';\r\n\r\nexport class ConnectedPositionStrategy implements PositionStrategy {\r\n\tonPositionChange: (change: ConnectedOverlayPositionChange) => void;\r\n\r\n\t/** The offset in pixels for the overlay connection point on the x-axis */\r\n\tprivate offsetX = 0;\r\n\r\n\t/** The offset in pixels for the overlay connection point on the y-axis */\r\n\tprivate offsetY = 0;\r\n\r\n\t/** The Scrollable containers used to check scrollable view properties on position change. */\r\n\tprivate scrollables: HTMLElement[] = [];\r\n\r\n\t/** Ordered list of preferred positions, from most to least desirable. */\r\n\tprivate preferredPositions: ConnectionPositionPair[] = [];\r\n\r\n\t/** The origin element against which the overlay will be positioned. */\r\n\tprivate origin: HTMLElement;\r\n\r\n\t/** The overlay pane element. */\r\n\tprivate pane: HTMLElement;\r\n\r\n\t/** The last position to have been calculated as the best fit position. */\r\n\tprivate lastConnectedPosition: ConnectionPositionPair;\r\n\r\n\t/** Whether the position strategy is applied currently. */\r\n\tprivate applied = false;\r\n\r\n\t/** Whether the overlay position is locked. */\r\n\tprivate positionLocked = false;\r\n\r\n\tprivate boundResizeChange = this._handleResizeChange.bind(this);\r\n\r\n\tconstructor(\r\n\t\toriginPos: OriginConnectionPosition,\r\n\t\toverlayPos: OverlayConnectionPosition,\r\n\t\tprivate connectedTo: HTMLElement,\r\n\t\tprivate document: Document\r\n\t) {\r\n\t\tthis.origin = this.connectedTo;\r\n\t\tthis.withFallbackPosition(originPos, overlayPos);\r\n\t}\r\n\r\n\t/** Ordered list of preferred positions, from most to least desirable. */\r\n\tget positions(): ConnectionPositionPair[] {\r\n\t\treturn this.preferredPositions;\r\n\t}\r\n\r\n\t/** Attach this position strategy to an overlay. */\r\n\tattach(overlayRef: Overlay): void {\r\n\t\tthis.pane = overlayRef.overlayElement;\r\n\r\n\t\twindow.addEventListener('resize', this.boundResizeChange);\r\n\t}\r\n\r\n\t/** @docs-private */\r\n\tdetach() {\r\n\t\tthis.applied = false;\r\n\t\twindow.removeEventListener('resize', this.boundResizeChange);\r\n\t}\r\n\r\n\t/** Disposes all resources used by the position strategy. */\r\n\tdispose() {\r\n\t\tthis.detach();\r\n\t}\r\n\r\n\t/**\r\n\t * Updates the position of the overlay element, using whichever preferred position relative\r\n\t * to the origin fits on-screen.\r\n\t * @docs-private\r\n\t */\r\n\tapply(): void {\r\n\t\t// If the position has been applied already (e.g. when the overlay was opened) and the\r\n\t\t// consumer opted into locking in the position, re-use the old position, in order to\r\n\t\t// prevent the overlay from jumping around.\r\n\t\tif (this.applied && this.positionLocked && this.lastConnectedPosition) {\r\n\t\t\tthis.recalculateLastPosition();\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tthis._validatePositions();\r\n\t\tthis.applied = true;\r\n\r\n\t\t// We need the bounding rects for the origin and the overlay to determine how to position\r\n\t\t// the overlay relative to the origin.\r\n\t\tconst element = this.pane;\r\n\t\tconst originRect = this.origin.getBoundingClientRect();\r\n\t\tconst overlayRect = element.getBoundingClientRect();\r\n\r\n\t\t// We use the viewport size to determine whether a position would go off-screen.\r\n\t\tconst viewportSize = {\r\n\t\t\twidth: window.innerWidth,\r\n\t\t\theight: window.innerHeight\r\n\t\t};\r\n\r\n\t\t// Fallback point if none of the fallbacks fit into the viewport.\r\n\t\tlet fallbackPoint: OverlayPoint | undefined;\r\n\t\tlet fallbackPosition: ConnectionPositionPair | undefined;\r\n\r\n\t\t// We want to place the overlay in the first of the preferred positions such that the\r\n\t\t// overlay fits on-screen.\r\n\t\tfor (const pos of this.preferredPositions) {\r\n\t\t\t// Get the (x, y) point of connection on the origin, and then use that to get the\r\n\t\t\t// (top, left) coordinate for the overlay at `pos`.\r\n\t\t\tconst originPoint = this._getOriginConnectionPoint(originRect, pos);\r\n\t\t\tconst overlayPoint = this._getOverlayPoint(\r\n\t\t\t\toriginPoint,\r\n\t\t\t\toverlayRect,\r\n\t\t\t\tviewportSize,\r\n\t\t\t\tpos\r\n\t\t\t);\r\n\r\n\t\t\t// If the overlay in the calculated position fits on-screen, put it there and we're done.\r\n\t\t\tif (overlayPoint.fitsInViewport) {\r\n\t\t\t\tthis._setElementPosition(\r\n\t\t\t\t\telement,\r\n\t\t\t\t\toverlayRect,\r\n\t\t\t\t\toverlayPoint,\r\n\t\t\t\t\tpos\r\n\t\t\t\t);\r\n\r\n\t\t\t\t// Save the last connected position in case the position needs to be re-calculated.\r\n\t\t\t\tthis.lastConnectedPosition = pos;\r\n\r\n\t\t\t\treturn;\r\n\t\t\t} else if (\r\n\t\t\t\t!fallbackPoint ||\r\n\t\t\t\tfallbackPoint.visibleArea < overlayPoint.visibleArea\r\n\t\t\t) {\r\n\t\t\t\tfallbackPoint = overlayPoint;\r\n\t\t\t\tfallbackPosition = pos;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// If none of the preferred positions were in the viewport, take the one\r\n\t\t// with the largest visible area.\r\n\t\tthis._setElementPosition(\r\n\t\t\telement,\r\n\t\t\toverlayRect,\r\n\t\t\tfallbackPoint!,\r\n\t\t\tfallbackPosition!\r\n\t\t);\r\n\t}\r\n\r\n\t/**\r\n\t * Re-positions the overlay element with the trigger in its last calculated position,\r\n\t * even if a position higher in the \"preferred positions\" list would now fit. This\r\n\t * allows one to re-align the panel without changing the orientation of the panel.\r\n\t */\r\n\trecalculateLastPosition(): void {\r\n\t\t// If the overlay has never been positioned before, do nothing.\r\n\t\tif (!this.lastConnectedPosition) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tthis._validatePositions();\r\n\r\n\t\tconst originRect = this.origin.getBoundingClientRect();\r\n\t\tconst overlayRect = this.pane.getBoundingClientRect();\r\n\t\tconst viewportSize = {\r\n\t\t\twidth: window.innerWidth,\r\n\t\t\theight: window.innerHeight\r\n\t\t};\r\n\t\tconst lastPosition =\r\n\t\t\tthis.lastConnectedPosition || this.preferredPositions[0];\r\n\r\n\t\tconst originPoint = this._getOriginConnectionPoint(\r\n\t\t\toriginRect,\r\n\t\t\tlastPosition\r\n\t\t);\r\n\t\tconst overlayPoint = this._getOverlayPoint(\r\n\t\t\toriginPoint,\r\n\t\t\toverlayRect,\r\n\t\t\tviewportSize,\r\n\t\t\tlastPosition\r\n\t\t);\r\n\t\tthis._setElementPosition(\r\n\t\t\tthis.pane,\r\n\t\t\toverlayRect,\r\n\t\t\toverlayPoint,\r\n\t\t\tlastPosition\r\n\t\t);\r\n\t}\r\n\r\n\t/**\r\n\t * Sets the list of Scrollable containers that host the origin element so that\r\n\t * on reposition we can evaluate if it or the overlay has been clipped or outside view. Every\r\n\t * Scrollable must be an ancestor element of the strategy's origin element.\r\n\t */\r\n\twithScrollableContainers(scrollables: HTMLElement[]): this {\r\n\t\tthis.scrollables = scrollables;\r\n\t\treturn this;\r\n\t}\r\n\r\n\t/**\r\n\t * Adds a new preferred fallback position.\r\n\t * @param originPos\r\n\t * @param overlayPos\r\n\t */\r\n\twithFallbackPosition(\r\n\t\toriginPos: OriginConnectionPosition,\r\n\t\toverlayPos: OverlayConnectionPosition,\r\n\t\toffsetX?: number,\r\n\t\toffsetY?: number\r\n\t): this {\r\n\t\tconst position = new ConnectionPositionPair(\r\n\t\t\toriginPos,\r\n\t\t\toverlayPos,\r\n\t\t\toffsetX,\r\n\t\t\toffsetY\r\n\t\t);\r\n\t\tthis.preferredPositions.push(position);\r\n\t\treturn this;\r\n\t}\r\n\r\n\t/**\r\n\t * Sets an offset for the overlay's connection point on the x-axis\r\n\t * @param offset New offset in the X axis.\r\n\t */\r\n\twithOffsetX(offset: number): this {\r\n\t\tthis.offsetX = offset;\r\n\t\treturn this;\r\n\t}\r\n\r\n\t/**\r\n\t * Sets an offset for the overlay's connection point on the y-axis\r\n\t * @param offset New offset in the Y axis.\r\n\t */\r\n\twithOffsetY(offset: number): this {\r\n\t\tthis.offsetY = offset;\r\n\t\treturn this;\r\n\t}\r\n\r\n\t/**\r\n\t * Sets whether the overlay's position should be locked in after it is positioned\r\n\t * initially. When an overlay is locked in, it won't attempt to reposition itself\r\n\t * when the position is re-applied (e.g. when the user scrolls away).\r\n\t * @param isLocked Whether the overlay should locked in.\r\n\t */\r\n\twithLockedPosition(isLocked: boolean): this {\r\n\t\tthis.positionLocked = isLocked;\r\n\t\treturn this;\r\n\t}\r\n\r\n\t/**\r\n\t * Overwrites the current set of positions with an array of new ones.\r\n\t * @param positions Position pairs to be set on the strategy.\r\n\t */\r\n\twithPositions(positions: ConnectionPositionPair[]): this {\r\n\t\tthis.preferredPositions = positions.slice();\r\n\t\treturn this;\r\n\t}\r\n\r\n\t/**\r\n\t * Sets the origin element, relative to which to position the overlay.\r\n\t * @param origin Reference to the new origin element.\r\n\t */\r\n\tsetOrigin(origin: HTMLElement): this {\r\n\t\tthis.origin = origin;\r\n\t\treturn this;\r\n\t}\r\n\r\n\t/**\r\n\t * Gets the horizontal (x) \"start\" dimension\r\n\t * @param rect\r\n\t */\r\n\tprivate _getStartX(rect: ClientRect): number {\r\n\t\treturn rect.left;\r\n\t}\r\n\r\n\t/**\r\n\t * Gets the horizontal (x) \"end\" dimension\r\n\t * @param rect\r\n\t */\r\n\tprivate _getEndX(rect: ClientRect): number {\r\n\t\treturn rect.right;\r\n\t}\r\n\r\n\t/**\r\n\t * Gets the (x, y) coordinate of a connection point on the origin based on a relative position.\r\n\t * @param originRect\r\n\t * @param pos\r\n\t */\r\n\tprivate _getOriginConnectionPoint(\r\n\t\toriginRect: ClientRect,\r\n\t\tpos: ConnectionPositionPair\r\n\t): Point {\r\n\t\tconst originStartX = this._getStartX(originRect);\r\n\t\tconst originEndX = this._getEndX(originRect);\r\n\r\n\t\tlet x: number;\r\n\t\tif (pos.originX === 'center') {\r\n\t\t\tx = originStartX + originRect.width / 2;\r\n\t\t} else {\r\n\t\t\tx = pos.originX === 'start' ? originStartX : originEndX;\r\n\t\t}\r\n\r\n\t\tlet y: number;\r\n\t\tif (pos.originY === 'center') {\r\n\t\t\ty = originRect.top + originRect.height / 2;\r\n\t\t} else {\r\n\t\t\ty = pos.originY === 'top' ? originRect.top : originRect.bottom;\r\n\t\t}\r\n\r\n\t\treturn { x, y };\r\n\t}\r\n\r\n\t/**\r\n\t * Gets the (x, y) coordinate of the top-left corner of the overlay given a given position and\r\n\t * origin point to which the overlay should be connected, as well as how much of the element\r\n\t * would be inside the viewport at that position.\r\n\t */\r\n\tprivate _getOverlayPoint(\r\n\t\toriginPoint: Point,\r\n\t\toverlayRect: ClientRect,\r\n\t\tviewportSize: { width: number; height: number },\r\n\t\tpos: ConnectionPositionPair\r\n\t): OverlayPoint {\r\n\t\t// Calculate the (overlayStartX, overlayStartY), the start of the potential overlay position\r\n\t\t// relative to the origin point.\r\n\t\tlet overlayStartX: number;\r\n\t\tif (pos.overlayX === 'center') {\r\n\t\t\toverlayStartX = -overlayRect.width / 2;\r\n\t\t} else if (pos.overlayX === 'start') {\r\n\t\t\toverlayStartX = 0;\r\n\t\t} else {\r\n\t\t\toverlayStartX = -overlayRect.width;\r\n\t\t}\r\n\r\n\t\tlet overlayStartY: number;\r\n\t\tif (pos.overlayY === 'center') {\r\n\t\t\toverlayStartY = -overlayRect.height / 2;\r\n\t\t} else {\r\n\t\t\toverlayStartY = pos.overlayY === 'top' ? 0 : -overlayRect.height;\r\n\t\t}\r\n\r\n\t\t// The (x, y) offsets of the overlay based on the current position.\r\n\t\tconst offsetX =\r\n\t\t\ttypeof pos.offsetX === 'undefined' ? this.offsetX : pos.offsetX;\r\n\t\tconst offsetY =\r\n\t\t\ttypeof pos.offsetY === 'undefined' ? this.offsetY : pos.offsetY;\r\n\r\n\t\t// The (x, y) coordinates of the overlay.\r\n\t\tconst x = originPoint.x + overlayStartX + offsetX;\r\n\t\tconst y = originPoint.y + overlayStartY + offsetY;\r\n\r\n\t\t// How much the overlay would overflow at this position, on each side.\r\n\t\tconst leftOverflow = 0 - x;\r\n\t\tconst rightOverflow = x + overlayRect.width - viewportSize.width;\r\n\t\tconst topOverflow = 0 - y;\r\n\t\tconst bottomOverflow = y + overlayRect.height - viewportSize.height;\r\n\r\n\t\t// Visible parts of the element on each axis.\r\n\t\tconst visibleWidth = this._subtractOverflows(\r\n\t\t\toverlayRect.width,\r\n\t\t\tleftOverflow,\r\n\t\t\trightOverflow\r\n\t\t);\r\n\t\tconst visibleHeight = this._subtractOverflows(\r\n\t\t\toverlayRect.height,\r\n\t\t\ttopOverflow,\r\n\t\t\tbottomOverflow\r\n\t\t);\r\n\r\n\t\t// The area of the element that's within the viewport.\r\n\t\tconst visibleArea = visibleWidth * visibleHeight;\r\n\t\tconst fitsInViewport =\r\n\t\t\toverlayRect.width * overlayRect.height === visibleArea;\r\n\r\n\t\treturn { x, y, fitsInViewport, visibleArea };\r\n\t}\r\n\r\n\t/**\r\n\t * Gets the view properties of the trigger and overlay, including whether they are clipped\r\n\t * or completely outside the view of any of the strategy's scrollables.\r\n\t */\r\n\tprivate _getScrollVisibility(overlay: HTMLElement): ScrollingVisibility {\r\n\t\tconst originBounds = this.origin.getBoundingClientRect();\r\n\t\tconst overlayBounds = overlay.getBoundingClientRect();\r\n\t\tconst scrollContainerBounds = this.scrollables.map(s =>\r\n\t\t\ts.getBoundingClientRect()\r\n\t\t);\r\n\r\n\t\treturn {\r\n\t\t\tisOriginClipped: isElementClippedByScrolling(\r\n\t\t\t\toriginBounds,\r\n\t\t\t\tscrollContainerBounds\r\n\t\t\t),\r\n\t\t\tisOriginOutsideView: isElementScrolledOutsideView(\r\n\t\t\t\toriginBounds,\r\n\t\t\t\tscrollContainerBounds\r\n\t\t\t),\r\n\t\t\tisOverlayClipped: isElementClippedByScrolling(\r\n\t\t\t\toverlayBounds,\r\n\t\t\t\tscrollContainerBounds\r\n\t\t\t),\r\n\t\t\tisOverlayOutsideView: isElementScrolledOutsideView(\r\n\t\t\t\toverlayBounds,\r\n\t\t\t\tscrollContainerBounds\r\n\t\t\t)\r\n\t\t};\r\n\t}\r\n\r\n\t/** Physically positions the overlay element to the given coordinate. */\r\n\tprivate _setElementPosition(\r\n\t\telement: HTMLElement,\r\n\t\toverlayRect: ClientRect,\r\n\t\toverlayPoint: Point,\r\n\t\tpos: ConnectionPositionPair\r\n\t) {\r\n\t\t// We want to set either `top` or `bottom` based on whether the overlay wants to appear above\r\n\t\t// or below the origin and the direction in which the element will expand.\r\n\t\tconst verticalStyleProperty =\r\n\t\t\tpos.overlayY === 'bottom' ? 'bottom' : 'top';\r\n\r\n\t\t// When using `bottom`, we adjust the y position such that it is the distance\r\n\t\t// from the bottom of the viewport rather than the top.\r\n\t\tconst y =\r\n\t\t\tverticalStyleProperty === 'top'\r\n\t\t\t\t? overlayPoint.y\r\n\t\t\t\t: this.document.documentElement.clientHeight -\r\n\t\t\t\t (overlayPoint.y + overlayRect.height);\r\n\r\n\t\tconst horizontalStyleProperty =\r\n\t\t\tpos.overlayX === 'end' ? 'right' : 'left';\r\n\r\n\t\t// When we're setting `right`, we adjust the x position such that it is the distance\r\n\t\t// from the right edge of the viewport rather than the left edge.\r\n\t\tconst x =\r\n\t\t\thorizontalStyleProperty === 'left'\r\n\t\t\t\t? overlayPoint.x\r\n\t\t\t\t: this.document.documentElement.clientWidth -\r\n\t\t\t\t (overlayPoint.x + overlayRect.width);\r\n\r\n\t\t// Reset any existing styles. This is necessary in case the preferred position has\r\n\t\t// changed since the last `apply`.\r\n\t\t['top', 'bottom', 'left', 'right'].forEach(\r\n\t\t\tp => (element.style[p] = null)\r\n\t\t);\r\n\r\n\t\telement.style[verticalStyleProperty] = `${y}px`;\r\n\t\telement.style[horizontalStyleProperty] = `${x}px`;\r\n\r\n\t\t// Notify that the position has been changed along with its change properties.\r\n\t\tconst scrollableViewProperties = this._getScrollVisibility(element);\r\n\t\tconst positionChange = new ConnectedOverlayPositionChange(\r\n\t\t\tpos,\r\n\t\t\tscrollableViewProperties\r\n\t\t);\r\n\r\n\t\tif (this.onPositionChange) {\r\n\t\t\tthis.onPositionChange(positionChange);\r\n\t\t}\r\n\t}\r\n\r\n\t/** Subtracts the amount that an element is overflowing on an axis from it's length. */\r\n\tprivate _subtractOverflows(length: number, ...overflows: number[]): number {\r\n\t\treturn overflows.reduce(\r\n\t\t\t(currentValue: number, currentOverflow: number) => {\r\n\t\t\t\treturn currentValue - Math.max(currentOverflow, 0);\r\n\t\t\t},\r\n\t\t\tlength\r\n\t\t);\r\n\t}\r\n\r\n\t/** Validates that the current position match the expected values. */\r\n\tprivate _validatePositions(): void {\r\n\t\tif (!this.preferredPositions.length) {\r\n\t\t\tthrow Error(\r\n\t\t\t\t'ConnectedPositionStrategy: At least one position is required.'\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\t// TODO(crisbeto): remove these once Angular's template type\r\n\t\t// checking is advanced enough to catch these cases.\r\n\t\tthis.preferredPositions.forEach(pair => {\r\n\t\t\tvalidateHorizontalPosition('originX', pair.originX);\r\n\t\t\tvalidateVerticalPosition('originY', pair.originY);\r\n\t\t\tvalidateHorizontalPosition('overlayX', pair.overlayX);\r\n\t\t\tvalidateVerticalPosition('overlayY', pair.overlayY);\r\n\t\t});\r\n\t}\r\n\r\n\tprivate _handleResizeChange() {\r\n\t\tthis.apply();\r\n\t}\r\n}\r\n\r\n/** A simple (x, y) coordinate. */\r\n// tslint:disable-next-line:interface-name\r\ninterface Point {\r\n\tx: number;\r\n\ty: number;\r\n}\r\n\r\n/**\r\n * Expands the simple (x, y) coordinate by adding info about whether the\r\n * element would fit inside the viewport at that position, as well as\r\n * how much of the element would be visible.\r\n */\r\n// tslint:disable-next-line:interface-name\r\ninterface OverlayPoint extends Point {\r\n\tvisibleArea: number;\r\n\tfitsInViewport: boolean;\r\n}\r\n","/** Horizontal dimension of a connection point on the perimeter of the origin or overlay element. */\r\nexport type HorizontalConnectionPos = 'start' | 'center' | 'end';\r\n\r\n/** Vertical dimension of a connection point on the perimeter of the origin or overlay element. */\r\nexport type VerticalConnectionPos = 'top' | 'center' | 'bottom';\r\n\r\n/** A connection point on the origin element. */\r\n// tslint:disable-next-line:interface-name\r\nexport interface OriginConnectionPosition {\r\n\toriginX: HorizontalConnectionPos;\r\n\toriginY: VerticalConnectionPos;\r\n}\r\n\r\n/** A connection point on the overlay element. */\r\n// tslint:disable-next-line:interface-name\r\nexport interface OverlayConnectionPosition {\r\n\toverlayX: HorizontalConnectionPos;\r\n\toverlayY: VerticalConnectionPos;\r\n}\r\n\r\n/** The points of the origin element and the overlay element to connect. */\r\nexport class ConnectionPositionPair {\r\n\t/** X-axis attachment point for connected overlay origin. Can be 'start', 'end', or 'center'. */\r\n\toriginX: HorizontalConnectionPos;\r\n\t/** Y-axis attachment point for connected overlay origin. Can be 'top', 'bottom', or 'center'. */\r\n\toriginY: VerticalConnectionPos;\r\n\t/** X-axis attachment point for connected overlay. Can be 'start', 'end', or 'center'. */\r\n\toverlayX: HorizontalConnectionPos;\r\n\t/** Y-axis attachment point for connected overlay. Can be 'top', 'bottom', or 'center'. */\r\n\toverlayY: VerticalConnectionPos;\r\n\r\n\tconstructor(\r\n\t\torigin: OriginConnectionPosition,\r\n\t\toverlay: OverlayConnectionPosition,\r\n\t\tpublic offsetX?: number,\r\n\t\tpublic offsetY?: number\r\n\t) {\r\n\t\tthis.originX = origin.originX;\r\n\t\tthis.originY = origin.originY;\r\n\t\tthis.overlayX = overlay.overlayX;\r\n\t\tthis.overlayY = overlay.overlayY;\r\n\t}\r\n}\r\n\r\n/**\r\n * Set of properties regarding the position of the origin and overlay relative to the viewport\r\n * with respect to the containing Scrollable elements.\r\n *\r\n * The overlay and origin are clipped if any part of their bounding client rectangle exceeds the\r\n * bounds of any one of the strategy's Scrollable's bounding client rectangle.\r\n *\r\n * The overlay and origin are outside view if there is no overlap between their bounding client\r\n * rectangle and any one of the strategy's Scrollable's bounding client rectangle.\r\n *\r\n * ----------- -----------\r\n * | outside | | clipped |\r\n * | view | --------------------------\r\n * | | | | | |\r\n * ---------- | ----------- |\r\n * -------------------------- | |\r\n * | | | Scrollable |\r\n * | | | |\r\n * | | --------------------------\r\n * | Scrollable |\r\n * | |\r\n * --------------------------\r\n *\r\n * @docs-private\r\n */\r\nexport class ScrollingVisibility {\r\n\tisOriginClipped: boolean;\r\n\tisOriginOutsideView: boolean;\r\n\tisOverlayClipped: boolean;\r\n\tisOverlayOutsideView: boolean;\r\n}\r\n\r\n/** The change event emitted by the strategy when a fallback position is used. */\r\nexport class ConnectedOverlayPositionChange {\r\n\tconstructor(\r\n\t\t/** The position used as a result of this change. */\r\n\t\tpublic connectionPair: ConnectionPositionPair,\r\n\t\tpublic scrollableViewProperties?: ScrollingVisibility\r\n\t) {}\r\n}\r\n\r\n/**\r\n * Validates whether a vertical position property matches the expected values.\r\n * @param property Name of the property being validated.\r\n * @param value Value of the property being validated.\r\n * @docs-private\r\n */\r\nexport function validateVerticalPosition(\r\n\tproperty: string,\r\n\tvalue: VerticalConnectionPos\r\n) {\r\n\tif (value !== 'top' && value !== 'bottom' && value !== 'center') {\r\n\t\tthrow Error(\r\n\t\t\t`ConnectedPosition: Invalid ${property} '${value}'. ` +\r\n\t\t\t\t\"Expected 'top', 'bottom' or 'center'.\"\r\n\t\t);\r\n\t}\r\n}\r\n\r\n/**\r\n * Validates whether a horizontal position property matches the expected values.\r\n * @param property Name of the property being validated.\r\n * @param value Value of the property being validated.\r\n * @docs-private\r\n */\r\nexport function validateHorizontalPosition(\r\n\tproperty: string,\r\n\tvalue: HorizontalConnectionPos\r\n) {\r\n\tif (value !== 'start' && value !== 'end' && value !== 'center') {\r\n\t\tthrow Error(\r\n\t\t\t`ConnectedPosition: Invalid ${property} '${value}'. ` +\r\n\t\t\t\t\"Expected 'start', 'end' or 'center'.\"\r\n\t\t);\r\n\t}\r\n}\r\n","import { addClass } from '@opten/dom/add-class';\r\nimport { PositionStrategy } from './position-strategy';\r\nimport { Overlay } from '../overlay';\r\n\r\n/**\r\n * A strategy for positioning overlays. Using this strategy, an overlay is given an\r\n * explicit position relative to the browser's viewport. We use flexbox, instead of\r\n * transforms, in order to avoid issues with subpixel rendering which can cause the\r\n * element to become blurry.\r\n */\r\nexport class GlobalPositionStrategy implements PositionStrategy {\r\n\t/** The overlay to which this strategy is attached. */\r\n\tprivate overlayRef: Overlay;\r\n\r\n\tprivate cssPosition = 'static';\r\n\tprivate topOffset = '';\r\n\tprivate bottomOffset = '';\r\n\tprivate leftOffset = '';\r\n\tprivate rightOffset = '';\r\n\tprivate alignItems = '';\r\n\tprivate justifyContent = '';\r\n\tprivate width = '';\r\n\tprivate height = '';\r\n\r\n\t/** A lazily-created wrapper for the overlay element that is used as a flex container. */\r\n\tprivate wrapper: HTMLElement | null = null;\r\n\r\n\tconstructor(private document: Document) {}\r\n\r\n\tattach(overlayRef: Overlay): void {\r\n\t\tconst options = overlayRef.getOptions();\r\n\r\n\t\tthis.overlayRef = overlayRef;\r\n\r\n\t\tif (this.width && !options.width) {\r\n\t\t\toverlayRef.updateSize({ width: this.width });\r\n\t\t}\r\n\r\n\t\tif (this.height && !options.height) {\r\n\t\t\toverlayRef.updateSize({ height: this.height });\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Sets the top position of the overlay. Clears any previously set vertical position.\r\n\t * @param value New top offset.\r\n\t */\r\n\ttop(value = ''): this {\r\n\t\tthis.bottomOffset = '';\r\n\t\tthis.topOffset = value;\r\n\t\tthis.alignItems = 'flex-start';\r\n\t\treturn this;\r\n\t}\r\n\r\n\t/**\r\n\t * Sets the left position of the overlay. Clears any previously set horizontal position.\r\n\t * @param value New left offset.\r\n\t */\r\n\tleft(value = ''): this {\r\n\t\tthis.rightOffset = '';\r\n\t\tthis.leftOffset = value;\r\n\t\tthis.justifyContent = 'flex-start';\r\n\t\treturn this;\r\n\t}\r\n\r\n\t/**\r\n\t * Sets the bottom position of the overlay. Clears any previously set vertical position.\r\n\t * @param value New bottom offset.\r\n\t */\r\n\tbottom(value = ''): this {\r\n\t\tthis.topOffset = '';\r\n\t\tthis.bottomOffset = value;\r\n\t\tthis.alignItems = 'flex-end';\r\n\t\treturn this;\r\n\t}\r\n\r\n\t/**\r\n\t * Sets the right position of the overlay. Clears any previously set horizontal position.\r\n\t * @param value New right offset.\r\n\t */\r\n\tright(value = ''): this {\r\n\t\tthis.leftOffset = '';\r\n\t\tthis.rightOffset = value;\r\n\t\tthis.justifyContent = 'flex-end';\r\n\t\treturn this;\r\n\t}\r\n\r\n\t/**\r\n\t * Centers the overlay horizontally with an optional offset.\r\n\t * Clears any previously set horizontal position.\r\n\t *\r\n\t * @param offset Overlay offset from the horizontal center.\r\n\t */\r\n\tcenterHorizontally(offset = ''): this {\r\n\t\tthis.left(offset);\r\n\t\tthis.justifyContent = 'center';\r\n\t\treturn this;\r\n\t}\r\n\r\n\t/**\r\n\t * Centers the overlay vertically with an optional offset.\r\n\t * Clears any previously set vertical position.\r\n\t *\r\n\t * @param offset Overlay offset from the vertical center.\r\n\t */\r\n\tcenterVertically(offset = ''): this {\r\n\t\tthis.top(offset);\r\n\t\tthis.alignItems = 'center';\r\n\t\treturn this;\r\n\t}\r\n\r\n\t/**\r\n\t * Apply the position to the element.\r\n\t * @docs-private\r\n\t *\r\n\t * @returns Resolved when the styles have been applied.\r\n\t */\r\n\tapply() {\r\n\t\t// Since the overlay ref applies the strategy asynchronously, it could\r\n\t\t// have been disposed before it ends up being applied. If that is the\r\n\t\t// case, we shouldn't do anything.\r\n\t\tif (!this.overlayRef.hasAttached()) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst element = this.overlayRef.overlayElement;\r\n\r\n\t\tif (!this.wrapper && element.parentNode) {\r\n\t\t\tthis.wrapper = this.document.createElement('div');\r\n\t\t\taddClass(this.wrapper, 'c-overlay__global'); // todo: settings?\r\n\t\t\telement.parentNode.insertBefore(this.wrapper!, element);\r\n\t\t\tthis.wrapper!.appendChild(element);\r\n\t\t}\r\n\r\n\t\tconst parentStyles = (element.parentNode as HTMLElement).style;\r\n\t\tconst options = this.overlayRef.getOptions();\r\n\r\n\t\telement.style.position = this.cssPosition;\r\n\t\telement.style.marginLeft =\r\n\t\t\toptions.width === '100%' ? '0' : this.leftOffset;\r\n\t\telement.style.marginTop =\r\n\t\t\toptions.height === '100%' ? '0' : this.topOffset;\r\n\t\telement.style.marginBottom = this.bottomOffset;\r\n\t\telement.style.marginRight = this.rightOffset;\r\n\r\n\t\tparentStyles.justifyContent =\r\n\t\t\toptions.width === '100%' ? 'flex-start' : this.justifyContent;\r\n\t\tparentStyles.alignItems =\r\n\t\t\toptions.height === '100%' ? 'flex-start' : this.alignItems;\r\n\t}\r\n\r\n\t/** Removes the wrapper element from the DOM. */\r\n\tdispose() {\r\n\t\tif (this.wrapper && this.wrapper.parentNode) {\r\n\t\t\tthis.wrapper.parentNode.removeChild(this.wrapper);\r\n\t\t\tthis.wrapper = null;\r\n\t\t}\r\n\t}\r\n}\r\n","import {\r\n\tOriginConnectionPosition,\r\n\tOverlayConnectionPosition\r\n} from './connected-position';\r\nimport { ConnectedPositionStrategy } from './connected-position-strategy';\r\nimport { GlobalPositionStrategy } from './global-position-strategy';\r\n\r\nexport class OverlayPositionBuilder {\r\n\t/**\r\n\t * Creates a global position strategy.\r\n\t */\r\n\tglobal(): GlobalPositionStrategy {\r\n\t\treturn new GlobalPositionStrategy(document);\r\n\t}\r\n\r\n\t/**\r\n\t * Creates a relative position strategy.\r\n\t * @param elementRef\r\n\t * @param originPos\r\n\t * @param overlayPos\r\n\t */\r\n\tconnectedTo(\r\n\t\telementRef: HTMLElement,\r\n\t\toriginPos: OriginConnectionPosition,\r\n\t\toverlayPos: OverlayConnectionPosition\r\n\t): ConnectedPositionStrategy {\r\n\t\treturn new ConnectedPositionStrategy(\r\n\t\t\toriginPos,\r\n\t\t\toverlayPos,\r\n\t\t\telementRef,\r\n\t\t\tdocument\r\n\t\t);\r\n\t}\r\n}\r\n","import { Overlay } from '../overlay';\r\n\r\n/** Strategy for setting the position on an overlay. */\r\nexport interface PositionStrategy {\r\n /** Attaches this position strategy to an overlay. */\r\n attach(overlay: Overlay): void;\r\n\r\n /** Updates the position of the overlay element. */\r\n apply(): void;\r\n\r\n /** Called when the overlay is detached. */\r\n detach?(): void;\r\n\r\n /** Cleans up any DOM modifications made by the position strategy, if necessary. */\r\n dispose(): void;\r\n}\r\n","import { isElementScrolledOutsideView } from '@opten/viewport/is-element-scrolled-outside-view';\r\n\r\nimport { ScrollStrategy } from './scroll-strategy';\r\nimport { Overlay } from '../overlay';\r\n\r\n/**\r\n * Config options for the RepositionScrollStrategy.\r\n */\r\n// tslint:disable-next-line:interface-name\r\nexport interface RepositionScrollStrategyConfig {\r\n\t/** Time in milliseconds to throttle the scroll events. */\r\n\tscrollThrottle?: number;\r\n\r\n\t/** Whether to close the overlay once the user has scrolled away completely. */\r\n\tautoClose?: boolean;\r\n}\r\n\r\n/**\r\n * Strategy that will update the element position as the user is scrolling.\r\n */\r\nexport class RepositionScrollStrategy implements ScrollStrategy {\r\n\tprivate overlayRef: Overlay;\r\n\tprivate applied = false;\r\n\r\n\tconstructor(private config?: RepositionScrollStrategyConfig) {}\r\n\r\n\t/** Attaches this scroll strategy to an overlay. */\r\n\tattach(overlayRef: Overlay) {\r\n\t\tthis.overlayRef = overlayRef;\r\n\t}\r\n\r\n\t/** Enables repositioning of the attached overlay on scroll. */\r\n\tenable() {\r\n\t\tif (!this.applied) {\r\n\t\t\twindow.addEventListener('scroll', this.handleScroll);\r\n\t\t\tthis.applied = true;\r\n\t\t}\r\n\t}\r\n\r\n\t/** Disables repositioning of the attached overlay on scroll. */\r\n\tdisable() {\r\n\t\tif (this.applied) {\r\n\t\t\twindow.removeEventListener('scroll', this.handleScroll);\r\n\t\t\tthis.applied = false;\r\n\t\t}\r\n\t}\r\n\r\n\tprivate handleScroll = () => {\r\n\t\tconst throttle = this.config ? this.config.scrollThrottle : 0;\r\n\t\tconst autoClose = this.config ? this.config.autoClose : true;\r\n\r\n\t\tconst update = () => {\r\n\t\t\tthis.overlayRef.updatePosition();\r\n\r\n\t\t\tif (autoClose) {\r\n\t\t\t\tconst overlayRect = this.overlayRef.overlayElement.getBoundingClientRect();\r\n\t\t\t\tconst { width, height } = {\r\n\t\t\t\t\twidth: window.innerWidth,\r\n\t\t\t\t\theight: window.innerHeight\r\n\t\t\t\t};\r\n\r\n\t\t\t\t// todo: include all ancestor scroll containers here once\r\n\t\t\t\t// we have a way of exposing the trigger element to the scroll strategy.\r\n\t\t\t\tconst parentRects = [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\twidth,\r\n\t\t\t\t\t\theight,\r\n\t\t\t\t\t\tbottom: height,\r\n\t\t\t\t\t\tright: width,\r\n\t\t\t\t\t\ttop: 0,\r\n\t\t\t\t\t\tleft: 0\r\n\t\t\t\t\t}\r\n\t\t\t\t];\r\n\r\n\t\t\t\tif (isElementScrolledOutsideView(overlayRect, parentRects)) {\r\n\t\t\t\t\tthis.disable();\r\n\t\t\t\t\tthis.overlayRef.close();\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\tif (throttle > 0) {\r\n\t\t\tsetTimeout(() => update(), throttle);\r\n\t\t} else {\r\n\t\t\tupdate();\r\n\t\t}\r\n\t};\r\n}\r\n","export function debounce(func: Function, wait: number, immediate?: boolean) {\r\n\tlet timeout;\r\n\tlet result;\r\n\treturn function debounceFn() {\r\n\t\tconst context = this;\r\n\t\tconst args = arguments;\r\n\t\tconst later = () => {\r\n\t\t\ttimeout = null;\r\n\t\t\tif (!immediate) {\r\n\t\t\t\tresult = func.apply(context, args);\r\n\t\t\t}\r\n\t\t};\r\n\t\tconst callNow = immediate && !timeout;\r\n\t\tclearTimeout(timeout);\r\n\t\ttimeout = setTimeout(later, wait);\r\n\t\tif (callNow) {\r\n\t\t\tresult = func.apply(context, args);\r\n\t\t}\r\n\t\treturn result;\r\n\t};\r\n}\r\n","interface LoadingScriptWindow extends Window {\r\n\tloadingScripts: string[];\r\n}\r\n\r\nconst loadingScriptWindow = window as LoadingScriptWindow;\r\n\r\nloadingScriptWindow.loadingScripts = loadingScriptWindow.loadingScripts || [];\r\n\r\nexport function createScript(src: string, onerror: () => void = () => {}) {\r\n\tconst scriptElement = document.createElement('script');\r\n\tscriptElement.src = src;\r\n\tscriptElement.async = false;\r\n\tscriptElement.onload = e => {\r\n\t\tremoveLoadingScript(src);\r\n\t};\r\n\tscriptElement.onerror = e => {\r\n\t\tconsole.error(e);\r\n\t\tremoveLoadingScript(src);\r\n\t\tonerror();\r\n\t};\r\n\tloadingScriptWindow.loadingScripts.push(src);\r\n\treturn scriptElement;\r\n}\r\n\r\nfunction removeLoadingScript(src: string) {\r\n\tconst index = loadingScriptWindow.loadingScripts.indexOf(src);\r\n\tif (index > -1) {\r\n\t\tloadingScriptWindow.loadingScripts = loadingScriptWindow.loadingScripts.splice(\r\n\t\t\tindex,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n}\r\n","import { removeDomain } from '@opten/url/remove-domain';\r\n\r\nexport function getScriptBySrc(src: string): HTMLScriptElement {\r\n\t// HINT: NEVER EVER change to Array.from() we need this code in load-polyfill\r\n\t// and IE doesn't understand this until the polyfills are obviously loaded!\r\n\tconst scripts = document.getElementsByTagName('script');\r\n\tfor (let i = 0; i < scripts.length; i++) {\r\n\t\tconst currentScriptElement = scripts.item(i);\r\n\t\tconst currentSrc = removeDomain(currentScriptElement.src);\r\n\t\tif (currentSrc === src) {\r\n\t\t\treturn currentScriptElement;\r\n\t\t}\r\n\t}\r\n\treturn null;\r\n}\r\n","import { AnimationFunction } from '@opten/animation/animation-function';\r\nimport { linearTween } from '@opten/animation/linear-tween';\r\nimport { scrollToOffset } from '../scroll-to-offset';\r\n\r\nexport function scrollToElement(\r\n\ttarget: Element,\r\n\tanimation: AnimationFunction = linearTween,\r\n\tduration = 300,\r\n\toffset = 0,\r\n\twrapper: HTMLElement | Window = window\r\n) {\r\n\tconst top =\r\n\t\twrapper !== window\r\n\t\t\t? (target as HTMLElement).offsetTop -\r\n\t\t\t (wrapper as HTMLElement).scrollTop\r\n\t\t\t: target.getBoundingClientRect().top;\r\n\r\n\treturn scrollToOffset(top, animation, duration, offset, wrapper);\r\n}\r\n","import { AnimationFunction } from '@opten/animation/animation-function';\r\nimport { linearTween } from '@opten/animation/linear-tween';\r\nimport { scrollToElement } from '../scroll-to-element';\r\n\r\nexport function scrollToId(\r\n\tid: string,\r\n\tanimationFunction: AnimationFunction = linearTween,\r\n\tduration = 300,\r\n\toffset = 0,\r\n\twrapper: HTMLElement | Window = window\r\n) {\r\n\treturn scrollToElement(\r\n\t\tdocument.getElementById(id),\r\n\t\tanimationFunction,\r\n\t\tduration,\r\n\t\toffset,\r\n\t\twrapper\r\n\t);\r\n}\r\n","import { AnimationFunction } from '@opten/animation/animation-function';\r\nimport { linearTween } from '@opten/animation/linear-tween';\r\nimport { scrollTo } from '../scroll-to';\r\n\r\nexport function scrollToOffset(\r\n\tdistance: number,\r\n\tanimationFunction: AnimationFunction = linearTween,\r\n\tduration = 300,\r\n\toffset = 0,\r\n\twrapper: HTMLElement | Window = window\r\n) {\r\n\tscrollTo(distance + offset, animationFunction, duration, wrapper);\r\n}\r\n","import { AnimationFunction } from '@opten/animation/animation-function';\r\nimport { getWindowScrollTop } from '@opten/dom/get-window-scroll-top';\r\n\r\nexport function scrollTo(\r\n\tdistance: number,\r\n\tanimationFunction: AnimationFunction = (t, b, c, d) => {\r\n\t\treturn (c * t) / d + b;\r\n\t},\r\n\tduration = 300,\r\n\twrapper: HTMLElement | Window = window\r\n) {\r\n\tlet start = getWindowScrollTop();\r\n\tlet timeStart: number;\r\n\tlet timeElapsed: number;\r\n\r\n\tif (wrapper instanceof HTMLElement) {\r\n\t\tstart = wrapper.scrollTop;\r\n\t}\r\n\r\n\trequestAnimationFrame.call(window, time => {\r\n\t\ttimeStart = time;\r\n\t\tloop(time);\r\n\t});\r\n\r\n\tfunction loop(time) {\r\n\t\ttimeElapsed = time - timeStart;\r\n\r\n\t\tif (wrapper instanceof Window) {\r\n\t\t\twrapper.scrollTo(\r\n\t\t\t\t0,\r\n\t\t\t\tanimationFunction(timeElapsed, start, distance, duration)\r\n\t\t\t);\r\n\r\n\t\t\tif (timeElapsed < duration) {\r\n\t\t\t\trequestAnimationFrame.call(window, loop);\r\n\t\t\t} else {\r\n\t\t\t\twrapper.scrollTo(0, start + distance);\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\twrapper.scrollTop = animationFunction(\r\n\t\t\t\ttimeElapsed,\r\n\t\t\t\tstart,\r\n\t\t\t\tdistance,\r\n\t\t\t\tduration\r\n\t\t\t);\r\n\r\n\t\t\tif (timeElapsed < duration) {\r\n\t\t\t\trequestAnimationFrame.call(window, loop);\r\n\t\t\t} else {\r\n\t\t\t\twrapper.scrollTop = start + distance;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n","import { AnimationFunction } from '@opten/animation/animation-function';\r\nimport { linearTween } from '@opten/animation/linear-tween';\r\nimport { scrollToOffset } from '../scroll-to-offset';\r\nimport { getWindowScrollTop } from '@opten/dom/get-window-scroll-top';\r\n\r\nexport function scrollTop(\r\n\tanimationFunction: AnimationFunction = linearTween,\r\n\tduration = 300,\r\n\toffset = 0\r\n) {\r\n\tscrollToOffset(-getWindowScrollTop(), animationFunction, duration, offset);\r\n}\r\n","import { newGuid } from '../common/new-guid';\r\nimport { addClass } from '../dom/add-class';\r\nimport { removeClass } from '../dom/remove-class';\r\nimport { createNode } from '../dom/create-node';\r\nimport { KEYCODES } from '../keycodes';\r\nimport {\r\n\toverlay,\r\n\tOverlay,\r\n\tOverlayOptions,\r\n\tConnectedPositionStrategy,\r\n\tOverlayPositionBuilder,\r\n\tOriginConnectionPosition,\r\n\tOverlayConnectionPosition\r\n} from '../overlay';\r\nimport { parseCssUnit } from '../number/parse-css-unit';\r\nimport { getCss } from '../dom/get-css';\r\nimport { RepositionScrollStrategy } from '../overlay/scroll/reposition-scroll-strategy';\r\n\r\n/**\r\n * The following style constants are necessary to save here in order\r\n * to properly calculate the alignment of the selected option over\r\n * the trigger element.\r\n */\r\n\r\nexport class SelectOptions {\r\n\tclasses: {\r\n\t\tcomponent: string;\r\n\t\tactive: string;\r\n\t\thighlighted: string;\r\n\t\tdisabled: string;\r\n\t};\r\n}\r\n\r\nexport class Option {\r\n\tconstructor(private element: HTMLOptionElement) {\r\n\t\t// this properties are cached\r\n\t\tthis.text = (this.element.textContent || '').trim();\r\n\t\tthis.disabled = this.element.disabled;\r\n\t}\r\n\r\n\tget disabled() {\r\n\t\treturn this._disabled;\r\n\t}\r\n\tset disabled(value: boolean) {\r\n\t\tthis._disabled = value;\r\n\t}\r\n\tprivate _disabled: boolean;\r\n\r\n\tget text() {\r\n\t\treturn this._text;\r\n\t}\r\n\tset text(value: string) {\r\n\t\tthis._text = value;\r\n\t}\r\n\tprivate _text: string;\r\n\r\n\tget value() {\r\n\t\t// don't cache value, might change!\r\n\t\treturn (this.element.value || '').trim();\r\n\t}\r\n}\r\n\r\nexport class Select {\r\n\tprivate overlayRef: Overlay;\r\n\tprivate position: ConnectedPositionStrategy;\r\n\r\n\tprivate select: HTMLElement;\r\n\tprivate options: Option[];\r\n\tprivate selectedIndex: number;\r\n\tprivate activeIndex: number;\r\n\tprivate uuid: string;\r\n\r\n\tprivate triggerElement: HTMLElement;\r\n\tprivate triggerRect: ClientRect;\r\n\tprivate optionElements: HTMLElement[];\r\n\r\n\tprivate config: SelectOptions = {\r\n\t\tclasses: {\r\n\t\t\tcomponent: 'c-select',\r\n\t\t\tactive: 'is-active',\r\n\t\t\thighlighted: 'is-highlighted',\r\n\t\t\tdisabled: 'is-disabled'\r\n\t\t}\r\n\t};\r\n\r\n\t/** The scroll position of the overlay panel, calculated to center the selected option. */\r\n\tprivate scrollTop = 0;\r\n\r\n\t/**\r\n\t * The y-offset of the overlay panel in relation to the trigger's top start corner.\r\n\t * This must be adjusted to align the selected option text over the trigger text.\r\n\t * when the panel opens. Will change based on the y-position of the selected option.\r\n\t */\r\n\tprivate offsetY = 0;\r\n\r\n\t/**\r\n\t * This position config ensures that the top \"start\" corner of the overlay\r\n\t * is aligned with with the top \"start\" of the origin by default (overlapping\r\n\t * the trigger completely). If the panel cannot fit below the trigger, it\r\n\t * will fall back to a position above the trigger.\r\n\t */\r\n\tprivate positions = [\r\n\t\t{\r\n\t\t\toriginX: 'start',\r\n\t\t\toriginY: 'top',\r\n\t\t\toverlayX: 'start',\r\n\t\t\toverlayY: 'top'\r\n\t\t},\r\n\t\t{\r\n\t\t\toriginX: 'start',\r\n\t\t\toriginY: 'bottom',\r\n\t\t\toverlayX: 'start',\r\n\t\t\toverlayY: 'bottom'\r\n\t\t}\r\n\t];\r\n\r\n\t/** Whether or not the overlay panel is open. */\r\n\tprivate panelOpen = false;\r\n\r\n\tprivate panelHTML: string;\r\n\r\n\tconstructor(\r\n\t\tprivate selectElement: HTMLSelectElement,\r\n\t\toptions?: SelectOptions\r\n\t) {\r\n\t\tthis.config = { ...this.config, ...options };\r\n\r\n\t\tthis.selectedIndex = this._getSelectedIndex();\r\n\r\n\t\tthis.activeIndex = !this.selectedIndex ? 0 : this.selectedIndex;\r\n\r\n\t\tthis.uuid = newGuid();\r\n\r\n\t\tthis._init();\r\n\t}\r\n\r\n\topen(): void {\r\n\t\t// todo: implement disabled?\r\n\t\tif (\r\n\t\t\t/*this.disabled ||*/ !this.options ||\r\n\t\t\t!this.options.length ||\r\n\t\t\tthis.panelOpen\r\n\t\t) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tthis.triggerRect = this.triggerElement.getBoundingClientRect();\r\n\r\n\t\tthis.panelOpen = true;\r\n\t\tthis._createOverlay().open();\r\n\r\n\t\tthis._calculateOverlayPosition();\r\n\t\tthis._highlightCorrectOption();\r\n\t\tthis._scrollActiveOptionIntoView();\r\n\t}\r\n\r\n\tclose(): void {\r\n\t\tif (this.panelOpen) {\r\n\t\t\tthis.overlayRef.close();\r\n\r\n\t\t\t// todo: gets called twice?\r\n\t\t\t// todo: correct? forward events\r\n\t\t\tthis._shouldForward('blur');\r\n\t\t}\r\n\t}\r\n\r\n\ttoggle(): void {\r\n\t\tthis.panelOpen ? this.close() : this.open();\r\n\t}\r\n\r\n\tprivate _init() {\r\n\t\t// todo: set arias like Angular Material\r\n\t\tthis.options = Array.from(this.selectElement.children).map(\r\n\t\t\t(option: HTMLOptionElement) => new Option(option)\r\n\t\t);\r\n\r\n\t\tthis.selectElement.tabIndex = -1;\r\n\t\tthis.selectElement.setAttribute('aria-hidden', 'true');\r\n\t\tthis.selectElement.setAttribute('data-select', this.uuid);\r\n\t\tthis.selectElement.insertAdjacentHTML('afterend', this._render());\r\n\t\tthis.selectElement.addEventListener('focus', () => {\r\n\t\t\tthis.select.focus();\r\n\t\t\tthis.open();\r\n\t\t});\r\n\r\n\t\tthis.select = document.getElementById(this.uuid);\r\n\t\tthis.select.tabIndex = 0;\r\n\t\tthis.select.className += ' ' + this.selectElement.className;\r\n\r\n\t\tthis.triggerElement = this.select.getElementsByClassName(\r\n\t\t\t`${this.config.classes.component}__trigger`\r\n\t\t)[0] as HTMLElement;\r\n\r\n\t\tthis.triggerElement.addEventListener('click', event => {\r\n\t\t\tevent.preventDefault();\r\n\t\t\tevent.stopPropagation();\r\n\t\t\tthis.toggle();\r\n\t\t});\r\n\r\n\t\tthis.select.addEventListener('keydown', (event: KeyboardEvent) =>\r\n\t\t\tthis._handleKeydown(event)\r\n\t\t);\r\n\t}\r\n\r\n\tprivate _handleKeydown(event: KeyboardEvent) {\r\n\t\tswitch (event.keyCode) {\r\n\t\t\tcase KEYCODES.SPACE:\r\n\t\t\t\tthis.toggle();\r\n\t\t\t\tbreak;\r\n\t\t\tcase KEYCODES.DOWN:\r\n\t\t\tcase KEYCODES.UP:\r\n\t\t\t\t// todo: why?\r\n\t\t\t\tconst maxSelectedIndex = this.options.length - 1;\r\n\t\t\t\tif (event.keyCode === KEYCODES.UP) {\r\n\t\t\t\t\tif (this.activeIndex !== 0) {\r\n\t\t\t\t\t\tthis.activeIndex--;\r\n\t\t\t\t\t}\r\n\t\t\t\t} else {\r\n\t\t\t\t\tif (this.activeIndex < maxSelectedIndex) {\r\n\t\t\t\t\t\tthis.activeIndex++;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// todo: something like subscribe on selectedIndex change\r\n\t\t\t\t// so we can call this method there\r\n\t\t\t\tif (this.panelOpen) {\r\n\t\t\t\t\tthis._highlightCorrectOption();\r\n\t\t\t\t\tthis._scrollActiveOptionIntoView();\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis._emit(this.options[this.activeIndex]);\r\n\t\t\t\t}\r\n\t\t\t\tbreak;\r\n\t\t\tcase KEYCODES.ESCAPE:\r\n\t\t\t\tif (this.panelOpen) {\r\n\t\t\t\t\tthis.close();\r\n\t\t\t\t}\r\n\t\t\t\tbreak;\r\n\t\t\tcase KEYCODES.ENTER:\r\n\t\t\t\tif (!this.panelOpen) {\r\n\t\t\t\t\tthis.toggle();\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis._emit(this.options[this.activeIndex]);\r\n\r\n\t\t\t\t\t// todo: something like subscribe on activeIndex change\r\n\t\t\t\t\t// so we can call this method there\r\n\t\t\t\t\tthis._highlightCorrectOption();\r\n\t\t\t\t\tthis.close();\r\n\t\t\t\t}\r\n\t\t\t\tbreak;\r\n\t\t\tdefault:\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\r\n\t\tevent.preventDefault();\r\n\t\tevent.stopPropagation();\r\n\t}\r\n\r\n\t/**\r\n\t * This method creates the overlay from the provided select's template and saves its\r\n\t * OverlayRef so that it can be attached to the DOM when open is called.\r\n\t */\r\n\tprivate _createOverlay(): Overlay {\r\n\t\tif (!this.overlayRef) {\r\n\t\t\tthis.overlayRef = overlay(\r\n\t\t\t\tcreateNode(this.panelHTML),\r\n\t\t\t\tthis._getOverlayOptions()\r\n\t\t\t);\r\n\r\n\t\t\tthis.overlayRef.backdropClick = () => this.close();\r\n\r\n\t\t\tthis.overlayRef.afterOpened = () => this._onPanelDone();\r\n\r\n\t\t\tthis.overlayRef.afterClosed = () => this.overlayRef.dispose();\r\n\r\n\t\t\tthis.overlayRef.onAttached = () => {\r\n\t\t\t\tthis.overlayRef.portalElement.style.transformOrigin = 'top'; // set initial origin\r\n\t\t\t\tthis._calculateOverlayOffsetX();\r\n\t\t\t\tthis.overlayRef.portalElement.scrollTop = this.scrollTop;\r\n\t\t\t};\r\n\r\n\t\t\t// todo: better way? we need that here because of the RepositionScrollStrategy\r\n\t\t\tthis.overlayRef.onDetached = () => (this.panelOpen = false);\r\n\r\n\t\t\tthis.optionElements = Array.from(\r\n\t\t\t\tthis.overlayRef.portalElement.getElementsByClassName(\r\n\t\t\t\t\t`${this.config.classes.component}__panel__option`\r\n\t\t\t\t)\r\n\t\t\t) as HTMLElement[];\r\n\r\n\t\t\tthis.optionElements.forEach((option, index) => {\r\n\t\t\t\toption.addEventListener('click', () => {\r\n\t\t\t\t\tthis._emit(this.options[index]);\r\n\r\n\t\t\t\t\t// todo: something like subscribe on selectedIndex change\r\n\t\t\t\t\t// so we can call this method there\r\n\t\t\t\t\tthis._highlightCorrectOption();\r\n\t\t\t\t\tthis.close();\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t\treturn this.overlayRef;\r\n\t}\r\n\r\n\tprivate _getOverlayOptions(): OverlayOptions {\r\n\t\treturn new OverlayOptions({\r\n\t\t\tscrollStrategy: new RepositionScrollStrategy(),\r\n\t\t\tpositionStrategy: this.position = this._createPositionStrategy(),\r\n\t\t\tbackdropClassName: 'c-overlay-transparent-backdrop',\r\n\t\t\thasBackdrop: true\r\n\t\t});\r\n\t}\r\n\r\n\tprivate _createPositionStrategy(): ConnectedPositionStrategy {\r\n\t\tconst primaryPosition = this.positions[0];\r\n\t\tconst originPoint = {\r\n\t\t\toriginX: primaryPosition.originX,\r\n\t\t\toriginY: primaryPosition.originY\r\n\t\t} as OriginConnectionPosition;\r\n\t\tconst overlayPoint = {\r\n\t\t\toverlayX: primaryPosition.overlayX,\r\n\t\t\toverlayY: primaryPosition.overlayY\r\n\t\t} as OverlayConnectionPosition;\r\n\r\n\t\t// todo: like angular material this.overlayRef.position()?\r\n\t\tconst strategy = new OverlayPositionBuilder()\r\n\t\t\t.connectedTo(this.triggerElement, originPoint, overlayPoint)\r\n\t\t\t.withOffsetX(0)\r\n\t\t\t.withOffsetY(this.offsetY);\r\n\r\n\t\tfor (let i = 1; i < this.positions.length; i++) {\r\n\t\t\tstrategy.withFallbackPosition(\r\n\t\t\t\t{\r\n\t\t\t\t\toriginX: this.positions[i].originX,\r\n\t\t\t\t\toriginY: this.positions[i].originY\r\n\t\t\t\t} as OriginConnectionPosition,\r\n\t\t\t\t{\r\n\t\t\t\t\toverlayX: this.positions[i].overlayX,\r\n\t\t\t\t\toverlayY: this.positions[i].overlayY\r\n\t\t\t\t} as OverlayConnectionPosition\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\treturn strategy;\r\n\t}\r\n\r\n\tprivate _emit(option: Option) {\r\n\t\tconst newValue = option.value;\r\n\t\tconst newLabel = option.text;\r\n\r\n\t\tthis.triggerElement.getElementsByClassName(\r\n\t\t\t`${this.config.classes.component}__trigger__value-text`\r\n\t\t)[0].textContent = newLabel;\r\n\t\tthis.triggerElement.setAttribute('data-value', newValue);\r\n\r\n\t\tthis.selectElement.value = newValue;\r\n\t\tthis.selectedIndex = this._getOptionIndex(option);\r\n\t\tthis.activeIndex = this.selectedIndex;\r\n\r\n\t\tthis._shouldForward('change');\r\n\t}\r\n\r\n\tprivate _render(): string {\r\n\t\tconst options = this.options.reduce((value, option, index) => {\r\n\t\t\treturn `${value}\r\n ${option.text}\r\n
`;\r\n\t\t}, '');\r\n\r\n\t\tconst trigger = this.options\r\n\t\t\t.filter((option, index) => {\r\n\t\t\t\treturn index === this.selectedIndex;\r\n\t\t\t})\r\n\t\t\t.reduce((value, option) => {\r\n\t\t\t\treturn `${value}\r\n \r\n \r\n ${option.text}\r\n \r\n \r\n \r\n \r\n
`;\r\n\t\t\t}, '');\r\n\r\n\t\tthis.panelHTML = `${options}
`;\r\n\r\n\t\treturn `${trigger}
`;\r\n\t}\r\n\r\n\t/** Gets the index of the provided option in the option list. */\r\n\tprivate _getOptionIndex(option: Option): number | undefined {\r\n\t\treturn this.options.reduce(\r\n\t\t\t(result: number, current: Option, index: number) => {\r\n\t\t\t\treturn result === undefined\r\n\t\t\t\t\t? option === current\r\n\t\t\t\t\t\t? index\r\n\t\t\t\t\t\t: undefined\r\n\t\t\t\t\t: result;\r\n\t\t\t},\r\n\t\t\tundefined\r\n\t\t);\r\n\t}\r\n\r\n\t/** Scrolls the active option into view. */\r\n\tprivate _scrollActiveOptionIntoView(): void {\r\n\t\tconst itemHeight = this._getItemHeight();\r\n\t\tconst activeOptionIndex = this.activeIndex || 0;\r\n\t\tconst scrollOffset = activeOptionIndex * itemHeight;\r\n\t\tconst panelTop = this.overlayRef.portalElement.scrollTop;\r\n\t\tconst maxHeight = this._getPanelMaxHeight();\r\n\r\n\t\tif (scrollOffset < panelTop) {\r\n\t\t\tthis.overlayRef.portalElement.scrollTop = scrollOffset;\r\n\t\t} else if (scrollOffset + itemHeight > panelTop + maxHeight) {\r\n\t\t\tthis.overlayRef.portalElement.scrollTop = Math.max(\r\n\t\t\t\t0,\r\n\t\t\t\tscrollOffset - maxHeight + itemHeight\r\n\t\t\t);\r\n\t\t}\r\n\t}\r\n\r\n\t/** Calculates the scroll position and x- and y-offsets of the overlay panel. */\r\n\tprivate _calculateOverlayPosition(): void {\r\n\t\tconst itemHeight = this._getItemHeight();\r\n\t\tconst items = this.options.length;\r\n\t\tconst panelHeight = Math.min(\r\n\t\t\titems * itemHeight,\r\n\t\t\tthis._getPanelMaxHeight()\r\n\t\t);\r\n\t\tconst scrollContainerHeight = items * itemHeight;\r\n\r\n\t\t// The farthest the panel can be scrolled before it hits the bottom\r\n\t\tconst maxScroll = scrollContainerHeight - panelHeight;\r\n\r\n\t\t// If no value is selected we open the popup to the first item.\r\n\t\tconst selectedOptionOffset = this.selectedIndex!;\r\n\r\n\t\t// We must maintain a scroll buffer so the selected option will be scrolled to the\r\n\t\t// center of the overlay panel rather than the top.\r\n\t\tconst scrollBuffer = panelHeight / 2;\r\n\t\tthis.scrollTop = this._calculateOverlayScroll(\r\n\t\t\tselectedOptionOffset,\r\n\t\t\tscrollBuffer,\r\n\t\t\tmaxScroll\r\n\t\t);\r\n\t\tthis.offsetY = this._calculateOverlayOffsetY(\r\n\t\t\tselectedOptionOffset,\r\n\t\t\tscrollBuffer,\r\n\t\t\tmaxScroll\r\n\t\t);\r\n\r\n\t\tthis._checkOverlayWithinViewport(maxScroll);\r\n\t\tthis.position.withOffsetY(this.offsetY);\r\n\t}\r\n\r\n\t/**\r\n\t * Checks that the attempted overlay position will fit within the viewport.\r\n\t * If it will not fit, tries to adjust the scroll position and the associated\r\n\t * y-offset so the panel can open fully on-screen. If it still won't fit,\r\n\t * sets the offset back to 0 to allow the fallback position to take over.\r\n\t */\r\n\tprivate _checkOverlayWithinViewport(maxScroll: number): void {\r\n\t\tconst itemHeight = this._getItemHeight();\r\n\t\tconst maxHeight = this._getPanelMaxHeight();\r\n\t\tconst viewportSize = {\r\n\t\t\twidth: window.innerWidth,\r\n\t\t\theight: window.innerHeight\r\n\t\t};\r\n\t\tconst paddingWidth = this._getPanelToViewportPadding();\r\n\r\n\t\tconst topSpaceAvailable = this.triggerRect.top - paddingWidth;\r\n\t\tconst bottomSpaceAvailable =\r\n\t\t\tviewportSize.height - this.triggerRect.bottom - paddingWidth;\r\n\r\n\t\tconst panelHeightTop = Math.abs(this.offsetY);\r\n\t\tconst totalPanelHeight = Math.min(\r\n\t\t\tthis.options.length * itemHeight,\r\n\t\t\tmaxHeight\r\n\t\t);\r\n\t\tconst panelHeightBottom =\r\n\t\t\ttotalPanelHeight - panelHeightTop - this.triggerRect.height;\r\n\r\n\t\tif (panelHeightBottom > bottomSpaceAvailable) {\r\n\t\t\tthis._adjustPanelUp(panelHeightBottom, bottomSpaceAvailable);\r\n\t\t} else if (panelHeightTop > topSpaceAvailable) {\r\n\t\t\tthis._adjustPanelDown(panelHeightTop, topSpaceAvailable, maxScroll);\r\n\t\t} else {\r\n\t\t\tthis.overlayRef.portalElement.style.transformOrigin = this._getOriginBasedOnOption();\r\n\t\t}\r\n\t}\r\n\r\n\t/** Adjusts the overlay panel up to fit in the viewport. */\r\n\tprivate _adjustPanelUp(\r\n\t\tpanelHeightBottom: number,\r\n\t\tbottomSpaceAvailable: number\r\n\t) {\r\n\t\t// Browsers ignore fractional scroll offsets, so we need to round.\r\n\t\tconst distanceBelowViewport = Math.round(\r\n\t\t\tpanelHeightBottom - bottomSpaceAvailable\r\n\t\t);\r\n\r\n\t\t// Scrolls the panel up by the distance it was extending past the boundary, then\r\n\t\t// adjusts the offset by that amount to move the panel up into the viewport.\r\n\t\tthis.scrollTop -= distanceBelowViewport;\r\n\t\tthis.offsetY -= distanceBelowViewport;\r\n\t\tthis.overlayRef.portalElement.style.transformOrigin = this._getOriginBasedOnOption();\r\n\r\n\t\t// If the panel is scrolled to the very top, it won't be able to fit the panel\r\n\t\t// by scrolling, so set the offset to 0 to allow the fallback position to take\r\n\t\t// effect.\r\n\t\tif (this.triggerRect.top + this.scrollTop <= 0) {\r\n\t\t\tthis.scrollTop = 0;\r\n\t\t\tthis.offsetY = 0;\r\n\t\t\tthis.overlayRef.portalElement.style.transformOrigin =\r\n\t\t\t\t'50% bottom 0px';\r\n\t\t}\r\n\t}\r\n\r\n\t/** Adjusts the overlay panel down to fit in the viewport. */\r\n\tprivate _adjustPanelDown(\r\n\t\tpanelHeightTop: number,\r\n\t\ttopSpaceAvailable: number,\r\n\t\tmaxScroll: number\r\n\t) {\r\n\t\t// Browsers ignore fractional scroll offsets, so we need to round.\r\n\t\tconst distanceAboveViewport = Math.round(\r\n\t\t\tpanelHeightTop - topSpaceAvailable\r\n\t\t);\r\n\r\n\t\t// Scrolls the panel down by the distance it was extending past the boundary, then\r\n\t\t// adjusts the offset by that amount to move the panel down into the viewport.\r\n\t\tthis.scrollTop += distanceAboveViewport;\r\n\t\tthis.offsetY += distanceAboveViewport;\r\n\t\tthis.overlayRef.portalElement.style.transformOrigin = this._getOriginBasedOnOption();\r\n\r\n\t\t// If the panel is scrolled to the very bottom, it won't be able to fit the\r\n\t\t// panel by scrolling, so set the offset to 0 to allow the fallback position\r\n\t\t// to take effect.\r\n\t\tif (this.triggerRect.top + this.scrollTop >= maxScroll) {\r\n\t\t\tthis.scrollTop = maxScroll;\r\n\t\t\tthis.offsetY = 0;\r\n\t\t\tthis.overlayRef.portalElement.style.transformOrigin = '50% top 0px';\r\n\t\t\treturn;\r\n\t\t}\r\n\t}\r\n\r\n\t/** Sets the transform origin point based on the selected option. */\r\n\tprivate _getOriginBasedOnOption(): string {\r\n\t\tconst itemHeight = this._getItemHeight();\r\n\t\tconst optionHeightAdjustment =\r\n\t\t\t(itemHeight - this.triggerRect.height) / 2;\r\n\t\tconst originY =\r\n\t\t\tMath.abs(this.offsetY) - optionHeightAdjustment + itemHeight / 2;\r\n\t\treturn `50% ${originY}px 0px`;\r\n\t}\r\n\r\n\t/**\r\n\t * Calculates the scroll position of the select's overlay panel.\r\n\t *\r\n\t * Attempts to center the selected option in the panel. If the option is\r\n\t * too high or too low in the panel to be scrolled to the center, it clamps the\r\n\t * scroll position to the min or max scroll positions respectively.\r\n\t */\r\n\tprivate _calculateOverlayScroll(\r\n\t\tselectedIndex: number,\r\n\t\tscrollBuffer: number,\r\n\t\tmaxScroll: number\r\n\t): number {\r\n\t\tconst itemHeight = this._getItemHeight();\r\n\t\tconst optionOffsetFromScrollTop = itemHeight * selectedIndex;\r\n\t\tconst halfOptionHeight = itemHeight / 2;\r\n\r\n\t\t// Starts at the optionOffsetFromScrollTop, which scrolls the option to the top of the\r\n\t\t// scroll container, then subtracts the scroll buffer to scroll the option down to\r\n\t\t// the center of the overlay panel. Half the option height must be re-added to the\r\n\t\t// scrollTop so the option is centered based on its middle, not its top edge.\r\n\t\tconst optimalScrollPosition =\r\n\t\t\toptionOffsetFromScrollTop - scrollBuffer + halfOptionHeight;\r\n\t\treturn Math.min(Math.max(0, optimalScrollPosition), maxScroll);\r\n\t}\r\n\r\n\t/**\r\n\t * Sets the x-offset of the overlay panel in relation to the trigger's top start corner.\r\n\t * This must be adjusted to align the selected option text over the trigger text when\r\n\t * the panel opens. Will change based on LTR or RTL text direction. Note that the offset\r\n\t * can't be calculated until the panel has been attached, because we need to know the\r\n\t * content width in order to constrain the panel within the viewport.\r\n\t */\r\n\tprivate _calculateOverlayOffsetX(): void {\r\n\t\tconst overlayRect = this.overlayRef.overlayElement.getBoundingClientRect();\r\n\t\tconst viewportSize = {\r\n\t\t\twidth: window.innerWidth,\r\n\t\t\theight: window.innerHeight\r\n\t\t};\r\n\t\tconst paddingWidth = this._getPanelToViewportPadding();\r\n\t\tlet offsetX = 0;\r\n\r\n\t\t// todo: multiple\r\n\t\t// Adjust the offset, depending on the option padding.\r\n\t\t// offsetX = this.selectedIndex ? padding.panel * 2 : padding.panel;\r\n\r\n\t\t// Invert the offset in LTR.\r\n\t\toffsetX *= -1;\r\n\r\n\t\t// Determine how much the select overflows on each side.\r\n\t\tconst leftOverflow = 0 - (overlayRect.left + offsetX);\r\n\t\tconst rightOverflow =\r\n\t\t\t\toverlayRect.right +\r\n\t\t\t\toffsetX -\r\n\t\t\t\tviewportSize.width /* +\r\n padding.panel * 2*/;\r\n\r\n\t\t// If the element overflows on either side, reduce the offset to allow it to fit.\r\n\t\tif (leftOverflow > 0) {\r\n\t\t\toffsetX += leftOverflow + paddingWidth;\r\n\t\t} else if (rightOverflow > 0) {\r\n\t\t\toffsetX -= rightOverflow + paddingWidth;\r\n\t\t}\r\n\r\n\t\t// Set the offset directly\r\n\t\tthis.position.withOffsetX(offsetX);\r\n\t\tthis.overlayRef.updatePosition();\r\n\t}\r\n\r\n\t/**\r\n\t * Calculates the y-offset of the select's overlay panel in relation to the\r\n\t * top start corner of the trigger. It has to be adjusted in order for the\r\n\t * selected option to be aligned over the trigger when the panel opens.\r\n\t */\r\n\tprivate _calculateOverlayOffsetY(\r\n\t\tselectedIndex: number,\r\n\t\tscrollBuffer: number,\r\n\t\tmaxScroll: number\r\n\t): number {\r\n\t\tconst itemHeight = this._getItemHeight();\r\n\t\tconst optionHeightAdjustment =\r\n\t\t\t(itemHeight - this.triggerRect.height) / 2;\r\n\t\tconst maxHeight = this._getPanelMaxHeight();\r\n\t\tconst maxOptionsDisplayed = Math.floor(maxHeight / itemHeight);\r\n\t\tconst items = this.options.length;\r\n\t\tlet optionOffsetFromPanelTop: number;\r\n\r\n\t\tif (this.scrollTop === 0) {\r\n\t\t\toptionOffsetFromPanelTop = selectedIndex * itemHeight;\r\n\t\t} else if (this.scrollTop === maxScroll) {\r\n\t\t\tconst firstDisplayedIndex = items - maxOptionsDisplayed;\r\n\t\t\tconst selectedDisplayIndex = selectedIndex - firstDisplayedIndex;\r\n\r\n\t\t\t// The first item is partially out of the viewport. Therefore we need to calculate what\r\n\t\t\t// portion of it is shown in the viewport and account for it in our offset.\r\n\t\t\tconst partialItemHeight =\r\n\t\t\t\titemHeight - ((items * itemHeight - maxHeight) % itemHeight);\r\n\r\n\t\t\t// Because the panel height is longer than the height of the options alone,\r\n\t\t\t// there is always extra padding at the top or bottom of the panel. When\r\n\t\t\t// scrolled to the very bottom, this padding is at the top of the panel and\r\n\t\t\t// must be added to the offset.\r\n\t\t\toptionOffsetFromPanelTop =\r\n\t\t\t\tselectedDisplayIndex * itemHeight + partialItemHeight;\r\n\t\t} else {\r\n\t\t\t// If the option was scrolled to the middle of the panel using a scroll buffer,\r\n\t\t\t// its offset will be the scroll buffer minus the half height that was added to\r\n\t\t\t// center it.\r\n\t\t\toptionOffsetFromPanelTop = scrollBuffer - itemHeight / 2;\r\n\t\t}\r\n\r\n\t\t// The final offset is the option's offset from the top, adjusted for the height\r\n\t\t// difference, multiplied by -1 to ensure that the overlay moves in the correct\r\n\t\t// direction up the page.\r\n\t\treturn optionOffsetFromPanelTop * -1 - optionHeightAdjustment;\r\n\t}\r\n\r\n\tprivate _highlightCorrectOption() {\r\n\t\tthis.optionElements.forEach(option => {\r\n\t\t\tremoveClass(option, this.config.classes.active);\r\n\t\t\tremoveClass(option, this.config.classes.highlighted);\r\n\t\t});\r\n\r\n\t\taddClass(\r\n\t\t\tthis.optionElements[this.selectedIndex],\r\n\t\t\tthis.config.classes.active\r\n\t\t);\r\n\r\n\t\tif (this.selectedIndex !== this.activeIndex) {\r\n\t\t\taddClass(\r\n\t\t\t\tthis.optionElements[this.activeIndex],\r\n\t\t\t\tthis.config.classes.highlighted\r\n\t\t\t);\r\n\t\t}\r\n\t}\r\n\r\n\tprivate _getPanelToViewportPadding() {\r\n\t\tconst option = this.optionElements[0]!;\r\n\r\n\t\t// todo: cache?\r\n\t\tconst padding = parseCssUnit(getCss(option, 'padding-left'));\r\n\r\n\t\treturn Math.round(padding / 2);\r\n\t}\r\n\r\n\tprivate _getPanelMaxHeight(): number {\r\n\t\t// todo: cache?\r\n\t\treturn parseCssUnit(\r\n\t\t\tgetCss(this.overlayRef.portalElement!, 'max-height')\r\n\t\t);\r\n\t}\r\n\r\n\tprivate _getItemHeight(): number {\r\n\t\treturn this.optionElements[0]!.offsetHeight!;\r\n\t}\r\n\r\n\t/**\r\n\t * When the panel element is finished transforming in (though not fading in), it\r\n\t * emits an event and focuses an option if the panel is open.\r\n\t */\r\n\tprivate _onPanelDone(): void {\r\n\t\tif (this.panelOpen) {\r\n\t\t\tthis.scrollTop = 0;\r\n\t\t} else {\r\n\t\t\tthis.position.withOffsetX(0);\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Forward events to the element\r\n\t */\r\n\tprivate _shouldForward(eventName: string) {\r\n\t\tconst event = document.createEvent('HTMLEvents');\r\n\t\tevent.initEvent(eventName, false, true);\r\n\t\tthis.selectElement.dispatchEvent(event);\r\n\t}\r\n\r\n\tprivate _getSelectedIndex() {\r\n\t\tif (this.selectElement.selectedIndex >= 0) {\r\n\t\t\treturn this.selectElement.selectedIndex;\r\n\t\t}\r\n\r\n\t\t// TODO: Investigate why this.selectElement.selectedIndex is sometimes -1\r\n\t\t// even we have selected=\"selected\"! Occurs when you navigate back!\r\n\t\tconst selected = this.selectElement.querySelector(\r\n\t\t\t'option[selected]'\r\n\t\t);\r\n\r\n\t\tif (!selected) {\r\n\t\t\treturn 0;\r\n\t\t}\r\n\r\n\t\treturn Array.from(selected.parentElement.children).indexOf(selected);\r\n\t}\r\n}\r\n\r\nexport function select(element: HTMLSelectElement): Select {\r\n\treturn new Select(element);\r\n}\r\n","import { Slider, SliderBehaviour } from '..';\r\n\r\nexport class SliderAutoHeightBehavior implements SliderBehaviour {\r\n\tinitialize(slider: Slider) {\r\n\t\tslider.element.addEventListener('before.lory.init', e =>\r\n\t\t\tthis.apply(slider, 0)\r\n\t\t);\r\n\t\tslider.element.addEventListener('after.lory.slide', (e: any) =>\r\n\t\t\tthis.apply(slider, e.detail.currentSlide)\r\n\t\t);\r\n\t}\r\n\r\n\tprivate apply(slider: Slider, index: number) {\r\n\t\tslider.slidesWrapper.style.height = `${\r\n\t\t\tslider.slides[index].offsetHeight\r\n\t\t}px`;\r\n\t}\r\n}\r\n","import { Slider, SliderBehaviour } from '..';\r\nimport { addClass } from '@opten/dom/add-class';\r\nimport { removeClass } from '@opten/dom/remove-class';\r\n\r\nexport class SliderDotsBehavior implements SliderBehaviour {\r\n\tinitialize(slider: Slider) {\r\n\t\tconst dots = slider.element.querySelector('.js-dots');\r\n\t\tif (dots) {\r\n\t\t\tslider.element.addEventListener('before.lory.init', e => {\r\n\t\t\t\tdots.innerHTML = '';\r\n\t\t\t\tfor (\r\n\t\t\t\t\tlet i = 0, len = slider.slides.length;\r\n\t\t\t\t\ti < len;\r\n\t\t\t\t\ti += slider.options.slidesToScroll\r\n\t\t\t\t) {\r\n\t\t\t\t\tconst li = document.createElement('li');\r\n\t\t\t\t\tli.setAttribute('data-index', i.toString());\r\n\t\t\t\t\tdots.appendChild(li);\r\n\t\t\t\t\tli.addEventListener('click', evt => {\r\n\t\t\t\t\t\tslider.instance.slideTo(\r\n\t\t\t\t\t\t\tNumber(\r\n\t\t\t\t\t\t\t\t(evt.target as Element).getAttribute(\r\n\t\t\t\t\t\t\t\t\t'data-index'\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t\taddClass(dots.firstElementChild, 'active');\r\n\t\t\t});\r\n\r\n\t\t\tslider.element.addEventListener('after.lory.slide', (e: any) => {\r\n\t\t\t\tfor (let i = 0, len = dots.childNodes.length; i < len; i++) {\r\n\t\t\t\t\tremoveClass(dots.children[i], 'active');\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif (slider.options.infinite) {\r\n\t\t\t\t\taddClass(\r\n\t\t\t\t\t\tdots.children[\r\n\t\t\t\t\t\t\tMath.ceil(\r\n\t\t\t\t\t\t\t\t(e.detail.currentSlide -\r\n\t\t\t\t\t\t\t\t\tslider.options.slidesToScroll) /\r\n\t\t\t\t\t\t\t\t\tslider.options.slidesToScroll\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t],\r\n\t\t\t\t\t\t'active'\r\n\t\t\t\t\t);\r\n\t\t\t\t} else {\r\n\t\t\t\t\taddClass(\r\n\t\t\t\t\t\tdots.children[\r\n\t\t\t\t\t\t\tMath.ceil(\r\n\t\t\t\t\t\t\t\te.detail.currentSlide /\r\n\t\t\t\t\t\t\t\t\tslider.options.slidesToScroll\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t],\r\n\t\t\t\t\t\t'active'\r\n\t\t\t\t\t);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n}\r\n","import { Slider, SliderBehaviour } from '..';\r\n\r\nexport class ImageHeightArrowsBehavior implements SliderBehaviour {\r\n\tinitialize(slider: Slider) {\r\n\t\tslider.element.addEventListener('before.lory.init', e =>\r\n\t\t\tthis.apply(slider, 0)\r\n\t\t);\r\n\t\tslider.element.addEventListener(\r\n\t\t\t'after.lory.slide',\r\n\t\t\t(e: any) => this.apply(slider, e.detail.currentSlide)\r\n\t\t);\r\n\t}\r\n\r\n\tprivate apply(slider: Slider, index: number) {\r\n\t\tconst img = slider.slides[index].querySelector('img');\r\n\t\tif (img) {\r\n\t\t\tif (slider.prev) {\r\n\t\t\t\t(slider.prev\r\n\t\t\t\t\t.firstElementChild as HTMLElement).style.top = `${img.offsetHeight /\r\n\t\t\t\t\t2}px`;\r\n\t\t\t}\r\n\t\t\tif (slider.next) {\r\n\t\t\t\t(slider.next\r\n\t\t\t\t\t.firstElementChild as HTMLElement).style.top = `${img.offsetHeight /\r\n\t\t\t\t\t2}px`;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n","import { lory } from './lory/index.js';\r\n\r\nexport interface SliderOptions {\r\n\tclassNameFrame?: string;\r\n\tclassNameNextCtrl?: string;\r\n\tclassNamePrevCtrl?: string;\r\n\tclassNameSlideContainer?: string;\r\n\tease?: string;\r\n\tenableMouseEvents?: boolean;\r\n\tinfinite?: boolean | number;\r\n\tinitialIndex?: number;\r\n\trewind?: boolean;\r\n\trewindOnResize?: boolean;\r\n\trewindSpeed?: number;\r\n\tslideSpeed?: number;\r\n\tslidesToScroll?: number;\r\n\tsnapBackSpeed?: number;\r\n} /*These are the slider options available in lory slider, which are used to initialize the lory slider */\r\n\r\nexport interface SliderBehaviour {\r\n\tinitialize(slider: Slider): void;\r\n}\r\n\r\nexport class Slider {\r\n\tslides: HTMLElement[];\r\n\tframe: HTMLElement;\r\n\tnext: HTMLElement;\r\n\tprev: HTMLElement;\r\n\tslidesWrapper: HTMLElement;\r\n\tinstance: any;\r\n\r\n\toptions: SliderOptions = {\r\n\t\tclassNameFrame: 'js-frame',\r\n\t\tclassNameNextCtrl: 'js-next',\r\n\t\tclassNamePrevCtrl: 'js-prev',\r\n\t\tclassNameSlideContainer: 'js-slides',\r\n\t\tease: 'ease',\r\n\t\tenableMouseEvents: true,\r\n\t\tinfinite: false,\r\n\t\tinitialIndex: 0,\r\n\t\trewind: false,\r\n\t\trewindSpeed: 600,\r\n\t\tslideSpeed: 300,\r\n\t\tslidesToScroll: 1,\r\n\t\tsnapBackSpeed: 200,\r\n\t\trewindOnResize: false\r\n\t}; /*options are public, because they are also used in some behavoirs*/\r\n\r\n\tconstructor(\r\n\t\tpublic element: HTMLElement,\r\n\t\toptions: SliderOptions = {},\r\n\t\tbehavoirs: SliderBehaviour[] = []\r\n\t) {\r\n\t\tthis.options = { ...this.options, ...options };\r\n\r\n\t\tthis.frame = this.element.querySelector(\r\n\t\t\t'.' + this.options.classNameFrame\r\n\t\t);\r\n\t\tthis.prev = this.element.querySelector(\r\n\t\t\t'.' + this.options.classNamePrevCtrl\r\n\t\t);\r\n\t\tthis.next = this.element.querySelector(\r\n\t\t\t'.' + this.options.classNameNextCtrl\r\n\t\t);\r\n\t\tthis.slidesWrapper = this.element.querySelector(\r\n\t\t\t'.' + this.options.classNameSlideContainer\r\n\t\t);\r\n\t\tthis.slides = Array.from(this.element.querySelectorAll('.js-slide'));\r\n\r\n\t\tbehavoirs.forEach(behavior => behavior.initialize(this));\r\n\t\tthis.instance = lory(this.element, this.options);\r\n\t}\r\n}\r\n","export default {\r\n\t/**\r\n\t * slides scrolled at once\r\n\t * @slidesToScroll {Number}\r\n\t */\r\n\tslidesToScroll: 1,\r\n\r\n\t/**\r\n\t * time in milliseconds for the animation of a valid slide attempt\r\n\t * @slideSpeed {Number}\r\n\t */\r\n\tslideSpeed: 300,\r\n\r\n\t/**\r\n\t * time in milliseconds for the animation of the rewind after the last slide\r\n\t * @rewindSpeed {Number}\r\n\t */\r\n\trewindSpeed: 600,\r\n\r\n\t/**\r\n\t * time for the snapBack of the slider if the slide attempt was not valid\r\n\t * @snapBackSpeed {Number}\r\n\t */\r\n\tsnapBackSpeed: 200,\r\n\r\n\t/**\r\n\t * Basic easing functions: https://developer.mozilla.org/de/docs/Web/CSS/transition-timing-function\r\n\t * cubic bezier easing functions: http://easings.net/de\r\n\t * @ease {String}\r\n\t */\r\n\tease: 'ease',\r\n\r\n\t/**\r\n\t * if slider reached the last slide, with next click the slider goes back to the startindex.\r\n\t * use infinite or rewind, not both\r\n\t * @rewind {Boolean}\r\n\t */\r\n\trewind: false,\r\n\r\n\t/**\r\n\t * number of visible slides or false\r\n\t * use infinite or rewind, not both\r\n\t * @infinite {number}\r\n\t */\r\n\tinfinite: false,\r\n\r\n\t/**\r\n\t * the slide index to show when the slider is initialized.\r\n\t * @initialIndex {number}\r\n\t */\r\n\tinitialIndex: 0,\r\n\r\n\t/**\r\n\t * class name for slider frame\r\n\t * @classNameFrame {string}\r\n\t */\r\n\tclassNameFrame: 'js_frame',\r\n\r\n\t/**\r\n\t * class name for slides container\r\n\t * @classNameSlideContainer {string}\r\n\t */\r\n\tclassNameSlideContainer: 'js_slides',\r\n\r\n\t/**\r\n\t * class name for slider prev control\r\n\t * @classNamePrevCtrl {string}\r\n\t */\r\n\tclassNamePrevCtrl: 'js_prev',\r\n\r\n\t/**\r\n\t * class name for slider next control\r\n\t * @classNameNextCtrl {string}\r\n\t */\r\n\tclassNameNextCtrl: 'js_next',\r\n\r\n\t/**\r\n\t * class name for current active slide\r\n\t * if emptyString then no class is set\r\n\t * @classNameActiveSlide {string}\r\n\t */\r\n\tclassNameActiveSlide: 'active',\r\n\r\n\t/**\r\n\t * enables mouse events for swiping on desktop devices\r\n\t * @enableMouseEvents {boolean}\r\n\t */\r\n\tenableMouseEvents: false,\r\n\r\n\t/**\r\n\t * window instance\r\n\t * @window {object}\r\n\t */\r\n\twindow: typeof window !== 'undefined' ? window : null,\r\n\r\n\t/**\r\n\t * If false, slides lory to the first slide on window resize.\r\n\t * @rewindOnResize {boolean}\r\n\t */\r\n\trewindOnResize: true\r\n};\r\n","/* globals jQuery */\r\n\r\nimport detectPrefixes from './utils/detect-prefixes.js';\r\nimport supportsPassive from './utils/detect-supportsPassive';\r\nimport dispatchEvent from './utils/dispatch-event.js';\r\nimport defaults from './defaults.js';\r\n\r\nconst slice = Array.prototype.slice;\r\n\r\nexport function lory(slider, opts) {\r\n\tlet position;\r\n\tlet slidesWidth;\r\n\tlet frameWidth;\r\n\tlet slides;\r\n\r\n\t/**\r\n\t * slider DOM elements\r\n\t */\r\n\tlet frame;\r\n\tlet slideContainer;\r\n\tlet prevCtrl;\r\n\tlet nextCtrl;\r\n\tlet prefixes;\r\n\tlet transitionEndCallback;\r\n\r\n\tlet index = 0;\r\n\tlet options = {};\r\n\tlet touchEventParams = supportsPassive() ? { passive: true } : false;\r\n\r\n\t/**\r\n\t * if object is jQuery convert to native DOM element\r\n\t */\r\n\tif (typeof jQuery !== 'undefined' && slider instanceof jQuery) {\r\n\t\tslider = slider[0];\r\n\t}\r\n\r\n\t/**\r\n\t * private\r\n\t * set active class to element which is the current slide\r\n\t */\r\n\tfunction setActiveElement(slides, currentIndex) {\r\n\t\tconst { classNameActiveSlide } = options;\r\n\r\n\t\tslides.forEach((element, index) => {\r\n\t\t\tif (element.classList.contains(classNameActiveSlide)) {\r\n\t\t\t\telement.classList.remove(classNameActiveSlide);\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\tslides[currentIndex].classList.add(classNameActiveSlide);\r\n\t}\r\n\r\n\t/**\r\n\t * private\r\n\t * setupInfinite: function to setup if infinite is set\r\n\t *\r\n\t * @param {array} slideArray\r\n\t * @return {array} array of updated slideContainer elements\r\n\t */\r\n\tfunction setupInfinite(slideArray) {\r\n\t\tconst { infinite } = options;\r\n\r\n\t\tconst front = slideArray.slice(0, infinite);\r\n\t\tconst back = slideArray.slice(\r\n\t\t\tslideArray.length - infinite,\r\n\t\t\tslideArray.length\r\n\t\t);\r\n\r\n\t\tfront.forEach(function(element) {\r\n\t\t\tconst cloned = element.cloneNode(true);\r\n\r\n\t\t\tslideContainer.appendChild(cloned);\r\n\t\t});\r\n\r\n\t\tback.reverse().forEach(function(element) {\r\n\t\t\tconst cloned = element.cloneNode(true);\r\n\r\n\t\t\tslideContainer.insertBefore(cloned, slideContainer.firstChild);\r\n\t\t});\r\n\r\n\t\tslideContainer.addEventListener(\r\n\t\t\tprefixes.transitionEnd,\r\n\t\t\tonTransitionEnd\r\n\t\t);\r\n\r\n\t\treturn slice.call(slideContainer.children);\r\n\t}\r\n\r\n\t/**\r\n\t * [dispatchSliderEvent description]\r\n\t * @return {[type]} [description]\r\n\t */\r\n\tfunction dispatchSliderEvent(phase, type, detail) {\r\n\t\tdispatchEvent(slider, `${phase}.lory.${type}`, detail);\r\n\t}\r\n\r\n\t/**\r\n\t * translates to a given position in a given time in milliseconds\r\n\t *\r\n\t * @to {number} number in pixels where to translate to\r\n\t * @duration {number} time in milliseconds for the transistion\r\n\t * @ease {string} easing css property\r\n\t */\r\n\tfunction translate(to, duration, ease) {\r\n\t\tconst style = slideContainer && slideContainer.style;\r\n\r\n\t\tif (style) {\r\n\t\t\tstyle[prefixes.transition + 'TimingFunction'] = ease;\r\n\t\t\tstyle[prefixes.transition + 'Duration'] = duration + 'ms';\r\n\t\t\tstyle[prefixes.transform] = 'translateX(' + to + 'px)';\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * returns an element's width\r\n\t */\r\n\tfunction elementWidth(element) {\r\n\t\treturn element.getBoundingClientRect().width || element.offsetWidth;\r\n\t}\r\n\r\n\t/**\r\n\t * slidefunction called by prev, next & touchend\r\n\t *\r\n\t * determine nextIndex and slide to next postion\r\n\t * under restrictions of the defined options\r\n\t *\r\n\t * @direction {boolean}\r\n\t */\r\n\tfunction slide(nextIndex, direction) {\r\n\t\tconst {\r\n\t\t\tslideSpeed,\r\n\t\t\tslidesToScroll,\r\n\t\t\tinfinite,\r\n\t\t\trewind,\r\n\t\t\trewindPrev,\r\n\t\t\trewindSpeed,\r\n\t\t\tease,\r\n\t\t\tclassNameActiveSlide,\r\n\t\t\tclassNameDisabledNextCtrl = 'disabled',\r\n\t\t\tclassNameDisabledPrevCtrl = 'disabled'\r\n\t\t} = options;\r\n\r\n\t\tlet duration = slideSpeed;\r\n\r\n\t\tconst nextSlide = direction ? index + 1 : index - 1;\r\n\t\tconst maxOffset = Math.round(slidesWidth - frameWidth);\r\n\r\n\t\tdispatchSliderEvent('before', 'slide', {\r\n\t\t\tindex,\r\n\t\t\tnextSlide\r\n\t\t});\r\n\r\n\t\t/**\r\n\t\t * Reset control classes\r\n\t\t */\r\n\t\tif (prevCtrl) {\r\n\t\t\tprevCtrl.classList.remove(classNameDisabledPrevCtrl);\r\n\t\t}\r\n\t\tif (nextCtrl) {\r\n\t\t\tnextCtrl.classList.remove(classNameDisabledNextCtrl);\r\n\t\t}\r\n\r\n\t\tif (typeof nextIndex !== 'number') {\r\n\t\t\tif (direction) {\r\n\t\t\t\tif (infinite && index + infinite * 2 !== slides.length) {\r\n\t\t\t\t\tnextIndex = index + (infinite - (index % infinite));\r\n\t\t\t\t} else {\r\n\t\t\t\t\tnextIndex = index + slidesToScroll;\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tif (infinite && index % infinite !== 0) {\r\n\t\t\t\t\tnextIndex = index - (index % infinite);\r\n\t\t\t\t} else {\r\n\t\t\t\t\tnextIndex = index - slidesToScroll;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tnextIndex = Math.min(Math.max(nextIndex, 0), slides.length - 1);\r\n\r\n\t\tif (infinite && direction === undefined) {\r\n\t\t\tnextIndex += infinite;\r\n\t\t}\r\n\r\n\t\tif (rewindPrev && Math.abs(position.x) === 0 && direction === false) {\r\n\t\t\tnextIndex = slides.length - 1;\r\n\t\t\tduration = rewindSpeed;\r\n\t\t}\r\n\r\n\t\tlet nextOffset = Math.min(\r\n\t\t\tMath.max(slides[nextIndex].offsetLeft * -1, maxOffset * -1),\r\n\t\t\t0\r\n\t\t);\r\n\r\n\t\tif (rewind && Math.abs(position.x) === maxOffset && direction) {\r\n\t\t\tnextOffset = 0;\r\n\t\t\tnextIndex = 0;\r\n\t\t\tduration = rewindSpeed;\r\n\t\t}\r\n\r\n\t\t/**\r\n\t\t * translate to the nextOffset by a defined duration and ease function\r\n\t\t */\r\n\t\ttranslate(nextOffset, duration, ease);\r\n\r\n\t\t/**\r\n\t\t * update the position with the next position\r\n\t\t */\r\n\t\tposition.x = nextOffset;\r\n\r\n\t\t/**\r\n\t\t * update the index with the nextIndex only if\r\n\t\t * the offset of the nextIndex is in the range of the maxOffset\r\n\t\t */\r\n\t\tif (slides[nextIndex].offsetLeft <= maxOffset) {\r\n\t\t\tindex = nextIndex;\r\n\t\t}\r\n\t\t// HACK: OPTEN FIX\r\n\t\telse if (!infinite) {\r\n\t\t\tindex = slides.length - options.slidesToScroll;\r\n\t\t}\r\n\r\n\t\tif (\r\n\t\t\tinfinite &&\r\n\t\t\t(nextIndex === slides.length - infinite ||\r\n\t\t\t\tnextIndex === slides.length - (slides.length % infinite) ||\r\n\t\t\t\tnextIndex === 0)\r\n\t\t) {\r\n\t\t\tif (direction) {\r\n\t\t\t\tindex = infinite;\r\n\t\t\t}\r\n\r\n\t\t\tif (!direction) {\r\n\t\t\t\tindex = slides.length - infinite * 2;\r\n\t\t\t}\r\n\r\n\t\t\tposition.x = slides[index].offsetLeft * -1;\r\n\r\n\t\t\ttransitionEndCallback = function() {\r\n\t\t\t\ttranslate(slides[index].offsetLeft * -1, 0, undefined);\r\n\t\t\t};\r\n\t\t}\r\n\r\n\t\tif (classNameActiveSlide) {\r\n\t\t\tsetActiveElement(slice.call(slides), index);\r\n\t\t}\r\n\r\n\t\t/**\r\n\t\t * update classes for next and prev arrows\r\n\t\t * based on user settings\r\n\t\t */\r\n\t\tif (prevCtrl && !infinite && !rewindPrev && nextIndex === 0) {\r\n\t\t\tprevCtrl.classList.add(classNameDisabledPrevCtrl);\r\n\t\t}\r\n\r\n\t\tif (\r\n\t\t\tnextCtrl &&\r\n\t\t\t!infinite &&\r\n\t\t\t!rewind &&\r\n\t\t\tnextIndex + 1 === slides.length\r\n\t\t) {\r\n\t\t\tnextCtrl.classList.add(classNameDisabledNextCtrl);\r\n\t\t}\r\n\r\n\t\tdispatchSliderEvent('after', 'slide', {\r\n\t\t\tcurrentSlide: index\r\n\t\t});\r\n\t}\r\n\r\n\t/**\r\n\t * public\r\n\t * setup function\r\n\t */\r\n\tfunction setup() {\r\n\t\tdispatchSliderEvent('before', 'init');\r\n\r\n\t\tprefixes = detectPrefixes();\r\n\t\toptions = { ...defaults, ...opts };\r\n\r\n\t\tconst {\r\n\t\t\tclassNameFrame,\r\n\t\t\tclassNameSlideContainer,\r\n\t\t\tclassNamePrevCtrl,\r\n\t\t\tclassNameNextCtrl,\r\n\t\t\tclassNameDisabledNextCtrl = 'disabled',\r\n\t\t\tclassNameDisabledPrevCtrl = 'disabled',\r\n\t\t\tenableMouseEvents,\r\n\t\t\tclassNameActiveSlide,\r\n\t\t\tinitialIndex\r\n\t\t} = options;\r\n\r\n\t\tindex = initialIndex;\r\n\t\tframe = slider.getElementsByClassName(classNameFrame)[0];\r\n\t\tslideContainer = frame.getElementsByClassName(\r\n\t\t\tclassNameSlideContainer\r\n\t\t)[0];\r\n\t\tprevCtrl = slider.getElementsByClassName(classNamePrevCtrl)[0];\r\n\t\tnextCtrl = slider.getElementsByClassName(classNameNextCtrl)[0];\r\n\r\n\t\tposition = {\r\n\t\t\tx: slideContainer.offsetLeft,\r\n\t\t\ty: slideContainer.offsetTop\r\n\t\t};\r\n\r\n\t\tif (options.infinite) {\r\n\t\t\tslides = setupInfinite(slice.call(slideContainer.children));\r\n\t\t} else {\r\n\t\t\tslides = slice.call(slideContainer.children);\r\n\r\n\t\t\tif (prevCtrl && !options.rewindPrev) {\r\n\t\t\t\tprevCtrl.classList.add(classNameDisabledPrevCtrl);\r\n\t\t\t}\r\n\r\n\t\t\tif (nextCtrl && slides.length === 1 && !options.rewind) {\r\n\t\t\t\tnextCtrl.classList.add(classNameDisabledNextCtrl);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treset();\r\n\r\n\t\tif (classNameActiveSlide) {\r\n\t\t\tsetActiveElement(slides, index);\r\n\t\t}\r\n\r\n\t\tif (prevCtrl && nextCtrl) {\r\n\t\t\tprevCtrl.addEventListener('click', prev);\r\n\t\t\tnextCtrl.addEventListener('click', next);\r\n\t\t}\r\n\r\n\t\tframe.addEventListener('touchstart', onTouchstart, touchEventParams);\r\n\r\n\t\tif (enableMouseEvents) {\r\n\t\t\tframe.addEventListener('mousedown', onTouchstart);\r\n\t\t\tframe.addEventListener('click', onClick);\r\n\t\t}\r\n\r\n\t\toptions.window.addEventListener('resize', onResize);\r\n\r\n\t\tdispatchSliderEvent('after', 'init');\r\n\t}\r\n\r\n\t/**\r\n\t * public\r\n\t * reset function: called on resize\r\n\t */\r\n\tfunction reset() {\r\n\t\tvar {\r\n\t\t\tinfinite,\r\n\t\t\tease,\r\n\t\t\trewindSpeed,\r\n\t\t\trewindOnResize,\r\n\t\t\tclassNameActiveSlide,\r\n\t\t\tinitialIndex\r\n\t\t} = options;\r\n\r\n\t\tslidesWidth = elementWidth(slideContainer);\r\n\t\tframeWidth = elementWidth(frame);\r\n\r\n\t\tif (frameWidth === slidesWidth) {\r\n\t\t\tslidesWidth = slides.reduce(function(previousValue, slide) {\r\n\t\t\t\treturn previousValue + elementWidth(slide);\r\n\t\t\t}, 0);\r\n\t\t}\r\n\r\n\t\tif (rewindOnResize) {\r\n\t\t\tindex = initialIndex;\r\n\t\t} else {\r\n\t\t\tease = null;\r\n\t\t\trewindSpeed = 0;\r\n\t\t}\r\n\r\n\t\tif (infinite) {\r\n\t\t\ttranslate(slides[index + infinite].offsetLeft * -1, 0, null);\r\n\r\n\t\t\tindex = index + infinite;\r\n\t\t\tposition.x = slides[index].offsetLeft * -1;\r\n\t\t} else {\r\n\t\t\ttranslate(slides[index].offsetLeft * -1, rewindSpeed, ease);\r\n\t\t\tposition.x = slides[index].offsetLeft * -1;\r\n\t\t}\r\n\r\n\t\tif (classNameActiveSlide) {\r\n\t\t\tsetActiveElement(slice.call(slides), index);\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * public\r\n\t * slideTo: called on clickhandler\r\n\t */\r\n\tfunction slideTo(index) {\r\n\t\tslide(index);\r\n\t}\r\n\r\n\t/**\r\n\t * public\r\n\t * returnIndex function: called on clickhandler\r\n\t */\r\n\tfunction returnIndex() {\r\n\t\treturn index - options.infinite || 0;\r\n\t}\r\n\r\n\t/**\r\n\t * public\r\n\t * prev function: called on clickhandler\r\n\t */\r\n\tfunction prev() {\r\n\t\tslide(false, false);\r\n\t}\r\n\r\n\t/**\r\n\t * public\r\n\t * next function: called on clickhandler\r\n\t */\r\n\tfunction next() {\r\n\t\tslide(false, true);\r\n\t}\r\n\r\n\t/**\r\n\t * public\r\n\t * destroy function: called to gracefully destroy the lory instance\r\n\t */\r\n\tfunction destroy() {\r\n\t\tdispatchSliderEvent('before', 'destroy');\r\n\r\n\t\t// remove event listeners\r\n\t\tframe.removeEventListener(prefixes.transitionEnd, onTransitionEnd);\r\n\t\tframe.removeEventListener('touchstart', onTouchstart, touchEventParams);\r\n\t\tframe.removeEventListener('touchmove', onTouchmove, touchEventParams);\r\n\t\tframe.removeEventListener('touchend', onTouchend);\r\n\t\tframe.removeEventListener('mousemove', onTouchmove);\r\n\t\tframe.removeEventListener('mousedown', onTouchstart);\r\n\t\tframe.removeEventListener('mouseup', onTouchend);\r\n\t\tframe.removeEventListener('mouseleave', onTouchend);\r\n\t\tframe.removeEventListener('click', onClick);\r\n\r\n\t\toptions.window.removeEventListener('resize', onResize);\r\n\r\n\t\tif (prevCtrl) {\r\n\t\t\tprevCtrl.removeEventListener('click', prev);\r\n\t\t}\r\n\r\n\t\tif (nextCtrl) {\r\n\t\t\tnextCtrl.removeEventListener('click', next);\r\n\t\t}\r\n\r\n\t\t// remove cloned slides if infinite is set\r\n\t\tif (options.infinite) {\r\n\t\t\tArray.apply(null, Array(options.infinite)).forEach(function() {\r\n\t\t\t\tslideContainer.removeChild(slideContainer.firstChild);\r\n\t\t\t\tslideContainer.removeChild(slideContainer.lastChild);\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t\tdispatchSliderEvent('after', 'destroy');\r\n\t}\r\n\r\n\t// event handling\r\n\r\n\tlet touchOffset;\r\n\tlet delta;\r\n\tlet isScrolling;\r\n\r\n\tfunction onTransitionEnd() {\r\n\t\tif (transitionEndCallback) {\r\n\t\t\ttransitionEndCallback();\r\n\r\n\t\t\ttransitionEndCallback = undefined;\r\n\t\t}\r\n\t}\r\n\r\n\tfunction onTouchstart(event) {\r\n\t\tconst { enableMouseEvents } = options;\r\n\t\tconst touches = event.touches ? event.touches[0] : event;\r\n\r\n\t\tif (enableMouseEvents) {\r\n\t\t\tframe.addEventListener('mousemove', onTouchmove);\r\n\t\t\tframe.addEventListener('mouseup', onTouchend);\r\n\t\t\tframe.addEventListener('mouseleave', onTouchend);\r\n\t\t}\r\n\r\n\t\tframe.addEventListener('touchmove', onTouchmove, touchEventParams);\r\n\t\tframe.addEventListener('touchend', onTouchend);\r\n\r\n\t\tconst { pageX, pageY } = touches;\r\n\r\n\t\ttouchOffset = {\r\n\t\t\tx: pageX,\r\n\t\t\ty: pageY,\r\n\t\t\ttime: Date.now()\r\n\t\t};\r\n\r\n\t\tisScrolling = undefined;\r\n\r\n\t\tdelta = {};\r\n\r\n\t\tdispatchSliderEvent('on', 'touchstart', {\r\n\t\t\tevent\r\n\t\t});\r\n\t}\r\n\r\n\tfunction onTouchmove(event) {\r\n\t\tconst touches = event.touches ? event.touches[0] : event;\r\n\t\tconst { pageX, pageY } = touches;\r\n\r\n\t\tdelta = {\r\n\t\t\tx: pageX - touchOffset.x,\r\n\t\t\ty: pageY - touchOffset.y\r\n\t\t};\r\n\r\n\t\tif (typeof isScrolling === 'undefined') {\r\n\t\t\tisScrolling = !!(\r\n\t\t\t\tisScrolling || Math.abs(delta.x) < Math.abs(delta.y)\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\tif (!isScrolling && touchOffset) {\r\n\t\t\ttranslate(position.x + delta.x, 0, null);\r\n\t\t}\r\n\r\n\t\t// may be\r\n\t\tdispatchSliderEvent('on', 'touchmove', {\r\n\t\t\tevent\r\n\t\t});\r\n\t}\r\n\r\n\tfunction onTouchend(event) {\r\n\t\t/**\r\n\t\t * time between touchstart and touchend in milliseconds\r\n\t\t * @duration {number}\r\n\t\t */\r\n\t\tconst duration = touchOffset\r\n\t\t\t? Date.now() - touchOffset.time\r\n\t\t\t: undefined;\r\n\r\n\t\t/**\r\n\t\t * is valid if:\r\n\t\t *\r\n\t\t * -> swipe attempt time is over 300 ms\r\n\t\t * and\r\n\t\t * -> swipe distance is greater than 25px\r\n\t\t * or\r\n\t\t * -> swipe distance is more then a third of the swipe area\r\n\t\t *\r\n\t\t * @isValidSlide {Boolean}\r\n\t\t */\r\n\t\tconst isValid =\r\n\t\t\t(Number(duration) < 300 && Math.abs(delta.x) > 25) ||\r\n\t\t\tMath.abs(delta.x) > frameWidth / 3;\r\n\r\n\t\t/**\r\n\t\t * is out of bounds if:\r\n\t\t *\r\n\t\t * -> index is 0 and delta x is greater than 0\r\n\t\t * or\r\n\t\t * -> index is the last slide and delta is smaller than 0\r\n\t\t *\r\n\t\t * @isOutOfBounds {Boolean}\r\n\t\t */\r\n\t\tconst isOutOfBounds =\r\n\t\t\t(!index && delta.x > 0) ||\r\n\t\t\t(index === slides.length - 1 && delta.x < 0);\r\n\r\n\t\tconst direction = delta.x < 0;\r\n\r\n\t\tif (!isScrolling) {\r\n\t\t\tif (isValid && !isOutOfBounds) {\r\n\t\t\t\tslide(false, direction);\r\n\t\t\t} else {\r\n\t\t\t\ttranslate(position.x, options.snapBackSpeed);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\ttouchOffset = undefined;\r\n\r\n\t\t/**\r\n\t\t * remove eventlisteners after swipe attempt\r\n\t\t */\r\n\t\tframe.removeEventListener('touchmove', onTouchmove);\r\n\t\tframe.removeEventListener('touchend', onTouchend);\r\n\t\tframe.removeEventListener('mousemove', onTouchmove);\r\n\t\tframe.removeEventListener('mouseup', onTouchend);\r\n\t\tframe.removeEventListener('mouseleave', onTouchend);\r\n\r\n\t\tdispatchSliderEvent('on', 'touchend', {\r\n\t\t\tevent\r\n\t\t});\r\n\t}\r\n\r\n\tfunction onClick(event) {\r\n\t\tif (delta.x) {\r\n\t\t\tevent.preventDefault();\r\n\t\t}\r\n\t}\r\n\r\n\tfunction onResize(event) {\r\n\t\tif (frameWidth !== elementWidth(frame)) {\r\n\t\t\treset();\r\n\r\n\t\t\tdispatchSliderEvent('on', 'resize', {\r\n\t\t\t\tevent\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n\r\n\t// trigger initial setup\r\n\tsetup();\r\n\r\n\t// expose public api\r\n\treturn {\r\n\t\tsetup,\r\n\t\treset,\r\n\t\tslideTo,\r\n\t\treturnIndex,\r\n\t\tprev,\r\n\t\tnext,\r\n\t\tdestroy\r\n\t};\r\n}\r\n","/**\r\n * Detecting prefixes for saving time and bytes\r\n */\r\nexport default function detectPrefixes() {\r\n\tlet transform;\r\n\tlet transition;\r\n\tlet transitionEnd;\r\n\r\n\t(function() {\r\n\t\tlet el = document.createElement('_');\r\n\t\tlet style = el.style;\r\n\r\n\t\tlet prop;\r\n\r\n\t\tif (style[(prop = 'webkitTransition')] === '') {\r\n\t\t\ttransitionEnd = 'webkitTransitionEnd';\r\n\t\t\ttransition = prop;\r\n\t\t}\r\n\r\n\t\tif (style[(prop = 'transition')] === '') {\r\n\t\t\ttransitionEnd = 'transitionend';\r\n\t\t\ttransition = prop;\r\n\t\t}\r\n\r\n\t\tif (style[(prop = 'webkitTransform')] === '') {\r\n\t\t\ttransform = prop;\r\n\t\t}\r\n\r\n\t\tif (style[(prop = 'msTransform')] === '') {\r\n\t\t\ttransform = prop;\r\n\t\t}\r\n\r\n\t\tif (style[(prop = 'transform')] === '') {\r\n\t\t\ttransform = prop;\r\n\t\t}\r\n\r\n\t\tdocument.body.insertBefore(el, null);\r\n\t\tstyle[transform] = 'translateX(0)';\r\n\t\tdocument.body.removeChild(el);\r\n\t})();\r\n\r\n\treturn {\r\n\t\ttransform,\r\n\t\ttransition,\r\n\t\ttransitionEnd\r\n\t};\r\n}\r\n","export default function detectSupportsPassive() {\r\n\tlet supportsPassive = false;\r\n\r\n\ttry {\r\n\t\tlet opts = Object.defineProperty({}, 'passive', {\r\n\t\t\tget() {\r\n\t\t\t\tsupportsPassive = true;\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\twindow.addEventListener('testPassive', null, opts);\r\n\t\twindow.removeEventListener('testPassive', null, opts);\r\n\t} catch (e) {}\r\n\r\n\treturn supportsPassive;\r\n}\r\n","/**\r\n * dispatch custom events\r\n *\r\n * @param {element} el slideshow element\r\n * @param {string} type custom event name\r\n * @param {object} detail custom detail information\r\n */\r\nexport default function dispatchEvent(target, type, detail) {\r\n\tlet event = new CustomEvent(type, {\r\n\t\tbubbles: true,\r\n\t\tcancelable: true,\r\n\t\tdetail: detail\r\n\t});\r\n\r\n\ttarget.dispatchEvent(event);\r\n}\r\n","import { Slider, SliderBehaviour } from '..';\r\nimport { getParentOrSelfWithClass } from '@opten/dom/get-parent-or-self-with-class';\r\n\r\nexport class SliderSlideDescriptionBehavior implements SliderBehaviour {\r\n\tprivate wrapper: HTMLElement;\r\n\tprivate sliderDescription: HTMLElement;\r\n\r\n\tinitialize(slider: Slider) {\r\n\t\tthis.wrapper = getParentOrSelfWithClass(\r\n\t\t\tslider.element,\r\n\t\t\t'js-slide-description-wrapper'\r\n\t\t);\r\n\t\tthis.sliderDescription = this.wrapper.querySelector(\r\n\t\t\t'.js-slider-description'\r\n\t\t);\r\n\t\tslider.element.addEventListener('after.lory.slide', (e: any) =>\r\n\t\t\tthis.apply(slider, e.detail.currentSlide)\r\n\t\t);\r\n\t}\r\n\r\n\tprivate apply(slider: Slider, index: number) {\r\n\t\tconst description = slider.slides[index].querySelector(\r\n\t\t\t'.js-slide-description'\r\n\t\t);\r\n\t\tthis.sliderDescription.innerHTML = description.innerHTML;\r\n\t}\r\n}\r\n","import { SortDirection } from '../sort-direction';\r\n\r\nexport function sortByDate(\r\n\ta: Date,\r\n\tb: Date,\r\n\tsortDir: SortDirection = SortDirection.Descending,\r\n) {\r\n\tif (a < b) {\r\n\t\treturn sortDir === SortDirection.Descending ? -1 : 1;\r\n\t}\r\n\tif (a > b) {\r\n\t\treturn sortDir === SortDirection.Descending ? 1 : -1;\r\n\t}\r\n\treturn 0;\r\n}\r\n","import { SortDirection } from '../sort-direction';\r\n\r\nexport function sortByNumber(\r\n\ta: number,\r\n\tb: number,\r\n\tsortDir: SortDirection = SortDirection.Descending,\r\n) {\r\n\tif (a < b) {\r\n\t\treturn sortDir === SortDirection.Descending ? -1 : 1;\r\n\t}\r\n\tif (a > b) {\r\n\t\treturn sortDir === SortDirection.Descending ? 1 : -1;\r\n\t}\r\n\treturn 0;\r\n}\r\n","import { SortDirection } from '../sort-direction';\r\n\r\nexport function sortByText(\r\n\ta: string,\r\n\tb: string,\r\n\tsortDir: SortDirection = SortDirection.Descending,\r\n) {\r\n\tif (a.toLowerCase() < b.toLowerCase()) {\r\n\t\treturn sortDir === SortDirection.Descending ? -1 : 1;\r\n\t}\r\n\tif (a.toLowerCase() > b.toLowerCase()) {\r\n\t\treturn sortDir === SortDirection.Descending ? 1 : -1;\r\n\t}\r\n\treturn 0;\r\n}\r\n","export enum SortDirection {\r\n\tDescending,\r\n\tAscending,\r\n}\r\n","import './styles';\r\n\r\nexport { StickyComponent } from './src/component';\r\n","import { Component } from '@opten/compiler/metadata/component';\r\nimport stickybits from 'stickybits';\r\n\r\n@Component({ className: 'js-sticky' })\r\nexport class StickyComponent {\r\n\tconstructor(private element: HTMLElement) {\r\n\t\tstickybits(this.element, {\r\n\t\t\tparentClass: 'js-sticky-parent',\r\n\t\t\tstickyChangeClass: 'is-sticky-change',\r\n\t\t\tstickyClass: 'is-sticky',\r\n\t\t\tstuckClass: 'is-stuck',\r\n\t\t\tuseStickyClasses: true\r\n\t\t});\r\n\t}\r\n}\r\n","import { Component } from '@opten/compiler/metadata/component';\r\nimport { TabDrop } from '.';\r\n\r\n@Component({ className: 'js-tabdrop' })\r\nexport class TabDropComponent {\r\n\tprivate tabdrop: TabDrop;\r\n\r\n\tconstructor(private element: HTMLElement) {\r\n\t\tthis.tabdrop = new TabDrop(element);\r\n\t}\r\n}\r\n","import { debounce } from '../reactive/debounce';\r\nimport { removeClassFactory } from '../dom/remove-class';\r\nimport { hasClass } from '../dom/has-class';\r\nimport { addClass } from '../dom/add-class';\r\nimport { addClassFactory } from '../dom/add-class-factory';\r\n\r\nexport class TabDrop {\r\n\tprivate itemHolder: HTMLElement;\r\n\tprivate tabdrop: HTMLElement;\r\n\tprivate children: HTMLElement[];\r\n\tprivate listChildren: HTMLElement[];\r\n\r\n\tconstructor(private element: HTMLElement) {\r\n\t\tthis.itemHolder = this.element.getElementsByClassName(\r\n\t\t\t'js-tabdrop-holder'\r\n\t\t)[0] as HTMLElement;\r\n\t\tthis.tabdrop = this.element.getElementsByClassName(\r\n\t\t\t'js-tabdrop-element'\r\n\t\t)[0] as HTMLElement;\r\n\t\tthis.children = Array.from(this.element.children) as HTMLElement[];\r\n\t\tthis.listChildren = this.children.filter(\r\n\t\t\tchild => !hasClass(child, 'js-tabdrop-element')\r\n\t\t);\r\n\r\n\t\twindow.addEventListener('resize', debounce(() => this.layout(), 100));\r\n\r\n\t\tthis.layout();\r\n\t}\r\n\r\n\tprotected onTransform(element: HTMLElement): HTMLElement {\r\n\t\treturn element.cloneNode(true) as HTMLElement;\r\n\t}\r\n\r\n\tprivate getBreakIndex() {\r\n\t\tconst containerWidth = this.element.offsetWidth;\r\n\t\tlet cummulatedWidth = this.tabdrop.offsetWidth;\r\n\t\tlet index = 0;\r\n\r\n\t\tfor (const child of this.listChildren) {\r\n\t\t\tcummulatedWidth += child.offsetWidth;\r\n\r\n\t\t\tif (cummulatedWidth > containerWidth) {\r\n\t\t\t\treturn index;\r\n\t\t\t}\r\n\r\n\t\t\tindex++;\r\n\t\t}\r\n\r\n\t\treturn -1;\r\n\t}\r\n\r\n\tprivate layout() {\r\n\t\tArray.from(this.element.children).forEach(removeClassFactory('d-none'));\r\n\t\tthis.itemHolder.innerHTML = '';\r\n\r\n\t\tconst breakIndex = this.getBreakIndex();\r\n\r\n\t\tif (breakIndex === -1) {\r\n\t\t\taddClass(this.tabdrop, 'd-none');\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst overlappingChildren = this.listChildren.slice(breakIndex);\r\n\r\n\t\toverlappingChildren.forEach(overlapping =>\r\n\t\t\tthis.itemHolder.appendChild(this.onTransform(overlapping))\r\n\t\t);\r\n\r\n\t\toverlappingChildren.forEach(addClassFactory('d-none'));\r\n\t}\r\n}\r\n","import { addClass } from '@opten/dom/add-class';\r\nimport { hasClass } from '@opten/dom/has-class';\r\nimport { removeClass, removeClassOnCollection } from '@opten/dom/remove-class';\r\nimport { toggleClass } from '@opten/dom/toggle-class';\r\nimport { scrollToOffset } from '@opten/scroll/scroll-to-offset';\r\nimport { addTransitionEndListener } from '@opten/transition/add-transition-end-listener';\r\nimport { debounce } from '@opten/reactive/debounce';\r\n\r\nexport interface TheWallOptions {\r\n\tonBeforeInit?: () => void;\r\n\tonReady?: () => void;\r\n\tonViewPortUpdate?: () => void;\r\n\tonItemChange?: () => void;\r\n\tonDestroy?: () => void;\r\n\tonShow?: () => void;\r\n\tonHide?: () => void;\r\n\tonContentLoading?: () => void;\r\n\tonContentLoaded?: () => void;\r\n\tmargin?: TheWallOptionsMargin;\r\n\tscrollerElm?: HTMLElement;\r\n\tscrollOffset?: number;\r\n\tarrows?: boolean;\r\n\tclosebutton?: boolean;\r\n\tkeyboardNavigation?: boolean;\r\n\tanimationSpeed?: number;\r\n\tautoScrollSpeed?: number;\r\n\tautoscroll?: boolean;\r\n\tresponsive?: boolean;\r\n\tinitialWrapperHeight?: number;\r\n\tdynamicHeight?: boolean;\r\n\tlistSelector?: string;\r\n\tlistItemSelector?: string;\r\n\thiddenClass?: string;\r\n\texpanderClass?: string;\r\n\texpanderInnerClass?: string;\r\n\tpointerClass?: string;\r\n\tloadingClass?: string;\r\n\tfullImgClass?: string;\r\n\tindexClass?: string;\r\n\trowClass?: string;\r\n\tselectedRowClass?: string;\r\n\tcontrolsClass?: string;\r\n\tcloseClass?: string;\r\n\tarrowClass?: string;\r\n\tarrowNextClass?: string;\r\n\tarrowPrevClass?: string;\r\n\tnextButtonClass?: string;\r\n\tprevButtonClass?: string;\r\n\tcloseButtonClass?: string;\r\n}\r\nexport interface TheWallOptionsMargin {\r\n\ttop?: number;\r\n\tbottom?: number;\r\n}\r\nexport interface TheWallOptionsEventNames {\r\n\tclick: string;\r\n}\r\n\r\nexport class TheWall {\r\n\texpanderWrapper: HTMLElement;\r\n\tcontentPointer: HTMLElement;\r\n\texpanderInner: HTMLElement;\r\n\tnextArrow: HTMLElement;\r\n\tprevArrow: HTMLElement;\r\n\tlist: HTMLElement;\r\n\titems: HTMLElement[];\r\n\titemsLength: number;\r\n\tcurrentIndex: number;\r\n\tcurrentRowIndex: number;\r\n\tselectedli: HTMLElement;\r\n\r\n\tprotected theWallId = 0;\r\n\tprotected isOpened = false;\r\n\tprotected isLoading = false;\r\n\tprotected cachedWrapperHeight = 0;\r\n\r\n\tprotected options: TheWallOptions = {\r\n\t\tonBeforeInit: null,\r\n\t\tonReady: null,\r\n\t\tonViewPortUpdate: null,\r\n\t\tonItemChange: null,\r\n\t\tonDestroy: null,\r\n\t\tonShow: null,\r\n\t\tonHide: null,\r\n\t\tonContentLoading: null,\r\n\t\tonContentLoaded: null,\r\n\t\tmargin: {\r\n\t\t\ttop: 10,\r\n\t\t\tbottom: 10\r\n\t\t},\r\n\t\tscrollerElm: null,\r\n\t\tscrollOffset: 150,\r\n\t\tarrows: true,\r\n\t\tclosebutton: true,\r\n\t\tkeyboardNavigation: true,\r\n\t\tanimationSpeed: 300,\r\n\t\tautoScrollSpeed: 500,\r\n\t\tautoscroll: true,\r\n\t\tresponsive: true,\r\n\t\tinitialWrapperHeight: 600,\r\n\t\tdynamicHeight: true,\r\n\t\tlistSelector: '.c-the-wall__list',\r\n\t\tlistItemSelector: '.c-the-wall__list__item',\r\n\t\thiddenClass: 'd-none',\r\n\t\texpanderClass: 'c-the-wall__expander',\r\n\t\texpanderInnerClass: 'c-the-wall__expander__inner',\r\n\t\tpointerClass: 'c-the-wall__expander__pointer',\r\n\t\tloadingClass: 'c-the-wall__loading',\r\n\t\tfullImgClass: 'c-the-wall__fullimg',\r\n\t\tindexClass: 'c-the-wall--index',\r\n\t\trowClass: 'c-the-wall--row',\r\n\t\tselectedRowClass: 'is-selected-row',\r\n\t\tcontrolsClass: 'c-the-wall__controls',\r\n\t\tcloseClass: 'c-the-wall__close',\r\n\t\tarrowClass: 'c-the-wall__arrow',\r\n\t\tarrowNextClass: 'c-the-wall__arrow__next',\r\n\t\tarrowPrevClass: 'c-the-wall__arrow__prev',\r\n\t\tnextButtonClass: '',\r\n\t\tprevButtonClass: '',\r\n\t\tcloseButtonClass: ''\r\n\t};\r\n\r\n\tconstructor(public element: HTMLElement, options?: TheWallOptions) {\r\n\t\tthis.expanderWrapper = document.createElement('div');\r\n\t\tthis.expanderInner = document.createElement('div');\r\n\t\tthis.contentPointer = document.createElement('div');\r\n\t\taddClass(this.expanderWrapper, this.options.expanderClass);\r\n\t\taddClass(this.expanderInner, this.options.expanderInnerClass);\r\n\t\taddClass(this.contentPointer, this.options.pointerClass);\r\n\t\tthis.options = {\r\n\t\t\t...this.options,\r\n\t\t\t...options\r\n\t\t};\r\n\r\n\t\tthis._init();\r\n\t}\r\n\r\n\tsetLisOffsets(): void {\r\n\t\tlet cachedOffsetTop = 0;\r\n\t\tlet rowIndex = 0;\r\n\t\tlet previousLi;\r\n\t\tlet i = 0;\r\n\t\tfor (const item of this.items) {\r\n\t\t\tremoveClass(item, 'is-first');\r\n\t\t\tremoveClass(item, 'is-last');\r\n\t\t\tremoveClass(\r\n\t\t\t\titem,\r\n\t\t\t\tthis.options.indexClass + item.getAttribute('data-index')\r\n\t\t\t);\r\n\t\t\tremoveClass(\r\n\t\t\t\titem,\r\n\t\t\t\tthis.options.rowClass + item.getAttribute('data-row-index')\r\n\t\t\t);\r\n\t\t\tlet isFirst = false;\r\n\t\t\tconst liPosition = {\r\n\t\t\t\ttop: item.offsetTop,\r\n\t\t\t\tleft: item.offsetLeft\r\n\t\t\t};\r\n\t\t\tif (\r\n\t\t\t\tliPosition.top >= cachedOffsetTop + 3 ||\r\n\t\t\t\tliPosition.top <= cachedOffsetTop - 3\r\n\t\t\t) {\r\n\t\t\t\tif (previousLi) {\r\n\t\t\t\t\taddClass(previousLi, 'is-last');\r\n\t\t\t\t}\r\n\t\t\t\tisFirst = true;\r\n\t\t\t\trowIndex++;\r\n\t\t\t}\r\n\t\t\tif (isFirst) {\r\n\t\t\t\taddClass(item, 'is-first');\r\n\t\t\t}\r\n\t\t\taddClass(item, this.options.indexClass + i);\r\n\t\t\taddClass(item, this.options.rowClass + rowIndex);\r\n\t\t\titem.setAttribute('data-row-index', rowIndex.toString());\r\n\t\t\titem.setAttribute('data-offset-top', liPosition.top.toString());\r\n\t\t\titem.setAttribute('data-offset-left', liPosition.left.toString());\r\n\t\t\titem.setAttribute('data-index', i.toString());\r\n\t\t\tpreviousLi = item;\r\n\t\t\tcachedOffsetTop = liPosition.top;\r\n\t\t\ti++;\r\n\t\t}\r\n\t}\r\n\r\n\tsetViewport() {\r\n\t\tif (!this.isOpened) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tthis.setLisOffsets();\r\n\r\n\t\tthis.updateElementsPosition();\r\n\r\n\t\tthis._updateContentPointerPosition();\r\n\r\n\t\tthis._execCallback(this.options.onViewPortUpdate);\r\n\t}\r\n\r\n\tloadInnerContents() {\r\n\t\tconst a = this.selectedli.getElementsByTagName('a')[0];\r\n\t\tlet callback;\r\n\t\tconst href =\r\n\t\t\tthis.selectedli.getAttribute('data-href') || a.getAttribute('href');\r\n\t\tthis.isLoading = true;\r\n\t\taddClass(this.expanderWrapper, 'is-loading');\r\n\t\tthis.expanderInner.innerHTML =\r\n\t\t\t'';\r\n\r\n\t\tif (!href) {\r\n\t\t\tError('sorry.. it was not possible to load any content');\r\n\t\t\treturn;\r\n\t\t} else {\r\n\t\t\tthis._execCallback(this.options.onContentLoading);\r\n\t\t\tswitch (this.selectedli.getAttribute('data-contenttype')) {\r\n\t\t\t\tcase 'image':\r\n\t\t\t\t\tcallback = this._loadImage(href);\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tdefault:\r\n\t\t\t\t\tcallback = this._loadInlineContent(href);\r\n\t\t\t\t\tbreak;\r\n\t\t\t}\r\n\r\n\t\t\tcallback.then(() => {\r\n\t\t\t\tremoveClass(this.expanderWrapper, 'is-loading');\r\n\t\t\t\tthis.expanderInner.style.height = 'auto';\r\n\r\n\t\t\t\tconst newHeight = this.options.dynamicHeight\r\n\t\t\t\t\t? this.expanderInner.offsetHeight\r\n\t\t\t\t\t: this.options.initialWrapperHeight;\r\n\t\t\t\tthis._updateExpanderWrapperHeight(newHeight);\r\n\t\t\t\tthis.update().then(() => {\r\n\t\t\t\t\tthis._scrollTo(\r\n\t\t\t\t\t\tthis.expanderWrapper.getBoundingClientRect().top -\r\n\t\t\t\t\t\t\tthis.options.scrollOffset\r\n\t\t\t\t\t);\r\n\t\t\t\t\tthis._execCallback(this.options.onContentLoaded);\r\n\t\t\t\t\tthis.isLoading = false;\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n\r\n\tshowExpander(e) {\r\n\t\te.preventDefault();\r\n\t\tthis.selectedli = e.currentTarget;\r\n\t\tif (this.selectedli && hasClass(this.selectedli, 'is-current')) {\r\n\t\t\tthis.hideExpander();\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif (this.isOpened) {\r\n\t\t\tthis._onItemChange.call(this);\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tthis.isOpened = true;\r\n\r\n\t\taddClass(this.expanderWrapper, 'is-open');\r\n\r\n\t\tthis.setViewport();\r\n\t\tthis._onItemChange();\r\n\r\n\t\tthis._execCallback(this.options.onShow);\r\n\t}\r\n\r\n\thideExpander() {\r\n\t\tremoveClass(this.expanderWrapper, 'is-open');\r\n\t\tconst oldHeight = this.cachedWrapperHeight;\r\n\t\tthis.expanderWrapper.style.height = '0';\r\n\r\n\t\tthis.expanderInner.innerHTML = '';\r\n\r\n\t\tthis.currentRowIndex = null;\r\n\t\tthis.selectedli = null;\r\n\t\tthis.currentIndex = null;\r\n\t\tthis.cachedWrapperHeight = 0;\r\n\r\n\t\tfor (const item of this.items) {\r\n\t\t\tremoveClass(item, this.options.selectedRowClass);\r\n\t\t\titem.style.marginBottom = '0';\r\n\t\t}\r\n\r\n\t\taddClass(this.expanderWrapper, 'is-decaying');\r\n\t\tsetTimeout(() => {\r\n\t\t\tremoveClass(this.expanderWrapper, 'is-decaying');\r\n\t\t}, 300);\r\n\r\n\t\tthis.isOpened = false;\r\n\r\n\t\tthis._updateCurrentClass();\r\n\r\n\t\tthis._execCallback(this.options.onHide);\r\n\t}\r\n\r\n\trefresh() {\r\n\t\tthis.list = this.element.querySelector(this.options.listSelector);\r\n\t\tthis.items = Array.from(\r\n\t\t\tthis.list.querySelectorAll(this.options.listItemSelector)\r\n\t\t) as HTMLElement[];\r\n\t\tif (this.selectedli.parentNode !== this.list) {\r\n\t\t\tthis.hideExpander();\r\n\t\t}\r\n\t\tthis.itemsLength = this.items.length;\r\n\t\tif (this.isOpened) {\r\n\t\t\tthis.setLisOffsets();\r\n\t\t\tthis.update();\r\n\t\t}\r\n\t}\r\n\r\n\tupdate() {\r\n\t\treturn new Promise(resolve => {\r\n\t\t\tthis._updateContentPointerPosition();\r\n\r\n\t\t\tif (\r\n\t\t\t\tparseInt(this.selectedli.getAttribute('data-row-index'), 0) !==\r\n\t\t\t\tthis.currentRowIndex\r\n\t\t\t) {\r\n\t\t\t\tthis.updateElementsPosition().then(() => {\r\n\t\t\t\t\tif (this.options.arrows) {\r\n\t\t\t\t\t\tthis._updateArrows();\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tthis._updateCurrentClass();\r\n\r\n\t\t\t\t\tthis.currentRowIndex = parseInt(\r\n\t\t\t\t\t\tthis.selectedli.getAttribute('data-row-index'),\r\n\t\t\t\t\t\t0\r\n\t\t\t\t\t);\r\n\t\t\t\t\tresolve();\r\n\t\t\t\t});\r\n\t\t\t} else {\r\n\t\t\t\tif (this.options.arrows) {\r\n\t\t\t\t\tthis._updateArrows();\r\n\t\t\t\t}\r\n\r\n\t\t\t\tthis._updateCurrentClass();\r\n\r\n\t\t\t\tthis.currentRowIndex = parseInt(\r\n\t\t\t\t\tthis.selectedli.getAttribute('data-row-index'),\r\n\t\t\t\t\t0\r\n\t\t\t\t);\r\n\t\t\t\tresolve();\r\n\t\t\t}\r\n\t\t});\r\n\t}\r\n\r\n\tupdateElementsPosition() {\r\n\t\t// robin\r\n\t\tthis.updateExpanderPosition();\r\n\r\n\t\treturn new Promise(resolve => {\r\n\t\t\tresolve();\r\n\t\t\t// let counter = 0;\r\n\t\t\tfor (const item of this.items) {\r\n\t\t\t\tconst pushIt =\r\n\t\t\t\t\titem.getAttribute('data-row-index') ===\r\n\t\t\t\t\tthis.selectedli.getAttribute('data-row-index');\r\n\t\t\t\ttoggleClass(item, this.options.selectedRowClass, pushIt);\r\n\t\t\t\t// addTransitionEndListener(item, () => {\r\n\t\t\t\t// \tcounter++;\r\n\t\t\t\t// \tif (counter >= this.itemsLength) {\r\n\r\n\t\t\t\t// \t\t// this.updateExpanderPosition();\r\n\t\t\t\t// \t\t// this.setLisOffsets();\r\n\t\t\t\t// \t\tresolve();\r\n\t\t\t\t// \t}\r\n\t\t\t\t// }, 500);\r\n\t\t\t\tif (pushIt) {\r\n\t\t\t\t\titem.style.marginBottom =\r\n\t\t\t\t\t\tthis.cachedWrapperHeight +\r\n\t\t\t\t\t\tthis.options.margin.bottom +\r\n\t\t\t\t\t\t'px';\r\n\t\t\t\t} else {\r\n\t\t\t\t\titem.style.marginBottom = '0';\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\t}\r\n\r\n\tupdateExpanderPosition() {\r\n\t\tlet newTopPosition =\r\n\t\t\tthis.selectedli.offsetHeight + this.options.margin.top;\r\n\t\tif (!this.isOpened) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tif (this.selectedli.getAttribute('data-offset-top')) {\r\n\t\t\tnewTopPosition =\r\n\t\t\t\tparseInt(this.selectedli.getAttribute('data-offset-top'), 0) +\r\n\t\t\t\tnewTopPosition;\r\n\t\t}\r\n\t\tthis.expanderWrapper.style.top = newTopPosition + 'px';\r\n\t}\r\n\r\n\tresizeHeight() {\r\n\t\tthis.expanderInner.style.height = 'auto';\r\n\t\tconst newHeight = this.options.dynamicHeight\r\n\t\t\t? this.expanderInner.offsetHeight\r\n\t\t\t: this.options.initialWrapperHeight;\r\n\t\tthis._updateExpanderWrapperHeight(newHeight);\r\n\t\tthis.setViewport();\r\n\t}\r\n\r\n\tshowItemByIndex(index) {\r\n\t\tconst currentLi = this.items[index];\r\n\t\tif (currentLi) {\r\n\t\t\tthis.selectedli = currentLi;\r\n\t\t\tthis._onItemChange();\r\n\t\t}\r\n\t}\r\n\r\n\tnext() {\r\n\t\tif (\r\n\t\t\tthis.isLoading ||\r\n\t\t\t!this.isOpened ||\r\n\t\t\tthis.currentIndex === this.itemsLength - 1\r\n\t\t) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tlet index;\r\n\t\tif (this.currentIndex + 1 === this.itemsLength - 1) {\r\n\t\t\tindex = this.currentIndex + 1;\r\n\t\t} else {\r\n\t\t\tindex = this.items\r\n\t\t\t\t.slice(this.currentIndex + 1, this.itemsLength - 1)\r\n\t\t\t\t.find(o => o.style.display !== 'none')\r\n\t\t\t\t.getAttribute('data-index');\r\n\t\t}\r\n\t\tthis.showItemByIndex(parseInt(index, 0));\r\n\t}\r\n\r\n\tprev() {\r\n\t\tif (this.isLoading || !this.isOpened || this.currentIndex === 0) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tconst index = this.items\r\n\t\t\t.slice(0, this.currentIndex)\r\n\t\t\t.reverse()\r\n\t\t\t.find(o => o.style.display !== 'none')\r\n\t\t\t.getAttribute('data-index');\r\n\t\tthis.showItemByIndex(parseInt(index, 0));\r\n\t}\r\n\r\n\tbindAll() {\r\n\t\taddTransitionEndListener(\r\n\t\t\tthis.expanderWrapper,\r\n\t\t\t() => {\r\n\t\t\t\tremoveClass(this.expanderWrapper, 'is-animating');\r\n\t\t\t},\r\n\t\t\tundefined,\r\n\t\t\tfalse\r\n\t\t);\r\n\r\n\t\t// FIXME: Do we really need this options? maybe better we support arrows if arrows are added to the html\r\n\t\tif (this.options.arrows) {\r\n\t\t\t// CHANGED: for of NodeListOf does not work in IE! changed to Array\r\n\t\t\tArray.from(\r\n\t\t\t\tthis.expanderWrapper.getElementsByClassName(\r\n\t\t\t\t\tthis.options.arrowClass\r\n\t\t\t\t)\r\n\t\t\t).forEach(item =>\r\n\t\t\t\titem.addEventListener('click', e => {\r\n\t\t\t\t\tthis._onArrowClicked(e);\r\n\t\t\t\t})\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\tif (this.options.closebutton) {\r\n\t\t\tArray.from(\r\n\t\t\t\tthis.expanderWrapper.getElementsByClassName(\r\n\t\t\t\t\tthis.options.closeClass\r\n\t\t\t\t)\r\n\t\t\t).forEach(item =>\r\n\t\t\t\titem.addEventListener('click', () => {\r\n\t\t\t\t\tthis.hideExpander();\r\n\t\t\t\t})\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\tArray.from(\r\n\t\t\tthis.element.querySelectorAll(\r\n\t\t\t\tthis.options.listSelector + ' ' + this.options.listItemSelector\r\n\t\t\t)\r\n\t\t).forEach(item =>\r\n\t\t\titem.addEventListener('click', e => {\r\n\t\t\t\tthis.showExpander(e);\r\n\t\t\t})\r\n\t\t);\r\n\r\n\t\tif (this.options.responsive) {\r\n\t\t\twindow.addEventListener('resize', () => {\r\n\t\t\t\tdebounce(() => this.resizeHeight(), 300);\r\n\t\t\t});\r\n\t\t\twindow.addEventListener('orientationchange', () => {\r\n\t\t\t\tdebounce(() => this.resizeHeight(), 300);\r\n\t\t\t});\r\n\t\t}\r\n\t\tif (this.options.keyboardNavigation) {\r\n\t\t\twindow.addEventListener('keydown', e => {\r\n\t\t\t\tthis._onKeypress(e);\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n\r\n\tunbindAll() {\r\n\t\tif (this.options.arrows) {\r\n\t\t\tArray.from(\r\n\t\t\t\tthis.expanderWrapper.getElementsByClassName(\r\n\t\t\t\t\tthis.options.arrowClass\r\n\t\t\t\t)\r\n\t\t\t).forEach(item =>\r\n\t\t\t\titem.removeEventListener('click', e => {\r\n\t\t\t\t\tthis._onArrowClicked(e);\r\n\t\t\t\t})\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\tif (this.options.closebutton) {\r\n\t\t\tArray.from(\r\n\t\t\t\tthis.expanderWrapper.getElementsByClassName(\r\n\t\t\t\t\tthis.options.closeClass\r\n\t\t\t\t)\r\n\t\t\t).forEach(item =>\r\n\t\t\t\titem.removeEventListener('click', () => {\r\n\t\t\t\t\tthis.hideExpander();\r\n\t\t\t\t})\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\tArray.from(\r\n\t\t\tthis.element.querySelectorAll(\r\n\t\t\t\tthis.options.listSelector + ' ' + this.options.listItemSelector\r\n\t\t\t)\r\n\t\t).forEach(item =>\r\n\t\t\titem.removeEventListener('click', e => {\r\n\t\t\t\tthis.showExpander(e);\r\n\t\t\t})\r\n\t\t);\r\n\r\n\t\tif (this.options.responsive) {\r\n\t\t\twindow.removeEventListener('resize', () => {\r\n\t\t\t\tdebounce(() => this.resizeHeight(), 300);\r\n\t\t\t});\r\n\t\t\twindow.removeEventListener('orientationchange', () => {\r\n\t\t\t\tdebounce(() => this.resizeHeight(), 300);\r\n\t\t\t});\r\n\t\t}\r\n\t\tif (this.options.keyboardNavigation) {\r\n\t\t\twindow.removeEventListener('keydown', e => {\r\n\t\t\t\tthis._onKeypress(e);\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n\r\n\tdestroy(e) {\r\n\t\tif (e) {\r\n\t\t\te.preventDefault();\r\n\t\t\te.stopImmediatePropagation();\r\n\t\t}\r\n\t\tthis.hideExpander();\r\n\r\n\t\tthis.unbindAll();\r\n\t\tthis.expanderWrapper.remove();\r\n\t\tthis._execCallback(this.options.onDestroy);\r\n\t}\r\n\r\n\tprivate _execCallback(callback: (e: T) => void, arg?: T): void {\r\n\t\tif (typeof callback === 'function') {\r\n\t\t\tcallback(arg);\r\n\t\t}\r\n\t}\r\n\r\n\tprivate _buildArrows(): void {\r\n\t\tconst nextElem = document.createElement('div');\r\n\t\tconst prevElem = document.createElement('div');\r\n\t\tconst nextElemSpan = document.createElement('span');\r\n\t\tconst prevElemSpan = document.createElement('span');\r\n\t\taddClass(nextElem, this.options.arrowClass);\r\n\t\taddClass(nextElem, this.options.arrowNextClass);\r\n\t\taddClass(nextElem, this.options.controlsClass);\r\n\t\taddClass(prevElem, this.options.arrowClass);\r\n\t\taddClass(prevElem, this.options.arrowPrevClass);\r\n\t\taddClass(prevElem, this.options.controlsClass);\r\n\t\taddClass(prevElemSpan, this.options.prevButtonClass);\r\n\t\taddClass(nextElemSpan, this.options.nextButtonClass);\r\n\t\tprevElem.appendChild(prevElemSpan);\r\n\t\tnextElem.appendChild(nextElemSpan);\r\n\t\tthis.expanderWrapper.appendChild(prevElem);\r\n\t\tthis.expanderWrapper.appendChild(nextElem);\r\n\t\tthis.nextArrow = this.expanderWrapper.getElementsByClassName(\r\n\t\t\tthis.options.arrowNextClass\r\n\t\t)[0] as HTMLElement;\r\n\t\tthis.prevArrow = this.expanderWrapper.getElementsByClassName(\r\n\t\t\tthis.options.arrowPrevClass\r\n\t\t)[0] as HTMLElement;\r\n\t}\r\n\r\n\tprivate _updateArrows(): void {\r\n\t\ttoggleClass(\r\n\t\t\tthis.prevArrow,\r\n\t\t\tthis.options.hiddenClass,\r\n\t\t\tthis._hasNoPrev()\r\n\t\t);\r\n\t\ttoggleClass(\r\n\t\t\tthis.nextArrow,\r\n\t\t\tthis.options.hiddenClass,\r\n\t\t\tthis._hasNoNext()\r\n\t\t);\r\n\t}\r\n\r\n\tprivate _hasNoNext(): boolean {\r\n\t\tconst hasNoNext = this.currentIndex >= this.itemsLength - 1;\r\n\t\tif (this.currentIndex === undefined || hasNoNext === true) {\r\n\t\t\treturn hasNoNext;\r\n\t\t}\r\n\t\tif (this.items[this.currentIndex + 1].style.display !== 'none') {\r\n\t\t\treturn hasNoNext;\r\n\t\t}\r\n\t\treturn (\r\n\t\t\tthis.items\r\n\t\t\t\t.slice(this.currentIndex + 1, this.itemsLength - 1)\r\n\t\t\t\t.find(o => o.style.display !== 'none') === undefined\r\n\t\t);\r\n\t}\r\n\r\n\tprivate _hasNoPrev(): boolean {\r\n\t\tconst hasNoPrev = this.currentIndex <= 0;\r\n\t\tif (this.currentIndex === undefined || hasNoPrev === true) {\r\n\t\t\treturn hasNoPrev;\r\n\t\t}\r\n\t\tif (this.items[this.currentIndex - 1].style.display !== 'none') {\r\n\t\t\treturn hasNoPrev;\r\n\t\t}\r\n\t\treturn (\r\n\t\t\tthis.items\r\n\t\t\t\t.slice(0, this.currentIndex)\r\n\t\t\t\t.reverse()\r\n\t\t\t\t.find(o => o.style.display !== 'none') === undefined\r\n\t\t);\r\n\t}\r\n\r\n\tprivate _scrollTo(value: number) {\r\n\t\tif (this.options.autoscroll === false) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\tscrollToOffset(value, undefined, this.options.autoScrollSpeed);\r\n\t}\r\n\r\n\tprivate _updateCurrentClass(): void {\r\n\t\tremoveClassOnCollection(this.items, 'is-current');\r\n\t\tif (typeof this.currentIndex === 'number') {\r\n\t\t\taddClass(this.items[this.currentIndex], 'is-current');\r\n\t\t}\r\n\t}\r\n\r\n\tprivate _updateContentPointerPosition(): void {\r\n\t\tconst offset =\r\n\t\t\tparseInt(this.selectedli.getAttribute('data-offset-left'), 0) +\r\n\t\t\tthis.element.getBoundingClientRect().left;\r\n\t\tif (offset) {\r\n\t\t\tthis.contentPointer.style.left =\r\n\t\t\t\toffset + this.selectedli.offsetWidth / 2 + 'px';\r\n\t\t} else {\r\n\t\t\tthis.contentPointer.style.left =\r\n\t\t\t\tthis.selectedli.offsetWidth / 2 + 'px';\r\n\t\t}\r\n\t}\r\n\r\n\tprivate _loadInlineContent(selector): Promise {\r\n\t\treturn new Promise((resolve, reject) => {\r\n\t\t\tconst el = document.querySelector(selector);\r\n\t\t\tif (!el) {\r\n\t\t\t\treject(\r\n\t\t\t\t\tError(\r\n\t\t\t\t\t\t'No element can be found using the \"' +\r\n\t\t\t\t\t\t\tselector +\r\n\t\t\t\t\t\t\t'\" selector'\r\n\t\t\t\t\t)\r\n\t\t\t\t);\r\n\t\t\t}\r\n\t\t\tthis.expanderInner.innerHTML = el.innerHTML;\r\n\t\t\tresolve();\r\n\t\t});\r\n\t}\r\n\r\n\tprivate _loadImage(src): Promise {\r\n\t\treturn new Promise((resolve, reject) => {\r\n\t\t\tlet img = new Image();\r\n\t\t\timg.onload = () => {\r\n\t\t\t\tthis.expanderInner.innerHTML =\r\n\t\t\t\t\t'![](\"')