();\r\n\r\n /** Global config */\r\n config: GalleryConfig;\r\n\r\n constructor(@Optional() @Inject(GALLERY_CONFIG) config: GalleryConfig) {\r\n this.config = config ? { ...defaultConfig, ...config } : defaultConfig;\r\n }\r\n\r\n /**\r\n * Get or create gallery by ID\r\n * @param id\r\n * @param config\r\n */\r\n ref(id = 'root', config?: GalleryConfig): GalleryRef {\r\n if (this._instances.has(id)) {\r\n const galleryRef: GalleryRef = this._instances.get(id);\r\n if (config) {\r\n galleryRef.setConfig(config);\r\n }\r\n return galleryRef;\r\n } else {\r\n return this._instances.set(id, new GalleryRef({ ...this.config, ...config }, this.deleteInstance(id))).get(id);\r\n }\r\n }\r\n\r\n /**\r\n * Destroy all gallery instances\r\n */\r\n destroyAll() {\r\n this._instances.forEach((ref: GalleryRef) => ref.destroy());\r\n }\r\n\r\n /**\r\n * Reset all gallery instances\r\n */\r\n resetAll() {\r\n this._instances.forEach((ref: GalleryRef) => ref.reset());\r\n }\r\n\r\n /**\r\n * Logger for debugging\r\n */\r\n debugConsole(...data: any[]): void {\r\n if (this.config.debug) {\r\n console.log(...data)\r\n }\r\n }\r\n\r\n /**\r\n * A destroyer function for each gallery instance\r\n */\r\n private deleteInstance(id: string) {\r\n return () => {\r\n if (this._instances.has(id)) {\r\n this._instances.delete(id);\r\n }\r\n };\r\n }\r\n\r\n}\r\n","import { Component, Input, ChangeDetectionStrategy } from '@angular/core';\r\nimport { GalleryState } from '../models/gallery.model';\r\n\r\n@Component({\r\n selector: 'gallery-counter',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n styleUrls: ['./gallery-counter.scss'],\r\n template: `\r\n {{ (state.currIndex + 1) + ' / ' + state.items.length }}
\r\n `,\r\n standalone: true\r\n})\r\nexport class GalleryCounterComponent {\r\n @Input() state: GalleryState;\r\n}\r\n","import { Component, Input, ChangeDetectionStrategy } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { Gallery } from '../services/gallery.service';\r\nimport { GalleryState } from '../models/gallery.model';\r\nimport { GalleryConfig } from '../models/config.model';\r\n\r\n@Component({\r\n selector: 'gallery-bullets',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n styleUrls: ['./gallery-bullets.scss'],\r\n template: `\r\n \r\n `,\r\n standalone: true,\r\n imports: [CommonModule]\r\n})\r\nexport class GalleryBulletsComponent {\r\n\r\n @Input() galleryId: string;\r\n @Input() state: GalleryState;\r\n @Input() config: GalleryConfig;\r\n\r\n constructor(public gallery: Gallery) {\r\n }\r\n}\r\n","import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\nimport { Directionality } from '@angular/cdk/bidi';\r\nimport { Gallery } from '../services/gallery.service';\r\nimport { GalleryState } from '../models/gallery.model';\r\nimport { GalleryConfig } from '../models/config.model';\r\n\r\n@Component({\r\n selector: 'gallery-nav',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n styleUrls: ['./gallery-nav.scss'],\r\n template: `\r\n \r\n\r\n \r\n `,\r\n standalone: true,\r\n imports: [CommonModule]\r\n})\r\nexport class GalleryNavComponent implements OnInit {\r\n\r\n navIcon: SafeHtml;\r\n @Input('galleryId') id: string;\r\n @Input() state: GalleryState;\r\n @Input() config: GalleryConfig;\r\n\r\n constructor(public gallery: Gallery, private _sanitizer: DomSanitizer, public dir: Directionality) {\r\n }\r\n\r\n ngOnInit() {\r\n this.navIcon = this._sanitizer.bypassSecurityTrustHtml(this.config.navIcon);\r\n }\r\n\r\n rightButton() {\r\n\r\n }\r\n\r\n leftButton(): void {\r\n\r\n }\r\n}\r\n","import { GalleryConfig } from '../../models/config.model';\r\nimport { SliderAdapter } from './base-adapter';\r\nimport { SmoothScrollOptions } from '../../smooth-scroll';\r\n\r\n/**\r\n * A clone of HammerJs constants\r\n */\r\nexport const DIRECTION_LEFT: number = 2;\r\nexport const DIRECTION_RIGHT: number = 4;\r\nexport const DIRECTION_UP: number = 8;\r\nexport const DIRECTION_DOWN: number = 16;\r\n\r\nexport class HorizontalAdapter implements SliderAdapter {\r\n\r\n readonly hammerDirection: number = DIRECTION_LEFT | DIRECTION_RIGHT;\r\n\r\n readonly scrollSnapType: string = 'x mandatory';\r\n\r\n get scrollValue(): number {\r\n return this.slider.scrollLeft;\r\n }\r\n\r\n get clientSize(): number {\r\n return this.slider.clientWidth;\r\n }\r\n\r\n get isContentLessThanContainer(): boolean {\r\n return this.clientSize >= this.slider.firstElementChild.clientWidth;\r\n }\r\n\r\n constructor(public slider: HTMLElement, public config: GalleryConfig) {\r\n }\r\n\r\n getScrollToValue(el: HTMLElement, behavior: ScrollBehavior): SmoothScrollOptions {\r\n const position: number = el.offsetLeft - ((this.clientSize - el.clientWidth) / 2);\r\n return {\r\n behavior,\r\n start: position\r\n };\r\n }\r\n\r\n getRootMargin(): string {\r\n return `1000px 1px 1000px 1px`;\r\n }\r\n\r\n getElementRootMargin(viewport: HTMLElement, el: HTMLElement): string {\r\n const rootMargin: number = -1 * ((viewport.clientWidth - el.clientWidth) / 2) + 1;\r\n return `0px ${ rootMargin }px 0px ${ rootMargin }px`;\r\n }\r\n\r\n getCentralizerStartSize(): number {\r\n if (this.isContentLessThanContainer) {\r\n const size: number = this.clientSize - this.slider.firstElementChild.clientWidth;\r\n return size / 2;\r\n }\r\n return (this.clientSize / 2) - (this.slider.firstElementChild.firstElementChild?.clientWidth / 2);\r\n }\r\n\r\n getCentralizerEndSize(): number {\r\n if (this.isContentLessThanContainer) {\r\n const size: number = this.clientSize - this.slider.firstElementChild.clientWidth;\r\n return size / 2;\r\n }\r\n return (this.clientSize / 2) - (this.slider.firstElementChild.lastElementChild?.clientWidth / 2);\r\n }\r\n\r\n getHammerVelocity(e: any): number {\r\n return e.velocityX;\r\n }\r\n\r\n getHammerValue(value: number, e: any, behavior: ScrollBehavior): ScrollToOptions {\r\n return {\r\n behavior,\r\n left: value - e.deltaX\r\n };\r\n }\r\n\r\n // getDraggingProperty(e: MouseEvent): number {\r\n // return e.clientX;\r\n // }\r\n\r\n // getDraggingValue(value: number, delta: number, behavior: ScrollBehavior): ScrollToOptions {\r\n // return {\r\n // behavior,\r\n // left: value - delta\r\n // };\r\n // }\r\n}\r\n\r\nexport class VerticalAdapter implements SliderAdapter {\r\n\r\n readonly hammerDirection: number = DIRECTION_UP | DIRECTION_DOWN;\r\n\r\n readonly scrollSnapType: string = 'y mandatory';\r\n\r\n get scrollValue(): number {\r\n return this.slider.scrollTop;\r\n }\r\n\r\n get clientSize(): number {\r\n return this.slider.clientHeight;\r\n }\r\n\r\n get isContentLessThanContainer(): boolean {\r\n return this.clientSize >= this.slider.firstElementChild.clientHeight;\r\n }\r\n\r\n constructor(public slider: HTMLElement, public config: GalleryConfig) {\r\n }\r\n\r\n getScrollToValue(el: HTMLElement, behavior: ScrollBehavior): SmoothScrollOptions {\r\n const position: number = el.offsetTop - ((this.clientSize - el.clientHeight) / 2);\r\n return {\r\n behavior,\r\n top: position\r\n };\r\n }\r\n\r\n getRootMargin(): string {\r\n return `1px 1000px 1px 1000px`;\r\n }\r\n\r\n getElementRootMargin(viewport: HTMLElement, el: HTMLElement): string {\r\n const rootMargin: number = -1 * ((viewport.clientHeight - el.clientHeight) / 2) + 1;\r\n return `${ rootMargin }px 0px ${ rootMargin }px 0px`;\r\n }\r\n\r\n getCentralizerStartSize(): number {\r\n if (this.isContentLessThanContainer) {\r\n const size = this.clientSize - this.slider.firstElementChild.clientHeight;\r\n return size / 2;\r\n }\r\n return (this.clientSize / 2) - (this.slider.firstElementChild.firstElementChild?.clientHeight / 2);\r\n }\r\n\r\n getCentralizerEndSize(): number {\r\n if (this.isContentLessThanContainer) {\r\n const size = this.clientSize - this.slider.firstElementChild.clientHeight;\r\n return size / 2;\r\n }\r\n return (this.clientSize / 2) - (this.slider.firstElementChild.lastElementChild?.clientHeight / 2);\r\n }\r\n\r\n getHammerVelocity(e: any): number {\r\n return e.velocityY;\r\n }\r\n\r\n getHammerValue(value: number, e: any, behavior: ScrollBehavior): ScrollToOptions {\r\n return {\r\n behavior,\r\n top: value - e.deltaY\r\n };\r\n }\r\n\r\n // getDraggingProperty(e: MouseEvent): number {\r\n // return e.clientY;\r\n // }\r\n\r\n // getDraggingValue(value: number, delta: number, behavior: ScrollBehavior): ScrollToOptions {\r\n // return {\r\n // behavior,\r\n // top: value - delta\r\n // };\r\n // }\r\n}\r\n","export abstract class SliderAdapter {\r\n\r\n readonly abstract hammerDirection: number;\r\n\r\n readonly abstract scrollSnapType: string;\r\n\r\n abstract get scrollValue(): number;\r\n\r\n abstract get clientSize(): number;\r\n\r\n abstract get isContentLessThanContainer(): boolean;\r\n\r\n abstract getScrollToValue(el: Element, behavior: ScrollBehavior): ScrollToOptions;\r\n\r\n abstract getCentralizerStartSize(): number;\r\n\r\n abstract getCentralizerEndSize(): number;\r\n\r\n abstract getRootMargin(): string;\r\n\r\n abstract getElementRootMargin(viewport: HTMLElement, el: HTMLElement): string;\r\n\r\n abstract getHammerVelocity(e): number;\r\n\r\n abstract getHammerValue(value: number, delta: number, behavior: ScrollBehavior): ScrollToOptions;\r\n\r\n // abstract getDraggingValue(value: number, delta: number, behavior: ScrollBehavior): ScrollToOptions;\r\n\r\n // abstract getDraggingProperty(e: MouseEvent): number;\r\n}\r\n","/**\r\n * https://github.com/gre/bezier-easing\r\n * BezierEasing - use bezier curve for transition easing function\r\n * by Gaëtan Renaudeau 2014 - 2015 – MIT License\r\n */\r\n\r\n// These values are established by empiricism with tests (tradeoff: performance VS precision)\r\nconst NEWTON_ITERATIONS = 4;\r\nconst NEWTON_MIN_SLOPE = 0.001;\r\nconst SUBDIVISION_PRECISION = 0.0000001;\r\nconst SUBDIVISION_MAX_ITERATIONS = 10;\r\n\r\nconst kSplineTableSize = 11;\r\nconst kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);\r\n\r\nconst float32ArraySupported = typeof Float32Array === 'function';\r\n\r\nfunction A(aA1, aA2) {\r\n return 1.0 - 3.0 * aA2 + 3.0 * aA1;\r\n}\r\n\r\nfunction B(aA1, aA2) {\r\n return 3.0 * aA2 - 6.0 * aA1;\r\n}\r\n\r\nfunction C(aA1) {\r\n return 3.0 * aA1;\r\n}\r\n\r\n// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.\r\nfunction calcBezier(aT, aA1, aA2) {\r\n return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;\r\n}\r\n\r\n// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.\r\nfunction getSlope(aT, aA1, aA2) {\r\n return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);\r\n}\r\n\r\nfunction binarySubdivide(aX, aA, aB, mX1, mX2) {\r\n let currentX, currentT, i = 0;\r\n do {\r\n currentT = aA + (aB - aA) / 2.0;\r\n currentX = calcBezier(currentT, mX1, mX2) - aX;\r\n if (currentX > 0.0) {\r\n aB = currentT;\r\n } else {\r\n aA = currentT;\r\n }\r\n } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);\r\n return currentT;\r\n}\r\n\r\nfunction newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {\r\n for (let i = 0; i < NEWTON_ITERATIONS; ++i) {\r\n let currentSlope = getSlope(aGuessT, mX1, mX2);\r\n if (currentSlope === 0.0) {\r\n return aGuessT;\r\n }\r\n let currentX = calcBezier(aGuessT, mX1, mX2) - aX;\r\n aGuessT -= currentX / currentSlope;\r\n }\r\n return aGuessT;\r\n}\r\n\r\nfunction LinearEasing(x) {\r\n return x;\r\n}\r\n\r\nexport default function bezier(mX1, mY1, mX2, mY2) {\r\n if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {\r\n throw new Error('bezier x values must be in [0, 1] range');\r\n }\r\n\r\n if (mX1 === mY1 && mX2 === mY2) {\r\n return LinearEasing;\r\n }\r\n\r\n // Precompute samples table\r\n let sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);\r\n for (let i = 0; i < kSplineTableSize; ++i) {\r\n sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);\r\n }\r\n\r\n function getTForX(aX) {\r\n let intervalStart = 0.0;\r\n let currentSample = 1;\r\n let lastSample = kSplineTableSize - 1;\r\n\r\n for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {\r\n intervalStart += kSampleStepSize;\r\n }\r\n --currentSample;\r\n\r\n // Interpolate to provide an initial guess for t\r\n let dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);\r\n let guessForT = intervalStart + dist * kSampleStepSize;\r\n\r\n let initialSlope = getSlope(guessForT, mX1, mX2);\r\n if (initialSlope >= NEWTON_MIN_SLOPE) {\r\n return newtonRaphsonIterate(aX, guessForT, mX1, mX2);\r\n } else if (initialSlope === 0.0) {\r\n return guessForT;\r\n } else {\r\n return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);\r\n }\r\n }\r\n\r\n return function BezierEasing(x) {\r\n // Because JavaScript number are imprecise, we should guarantee the extremes are right.\r\n if (x === 0) {\r\n return 0;\r\n }\r\n if (x === 1) {\r\n return 1;\r\n }\r\n return calcBezier(getTForX(x), mY1, mY2);\r\n };\r\n};\r\n","import {\r\n Directive,\r\n Inject,\r\n Input,\r\n Output,\r\n NgZone,\r\n OnInit,\r\n OnDestroy,\r\n ElementRef,\r\n EventEmitter\r\n} from '@angular/core';\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { Dir } from '@angular/cdk/bidi';\r\nimport { _Bottom, _Left, _Right, _Top, _Without } from '@angular/cdk/scrolling';\r\nimport { getRtlScrollAxisType, RtlScrollAxisType } from '@angular/cdk/platform';\r\nimport {\r\n Observable,\r\n Subject,\r\n Subscriber,\r\n Subscription,\r\n of,\r\n take,\r\n merge,\r\n expand,\r\n fromEvent,\r\n switchMap,\r\n takeUntil,\r\n takeWhile,\r\n finalize\r\n} from 'rxjs';\r\nimport BezierEasing from './bezier-easing';\r\nimport { GalleryConfig } from '../models/config.model';\r\nimport { SmoothScrollOptions, SmoothScrollStep, SmoothScrollToOptions } from './index';\r\nimport { SliderAdapter } from '../components/adapters';\r\n\r\ndeclare const Hammer: any;\r\n\r\n@Directive({\r\n selector: '[smoothScroll]',\r\n standalone: true,\r\n providers: [Dir]\r\n})\r\nexport class SmoothScroll implements OnInit, OnDestroy {\r\n\r\n /** HammerJS instance */\r\n private _hammer: any;\r\n\r\n private readonly _scrollController: Subject = new Subject();\r\n\r\n private readonly _finished: Subject = new Subject();\r\n\r\n private readonly _el: HTMLElement;\r\n\r\n private _isInterruptedByMouse: boolean;\r\n\r\n private _subscription: Subscription;\r\n\r\n private get _w(): Window {\r\n return this._document.defaultView;\r\n }\r\n\r\n /**\r\n * Timing method\r\n */\r\n private get _now(): () => number {\r\n return this._w.performance?.now?.bind(this._w.performance) || Date.now;\r\n }\r\n\r\n @Input()\r\n set smoothScroll(value: SmoothScrollOptions) {\r\n if (value) {\r\n this._zone.runOutsideAngular(() => {\r\n this.scrollTo(value);\r\n });\r\n }\r\n }\r\n\r\n @Input() adapter: SliderAdapter;\r\n\r\n @Input() config: GalleryConfig;\r\n\r\n @Input('smoothScrollInterruptOnMousemove') interruptOnMousemove: boolean;\r\n\r\n @Output() isScrollingChange: EventEmitter = new EventEmitter();\r\n\r\n constructor(@Inject(DOCUMENT) private _document: Document,\r\n private _zone: NgZone,\r\n private _dir: Dir,\r\n _el: ElementRef) {\r\n this._el = _el.nativeElement;\r\n }\r\n\r\n ngOnInit(): void {\r\n this._subscription = this._scrollController.pipe(\r\n switchMap((context: SmoothScrollStep) => {\r\n this._zone.run(() => {\r\n this.isScrollingChange.emit(true);\r\n });\r\n\r\n this._el.classList.add('g-scrolling');\r\n this._el.style.setProperty('--slider-scroll-snap-type', 'none');\r\n\r\n // Scroll each step recursively\r\n return of(null).pipe(\r\n expand(() => this._step(context).pipe(\r\n takeWhile((currContext: SmoothScrollStep) => this._isFinished(currContext)),\r\n takeUntil(this._finished)\r\n )),\r\n finalize(() => this.resetElement()),\r\n takeUntil(this._interrupted()),\r\n );\r\n })\r\n ).subscribe();\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this._subscription?.unsubscribe();\r\n this._scrollController.complete();\r\n }\r\n\r\n /**\r\n * changes scroll position inside an element\r\n */\r\n private _scrollElement(x: number, y: number): void {\r\n this._el.scrollLeft = x;\r\n this._el.scrollTop = y;\r\n }\r\n\r\n private resetElement(): void {\r\n this._zone.run(() => {\r\n this.isScrollingChange.emit(false);\r\n });\r\n\r\n this._el.classList.remove('g-scrolling');\r\n if (!this._isInterruptedByMouse) {\r\n this._el.style.setProperty('--slider-scroll-snap-type', this.adapter.scrollSnapType);\r\n }\r\n this._isInterruptedByMouse = false;\r\n }\r\n\r\n /**\r\n * Checks if smooth scroll has reached, cleans up the smooth scroll stream and resolves its promise\r\n */\r\n private _isFinished(context: SmoothScrollStep): boolean {\r\n if (context.currentX !== context.x || context.currentY !== context.y) {\r\n return true;\r\n }\r\n this._finished.next();\r\n return false;\r\n }\r\n\r\n /**\r\n * Terminates an ongoing smooth scroll\r\n */\r\n private _interrupted(): Observable {\r\n let interrupt$: Observable;\r\n if (this.interruptOnMousemove && typeof Hammer !== 'undefined') {\r\n this._hammer = new Hammer(this._el, { inputClass: Hammer.MouseInput });\r\n this._hammer.get('pan').set({ direction: this.adapter.hammerDirection });\r\n\r\n // For gallery thumb slider, dragging thumbnails should cancel the ongoing scroll\r\n interrupt$ = merge(\r\n new Observable((subscriber: Subscriber) => {\r\n this._hammer.on('panstart', () => {\r\n this._isInterruptedByMouse = true;\r\n subscriber.next();\r\n subscriber.complete();\r\n });\r\n return () => {\r\n this._hammer.destroy();\r\n }\r\n }),\r\n fromEvent(this._el, 'wheel', { passive: true, capture: true }),\r\n fromEvent(this._el, 'touchmove', { passive: true, capture: true }),\r\n )\r\n } else {\r\n interrupt$ = merge(\r\n fromEvent(this._el, 'wheel', { passive: true, capture: true }),\r\n fromEvent(this._el, 'touchmove', { passive: true, capture: true }),\r\n )\r\n }\r\n return interrupt$.pipe(take(1));\r\n }\r\n\r\n /**\r\n * A function called recursively that, given a context, steps through scrolling\r\n */\r\n private _step(context: SmoothScrollStep): Observable {\r\n return new Observable((subscriber: Subscriber) => {\r\n let elapsed: number = (this._now() - context.startTime) / context.duration;\r\n\r\n // avoid elapsed times higher than one\r\n elapsed = elapsed > 1 ? 1 : elapsed;\r\n\r\n // apply easing to elapsed time\r\n const value: number = context.easing(elapsed);\r\n\r\n context.currentX = context.startX + (context.x - context.startX) * value;\r\n context.currentY = context.startY + (context.y - context.startY) * value;\r\n\r\n this._scrollElement(context.currentX, context.currentY);\r\n // Proceed to the step\r\n requestAnimationFrame(() => {\r\n subscriber.next(context);\r\n subscriber.complete();\r\n });\r\n });\r\n }\r\n\r\n private _applyScrollToOptions(options: SmoothScrollToOptions): void {\r\n if (!options.duration) {\r\n this._scrollElement(options.left, options.top);\r\n }\r\n\r\n const context: SmoothScrollStep = {\r\n scrollable: this._el,\r\n startTime: this._now(),\r\n startX: this._el.scrollLeft,\r\n startY: this._el.scrollTop,\r\n x: options.left == null ? this._el.scrollLeft : ~~options.left,\r\n y: options.top == null ? this._el.scrollTop : ~~options.top,\r\n duration: options.duration,\r\n easing: BezierEasing(options.easing.x1, options.easing.y1, options.easing.x2, options.easing.y2)\r\n };\r\n\r\n this._scrollController.next(context);\r\n }\r\n\r\n /**\r\n * Scrolls to the specified offsets. This is a normalized version of the browser's native scrollTo\r\n * method, since browsers are not consistent about what scrollLeft means in RTL. For this method\r\n * left and right always refer to the left and right side of the scrolling container irrespective\r\n * of the layout direction. start and end refer to left and right in an LTR context and vice-versa\r\n * in an RTL context.\r\n * @param params specified the offsets to scroll to.\r\n */\r\n scrollTo(params: SmoothScrollOptions): void {\r\n const isRtl: boolean = this._dir.value === 'rtl';\r\n const rtlScrollAxisType: RtlScrollAxisType = getRtlScrollAxisType();\r\n\r\n const options: SmoothScrollToOptions = {\r\n ...params,\r\n ...({\r\n // Rewrite start & end offsets as right or left offsets.\r\n left: params.left == null ? (isRtl ? params.end : params.start) : params.left,\r\n right: params.right == null ? (isRtl ? params.start : params.end) : params.right\r\n } as _Without<_Bottom & _Top>),\r\n duration: params.behavior === 'smooth' ? this.config.scrollDuration : 0,\r\n easing: this.config.scrollEase,\r\n };\r\n\r\n // Rewrite the bottom offset as a top offset.\r\n if (options.bottom != null) {\r\n (options as _Without<_Bottom> & _Top).top = this._el.scrollHeight - this._el.clientHeight - options.bottom;\r\n }\r\n\r\n // Rewrite the right offset as a left offset.\r\n if (isRtl && rtlScrollAxisType !== RtlScrollAxisType.NORMAL) {\r\n if (options.left != null) {\r\n (options as _Without<_Left> & _Right).right = this._el.scrollWidth - this._el.clientWidth - options.left;\r\n }\r\n\r\n if (rtlScrollAxisType === RtlScrollAxisType.INVERTED) {\r\n options.left = options.right;\r\n } else if (rtlScrollAxisType === RtlScrollAxisType.NEGATED) {\r\n options.left = options.right ? -options.right : options.right;\r\n }\r\n } else {\r\n if (options.right != null) {\r\n (options as _Without<_Right> & _Left).left = this._el.scrollWidth - this._el.clientWidth - options.right;\r\n }\r\n }\r\n return this._applyScrollToOptions(options);\r\n }\r\n}\r\n","import {\r\n Directive,\r\n Inject,\r\n Input,\r\n Output,\r\n OnChanges,\r\n OnDestroy,\r\n SimpleChanges,\r\n NgZone,\r\n ElementRef,\r\n EventEmitter\r\n} from '@angular/core';\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { Platform } from '@angular/cdk/platform';\r\nimport { Directionality } from '@angular/cdk/bidi';\r\nimport { SliderAdapter } from '../components/adapters';\r\nimport { GalleryState } from '../models/gallery.model';\r\nimport { GalleryConfig } from '../models/config.model';\r\nimport { Orientation } from '../models/constants';\r\nimport { GalleryItemComponent } from '../components/gallery-item.component';\r\nimport { GalleryThumbComponent } from '../components/gallery-thumb.component';\r\n\r\ndeclare const Hammer: any;\r\n\r\n@Directive({\r\n selector: '[hammerSliding]',\r\n standalone: true\r\n})\r\nexport class HammerSliding implements OnChanges, OnDestroy {\r\n\r\n /** HammerJS instance */\r\n private _hammer: any;\r\n\r\n get _viewport(): HTMLElement {\r\n return this._el.nativeElement;\r\n }\r\n\r\n @Input('hammerSliding') enabled: boolean;\r\n\r\n @Input() galleryId: string;\r\n\r\n @Input() items: GalleryItemComponent[] | GalleryThumbComponent[];\r\n\r\n @Input() adapter: SliderAdapter;\r\n\r\n @Input() state: GalleryState;\r\n\r\n @Input() config: GalleryConfig;\r\n\r\n @Output() activeIndexChange: EventEmitter = new EventEmitter();\r\n\r\n @Output() isSlidingChange: EventEmitter = new EventEmitter();\r\n\r\n constructor(@Inject(DOCUMENT) private _document: Document,\r\n private _el: ElementRef,\r\n private _dir: Directionality,\r\n private _platform: Platform,\r\n private _zone: NgZone) {\r\n }\r\n\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes.enabled && changes.enabled?.currentValue !== changes.enabled?.previousValue) {\r\n this.enabled ? this._subscribe() : this._unsubscribe();\r\n }\r\n if (!changes.adapter?.firstChange && changes.adapter?.currentValue !== changes.adapter?.previousValue) {\r\n this.enabled ? this._subscribe() : this._unsubscribe();\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this._unsubscribe();\r\n }\r\n\r\n private _subscribe(): void {\r\n this._unsubscribe();\r\n\r\n if (!this._platform.ANDROID && !this._platform.IOS && typeof Hammer !== 'undefined') {\r\n this._zone.runOutsideAngular(() => {\r\n\r\n const direction: number = this.adapter.hammerDirection;\r\n this._hammer = new Hammer(this._el.nativeElement, { inputClass: Hammer.MouseInput });\r\n this._hammer.get('pan').set({ direction });\r\n\r\n let offset: number;\r\n\r\n // Set panOffset for sliding on pan start event\r\n this._hammer.on('panstart', () => {\r\n this._zone.run(() => {\r\n this.isSlidingChange.emit(true);\r\n });\r\n\r\n offset = this.adapter.scrollValue;\r\n this._viewport.classList.add('g-sliding');\r\n this._viewport.style.setProperty('--slider-scroll-snap-type', 'none');\r\n });\r\n\r\n this._hammer.on('panmove', (e: any) => this._viewport.scrollTo(this.adapter.getHammerValue(offset, e, 'auto')));\r\n\r\n this._hammer.on('panend', (e: any) => {\r\n this._document.onselectstart = null;\r\n this._viewport.classList.remove('g-sliding');\r\n const index: number = this.getIndexOnMouseUp(e);\r\n\r\n this._zone.run(() => {\r\n this.isSlidingChange.emit(false);\r\n this.activeIndexChange.emit(index);\r\n });\r\n });\r\n });\r\n }\r\n }\r\n\r\n private _unsubscribe(): void {\r\n this._hammer?.destroy();\r\n }\r\n\r\n private getIndexOnMouseUp(e: any): number {\r\n // Check if scrolled item is great enough to navigate\r\n const currElement: Element = this.items[this.state.currIndex].nativeElement;\r\n\r\n // Find the gallery item element in the center elements\r\n const elementAtCenter: Element = this.getElementFromViewportCenter();\r\n\r\n // Check if center item can be taken from element using\r\n if (elementAtCenter && elementAtCenter !== currElement) {\r\n return +elementAtCenter.getAttribute('galleryIndex');\r\n }\r\n\r\n const velocity: number = this.adapter.getHammerVelocity(e);\r\n // Check if velocity is great enough to navigate\r\n if (Math.abs(velocity) > 0.3) {\r\n if (this.config.orientation === Orientation.Horizontal) {\r\n if (velocity > 0) {\r\n return this._dir.value === 'rtl' ? this.state.currIndex + 1 : this.state.currIndex - 1;\r\n }\r\n return this._dir.value === 'rtl' ? this.state.currIndex - 1 : this.state.currIndex + 1;\r\n } else {\r\n return velocity > 0 ? this.state.currIndex - 1 : this.state.currIndex + 1;\r\n }\r\n }\r\n\r\n // Reset position to the current index\r\n return -1;\r\n }\r\n\r\n private getElementFromViewportCenter(): Element {\r\n // Get slider position relative to the document\r\n const sliderRect: DOMRect = this._viewport.getBoundingClientRect();\r\n // Try look for the center item using `elementsFromPoint` function\r\n const centerElements: Element[] = this._document.elementsFromPoint(\r\n sliderRect.x + (sliderRect.width / 2),\r\n sliderRect.y + (sliderRect.height / 2)\r\n );\r\n // Find the gallery item element in the center elements\r\n return centerElements.find((element: Element) => {\r\n return element.getAttribute('galleryId') === this.galleryId;\r\n });\r\n }\r\n}\r\n","import { Observable, Subscriber, mergeMap, filter, map } from 'rxjs';\r\n\r\nexport class ActiveItemObserver {\r\n\r\n observe(root: HTMLElement, elements: HTMLElement[], rootMargin: string): Observable {\r\n return createIntersectionObserver(root, elements, rootMargin).pipe(\r\n map((entry: IntersectionObserverEntry) => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('g-item-highlight');\r\n return +entry.target.getAttribute('galleryIndex');\r\n } else {\r\n entry.target.classList.remove('g-item-highlight');\r\n return -1;\r\n }\r\n }),\r\n filter((index: number) => index !== -1)\r\n );\r\n }\r\n}\r\n\r\nfunction createIntersectionObserver(root: HTMLElement, elements: HTMLElement[], rootMargin: string): Observable {\r\n return new Observable((observer: Subscriber) => {\r\n const intersectionObserver: IntersectionObserver = new IntersectionObserver(\r\n (entries: IntersectionObserverEntry[]) => observer.next(entries),\r\n {\r\n root,\r\n rootMargin,\r\n threshold: 1\r\n }\r\n );\r\n elements.forEach((element: HTMLElement) => intersectionObserver.observe(element));\r\n return () => {\r\n elements.forEach((element: HTMLElement) => intersectionObserver.unobserve(element));\r\n intersectionObserver.disconnect();\r\n };\r\n }).pipe(\r\n mergeMap((entries: IntersectionObserverEntry[]) => entries)\r\n );\r\n}\r\n\r\n","import { Directive, Input, Output, OnChanges, OnDestroy, NgZone, ElementRef, EventEmitter } from '@angular/core';\r\nimport { skip, Subscription } from 'rxjs';\r\nimport { GalleryConfig } from '../models/config.model';\r\nimport { ActiveItemObserver } from './active-item-observer';\r\nimport { SliderAdapter } from '../components/adapters';\r\nimport { GalleryItemComponent } from '../components/gallery-item.component';\r\n\r\n@Directive({\r\n selector: '[sliderIntersectionObserver]',\r\n standalone: true\r\n})\r\nexport class SliderIntersectionObserver implements OnChanges, OnDestroy {\r\n\r\n private _currentSubscription: Subscription;\r\n\r\n private _sensor: ActiveItemObserver = new ActiveItemObserver();\r\n\r\n private get _viewport(): HTMLElement {\r\n return this._el.nativeElement;\r\n }\r\n\r\n @Input() adapter: SliderAdapter;\r\n\r\n @Input() items: GalleryItemComponent[];\r\n\r\n @Input() config: GalleryConfig;\r\n\r\n @Input('sliderIntersectionObserverDisabled') disabled: boolean;\r\n\r\n @Output() activeIndexChange: EventEmitter = new EventEmitter();\r\n\r\n constructor(private _zone: NgZone, private _el: ElementRef) {\r\n }\r\n\r\n ngOnChanges(): void {\r\n (this.config.itemAutosize || this.disabled) ? this._unsubscribe() : this._subscribe();\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this._unsubscribe();\r\n }\r\n\r\n private _subscribe(): void {\r\n this._unsubscribe();\r\n\r\n if (!!this.adapter && !!this.items?.length) {\r\n const rootMargin: string = this.adapter.getRootMargin();\r\n if (this.config.debug) {\r\n this._viewport.style.setProperty('--intersection-margin', `\"INTERSECTION(${ rootMargin })\"`);\r\n }\r\n\r\n this._zone.runOutsideAngular(() => {\r\n this._currentSubscription = this._sensor.observe(\r\n this._viewport,\r\n this.items.map((item: GalleryItemComponent) => item.nativeElement),\r\n rootMargin\r\n ).subscribe((index: number) => {\r\n this._zone.run(() => this.activeIndexChange.emit(index));\r\n });\r\n });\r\n }\r\n }\r\n\r\n private _unsubscribe(): void {\r\n this._currentSubscription?.unsubscribe();\r\n }\r\n}\r\n","import { Observable, Subscriber, mergeMap } from 'rxjs';\r\n\r\nexport function resizeObservable(el: HTMLElement, setter?: (ref: ResizeObserver) => void): Observable {\r\n return new Observable((subscriber: Subscriber) => {\r\n const resizeObserver: ResizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => subscriber.next(entries));\r\n resizeObserver.observe(el);\r\n if (setter) {\r\n setter(resizeObserver);\r\n }\r\n return () => resizeObserver.disconnect();\r\n }).pipe(\r\n mergeMap((entries: ResizeObserverEntry[]) => entries)\r\n );\r\n}\r\n\r\n","import { Component, Input, ViewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core';\r\nimport { NgIf } from '@angular/common';\r\nimport { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';\r\n\r\n@Component({\r\n selector: 'gallery-iframe',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n template: `\r\n \r\n \r\n \r\n \r\n `,\r\n standalone: true,\r\n imports: [NgIf]\r\n})\r\nexport class GalleryIframeComponent {\r\n\r\n iframeSrc: SafeResourceUrl;\r\n videoSrc: string;\r\n\r\n @Input('src') set src(src: string) {\r\n this.videoSrc = src;\r\n this.iframeSrc = this._sanitizer.bypassSecurityTrustResourceUrl(src);\r\n }\r\n\r\n @Input('pause') set pauseVideo(shouldPause: boolean) {\r\n if (this.iframe?.nativeElement) {\r\n if (shouldPause) {\r\n const iframe: HTMLIFrameElement = this.iframe.nativeElement;\r\n iframe.src = null;\r\n\r\n if (!this.autoplay && this.videoSrc) {\r\n this.iframeSrc = this._sanitizer.bypassSecurityTrustResourceUrl(this.videoSrc);\r\n }\r\n }\r\n }\r\n }\r\n\r\n @Input() autoplay: boolean;\r\n\r\n @Input() loadingAttr: 'eager' | 'lazy';\r\n\r\n @ViewChild('iframe') iframe: ElementRef;\r\n\r\n constructor(private _sanitizer: DomSanitizer) {\r\n }\r\n}\r\n","import { Component, Input, Output, EventEmitter, OnInit, ViewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core';\r\nimport { NgFor, NgIf } from '@angular/common';\r\n\r\n@Component({\r\n selector: 'gallery-video',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n template: `\r\n \r\n `,\r\n standalone: true,\r\n imports: [NgFor, NgIf]\r\n})\r\nexport class GalleryVideoComponent implements OnInit {\r\n\r\n videoSources: { url: string, type?: string }[];\r\n\r\n @Input() src: string | { url: string, type?: string }[];\r\n @Input() poster: string;\r\n @Input() mute: boolean;\r\n @Input() loop: boolean;\r\n @Input() controls: boolean;\r\n @Input() controlsList: 'nodownload' | 'nofullscreen' | 'noremoteplayback';\r\n @Input() disableRemotePlayback: boolean;\r\n @Input() disablePictureInPicture: boolean;\r\n\r\n @Input('pause') set pauseVideo(shouldPause: boolean) {\r\n if (this.video.nativeElement) {\r\n const video: HTMLVideoElement = this.video.nativeElement;\r\n if (shouldPause && !video.paused) {\r\n video.pause();\r\n }\r\n }\r\n }\r\n\r\n @Input('play') set playVideo(shouldPlay: boolean) {\r\n if (this.video.nativeElement) {\r\n const video: HTMLVideoElement = this.video.nativeElement;\r\n if (shouldPlay) {\r\n video.play();\r\n }\r\n }\r\n }\r\n\r\n /** Stream that emits when an error occurs */\r\n @Output() error = new EventEmitter();\r\n\r\n @ViewChild('video', { static: true }) video: ElementRef;\r\n\r\n ngOnInit() {\r\n if (this.src instanceof Array) {\r\n // If video has multiple sources\r\n this.videoSources = [...this.src];\r\n } else {\r\n this.videoSources = [{ url: this.src }];\r\n }\r\n }\r\n}\r\n","export const imageFailedSvg = `\r\n\r\n`;\r\n\r\n","import { Injectable } from '@angular/core';\r\nimport { Observable, BehaviorSubject, filter, map, switchMap, EMPTY } from 'rxjs';\r\nimport { GalleryState } from '../models/gallery.model';\r\nimport { ItemState } from '../components/templates/items.model';\r\n\r\ninterface ImageRegistry {\r\n state: Observable;\r\n target: HTMLImageElement;\r\n}\r\n\r\n@Injectable()\r\nexport class ImgManager {\r\n\r\n private readonly trigger$: BehaviorSubject = new BehaviorSubject(null);\r\n\r\n private readonly images: Map = new Map();\r\n\r\n getActiveItem(state$: Observable): Observable {\r\n return this.trigger$.pipe(\r\n switchMap(() => state$.pipe(\r\n switchMap((state: GalleryState) => {\r\n const img: ImageRegistry = this.images.get(state.currIndex);\r\n if (img) {\r\n return img.state.pipe(\r\n filter((state: ItemState) => state !== 'loading'),\r\n map(() => img.target)\r\n )\r\n }\r\n return EMPTY;\r\n })\r\n ))\r\n );\r\n }\r\n\r\n addItem(index: number, payload: ImageRegistry): void {\r\n this.images.set(index, payload);\r\n this.trigger$.next();\r\n }\r\n\r\n deleteItem(index: number): void {\r\n if (this.images.has(index)) {\r\n this.images.delete(index);\r\n this.trigger$.next();\r\n }\r\n }\r\n}\r\n","import { Directive, Input, HostListener, OnInit, OnDestroy, ElementRef } from '@angular/core';\r\nimport { ImgManager } from './img-manager';\r\nimport { GalleryItemComponent } from '../components/gallery-item.component';\r\n\r\n@Directive({\r\n selector: 'img[galleryImage]',\r\n standalone: true\r\n})\r\nexport class ImgRecognizer implements OnInit, OnDestroy {\r\n\r\n @Input('galleryImage') index: number;\r\n\r\n @HostListener('load', ['$event'])\r\n onLoad() {\r\n this.item.state$.next('success');\r\n }\r\n\r\n @HostListener('error', ['$event'])\r\n onError() {\r\n this.item.state$.next('failed');\r\n }\r\n\r\n constructor(private el: ElementRef, private manager: ImgManager, private item: GalleryItemComponent) {\r\n if (item) {\r\n // Mark the gallery-item component as an image item\r\n item.isItemContainImage = true;\r\n } else {\r\n throw new Error('[NgGallery]: galleryImage directive should be only used inside gallery item templates!')\r\n }\r\n }\r\n\r\n ngOnInit(): void {\r\n this.manager.addItem(this.index, {\r\n state: this.item.state$.asObservable(),\r\n target: this.el.nativeElement\r\n });\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.manager.deleteItem(this.index);\r\n }\r\n}\r\n","import {\r\n Component,\r\n Input,\r\n Output,\r\n HostBinding,\r\n EventEmitter,\r\n OnInit,\r\n ChangeDetectionStrategy\r\n} from '@angular/core';\r\nimport { NgSwitch, NgSwitchCase, NgIf } from '@angular/common';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\nimport { animate, style, transition, trigger } from '@angular/animations';\r\nimport { imageFailedSvg } from './svg-assets';\r\nimport { ImgRecognizer } from '../../utils/img-recognizer';\r\nimport { ItemState } from './items.model';\r\n\r\n@Component({\r\n selector: 'gallery-image',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n styleUrls: ['./gallery-image.scss'],\r\n animations: [\r\n trigger('fadeIn', [\r\n transition('* => success', [\r\n style({ opacity: 0 }),\r\n animate('300ms ease-in', style({ opacity: 1 }))\r\n ])\r\n ])\r\n ],\r\n template: `\r\n \r\n\r\n \r\n ![]()
\r\n \r\n \r\n ![]()
\r\n \r\n\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n Unable to load the image!
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n `,\r\n standalone: true,\r\n imports: [NgSwitch, NgSwitchCase, NgIf, ImgRecognizer]\r\n})\r\n\r\nexport class GalleryImageComponent implements OnInit {\r\n\r\n state: ItemState = 'loading';\r\n\r\n /** Is thumbnail */\r\n @Input() isThumbnail: boolean;\r\n\r\n @Input() index: number;\r\n\r\n /** Image loading attribute */\r\n @Input() loadingAttr: 'eager' | 'lazy';\r\n\r\n /** Image alt */\r\n @Input() alt: string;\r\n\r\n /** Image source URL */\r\n @Input() src: string;\r\n\r\n /** Custom loader template */\r\n @Input() loadingIcon: string;\r\n /** Custom loader safe template */\r\n loaderTemplate: SafeHtml;\r\n\r\n /** Custom error template */\r\n @Input() loadingError: string;\r\n /** Custom error safe template */\r\n errorTemplate: SafeHtml;\r\n\r\n @Input() errorIcon: string = imageFailedSvg;\r\n errorSvg: SafeHtml;\r\n\r\n /** Stream that emits when an error occurs */\r\n @Output() error: EventEmitter = new EventEmitter();\r\n\r\n @HostBinding('attr.imageState') get imageState(): string {\r\n return this.state;\r\n }\r\n\r\n constructor(private _sanitizer: DomSanitizer) {\r\n }\r\n\r\n ngOnInit() {\r\n if (this.loadingIcon) {\r\n this.loaderTemplate = this._sanitizer.bypassSecurityTrustHtml(this.loadingIcon);\r\n }\r\n if (this.loadingError) {\r\n this.errorTemplate = this._sanitizer.bypassSecurityTrustHtml(this.loadingError);\r\n }\r\n if (this.errorIcon) {\r\n this.errorSvg = this._sanitizer.bypassSecurityTrustHtml(this.errorIcon);\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n HostBinding,\r\n Input,\r\n Output,\r\n EventEmitter,\r\n ElementRef,\r\n AfterViewInit,\r\n ChangeDetectionStrategy\r\n} from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { BehaviorSubject } from 'rxjs';\r\nimport { GalleryItemContext } from '../directives/gallery-item-def.directive';\r\nimport { GalleryIframeComponent } from './templates/gallery-iframe.component';\r\nimport { GalleryVideoComponent } from './templates/gallery-video.component';\r\nimport { GalleryImageComponent } from './templates/gallery-image.component';\r\nimport { GalleryConfig } from '../models/config.model';\r\nimport { GalleryItemType, GalleryItemTypes, LoadingStrategy } from '../models/constants';\r\nimport { GalleryItemData, ImageItemData, ItemState, VideoItemData, VimeoItemData, YoutubeItemData } from './templates/items.model';\r\n\r\n@Component({\r\n selector: 'gallery-item',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n styleUrls: ['./gallery-item.scss'],\r\n template: `\r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n `,\r\n standalone: true,\r\n imports: [CommonModule, GalleryImageComponent, GalleryVideoComponent, GalleryIframeComponent]\r\n})\r\nexport class GalleryItemComponent implements AfterViewInit {\r\n\r\n readonly Types = GalleryItemTypes;\r\n\r\n /** A stream that indicates that the height was emitted after the image is loaded, used only for gallery image types */\r\n readonly state$: BehaviorSubject = new BehaviorSubject('loading');\r\n\r\n /** A flag that indicates if the item is type of image, it can be a custom template by the user,\r\n * The img recognizer directive will set it to true*/\r\n isItemContainImage: boolean;\r\n\r\n /** Gallery config */\r\n @Input() config: GalleryConfig;\r\n\r\n /** Item's index in the gallery */\r\n @Input() index: number;\r\n\r\n /** The number of total items */\r\n @Input() count: number;\r\n\r\n /** Gallery current index */\r\n @Input() currIndex: number;\r\n\r\n /** Item's type 'image', 'video', 'youtube', 'Vimeo', 'iframe' */\r\n @Input() type: GalleryItemType;\r\n\r\n /** Item's data, this object contains the data required to display the content (e.g. src path) */\r\n @Input() data: GalleryItemData;\r\n\r\n /** Stream that emits when an error occurs */\r\n @Output() error: EventEmitter = new EventEmitter();\r\n\r\n @HostBinding('class.g-active-item') get isActive(): boolean {\r\n return this.index === this.currIndex;\r\n }\r\n\r\n @HostBinding('attr.galleryIndex') get isIndexAttr(): number {\r\n return this.index;\r\n }\r\n\r\n @HostBinding('attr.itemState') get itemState(): ItemState {\r\n return this.state$.value;\r\n }\r\n\r\n get imageContext(): GalleryItemContext {\r\n return {\r\n $implicit: this.imageData,\r\n index: this.index,\r\n type: this.type,\r\n active: this.isActive,\r\n count: this.count,\r\n first: this.index === 0,\r\n last: this.index === this.count - 1\r\n };\r\n }\r\n\r\n get itemContext(): GalleryItemContext {\r\n return {\r\n $implicit: this.data,\r\n index: this.index,\r\n type: this.type,\r\n active: this.isActive,\r\n count: this.count,\r\n first: this.index === 0,\r\n last: this.index === this.count - 1\r\n };\r\n }\r\n\r\n get nativeElement(): HTMLElement {\r\n return this.el.nativeElement;\r\n }\r\n\r\n get isAutoPlay(): boolean {\r\n if (this.isActive) {\r\n if (this.type === GalleryItemTypes.Video || this.type === GalleryItemTypes.Youtube || this.type === GalleryItemTypes.Vimeo) {\r\n return this.videoData.autoplay;\r\n }\r\n }\r\n }\r\n\r\n get youtubeSrc(): string {\r\n let autoplay: 1 | 0 = 0;\r\n if (this.isActive && this.type === GalleryItemTypes.Youtube && (this.data as YoutubeItemData).autoplay) {\r\n autoplay = 1;\r\n }\r\n const url: URL = new URL(this.data.src as string);\r\n url.search = new URLSearchParams({\r\n wmode: 'transparent',\r\n ...(this.data as YoutubeItemData).params,\r\n autoplay\r\n }).toString();\r\n return url.href;\r\n }\r\n\r\n get vimeoSrc(): string {\r\n let autoplay: 1 | 0 = 0;\r\n if (this.isActive && this.type === GalleryItemTypes.Vimeo) {\r\n if ((this.data as VimeoItemData).autoplay) {\r\n autoplay = 1;\r\n }\r\n }\r\n const url:URL = new URL(this.data.src as string);\r\n url.search = new URLSearchParams({\r\n ...(this.data as VimeoItemData).params,\r\n autoplay,\r\n }).toString();\r\n return url.href;\r\n }\r\n\r\n get load(): boolean {\r\n switch (this.config.loadingStrategy) {\r\n case LoadingStrategy.Preload:\r\n return true;\r\n case LoadingStrategy.Lazy:\r\n return this.currIndex === this.index;\r\n default:\r\n return this.currIndex === this.index || this.currIndex === this.index - 1 || this.currIndex === this.index + 1;\r\n }\r\n }\r\n\r\n get imageData(): ImageItemData {\r\n return this.data;\r\n }\r\n\r\n get videoData(): VideoItemData {\r\n return this.data;\r\n }\r\n\r\n constructor(private el: ElementRef) {\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n // If item does not contain an image, then set the state to DONE\r\n if (!this.isItemContainImage) {\r\n this.state$.next('success');\r\n }\r\n }\r\n}\r\n\r\n","import { Directive, Input, Output, OnChanges, OnDestroy, NgZone, EventEmitter } from '@angular/core';\r\nimport { Subscription, combineLatest, filter, switchMap } from 'rxjs';\r\nimport { GalleryConfig } from '../models/config.model';\r\nimport { ActiveItemObserver } from './active-item-observer';\r\nimport { resizeObservable } from '../utils/resize-observer';\r\nimport { SliderAdapter } from '../components/adapters';\r\nimport { GalleryItemComponent } from '../components/gallery-item.component';\r\nimport { ItemState } from '../components/templates/items.model';\r\n\r\n@Directive({\r\n selector: '[itemIntersectionObserver]',\r\n standalone: true\r\n})\r\nexport class ItemIntersectionObserver implements OnChanges, OnDestroy {\r\n\r\n private _currentSubscription: Subscription;\r\n\r\n private _sensor: ActiveItemObserver = new ActiveItemObserver();\r\n\r\n private get _viewport(): HTMLElement {\r\n return this._item.nativeElement.parentElement.parentElement;\r\n }\r\n\r\n @Input() adapter: SliderAdapter;\r\n\r\n @Input() config: GalleryConfig;\r\n\r\n @Input('itemIntersectionObserverDisabled') disabled: boolean;\r\n\r\n @Output() activeIndexChange: EventEmitter = new EventEmitter();\r\n\r\n constructor(private _zone: NgZone, private _item: GalleryItemComponent) {\r\n }\r\n\r\n ngOnChanges(): void {\r\n (this.config.itemAutosize && !this.disabled) ? this._subscribe() : this._unsubscribe();\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this._unsubscribe();\r\n }\r\n\r\n private _subscribe(): void {\r\n this._unsubscribe();\r\n\r\n if (!!this.adapter) {\r\n this._zone.runOutsideAngular(() => {\r\n this._currentSubscription = combineLatest([\r\n resizeObservable(this._viewport),\r\n resizeObservable(this._item.nativeElement)\r\n ]).pipe(\r\n switchMap(() => this._item.state$),\r\n filter((state: ItemState) => state !== 'loading'),\r\n switchMap(() => {\r\n const rootMargin: string = this.adapter.getElementRootMargin(this._viewport, this._item.nativeElement);\r\n if (this.config.debug) {\r\n this._item.nativeElement.style.setProperty('--item-intersection-margin', `\"VIEWPORT(${ this._viewport.clientWidth }x${ this._viewport.clientHeight }) ITEM(${ this._item.nativeElement.clientWidth }x${ this._item.nativeElement.clientHeight }) INTERSECTION(${ rootMargin })\"`);\r\n }\r\n\r\n return this._sensor.observe(\r\n this._viewport,\r\n [this._item.nativeElement],\r\n rootMargin\r\n );\r\n }\r\n )\r\n ).subscribe((index: number) => {\r\n this._zone.run(() => this.activeIndexChange.emit(index));\r\n });\r\n });\r\n }\r\n }\r\n\r\n private _unsubscribe(): void {\r\n this._currentSubscription?.unsubscribe();\r\n }\r\n}\r\n","import {\r\n Directive,\r\n Input,\r\n Output,\r\n NgZone,\r\n ElementRef,\r\n AfterViewChecked,\r\n OnInit,\r\n OnChanges,\r\n OnDestroy,\r\n EventEmitter\r\n} from '@angular/core';\r\nimport {\r\n Observable,\r\n Subscription,\r\n of,\r\n tap,\r\n take,\r\n filter,\r\n fromEvent,\r\n switchMap,\r\n debounceTime,\r\n firstValueFrom,\r\n distinctUntilChanged,\r\n EMPTY,\r\n animationFrameScheduler\r\n} from 'rxjs';\r\nimport { ImgManager } from '../utils/img-manager';\r\nimport { resizeObservable } from '../utils/resize-observer';\r\nimport { SliderAdapter } from '../components/adapters';\r\nimport { Gallery } from '../services/gallery.service';\r\nimport { GalleryRef } from '../services/gallery-ref';\r\nimport { GalleryConfig } from '../models/config.model';\r\nimport { GalleryState } from '../models/gallery.model';\r\n\r\n@Directive({\r\n selector: '[sliderResizeObserver]',\r\n standalone: true\r\n})\r\nexport class SliderResizeObserver implements AfterViewChecked, OnChanges, OnInit, OnDestroy {\r\n\r\n private _resizeObserver: ResizeObserver;\r\n\r\n private _autoHeightSubscription: Subscription;\r\n\r\n private _resizeSubscription: Subscription;\r\n\r\n private _shouldSkip: boolean;\r\n\r\n // Stream that emits after the transition to the new height is completed\r\n private _afterHeightChanged$: Observable;\r\n\r\n private get _viewport(): HTMLElement {\r\n return this._el.nativeElement;\r\n }\r\n\r\n private get _galleryCore(): HTMLElement {\r\n return this._el.nativeElement.parentElement.parentElement.parentElement;\r\n }\r\n\r\n private get _isAutoHeight(): boolean {\r\n return this.config.autoHeight &&\r\n !this.config.itemAutosize &&\r\n this.config.orientation === 'horizontal' &&\r\n (this.config.thumbPosition === 'top' || this.config.thumbPosition === 'bottom');\r\n }\r\n\r\n @Input() galleryId: string;\r\n\r\n @Input() adapter: SliderAdapter;\r\n\r\n @Input() config: GalleryConfig;\r\n\r\n @Output() isResizingChange: EventEmitter = new EventEmitter();\r\n\r\n constructor(private _el: ElementRef,\r\n private _zone: NgZone,\r\n private _gallery: Gallery,\r\n private _imgManager: ImgManager) {\r\n }\r\n\r\n ngOnInit(): void {\r\n const galleryRef: GalleryRef = this._gallery.ref(this.galleryId);\r\n\r\n // Check if height has transition for the auto-height feature\r\n const transitionDuration: string = getComputedStyle(this._viewport).getPropertyValue('transition-duration');\r\n if (parseFloat(transitionDuration) === 0) {\r\n this._afterHeightChanged$ = of(null);\r\n } else {\r\n this._afterHeightChanged$ = fromEvent(this._viewport, 'transitionend');\r\n }\r\n\r\n this._zone.runOutsideAngular(() => {\r\n\r\n // Detect if the size of the slider has changed detecting current index on scroll\r\n this._resizeSubscription = resizeObservable(this._viewport, (observer: ResizeObserver) => this._resizeObserver = observer).pipe(\r\n // Check if resize should skip due to re-observing the slider\r\n filter(() => !this._shouldSkip || !(this._shouldSkip = false)),\r\n // Immediately set visibility to hidden to avoid changing the active item caused by appearance of other items when size is expanded\r\n tap(() => this.setResizingState()),\r\n debounceTime(this.config.resizeDebounceTime, animationFrameScheduler),\r\n tap(async (entry: ResizeObserverEntry) => {\r\n // Update CSS variables with the proper values\r\n this.updateSliderSize();\r\n\r\n if (this._isAutoHeight) {\r\n const img: HTMLImageElement = await firstValueFrom(this._imgManager.getActiveItem(galleryRef.state));\r\n // If img height is identical to the viewport height then skip\r\n if (img.height === this._viewport.clientHeight) {\r\n this.resetResizingState();\r\n } else {\r\n // Unobserve the slider while the height is being changed\r\n this.setResizingState({ unobserve: true });\r\n // Change the height\r\n this._galleryCore.style.setProperty('--slider-height', `${ img.height }px`);\r\n // Wait until height transition ends\r\n await firstValueFrom(this._afterHeightChanged$);\r\n this.resetResizingState({\r\n // Mark to skip first emit after re-observing the slider if height content rect height and client height are identical\r\n shouldSkip: entry.contentRect.height === this._viewport.clientHeight,\r\n observe: true\r\n });\r\n }\r\n } else {\r\n requestAnimationFrame(() => this.resetResizingState({ shouldSkip: true }));\r\n }\r\n })\r\n ).subscribe();\r\n });\r\n }\r\n\r\n ngOnChanges(): void {\r\n this._isAutoHeight ? this._subscribeAutoHeight() : this._unsubscribeAutoHeight();\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this._resizeSubscription?.unsubscribe();\r\n this._unsubscribeAutoHeight();\r\n }\r\n\r\n ngAfterViewChecked(): void {\r\n this.updateSliderSize();\r\n }\r\n\r\n private updateSliderSize(): void {\r\n // Update slider width and height CSS variables\r\n this._galleryCore.style.setProperty('--slider-width', `${ this._viewport.clientWidth }px`);\r\n\r\n // Only update height if auto-height is false, because when it's true, another function will take care of it\r\n if (!this.config.autoHeight) {\r\n this._galleryCore.style.setProperty('--slider-height', `${ this._viewport.clientHeight }px`);\r\n }\r\n\r\n this.updateCentralizeCSSVariables();\r\n }\r\n\r\n private updateCentralizeCSSVariables(): void {\r\n if (this.config.itemAutosize) {\r\n this._galleryCore.style.setProperty('--slider-centralize-start-size', `${ this.adapter.getCentralizerStartSize() }px`);\r\n this._galleryCore.style.setProperty('--slider-centralize-end-size', `${ this.adapter.getCentralizerEndSize() }px`);\r\n }\r\n }\r\n\r\n private _subscribeAutoHeight(): void {\r\n this._unsubscribeAutoHeight();\r\n\r\n this._shouldSkip = false;\r\n this._zone.runOutsideAngular(() => {\r\n\r\n const galleryRef: GalleryRef = this._gallery.ref(this.galleryId);\r\n\r\n // TODO: Why is galleryRef.state emits when screen size changes?\r\n const state: Observable = galleryRef.state.pipe(distinctUntilChanged((a: GalleryState, b: GalleryState) => a.currIndex === b.currIndex))\r\n this._autoHeightSubscription = this._imgManager.getActiveItem(state).pipe(\r\n switchMap((img: HTMLImageElement) => {\r\n this.setResizingState({ unobserve: true });\r\n this._galleryCore.style.setProperty('--slider-height', `${ img.clientHeight }px`);\r\n\r\n // Check if the new item height is equal to the current height, there will be no transition,\r\n // So reset resizing state\r\n if (img.height === this._viewport.clientHeight) {\r\n this.resetResizingState({ shouldSkip: true, observe: true });\r\n return EMPTY;\r\n }\r\n return this._afterHeightChanged$.pipe(\r\n tap(() => this.resetResizingState({ shouldSkip: true, observe: true })),\r\n take(1)\r\n );\r\n })\r\n ).subscribe();\r\n });\r\n }\r\n\r\n private _unsubscribeAutoHeight(): void {\r\n this._autoHeightSubscription?.unsubscribe();\r\n }\r\n\r\n private setResizingState({ unobserve }: { unobserve?: boolean } = {}): void {\r\n this._zone.run(() => {\r\n this.isResizingChange.emit(true);\r\n })\r\n this._viewport.classList.add('g-resizing');\r\n if (unobserve) {\r\n // Unobserve the slider while the height is being changed\r\n this._resizeObserver.unobserve(this._viewport);\r\n }\r\n }\r\n\r\n private resetResizingState({ shouldSkip, observe }: { shouldSkip?: boolean, observe?: boolean } = {}): void {\r\n this._zone.run(() => {\r\n this.isResizingChange.emit(false);\r\n })\r\n this._viewport.classList.remove('g-resizing');\r\n this._shouldSkip = shouldSkip;\r\n if (observe) {\r\n this._resizeObserver.observe(this._viewport);\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Input,\r\n Output,\r\n ViewChild,\r\n ViewChildren,\r\n EventEmitter,\r\n AfterViewInit,\r\n OnChanges,\r\n SimpleChanges,\r\n ElementRef,\r\n QueryList,\r\n ChangeDetectionStrategy\r\n} from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { Observable, Subject, map, startWith } from 'rxjs';\r\nimport { Gallery } from '../services/gallery.service';\r\nimport { GalleryState, GalleryError } from '../models/gallery.model';\r\nimport { GalleryConfig } from '../models/config.model';\r\nimport { Orientation } from '../models/constants';\r\nimport { SliderAdapter, HorizontalAdapter, VerticalAdapter } from './adapters';\r\nimport { SmoothScroll, SmoothScrollOptions } from '../smooth-scroll';\r\nimport { HammerSliding } from '../gestures/hammer-sliding.directive';\r\nimport { SliderIntersectionObserver } from '../observers/slider-intersection-observer.directive';\r\nimport { ItemIntersectionObserver } from '../observers/item-intersection-observer.directive';\r\nimport { GalleryItemComponent } from './gallery-item.component';\r\nimport { SliderResizeObserver } from '../observers/slider-resize-observer.directive';\r\n\r\n@Component({\r\n selector: 'gallery-slider',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n styleUrls: ['./gallery-slider.scss'],\r\n template: `\r\n \r\n
\r\n \r\n
\r\n\r\n
\r\n
RESIZING
\r\n
SCROLLING
\r\n
SLIDING
\r\n
\r\n
\r\n \r\n
\r\n `,\r\n standalone: true,\r\n imports: [CommonModule, GalleryImageComponent]\r\n})\r\nexport class GalleryThumbComponent {\r\n\r\n @Input() config: GalleryConfig;\r\n\r\n /** Item's index in the gallery */\r\n @Input() index: number;\r\n\r\n /** The number of total items */\r\n @Input() count: number;\r\n\r\n /** Gallery current index */\r\n @Input() currIndex: number;\r\n\r\n /** Item's type 'image', 'video', 'youtube', 'Vimeo', 'iframe' */\r\n @Input() type: GalleryItemType;\r\n\r\n /** Item's data, this object contains the data required to display the content (e.g. src path) */\r\n @Input() data: ImageItemData;\r\n\r\n @Output() error: EventEmitter = new EventEmitter();\r\n\r\n @HostBinding('class.g-active-thumb') get isActive() {\r\n return this.index === this.currIndex;\r\n }\r\n\r\n @HostBinding('attr.galleryIndex') get isIndexAttr(): number {\r\n return this.index;\r\n }\r\n\r\n get imageContext(): GalleryItemContext {\r\n return {\r\n $implicit: this.data,\r\n index: this.index,\r\n type: this.type,\r\n active: this.isActive,\r\n count: this.count,\r\n first: this.index === 0,\r\n last: this.index === this.count - 1\r\n }\r\n }\r\n\r\n get nativeElement(): HTMLElement {\r\n return this.el.nativeElement;\r\n }\r\n\r\n constructor(private el: ElementRef) {\r\n }\r\n}\r\n","import {\r\n Directive,\r\n Input,\r\n Output,\r\n OnInit,\r\n OnChanges,\r\n OnDestroy,\r\n NgZone,\r\n ElementRef,\r\n SimpleChanges,\r\n EventEmitter\r\n} from '@angular/core';\r\nimport { Subscription, tap, auditTime, animationFrameScheduler, debounceTime } from 'rxjs';\r\nimport { resizeObservable } from '../utils/resize-observer';\r\nimport { GalleryConfig } from '../models/config.model';\r\nimport { SliderAdapter } from '../components/adapters';\r\n\r\n@Directive({\r\n selector: '[thumbResizeObserver]',\r\n standalone: true\r\n})\r\nexport class ThumbResizeObserver implements OnChanges, OnInit, OnDestroy {\r\n\r\n private _resizeSubscription: Subscription;\r\n\r\n private get _viewport(): HTMLElement {\r\n return this._el.nativeElement;\r\n }\r\n\r\n @Input() config: GalleryConfig;\r\n\r\n @Input() adapter: SliderAdapter;\r\n\r\n @Output('thumbResizeObserver') resized: EventEmitter = new EventEmitter();\r\n\r\n constructor(private _el: ElementRef, private _zone: NgZone) {\r\n }\r\n\r\n ngOnInit(): void {\r\n this._zone.runOutsideAngular(() => {\r\n this._resizeSubscription = resizeObservable(this._viewport).pipe(\r\n debounceTime(this.config.resizeDebounceTime, animationFrameScheduler),\r\n tap(() => {\r\n this.updateSliderSize();\r\n this.resized.emit();\r\n })\r\n ).subscribe();\r\n });\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (!changes.config.firstChange) {\r\n this.updateSliderSize();\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this._resizeSubscription?.unsubscribe();\r\n }\r\n\r\n private updateSliderSize(): void {\r\n this._viewport.style.setProperty('--thumb-centralize-start-size', this.adapter.getCentralizerStartSize() + 'px');\r\n this._viewport.style.setProperty('--thumb-centralize-end-size', this.adapter.getCentralizerEndSize() + 'px');\r\n }\r\n}\r\n","import {\r\n Component,\r\n Input,\r\n Output,\r\n ViewChild,\r\n ViewChildren,\r\n EventEmitter,\r\n AfterViewInit,\r\n OnChanges,\r\n QueryList,\r\n SimpleChanges,\r\n ElementRef,\r\n ChangeDetectionStrategy\r\n} from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { Observable, Subject, map, startWith } from 'rxjs';\r\nimport { GalleryConfig } from '../models/config.model';\r\nimport { GalleryState, GalleryError } from '../models/gallery.model';\r\nimport { ThumbnailsPosition } from '../models/constants';\r\nimport { VerticalAdapter, HorizontalAdapter, SliderAdapter } from './adapters';\r\nimport { SmoothScroll, SmoothScrollOptions } from '../smooth-scroll';\r\nimport { GalleryThumbComponent } from './gallery-thumb.component';\r\nimport { HammerSliding } from '../gestures/hammer-sliding.directive';\r\nimport { ThumbResizeObserver } from '../observers/thumb-resize-observer.directive';\r\n\r\n@Component({\r\n selector: 'gallery-thumbs',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n styleUrls: ['./gallery-thumbs.scss'],\r\n template: `\r\n \r\n `,\r\n standalone: true,\r\n imports: [CommonModule, GalleryThumbComponent, SmoothScroll, HammerSliding, ThumbResizeObserver]\r\n})\r\nexport class GalleryThumbsComponent implements AfterViewInit, OnChanges {\r\n\r\n /** Stream that emits the slider position */\r\n readonly position$: Subject = new Subject();\r\n\r\n /** Slider adapter */\r\n adapter: SliderAdapter;\r\n\r\n /** Stream that emits the thumb components once they're initialized */\r\n items$: Observable;\r\n\r\n /** Gallery ID */\r\n @Input() galleryId: string;\r\n\r\n /** Gallery state */\r\n @Input() state: GalleryState;\r\n\r\n /** Gallery config */\r\n @Input() config: GalleryConfig;\r\n\r\n /** Stream that emits when thumb is clicked */\r\n @Output() thumbClick: EventEmitter = new EventEmitter();\r\n\r\n /** Stream that emits when an error occurs */\r\n @Output() error: EventEmitter = new EventEmitter();\r\n\r\n /** Slider ElementRef */\r\n @ViewChild('slider', { static: true }) sliderEl: ElementRef;\r\n\r\n @ViewChildren(GalleryThumbComponent) items: QueryList = new QueryList();\r\n\r\n get slider(): HTMLElement {\r\n return this.sliderEl.nativeElement;\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes.config) {\r\n // Sets sliding direction\r\n if (changes.config.currentValue?.thumbPosition !== changes.config.previousValue?.thumbPosition) {\r\n switch (this.config.thumbPosition) {\r\n case ThumbnailsPosition.Right:\r\n case ThumbnailsPosition.Left:\r\n this.adapter = new VerticalAdapter(this.slider, this.config);\r\n break;\r\n case ThumbnailsPosition.Top:\r\n case ThumbnailsPosition.Bottom:\r\n this.adapter = new HorizontalAdapter(this.slider, this.config);\r\n break;\r\n }\r\n\r\n if (!changes.config.firstChange) {\r\n // Keep the correct sliding position when direction changes\r\n requestAnimationFrame(() => {\r\n this.scrollToIndex(this.state.currIndex, 'auto');\r\n });\r\n }\r\n }\r\n }\r\n\r\n if (changes.state && (changes.state.firstChange || !this.config.detachThumbs)) {\r\n if (changes.state.currentValue?.currIndex !== changes.state.previousValue?.currIndex) {\r\n // Scroll slide to item when current index changes.\r\n requestAnimationFrame(() => {\r\n this.scrollToIndex(this.state.currIndex, changes.state?.firstChange ? 'auto' : 'smooth');\r\n });\r\n }\r\n }\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n this.items.notifyOnChanges();\r\n this.items$ = this.items.changes.pipe(\r\n // In some cases, items is not notified at first, need to force start the stream\r\n startWith(null),\r\n map(() => this.items.toArray())\r\n );\r\n }\r\n\r\n trackByFn(index: number, item: any) {\r\n return item.type;\r\n }\r\n\r\n onActiveIndexChange(index: number): void {\r\n if (index === -1) {\r\n // Reset active index position\r\n this.scrollToIndex(this.state.currIndex, 'smooth');\r\n } else {\r\n this.scrollToIndex(index, 'smooth');\r\n }\r\n }\r\n\r\n scrollToIndex(value: number, behavior: ScrollBehavior): void {\r\n const el: HTMLElement = this.items.get(value)?.nativeElement;\r\n if (el) {\r\n const pos: SmoothScrollOptions = this.adapter.getScrollToValue(el, behavior);\r\n this.position$.next(pos);\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Input,\r\n Output,\r\n HostBinding,\r\n EventEmitter,\r\n OnChanges,\r\n SimpleChanges,\r\n ElementRef,\r\n ChangeDetectionStrategy\r\n} from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { coerceCssPixelValue } from '@angular/cdk/coercion';\r\nimport { Direction, Directionality } from '@angular/cdk/bidi';\r\nimport { GalleryCounterComponent } from './gallery-counter.component';\r\nimport { GalleryBulletsComponent } from './gallery-bullets.component';\r\nimport { GalleryNavComponent } from './gallery-nav.component';\r\nimport { GallerySliderComponent } from './gallery-slider.component';\r\nimport { GalleryThumbsComponent } from './gallery-thumbs.component';\r\nimport { GalleryError, GalleryState } from '../models/gallery.model';\r\nimport { GalleryConfig } from '../models/config.model';\r\n\r\n@Component({\r\n selector: 'gallery-core',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n styleUrls: ['./gallery-core.scss', '../styles/debug.scss'],\r\n template: `\r\n \r\n\r\n \r\n
\r\n\r\n 1\"\r\n [state]=\"state\"\r\n [config]=\"config\"\r\n [galleryId]=\"galleryId\"/>\r\n\r\n \r\n\r\n
\r\n\r\n \r\n\r\n \r\n \r\n
\r\n