@dubai-design-system/components-js 3.12.9 → 3.12.11

package/dist/collection/components/dda-slider/dda-slider.css

@@ -1,156 +0,0 @@
-.dda-slider-container {
-  position: relative;
-  width: 100%;
-  background-color: #fff;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  border-radius: 8px;
-}
-
-.dda-slider {
-  position: relative;
-  width: 100%;
-  height: 450px;
-}
-
-.dda-slide {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  /* transition: opacity 0.5s ease-in-out; */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.dda-slide.active {
-  opacity: 1;
-  z-index: 1;
-}
-
-.dda-slide img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.dda-slide video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.dda-video-play-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  z-index: 5;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-
-.dda-video-play-overlay svg {
-  width: 64px;
-  height: 64px;
-  /* transition: transform 0.3s ease; */
-}
-
-.dda-video-play-overlay:hover svg {
-  transform: scale(1.2);
-}
-
-.dda-slider-controls-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  padding: 15px;
-}
-
-.dda-slider-prev, .dda-slider-next {
-  background-color: rgba(255, 255, 255, 0.2);
-  color: black;
-  padding: 10px 15px;
-  cursor: pointer;
-  font-size: 18px;
-  border: none;
-  border-radius: 5px;
-  /* transition: background-color 0.3s; */
-  z-index: 2;
-}
-
-.dda-slider-prev:hover, .dda-slider-next:hover {
-  background-color: rgba(255, 255, 255, 0.4);
-}
-
-.dda-slider-indicator-container {
-  display: flex;
-  justify-content: center;
-}
-
-.dda-slider-indicator {
-  width: 24px;
-  height: 24px;
-  margin: 0 5px;
-  cursor: pointer;
-  /* transition: all 0.3s; */
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.dda-slider-indicator svg {
-  width: 24px;
-  height: 24px;
-  display: block;
-}
-
-.dda-slider-timer-circle {
-  stroke-dasharray: 63;
-  stroke-dashoffset: 63;
-  /* transition: none; */
-}
-
-.dda-slider-play-icon, .dda-slider-pause-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 12px;
-  height: 12px;
-}
-
-.dda-slider-play-pause-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  z-index: 2;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .dda-slide {
-    transition: opacity 0.5s ease-in-out;
-  }
-  .dda-video-play-overlay svg {
-  transition: transform 0.3s ease;
-  }
-  .dda-slider-prev, .dda-slider-next {
-    transition: background-color 0.3s;
-  }
-  .dda-slider-indicator {
-    transition: all 0.3s;
-  }
-  .dda-slider-timer-circle {
-    transition: none;
-  }
-}

package/dist/collection/components/dda-slider/dda-slider.js

@@ -1,332 +0,0 @@
-import { h } from "@stencil/core";
-export class DDASlider {
-    constructor() {
-        this.slides = [];
-        this.interval = 5000;
-        this.autoplay = true;
-        this.currentSlide = 0;
-        this.isPaused = false;
-        this.videoElements = [];
-        this.playIcon = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="play-icon">
-    <polygon points="10,8 16,12 10,16" fill="white" stroke="white" stroke-width="1"/>
-  </svg>`;
-        this.pauseIcon = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="pause-icon">
-    <rect x="9" y="8" width="2" height="8" fill="white" stroke="white" stroke-width="0"/>
-    <rect x="13" y="8" width="2" height="8" fill="white" stroke="white" stroke-width="0"/>
-  </svg>`;
-        this.svgIndicators = {
-            inactive: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12" cy="12" r="10" fill="#ccc" stroke="#ccc" stroke-width="2"/>
-    </svg>`,
-            active: (isPaused, isVideo) => `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12" cy="12" r="10" fill="#ccc" stroke="#ccc" stroke-width="4"/>
-      ${!isVideo ? `<circle cx="12" cy="12" r="10" class="dda-slider-timer-circle" fill="none" stroke="white" stroke-width="2" 
-              stroke-dasharray="63" stroke-dashoffset="63" transform="rotate(-90 12 12)"/>` : ''}
-      ${isPaused ? this.playIcon : this.pauseIcon}
-    </svg>`
-        };
-        this.prevSlide = () => {
-            this.goToSlide(this.currentSlide - 1);
-        };
-        this.nextSlide = () => {
-            this.goToSlide(this.currentSlide + 1);
-        };
-        this.handleIndicatorClick = (index) => {
-            this.goToSlide(index);
-        };
-        this.togglePlayPause = (event) => {
-            var _a;
-            event.stopPropagation();
-            this.isPaused = !this.isPaused;
-            const currentSlideType = (_a = this.slides[this.currentSlide]) === null || _a === void 0 ? void 0 : _a.type;
-            if (currentSlideType === 'video') {
-                const currentVideo = this.videoElements[this.currentSlide];
-                if (currentVideo) {
-                    if (this.isPaused) {
-                        currentVideo.pause();
-                    }
-                    else {
-                        const playPromise = currentVideo.play();
-                        if (playPromise !== undefined) {
-                            playPromise.catch(error => {
-                                console.error('Error toggling video play:', error);
-                                this.isPaused = true;
-                                this.createPlayButtonOverlay(currentVideo);
-                            });
-                        }
-                    }
-                }
-            }
-            if (this.isPaused) {
-                this.resetTimer();
-                const activeIndicator = this.el.shadowRoot.querySelector('.dda-slider-indicator.active');
-                if (activeIndicator) {
-                    const svgContainer = activeIndicator.querySelector('div');
-                    if (svgContainer) {
-                        svgContainer.innerHTML = this.svgIndicators.active(this.isPaused, currentSlideType === 'video');
-                    }
-                }
-            }
-            else {
-                const activeIndicator = this.el.shadowRoot.querySelector('.dda-slider-indicator.active');
-                if (activeIndicator) {
-                    const svgContainer = activeIndicator.querySelector('div');
-                    if (svgContainer) {
-                        svgContainer.innerHTML = this.svgIndicators.active(this.isPaused, currentSlideType === 'video');
-                    }
-                }
-                if (currentSlideType === 'image') {
-                    this.startTimer();
-                }
-            }
-        };
-    }
-    componentDidLoad() {
-        setTimeout(() => {
-            var _a;
-            this.slides.forEach((slide, index) => {
-                if (slide.type === 'video') {
-                    const videoEl = this.el.shadowRoot.querySelector(`.dda-slide[data-index="${index}"] video`);
-                    if (videoEl) {
-                        this.videoElements[index] = videoEl;
-                        videoEl.addEventListener('ended', () => {
-                            if (this.currentSlide === index) {
-                                this.nextSlide();
-                            }
-                        });
-                    }
-                }
-            });
-            if (((_a = this.slides[this.currentSlide]) === null || _a === void 0 ? void 0 : _a.type) === 'video') {
-                const currentVideo = this.videoElements[this.currentSlide];
-                if (currentVideo && !this.isPaused) {
-                    currentVideo.play()
-                        .catch(error => console.warn('Initial video play failed, may need user interaction:', error));
-                }
-            }
-            if (this.autoplay && !this.isPaused) {
-                this.startTimer();
-            }
-        }, 100);
-    }
-    disconnectedCallback() {
-        this.resetTimer();
-        this.videoElements.forEach(video => {
-            if (video) {
-                video.removeEventListener('ended', this.nextSlide);
-            }
-        });
-    }
-    watchCurrentSlide() {
-        var _a;
-        this.handleVideoPlayback();
-        const currentSlideType = ((_a = this.slides[this.currentSlide]) === null || _a === void 0 ? void 0 : _a.type) || 'image';
-        if (this.autoplay && !this.isPaused && currentSlideType === 'image') {
-            setTimeout(() => {
-                this.resetTimer();
-                this.startTimer();
-            }, 50);
-        }
-    }
-    handleVideoPlayback() {
-        var _a;
-        this.videoElements.forEach(videoEl => {
-            if (videoEl) {
-                videoEl.pause();
-            }
-        });
-        const currentSlideType = (_a = this.slides[this.currentSlide]) === null || _a === void 0 ? void 0 : _a.type;
-        if (currentSlideType === 'video' && !this.isPaused) {
-            const currentVideo = this.videoElements[this.currentSlide];
-            if (currentVideo) {
-                if (currentVideo.readyState >= 2) {
-                    currentVideo.currentTime = 0;
-                    const playPromise = currentVideo.play();
-                    if (playPromise !== undefined) {
-                        playPromise.catch(error => {
-                            console.error('Error playing video:', error);
-                            this.createPlayButtonOverlay(currentVideo);
-                        });
-                    }
-                }
-                else {
-                    currentVideo.addEventListener('canplay', () => {
-                        if (this.currentSlide === this.slides.indexOf(this.slides[this.currentSlide]) && !this.isPaused) {
-                            currentVideo.play().catch(error => console.error('Error playing video on canplay:', error));
-                        }
-                    }, { once: true });
-                }
-            }
-        }
-    }
-    createPlayButtonOverlay(videoElement) {
-        const overlay = document.createElement('div');
-        overlay.className = 'dda-video-play-overlay';
-        overlay.innerHTML = `
-      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
-        <circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
-        <polygon points="10,8 16,12 10,16" fill="white" />
-      </svg>
-    `;
-        const videoContainer = videoElement.parentElement;
-        if (videoContainer) {
-            videoContainer.style.position = 'relative';
-            videoContainer.appendChild(overlay);
-            overlay.addEventListener('click', () => {
-                videoElement.play()
-                    .then(() => {
-                    overlay.remove();
-                })
-                    .catch(error => console.error('Play from overlay failed:', error));
-            });
-        }
-    }
-    startTimer() {
-        var _a;
-        if (this.isPaused)
-            return;
-        this.resetTimer();
-        const currentSlideType = (_a = this.slides[this.currentSlide]) === null || _a === void 0 ? void 0 : _a.type;
-        if (currentSlideType === 'video')
-            return;
-        requestAnimationFrame(() => {
-            const timerCircle = this.el.shadowRoot.querySelector('.dda-slider-indicator.active .dda-slider-timer-circle');
-            if (timerCircle) {
-                timerCircle.style.transition = 'none';
-                timerCircle.style.strokeDashoffset = '63';
-                void timerCircle.getBoundingClientRect();
-                setTimeout(() => {
-                    if (!this.isPaused) {
-                        timerCircle.style.transition = `stroke-dashoffset ${this.interval}ms linear`;
-                        timerCircle.style.strokeDashoffset = '0';
-                    }
-                }, 20);
-            }
-        });
-        this.slideInterval = window.setInterval(() => {
-            if (!this.isPaused) {
-                this.nextSlide();
-            }
-        }, this.interval);
-    }
-    resetTimer() {
-        if (this.slideInterval) {
-            window.clearInterval(this.slideInterval);
-            this.slideInterval = null;
-        }
-        const timerCircles = this.el.shadowRoot.querySelectorAll('.dda-slider-timer-circle');
-        timerCircles.forEach(circle => {
-            circle.style.transition = 'none';
-            circle.style.strokeDashoffset = '63';
-        });
-    }
-    goToSlide(index) {
-        this.currentSlide = index;
-        if (this.currentSlide < 0) {
-            this.currentSlide = this.slides.length - 1;
-        }
-        else if (this.currentSlide >= this.slides.length) {
-            this.currentSlide = 0;
-        }
-    }
-    render() {
-        return (h("div", { key: 'c913cd71be462a1c4f312570db0fe99dab591a97', class: "dda-slider-container" }, h("div", { key: '0fc9861bffb8e4bb74bd79350b75d635838a4fc2', class: "dda-slider" }, this.slides.map((slide, index) => (h("div", { class: `dda-slide ${index === this.currentSlide ? 'active' : ''}`, "data-index": index }, slide.type === 'image' ? (h("img", { src: slide.url, alt: `Slide ${index + 1}` })) : (h("video", { src: slide.url, controls: false, playsInline: true, preload: "auto", muted: false })))))), h("div", { key: '5dc1aebec849a521a75b7caa971b5e54182369c9', class: "dda-slider-controls-container" }, h("button", { key: 'dfe66b5522ae27085bd48f3f83a336bdc64250a5', class: "dda-slider-prev", onClick: this.prevSlide }, "\u276E"), h("div", { key: '99e06b7a61e2ec5f6848bee62c8b727b96e4eb32', class: "dda-slider-indicator-container" }, this.slides.map((slide, index) => (h("div", { class: `dda-slider-indicator ${index === this.currentSlide ? 'active' : ''}`, onClick: () => this.handleIndicatorClick(index) }, h("div", { innerHTML: index === this.currentSlide ?
-                this.svgIndicators.active(this.isPaused, slide.type === 'video') :
-                this.svgIndicators.inactive }), index === this.currentSlide &&
-            h("div", { class: "dda-slider-play-pause-overlay", onClick: this.togglePlayPause }))))), h("button", { key: 'a3c550c247c8c4c1362182daef81944f9c9682c2', class: "dda-slider-next", onClick: this.nextSlide }, "\u276F"))));
-    }
-    static get is() { return "dda-slider"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dda-slider.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dda-slider.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "slides": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SlideData[]",
-                    "resolved": "SlideData[]",
-                    "references": {
-                        "SlideData": {
-                            "location": "local",
-                            "path": "C:/MyWorks/DATACELL/DDA-2024/DDA Design System Components/packages/stencil/src/components/dda-slider/dda-slider.tsx",
-                            "id": "src/components/dda-slider/dda-slider.tsx::SlideData"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "interval": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "interval",
-                "reflect": false,
-                "defaultValue": "5000"
-            },
-            "autoplay": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "autoplay",
-                "reflect": false,
-                "defaultValue": "true"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "currentSlide": {},
-            "isPaused": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "currentSlide",
-                "methodName": "watchCurrentSlide"
-            }];
-    }
-}
-//# sourceMappingURL=dda-slider.js.map

package/dist/collection/components/dda-slider/dda-slider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dda-slider.js","sourceRoot":"","sources":["../../../src/components/dda-slider/dda-slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, State, Watch, Element } from '@stencil/core';\r\n\r\nexport interface SlideData {\r\n  url: string;\r\n  type: 'image' | 'video';\r\n}\r\n\r\n@Component({\r\n  tag: 'dda-slider',\r\n  styleUrl: 'dda-slider.css',\r\n  shadow: true\r\n})\r\nexport class DDASlider {\r\n  @Element() el: HTMLElement;\r\n  @Prop() slides: SlideData[] = [];\r\n  @Prop() interval: number = 5000;\r\n  @Prop() autoplay: boolean = true;\r\n  @State() currentSlide: number = 0;\r\n  @State() isPaused: boolean = false;\r\n  \r\n  private slideInterval: number;\r\n  private videoElements: HTMLVideoElement[] = [];\r\n  \r\n  private playIcon = `<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" class=\"play-icon\">\r\n    <polygon points=\"10,8 16,12 10,16\" fill=\"white\" stroke=\"white\" stroke-width=\"1\"/>\r\n  </svg>`;\r\n  \r\n  private pauseIcon = `<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" class=\"pause-icon\">\r\n    <rect x=\"9\" y=\"8\" width=\"2\" height=\"8\" fill=\"white\" stroke=\"white\" stroke-width=\"0\"/>\r\n    <rect x=\"13\" y=\"8\" width=\"2\" height=\"8\" fill=\"white\" stroke=\"white\" stroke-width=\"0\"/>\r\n  </svg>`;\r\n  \r\n  private svgIndicators = {\r\n    inactive: `<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#ccc\" stroke=\"#ccc\" stroke-width=\"2\"/>\r\n    </svg>`,\r\n    active: (isPaused: boolean, isVideo: boolean) => `<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#ccc\" stroke=\"#ccc\" stroke-width=\"4\"/>\r\n      ${!isVideo ? `<circle cx=\"12\" cy=\"12\" r=\"10\" class=\"dda-slider-timer-circle\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" \r\n              stroke-dasharray=\"63\" stroke-dashoffset=\"63\" transform=\"rotate(-90 12 12)\"/>` : ''}\r\n      ${isPaused ? this.playIcon : this.pauseIcon}\r\n    </svg>`\r\n  }; \r\n  \r\n  componentDidLoad() {\r\n    setTimeout(() => {\r\n      this.slides.forEach((slide, index) => {\r\n        if (slide.type === 'video') {\r\n          const videoEl = this.el.shadowRoot.querySelector(`.dda-slide[data-index=\"${index}\"] video`) as HTMLVideoElement;\r\n          if (videoEl) {\r\n            this.videoElements[index] = videoEl;\r\n            \r\n            videoEl.addEventListener('ended', () => {\r\n              if (this.currentSlide === index) {\r\n                this.nextSlide();\r\n              }\r\n            });\r\n          }\r\n        }\r\n      });\r\n      \r\n      if (this.slides[this.currentSlide]?.type === 'video') {\r\n        const currentVideo = this.videoElements[this.currentSlide];\r\n        if (currentVideo && !this.isPaused) {\r\n          currentVideo.play()\r\n            .catch(error => console.warn('Initial video play failed, may need user interaction:', error));\r\n        }\r\n      }\r\n      \r\n      if (this.autoplay && !this.isPaused) {\r\n        this.startTimer();\r\n      }\r\n    }, 100);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resetTimer();\r\n    \r\n    this.videoElements.forEach(video => {\r\n      if (video) {\r\n        video.removeEventListener('ended', this.nextSlide);\r\n      }\r\n    });\r\n  }\r\n  \r\n  @Watch('currentSlide')\r\n  watchCurrentSlide() {\r\n    this.handleVideoPlayback();\r\n    \r\n    const currentSlideType = this.slides[this.currentSlide]?.type || 'image';\r\n    if (this.autoplay && !this.isPaused && currentSlideType === 'image') {\r\n      setTimeout(() => {\r\n        this.resetTimer();\r\n        this.startTimer();\r\n      }, 50);\r\n    }\r\n  }\r\n  \r\n  private handleVideoPlayback() {\r\n    this.videoElements.forEach(videoEl => {\r\n      if (videoEl) {\r\n        videoEl.pause();\r\n      }\r\n    });\r\n    \r\n    const currentSlideType = this.slides[this.currentSlide]?.type;\r\n    if (currentSlideType === 'video' && !this.isPaused) {\r\n      const currentVideo = this.videoElements[this.currentSlide];\r\n      if (currentVideo) {\r\n        if (currentVideo.readyState >= 2) {\r\n          currentVideo.currentTime = 0;\r\n          const playPromise = currentVideo.play();\r\n          if (playPromise !== undefined) {\r\n            playPromise.catch(error => {\r\n              console.error('Error playing video:', error);\r\n              this.createPlayButtonOverlay(currentVideo);\r\n            });\r\n          }\r\n        } else {\r\n          currentVideo.addEventListener('canplay', () => {\r\n            if (this.currentSlide === this.slides.indexOf(this.slides[this.currentSlide]) && !this.isPaused) {\r\n              currentVideo.play().catch(error => console.error('Error playing video on canplay:', error));\r\n            }\r\n          }, { once: true });\r\n        }\r\n      }\r\n    }\r\n  }\r\n  \r\n  private createPlayButtonOverlay(videoElement: HTMLVideoElement) {\r\n    const overlay = document.createElement('div');\r\n    overlay.className = 'dda-video-play-overlay';\r\n    overlay.innerHTML = `\r\n      <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\">\r\n        <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"rgba(0,0,0,0.5)\" />\r\n        <polygon points=\"10,8 16,12 10,16\" fill=\"white\" />\r\n      </svg>\r\n    `;\r\n    \r\n    const videoContainer = videoElement.parentElement;\r\n    if (videoContainer) {\r\n      videoContainer.style.position = 'relative';\r\n      videoContainer.appendChild(overlay);\r\n      \r\n      overlay.addEventListener('click', () => {\r\n        videoElement.play()\r\n          .then(() => {\r\n            overlay.remove();\r\n          })\r\n          .catch(error => console.error('Play from overlay failed:', error));\r\n      });\r\n    }\r\n  }\r\n  \r\n  private startTimer() {\r\n    if (this.isPaused) return;\r\n    this.resetTimer();\r\n    \r\n    const currentSlideType = this.slides[this.currentSlide]?.type;\r\n    if (currentSlideType === 'video') return;\r\n    \r\n    requestAnimationFrame(() => {\r\n      const timerCircle = this.el.shadowRoot.querySelector('.dda-slider-indicator.active .dda-slider-timer-circle') as SVGCircleElement;\r\n      \r\n      if (timerCircle) {\r\n        timerCircle.style.transition = 'none';\r\n        timerCircle.style.strokeDashoffset = '63';\r\n        \r\n        void timerCircle.getBoundingClientRect();\r\n        \r\n        setTimeout(() => {\r\n          if (!this.isPaused) {\r\n            timerCircle.style.transition = `stroke-dashoffset ${this.interval}ms linear`;\r\n            timerCircle.style.strokeDashoffset = '0';\r\n          }\r\n        }, 20);\r\n      }\r\n    });\r\n    \r\n    this.slideInterval = window.setInterval(() => {\r\n      if (!this.isPaused) {\r\n        this.nextSlide();\r\n      }\r\n    }, this.interval);\r\n  }\r\n  \r\n  private resetTimer() {\r\n    if (this.slideInterval) {\r\n      window.clearInterval(this.slideInterval);\r\n      this.slideInterval = null;\r\n    }\r\n    \r\n    const timerCircles = this.el.shadowRoot.querySelectorAll('.dda-slider-timer-circle');\r\n    timerCircles.forEach(circle => {\r\n      (circle as SVGCircleElement).style.transition = 'none';\r\n      (circle as SVGCircleElement).style.strokeDashoffset = '63';\r\n    });\r\n  }\r\n  \r\n  private goToSlide(index: number) {\r\n    this.currentSlide = index;\r\n    if (this.currentSlide < 0) {\r\n      this.currentSlide = this.slides.length - 1;\r\n    } else if (this.currentSlide >= this.slides.length) {\r\n      this.currentSlide = 0;\r\n    }\r\n  }\r\n  \r\n  private prevSlide = () => {\r\n    this.goToSlide(this.currentSlide - 1);\r\n  }\r\n  \r\n  private nextSlide = () => {\r\n    this.goToSlide(this.currentSlide + 1);\r\n  }\r\n  \r\n  private handleIndicatorClick = (index: number) => {\r\n    this.goToSlide(index);\r\n  }\r\n  \r\n  private togglePlayPause = (event: Event) => {\r\n    event.stopPropagation();\r\n    \r\n    this.isPaused = !this.isPaused;\r\n    \r\n    const currentSlideType = this.slides[this.currentSlide]?.type;\r\n    if (currentSlideType === 'video') {\r\n      const currentVideo = this.videoElements[this.currentSlide];\r\n      if (currentVideo) {\r\n        if (this.isPaused) {\r\n          currentVideo.pause();\r\n        } else {\r\n          const playPromise = currentVideo.play();\r\n          if (playPromise !== undefined) {\r\n            playPromise.catch(error => {\r\n              console.error('Error toggling video play:', error);\r\n              this.isPaused = true;\r\n              this.createPlayButtonOverlay(currentVideo);\r\n            });\r\n          }\r\n        }\r\n      }\r\n    }\r\n    \r\n    if (this.isPaused) {\r\n      this.resetTimer();\r\n      \r\n      const activeIndicator = this.el.shadowRoot.querySelector('.dda-slider-indicator.active');\r\n      if (activeIndicator) {\r\n        const svgContainer = activeIndicator.querySelector('div');\r\n        if (svgContainer) {\r\n          svgContainer.innerHTML = this.svgIndicators.active(this.isPaused, currentSlideType === 'video');\r\n        }\r\n      }\r\n    } else {\r\n      const activeIndicator = this.el.shadowRoot.querySelector('.dda-slider-indicator.active');\r\n      if (activeIndicator) {\r\n        const svgContainer = activeIndicator.querySelector('div');\r\n        if (svgContainer) {\r\n          svgContainer.innerHTML = this.svgIndicators.active(this.isPaused, currentSlideType === 'video');\r\n        }\r\n      }\r\n      \r\n      if (currentSlideType === 'image') {\r\n        this.startTimer();\r\n      }\r\n    }\r\n  }\r\n  \r\n  render() {\r\n    return (\r\n      <div class=\"dda-slider-container\">\r\n        <div class=\"dda-slider\">\r\n          {this.slides.map((slide, index) => (\r\n            <div class={`dda-slide ${index === this.currentSlide ? 'active' : ''}`} data-index={index}>\r\n              {slide.type === 'image' ? (\r\n                <img src={slide.url} alt={`Slide ${index + 1}`} />\r\n              ) : (\r\n                <video \r\n                  src={slide.url} \r\n                  controls={false}\r\n                  playsInline={true}\r\n                  preload=\"auto\"\r\n                  muted={false}\r\n                />\r\n              )}\r\n            </div>\r\n          ))}\r\n        </div>\r\n        \r\n        <div class=\"dda-slider-controls-container\">\r\n          <button class=\"dda-slider-prev\" onClick={this.prevSlide}>\r\n            &#10094;\r\n          </button>\r\n          \r\n          <div class=\"dda-slider-indicator-container\">\r\n            {this.slides.map((slide, index) => (\r\n              <div \r\n                class={`dda-slider-indicator ${index === this.currentSlide ? 'active' : ''}`}\r\n                onClick={() => this.handleIndicatorClick(index)}\r\n              >\r\n                <div innerHTML={index === this.currentSlide ? \r\n                  this.svgIndicators.active(this.isPaused, slide.type === 'video') : \r\n                  this.svgIndicators.inactive}>\r\n                </div>\r\n                {index === this.currentSlide && \r\n                  <div class=\"dda-slider-play-pause-overlay\" onClick={this.togglePlayPause}></div>\r\n                }\r\n              </div>\r\n            ))}\r\n          </div>\r\n          \r\n          <button class=\"dda-slider-next\" onClick={this.nextSlide}>\r\n            &#10095;\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"]}

package/dist/collection/components/dda-slider/dda-slider.stories.js

@@ -1,126 +0,0 @@
-export default {
-    title: 'Components/Slider/Slider',
-    argTypes: {
-        slides: {
-            control: 'object',
-            description: 'Array of slide data objects with url and type properties',
-        },
-        interval: {
-            control: { type: 'number' },
-            description: 'Duration in milliseconds for each image slide (not applicable to videos)',
-        },
-        autoplay: {
-            control: 'boolean',
-            description: 'Whether to start automatically',
-        },
-    },
-    parameters: {
-        docs: {
-            description: {
-                component: `
-# DDA Slider Component
-
-A customizable slider component that supports both images and videos with timer animation, navigation controls, and auto-play capability.
-
-## Basic Usage
-
-\`\`\`html
-<dda-slider 
-  interval="5000"
-  autoplay="true">
-</dda-slider>
-\`\`\`
-
-## Slide Data Structure
-
-Each slide requires a \`type\` property ('image' or 'video') and a \`url\` property:
-
-\`\`\`js
-[
-  {
-    url: "https://example.com/image1.jpg",
-    type: "image"
-  },
-  {
-    url: "https://example.com/video1.mp4",
-    type: "video"
-  }
-]
-\`\`\`
-
-## Notes
-
-- The timer animation is only applied to image slides
-- Video slides will automatically advance to the next slide when the video ends
-- You can pause/play videos using the indicator buttons
-`,
-            },
-        },
-    },
-};
-const Template = (args) => {
-    const attributes = Object.entries(args)
-        .filter(([key, value]) => value !== undefined && key !== 'slides')
-        .map(([key, value]) => `${key}="${value}"`)
-        .join(' ');
-    return `
-    <dda-slider class="custom-slider" ${attributes}></dda-slider>
-    <script>
-      document.querySelector('.custom-slider').slides = ${JSON.stringify(args.slides)};
-    </script>
-  `;
-};
-export const Default = Template.bind({});
-Default.args = {
-    slides: [
-        {
-            url: "https://picsum.photos/800/450?random=1",
-            type: "image"
-        },
-        {
-            url: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4",
-            type: "video"
-        },
-        {
-            url: "https://picsum.photos/800/450?random=3",
-            type: "image"
-        }
-    ],
-    interval: 5000,
-    autoplay: true,
-};
-export const ImagesOnly = Template.bind({});
-ImagesOnly.args = {
-    slides: [
-        {
-            url: "https://picsum.photos/800/450?random=1",
-            type: "image"
-        },
-        {
-            url: "https://picsum.photos/800/450?random=2",
-            type: "image"
-        },
-        {
-            url: "https://picsum.photos/800/450?random=3",
-            type: "image"
-        }
-    ],
-    interval: 5000,
-    autoplay: true,
-};
-export const VideosOnly = Template.bind({});
-VideosOnly.args = {
-    slides: [
-        {
-            url: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4",
-            type: "video"
-        },
-        {
-            url: "https://videos.pexels.com/video-files/5532765/5532765-uhd_1440_2732_25fps.mp4",
-            type: "video"
-        }
-    ],
-    interval: 5000,
-    autoplay: true,
-};
-//# sourceMappingURL=dda-slider.stories.js.map

package/dist/collection/components/dda-slider/dda-slider.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dda-slider.stories.js","sourceRoot":"","sources":["../../../src/components/dda-slider/dda-slider.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,0DAA0D;SACxE;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,0EAA0E;SACxF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,gCAAgC;SAC9C;KACF;IAED,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoClB;aACM;SACF;KACF;CACF,CAAC;AAGF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;SACpC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS,IAAI,GAAG,KAAK,QAAQ,CAAC;SACjE,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,KAAK,KAAK,GAAG,CAAC;SAC1C,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO;wCAC+B,UAAU;;0DAEQ,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;;GAElF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,MAAM,EAAE;QACN;YACE,GAAG,EAAE,wCAAwC;YAC7C,IAAI,EAAE,OAAO;SACd;QACD;YACE,GAAG,EAAE,+EAA+E;YACpF,IAAI,EAAE,OAAO;SACd;QACD;YACE,GAAG,EAAE,wCAAwC;YAC7C,IAAI,EAAE,OAAO;SACd;KACF;IACD,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IAChB,MAAM,EAAE;QACN;YACE,GAAG,EAAE,wCAAwC;YAC7C,IAAI,EAAE,OAAO;SACd;QACD;YACE,GAAG,EAAE,wCAAwC;YAC7C,IAAI,EAAE,OAAO;SACd;QACD;YACE,GAAG,EAAE,wCAAwC;YAC7C,IAAI,EAAE,OAAO;SACd;KACF;IACD,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IAChB,MAAM,EAAE;QACN;YACE,GAAG,EAAE,+EAA+E;YACpF,IAAI,EAAE,OAAO;SACd;QACD;YACE,GAAG,EAAE,+EAA+E;YACpF,IAAI,EAAE,OAAO;SACd;KACF;IACD,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;CACf,CAAC","sourcesContent":["export default {\r\n  title: 'Components/Slider/Slider',\r\n  argTypes: {\r\n    slides: {\r\n      control: 'object',\r\n      description: 'Array of slide data objects with url and type properties',\r\n    },\r\n    interval: {\r\n      control: { type: 'number' },\r\n      description: 'Duration in milliseconds for each image slide (not applicable to videos)',\r\n    },\r\n    autoplay: {\r\n      control: 'boolean',\r\n      description: 'Whether to start automatically',\r\n    },\r\n  },\r\n  \r\n  parameters: {\r\n    docs: {\r\n      description: {\r\n        component: `\r\n# DDA Slider Component\r\n\r\nA customizable slider component that supports both images and videos with timer animation, navigation controls, and auto-play capability.\r\n\r\n## Basic Usage\r\n\r\n\\`\\`\\`html\r\n<dda-slider \r\n  interval=\"5000\"\r\n  autoplay=\"true\">\r\n</dda-slider>\r\n\\`\\`\\`\r\n\r\n## Slide Data Structure\r\n\r\nEach slide requires a \\`type\\` property ('image' or 'video') and a \\`url\\` property:\r\n\r\n\\`\\`\\`js\r\n[\r\n  {\r\n    url: \"https://example.com/image1.jpg\",\r\n    type: \"image\"\r\n  },\r\n  {\r\n    url: \"https://example.com/video1.mp4\",\r\n    type: \"video\"\r\n  }\r\n]\r\n\\`\\`\\`\r\n\r\n## Notes\r\n\r\n- The timer animation is only applied to image slides\r\n- Video slides will automatically advance to the next slide when the video ends\r\n- You can pause/play videos using the indicator buttons\r\n`,\r\n      },\r\n    },\r\n  },\r\n};\r\n\r\n\r\nconst Template = (args) => {\r\n  const attributes = Object.entries(args)\r\n    .filter(([key, value]) => value !== undefined && key !== 'slides')\r\n    .map(([key, value]) => `${key}=\"${value}\"`)\r\n    .join(' ');\r\n\r\n  return `\r\n    <dda-slider class=\"custom-slider\" ${attributes}></dda-slider>\r\n    <script>\r\n      document.querySelector('.custom-slider').slides = ${JSON.stringify(args.slides)};\r\n    </script>\r\n  `;\r\n};\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n  slides: [\r\n    {\r\n      url: \"https://picsum.photos/800/450?random=1\",\r\n      type: \"image\"\r\n    },\r\n    {\r\n      url: \"https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4\",\r\n      type: \"video\"\r\n    },\r\n    {\r\n      url: \"https://picsum.photos/800/450?random=3\",\r\n      type: \"image\"\r\n    }\r\n  ],\r\n  interval: 5000,\r\n  autoplay: true,\r\n};\r\n\r\nexport const ImagesOnly = Template.bind({});\r\nImagesOnly.args = {\r\n  slides: [\r\n    {\r\n      url: \"https://picsum.photos/800/450?random=1\",\r\n      type: \"image\"\r\n    },\r\n    {\r\n      url: \"https://picsum.photos/800/450?random=2\",\r\n      type: \"image\"\r\n    },\r\n    {\r\n      url: \"https://picsum.photos/800/450?random=3\",\r\n      type: \"image\"\r\n    }\r\n  ],\r\n  interval: 5000,\r\n  autoplay: true,\r\n};\r\n\r\nexport const VideosOnly = Template.bind({});\r\nVideosOnly.args = {\r\n  slides: [\r\n    {\r\n      url: \"https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4\",\r\n      type: \"video\"\r\n    },\r\n    {\r\n      url: \"https://videos.pexels.com/video-files/5532765/5532765-uhd_1440_2732_25fps.mp4\",\r\n      type: \"video\"\r\n    }\r\n  ],\r\n  interval: 5000,\r\n  autoplay: true,\r\n};"]}