@dubai-design-system/components-js 3.12.8 → 3.12.10

package/www/build/p-dc443758.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as a,H as i,g as t}from"./p-1b339a0a.js";const d=".dda-home-banner{width:100%;height:calc(100vh);background-color:black;position:relative;overflow:hidden;display:block}.dda-home-banner .dda-home-slides .dda-home-banner-slide::before{content:'';width:100%;height:80%;position:absolute;bottom:0;background:rgb(0, 0, 0);background:linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);z-index:1}.dda-home-slides{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;}.dda-home-banner .dda-home-slides img,.dda-home-banner .dda-home-slides video{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}.dda-home-banner .dda-home-slides .dda-home-banner-slide{position:relative;width:100vw;height:100vh}.dda-home-banner .dda-home-slides .dda-home-banner-slide{position:absolute;top:0;left:0;width:100%;opacity:0;pointer-events:none;z-index:0;box-sizing:border-box}.dda-home-banner .dda-home-slides .dda-home-banner-slide.active{opacity:1;pointer-events:auto;z-index:1}.dda-home-banner-slider-nav{width:100%;text-align:center;position:absolute;bottom:279px;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;height:30px;z-index:3}.dda-home-banner-slider-nav .dda-home-banner-slider-nav-content{width:100%;text-align:center;display:flex;justify-content:center;align-items:center;gap:15px}.dda-home-banner-slider-nav .dda-home-banner-prev,.dda-home-banner-slider-nav .dda-home-banner-next,.dda-home-banner-slider-nav .dda-home-banner-Pause{height:28px;width:28px;padding:0;margin:0;border:0;background:none;display:flex;align-items:center;justify-content:center;color:#ffffff;background:rgba(0, 0, 0, 0);border-radius:50%;font-size:25px;}.dda-home-banner-slider-nav .dda-home-banner-prev:hover,.dda-home-banner-slider-nav .dda-home-banner-next:hover{background:rgba(0, 0, 0, 0.15)}.dda-home-banner-slider-nav .dda-home-banner-Pause span{width:28px;height:28px;display:flex;align-items:center;justify-content:center;position:relative}.dda-home-banner-slider-nav .dda-home-banner-Pause span svg.main-circle{width:30px;height:30px}.dda-home-banner-slider-nav .dda-home-banner-Pause span svg.nav-play-icon{width:10px;height:10px;position:absolute;top:9px;left:9px}.dda-home-banner-slider-nav .dda-home-banner-Pause span svg.nav-pause-icon{width:9px;height:9px;position:absolute;top:9px;left:9px}.dda-home-banner-slider-nav ul{display:flex;align-items:center;gap:15px}.dda-home-banner-slider-nav .dots{display:block;width:10px;height:10px;background:rgba(256,256,256,0.2);overflow:hidden;text-indent:-100px;margin:0;padding:0;border:0px;border-radius:20px;cursor:pointer;}.dda-home-banner-slider-nav .dots.active{background:rgba(256,256,256,0.85)}[dir=\"rtl\"] .dda-home-banner-slider-nav .dda-home-banner-next i.material-icons{transform:rotate(180deg)}[dir=\"rtl\"] .dda-home-banner-slider-nav .dda-home-banner-prev i.material-icons{transform:rotate(-180deg)}.dda-home-banner .dda-slide-contant-wrap{position:relative;width:100vw;height:100vh;display:flex;align-items:center}.dda-home-banner .dda-slide-contant{width:90vw;margin:0 auto;padding:0 20px;position:relative;z-index:1}.dda-home-banner .dda-slide-contant h2{font-size:var(--dda-fs-display-sm);color:#fff;font-weight:var(--dda-fw-700)}.dda-home-banner .dda-slide-contant p{font-size:var(--dda-fs-headline-sm);color:#fff;font-weight:var(--dda-fw-300)}.material-symbols-outlined{font-variation-settings:'FILL' 1,\r\n  'wght' 400,\r\n  'GRAD' 0,\r\n  'opsz' 24}@media (max-width: 1024px){.dda-home-banner{height:calc(100vh)}.dda-home-banner .dda-slide-contant{width:100vw}.dda-home-banner-slider-nav{bottom:300px}.dda-mouse-scroll,.dda-home-banner-prev,.dda-home-banner-Pause,.dda-home-banner-next{display:none !important}.dda-home-banner .dda-slide-contant-wrap{display:inherit;height:auto;position:absolute;bottom:350px}}@media (prefers-reduced-motion: no-preference){.dda-home-slides{transition:all 0.7s ease-in-out}.dda-home-banner .dda-home-slides .dda-home-banner-slide{transition:opacity 1s ease-in-out}.dda-home-banner-slider-nav .dda-home-banner-prev,.dda-home-banner-slider-nav .dda-home-banner-next,.dda-home-banner-slider-nav .dda-home-banner-Pause{transition:all 0.2s linear}.dda-home-banner-slider-nav .dots{transition:all 0.2s linear}.dda-slider-timer-circle{transition:stroke-dashoffset 3s linear}}";const n=d;const s=class{constructor(a){e(this,a);this.autoplay=true;this.interval=3e3;this.currentSlide=0;this.slides=[];this.autoPlayActive=true;this.pausedProgressOffset=0;this.animationFrameId=null}componentDidLoad(){this.updateSlides();const e=this.el.querySelector("slot");e===null||e===void 0?void 0:e.addEventListener("slotchange",(()=>this.updateSlides()));this.autoPlayActive=this.autoplay;this.playVideoInCurrentSlide();this.startAutoplay();this.animateProgress()}disconnectedCallback(){this.stopAutoplay();if(this.animationFrameId){cancelAnimationFrame(this.animationFrameId)}}componentDidRender(){this.slides.forEach(((e,a)=>{e.classList.toggle("active",a===this.currentSlide)}))}updateSlides(){this.slides=Array.from(this.el.querySelectorAll(".dda-home-banner-slide"));if(this.slides.length>0){this.currentSlide=0}}startAutoplay(){this.stopAutoplay();if(this.autoPlayActive){const e=this.slides[this.currentSlide];const a=e===null||e===void 0?void 0:e.querySelector("video");const i=e=>{this.autoPlayInterval=setInterval((()=>{this.nextSlide()}),e);this.animateProgress(1)};if(a){if(a.readyState>=1){i(a.duration*1e3)}else{a.addEventListener("loadedmetadata",(()=>{i(a.duration*1e3)}),{once:true})}}else{i(this.interval)}}}stopAutoplay(){if(this.autoPlayInterval){clearInterval(this.autoPlayInterval);this.autoPlayInterval=null}}toggleAutoplay(){var e;const a=this.el.querySelector(".circle-loader");const i=(e=this.slides[this.currentSlide])===null||e===void 0?void 0:e.querySelector("video");this.autoPlayActive=!this.autoPlayActive;if(this.autoPlayActive){this.startAutoplay();const e=this.pausedProgressOffset;const t=(a===null||a===void 0?void 0:a.getTotalLength())||1;const d=e/t;if(i)i.play();this.animateProgress(d)}else{this.stopAutoplay();if(this.animationFrameId){cancelAnimationFrame(this.animationFrameId);this.animationFrameId=null}if(a){const e=window.getComputedStyle(a);const i=parseFloat(e.strokeDashoffset||"0");this.pausedProgressOffset=i}if(i)i.pause()}}playVideoInCurrentSlide(){this.slides.forEach(((e,a)=>{const i=e.querySelector("video");if(i){if(a===this.currentSlide){i.currentTime=0;i.play()}else{i.pause()}}}))}nextSlide(){this.currentSlide=(this.currentSlide+1)%this.slides.length}prevSlide(){this.currentSlide=(this.currentSlide-1+this.slides.length)%this.slides.length}setSlide(e){this.currentSlide=e}onSlideChanged(){this.animateProgress();this.playVideoInCurrentSlide();this.startAutoplay()}animateProgress(e=1){const a=this.el.querySelector(".circle-loader");if(!a)return;const i=a.getTotalLength();const t=this.slides[this.currentSlide];const d=t===null||t===void 0?void 0:t.querySelector("video");const n=(d&&d.duration?d.duration*1e3:this.interval)*e;const s=performance.now();this.pausedProgressOffset=i*e;a.style.strokeDasharray=`${i}`;a.style.strokeDashoffset=`${this.pausedProgressOffset}`;a.style.transition="none";const o=t=>{const d=t-s;const r=Math.min(d/n,1);const l=i*(1-r)*e;a.style.strokeDashoffset=`${l}`;if(r<1){this.animationFrameId=requestAnimationFrame(o)}};if(this.animationFrameId){cancelAnimationFrame(this.animationFrameId)}this.animationFrameId=requestAnimationFrame(o)}resetProgress(){const e=this.el.querySelector(".circle-loader");if(e){const a=e.getTotalLength();e.style.transition="none";e.style.strokeDashoffset=`${a}`;this.pausedProgressOffset=a}}render(){return a(i,{key:"152f285c115db976af6273951bba7792da0bbdac"},a("div",{key:"a043ca9ef674a7a129b22886621485fe5673362d",class:"dda-home-banner",role:"region","aria-label":"Homepage banner with slides"},a("div",{key:"f45349ee43d4e3f55d5d6883665f4d32e1fbe0d5",class:"dda-home-slides",role:"list","aria-live":"polite","aria-atomic":"true"},a("slot",{key:"e6cba42b04cecf3f5f3b323410534e7a0a24b786"})),a("div",{key:"4e24c07cc9834bee0a8076b6edaf57a2c325fc63",class:"dda-home-banner-slider-nav"},a("div",{key:"425e2245e0ac4c6eb49bc628753b3a4c160eb5c2",class:"dda-home-banner-slider-nav-content"},a("button",{key:"8e854203bb03afadf680cdf36ce56a0c513a3d7f",type:"button",class:"dda-home-banner-prev",onClick:()=>this.prevSlide()},a("i",{key:"967ad0d1e27da31d5b06955b1e5e0667844b9805",class:"material-icons","aria-hidden":"true"},"chevron_left"),a("span",{key:"f0bb9af2662fc17803e0e8a27a244d8e42d83830",class:"visually-hidden"},"Previous slide")),a("button",{key:"0adedd930fe0a81e7bd4801cc40eafa5766332e4",type:"button",class:"dda-home-banner-Pause",onClick:()=>this.toggleAutoplay(),"aria-pressed":this.autoPlayActive?"true":"false","aria-label":this.autoPlayActive?"Pause slideshow autoplay":"Play slideshow autoplay"},a("span",{key:"f3fa7a8c7b886e38c41424be013b382c1f54458f"},a("svg",{key:"9022319f545076b429c9a7ef51c6f1e8c59a4efe",class:"main-circle",width:"25",height:"26",viewBox:"0 0 25 26",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},a("path",{key:"e33c7b9ba8284d37276e80763b23a090ba10d6fe",class:"circle-loader",d:"M8.61616 4.62474C9.35885 4.35949 10.4729 3.92017 12.146 3.92017C16.7619 3.92017 21.1489 7.55969 21.1489 12.9247C20.9849 18.8126 16.4271 21.9202 12.146 21.9202C7.78471 21.9202 3.16382 18.5036 3.16382 12.9601C3.16382 11.8748 3.2148 11.4931 3.48806 10.4602",stroke:"white","stroke-width":"2","stroke-linecap":"round"}),a("circle",{key:"c077c6f9706b9f055552b0fbc3234566664228a9",class:"dott",cx:"5.17456",cy:"6.92017",r:"1.44751",fill:"white"})),this.autoPlayActive?a("svg",{class:"nav-pause-icon",width:"7",height:"7",viewBox:"0 0 7 7",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},a("path",{d:"M0.482666 0.548584H2.48267V6.54858H0.482666V0.548584Z",fill:"white"}),a("path",{d:"M4.47974 0.548584H6.47974V6.54858H4.47974V0.548584Z",fill:"white"})):a("svg",{class:"nav-play-icon",width:"9",height:"9",viewBox:"0 0 9 9",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},a("path",{d:"M7.9682 3.68255C8.63487 4.06745 8.63487 5.0297 7.9682 5.4146L2.31372 8.67922C1.64705 9.06412 0.813721 8.58299 0.813721 7.81319L0.813721 1.28396C0.813721 0.51416 1.64705 0.0330374 2.31372 0.417938L7.9682 3.68255Z",fill:"white"})))),a("ul",{key:"d76f539d0fd5ee77e89314d95a61765bdc0d74fe","aria-label":"Select slide"},this.slides.map(((e,i)=>a("li",{key:i},a("button",{type:"button",class:this.currentSlide===i?"dots active":"dots",onClick:()=>this.setSlide(i),"aria-label":`Go to slide ${i+1}`,"aria-current":this.currentSlide===i?"true":"false"}))))),a("button",{key:"d69d67539f71382d08d6895fbd8b932f75913f9a",type:"button",class:"dda-home-banner-next",onClick:()=>this.nextSlide(),"aria-label":"Next slide"},a("i",{key:"556bf3c0d0e207ae0db015d327e636ae17389f92",class:"material-icons","aria-hidden":"true"},"chevron_right"),a("span",{key:"c01b0c0287f48d10dd02247f9f6d1197efb0fb72",class:"visually-hidden"},"Next slide"))),a("div",{key:"a511bbecbce9f0bd61a3c4c275134c9207dbe461",class:"dda-mouse-scroll"},a("dda-scroll-icon",{key:"20252228187fc9a9795b8703e51e1bea49c743dd",scroll_icon_size:"sm",scroll_icon_color:"white",custom_class:"",component_mode:"",class:"hydrated","aria-hidden":"true"})))))}get el(){return t(this)}static get watchers(){return{currentSlide:["onSlideChanged"]}}};s.style=n;export{s as dda_home_banner};
-//# sourceMappingURL=p-dc443758.entry.js.map

package/www/build/p-dc443758.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["homeBannerCss","DdaHomeBannerStyle0","DdaHomeBanner","constructor","hostRef","this","autoplay","interval","currentSlide","slides","autoPlayActive","pausedProgressOffset","animationFrameId","componentDidLoad","updateSlides","slot","el","querySelector","addEventListener","playVideoInCurrentSlide","startAutoplay","animateProgress","disconnectedCallback","stopAutoplay","cancelAnimationFrame","componentDidRender","forEach","slide","index","classList","toggle","Array","from","querySelectorAll","length","video","setupTimer","durationMs","autoPlayInterval","setInterval","nextSlide","readyState","duration","once","clearInterval","toggleAutoplay","circle","_a","offset","totalLength","getTotalLength","startRatio","play","style","window","getComputedStyle","strokeDashoffset","parseFloat","pause","currentTime","prevSlide","setSlide","onSlideChanged","start","performance","now","strokeDasharray","transition","animate","elapsed","progress","Math","min","newOffset","requestAnimationFrame","resetProgress","render","h","Host","key","class","role","type","onClick","width","height","viewBox","fill","xmlns","d","stroke","cx","cy","r","map","_","scroll_icon_size","scroll_icon_color","custom_class","component_mode"],"sources":["src/components/dda-home-banner/home-banner.css?tag=dda-home-banner","src/components/dda-home-banner/dda-home-banner.tsx"],"sourcesContent":[".dda-home-banner {\r\n  width: 100%;\r\n  height: calc(100vh);\r\n  background-color: black;\r\n  position: relative;\r\n  overflow: hidden;\r\n  display: block;\r\n}\r\n\r\n.dda-home-banner .dda-home-slides .dda-home-banner-slide::before {\r\n  content: '';\r\n  width: 100%;\r\n  height: 80%;\r\n  position: absolute;\r\n  bottom: 0;\r\n  background: rgb(0, 0, 0);\r\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\r\n  z-index: 1;\r\n}\r\n\r\n.dda-home-slides {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  /* transition: all 0.7s ease-in-out; */\r\n}\r\n\r\n.dda-home-banner .dda-home-slides img,\r\n.dda-home-banner .dda-home-slides video {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n}\r\n\r\n.dda-home-banner .dda-home-slides .dda-home-banner-slide {\r\n  position: relative;\r\n  width: 100vw;\r\n  height: 100vh;\r\n}\r\n\r\n.dda-home-banner .dda-home-slides .dda-home-banner-slide {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  opacity: 0;\r\n  /* transition: opacity 1s ease-in-out; */\r\n  pointer-events: none;\r\n  z-index: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.dda-home-banner .dda-home-slides .dda-home-banner-slide.active {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n  z-index: 1;\r\n}\r\n\r\n.dda-home-banner-slider-nav {\r\n  width: 100%;\r\n  text-align: center;\r\n  position: absolute;\r\n  bottom: 279px;\r\n  left: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 5px;\r\n  height: 30px;\r\n  z-index: 3;\r\n}\r\n\r\n.dda-home-banner-slider-nav .dda-home-banner-slider-nav-content{\r\n  width: 100%;\r\n  text-align: center;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 15px;\r\n}\r\n\r\n.dda-home-banner-slider-nav .dda-home-banner-prev,\r\n.dda-home-banner-slider-nav .dda-home-banner-next,\r\n.dda-home-banner-slider-nav .dda-home-banner-Pause {\r\n  height: 28px;\r\n  width: 28px;\r\n  padding: 0;\r\n  margin: 0;\r\n  border: 0;\r\n  background: none;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: #ffffff;\r\n  background: rgba(0, 0, 0, 0);\r\n  border-radius: 50%;\r\n  font-size: 25px;\r\n  /* transition: all 0.2s linear; */\r\n}\r\n.dda-home-banner-slider-nav .dda-home-banner-prev:hover,\r\n.dda-home-banner-slider-nav .dda-home-banner-next:hover {\r\n  background: rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.dda-home-banner-slider-nav .dda-home-banner-Pause span{\r\n  width: 28px;\r\n  height: 28px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n}\r\n.dda-home-banner-slider-nav .dda-home-banner-Pause span svg.main-circle{\r\n  width: 30px;\r\n  height: 30px;\r\n}\r\n.dda-home-banner-slider-nav .dda-home-banner-Pause span svg.nav-play-icon{\r\n  width: 10px;\r\n  height: 10px;\r\n  position: absolute;\r\n  top: 9px;\r\n  left: 9px;\r\n}\r\n.dda-home-banner-slider-nav .dda-home-banner-Pause span svg.nav-pause-icon{\r\n  width: 9px;\r\n  height: 9px;\r\n  position: absolute;\r\n  top: 9px;\r\n  left: 9px;\r\n}\r\n.dda-home-banner-slider-nav ul {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 15px;\r\n}\r\n\r\n.dda-home-banner-slider-nav .dots {\r\n  display: block;\r\n  width: 10px;\r\n  height: 10px;\r\n  background: rgba(256,256,256,0.2);\r\n  overflow: hidden;\r\n  text-indent: -100px;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0px;\r\n  border-radius: 20px;\r\n  cursor: pointer;\r\n  /* transition: all 0.2s linear; */\r\n}\r\n\r\n.dda-home-banner-slider-nav .dots.active {\r\n  background: rgba(256,256,256,0.85);\r\n}\r\n\r\n\r\n\r\n\r\n/* .dda-slider-timer-circle {\r\n  transition: stroke-dashoffset 3s linear;\r\n} */\r\n\r\n\r\n[dir=\"rtl\"] .dda-home-banner-slider-nav .dda-home-banner-next i.material-icons {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n[dir=\"rtl\"] .dda-home-banner-slider-nav .dda-home-banner-prev i.material-icons {\r\n  transform: rotate(-180deg);\r\n}\r\n\r\n\r\n\r\n\r\n/*Customizable slider content based on entity design*/\r\n.dda-home-banner .dda-slide-contant-wrap {\r\n  position: relative;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.dda-home-banner .dda-slide-contant {\r\n  width: 90vw;\r\n  margin: 0 auto;\r\n  padding: 0 20px;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n.dda-home-banner .dda-slide-contant h2 {\r\n  font-size: var(--dda-fs-display-sm);\r\n  color: #fff;\r\n  font-weight: var(--dda-fw-700);\r\n}\r\n\r\n.dda-home-banner .dda-slide-contant p {\r\n  font-size: var(--dda-fs-headline-sm);\r\n  color: #fff;\r\n  font-weight: var(--dda-fw-300);\r\n}\r\n\r\n\r\n\r\n.material-symbols-outlined {\r\n  font-variation-settings:\r\n  'FILL' 1,\r\n  'wght' 400,\r\n  'GRAD' 0,\r\n  'opsz' 24\r\n}\r\n\r\n\r\n@media screen and (max-width:992px) {\r\n  \r\n}\r\n@media (max-width: 1024px) {\r\n  .dda-home-banner {\r\n    height: calc(100vh);\r\n  }\r\n  .dda-home-banner .dda-slide-contant {\r\n        width: 100vw;\r\n    }\r\n  .dda-home-banner-slider-nav {\r\n    bottom: 300px;\r\n  }\r\n  .dda-mouse-scroll,\r\n  .dda-home-banner-prev,\r\n  .dda-home-banner-Pause,\r\n  .dda-home-banner-next{\r\n    display: none !important;\r\n  }\r\n  .dda-home-banner .dda-slide-contant-wrap{\r\n      display: inherit;\r\n      height: auto;\r\n      position: absolute;\r\n      bottom: 350px;\r\n    }\r\n    \r\n}\r\n\r\n\r\n@media (prefers-reduced-motion: no-preference) {\r\n  .dda-home-slides {\r\n    transition: all 0.7s ease-in-out;\r\n  }\r\n  .dda-home-banner .dda-home-slides .dda-home-banner-slide {\r\n    transition: opacity 1s ease-in-out;\r\n  }\r\n  .dda-home-banner-slider-nav .dda-home-banner-prev,\r\n  .dda-home-banner-slider-nav .dda-home-banner-next,\r\n  .dda-home-banner-slider-nav .dda-home-banner-Pause {\r\n    transition: all 0.2s linear;\r\n  }\r\n  .dda-home-banner-slider-nav .dots {\r\n    transition: all 0.2s linear;\r\n  }\r\n  .dda-slider-timer-circle {\r\n    transition: stroke-dashoffset 3s linear;\r\n  }\r\n\r\n}","import { Host, Component, h, State, Element, Prop, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-home-banner',\r\n  styleUrls: ['home-banner.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaHomeBanner {\r\n  @Element() el: HTMLElement;\r\n\r\n  /** Props */\r\n  @Prop() autoplay: boolean = true;\r\n  @Prop() interval: number = 3000;\r\n\r\n  /** States */\r\n  @State() currentSlide: number = 0;\r\n  @State() slides: HTMLElement[] = [];\r\n  @State() autoPlayActive: boolean = true;\r\n\r\n  private autoPlayInterval: any;\r\n  private pausedProgressOffset: number = 0;\r\n  private animationFrameId: number | null = null;\r\n\r\n  componentDidLoad() {\r\n    this.updateSlides();\r\n    const slot = this.el.querySelector('slot');\r\n    slot?.addEventListener('slotchange', () => this.updateSlides());\r\n\r\n    this.autoPlayActive = this.autoplay;\r\n    this.playVideoInCurrentSlide();\r\n    this.startAutoplay();\r\n    this.animateProgress(); // Initial animation\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopAutoplay();\r\n    if (this.animationFrameId) {\r\n      cancelAnimationFrame(this.animationFrameId);\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.slides.forEach((slide, index) => {\r\n      slide.classList.toggle('active', index === this.currentSlide);\r\n    });\r\n  }\r\n\r\n  updateSlides() {\r\n    this.slides = Array.from(this.el.querySelectorAll('.dda-home-banner-slide'));\r\n    if (this.slides.length > 0) {\r\n      this.currentSlide = 0;\r\n    }\r\n  }\r\n\r\n  startAutoplay() {\r\n    this.stopAutoplay();\r\n\r\n    if (this.autoPlayActive) {\r\n      const slide = this.slides[this.currentSlide];\r\n      const video = slide?.querySelector('video') as HTMLVideoElement;\r\n\r\n      const setupTimer = (durationMs: number) => {\r\n        this.autoPlayInterval = setInterval(() => {\r\n          this.nextSlide();\r\n        }, durationMs);\r\n        this.animateProgress(1); // animate full ring\r\n      };\r\n\r\n      if (video) {\r\n        if (video.readyState >= 1) {\r\n          setupTimer(video.duration * 1000);\r\n        } else {\r\n          video.addEventListener('loadedmetadata', () => {\r\n            setupTimer(video.duration * 1000);\r\n          }, { once: true });\r\n        }\r\n      } else {\r\n        setupTimer(this.interval);\r\n      }\r\n    }\r\n  }\r\n\r\n  stopAutoplay() {\r\n    if (this.autoPlayInterval) {\r\n      clearInterval(this.autoPlayInterval);\r\n      this.autoPlayInterval = null;\r\n    }\r\n  }\r\n\r\n  toggleAutoplay() {\r\n    const circle = this.el.querySelector('.circle-loader') as SVGPathElement;\r\n    const video = this.slides[this.currentSlide]?.querySelector('video') as HTMLVideoElement;\r\n\r\n    this.autoPlayActive = !this.autoPlayActive;\r\n\r\n    if (this.autoPlayActive) {\r\n      this.startAutoplay();\r\n\r\n      const offset = this.pausedProgressOffset;\r\n      const totalLength = circle?.getTotalLength() || 1;\r\n      const startRatio = offset / totalLength;\r\n\r\n      if (video) video.play();\r\n      this.animateProgress(startRatio);\r\n    } else {\r\n      this.stopAutoplay();\r\n\r\n      if (this.animationFrameId) {\r\n        cancelAnimationFrame(this.animationFrameId);\r\n        this.animationFrameId = null;\r\n      }\r\n\r\n      if (circle) {\r\n        const style = window.getComputedStyle(circle);\r\n        const strokeDashoffset = parseFloat(style.strokeDashoffset || '0');\r\n        this.pausedProgressOffset = strokeDashoffset;\r\n      }\r\n\r\n      if (video) video.pause();\r\n    }\r\n  }\r\n\r\n  playVideoInCurrentSlide() {\r\n    this.slides.forEach((slide, index) => {\r\n      const video = slide.querySelector('video') as HTMLVideoElement;\r\n      if (video) {\r\n        if (index === this.currentSlide) {\r\n          video.currentTime = 0;\r\n          video.play();\r\n        } else {\r\n          video.pause();\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  nextSlide() {\r\n    this.currentSlide = (this.currentSlide + 1) % this.slides.length;\r\n  }\r\n\r\n  prevSlide() {\r\n    this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length;\r\n  }\r\n\r\n  setSlide(index: number) {\r\n    this.currentSlide = index;\r\n  }\r\n\r\n  @Watch('currentSlide')\r\n  onSlideChanged() {\r\n    this.animateProgress();\r\n    this.playVideoInCurrentSlide();\r\n    this.startAutoplay(); // restart with correct duration\r\n  }\r\n\r\n  animateProgress(startRatio = 1) {\r\n    const circle = this.el.querySelector('.circle-loader') as SVGPathElement;\r\n    if (!circle) return;\r\n\r\n    const length = circle.getTotalLength();\r\n    const slide = this.slides[this.currentSlide];\r\n    const video = slide?.querySelector('video') as HTMLVideoElement;\r\n    const duration = (video && video.duration ? video.duration * 1000 : this.interval) * startRatio;\r\n    const start = performance.now();\r\n    this.pausedProgressOffset = length * startRatio;\r\n\r\n    circle.style.strokeDasharray = `${length}`;\r\n    circle.style.strokeDashoffset = `${this.pausedProgressOffset}`;\r\n    circle.style.transition = 'none';\r\n\r\n    const animate = (now: number) => {\r\n      const elapsed = now - start;\r\n      const progress = Math.min(elapsed / duration, 1);\r\n      const newOffset = length * (1 - progress) * startRatio;\r\n      circle.style.strokeDashoffset = `${newOffset}`;\r\n\r\n      if (progress < 1) {\r\n        this.animationFrameId = requestAnimationFrame(animate);\r\n      }\r\n    };\r\n\r\n    if (this.animationFrameId) {\r\n      cancelAnimationFrame(this.animationFrameId);\r\n    }\r\n    this.animationFrameId = requestAnimationFrame(animate);\r\n  }\r\n\r\n  resetProgress() {\r\n    const circle = this.el.querySelector('.circle-loader') as SVGPathElement;\r\n    if (circle) {\r\n      const length = circle.getTotalLength();\r\n      circle.style.transition = 'none';\r\n      circle.style.strokeDashoffset = `${length}`;\r\n      this.pausedProgressOffset = length;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"dda-home-banner\" role=\"region\" aria-label=\"Homepage banner with slides\">\r\n          <div class=\"dda-home-slides\" role=\"list\" aria-live=\"polite\" aria-atomic=\"true\">\r\n            <slot></slot>\r\n          </div>\r\n\r\n          <div class=\"dda-home-banner-slider-nav\">\r\n            <div class=\"dda-home-banner-slider-nav-content\">\r\n              <button type=\"button\" class=\"dda-home-banner-prev\" onClick={() => this.prevSlide()}>\r\n                <i class=\"material-icons\" aria-hidden=\"true\">chevron_left</i>\r\n                <span class=\"visually-hidden\">Previous slide</span>\r\n              </button>\r\n\r\n              <button \r\n                type=\"button\" \r\n                class=\"dda-home-banner-Pause\" \r\n                onClick={() => this.toggleAutoplay()}\r\n                aria-pressed={this.autoPlayActive ? 'true' : 'false'}\r\n                aria-label={this.autoPlayActive ? 'Pause slideshow autoplay' : 'Play slideshow autoplay'}\r\n                >\r\n                <span>\r\n                  <svg class=\"main-circle\" width=\"25\" height=\"26\" viewBox=\"0 0 25 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\r\n                    <path class=\"circle-loader\" d=\"M8.61616 4.62474C9.35885 4.35949 10.4729 3.92017 12.146 3.92017C16.7619 3.92017 21.1489 7.55969 21.1489 12.9247C20.9849 18.8126 16.4271 21.9202 12.146 21.9202C7.78471 21.9202 3.16382 18.5036 3.16382 12.9601C3.16382 11.8748 3.2148 11.4931 3.48806 10.4602\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n                    <circle class=\"dott\" cx=\"5.17456\" cy=\"6.92017\" r=\"1.44751\" fill=\"white\" />\r\n                  </svg>\r\n                  {this.autoPlayActive ? (\r\n                    <svg class=\"nav-pause-icon\" width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\r\n                      <path d=\"M0.482666 0.548584H2.48267V6.54858H0.482666V0.548584Z\" fill=\"white\"/>\r\n                      <path d=\"M4.47974 0.548584H6.47974V6.54858H4.47974V0.548584Z\" fill=\"white\"/>\r\n                    </svg>\r\n                  ) : (\r\n                    <svg class=\"nav-play-icon\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\r\n                      <path d=\"M7.9682 3.68255C8.63487 4.06745 8.63487 5.0297 7.9682 5.4146L2.31372 8.67922C1.64705 9.06412 0.813721 8.58299 0.813721 7.81319L0.813721 1.28396C0.813721 0.51416 1.64705 0.0330374 2.31372 0.417938L7.9682 3.68255Z\" fill=\"white\"/>\r\n                    </svg>\r\n                  )}\r\n                </span>\r\n              </button>\r\n\r\n              <ul aria-label=\"Select slide\">\r\n                {this.slides.map((_, index) => (\r\n                  <li key={index}>\r\n                    <button\r\n                      type=\"button\"\r\n                      class={this.currentSlide === index ? 'dots active' : 'dots'}\r\n                      onClick={() => this.setSlide(index)}\r\n                      aria-label={`Go to slide ${index + 1}`}\r\n                      aria-current={this.currentSlide === index ? 'true' : 'false'}\r\n                      \r\n                    ></button>\r\n                  </li>\r\n                ))}\r\n              </ul>\r\n\r\n              <button type=\"button\" class=\"dda-home-banner-next\" onClick={() => this.nextSlide()} aria-label=\"Next slide\">\r\n                <i class=\"material-icons\" aria-hidden=\"true\">chevron_right</i>\r\n                <span class=\"visually-hidden\">Next slide</span>\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"dda-mouse-scroll\">\r\n              <dda-scroll-icon\r\n                scroll_icon_size=\"sm\"\r\n                scroll_icon_color=\"white\"\r\n                custom_class=\"\"\r\n                component_mode=\"\"\r\n                class=\"hydrated\"\r\n                aria-hidden=\"true\"\r\n              ></dda-scroll-icon>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}