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

package/dist/esm/dda-slider.entry.js

@@ -1,252 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-52b38a93.js';
-
-const ddaSliderCss = ".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;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;}.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;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;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;}.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}}";
-const DdaSliderStyle0 = ddaSliderCss;
-
-const DDASlider = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        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"))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "currentSlide": ["watchCurrentSlide"]
-    }; }
-};
-DDASlider.style = DdaSliderStyle0;
-
-export { DDASlider as dda_slider };
-
-//# sourceMappingURL=dda-slider.entry.js.map

package/dist/esm/dda-slider.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-slider.entry.js","mappings":"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","names":[],"sources":["src/components/dda-slider/dda-slider.css?tag=dda-slider&encapsulation=shadow","src/components/dda-slider/dda-slider.tsx"],"sourcesContent":[".dda-slider-container {\r\n  position: relative;\r\n  width: 100%;\r\n  background-color: #fff;\r\n  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n}\r\n\r\n.dda-slider {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 450px;\r\n}\r\n\r\n.dda-slide {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  opacity: 0;\r\n  /* transition: opacity 0.5s ease-in-out; */\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.dda-slide.active {\r\n  opacity: 1;\r\n  z-index: 1;\r\n}\r\n\r\n.dda-slide img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n\r\n.dda-slide video {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n\r\n.dda-video-play-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  z-index: 5;\r\n  background-color: rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.dda-video-play-overlay svg {\r\n  width: 64px;\r\n  height: 64px;\r\n  /* transition: transform 0.3s ease; */\r\n}\r\n\r\n.dda-video-play-overlay:hover svg {\r\n  transform: scale(1.2);\r\n}\r\n\r\n.dda-slider-controls-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 15px;\r\n}\r\n\r\n.dda-slider-prev, .dda-slider-next {\r\n  background-color: rgba(255, 255, 255, 0.2);\r\n  color: black;\r\n  padding: 10px 15px;\r\n  cursor: pointer;\r\n  font-size: 18px;\r\n  border: none;\r\n  border-radius: 5px;\r\n  /* transition: background-color 0.3s; */\r\n  z-index: 2;\r\n}\r\n\r\n.dda-slider-prev:hover, .dda-slider-next:hover {\r\n  background-color: rgba(255, 255, 255, 0.4);\r\n}\r\n\r\n.dda-slider-indicator-container {\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.dda-slider-indicator {\r\n  width: 24px;\r\n  height: 24px;\r\n  margin: 0 5px;\r\n  cursor: pointer;\r\n  /* transition: all 0.3s; */\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.dda-slider-indicator svg {\r\n  width: 24px;\r\n  height: 24px;\r\n  display: block;\r\n}\r\n\r\n.dda-slider-timer-circle {\r\n  stroke-dasharray: 63;\r\n  stroke-dashoffset: 63;\r\n  /* transition: none; */\r\n}\r\n\r\n.dda-slider-play-icon, .dda-slider-pause-icon {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  width: 12px;\r\n  height: 12px;\r\n}\r\n\r\n.dda-slider-play-pause-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  cursor: pointer;\r\n  z-index: 2;\r\n}\r\n\r\n@media (prefers-reduced-motion: no-preference) {\r\n  .dda-slide {\r\n    transition: opacity 0.5s ease-in-out;\r\n  }\r\n  .dda-video-play-overlay svg {\r\n  transition: transform 0.3s ease;\r\n  }\r\n  .dda-slider-prev, .dda-slider-next {\r\n    transition: background-color 0.3s;\r\n  }\r\n  .dda-slider-indicator {\r\n    transition: all 0.3s;\r\n  }\r\n  .dda-slider-timer-circle {\r\n    transition: none;\r\n  }\r\n}","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}"],"version":3}

package/dist/esm/dda-split-button.entry.js

@@ -1,100 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-52b38a93.js';
-
-const DdaSplitButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.buttonClick = createEvent(this, "buttonClick", 7);
-        this.text_button_type = 'button';
-        this.disabled = false;
-        this.start_icon_family = '';
-        this.start_icon = '';
-        this.button_text = '';
-        this.aria_label = '';
-        this.button_color = 'primary';
-        this.button_shape = '';
-        this.toggle_button_shape = '';
-        this.custom_class = '';
-        this.text_button_name = '';
-        this.is_open = false;
-        this.handleClick = (event) => {
-            if (this.disabled)
-                return;
-            this.buttonClick.emit({
-                event,
-                id: this.text_button_id,
-                value: this.value,
-                name: this.text_button_name,
-            });
-        };
-        this.handleClickOutside = (event) => {
-            if (this.is_open && !this.el.contains(event.target)) {
-                this.is_open = false;
-            }
-        };
-    }
-    toggleSelect() {
-        if (!this.disabled) {
-            this.is_open = !this.is_open;
-        }
-    }
-    connectedCallback() {
-        document.addEventListener('click', this.handleClickOutside);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('click', this.handleClickOutside);
-    }
-    componentDidLoad() {
-        // after first render, move slotted menu inside container
-        this.moveMenuToContainer();
-    }
-    componentDidRender() {
-        // ensure menu stays inside container after re-renders (defensive)
-        this.moveMenuToContainer();
-    }
-    moveMenuToContainer() {
-        // find the visible container inside this component
-        const container = this.el.querySelector('.split-btn-list');
-        if (!container)
-            return;
-        // Only consider direct children of host that carry slot="menu".
-        const hostChildren = Array.from(this.el.children);
-        const slotted = hostChildren.filter((c) => c.getAttribute && c.getAttribute('slot') === 'menu');
-        slotted.forEach((node) => {
-            // if it's already inside container, skip
-            if (node.parentElement !== container) {
-                container.appendChild(node);
-            }
-        });
-    }
-    render() {
-        const textButtonClass = [
-            'dda-split-btn', // unique for main button
-            `btn-color-${this.button_color}`,
-            this.size ? `btn-size-${this.size}` : '',
-            this.button_shape ? `split-btn-main-shape-${this.button_shape}` : '',
-            this.gap ? `dda-gap-${this.gap}` : '',
-            this.custom_class,
-            this.component_mode,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const toggleButtonClass = [
-            'dda-split-btn dda-split-btn-toggle', // unique for toggle button
-            `btn-color-${this.button_color}`,
-            this.size ? `btn-size-${this.size}` : '',
-            this.button_shape ? `split-icon-btn-shape-${this.button_shape}` : '',
-            this.gap ? `dda-gap-${this.gap}` : '',
-            this.custom_class,
-            this.component_mode,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const listClass = `split-btn-list ${this.is_open ? 'open' : 'closed'}`;
-        return (h(Host, { key: '557dd738ecda2ea9b887f26a649545d636739162' }, h("div", { key: '8cf1af27d4518266bcfa3ad973e5caf747752e4a', class: "split-btn-container" }, h("button", { key: '7d37f0b271365ad447a605f87f4933ade5c51bba', id: this.text_button_id, type: this.text_button_type, class: textButtonClass, disabled: this.disabled, "aria-label": this.aria_label || this.button_text, name: this.text_button_name, value: this.value, onClick: this.handleClick }, this.start_icon && (h("i", { key: 'f6244bede898854205902c83febd164f2a8c7772', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, this.start_icon)), h("span", { key: '5785f0550374e9b71225111c1473bc3a40808490' }, this.button_text)), h("button", { key: 'a8158ad76834a12c564771a91237a452ae917323', type: "button", class: toggleButtonClass, disabled: this.disabled, onClick: () => this.toggleSelect() }, h("i", { key: '632d4c992c4da668770292d9b2b0881d0d85a557', class: "material-icons", "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), h("div", { key: '88988abe9f2a3173f34356a030fdd03055c94139', class: listClass, "aria-hidden": !this.is_open, role: "menu" }, h("slot", { key: 'b7c9e16e3c36b64d6aa185ced7da41ff1f02cc76', name: "menu" })))));
-    }
-    get el() { return getElement(this); }
-};
-
-export { DdaSplitButton as dda_split_button };
-
-//# sourceMappingURL=dda-split-button.entry.js.map

package/dist/esm/dda-split-button.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-split-button.entry.js","mappings":"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","names":[],"sources":["src/components/dda-split-button/dda-split-button.tsx"],"sourcesContent":["import { Host, Component, Prop, h, Event, EventEmitter, State, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-split-button',\r\n  // styleUrls: ['dda-split-button.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaSplitButton {\r\n  @Prop() text_button_type: string = 'button';\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() start_icon_family: string = '';\r\n  @Prop() start_icon: string = '';\r\n  @Prop() button_text: string = '';\r\n  @Prop() aria_label?: string = '';\r\n  @Prop() button_color: string = 'primary';\r\n  @Prop() size?: string;\r\n  @Prop() button_shape?: string = '';\r\n  @Prop() toggle_button_shape?: string = '';\r\n  @Prop() gap?: number;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() text_button_id: string;\r\n  @Prop() text_button_name?: string = '';\r\n  @Prop() value?: string;\r\n\r\n  @Event() buttonClick: EventEmitter<{ event: MouseEvent, id: string, value: string, name: string }>;\r\n\r\n  /*toogle Button*/\r\n  @Element() el: HTMLElement;\r\n  @State() is_open: boolean = false;\r\n\r\n  private handleClick = (event: MouseEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    this.buttonClick.emit({\r\n      event,\r\n      id: this.text_button_id,\r\n      value: this.value,\r\n      name: this.text_button_name,\r\n    });\r\n  };\r\n \r\n  toggleSelect() {\r\n    if (!this.disabled) {\r\n      this.is_open = !this.is_open;\r\n    }\r\n  }\r\n  handleClickOutside = (event: MouseEvent) => {\r\n    if (this.is_open && !this.el.contains(event.target as Node)) {\r\n      this.is_open = false;\r\n    }\r\n  };\r\n\r\n  connectedCallback() {\r\n    document.addEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    // after first render, move slotted menu inside container\r\n    this.moveMenuToContainer();\r\n  }\r\n\r\n  componentDidRender() {\r\n    // ensure menu stays inside container after re-renders (defensive)\r\n    this.moveMenuToContainer();\r\n  }\r\n\r\n  private moveMenuToContainer() {\r\n    // find the visible container inside this component\r\n    const container = this.el.querySelector('.split-btn-list') as HTMLElement | null;\r\n    if (!container) return;\r\n\r\n    // Only consider direct children of host that carry slot=\"menu\".\r\n    const hostChildren = Array.from(this.el.children) as Element[];\r\n    const slotted = hostChildren.filter((c) => c.getAttribute && c.getAttribute('slot') === 'menu');\r\n\r\n    slotted.forEach((node) => {\r\n      // if it's already inside container, skip\r\n      if (node.parentElement !== container) {\r\n        container.appendChild(node);\r\n      }\r\n    });\r\n  }\r\n\r\n\r\n\r\n  render() {\r\n  const textButtonClass = [\r\n    'dda-split-btn',                  // unique for main button\r\n    `btn-color-${this.button_color}`,\r\n    this.size ? `btn-size-${this.size}` : '',\r\n    this.button_shape ? `split-btn-main-shape-${this.button_shape}` : '',\r\n    this.gap ? `dda-gap-${this.gap}` : '',\r\n    this.custom_class,\r\n    this.component_mode,\r\n  ]\r\n  .filter(Boolean)\r\n  .join(' ');\r\n\r\n  const toggleButtonClass = [\r\n    'dda-split-btn dda-split-btn-toggle',                // unique for toggle button\r\n    `btn-color-${this.button_color}`,\r\n    this.size ? `btn-size-${this.size}` : '',\r\n    this.button_shape ? `split-icon-btn-shape-${this.button_shape}` : '',\r\n    this.gap ? `dda-gap-${this.gap}` : '',\r\n    this.custom_class,\r\n    this.component_mode,\r\n  ]\r\n  .filter(Boolean)\r\n  .join(' ');\r\n\r\n   const listClass = `split-btn-list ${this.is_open ? 'open' : 'closed'}`;\r\n\r\n  return (\r\n    <Host>\r\n      <div class=\"split-btn-container\">\r\n        {/* Main action button */}\r\n        <button\r\n          id={this.text_button_id}\r\n          type={this.text_button_type}\r\n          class={textButtonClass}\r\n          disabled={this.disabled}\r\n          aria-label={this.aria_label || this.button_text}\r\n          name={this.text_button_name}\r\n          value={this.value}\r\n          onClick={this.handleClick}\r\n        >\r\n          {this.start_icon && (\r\n            <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">\r\n              {this.start_icon}\r\n            </i>\r\n          )}\r\n          <span>{this.button_text}</span>\r\n        </button>\r\n\r\n        {/* Dropdown toggle button */}\r\n        <button \r\n          type=\"button\"\r\n          class={toggleButtonClass}\r\n          disabled={this.disabled}\r\n          onClick={() => this.toggleSelect()}\r\n        >\r\n          <i class=\"material-icons\" aria-hidden=\"true\">\r\n            {this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\r\n          </i>\r\n        </button>\r\n\r\n        <div class={listClass} aria-hidden={!this.is_open} role=\"menu\">\r\n            <slot name=\"menu\"></slot>\r\n        </div>\r\n\r\n\r\n        {/* {this.is_open && (\r\n          <div class=\"split-btn-list\">\r\n            <slot name=\"menu\"></slot>\r\n          </div>\r\n        )} */}\r\n      </div>\r\n    </Host>\r\n  );\r\n}\r\n}\r\n"],"version":3}

package/dist/esm/dda-sticky-footer.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-sticky-footer.entry.js","mappings":"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","names":[],"sources":["src/components/dda-sticky-footer/dda-sticky-footer.css?tag=dda-sticky-footer","src/components/dda-sticky-footer/dda-sticky-footer.tsx"],"sourcesContent":[".dda-footer {\r\n    box-shadow: 0 -2px 13px 0 rgba(0, 0, 0, 0.12);\r\n    background-color: var(--dda-surface-100);\r\n    color: var(--dda-surface-0);\r\n    position: fixed;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    z-index: 5;\r\n    padding: 0 20px;\r\n    transform: translateY(0);\r\n    /* transition: transform 0.3s ease-in-out; */\r\n}\r\n.dda-footer.hidden {\r\n  transform: translateY(100%);\r\n}\r\n.footer-content {\r\n    height: 64px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n}\r\n\r\n.dda-footer-item {\r\n    display: flex;\r\n    align-items: center;\r\n    position: relative;\r\n}\r\n.dda-footer-item ul {\r\n    display: inline-flex;\r\n    align-items: center;\r\n}\r\n\r\n.dda-footer-item ul li {\r\n    padding: 0 10px;\r\n    border-inline-start: solid 1px #E0E3E2;\r\n}\r\n\r\n.dda-footer-item ul li:first-child {\r\n    border: 0px;\r\n}\r\n\r\n.foot-icon-btn a{\r\n    height: 40px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 4px;\r\n    font-size: var(--font-caption);\r\n    font-weight: var(--font-weight-regular);\r\n    color: var(--dda-surface-0);\r\n}\r\n.foot-icon-btn a:visited{\r\n    color: var(--dda-on-primary-variant-40);\r\n}\r\n.foot-icon-btn a i,\r\n.dda-footer-right button i{\r\n    color: var(--dda-on-surface-variant-30);\r\n}\r\n\r\n.foot-icon-btn a img {\r\n    height: 32px;\r\n}\r\n.dda-footer-item ul li.foot-menu{\r\n    padding: 0 5px;\r\n}\r\n.foot-menu a {\r\n    color: var(--dda-on-surface-0);\r\n}\r\n\r\n.foot-menu a i,\r\n.foot-menu a svg {\r\n    font-size: 20px;\r\n    color: var(--dda-on-surface-variant-30);\r\n    fill: var(--dda-on-surface-variant-30);\r\n}\r\n\r\n.foot-menu a img {\r\n    height: 40px;\r\n}\r\n\r\n.foot-logo a {\r\n    background-color: var(--dda-neutral-100);\r\n    height: 40px;\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.foot-logo a img {\r\n    height: 35px;\r\n}\r\n.dda-footer-right button.show-right-icon{\r\n    display: none;\r\n}\r\n/* @media only screen and (orientation: landscape) and (max-width: 768px) {\r\n    .footer-content{\r\n        height: 44px;\r\n    }\r\n    .dda-footer-item .foot-icon-btn a{\r\n        width: 35px;\r\n        height: 35px;\r\n    }\r\n} */\r\n.dda-footer .dubaiae-text-icon{\r\n    height: 18px;\r\n}\r\n.dda-footer .dubaiae-small-icon{\r\n    height: 18px;\r\n    display: none;\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n    .dda-footer {\r\n        background: transparent;\r\n        box-shadow: none;\r\n        padding-left: 32px;\r\n        padding-right: 32px;\r\n        padding-bottom: 32px;\r\n    }\r\n    .footer-content{\r\n        height: auto;\r\n    }\r\n    .foot-menu,\r\n    .foot-icon-btn a span {\r\n        display: none;\r\n    }\r\n    .dda-footer-item ul{\r\n        gap: 16px\r\n    }\r\n    .dda-footer-item ul li {\r\n        padding: 0px;\r\n        border: 0px !important;\r\n    }\r\n\r\n    .foot-icon-btn a,\r\n    .dda-footer-right button {\r\n        width: 48px;\r\n        height: 48px;\r\n        background: #ffffff;\r\n        border-radius: 50px;\r\n        border: 0px;\r\n        box-shadow: 0 6px 20px rgba(0, 0, 0, .2);\r\n    }\r\n    \r\n    .dda-footer-right button.show-right-icon{\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .foot-icon-btn a img {\r\n        height: 24px;\r\n    }\r\n\r\n    .foot-icon-btn a i{\r\n        font-size: 23px;\r\n    }\r\n    .dda-footer-right button i{\r\n        font-size: 34px;\r\n    }\r\n    .dda-footer-right .foot-right_links {\r\n        position: absolute;\r\n        bottom: 59px;\r\n        inset-inline-end: 0px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 10px;\r\n        height: 0;\r\n        overflow: hidden;\r\n    }\r\n    .dda-footer-right .foot-right_links.show-dda-icon{\r\n        height: auto;\r\n        overflow: visible;\r\n    }\r\n    .foot-right_links li.foot-icon-btn {\r\n        list-style: none;\r\n        opacity: 0;\r\n        transform: translateY(20px);\r\n        /* transition: opacity 0.4s ease, transform 0.4s ease; */\r\n    }\r\n    @media (prefers-reduced-motion: no-preference) {\r\n        .foot-right_links li.foot-icon-btn,\r\n        .dda-footer-right .foot-right_links {\r\n            transition: opacity 0.4s ease, transform 0.4s ease;\r\n        }\r\n    }\r\n    .foot-right_links.show-dda-icon li.foot-icon-btn {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n    .dda-footer .dubaiae-text-icon{\r\n        display: none;\r\n    }\r\n    .dda-footer .dubaiae-small-icon{\r\n        height: 24px;\r\n        display: block;\r\n    }\r\n\r\n    \r\n}\r\n\r\n@media (max-width: 640px) {\r\n    .dda-footer {\r\n        padding-left: 16px;\r\n        padding-right: 16px;\r\n        padding-bottom: 16px;\r\n    }\r\n}\r\n\r\n@media (max-width: 1200px) {\r\n    \r\n}\r\n\r\n@media (max-width: 1400px) {\r\n    .dda-footer-middle {\r\n        display: none;\r\n    }\r\n    \r\n}\r\n\r\n@media (prefers-reduced-motion: no-preference) {\r\n    .dda-footer {\r\n        transition: transform 0.3s ease-in-out;\r\n    }\r\n}","import { Component, Prop, h, State, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-sticky-footer',\r\n  styleUrls: ['dda-sticky-footer.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaStickyFooter {\r\n  @Element() el: HTMLElement;\r\n\r\n  @Prop() colorTheme?: string = 'light';\r\n  @Prop() happinessIconHref?: string;\r\n  @Prop() happinessIconId?: string;\r\n  @Prop() happinessIconSrc: string;\r\n  @Prop() happinessIconSrcDark: string;\r\n  @Prop() happinessIconAlt: string;\r\n  @Prop() happinessIconTooltip: string;\r\n\r\n  @Prop() accessibilityIconHref: string;\r\n  @Prop() accessibilityIconId: string;\r\n  @Prop() accessibilityIconSrc: string;\r\n  @Prop() accessibilityIconSrcDark: string;\r\n  @Prop() accessibilityIconAlt: string;\r\n  @Prop() accessibilityIconTooltip: string;\r\n\r\n  @Prop() servicesIconHref: string;\r\n  @Prop() servicesIconId: string;\r\n  @Prop() servicesIconSrc: string;\r\n  @Prop() servicesIconSrcDark: string;\r\n  @Prop() servicesIconAlt: string;\r\n  @Prop() servicesIconTooltip: string;\r\n  @Prop() servicesIconText: string;\r\n\r\n  @Prop() hideMiddleSection: boolean = false;\r\n  @Prop() middleLink: string;\r\n  @Prop() rightLink: string;\r\n\r\n  @Prop() aiIconHref: string;\r\n  @Prop() aiIconId: string;\r\n  @Prop() aiIconSrc: string;\r\n  @Prop() aiIconSrcDark: string;\r\n  @Prop() aiIconAlt: string;\r\n  @Prop() aiIconTooltip: string;\r\n\r\n  @Prop() dubaiaeIconHref: string;\r\n  @Prop() dubaiaeIconId: string;\r\n  @Prop() dubaiaeIconSrc: string;\r\n  @Prop() dubaiaeIconSrcDark: string;\r\n  @Prop() dubaiaeIconSmallSrc: string;\r\n  @Prop() dubaiaeIconAlt: string;\r\n  @Prop() dubaiaeIconTooltip: string;\r\n\r\n  @Prop() chatIconHref: string;\r\n  @Prop() chatIconId: string;\r\n  @Prop() chatIconSrc: string;\r\n  @Prop() chatIconSrcDark: string;\r\n  @Prop() chatIconAlt: string;\r\n  @Prop() chatIconTooltip: string;\r\n\r\n  @Prop() moreIconFamily: string;\r\n  @Prop() moreIcon: string;\r\n\r\n  @State() isHidden: boolean = false;\r\n  private lastScrollY: number = 0;\r\n\r\n  componentWillLoad() {\r\n    this.handleScroll = this.handleScroll.bind(this);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    window.addEventListener('scroll', this.handleScroll);\r\n  }\r\n\r\n  private toggleFooterIcons = () => {\r\n    const iconList = this.el.querySelector('.foot-right_links') as HTMLElement;\r\n    const items = iconList?.querySelectorAll('li') || [];\r\n\r\n    if (iconList) {\r\n      const isShown = iconList.classList.contains('show-dda-icon');\r\n\r\n      if (!isShown) {\r\n        iconList.classList.add('show-dda-icon');\r\n        items.forEach((item, index) => {\r\n          (item as HTMLElement).style.transitionDelay = `${index * 100}ms`;\r\n        });\r\n      } else {\r\n        items.forEach(item => {\r\n          (item as HTMLElement).style.transitionDelay = '0ms';\r\n        });\r\n        iconList.classList.remove('show-dda-icon');\r\n      }\r\n    }\r\n  };\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener('scroll', this.handleScroll);\r\n  }\r\n\r\n  handleScroll() {\r\n    const currentScrollY = window.scrollY;\r\n    this.isHidden = currentScrollY > this.lastScrollY;\r\n    this.lastScrollY = currentScrollY;\r\n  }\r\n\r\n  private parseJsonArray(jsonString: string) {\r\n    try {\r\n      return JSON.parse(jsonString);\r\n    } catch (e) {\r\n      console.error('Failed to parse JSON:', e);\r\n      return [];\r\n    }\r\n  }\r\n\r\n  happinessIconClick() {\r\n    console.log('happoness icon click');\r\n  }\r\n\r\n  accessibilityIconClick() {\r\n    console.log('Suggestion icon click');\r\n  }\r\n\r\n  servicesIconClick() {\r\n    console.log('Services icon click');\r\n  }\r\n\r\n  chatIconClick() {\r\n    console.log('chat icon click');\r\n  }\r\n\r\n  aiIconClick() {\r\n    console.log('ai icon click');\r\n  }\r\n\r\n  dubaiAEClick() {\r\n    console.log('dubai.ae icon click');\r\n  }\r\n\r\n  middleItemClick(item) {\r\n    console.log('middle link item clicked:', item);\r\n  }\r\n\r\n  rightItemClick(item) {\r\n    console.log('right link item clicked:', item);\r\n  }\r\n\r\n  render() {\r\n    const footmiddlesection = this.parseJsonArray(this.middleLink);\r\n    const footrightsection = this.parseJsonArray(this.rightLink);\r\n\r\n    return (\r\n      <div class={{ 'dda-footer': true, 'hidden': this.isHidden }}>\r\n        <div class=\"footer-content\">\r\n          <div class=\"dda-footer-item dda-footer-left\">\r\n            <ul>\r\n              {this.happinessIconSrc && (\r\n                <li class=\"foot-icon-btn\">\r\n                  <dda-tooltip title_text={this.happinessIconTooltip} description=\"\" position=\"top\">\r\n                    <a href={this.happinessIconHref} id={this.happinessIconId} onClick={this.happinessIconClick}>\r\n                      <img src={this.colorTheme == 'light' ? this.happinessIconSrc : this.happinessIconSrcDark} alt={this.happinessIconAlt} />\r\n                      <span class=\"visually-hidden\">{this.happinessIconTooltip}</span>\r\n                    </a>\r\n                  </dda-tooltip>\r\n                </li>\r\n              )}\r\n\r\n              {this.accessibilityIconSrc && (\r\n                <li class=\"foot-icon-btn\">\r\n                  <dda-tooltip title_text={this.accessibilityIconTooltip} description=\"\" position=\"top\">\r\n                    <a href={this.accessibilityIconHref} id={this.accessibilityIconId} onClick={this.accessibilityIconClick}>\r\n                      <img src={this.colorTheme == 'light' ? this.accessibilityIconSrc : this.accessibilityIconSrcDark} alt={this.accessibilityIconAlt} />\r\n                      <span class=\"visually-hidden\">{this.accessibilityIconTooltip}</span>\r\n                    </a>\r\n                  </dda-tooltip>\r\n                </li>\r\n              )}\r\n\r\n              {this.servicesIconText && (\r\n                <li class=\"foot-icon-btn\">\r\n                  <dda-tooltip title_text={this.servicesIconTooltip} description=\"\" position=\"top\">\r\n                    <a href={this.servicesIconHref} id={this.servicesIconId} onClick={this.servicesIconClick}>\r\n                      <img src={this.colorTheme == 'light' ? this.servicesIconSrc : this.servicesIconSrcDark} alt={this.servicesIconAlt} />\r\n                      <span>{this.servicesIconText}</span>\r\n                    </a>\r\n                  </dda-tooltip>\r\n                </li>\r\n              )}\r\n            </ul>\r\n          </div>\r\n\r\n          {!this.hideMiddleSection && (\r\n            <div class=\"dda-footer-item dda-footer-middle\">\r\n              <ul class=\"foot-logo\">\r\n                {footmiddlesection.map((middleItem, index) => (\r\n                  <li key={index}>\r\n                    <dda-tooltip title_text={middleItem.LogoTooltip} description=\"\" position=\"top\">\r\n                      <a href={middleItem.href} onClick={() => this.middleItemClick(middleItem)}>\r\n                        <img src={this.colorTheme == 'light' ? middleItem.src : middleItem.srcDark} alt={middleItem.alt} />\r\n                        <span class=\"visually-hidden\">{middleItem.LogoTooltip}</span>\r\n                      </a>\r\n                    </dda-tooltip>\r\n                  </li>\r\n                ))}\r\n              </ul>\r\n            </div>\r\n          )}\r\n\r\n          <div class=\"dda-footer-item dda-footer-right\">\r\n            <ul class=\"foot-right_links\">\r\n              {footrightsection.map((rightItem, index) => (\r\n                <li class=\"foot-icon-btn\" key={index}>\r\n                  <dda-tooltip title_text={rightItem.RightLinkTooltip} description=\"\" position=\"top\">\r\n                    <a\r\n                      href={rightItem.href}\r\n                      title={rightItem.title}\r\n                      aria-label={`${rightItem.IconName} ${rightItem.LinkText}`}\r\n                      id={rightItem.itemId}\r\n                      onClick={() => this.rightItemClick(rightItem)}\r\n                    >\r\n                      <i class={rightItem.IconFamily}>{rightItem.IconName}</i>\r\n                      <span>{rightItem.LinkText}</span>\r\n                    </a>\r\n                  </dda-tooltip>\r\n                </li>\r\n              ))}\r\n\r\n              {this.dubaiaeIconSrc && this.dubaiaeIconSmallSrc && (\r\n                <li class=\"foot-icon-btn\">\r\n                  <dda-tooltip title_text={this.dubaiaeIconTooltip} description=\"\" position=\"top\">\r\n                    <a href={this.dubaiaeIconHref} onClick={this.dubaiAEClick} id={this.dubaiaeIconId}>\r\n                      <img class=\"dubaiae-text-icon\" src={this.colorTheme == 'light' ? this.dubaiaeIconSrc : this.dubaiaeIconSrcDark} alt={`${this.dubaiaeIconAlt} icon desktop`} />\r\n                      <img class=\"dubaiae-small-icon\" src={this.dubaiaeIconSmallSrc} alt={`${this.dubaiaeIconAlt} icon mobile`} />\r\n                      <span class=\"visually-hidden\">{this.dubaiaeIconTooltip}</span>\r\n                    </a>\r\n                  </dda-tooltip>\r\n                </li>\r\n              )}\r\n\r\n              {this.aiIconSrc && (\r\n                <li class=\"foot-icon-btn\">\r\n                  <dda-tooltip title_text={this.aiIconTooltip} description=\"\" position=\"top\">\r\n                    <a href={this.aiIconHref} onClick={this.aiIconClick} id={this.aiIconId}>\r\n                      <img src={this.colorTheme == 'light' ? this.aiIconSrc : this.aiIconSrcDark} alt={this.aiIconAlt} />\r\n                      <span class=\"visually-hidden\">{this.aiIconTooltip}</span>\r\n                    </a>\r\n                  </dda-tooltip>\r\n                </li>\r\n              )}\r\n\r\n              {this.chatIconSrc && (\r\n                <li class=\"foot-icon-btn\">\r\n                  <dda-tooltip title_text={this.chatIconTooltip} description=\"\" position=\"top\">\r\n                    <a href={this.chatIconHref} onClick={this.chatIconClick} id={this.chatIconId}>\r\n                      <img src={this.colorTheme == 'light' ? this.chatIconSrc : this.chatIconSrcDark} alt={this.chatIconAlt} />\r\n                      <span class=\"visually-hidden\">{this.chatIconTooltip}</span>\r\n                    </a>\r\n                  </dda-tooltip>\r\n                </li>\r\n              )}\r\n            </ul>\r\n            <button type=\"button\" class=\"show-right-icon\" onClick={this.toggleFooterIcons}>\r\n              <i class={this.moreIconFamily}>{this.moreIcon}</i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dda-tabs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-tabs.entry.js","mappings":"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","names":[],"sources":["src/components/dda-tabs/dda-tabs.css?tag=dda-tabs","src/components/dda-tabs/dda-tabs.tsx"],"sourcesContent":[".dda-tabs-container {\r\n  display: inline-flex;\r\n  gap:1px;\r\n}\r\n\r\n.dda-tab-item {\r\n  min-height: 48px;\r\n  background: transparent;\r\n  display: inline-flex;\r\n  font-size: var(--font-body);\r\n  color: var(--dda-on-surface-0);\r\n  font-weight: var(--font-weight-regular);\r\n  gap: 8px;\r\n  align-items: center;\r\n  border: 0;\r\n  border-radius: 8px;\r\n  padding: 5px 16px;\r\n  cursor: pointer;\r\n  position: relative;\r\n  /* transition: all 0.25s ease-in-out; */\r\n}\r\n\r\n.light-mode .dda-tab-item{\r\n  color: var(--dda-neutral-0);\r\n}\r\n\r\n.dda-tab-item i {\r\n  font-size: 22px;\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n/* .dda-tab-item.active span,\r\n.dda-tab-item:hover span {\r\n  font-weight: var(--dda-fw-500);\r\n} */\r\n\r\n.dda-tab-default .dda-tab-item.active,\r\n.dda-tab-default .dda-tab-item:hover {\r\n  background: var(--dda-neutral-variant-94);\r\n  color: var(--dda-color-primary-40);\r\n}\r\n\r\n.light-mode.dda-tab-default .dda-tab-item.active,\r\n.light-mode.dda-tab-default .dda-tab-item:hover {\r\n  color: var(--dda-primary-40);\r\n}\r\n\r\n.dda-tab-default .dda-tab-item.active i,\r\n.dda-tab-default .dda-tab-item:hover i {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-tab-filed .dda-tab-item.active,\r\n.dda-tab-filed .dda-tab-item:hover {\r\n  background: var(--dda-color-primary-40);\r\n  color: var(--dda-neutral-100);\r\n}\r\n\r\n.light-mode.dda-tab-filed .dda-tab-item.active,\r\n.light-mode.dda-tab-filed .dda-tab-item:hover {\r\n  background: var(--dda-primary-40);\r\n}\r\n\r\n.dda-tab-filed .dda-tab-item.active i,\r\n.dda-tab-filed .dda-tab-item:hover i {\r\n  color: var(--dda-neutral-100);\r\n}\r\n\r\n.dda-tab-underline .dda-tab-item {\r\n  border-bottom: solid 1px var(--dda-neutral-90);\r\n  border-radius: 0px;\r\n}\r\n\r\n\r\n.dda-tab-underline .dda-tab-item::after,\r\n.dda-tab-underline-filled .dda-tab-item::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 50%;\r\n  width: 0;\r\n  height: 4px;\r\n  background-color: var(--dda-color-primary-40);\r\n  border-radius: 8px 8px 0px 0px;\r\n  transform: translateX(-50%);\r\n  /* transition: all 0.25s ease-in-out; */\r\n}\r\n.light-mode.dda-tab-underline .dda-tab-item::after,\r\n.light-mode.dda-tab-underline-filled .dda-tab-item::after{\r\n  background-color: var(--dda-primary-40);\r\n}\r\n.dda-tab-underline .dda-tab-item:hover::after,\r\n.dda-tab-underline .dda-tab-item.active::after,\r\n.dda-tab-underline-filled .dda-tab-item:hover::after,\r\n.dda-tab-underline-filled .dda-tab-item.active::after{\r\n  width: calc(100% - 32px);\r\n}\r\n\r\n.dda-tab-underline .dda-tab-item.active,\r\n.dda-tab-underline .dda-tab-item.active i,\r\n.dda-tab-underline-filled .dda-tab-item.active,\r\n.dda-tab-underline-filled .dda-tab-item.active i,\r\n.dda-tab-underline .dda-tab-item:hover,\r\n.dda-tab-underline .dda-tab-item:hover i,\r\n.dda-tab-underline-filled .dda-tab-item:hover,\r\n.dda-tab-underline-filled .dda-tab-item:hover i {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n\r\n.light-mode.dda-tab-underline .dda-tab-item.active,\r\n.light-mode.dda-tab-underline .dda-tab-item.active i,\r\n.light-mode.dda-tab-underline-filled .dda-tab-item.active,\r\n.light-mode.dda-tab-underline-filled .dda-tab-item.active i,\r\n.light-mode.dda-tab-underline .dda-tab-item:hover,\r\n.light-mode.dda-tab-underline .dda-tab-item:hover i,\r\n.light-mode.dda-tab-underline-filled .dda-tab-item:hover,\r\n.light-mode.dda-tab-underline-filled .dda-tab-item:hover i {\r\n  color: var(--dda-primary-40);\r\n}\r\n\r\n.dda-tab-underline-filled .dda-tab-item.active,\r\n.dda-tab-underline-filled .dda-tab-item:hover {\r\n  background: var(--dda-neutral-variant-94);\r\n}\r\n\r\n.dda-tabs-container.dda-vertical-tab{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n}\r\n.dda-tabs-container.dda-vertical-tab button{\r\n  width: 100%;\r\n  text-align: start;\r\n}\r\n\r\n\r\n.dda-tab-underline.dda-vertical-tab .dda-tab-item::after,\r\n.dda-tab-underline-filled.dda-vertical-tab .dda-tab-item::after {\r\n  top: 50%;\r\n  inset-inline-start: 0;\r\n  width: 4px;\r\n  height: 0;\r\n  border-radius: 0px 8px 8px 0px;\r\n  transform: translateY(-50%);\r\n}\r\n:root[dir='rtl'] .dda-tab-underline.dda-vertical-tab .dda-tab-item::after,\r\n:root[dir='rtl'] .dda-tab-underline-filled.dda-vertical-tab .dda-tab-item::after{\r\n  border-radius: 8px 0px 0px 8px;\r\n}\r\n.dda-tab-underline.dda-vertical-tab .dda-tab-item:hover::after,\r\n.dda-tab-underline.dda-vertical-tab .dda-tab-item.active::after,\r\n.dda-tab-underline-filled.dda-vertical-tab .dda-tab-item:hover::after,\r\n.dda-tab-underline-filled.dda-vertical-tab .dda-tab-item.active::after {\r\n  height: calc(100% - 14px);\r\n}\r\n\r\n@media (prefers-reduced-motion: no-preference) {\r\n  .dda-tab-item {\r\n    transition: all 0.25s ease-in-out;\r\n  }\r\n  .dda-tab-underline .dda-tab-item::after,\r\n  .dda-tab-underline-filled .dda-tab-item::after {\r\n    transition: all 0.25s ease-in-out;\r\n  }\r\n}","import { Component, Prop, State, h, Host, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-tabs',\r\n  styleUrls: ['dda-tabs.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaTabs {\r\n  @Prop() type: 'text' | 'text-icon' = 'text';\r\n  @Prop() hover_style: 'dda-tab-default' | 'dda-tab-filed' | 'dda-tab-underline' | 'dda-tab-underline-filled' = 'dda-tab-default';\r\n  @Prop() border_bottom: boolean = false;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() button_ids: string = '[\"tab-btn-1\", \"tab-btn-2\", \"tab-btn-3\"]'; // New prop for dynamic button IDs\r\n  @Prop() tab_value: string;\r\n  @Prop() tab_texts: string = '[\"Tab 1\", \"Tab 2\", \"Tab 3\"]'; // Keep it as a string\r\n  @Prop() tab_icons: string = '[\"sentiment_satisfied\", \"sentiment_satisfied\", \"sentiment_satisfied\"]';\r\n  @Prop() button_name: string;\r\n  @Prop() tab_type: 'dda-horizontal-tab' | 'dda-vertical-tab' = 'dda-horizontal-tab';\r\n  @Event() tabClick: EventEmitter<number>;\r\n\r\n  @Prop() button_values: string = '[\"\", \"\", \"\"]';\r\n\r\n  // private tabhandler = (index) => {\r\n  //   this.tabClick.emit(index);\r\n  // };\r\n\r\n  @State() active_tab: number = 0;\r\n\r\n  get parsedButtonValues() {\r\n    try {\r\n      return JSON.parse(this.button_values);\r\n    } catch (error) {\r\n      console.error('Error parsing button_values:', error);\r\n      return ['', '', ''];\r\n    }\r\n  }\r\n\r\n  get parsedTabs() {\r\n    try {\r\n      return JSON.parse(this.tab_texts); // Parse the string into an array\r\n    } catch (error) {\r\n      console.error('Error parsing tab_texts:', error);\r\n      return ['Tab 1', 'Tab 2', 'Tab 3']; // Fallback to default\r\n    }\r\n  }\r\n\r\n  get parsedIcons() {\r\n    try {\r\n      return JSON.parse(this.tab_icons); // Parse the string into an array\r\n    } catch (error) {\r\n      console.error('Error parsing tabicons:', error);\r\n      return ['sentiment_satisfied', 'sentiment_satisfied', 'sentiment_satisfied']; // Fallback to default\r\n    }\r\n  }\r\n\r\n  get parsedButtonIds() {\r\n    try {\r\n      return JSON.parse(this.button_ids);\r\n    } catch (error) {\r\n      console.error('Error parsing button_ids:', error);\r\n      return ['tab-btn-1', 'tab-btn-2', 'tab-btn-3'];\r\n    }\r\n  }\r\n\r\n  // setActiveTab(index: number) {\r\n  //   this.active_tab = index;\r\n  //   if (this.tabClick) {\r\n  //     this.tabhandler(index);\r\n  //   }\r\n  // }\r\n  setActiveTab(index: number) {\r\n    this.active_tab = index;\r\n    this.tabClick.emit(index);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div role=\"tablist\" aria-label=\"Tab Navigation\" class={`dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode} ${this.tab_type}`}>\r\n          {this.parsedTabs.map((title, index) => (\r\n            <button\r\n              id={this.parsedButtonIds[index] || `tab-btn-${index + 1}`}\r\n              name={this.button_name}\r\n              aria-label={title}\r\n              type=\"button\"\r\n              value={this.parsedButtonValues[index] || ''}\r\n              class={`dda-tab-item ${this.active_tab === index ? 'active' : ''}`}\r\n              role=\"tab\"\r\n              aria-selected={this.active_tab === index ? 'true' : 'false'}\r\n              aria-controls={`tab-btn-${index + 1}`}\r\n              onClick={() => this.setActiveTab(index)}\r\n            >\r\n              {this.type === 'text-icon' && (\r\n                <i class={`material-icons`} aria-hidden=\"true\">\r\n                  {this.parsedIcons[index] || ''}\r\n                </i>\r\n              )}\r\n              <span>{title}</span>\r\n            </button>\r\n          ))}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dda-team-member-card.entry.js

@@ -1,25 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-52b38a93.js';
-
-const ddaTeamMemberCardCss = ".dda-team-member-card{padding:24px 32px;display:flex;flex-direction:column;gap:24px}.dda-team-member-card-header{display:flex}.dda-team-member-card-header svg path{fill:var(--dda-on-surface-0)}.light-mode .dda-team-member-card-header svg path{fill:var(--dda-neutral-0)}.dda-team-member-card-image{display:block;margin:0 auto;width:93px;height:93px;border-radius:50%}.dda-team-member-card-position{color:#666}.dda-team-member-card-body{display:flex}.dda-team-member-card.dda-team-member-card-blue{background:var(--dda-neutral-variant-92)}.dda-team-member-card-blue .dda-team-member-card-header i,.dda-team-member-card-blue .card-balance-label,.dda-team-member-card-blue .card-balance,.dda-team-member-card-blue .dda-card-name,.dda-team-member-card-blue .dda-card-number{color:var(--dda-neutral-100)}.dda-team-member-card-blue .dda-team-member-card-header svg path{fill:var(--dda-neutral-100)}";
-const DdaTeamMemberCardStyle0 = ddaTeamMemberCardCss;
-
-const DdaTeamMemberCard = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.custom_class = '';
-    }
-    render() {
-        const cardClass = [
-            'dda-team-member-card dda-card',
-            this.design ? `dda-team-member-card-${this.design}` : '',
-            this.custom_class ? `${this.custom_class}` : "",
-            this.component_mode,
-        ].filter(Boolean).join(' ');
-        return (h(Host, { key: '2ce39741286a1ac743abeca90aa11324c17cc5a7' }, h("div", { key: '857427c233a6edc4b6600648d882a21473c881ee', class: cardClass }, h("img", { key: '19bfb7efe0aff1fc6dfac5ae4f7b3e442b2720fe', class: "dda-team-member-card-image", src: this.image_src, alt: this.image_alt }), h("div", { key: 'f9c1a85b02eefd9559eb883de1e7166e03a315f7', class: "dda-text-center gap-xl " }, h("h5", { key: '910f6376c151618640ba0f5254362b6a73c31da6', class: "h5 Regular" }, this.team_member_name), h("p", { key: '8b7e50a6bff58ce2c2d117dd499d78533ba64734', class: "body Regular dda-team-member-card-position" }, this.team_member_position), h("slot", { key: 'fcd40481949e024d882238ea194ccc99df6dc46b' })))));
-    }
-};
-DdaTeamMemberCard.style = DdaTeamMemberCardStyle0;
-
-export { DdaTeamMemberCard as dda_team_member_card };
-
-//# sourceMappingURL=dda-team-member-card.entry.js.map

package/dist/esm/dda-team-member-card.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-team-member-card.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,63BAA63B,CAAC;AAC35B,gCAAe,oBAAoB;;MCMtB,iBAAiB;IAL9B;;QAWU,iBAAY,GAAY,EAAE,CAAC;KAwBpC;IArBC,MAAM;QACJ,MAAM,SAAS,GAAG;YAChB,+BAA+B;YAC/B,IAAI,CAAC,MAAM,GAAG,wBAAwB,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;YACxD,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;YAC/C,IAAI,CAAC,cAAc;SACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,SAAS,IACnB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,GAAG,EACnF,4DAAK,KAAK,EAAC,yBAAyB,IAClC,2DAAI,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,gBAAgB,CAAM,EACnD,0DAAG,KAAK,EAAC,4CAA4C,IAAE,IAAI,CAAC,oBAAoB,CAAK,EACrF,8DAAa,CACT,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/cards/dda-team-member-card/dda-team-member-card.css?tag=dda-team-member-card","src/components/cards/dda-team-member-card/dda-team-member-card.tsx"],"sourcesContent":[".dda-team-member-card{\r\n  padding: 24px 32px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 24px;\r\n}\r\n\r\n.dda-team-member-card-header{\r\n  display: flex;\r\n}\r\n.dda-team-member-card-header svg path{\r\n  fill: var(--dda-on-surface-0);\r\n}\r\n.light-mode .dda-team-member-card-header svg path{\r\n  fill: var(--dda-neutral-0);\r\n}\r\n.dda-team-member-card-image {\r\n  display: block;\r\n  margin: 0 auto;\r\n  width: 93px;\r\n  height: 93px;\r\n  border-radius: 50%;\r\n}\r\n\r\n\r\n\r\n.dda-team-member-card-position {\r\n  color: #666;\r\n}\r\n\r\n.dda-team-member-card-body{\r\n  display: flex;\r\n}\r\n.dda-team-member-card.dda-team-member-card-blue{\r\n  background: var(--dda-neutral-variant-92);\r\n}\r\n\r\n.dda-team-member-card-blue .dda-team-member-card-header i,\r\n.dda-team-member-card-blue .card-balance-label,\r\n.dda-team-member-card-blue .card-balance,\r\n.dda-team-member-card-blue .dda-card-name,\r\n.dda-team-member-card-blue .dda-card-number{\r\n  color: var(--dda-neutral-100);\r\n}\r\n.dda-team-member-card-blue .dda-team-member-card-header svg path{\r\n  fill: var(--dda-neutral-100);\r\n}","import { Component, Prop, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-team-member-card',\r\n  styleUrls: ['dda-team-member-card.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaTeamMemberCard {\r\n  @Prop() image_src: string;\r\n  @Prop() image_alt: string;\r\n  @Prop() team_member_name: string;\r\n  @Prop() team_member_position: string;\r\n  @Prop() design: string;\r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n\r\n  render() {\r\n    const cardClass = [\r\n      'dda-team-member-card dda-card',\r\n      this.design ? `dda-team-member-card-${this.design}` : '',\r\n      this.custom_class ? `${this.custom_class}` : \"\",\r\n      this.component_mode,\r\n    ].filter(Boolean).join(' ');\r\n\r\n    return (\r\n      <Host>\r\n        <div class={cardClass}>\r\n          <img class=\"dda-team-member-card-image\" src={this.image_src} alt={this.image_alt}/>\r\n          <div class=\"dda-text-center gap-xl \">\r\n            <h5 class=\"h5 Regular\">{this.team_member_name}</h5>\r\n            <p class=\"body Regular dda-team-member-card-position\">{this.team_member_position}</p>\r\n            <slot></slot>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}