{"version":3,"file":"chunk-gzjpr8xh.js","sources":["packages/sports/libs/slideshow/feature/src/lib/slide.component.ts","packages/sports/libs/common/ui/progress-bar/src/progress-bar.component.html","packages/sports/libs/common/ui/progress-bar/src/progress-bar.component.ts","packages/sports/libs/common/ui/progress-bar/src/timer-progress-bar/timer-progress-bar.component.ts","packages/sports/libs/common/ui/progress-bar/src/timer-progress-bar/timer-progress-bar.html","packages/sports/libs/slideshow/feature/src/lib/slideshow.model.ts","packages/sports/libs/slideshow/feature/src/lib/indicators.component.html","packages/sports/libs/slideshow/feature/src/lib/indicators.component.ts","packages/sports/libs/slideshow/feature/src/lib/slide-behavior/base-slide-behavior.ts","packages/sports/libs/slideshow/feature/src/lib/slide-behavior/one-slide-behavior.ts","packages/sports/libs/slideshow/feature/src/lib/slide-behavior/three-slide-behavior.ts","packages/sports/libs/slideshow/feature/src/lib/slideshow.component.html","packages/sports/libs/slideshow/feature/src/lib/slideshow.component.ts"],"sourcesContent":["import { AnimationFactory, AnimationPlayer } from '@angular/animations';\nimport { Component, ElementRef, Input, Renderer2 } from '@angular/core';\n\n@Component({\n standalone: true,\n selector: 'ms-slide',\n template: '',\n})\nexport class SlideComponent {\n @Input() visibileState: string;\n\n private animationPlayer?: AnimationPlayer;\n\n constructor(\n private element: ElementRef,\n private renderer: Renderer2,\n ) {}\n\n animate(animation: AnimationFactory): void {\n if (this.animationPlayer) {\n this.animationPlayer.finish();\n // this.animationPlayer.destroy(); // ??? should both be used ?\n }\n\n this.animationPlayer = animation.create(this.element.nativeElement);\n\n this.animationPlayer.play();\n }\n\n moveOutside(): void {\n this.renderer.setStyle(this.element.nativeElement, 'transform', 'translateX(-100%)');\n }\n}\n","\n {{ informationText }}\n
\n\n","import { NgIf } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ElementRef,\n HostBinding,\n Input,\n OnChanges,\n Renderer2,\n ViewChild,\n inject,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport { ISimpleChanges } from '@frontend/sports/common/core/utils/simple-change';\nimport { Observable } from 'rxjs';\n\n@Component({\n selector: 'ms-progress-bar',\n templateUrl: 'progress-bar.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [NgIf],\n standalone: true,\n})\nexport class ProgressBarComponent implements OnChanges, AfterViewInit {\n private readonly destroyRef = inject(DestroyRef);\n\n @HostBinding('class.ms-progress-bar') cssClass = true;\n\n @Input() shouldShowInformation = false;\n @Input() shouldShowPercentage = true;\n @Input() smoothProgressTransition = false;\n @Input() animationDuration!: number;\n @Input() informationText: string | undefined;\n @Input() value!: Observable;\n\n @ViewChild('percentage', { static: false }) percentage!: ElementRef;\n @ViewChild('progress', { static: true }) progress!: ElementRef;\n\n constructor(private renderer: Renderer2) {}\n\n ngAfterViewInit(): void {\n this.value.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((v) => {\n if (this.shouldShowPercentage && this.percentage) {\n this.renderer.setProperty(this.percentage.nativeElement, 'innerHTML', `${v}%`);\n }\n\n this.renderer.setStyle(this.progress.nativeElement, 'width', `${v}%`);\n });\n }\n\n ngOnChanges(changes: ISimpleChanges): void {\n if ((changes.smoothProgressTransition || changes.animationDuration) && this.smoothProgressTransition) {\n this.setProgressBarTransition(this.animationDuration);\n }\n }\n\n private setProgressBarTransition(animationDuration: number): void {\n this.renderer.setStyle(this.progress.nativeElement, 'transition', `width ${animationDuration}ms linear`);\n }\n}\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n EventEmitter,\n HostBinding,\n Input,\n OnChanges,\n Output,\n inject,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport { ISimpleChanges } from '@frontend/sports/common/core/utils/simple-change';\nimport { TimerService } from '@frontend/sports/common/core/utils/timer';\nimport { BehaviorSubject } from 'rxjs';\nimport { filter } from 'rxjs/operators';\n\nimport { ProgressBarComponent } from '../progress-bar.component';\n\n@Component({\n selector: 'ms-timer-progress-bar',\n templateUrl: 'timer-progress-bar.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [ProgressBarComponent],\n})\nexport class TimerProgressBarComponent implements AfterViewInit, OnChanges {\n private readonly destroyRef = inject(DestroyRef);\n\n @HostBinding('class.ms-timer-progress-bar') cssClass = true;\n\n @Input() totalDuration!: number;\n @Input() pauseProgressBar = false;\n @Input() smoothProgressTransition = false;\n @Input() shouldShowInformation = false;\n @Input() shouldShowPercentage = true;\n @Input() informationText: string | undefined;\n @Input() step = 100;\n @Input() loop = true;\n @Input() shouldStop = false;\n @Output() complete = new EventEmitter();\n @Output() progress = new EventEmitter();\n\n private value = 0;\n animationDuration = 0;\n\n private progressBarInterval: (() => void) | null = null;\n value$ = new BehaviorSubject(0);\n\n constructor(private timerService: TimerService) {\n this.destroyRef.onDestroy(() => {\n this.timerService.removeAll();\n this.stopProgressBarInterval();\n });\n }\n\n ngOnChanges(changes: ISimpleChanges): void {\n if (changes.shouldStop) {\n this.value$.complete();\n }\n\n if (changes.step) {\n this.step = changes.step.currentValue || 100;\n }\n\n if (changes.totalDuration) {\n this.animationDuration = this.totalDuration / 100;\n }\n }\n\n ngAfterViewInit(): void {\n this.value$\n .pipe(\n filter(() => !this.pauseProgressBar),\n takeUntilDestroyed(this.destroyRef),\n )\n .subscribe((value) => {\n if (Math.ceil(value) >= 100) {\n this.complete.emit();\n this.stopProgressBarInterval();\n\n if (this.loop) {\n this.resetProgressBar();\n } else {\n this.value$.complete();\n }\n }\n });\n\n this.resetProgressBar();\n }\n\n resetProgressBar(): void {\n this.value = 0;\n this.stopProgressBarInterval();\n this.startProgressbar();\n }\n\n private startProgressbar(): void {\n this.progressBarInterval = this.timerService.setIntervalOutsideAngular(() => {\n if (!this.pauseProgressBar) {\n const slice = 100 / this.step;\n this.value += slice;\n this.value$.next(this.value);\n this.progress.emit(this.value);\n }\n }, this.totalDuration / this.step);\n }\n\n private stopProgressBarInterval = () => {\n this.progressBarInterval?.();\n this.progressBarInterval = null;\n };\n}\n","\n","export enum SlideshowMode {\n OneSlide = 'OneSlide',\n ThreeSlides = 'ThreeSlides',\n}\n\nexport enum ArrowDirection {\n Left = 'left',\n Right = 'right',\n}\n\nexport enum NavigationMode {\n Swipe = 'swipe',\n Arrows = 'arrows',\n}\n","\n","import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\n\nimport { range } from 'lodash-es';\n\nimport { ArrowDirection } from './slideshow.model';\n\n@Component({\n standalone: true,\n selector: 'ms-slideshow-indicators',\n templateUrl: './indicators.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class IndicatorsComponent implements OnInit, OnChanges {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Input() items: any[] = [];\n @Input() realtotalslidecount = 0;\n @Input() currentSlideIndex = 0;\n @Input() indicatorArrow = false;\n @Output() select = new EventEmitter();\n\n indicators: number[];\n\n arrowDirections = ArrowDirection;\n\n ngOnInit(): void {\n this.indicators = range(this.realtotalslidecount);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n const realtotalslidecountchanged = changes['realtotalslidecount'];\n if (realtotalslidecountchanged) {\n this.indicators = range(this.realtotalslidecount);\n }\n }\n\n isActive(crtIndex: number): boolean {\n if (this.realtotalslidecount < this.items.length) {\n return this.currentSlideIndex > this.realtotalslidecount - 1\n ? crtIndex === this.currentSlideIndex - this.realtotalslidecount\n : crtIndex === this.currentSlideIndex;\n }\n\n return crtIndex === this.currentSlideIndex;\n }\n\n indicatorClick(index: number): void {\n this.select.emit(index);\n }\n\n arrowClick(direction: ArrowDirection): void {\n this.select.emit(direction);\n }\n}\n","import { AnimationBuilder } from '@angular/animations';\n\nimport { BehaviorSubject } from 'rxjs';\n\nimport { SlideComponent } from '../slide.component';\n\nexport enum SlideDirection {\n Left = 'Left',\n Right = 'Right',\n}\n\nexport abstract class BaseSlideBehavior {\n protected maxSlideIndex: number;\n private _currentSlideIndex: number;\n protected animationDuration = 350;\n protected slideChanged = new BehaviorSubject(null);\n\n slideChanged$ = this.slideChanged.asObservable();\n\n constructor(\n protected slides: SlideComponent[],\n protected animationBuilder: AnimationBuilder,\n initialSlideIndex: number,\n ) {\n this.maxSlideIndex = slides.length - 1;\n this._currentSlideIndex = initialSlideIndex;\n }\n\n abstract slideRight(): void;\n abstract get canSlideRight(): boolean;\n abstract slideLeft(): void;\n abstract get canSlideLeft(): boolean;\n\n /**\n * Moves the slideshow to the desired slide index.\n *\n * @param {number} slideIndex\n * @param {SlideDirection} [forceSlideDirection] If not provided, the direction of the slide will be calculated based on the index.\n * @returns {void}\n * @memberof OneSlideBehavior\n */\n abstract slideTo(slideIndex: number, forceSlideDirection?: SlideDirection): void;\n\n protected nextSlideIndex(crtSlideIndex?: number, max?: number): number {\n return this.nextIndex(crtSlideIndex || this._currentSlideIndex, max || this.maxSlideIndex);\n }\n\n protected previousSlideIndex(crtSlideIndex?: number): number {\n return this.previousIndex(crtSlideIndex || this._currentSlideIndex, 0, this.maxSlideIndex);\n }\n\n protected limitNumber(val: number, min: number, max: number): number {\n return val < min ? min : val > max ? max : val;\n }\n\n protected emitSlideChanged(): void {\n this.slideChanged.next(this.slides[this._currentSlideIndex]);\n }\n\n private nextIndex(val: number, max: number): number {\n if (val === max) {\n return 0;\n }\n\n return val + 1;\n }\n\n private previousIndex(val: number, min: number, max: number): number {\n if (val === min) {\n return max;\n }\n\n return val - 1;\n }\n\n get currentSlideIndex(): number {\n return this._currentSlideIndex;\n }\n\n set currentSlideIndex(value: number) {\n this._currentSlideIndex = value;\n }\n}\n","import { AnimationBuilder, AnimationFactory, animate, keyframes, style } from '@angular/animations';\n\nimport { SlideComponent } from '../slide.component';\nimport { BaseSlideBehavior, SlideDirection } from './base-slide-behavior';\n\ninterface OneSlideAnimation {\n exitLeft: AnimationFactory;\n exitRight: AnimationFactory;\n enterRight: AnimationFactory;\n enterLeft: AnimationFactory;\n exitLeftInstant: AnimationFactory;\n enterLeftInstant: AnimationFactory;\n}\n\nexport class OneSlideBehavior extends BaseSlideBehavior {\n constructor(slides: SlideComponent[], animationBuilder: AnimationBuilder, initialSlideIndex: number) {\n super(slides, animationBuilder, initialSlideIndex);\n\n if (!slides.length) {\n return;\n }\n\n const animations = this.getAnimations();\n this.slides.forEach((s) => s.animate(animations.exitLeftInstant));\n this.slides[this.currentSlideIndex].animate(animations.enterLeftInstant);\n }\n\n slideRight(): void {\n this.slideTo(this.previousSlideIndex(), SlideDirection.Right);\n }\n\n slideLeft(): void {\n this.slideTo(this.nextSlideIndex(), SlideDirection.Left);\n }\n\n /** @inheritdoc */\n slideTo(slideIndex: number, forceSlideDirection?: SlideDirection): void {\n if (slideIndex === this.currentSlideIndex) {\n return;\n }\n\n // eslint-disable-next-line no-param-reassign\n slideIndex = this.limitNumber(slideIndex, 0, this.maxSlideIndex);\n const calculatedSlideDirection = slideIndex > this.currentSlideIndex ? SlideDirection.Left : SlideDirection.Right;\n const direction = forceSlideDirection || calculatedSlideDirection;\n\n if (direction === SlideDirection.Left) {\n this.slideLeftInternal(slideIndex);\n } else {\n this.slideRightInternal(slideIndex);\n }\n }\n\n get canSlideLeft(): boolean {\n return this.currentSlideIndex < this.maxSlideIndex;\n }\n\n get canSlideRight(): boolean {\n return this.currentSlideIndex > 0;\n }\n\n private slideRightInternal(previousSlideIndex: number): void {\n const animations = this.getAnimations();\n this.slides[this.currentSlideIndex].animate(animations.exitRight);\n this.currentSlideIndex = previousSlideIndex;\n this.slides[this.currentSlideIndex].animate(animations.enterLeft);\n\n this.emitSlideChanged();\n }\n\n private slideLeftInternal(nextSlideIndex: number): void {\n const animations = this.getAnimations();\n this.slides[this.currentSlideIndex].animate(animations.exitLeft);\n this.currentSlideIndex = nextSlideIndex;\n this.slides[this.currentSlideIndex].animate(animations.enterRight);\n\n this.emitSlideChanged();\n }\n\n private getAnimations(): OneSlideAnimation {\n const enterLeftAnimation = this.animationBuilder.build([\n animate(this.animationDuration, keyframes([style({ transform: 'translateX(-100%)' }), style({ transform: 'translateX(0%)' })])),\n ]);\n\n const enterLeftInstantAnimation = this.animationBuilder.build([\n animate(1, keyframes([style({ transform: 'translateX(-100%)' }), style({ transform: 'translateX(0%)' })])),\n ]);\n\n const enterRightAnimation = this.animationBuilder.build([\n animate(this.animationDuration, keyframes([style({ transform: 'translateX(100%)' }), style({ transform: 'translateX(0%)' })])),\n ]);\n\n const exitRightAnimation = this.animationBuilder.build([\n animate(this.animationDuration, keyframes([style({ transform: 'translateX(0%)' }), style({ transform: 'translateX(100%)' })])),\n ]);\n\n const exitLeftAnimation = this.animationBuilder.build([\n animate(this.animationDuration, keyframes([style({ transform: 'translateX(0%)' }), style({ transform: 'translateX(-100%)' })])),\n ]);\n\n const exitLeftInstantAnimation = this.animationBuilder.build([\n animate(1, keyframes([style({ transform: 'translateX(0%)' }), style({ transform: 'translateX(-100%)' })])),\n ]);\n\n return {\n exitLeft: exitLeftAnimation,\n exitRight: exitRightAnimation,\n enterRight: enterRightAnimation,\n enterLeft: enterLeftAnimation,\n exitLeftInstant: exitLeftInstantAnimation,\n enterLeftInstant: enterLeftInstantAnimation,\n };\n }\n}\n","import { AnimationBuilder, AnimationFactory, animate, keyframes, style } from '@angular/animations';\n\nimport { SlideComponent } from '../slide.component';\nimport { BaseSlideBehavior } from './base-slide-behavior';\n\ninterface TreeSlideAnimation {\n enterLeft: AnimationFactory;\n enterRight: AnimationFactory;\n leftCenter: AnimationFactory;\n centerRight: AnimationFactory;\n centerLeft: AnimationFactory;\n rightCenter: AnimationFactory;\n exitRight: AnimationFactory;\n exitLeft: AnimationFactory;\n staticExitLeft: AnimationFactory;\n}\n\nexport class ThreeSlideBehavior extends BaseSlideBehavior {\n private slideToDuration = 100;\n constructor(slides: SlideComponent[], animationBuilder: AnimationBuilder, initialSlideIndex: number) {\n super(slides, animationBuilder, initialSlideIndex);\n\n const animations = this.getAnimations();\n\n this.slides.forEach((s) => s.animate(animations.staticExitLeft));\n\n this.slides[this.currentSlideIndex].animate(animations.rightCenter);\n this.slides[this.nextSlideIndex()].animate(animations.enterRight);\n this.slides[this.previousSlideIndex()].animate(animations.centerLeft);\n }\n\n slideRight(): void {\n const animations = this.getAnimations();\n\n this.slides[this.nextSlideIndex()].animate(animations.exitRight);\n\n this.currentSlideIndex = this.previousSlideIndex();\n\n this.slides[this.currentSlideIndex].animate(animations.leftCenter);\n this.slides[this.nextSlideIndex()].animate(animations.centerRight);\n this.slides[this.previousSlideIndex()].animate(animations.enterLeft);\n\n this.emitSlideChanged();\n }\n\n slideLeft(): void {\n const animations = this.getAnimations();\n\n this.slides[this.previousSlideIndex()].animate(animations.exitLeft);\n\n this.currentSlideIndex = this.nextSlideIndex();\n\n this.slides[this.currentSlideIndex].animate(animations.rightCenter);\n this.slides[this.nextSlideIndex()].animate(animations.enterRight);\n this.slides[this.previousSlideIndex()].animate(animations.centerLeft);\n\n this.emitSlideChanged();\n }\n\n slideTo(slideIndex: number): void {\n // eslint-disable-next-line no-param-reassign\n slideIndex = this.limitNumber(slideIndex, 0, this.maxSlideIndex);\n if (slideIndex === this.currentSlideIndex) {\n return;\n }\n\n if (slideIndex < this.currentSlideIndex) {\n this.slideRight();\n } else {\n this.slideLeft();\n }\n setTimeout(() => {\n this.slideTo(slideIndex);\n }, this.slideToDuration);\n }\n\n get canSlideLeft(): boolean {\n return this.currentSlideIndex < this.maxSlideIndex;\n }\n\n get canSlideRight(): boolean {\n return this.currentSlideIndex > 0;\n }\n\n private getAnimations(): TreeSlideAnimation {\n const enterLeft = this.animationBuilder.build([\n animate(\n this.animationDuration,\n keyframes([style({ transform: 'translateX(-150%)', opacity: 0.095 }), style({ transform: 'translateX(-100%)', opacity: 0.095 })]),\n ),\n ]);\n\n const leftCenter = this.animationBuilder.build([\n animate(\n this.animationDuration,\n keyframes([style({ transform: 'translateX(-100%)', opacity: 0.095 }), style({ transform: 'translateX(0%)', opacity: 1 })]),\n ),\n ]);\n\n const centerLeft = this.animationBuilder.build([\n animate(\n this.animationDuration,\n keyframes([style({ transform: 'translateX(0%)', opacity: 1 }), style({ transform: 'translateX(-100%)', opacity: 0.095 })]),\n ),\n ]);\n\n const exitLeft = this.animationBuilder.build([\n animate(\n this.animationDuration,\n keyframes([style({ transform: 'translateX(-100%)', opacity: 0.095 }), style({ transform: 'translateX(-500%)', opacity: 0.095 })]),\n ),\n ]);\n\n const enterRight = this.animationBuilder.build([\n animate(\n this.animationDuration,\n keyframes([style({ transform: 'translateX(150%)', opacity: 0.095 }), style({ transform: 'translateX(100%)', opacity: 0.095 })]),\n ),\n ]);\n\n const rightCenter = this.animationBuilder.build([\n animate(\n this.animationDuration,\n keyframes([style({ transform: 'translateX(100%)', opacity: 0.095 }), style({ transform: 'translateX(0%)', opacity: 1 })]),\n ),\n ]);\n\n const centerRight = this.animationBuilder.build([\n animate(\n this.animationDuration,\n keyframes([style({ transform: 'translateX(0%)', opacity: 1 }), style({ transform: 'translateX(100%)', opacity: 0.095 })]),\n ),\n ]);\n\n const exitRight = this.animationBuilder.build([\n animate(\n this.animationDuration,\n keyframes([style({ transform: 'translateX(100%)', opacity: 0.095 }), style({ transform: 'translateX(300%)', opacity: 0.095 })]),\n ),\n ]);\n\n const staticExitLeft = this.animationBuilder.build([style({ transform: 'translateX(-500%)', opacity: 0.095 })]);\n\n return {\n enterLeft,\n enterRight,\n leftCenter,\n centerRight,\n centerLeft,\n rightCenter,\n exitRight,\n exitLeft,\n staticExitLeft,\n };\n }\n}\n","\n
\n \n @if (showProgressBar && slides && slides.length > 1) {\n \n }\n