{"version":3,"names":["slidesCss","AppSlides","this","autoplaying","currentlyAutomaticallyScrolling","syncWithOtherSlide","e","otherSlides","composedPath","root","otherSlidesControls","syncControls","syncGroup","thisControlledBy","syncControlledBy","otherSlide","detail","correspondingSlide","dataset","slideId","slides","find","slide","assignedSlot","assignedElements","indexOf","selectedSlide","goToSlide","async","autoplay","waitTime","arrowBehavior","Number","isFinite","autoplayDuration","wait","goDirection","startAutomatedScrolling","slidesContainer","style","setProperty","blur","deferred","deferredPromise","onScroll","debounce","removeProperty","removeEventListener","resolve","undefined","addEventListener","promise","containerCenter","domRectCenter","getBoundingClientRect","slideCenter","scrollBy","behavior","left","x","top","y","direction","index","newIndex","loop","mod","length","clamp","slideSelected","emit","then","selectProminentSlide","getMostProminentSlide","goToStart","canScrollRight","goToEnd","canScrollLeft","scrollTo","scrollWidth","width","paginationFactor","slideMetrics","getSlideMetrics","reverse","firstShowing","findIndex","_","metrics","intersectionRatio","firstNotFullyShowing","slice","updateScrollableDirections","scrollLeft","Math","ceil","clientWidth","Map","slidesContainerRect","slidesContainerCenter","forEach","rect","domRectIntersectionRatio","classList","toggle","set","distanceFromCenter","distanceFromPointToDomRect","distanceFromCenterToCenter","distanceFromPointToPoint","topIntersecting","filter","sort","a","b","entry","sortedEntries","reduce","closestEntry","componentWillLoad","children","child","slot","contains","componentDidLoad","ResizeObserver","observe","viewport","passive","throttle","clickToSelect","includes","updateAutoplay","render","h","Host","class","part","ref","Boolean","onSlotchange","Fragment","arrows","type","onClick","disabled","name","src","alt","bullets","map","i","key","autoplayToggle","icon"],"sources":["./src/components/shared/app-slides/slides.scss?tag=app-slides&encapsulation=shadow","./src/components/shared/app-slides/slides.tsx"],"sourcesContent":["@import '../../../global/reset';\r\n\r\n:host {\r\n\tdisplay: flow-root;\r\n}\r\n\r\n:host(.no-bar) {\r\n\t.slides {\r\n\t\t&::after {\r\n\t\t\tdisplay: none;\r\n\t\t\tvisibility: hidden;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n:host(.no-slide-desk) {\r\n\t.slides {\r\n\t\t@media only screen and (min-width: 1200px) {\r\n\t\t\tmax-width: 1000px;\r\n\t\t\tmargin: auto;\r\n\t\t\tgap: 2rem;\r\n\t\t\tflex-wrap: wrap;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.viewport {\r\n\tposition: relative;\r\n}\r\n\r\n.slides {\r\n\t--gap: 1rem;\r\n\tmax-inline-size: 100%;\r\n\tmax-block-size: inherit;\r\n\tdisplay: flex;\r\n\tgap: var(--gap);\r\n\toverflow: auto;\r\n\tscroll-snap-type: both mandatory;\r\n\tscroll-behavior: smooth;\r\n\r\n\t& > slot::slotted(*) {\r\n\t\tscroll-snap-align: center;\r\n\t\tmax-inline-size: 100%;\r\n\t\tmax-block-size: 100%;\r\n\t}\r\n\t&::after {\r\n\t\tcontent: \"\";\r\n\t\tposition: absolute;\r\n\t\twidth: 100%;\r\n\t\theight: 10rem;\r\n\t\tbackground-color: $quarternary;\r\n\t\tbottom: -1rem;\r\n\t\tz-index: -1;\r\n\t\toverflow-x: hidden;\r\n\t}\r\n\t&.no-btns-arrows {\r\n\t\tjustify-content: center;\r\n\t}\r\n}\r\n\r\n.arrows, .bullets, .autoplay-toggle {\r\n\tmargin-block: 0.5rem;\r\n\tmargin-inline: auto;\r\n}\r\n\r\n.arrows, .bullets {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tinline-size: fit-content;\r\n}\r\n\r\n.bullets {\r\n\tflex-wrap: wrap;\r\n}\r\n\r\n.arrows button,\r\n.autoplay-toggle {\r\n\tdisplay: grid;\r\n\tplace-content: center;\r\n\tbackground-color: $light-tan;\r\n\tborder: 1px solid $darker-gold;\r\n\taspect-ratio: 1;\r\n\tinline-size: 2.75rem;\r\n\tblock-size: 2.75rem;\r\n\r\n\tsvg {\r\n\t\tinline-size: 1rem;\r\n\t\tblock-size: 1rem;\r\n\t}\r\n\r\n\t&:not(:disabled):is(:hover, :focus-visible) {\r\n\t\tcolor: white;\r\n\t\tbackground-color: $lighter-gold;\r\n\t}\r\n\r\n\t&:disabled {\r\n\t\topacity: 0.25;\r\n\t}\r\n}\r\n\r\n.arrows {\r\n\tgap: calc(100vw - 9.5rem);\r\n\tbutton {\r\n\t\ttransform: translateY(2rem);\r\n\t\t&.left {\r\n\t\t\timg {\r\n\t\t\t\trotate: 180deg;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.bullets {\r\n\tgap: 0.75rem;\r\n\tmax-width: calc(100vw - 12rem);\r\n\r\n\tbutton {\r\n\t\taspect-ratio: 1;\r\n\t\tinline-size: 1rem;\r\n\t\tblock-size: 1rem;\r\n\t\tborder-radius: 50%;\r\n\t\tdisplay: grid;\r\n\t\tbackground-color: $light-tan;\r\n\t\tborder: 1px solid $darker-gold;\r\n\t\tborder-radius: 0;\r\n\t\ttransform: translateY(-0.4375rem);\r\n\r\n\t\t&:not(\r\n\t\t\t[aria-selected='true'],\r\n\t\t\t:hover, :focus-visible\r\n\t\t) {\r\n\t\t\topacity: 0.5;\r\n\t\t}\r\n\r\n\t\t&[aria-selected='true'] {\r\n\t\t\tbackground-color: $darker-gold;\r\n\t\t\ttransform: scale(1.5) translateY(-0.3125rem);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n:host(:not(.with-scrollbar)) {\r\n\t.slides {\r\n\t\tscrollbar-width: none;\r\n\r\n\t\t&::-webkit-scrollbar {\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\t}\r\n}\r\n:host(.with-scrollbar) {\r\n\t--scrollbar-color: var(--bs-primary);\r\n\t--scrollbar-background-color: white;\r\n\r\n\t.slides {\r\n\t\tpadding-block-end: 0.5rem;\r\n\t\tscrollbar-width: thin;\r\n\t\tscrollbar-color: var(--scrollbar-color) var(--scrollbar-background-color);\r\n\r\n\t\t&::-webkit-scrollbar,\r\n\t\t&::-webkit-scrollbar-thumb {\r\n\t\t\tborder-radius: 99px;\r\n\t\t}\r\n\r\n\t\t&::-webkit-scrollbar {\r\n\t\t\tbackground-color: var(--scrollbar-background-color);\r\n\t\t\tblock-size: 0.5rem;\r\n\t\t}\r\n\r\n\t\t&::-webkit-scrollbar-thumb {\r\n\t\t\tbackground-color: var(--scrollbar-color);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n:host(.faded-edges) {\r\n\t--padding-inline: 4ch;\r\n\t--bg-color: white;\r\n\r\n\t.viewport {\r\n\t\tinline-size: calc(100% + 2 * var(--padding-inline));\r\n\t\ttransform: translateX(calc(-1 * var(--padding-inline)));\r\n\r\n\t\t&::before, &::after {\r\n\t\t\tcontent: '';\r\n\t\t\tposition: absolute;\r\n\t\t\tinset-block: 0;\r\n\t\t\tblock-size: 100%;\r\n\t\t\tinline-size: var(--padding-inline);\r\n\t\t}\r\n\r\n\t\t&::before {\r\n\t\t\tz-index: 1;\r\n\t\t\tbackground-image: linear-gradient(to right, var(--bg-color), transparent);\r\n\t\t\tinset-inline-start: -1px;\r\n\t\t}\r\n\r\n\t\t&::after {\r\n\t\t\tbackground-image: linear-gradient(to left, var(--bg-color), transparent);\r\n\t\t\tinset-inline-end: -1px;\r\n\t\t}\r\n\t}\r\n\r\n\t.slides {\r\n\t\tscroll-padding-inline: var(--padding-inline);\r\n\t}\r\n\r\n\t.slides,\r\n\t.arrows,\r\n\t.bullets {\r\n\t\tpadding-inline: var(--padding-inline);\r\n\t}\r\n}\r\n\r\n:host(.faded-edges.with-scrollbar) {\r\n\t.slides {\r\n\t\t&::-webkit-scrollbar-track {\r\n\t\t\tmargin-inline: var(--padding-inline);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n:host(.fixed-slide-count) {\r\n\t--count: 1;\r\n\r\n\t.slides > slot::slotted(*) {\r\n\t\tscroll-snap-align: start;\r\n\t\tflex-shrink: 0;\r\n\t\tinline-size: calc(\r\n\t\t\t(100% -\r\n\t\t\t\t(var(--count) - 1) * var(--gap)\r\n\t\t\t)\r\n\t\t\t/ var(--count)\r\n\t\t);\r\n\t\tmin-inline-size: min-content;\r\n\t}\r\n}\r\n\r\n:host(.inverted) {\r\n\t.arrows button,\r\n\t.autoplay-toggle {\r\n\t\tcolor: white;\r\n\t\tbackground: none;\r\n\r\n\t\t&:not(:disabled):is(:hover, :focus-visible) {\r\n\t\t\tcolor: var(--bs-primary);\r\n\t\t\tbackground-color: white;\r\n\t\t}\r\n\t}\r\n\r\n\t.bullets {\r\n\t\tbutton {\r\n\t\t\tbackground-color: white;\r\n\t\t}\r\n\t}\r\n}","import { h, Fragment, Component, Element, Host, State, Prop, Watch, Event, Listen } from '@stencil/core';\r\nimport type { ComponentInterface, EventEmitter } from '@stencil/core';\r\nimport {\r\n\tmod, clamp,\r\n\twait, debounce, throttle, deferredPromise,\r\n\tdistanceFromPointToDomRect, distanceFromPointToPoint, domRectCenter, domRectIntersectionRatio\r\n} from 'utils';\r\n\r\n@Component({\r\n\ttag: 'app-slides',\r\n\tstyleUrl: 'slides.scss',\r\n\tshadow: true\r\n})\r\nexport class AppSlides implements ComponentInterface {\r\n\t@Element() root: HTMLAppSlidesElement;\r\n\tviewport?: HTMLElement;\r\n\tslidesContainer?: HTMLElement;\r\n\r\n\t/** Ensure that the most prominently visible slide is selected */\r\n\t@Prop() selectProminentSlide = false;\r\n\r\n\t/** Show arrows */\r\n\t@Prop() arrows = false;\r\n\t/**\r\n\t * Paginate will scroll by a factor of the viewport size.\r\n\t * Move will scroll enough to snap on the next slide in the intented direction.\r\n\t * Select will move the slide selection towards the intended direction.\r\n\t */\r\n\t@Prop() arrowBehavior: 'paginate' | 'move' | 'select' = 'paginate';\r\n\t@Prop() paginationFactor = 0.6;\r\n\t/** Arrows loop around like a carousel */\r\n\t@Prop() loop = false;\r\n\r\n\t/** Show bullets, which reflect the selected slide */\r\n\t@Prop() bullets = false;\r\n\r\n\t/** Click on a slide to select it */\r\n\t@Prop() clickToSelect = false;\r\n\r\n\t/**\r\n\t * A group identifier for synchronizing multiple slides components\r\n\t */\r\n\t@Prop() syncGroup?: string;\r\n\t/**\r\n\t * Override synchronization group that this component controls\r\n\t */\r\n\t@Prop() syncControls?: string;\r\n\t/**\r\n\t * Override synchronization group that this component is controlled by\r\n\t */\r\n\t@Prop() syncControlledBy?: string;\r\n\r\n\t/** Show autoplay toggle button */\r\n\t@Prop() autoplayToggle = false;\r\n\t/** Enable automatic movement */\r\n\t@Prop({ mutable: true, reflect: true }) autoplay = false;\r\n\t/** Default seconds waiting per slide when autoplaying */\r\n\t@Prop() autoplayDuration = 8;\r\n\r\n\t@State() slides: ReadonlyArray;\r\n\r\n\t@State() selectedSlide?: HTMLElement;\r\n\t@Event() slideSelected: EventEmitter;\r\n\t@Listen('slideSelected', { target: 'window' })\r\n\tsyncWithOtherSlide(e: CustomEvent) {\r\n\t\tconst otherSlides = e.composedPath()[0] as typeof this.root | undefined;\r\n\t\tif (!otherSlides || otherSlides === this.root)\r\n\t\t\treturn;\r\n\r\n\t\tconst otherSlidesControls = otherSlides.syncControls || otherSlides.syncGroup;\r\n\t\tconst thisControlledBy = this.syncControlledBy || this.syncGroup;\r\n\t\tif (otherSlidesControls !== thisControlledBy || !thisControlledBy)\r\n\t\t\treturn;\r\n\r\n\t\tconst otherSlide = e.detail;\r\n\t\tlet correspondingSlide: HTMLElement | undefined;\r\n\t\tif (otherSlide.dataset.slideId)\r\n\t\t\tcorrespondingSlide = this.slides.find(slide => slide.dataset.slideId === otherSlide.dataset.slideId);\r\n\t\tcorrespondingSlide ||= this.slides[otherSlide.assignedSlot!.assignedElements().indexOf(otherSlide)];\r\n\t\tif (!correspondingSlide || correspondingSlide === this.selectedSlide)\r\n\t\t\treturn;\r\n\r\n\t\tthis.selectedSlide = correspondingSlide;\r\n\t\tthis.goToSlide(this.selectedSlide);\r\n\t}\r\n\r\n\tautoplaying = false;\r\n\t@Watch('autoplay')\r\n\tasync updateAutoplay() {\r\n\t\tif (!this.autoplay || this.autoplaying)\r\n\t\t\treturn;\r\n\r\n\t\tthis.autoplaying = true;\r\n\r\n\t\twhile (true) {\r\n\t\t\tlet waitTime: number | undefined;\r\n\t\t\tif (this.arrowBehavior === 'select')\r\n\t\t\t\twaitTime = Number(this.selectedSlide?.dataset.waitTime);\r\n\t\t\tif (!Number.isFinite(waitTime))\r\n\t\t\t\twaitTime = this.autoplayDuration;\r\n\t\t\tawait wait(waitTime! * 1_000);\r\n\r\n\t\t\tif (!this.autoplay) {\r\n\t\t\t\tthis.autoplaying = false;\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tthis.goDirection(+1);\r\n\t\t}\r\n\t}\r\n\r\n\tcurrentlyAutomaticallyScrolling = false;\r\n\tstartAutomatedScrolling() {\r\n\t\tthis.currentlyAutomaticallyScrolling = true;\r\n\t\tthis.slidesContainer!.style.setProperty('pointer-events', 'none');\r\n\t\tthis.slidesContainer!.blur();\r\n\r\n\t\tconst deferred = deferredPromise();\r\n\t\tconst onScroll = debounce(() => {\r\n\t\t\tthis.currentlyAutomaticallyScrolling = false;\r\n\t\t\tthis.slidesContainer!.style.removeProperty('pointer-events');\r\n\r\n\t\t\tthis.slidesContainer!.removeEventListener('scroll', onScroll);\r\n\t\t\tdeferred.resolve(undefined);\r\n\t\t}, 150);\r\n\t\t// Call (debounced) in case scrolling never actually happens\r\n\t\tonScroll();\r\n\t\tthis.slidesContainer!.addEventListener('scroll', onScroll);\r\n\t\treturn deferred.promise;\r\n\t}\r\n\r\n\tgoToSlide(slide: HTMLElement) {\r\n\t\tconst containerCenter = domRectCenter(this.slidesContainer!.getBoundingClientRect());\r\n\t\tconst slideCenter = domRectCenter(slide.getBoundingClientRect());\r\n\r\n\t\tthis.startAutomatedScrolling();\r\n\t\tthis.slidesContainer!.scrollBy({\r\n\t\t\tbehavior: 'smooth',\r\n\t\t\tleft: slideCenter.x - containerCenter.x,\r\n\t\t\ttop: slideCenter.y - containerCenter.y\r\n\t\t});\r\n\t}\r\n\r\n\tgoDirection(direction: 1 | -1) {\r\n\t\tif (this.arrowBehavior === 'select') {\r\n\t\t\tif (!this.selectedSlide)\r\n\t\t\t\treturn;\r\n\r\n\t\t\tconst index = this.slides.indexOf(this.selectedSlide);\r\n\t\t\tconst newIndex =\r\n\t\t\t\tthis.loop\r\n\t\t\t\t\t? mod(index + direction, this.slides.length)\r\n\t\t\t\t\t: clamp(0, index + direction, this.slides.length - 1);\r\n\t\t\tthis.selectedSlide = this.slides[newIndex];\r\n\t\t\tthis.slideSelected.emit(this.selectedSlide);\r\n\t\t\tthis.goToSlide(this.selectedSlide);\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tthis.startAutomatedScrolling().then(() => {\r\n\t\t\tif (this.selectProminentSlide) {\r\n\t\t\t\tthis.selectedSlide = this.getMostProminentSlide();\r\n\t\t\t\tthis.slideSelected.emit(this.selectedSlide);\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\tif (this.loop) {\r\n\t\t\tconst goToStart = direction === +1 && !this.canScrollRight;\r\n\t\t\tconst goToEnd = direction === -1 && !this.canScrollLeft;\r\n\t\t\tif (goToStart || goToEnd) {\r\n\t\t\t\tif (goToStart) {\r\n\t\t\t\t\tthis.slidesContainer!.scrollTo({\r\n\t\t\t\t\t\tbehavior: 'smooth',\r\n\t\t\t\t\t\tleft: 0\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t\telse if (goToEnd) {\r\n\t\t\t\t\tthis.slidesContainer!.scrollTo({\r\n\t\t\t\t\t\tbehavior: 'smooth',\r\n\t\t\t\t\t\tleft: this.slidesContainer!.scrollWidth\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (this.arrowBehavior === 'paginate') {\r\n\t\t\tconst { width } = this.slidesContainer!.getBoundingClientRect();\r\n\t\t\tthis.slidesContainer!.scrollBy({\r\n\t\t\t\tbehavior: 'smooth',\r\n\t\t\t\tleft: direction * this.paginationFactor * width\r\n\t\t\t});\r\n\t\t}\r\n\t\telse if (this.arrowBehavior === 'move') {\r\n\t\t\tconst slideMetrics = [...this.getSlideMetrics()];\r\n\t\t\tif (direction === -1)\r\n\t\t\t\tslideMetrics.reverse();\r\n\t\t\t// Find the first slide that is visible on the side that\r\n\t\t\t// the user intends to move away from\r\n\t\t\tconst firstShowing = slideMetrics\r\n\t\t\t\t.findIndex(([_, metrics]) => metrics.intersectionRatio > 0.001);\r\n\t\t\tif (firstShowing === -1)\r\n\t\t\t\treturn;\r\n\t\t\t// Find the first slide after that one which is not fully visible\r\n\t\t\tconst firstNotFullyShowing = slideMetrics\r\n\t\t\t\t.slice(firstShowing)\r\n\t\t\t\t.find(([_, metrics]) => metrics.intersectionRatio <= 0.999);\r\n\t\t\tif (!firstNotFullyShowing)\r\n\t\t\t\treturn;\r\n\t\t\tthis.goToSlide(firstNotFullyShowing[0]);\r\n\t\t}\r\n\t}\r\n\r\n\t@State() canScrollLeft = false;\r\n\t@State() canScrollRight = true;\r\n\tupdateScrollableDirections() {\r\n\t\tthis.canScrollLeft = this.slidesContainer!.scrollLeft > 0;\r\n\t\tthis.canScrollRight = Math.ceil(this.slidesContainer!.scrollLeft + this.slidesContainer!.clientWidth) < this.slidesContainer!.scrollWidth;\r\n\t}\r\n\r\n\tgetSlideMetrics() {\r\n\t\tconst slideMetrics = new Map();\r\n\r\n\t\tconst slidesContainerRect = this.slidesContainer!.getBoundingClientRect();\r\n\t\tconst slidesContainerCenter = domRectCenter(slidesContainerRect);\r\n\r\n\t\tthis.slides.forEach(slide => {\r\n\t\t\tconst rect = slide.getBoundingClientRect();\r\n\t\t\tconst intersectionRatio = domRectIntersectionRatio(slidesContainerRect, rect);\r\n\r\n\t\t\tslide.classList.toggle('showing', intersectionRatio > 0);\r\n\t\t\tslide.classList.toggle('completely', intersectionRatio > 0.999); // 1px/1000px rounding error\r\n\r\n\t\t\tslideMetrics.set(slide, {\r\n\t\t\t\tintersectionRatio,\r\n\t\t\t\tdistanceFromCenter: distanceFromPointToDomRect(slidesContainerCenter, rect),\r\n\t\t\t\tdistanceFromCenterToCenter: distanceFromPointToPoint(slidesContainerCenter, domRectCenter(rect))\r\n\t\t\t});\r\n\t\t});\r\n\r\n\t\treturn slideMetrics;\r\n\t}\r\n\r\n\tgetMostProminentSlide() {\r\n\t\tthis.updateScrollableDirections();\r\n\r\n\t\tconst slideMetrics = this.getSlideMetrics();\r\n\r\n\t\tif (!this.canScrollLeft)\r\n\t\t\treturn this.slides[0];\r\n\t\telse if (!this.canScrollRight)\r\n\t\t\treturn this.slides[this.slides.length - 1];\r\n\r\n\t\tconst topIntersecting = [...slideMetrics]\r\n\t\t\t.filter(([_, metrics]) => metrics.intersectionRatio !== 0)\r\n\t\t\t.sort((a, b) => b[1].intersectionRatio - a[1].intersectionRatio)\r\n\t\t\t.filter((entry, _, sortedEntries) => entry[1].intersectionRatio === sortedEntries[0][1].intersectionRatio);\r\n\r\n\t\treturn topIntersecting\r\n\t\t\t.reduce((closestEntry, entry) =>\r\n\t\t\t\tentry[1].distanceFromCenter < closestEntry[1].distanceFromCenter\r\n\t\t\t\t\t? entry\r\n\t\t\t\t\t: closestEntry\r\n\t\t\t, topIntersecting[0])\r\n\t\t\t?.[0] as HTMLElement | undefined;\r\n\t}\r\n\r\n\tcomponentWillLoad() {\r\n\t\tthis.slides = [...this.root.children].filter(child => child.slot === '') as any;\r\n\t\tthis.selectedSlide =\r\n\t\t\tthis.slides.find(slide => slide.classList.contains('initial'))\r\n\t\t\t?? this.slides[0];\r\n\t}\r\n\r\n\tcomponentDidLoad() {\r\n\t\tif (this.selectedSlide)\r\n\t\t\tthis.goToSlide(this.selectedSlide);\r\n\r\n\t\tnew ResizeObserver(debounce(() => {\r\n\t\t\tthis.updateScrollableDirections();\r\n\t\t})).observe(this.viewport!);\r\n\r\n\t\tthis.slidesContainer!.addEventListener('scroll', debounce(() => {\r\n\t\t\tthis.updateScrollableDirections();\r\n\t\t}), { passive: true });\r\n\r\n\t\tthis.slidesContainer!.addEventListener('scroll', throttle(() => {\r\n\t\t\tif (!this.selectProminentSlide || this.currentlyAutomaticallyScrolling)\r\n\t\t\t\treturn;\r\n\r\n\t\t\tthis.selectedSlide = this.getMostProminentSlide();\r\n\t\t\tthis.slideSelected.emit(this.selectedSlide);\r\n\t\t}), { passive: true });\r\n\r\n\t\tthis.slidesContainer!.addEventListener('click', e => {\r\n\t\t\tif (!this.clickToSelect)\r\n\t\t\t\treturn;\r\n\r\n\t\t\tconst slide = e.composedPath().find(slide => this.slides.includes(slide as any)) as HTMLElement | undefined;\r\n\t\t\tif (!slide)\r\n\t\t\t\treturn;\r\n\r\n\t\t\tthis.selectedSlide = slide;\r\n\t\t\tthis.slideSelected.emit(this.selectedSlide);\r\n\t\t\tthis.goToSlide(this.selectedSlide);\r\n\t\t});\r\n\r\n\t\tthis.updateAutoplay();\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t this.viewport = e}\r\n\t\t\t\t>\r\n\t\t\t\t\t this.slidesContainer = e}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t {\r\n\t\t\t\t\t\t\t\tthis.slides = [...this.root.children].filter(child => child.slot === '') as any;\r\n\t\t\t\t\t\t\t\tif (!this.slides.includes(this.selectedSlide as any))\r\n\t\t\t\t\t\t\t\t\tthis.selectedSlide =\r\n\t\t\t\t\t\t\t\t\t\tthis.getMostProminentSlide()\r\n\t\t\t\t\t\t\t\t\t\t?? this.slides.find(slide => slide.classList.contains('initial'))\r\n\t\t\t\t\t\t\t\t\t\t?? this.slides[0];\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\r\n\t\t\t\t{this.slides.length > 1 && (this.canScrollLeft || this.canScrollRight) &&\r\n\t\t\t\t<>\r\n\t\t\t\t\t{this.arrows &&\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t this.goDirection(-1)}\r\n\t\t\t\t\t\t\t\tdisabled={\r\n\t\t\t\t\t\t\t\t\tthis.loop\r\n\t\t\t\t\t\t\t\t\t\t? false\r\n\t\t\t\t\t\t\t\t\t\t: this.arrowBehavior === 'select'\r\n\t\t\t\t\t\t\t\t\t\t\t? this.selectedSlide === this.slides[0]\r\n\t\t\t\t\t\t\t\t\t\t\t: !this.canScrollLeft\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\t\t\r\n\t\t\t\t\t\t\t\t\t\"arrow\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{ this.arrowBehavior === 'paginate'\r\n\t\t\t\t\t\t\t\t\t\t? 'Scroll to the left'\r\n\t\t\t\t\t\t\t\t\t: this.arrowBehavior === 'move'\r\n\t\t\t\t\t\t\t\t\t\t? 'Scroll to reveal the next slide on the left'\r\n\t\t\t\t\t\t\t\t\t: this.arrowBehavior === 'select'\r\n\t\t\t\t\t\t\t\t\t\t? 'Select the next slide on the left'\r\n\t\t\t\t\t\t\t\t\t: false\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t this.goDirection(+1)}\r\n\t\t\t\t\t\t\t\tdisabled={\r\n\t\t\t\t\t\t\t\t\tthis.loop\r\n\t\t\t\t\t\t\t\t\t\t? false\r\n\t\t\t\t\t\t\t\t\t\t: this.arrowBehavior === 'select'\r\n\t\t\t\t\t\t\t\t\t\t\t? this.selectedSlide === this.slides[this.slides.length - 1]\r\n\t\t\t\t\t\t\t\t\t\t\t: !this.canScrollRight\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\t\t\r\n\t\t\t\t\t\t\t\t\t\"arrow\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{ this.arrowBehavior === 'paginate'\r\n\t\t\t\t\t\t\t\t\t\t? 'Scroll to the right'\r\n\t\t\t\t\t\t\t\t\t: this.arrowBehavior === 'move'\r\n\t\t\t\t\t\t\t\t\t\t? 'Scroll to reveal the next slide on the right'\r\n\t\t\t\t\t\t\t\t\t: this.arrowBehavior === 'select'\r\n\t\t\t\t\t\t\t\t\t\t? 'Select the next slide on the right'\r\n\t\t\t\t\t\t\t\t\t: false\r\n\t\t\t\t\t\t\t\t\t}\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\r\n\t\t\t\t\t{this.bullets &&\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{this.slides.map((slide, i) =>\r\n\t\t\t\t\t\t\t\t {\r\n\t\t\t\t\t\t\t\t\t\tthis.selectedSlide = slide;\r\n\t\t\t\t\t\t\t\t\t\tthis.slideSelected.emit(this.selectedSlide);\r\n\t\t\t\t\t\t\t\t\t\tthis.goToSlide(this.selectedSlide);\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\taria-selected={'' + (this.selectedSlide === slide)}\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\tScroll to slide {i + 1}\r\n\t\t\t\t\t\t\t\t\t\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\t}\r\n\r\n\t\t\t\t{this.autoplayToggle &&\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\t\tthis.autoplay = !this.autoplay;\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{this.autoplay\r\n\t\t\t\t\t\t\t?\r\n\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\tPause autoplay\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\t:\r\n\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\tToggle autoplay on\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\r\n\t\t);\r\n\t}\r\n}\r\n"],"mappings":"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"}