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

package/dist/collection/components/dda-home-banner/dda-home-banner.js

@@ -1,145 +1,21 @@
 import { Host, h } from "@stencil/core";
 export class DdaHomeBanner {
     constructor() {
-        /** Props */
-        this.autoplay = true;
-        this.interval = 3000;
-        /** States */
         this.currentSlide = 0;
         this.slides = [];
-        this.autoPlayActive = true;
-        this.pausedProgressOffset = 0;
-        this.animationFrameId = null;
     }
-    // componentDidLoad() {
-    //   this.updateSlides();
-    //   const slot = this.el.querySelector('slot');
-    //   slot?.addEventListener('slotchange', () => this.updateSlides());
-    //   this.autoPlayActive = this.autoplay && this.slides.length > 1;
-    //   this.playVideoInCurrentSlide();
-    //   if (this.autoPlayActive) {
-    //     this.startAutoplay();
-    //     this.animateProgress(); // Initial animation
-    //   }
-    // }
     componentDidLoad() {
         this.updateSlides();
+        // Listen for slot changes
         const slot = this.el.querySelector('slot');
         slot === null || slot === void 0 ? void 0 : slot.addEventListener('slotchange', () => this.updateSlides());
-        this.autoPlayActive = this.autoplay && this.slides.length > 1;
-        this.playVideoInCurrentSlide();
-        // ✅ Wait for the DOM to fully render slides before animating
-        if (this.autoPlayActive) {
-            const tryStart = () => {
-                const circle = this.el.querySelector('.circle-loader');
-                if (circle) {
-                    this.startAutoplay();
-                    this.animateProgress();
-                }
-                else {
-                    requestAnimationFrame(tryStart);
-                }
-            };
-            tryStart();
-        }
-    }
-    disconnectedCallback() {
-        this.stopAutoplay();
-        if (this.animationFrameId) {
-            cancelAnimationFrame(this.animationFrameId);
-        }
-    }
-    componentDidRender() {
-        this.slides.forEach((slide, index) => {
-            slide.classList.toggle('active', index === this.currentSlide);
-        });
     }
     updateSlides() {
-        this.slides = Array.from(this.el.querySelectorAll('.dda-home-banner-slide'));
+        this.slides = Array.from(this.el.querySelectorAll('slide'));
         if (this.slides.length > 0) {
-            this.currentSlide = 0;
-        }
-        // Disable autoplay if there's only one slide
-        if (this.slides.length <= 1) {
-            this.autoPlayActive = false;
-            this.stopAutoplay();
-        }
-    }
-    startAutoplay() {
-        this.stopAutoplay();
-        if (this.autoPlayActive && this.slides.length > 1) {
-            const slide = this.slides[this.currentSlide];
-            const video = slide === null || slide === void 0 ? void 0 : slide.querySelector('video');
-            const setupTimer = (durationMs) => {
-                this.autoPlayInterval = setInterval(() => {
-                    this.nextSlide();
-                }, durationMs);
-                this.animateProgress(1); // animate full ring
-            };
-            if (video) {
-                if (video.readyState >= 1) {
-                    setupTimer(video.duration * 1000);
-                }
-                else {
-                    video.addEventListener('loadedmetadata', () => {
-                        setupTimer(video.duration * 1000);
-                    }, { once: true });
-                }
-            }
-            else {
-                setupTimer(this.interval);
-            }
-        }
-    }
-    stopAutoplay() {
-        if (this.autoPlayInterval) {
-            clearInterval(this.autoPlayInterval);
-            this.autoPlayInterval = null;
-        }
-    }
-    toggleAutoplay() {
-        var _a;
-        const circle = this.el.querySelector('.circle-loader');
-        const video = (_a = this.slides[this.currentSlide]) === null || _a === void 0 ? void 0 : _a.querySelector('video');
-        this.autoPlayActive = !this.autoPlayActive;
-        if (this.autoPlayActive) {
-            this.startAutoplay();
-            const offset = this.pausedProgressOffset;
-            const totalLength = (circle === null || circle === void 0 ? void 0 : circle.getTotalLength()) || 1;
-            const startRatio = offset / totalLength;
-            if (video)
-                video.play();
-            this.animateProgress(startRatio);
-        }
-        else {
-            this.stopAutoplay();
-            if (this.animationFrameId) {
-                cancelAnimationFrame(this.animationFrameId);
-                this.animationFrameId = null;
-            }
-            if (circle) {
-                const style = window.getComputedStyle(circle);
-                const strokeDashoffset = parseFloat(style.strokeDashoffset || '0');
-                this.pausedProgressOffset = strokeDashoffset;
-            }
-            if (video)
-                video.pause();
+            this.currentSlide = 0; // Reset slide index if slides are updated
         }
     }
-    playVideoInCurrentSlide() {
-        this.slides.forEach((slide, index) => {
-            const video = slide.querySelector('video');
-            if (video) {
-                if (index === this.currentSlide) {
-                    video.currentTime = 0;
-                    video.play();
-                }
-                else {
-                    video.pause();
-                }
-            }
-        });
-    }
     nextSlide() {
         this.currentSlide = (this.currentSlide + 1) % this.slides.length;
     }
@@ -149,119 +25,26 @@ export class DdaHomeBanner {
     setSlide(index) {
         this.currentSlide = index;
     }
-    onSlideChanged() {
-        this.animateProgress();
-        this.playVideoInCurrentSlide();
-        this.startAutoplay(); // restart with correct duration
-    }
-    animateProgress(startRatio = 1) {
-        const circle = this.el.querySelector('.circle-loader');
-        if (!circle)
-            return;
-        const length = circle.getTotalLength();
-        const slide = this.slides[this.currentSlide];
-        const video = slide === null || slide === void 0 ? void 0 : slide.querySelector('video');
-        const duration = (video && video.duration ? video.duration * 1000 : this.interval) * startRatio;
-        const start = performance.now();
-        this.pausedProgressOffset = length * startRatio;
-        circle.style.strokeDasharray = `${length}`;
-        circle.style.strokeDashoffset = `${this.pausedProgressOffset}`;
-        circle.style.transition = 'none';
-        const animate = (now) => {
-            const elapsed = now - start;
-            const progress = Math.min(elapsed / duration, 1);
-            const newOffset = length * (1 - progress) * startRatio;
-            circle.style.strokeDashoffset = `${newOffset}`;
-            if (progress < 1) {
-                this.animationFrameId = requestAnimationFrame(animate);
-            }
-        };
-        if (this.animationFrameId) {
-            cancelAnimationFrame(this.animationFrameId);
-        }
-        this.animationFrameId = requestAnimationFrame(animate);
-    }
-    resetProgress() {
-        const circle = this.el.querySelector('.circle-loader');
-        if (circle) {
-            const length = circle.getTotalLength();
-            circle.style.transition = 'none';
-            circle.style.strokeDashoffset = `${length}`;
-            this.pausedProgressOffset = length;
-        }
-    }
     render() {
-        const hasMultipleSlides = this.slides.length > 1;
-        return (h(Host, { key: '6d49434287317b90ab4f3d07ce3ad839cdce9fb3' }, h("div", { key: '37f724da3f9197c53046365f89765b5beda5583b', class: "dda-home-banner", role: "region", "aria-label": "Homepage banner with slides" }, h("div", { key: 'e7bacf7d2bb56a2d2317877577c7f45d0d553fc4', class: "dda-home-slides", role: "list", "aria-live": "polite", "aria-atomic": "true" }, h("slot", { key: '047b8e02aee6ad81f8fb9c8b208b5328bc8ae221' })), h("div", { key: 'a9644a5013e870ee1e3af3516a38ecb36b94cd11', class: "dda-home-banner-slider-nav" }, hasMultipleSlides && (h("div", { key: '37c3d24ce94851c5b41536d711cb93b444697e78', class: "dda-home-banner-slider-nav-content" }, h("button", { key: '9b48cc861bc760c5309f0816b062622ad80562bb', type: "button", class: "dda-home-banner-prev", onClick: () => this.prevSlide() }, h("i", { key: '09f0362f0e7475aa27d72fae72da4ef42f9ba12b', class: "material-icons", "aria-hidden": "true" }, "chevron_left"), h("span", { key: 'bc681d9f54cca2aab657c5c7080735b36e40e821', class: "visually-hidden" }, "Previous slide")), h("button", { key: '5083b1653405c62a0f4a81c7047d9507a1bfcec7', 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' }, h("span", { key: '0f7c7fbc870ee42c3edd32a03afc5143e538876c' }, h("svg", { key: '618ec4c1ed650ca31e41e028f9a30306624aad52', class: "main-circle", width: "25", height: "26", viewBox: "0 0 25 26", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { key: '8233d9df1044bd665aba9ffb8d09af6d3b365285', 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" }), h("circle", { key: 'e972a42bebb33765304c65ce489cc0b5f6858edc', class: "dott", cx: "5.17456", cy: "6.92017", r: "1.44751", fill: "white" })), this.autoPlayActive ? (h("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" }, h("path", { d: "M0.482666 0.548584H2.48267V6.54858H0.482666V0.548584Z", fill: "white" }), h("path", { d: "M4.47974 0.548584H6.47974V6.54858H4.47974V0.548584Z", fill: "white" }))) : (h("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" }, h("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" }))))), h("ul", { key: 'adddb6104fd2ba0c9c86de3e222016c50c441924', "aria-label": "Select slide" }, this.slides.map((_, index) => (h("li", { key: index }, h("button", { type: "button", class: this.currentSlide === index ? 'dots active' : 'dots', onClick: () => this.setSlide(index), "aria-label": `Go to slide ${index + 1}`, "aria-current": this.currentSlide === index ? 'true' : 'false' }))))), h("button", { key: '6d67a6af87386354b62bed2cbfa065260877ac04', type: "button", class: "dda-home-banner-next", onClick: () => this.nextSlide(), "aria-label": "Next slide" }, h("i", { key: '3632b6248cd7d68381820c2c95ee1549c80e60c8', class: "material-icons", "aria-hidden": "true" }, "chevron_right"), h("span", { key: 'fae1952c104e8ecd95395df92fd31e7a445b05a2', class: "visually-hidden" }, "Next slide")))), h("div", { key: '7bad9578f986c285da80baf3cf04eedfe97fccb2', class: "dda-mouse-scroll" }, h("dda-scroll-icon", { key: '477ff1157d58ae5da3b6d8815b6279aa00143e0a', scroll_icon_size: "sm", scroll_icon_color: "white", custom_class: "", component_mode: "", class: "hydrated", "aria-hidden": "true" }))))));
+        return (h(Host, { key: '5bcab057203a18f9c5482a1fd8fdb9542a33071d' }, h("div", { key: 'c82b73421f9986d51abdb9372c8d2d36543bf700', class: "dda-slider-container" }, h("div", { key: '87ab0d38cdd6e5f6db1dfccc6045466aa83110b0', class: "dda-slides", style: { innerWidth: this.slides.length * 100 + 'vw', left: this.currentSlide * -100 + '%' } }, h("slot", { key: 'dcc24fdc28058374c6300aabb68b23722d86f3e4' })), h("div", { key: '2eb6e6b626bd2756ca37238dc808978f4103aa5b', class: 'slider-nav' }, h("button", { key: 'f05d141e12f4874f14fedf353415f6631dc7971b', class: "prev", onClick: () => this.prevSlide() }, h("i", { key: '429b7cc641f9ac836d967ce2601e4fe91f978a3d', class: "material-icons" }, "chevron_left")), h("ul", { key: '55e2e2578f66cee575b10bf045aadc912fa7f621' }, this.slides.map((_, index) => {
+            return h("div", { class: this.currentSlide == index ? 'dots active' : 'dots', onClick: () => this.setSlide(index) });
+        })), h("button", { key: 'c68a48a6b16ffd72ea4148a07e0f513bb4a93d94', class: "next", onClick: () => this.nextSlide() }, h("i", { key: 'cca2fe5cad36082c4462a020ff8f332384197bc9', class: "material-icons" }, "chevron_right"))))));
     }
     static get is() { return "dda-home-banner"; }
     static get originalStyleUrls() {
         return {
-            "$": ["home-banner.css"]
+            "$": ["home-banner.css", "../../global/global.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["home-banner.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "autoplay": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Props"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "autoplay",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "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": "3000"
-            }
+            "$": ["home-banner.css", "../../global/global.css"]
         };
     }
     static get states() {
         return {
-            "currentSlide": {},
-            "slides": {},
-            "autoPlayActive": {}
+            "currentSlide": {}
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "currentSlide",
-                "methodName": "onSlideChanged"
-            }];
-    }
 }
-//# sourceMappingURL=dda-home-banner.js.map

package/dist/collection/components/dda-home-banner/dda-home-banner.stories.js

@@ -2,41 +2,28 @@ export default {
     title: 'Components/Home Banner',
     component: 'dda-home-banner',
     argTypes: {
-        autoplay: {
-            control: 'boolean',
-            description: 'Enable or disable autoplay functionality.',
-            defaultValue: true,
-        },
-        interval: {
-            control: 'number',
-            description: 'Set the autoplay interval time in milliseconds.',
-            defaultValue: 3000,
-        },
+        images: { control: 'array' },
+        autoplay: { control: 'boolean' },
+        interval: { control: 'number' },
     },
     parameters: {
         docs: {
             description: {
-                component: `
-The \`dda-home-banner\` component displays a carousel banner with optional autoplay functionality.
-
-### Usage
-
-\`\`\`html
-<dda-home-banner
-  autoplay="true"
-  interval="3000"
->
-  <div class="dda-home-banner-slide">Slide 1</div>
-  <div class="dda-home-banner-slide">Slide 2</div>
-  <div class="dda-home-banner-slide">Slide 3</div>
-</dda-home-banner>
-\`\`\`
-
-### Props
-
-- \`autoplay\` (boolean): Enables or disables automatic slide transitions.
-- \`interval\` (number): Duration in milliseconds between slide transitions when autoplay is enabled.
-        `,
+                component: `
+  To use the \`dda-home-banner\` component, pass the following props:
+  
+  \`\`\`html
+<dda-home-banner
+    images='[
+      { "src": "assets/img/home1.jpg", "title": "Welcome to Our Site", "subtitle": "Discover amazing features", "link": "#" },
+      { "src": "assets/img/home2.jpg", "title": "Explore More", "subtitle": "Find what you need", "link": "#" },
+      { "src": "assets/img/home3.jpg", "title": "Join Us Today", "subtitle": "Become part of our community", "link": "#" }
+    ]'
+    autoplay="true"
+    interval="3000"
+></dda-home-banner>
+  \`\`\`
+  `,
             },
         },
         controls: {
@@ -44,14 +31,34 @@ The \`dda-home-banner\` component displays a carousel banner with optional autop
         },
     },
 };
-const Template = (args) => `<dda-home-banner autoplay='${args.autoplay}' interval='${args.interval}'>
-    <div class="dda-home-banner-slide">Slide 1</div>
-    <div class="dda-home-banner-slide">Slide 2</div>
-    <div class="dda-home-banner-slide">Slide 3</div>
-  </dda-home-banner>`;
+const Template = (args) => `<dda-home-banner images='${JSON.stringify(args.images)}' autoplay='${args.autoplay}' interval='${args.interval}'></dda-home-banner>`;
 export const Default = Template.bind({});
 Default.args = {
+    images: [
+        { src: 'https://images.pexels.com/photos/3680912/pexels-photo-3680912.jpeg', title: 'Welcome to Our Site', subtitle: 'Discover amazing features', link: '#' },
+        { src: 'https://images.pexels.com/photos/3680912/pexels-photo-3680912.jpeg', title: 'Explore More', subtitle: 'Find what you need', link: '#' },
+        { src: 'https://images.pexels.com/photos/3680912/pexels-photo-3680912.jpeg', title: 'Join Us Today', subtitle: 'Become part of our community', link: '#' }
+    ],
     autoplay: true,
     interval: 3000,
 };
-//# sourceMappingURL=dda-home-banner.stories.js.map
+// export const NoAutoplay = Template.bind({});
+// NoAutoplay.args = {
+//   images: [
+//     { src: 'assets/img/home1.jpg', title: 'Welcome to Our Site', subtitle: 'Discover amazing features', link: '#' },
+//     { src: 'assets/img/home2.jpg', title: 'Explore More', subtitle: 'Find what you need', link: '#' },
+//     { src: 'assets/img/home3.jpg', title: 'Join Us Today', subtitle: 'Become part of our community', link: '#' }
+//   ],
+//   autoplay: false,
+//   interval: 3000,
+// };
+// export const CustomInterval = Template.bind({});
+// CustomInterval.args = {
+//   images: [
+//     { src: 'assets/img/home1.jpg', title: 'Welcome to Our Site', subtitle: 'Discover amazing features', link: '#' },
+//     { src: 'assets/img/home2.jpg', title: 'Explore More', subtitle: 'Find what you need', link: '#' },
+//     { src: 'assets/img/home3.jpg', title: 'Join Us Today', subtitle: 'Become part of our community', link: '#' }
+//   ],
+//   autoplay: true,
+//   interval: 5000,
+// };