{"version":3,"names":["kdxCarouselCss","StCarousel","this","id","guid","initialRenderComplete","carousel","activeSlideUpdatedHandler","event","detail","carouselId","index","slide","go","componentWillLoad","root","querySelector","setAttribute","viewControl","componentDidUpdate","componentDidRender","setUp","removePseudoElements","slides","children","shouldHideControls","adCarousel","closest","window","innerWidth","length","Math","max","parseInt","perSlideMobile","hideControls","document","instance","getElementById","bulletsWrapper","i","innerHTML","perSlide","Glide","type","carouselType","perView","focusAt","centerFocus","autoplay","autoPlay","autoPlayDuration","hoverpause","swipeThreshold","disableSwipe","dragThreshold","bound","rewind","peek","gap","breakpoints","perSlideTablet","peekTablet","peekMobile","mount","on","activeSlideUpdated","emit","disableArrows","classList","contains","settings","removeAttribute","observer","ResizeObserver","track","update","startAt","disable","enable","parentElement","observe","addEventListener","_BREAKPOINTS_","md","lg","sm","togglePause","e","preventDefault","paused","pause","play","categoryCarousels","querySelectorAll","forEach","categoryCarousel","carouselControls","hasAttribute","add","remove","render","h","class","hidden","icon","bulletNav","displayBulletNavExternally","title","onClick"],"sources":["./src/components/shared/kdx-carousel/kdx-carousel.scss?tag=kdx-carousel","./src/components/shared/kdx-carousel/kdx-carousel.tsx"],"sourcesContent":["@import \"@glidejs/glide/src/assets/sass/glide.core\";\r\n\r\n.kdx-carousel {\r\n    position: relative;\r\n\r\n    .kdx-carousel-inner {\r\n        position: relative;\r\n    }\r\n\r\n    .glide__slides {\r\n        white-space: normal;\r\n    }\r\n\r\n    .control{\r\n\r\n        border:none;\r\n\r\n        button {\r\n            position: relative;\r\n            width: 100%;\r\n            background: none;\r\n            outline: none;\r\n            box-shadow: none;\r\n            top: 0;\r\n            border: none;\r\n\r\n\r\n            svg {\r\n                @include svg-format(10px, 20px, rgb(201, 41, 41));\r\n                stroke: rgb(85, 37, 37);\r\n                transition: transform 350ms;\r\n            }\r\n\r\n            &:hover {\r\n                svg {\r\n                    transform: scale(1.25);\r\n                }\r\n            }\r\n\r\n            &:focus {\r\n                outline: 1px solid #282828;\r\n            }\r\n        }\r\n\r\n        &.hidden{\r\n            visibility: hidden;\r\n        }\r\n    }\r\n\r\n    .kdx-carousel-card{\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        position: relative;\r\n        margin: 40px 20px 85px 20px;\r\n        width: 80%;\r\n        height: auto;\r\n        max-width: 586px;\r\n        padding: 40px 20px 20px 47px;\r\n        border-radius: 5px;\r\n        background-color: white;\r\n        box-shadow: 0px 14px 52px rgba(0, 61, 107, 0.13);\r\n\r\n        p{\r\n            color: #444444;\r\n            text-align: left;\r\n            font-size: 16px;\r\n            line-height: 30px;\r\n            font-style: normal;\r\n            font-weight: 300;\r\n        }\r\n\r\n        b, strong {\r\n            font-weight: bold;\r\n        }\r\n\r\n        h6{\r\n            font-size: 16px;\r\n            margin: 0 0;\r\n            font-weight: 600;\r\n            color: #444444;\r\n        }\r\n      \r\n        small{\r\n            color: #444444;\r\n            font-style: oblique;\r\n            font-weight: lighter;\r\n            font-size: 13px;\r\n        }\r\n\r\n\r\n        .quote svg {\r\n            position: absolute;\r\n            top: 0;\r\n            transform: translateY(-50%);\r\n            aspect-ratio: 172.7 / 137.2;\r\n            height: 52px;\r\n            fill: $primary;\r\n        }\r\n\r\n        .tail svg {\r\n            position: absolute;\r\n            top: 100%;\r\n            left: 0;\r\n            aspect-ratio: 304 / 103.4;\r\n            height: 45px;\r\n            fill: white;\r\n        }\r\n    }\r\n\r\n\r\n    .glide__slides {\r\n        white-space: normal;\r\n    }\r\n\r\n    .control{\r\n\r\n        border:none;\r\n\r\n        button {\r\n            position: relative;\r\n            width: 100%;\r\n            background: none;\r\n            outline: none;\r\n            box-shadow: none;\r\n            top: 0;\r\n            border: none;\r\n\r\n\r\n            svg {\r\n                @include svg-format(10px, 20px, rgb(201, 41, 41));\r\n                stroke: rgb(85, 37, 37);\r\n                transition: transform 350ms;\r\n            }\r\n\r\n            &:hover {\r\n                svg {\r\n                    transform: scale(1.25);\r\n                }\r\n            }\r\n        }\r\n\r\n        &.hidden{\r\n            visibility: hidden;\r\n        }\r\n    }\r\n\r\n    .glide__bullets{\r\n\r\n        height: 16px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n\r\n        .glide__bullet{\r\n            border-radius: 100%;\r\n            padding:0;\r\n            height:8px;\r\n            width:8px;\r\n            border:none;\r\n            background-color: #F8F8F8;\r\n            margin: 0 9.5px;\r\n    \r\n        }\r\n    \r\n        .glide__bullet--active\r\n        {\r\n            background-color: #2D2D2DCC;\r\n        }\r\n    }\r\n\r\n    .controls {\r\n\r\n        button {\r\n            position: absolute;\r\n            top: 40%;\r\n            left: 0;\r\n            width: 80px;\r\n            height: 100%;\r\n            background: none;\r\n                background-image:    \r\n                    linear-gradient(\r\n                    to right, \r\n                    rgba(0,0,0,.5), transparent\r\n                    );\r\n                // reset default btn style\r\n                border: none;\r\n                outline: none;\r\n                box-shadow: none;\r\n    \r\n                svg {\r\n                    @include svg-format(30px, 40px, #fff);\r\n                    stroke: #FFF;\r\n                    transition: transform 350ms;\r\n                }\r\n    \r\n                &:hover {\r\n                    svg {\r\n                        @include media-breakpoint-up(xl) {\r\n                            transform: scale(1.25);\r\n                        }\r\n                        @include media-breakpoint-down(xl) {\r\n                            transform: translate(-50%, -50%) scale(1.25);\r\n                        }\r\n                    }\r\n                }\r\n\r\n                &:focus { }\r\n        }\r\n    \r\n        [data-glide-dir=\">\"] {\r\n            left: auto;\r\n            right: 0;\r\n\r\n            background-image:\r\n                linear-gradient(\r\n                to right, \r\n                transparent,  rgba(0,0,0,.5)\r\n            );\r\n            .icon-desktop, .icon-mobile {\r\n                kdx-icon {\r\n                    svg { margin: 0 0 1px 2px; }\r\n                }\r\n            }\r\n        }\r\n        [data-glide-dir=\"<\"] {\r\n            .icon-desktop, .icon-mobile {\r\n                kdx-icon {\r\n                    svg { margin: 0 2px 1px 0; }\r\n                }\r\n            }\r\n        }\r\n\r\n    }   \r\n\r\n    @include media-breakpoint-down(md) {\r\n        .controls {\r\n            button {\r\n                width: 40px;\r\n\r\n                svg {\r\n                    min-width: 15px;\r\n                    max-width: 15px;\r\n                    max-height: 25px;\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n.testimonial{\r\n\r\n    h2{\r\n        font-family: \"Hind\", sans-serif;\r\n        margin-bottom: 1.5rem !important;\r\n    }\r\n    \r\n    .cta-content{\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        align-items: flex-start;\r\n    }\r\n\r\n    .kdx-carousel {\r\n\r\n        .veiw-port{\r\n            display: flex;\r\n            justify-content: center;\r\n            align-self: center;\r\n            width: 100%;\r\n            height: 100%;\r\n        }\r\n\r\n\r\n        .controls {\r\n            position: absolute;\r\n            top: 35%;\r\n            width:100%;\r\n            \r\n            button {\r\n                position: absolute;\r\n                background: none;\r\n                background-image:none;\r\n                // reset default btn style\r\n                border: none;\r\n                outline: none;\r\n                box-shadow: none;\r\n    \r\n                svg {\r\n                    @include svg-format(30px, 40px, rgb(0, 0, 0));\r\n                    stroke: rgb(0, 0, 0);\r\n                    transition: transform 350ms;\r\n                }\r\n    \r\n                &:hover {\r\n                    svg {\r\n                        transform: scale(1.25);\r\n                    }\r\n                }\r\n\r\n                &:focus {\r\n                    outline: 1px solid #282828;\r\n                    min-height: 50px;\r\n                }\r\n            }\r\n    \r\n            [data-glide-dir=\">\"] {\r\n                left: auto;\r\n                right: 0;\r\n                background-image: none;\r\n            }\r\n        }\r\n    } \r\n\r\n    .bullets-wrapper{\r\n\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n\r\n        .bullet-Arrow{\r\n           *{\r\n                position: static !important;\r\n            }\r\n\r\n            &.controls {\r\n                display:flex;\r\n                justify-content: center;\r\n                align-items: center;\r\n                position: relative;\r\n\r\n                button {\r\n                    width: 20px;\r\n                    height: 27px;\r\n        \r\n                    svg {\r\n                        @include svg-format(15px, 25px, #495972);\r\n                        stroke:#495972;\r\n                        transition: transform 350ms;\r\n                    }\r\n        \r\n                    &:hover {\r\n                        svg {\r\n                            transform: scale(1.25);\r\n                        }\r\n                    }\r\n\r\n                    &:focus {\r\n                        outline: 3px solid #282828;\r\n                        min-height: 0;\r\n                    }\r\n                }\r\n\r\n                .glide__bullet{\r\n                    border-radius: 100%;\r\n                    padding:0;\r\n                    height:8px;\r\n                    width:8px;\r\n                    border:none;\r\n                    background-color: #495972;\r\n                    margin: 0 9.5px;\r\n                }\r\n            }\r\n        }\r\n\r\n    }\r\n    \r\n    @media (max-width: 1000px){\r\n        margin-top: 3rem;\r\n\r\n        [class^=col]{\r\n            display: flex;\r\n            flex-direction: column;\r\n            padding: 0 25px;\r\n        }\r\n\r\n        .kdx-carousel-card{\r\n            width: 100%;\r\n            margin-top: 20px;\r\n\r\n            .quote svg {\r\n                transform: translateY(-20px);\r\n            }\r\n        }\r\n\r\n        .cta-content {\r\n            align-items: center;\r\n\r\n            .ctas {\r\n                margin-bottom: 20px;\r\n            }\r\n        }\r\n\r\n        .btn{\r\n            width: 100%;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        h2{\r\n            text-align: center;\r\n        }\r\n\r\n        .controls{\r\n            visibility: hidden;\r\n            width: 0px;\r\n        }\r\n\r\n        .bullets-wrapper{\r\n            .controls{\r\n                visibility: visible !important;\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    @media(max-width: 700px){\r\n\r\n        .col-lg-8{\r\n\r\n            .kdx-carousel{\r\n\r\n                .kdx-carousel-card{\r\n                    height:fit-content;\r\n                    position:relative;\r\n                    left:0;\r\n                    top:auto;\r\n                    padding: 40px 25px 20px 20px;\r\n\r\n                    .tail svg {\r\n                        width: 30%;\r\n                        height: unset;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\r\nimport { guid, _BREAKPOINTS_ } from 'utils';\r\nimport Glide from '@glidejs/glide';\r\n\r\n@Component({\r\n  tag: 'kdx-carousel',\r\n  styleUrl: 'kdx-carousel.scss',\r\n  shadow: false,\r\n})\r\nexport class StCarousel {\r\n\r\n  @Element() root: HTMLElement;\r\n\r\n  /**\r\n  * Display flag for showing the bullet navigation. Pass true to show.\r\n  */\r\n  @Prop() bulletNav: boolean;\r\n\r\n  /**\r\n   * If true, bullet nav will display below slides. Default will show bullet\r\n   * nav within slides area.\r\n   */\r\n  @Prop() displayBulletNavExternally: boolean;\r\n\r\n  /**\r\n   * Amount of items to display per slide. Default will show 1 item per slide.\r\n   */\r\n  @Prop({\r\n    mutable: true,\r\n    reflect: true,\r\n  }) perSlide: string;\r\n\r\n  @Prop({\r\n    mutable: true,\r\n    reflect: true\r\n  }) perSlideTablet: string;\r\n\r\n  @Prop({\r\n    mutable: true,\r\n    reflect: true\r\n  }) perSlideMobile: string;\r\n\r\n  /**\r\n   * shows some of next card\r\n   */\r\n  @Prop() peek: number = 0; // use to add peek anytime\r\n  @Prop() peekTablet: number = 0; // show peek on tablet\r\n  @Prop() peekMobile: number = 0; // show peek on mobile\r\n\r\n  /**\r\n   * On multi item slides, set focus to middle item.\r\n   */\r\n  @Prop() centerFocus: boolean;\r\n\r\n  /**\r\n   * If set, slides will autoplay and a play/pause button will appear.\r\n   */\r\n  @Prop() autoPlay: boolean;\r\n\r\n  /**\r\n   * Override the default duration for slide times while on autoplay.\r\n   */\r\n  @Prop() autoPlayDuration: string = \"8000\";\r\n\r\n  /**\r\n   * The type of carousel\r\n   */\r\n  @Prop() carouselType: 'slider' | 'carousel' = 'carousel';\r\n\r\n  /**\r\n   * Allows looping the slider type. Slider will rewind to the first/last slide when it's at the start/end.\r\n   */\r\n  @Prop() rewind: boolean = false;\r\n  \r\n  /**\r\n   * Stop running perView number of slides from the end. Use this option if you don't want to have an empty space after a slider.\r\n   */\r\n  @Prop() bound: boolean = true;\r\n\r\n  /**\r\n   * Disables swipe interface is true\r\n   */\r\n  @Prop() disableSwipe: boolean = false;\r\n\r\n  /**\r\n   * Allows arrows to be disabled to stop infinite loop OR rewind\r\n   */\r\n  @Prop() disableArrows: boolean = true;\r\n  \r\n  /**\r\n   * Controls paused/autoplay state of carousel.\r\n   */\r\n  @State() paused: boolean = false;\r\n\r\n  /**\r\n   * Show/Hide controls based on slide count & breakpoints\r\n   */\r\n  @State() hideControls = false;\r\n\r\n  /**\r\n   * Event for tracking the current slide\r\n   */\r\n  @Event() activeSlideUpdated: EventEmitter<{slide: number; carouselId: string;}>;\r\n  /**\r\n   * Check to see if the active slide has been updated\r\n   * \r\n   * @param event - detail contains the current index and the carousel id\r\n   */\r\n  @Listen('activeSlideUpdated', {target: 'document'})\r\n  activeSlideUpdatedHandler(event: CustomEvent<{slide: number, carouselId: string}>) {\r\n    if(this.id == event.detail.carouselId && this.carousel.index != event.detail.slide) {\r\n      this.carousel.go(`=${event.detail.slide}`);\r\n    }\r\n  }\r\n\r\n  private id: string = 'hero-carousel-' + guid();\r\n  private initialRenderComplete = false;\r\n  private carousel: any = null;\r\n\r\n  componentWillLoad() {\r\n    this.root.querySelector('.kdx-slides').setAttribute('id', this.id + '-slides');\r\n\r\n    this.viewControl();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.viewControl();\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (!this.initialRenderComplete) {\r\n      this.setUp();\r\n      \r\n    this.removePseudoElements();\r\n    }\r\n  }\r\n\r\n    //Init check whether or not controls should be shown\r\n    viewControl() {\r\n      const slides = this.root.querySelector('.glide__slides').children;\r\n      let shouldHideControls = false;\r\n\r\n      const adCarousel = this.root.closest('.recent-win-carousel') !== null;\r\n    \r\n      if(!adCarousel) {\r\n\r\n        if (window.innerWidth > 1140) {\r\n          shouldHideControls = slides.length <= 5;\r\n        } else if (window.innerWidth >= 960 && window.innerWidth <= 1140) {\r\n          shouldHideControls = slides.length <= Math.max(parseInt(this.perSlideMobile, 10), 3);\r\n        } else {\r\n          shouldHideControls = slides.length <= Math.max(parseInt(this.perSlideMobile, 10), 2);\r\n        }\r\n      \r\n        if (shouldHideControls !== this.hideControls) {\r\n          this.hideControls = shouldHideControls;\r\n        }\r\n        \r\n      }\r\n    }                                                                                                                                          \r\n\r\n  private setUp() {\r\n    if (document.querySelector('.is-editing')) {\r\n      return;\r\n    }\r\n\r\n    const instance = document.getElementById(this.id);\r\n    const bulletsWrapper = instance.querySelector('.glide__bullets');\r\n    const slides = instance.querySelector('.glide__slides').children;\r\n\r\n    if (bulletsWrapper) {\r\n      for (let i = 0; i < slides.length; i++) {\r\n        bulletsWrapper.innerHTML += `\r\n        <button class=\"glide__bullet\" data-glide-dir=\"=${i}\" aria-label=\"Go to slide ${i + 1}\" aria-controls=${this.id + '-slides'}></button>`;\r\n      }\r\n    }\r\n\r\n    if (this.perSlide) {\r\n      this.carousel = new Glide(`#${this.id}`, {\r\n        type: this.carouselType,\r\n        perView: parseInt(this.perSlide, 10),\r\n        focusAt: this.centerFocus ? 'center' : '0',\r\n        autoplay: this.autoPlay ? parseInt(this.autoPlayDuration, 10) : null,\r\n        hoverpause: false,\r\n        swipeThreshold: this.disableSwipe ? false : 80,\r\n        dragThreshold: this.disableSwipe ? false : 120,\r\n        bound: this.bound,\r\n        rewind: this.rewind,\r\n        peek: this.hideControls ? 0 : this.peek,\r\n        gap: 16,\r\n        breakpoints: {\r\n          // ENABLE IF USING 4-UP\r\n          // 1400: {\r\n          //   perView: 3\r\n          // },\r\n          1160: {\r\n            perView: this.perSlideTablet ? parseInt(this.perSlideTablet, 10) : 2,\r\n            peek: this.hideControls ? 0 : this.peekTablet,\r\n            \r\n          },\r\n          768: {\r\n            perView: 2,\r\n            peek: this.hideControls ? 0 : this.peekMobile,\r\n          }\r\n\r\n          \r\n        }\r\n      }).mount();\r\n    } else {\r\n      this.carousel = new Glide(`#${this.id}`, {\r\n        autoplay: this.autoPlay ? parseInt(this.autoPlayDuration, 10) : null,\r\n        hoverpause: false\r\n      }).mount();\r\n    }\r\n\r\n    this.carousel.on('run', () => {\r\n        this.carousel.index;\r\n        this.activeSlideUpdated.emit({slide: this.carousel.index, carouselId: this.id});\r\n    });    \r\n\r\n    /**\r\n     * Handles enabling / disabling the\r\n     * Buttons for this particular slider.\r\n     *\r\n     */\r\n    if (this.disableArrows === true) {\r\n      this.carousel.on('run.after', () => {\r\n        if(!instance.classList.contains('infinite-carousel')) {\r\n          if (this.carousel.index < slides.length - this.carousel.settings.perView || this.carousel.index > 0) {\r\n              instance.querySelector('button:first-child').removeAttribute('disabled');\r\n              instance.querySelector('button:last-child').removeAttribute('disabled');\r\n\r\n              if (this.carousel.index === slides.length - this.carousel.settings.perView) {\r\n                  instance.querySelector('button:last-child').setAttribute('disabled', 'true');\r\n              }\r\n\r\n              if (this.carousel.index === 0) {\r\n                  instance.querySelector('button:first-child').setAttribute('disabled', 'true');\r\n              }\r\n          }\r\n        }\r\n      });\r\n    }\r\n\r\n    {\r\n      const observer = new ResizeObserver(([slides, track]) => {\r\n        if(!slides || !track) {\r\n          return;\r\n        }\r\n        if (this.hideControls) {\r\n          this.carousel.update({ startAt: 0 });\r\n          this.carousel.disable();\r\n        }\r\n        else {\r\n          this.carousel.enable();\r\n        }\r\n      });\r\n      const slides = this.root.querySelector('.glide__slides');\r\n      const track = slides.parentElement;\r\n      observer.observe(slides);\r\n      observer.observe(track);\r\n    }\r\n\r\n    /**\r\n     * On resize, ensures that the slider / \r\n     * carousel does not end up in a state \r\n     * where there is whitespace to the right\r\n     * side of the last element\r\n     * \r\n     * This assumes that the slider will break\r\n     * @ the following resolutions --\r\n     * \r\n     * > _BREAKPOINTS_.xl => 4up\r\n     * > _BREAKPOINTS_.lg => 3up\r\n     * > _BREAKPOINTS_.md => 2up\r\n     * < _BREAKPOINTS_.sm => 1up\r\n     */\r\n    window.addEventListener('resize', () => {\r\n      if (this.carousel.settings.perView !== parseInt(this.perSlide, 10)) {\r\n        if (this.carousel.settings.perView > parseInt(this.perSlide, 10)) {\r\n          if (window.innerWidth < _BREAKPOINTS_.md) {\r\n            if (this.carousel.index === slides.length - 1) {\r\n              this.carousel.go(`=${this.carousel.index - 1}`);\r\n              instance.querySelector('button:last-child').setAttribute('disabled', 'true');\r\n            }\r\n          } else if (window.innerWidth < _BREAKPOINTS_.lg) {\r\n            if (this.carousel.index === slides.length - 2) {\r\n              this.carousel.go(`=${this.carousel.index - 1}`);\r\n              instance.querySelector('button:last-child').setAttribute('disabled', 'true');\r\n            }\r\n            if (this.carousel.index === slides.length - 3) {\r\n              instance.querySelector('button:last-child').setAttribute('disabled', 'true');\r\n            }\r\n          }\r\n        } else if (this.carousel.settings.perView < parseInt(this.perSlide, 10)) {\r\n          if (window.innerWidth > _BREAKPOINTS_.md) {\r\n            if (this.carousel.index === slides.length - 3) {\r\n              this.carousel.go(`=${this.carousel.index + 1}`);\r\n            }\r\n          } else if (window.innerWidth > _BREAKPOINTS_.sm) {\r\n            if (this.carousel.index === slides.length - 2) {\r\n              this.carousel.go(`=${this.carousel.index + 1}`);\r\n            }\r\n          }\r\n        }\r\n\r\n        this.perSlide = this.carousel.settings.perView;\r\n      }\r\n    });\r\n\r\n    this.initialRenderComplete = true;\r\n  }\r\n\r\n  private togglePause(e) {\r\n    e.preventDefault();\r\n    this.paused = !this.paused;\r\n\r\n    if (this.paused) {\r\n      this.carousel.pause();\r\n    } else {\r\n      this.carousel.play();\r\n    }\r\n  }\r\n\r\n  removePseudoElements() {\r\n    const categoryCarousels = document.querySelectorAll('.kdx-category-selector');\r\n  \r\n    categoryCarousels.forEach(categoryCarousel => {\r\n      const carouselControls = categoryCarousel.querySelector('.controls');\r\n  \r\n      if (carouselControls && carouselControls.hasAttribute('hidden')) {\r\n        categoryCarousel.classList.add('hide-pseudo-elements');\r\n      } else {\r\n        categoryCarousel.classList.remove('hide-pseudo-elements');\r\n      }\r\n    });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div id={this.id} class=\"glide kdx-carousel\">\r\n        <div class=\"kdx-carousel-inner\">\r\n          <div class=\"glide__track\" data-glide-el=\"track\">\r\n            <slot />\r\n          </div>\r\n\r\n          <div data-glide-el=\"controls\" class=\"controls\" hidden={this.hideControls}>\r\n            <button data-glide-dir=\"<\" aria-label=\"Previous Slide\" aria-controls={this.id + '-slides'}>\r\n              <span class=\"icon-desktop d-none d-xl-block\">\r\n                <kdx-icon icon=\"chevron-left\" />\r\n              </span>\r\n              <span class=\"icon-mobile d-block d-xl-none\">\r\n                <kdx-icon icon=\"chevron-left\" />\r\n              </span>\r\n            </button>\r\n            <button data-glide-dir=\">\" aria-label=\"Next Slide\" aria-controls={this.id + '-slides'}>\r\n              <span class=\"icon-desktop d-none d-xl-block\">\r\n                <kdx-icon icon=\"chevron-right\" />\r\n              </span>\r\n              <span class=\"icon-mobile d-block d-xl-none\">\r\n                <kdx-icon icon=\"chevron-right\" />\r\n              </span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        {this.bulletNav && (\r\n          <div hidden={this.hideControls} class={`bullets-wrapper ${this.displayBulletNavExternally ? 'external' : 'internal'}`}>\r\n            <div data-glide-el=\"controls\" class=\"controls bullet-Arrow\">\r\n                      <button data-glide-dir=\"<\" aria-label=\"Previous Slide\" aria-controls={this.id + '-slides'}>\r\n                        <span class=\"d-xl-block\">\r\n                          <kdx-icon icon=\"chevron-left\" />\r\n                        </span>\r\n                      </button>\r\n                      <div class=\"glide__bullets\" data-glide-el=\"controls[nav]\"></div>\r\n                      <button data-glide-dir=\">\" aria-label=\"Next Slide\" aria-controls={this.id + '-slides'}>\r\n                        <span class=\"d-xl-block\">\r\n                          <kdx-icon icon=\"chevron-right\" />\r\n                        </span>\r\n                      </button>\r\n                </div>\r\n            {this.autoPlay && (\r\n              <button\r\n                class=\"pause-action\"\r\n                aria-label={this.paused ? 'Play' : 'Pause'}\r\n                aria-controls={this.id + '-slides'}\r\n                title=\"Play/Pause\"\r\n                onClick={(e) => { this.togglePause(e) }}>\r\n                {this.paused && <kdx-icon icon=\"play\" />}\r\n                {!this.paused && <kdx-icon icon=\"pause\" />}\r\n              </button>\r\n            )}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n\r\n}\r\n"],"mappings":"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"}