@designbasekorea/ui-wc 0.5.6 → 0.6.1

package/dist/esm/components/db-card.js

@@ -1,265 +1 @@
-const VARIANTS = ['default', 'flat'];
-const SIZES = ['s', 'm', 'l'];
-class DbCard extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.selectCheckbox = null;
-        this.imageNode = null;
-        this.handleClick = (event) => {
-            if (this.disabled || this.loading) {
-                event.preventDefault();
-                event.stopPropagation();
-                return;
-            }
-            if (this.clickable) {
-                this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
-            }
-        };
-        this.handleKeyDown = (event) => {
-            if (!this.clickable || (event.key !== 'Enter' && event.key !== ' '))
-                return;
-            event.preventDefault();
-            this.click();
-        };
-        this.handleSelect = (event) => {
-            event?.stopPropagation();
-            if (this.disabled || this.loading || !this.selectable)
-                return;
-            const next = !this.selected;
-            this.toggleAttribute('selected', next);
-            if (this.selectCheckbox) {
-                if (next)
-                    this.selectCheckbox.setAttribute('checked', '');
-                else
-                    this.selectCheckbox.removeAttribute('checked');
-            }
-            this.dispatchEvent(new CustomEvent('db-select', {
-                bubbles: true,
-                composed: true,
-                detail: { selected: next },
-            }));
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'variant',
-            'size',
-            'full-width',
-            'clickable',
-            'hoverable',
-            'selectable',
-            'selected',
-            'disabled',
-            'loading',
-            'image',
-            'image-alt',
-        ];
-    }
-    get variant() {
-        return this.getAttribute('variant') || 'default';
-    }
-    set variant(value) {
-        this.setAttribute('variant', value);
-    }
-    get size() {
-        return this.getAttribute('size') || 'm';
-    }
-    set size(value) {
-        this.setAttribute('size', value);
-    }
-    get clickable() {
-        return this.hasAttribute('clickable');
-    }
-    set clickable(value) {
-        this.toggleAttribute('clickable', value);
-    }
-    get disabled() {
-        return this.hasAttribute('disabled');
-    }
-    set disabled(value) {
-        this.toggleAttribute('disabled', value);
-    }
-    get loading() {
-        return this.hasAttribute('loading');
-    }
-    set loading(value) {
-        this.toggleAttribute('loading', value);
-    }
-    get fullWidth() {
-        return this.hasAttribute('full-width');
-    }
-    set fullWidth(value) {
-        this.toggleAttribute('full-width', value);
-    }
-    get hoverable() {
-        return this.hasAttribute('hoverable');
-    }
-    set hoverable(value) {
-        this.toggleAttribute('hoverable', value);
-    }
-    get selectable() {
-        return this.hasAttribute('selectable');
-    }
-    set selectable(value) {
-        this.toggleAttribute('selectable', value);
-    }
-    get selected() {
-        return this.hasAttribute('selected');
-    }
-    set selected(value) {
-        this.toggleAttribute('selected', value);
-    }
-    connectedCallback() {
-        this.addEventListener('click', this.handleClick);
-        this.addEventListener('keydown', this.handleKeyDown);
-        this.sync();
-    }
-    disconnectedCallback() {
-        this.removeEventListener('click', this.handleClick);
-        this.removeEventListener('keydown', this.handleKeyDown);
-    }
-    attributeChangedCallback(name) {
-        if (!this.isConnected)
-            return;
-        this.sync();
-        if (name === 'selected' && this.selectCheckbox) {
-            if (this.selected)
-                this.selectCheckbox.setAttribute('checked', '');
-            else
-                this.selectCheckbox.removeAttribute('checked');
-        }
-    }
-    hasMediaSection() {
-        const imageSrc = this.getAttribute('image');
-        if (imageSrc)
-            return true;
-        return (this.querySelector(':scope > .designbase-wc-card__thumbnail, :scope > .designbase-wc-card__media, :scope > [slot="media"], :scope > [slot="thumbnail"]') !== null);
-    }
-    hasFooterSection() {
-        return this.querySelector(':scope > .designbase-wc-card__footer, :scope > [slot="footer"]') !== null;
-    }
-    syncImageMedia() {
-        const imageSrc = this.getAttribute('image');
-        const userMedia = this.querySelector(':scope > .designbase-wc-card__thumbnail, :scope > .designbase-wc-card__media, :scope > [slot="media"], :scope > [slot="thumbnail"]');
-        if (!imageSrc) {
-            if (this.imageNode) {
-                this.imageNode.remove();
-                this.imageNode = null;
-            }
-            return;
-        }
-        if (userMedia && userMedia !== this.imageNode) {
-            if (this.imageNode) {
-                this.imageNode.remove();
-                this.imageNode = null;
-            }
-            return;
-        }
-        if (!this.imageNode) {
-            this.imageNode = document.createElement('div');
-            this.imageNode.className = 'designbase-wc-card__media designbase-wc-card__thumbnail';
-            this.imageNode.setAttribute('slot', 'media');
-            const img = document.createElement('img');
-            img.className = 'designbase-wc-card__thumbnail-image';
-            this.imageNode.append(img);
-            const first = this.querySelector(':scope > .designbase-wc-card__body, :scope > [slot="body"], :scope > .designbase-wc-card__footer, :scope > [slot="footer"]');
-            if (first)
-                this.insertBefore(this.imageNode, first);
-            else
-                this.insertBefore(this.imageNode, this.firstChild);
-        }
-        const img = this.imageNode.querySelector('img');
-        if (img) {
-            img.src = imageSrc;
-            img.alt = this.getAttribute('image-alt') || '';
-        }
-    }
-    sync() {
-        this.syncImageMedia();
-        this.syncAttributes();
-        this.syncOverlays();
-    }
-    syncOverlays() {
-        const existingLoading = this.querySelector(':scope > .designbase-wc-card__loading-overlay');
-        const existingSelect = this.querySelector(':scope > .designbase-wc-card__select-overlay');
-        if (this.loading) {
-            if (!existingLoading) {
-                const overlay = document.createElement('div');
-                overlay.className = 'designbase-wc-card__loading-overlay';
-                overlay.setAttribute('aria-live', 'polite');
-                overlay.setAttribute('aria-busy', 'true');
-                const spinner = document.createElement('div');
-                spinner.className = 'designbase-wc-card__loading-spinner';
-                overlay.append(spinner);
-                this.append(overlay);
-            }
-        }
-        else {
-            existingLoading?.remove();
-        }
-        if (this.selectable) {
-            if (!existingSelect) {
-                const overlay = document.createElement('div');
-                overlay.className = 'designbase-wc-card__select-overlay';
-                overlay.addEventListener('click', (event) => this.handleSelect(event));
-                const checkbox = document.createElement('db-checkbox');
-                checkbox.className = 'designbase-wc-card__select-checkbox';
-                checkbox.setAttribute('size', 's');
-                checkbox.setAttribute('has-label', 'false');
-                checkbox.setAttribute('aria-label', '카드 선택');
-                if (this.selected)
-                    checkbox.setAttribute('checked', '');
-                checkbox.addEventListener('click', (event) => event.stopPropagation());
-                checkbox.addEventListener('db-change', (event) => {
-                    event.stopPropagation();
-                    this.handleSelect();
-                });
-                overlay.append(checkbox);
-                this.append(overlay);
-                this.selectCheckbox = checkbox;
-            }
-            else if (this.selectCheckbox) {
-                if (this.selected)
-                    this.selectCheckbox.setAttribute('checked', '');
-                else
-                    this.selectCheckbox.removeAttribute('checked');
-            }
-        }
-        else {
-            existingSelect?.remove();
-            this.selectCheckbox = null;
-        }
-    }
-    syncAttributes() {
-        this.classList.add('designbase-wc-card');
-        this.setAttribute('aria-disabled', String(this.disabled || this.loading));
-        if (this.clickable && !this.disabled && !this.loading) {
-            this.setAttribute('role', 'button');
-            if (!this.hasAttribute('tabindex'))
-                this.setAttribute('tabindex', '0');
-        }
-        else {
-            this.removeAttribute('role');
-            this.removeAttribute('tabindex');
-        }
-        VARIANTS.forEach((variant) => this.classList.remove(`designbase-wc-card--${variant}`));
-        SIZES.forEach((size) => this.classList.remove(`designbase-wc-card--${size}`));
-        this.classList.add(`designbase-wc-card--${VARIANTS.includes(this.variant) ? this.variant : 'default'}`);
-        this.classList.add(`designbase-wc-card--${SIZES.includes(this.size) ? this.size : 'm'}`);
-        this.classList.toggle('designbase-wc-card--full-width', this.hasAttribute('full-width'));
-        this.classList.toggle('designbase-wc-card--clickable', this.clickable);
-        this.classList.toggle('designbase-wc-card--hoverable', this.hasAttribute('hoverable'));
-        this.classList.toggle('designbase-wc-card--selectable', this.hasAttribute('selectable'));
-        this.classList.toggle('designbase-wc-card--selected', this.hasAttribute('selected'));
-        this.classList.toggle('designbase-wc-card--disabled', this.disabled);
-        this.classList.toggle('designbase-wc-card--loading', this.loading);
-        this.classList.toggle('designbase-wc-card--with-media', this.hasMediaSection());
-        this.classList.toggle('designbase-wc-card--with-thumbnail', this.hasMediaSection());
-        this.classList.toggle('designbase-wc-card--with-footer', this.hasFooterSection());
-    }
-}
-if (!customElements.get('db-card')) {
-    customElements.define('db-card', DbCard);
-}
-
-export { DbCard };
+const e=["default","flat"],t=["s","m","l"];class DbCard extends HTMLElement{constructor(){super(...arguments),this.selectCheckbox=null,this.imageNode=null,this.handleClick=e=>{if(this.disabled||this.loading)return e.preventDefault(),void e.stopPropagation();this.clickable&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=e=>{!this.clickable||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.click())},this.handleSelect=e=>{if(e?.stopPropagation(),this.disabled||this.loading||!this.selectable)return;const t=!this.selected;this.toggleAttribute("selected",t),this.selectCheckbox&&(t?this.selectCheckbox.setAttribute("checked",""):this.selectCheckbox.removeAttribute("checked")),this.dispatchEvent(new CustomEvent("db-select",{bubbles:!0,composed:!0,detail:{selected:t}}))}}static get observedAttributes(){return["variant","size","full-width","clickable","hoverable","selectable","selected","disabled","loading","image","image-alt"]}get variant(){return this.getAttribute("variant")||"default"}set variant(e){this.setAttribute("variant",e)}get size(){return this.getAttribute("size")||"m"}set size(e){this.setAttribute("size",e)}get clickable(){return this.hasAttribute("clickable")}set clickable(e){this.toggleAttribute("clickable",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){this.toggleAttribute("disabled",e)}get loading(){return this.hasAttribute("loading")}set loading(e){this.toggleAttribute("loading",e)}get fullWidth(){return this.hasAttribute("full-width")}set fullWidth(e){this.toggleAttribute("full-width",e)}get hoverable(){return this.hasAttribute("hoverable")}set hoverable(e){this.toggleAttribute("hoverable",e)}get selectable(){return this.hasAttribute("selectable")}set selectable(e){this.toggleAttribute("selectable",e)}get selected(){return this.hasAttribute("selected")}set selected(e){this.toggleAttribute("selected",e)}connectedCallback(){this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.sync()}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(e){this.isConnected&&(this.sync(),"selected"===e&&this.selectCheckbox&&(this.selected?this.selectCheckbox.setAttribute("checked",""):this.selectCheckbox.removeAttribute("checked")))}hasMediaSection(){return!!this.getAttribute("image")||null!==this.querySelector(':scope > .designbase-wc-card__thumbnail, :scope > .designbase-wc-card__media, :scope > [slot="media"], :scope > [slot="thumbnail"]')}hasFooterSection(){return null!==this.querySelector(':scope > .designbase-wc-card__footer, :scope > [slot="footer"]')}syncImageMedia(){const e=this.getAttribute("image"),t=this.querySelector(':scope > .designbase-wc-card__thumbnail, :scope > .designbase-wc-card__media, :scope > [slot="media"], :scope > [slot="thumbnail"]');if(!e)return void(this.imageNode&&(this.imageNode.remove(),this.imageNode=null));if(t&&t!==this.imageNode)return void(this.imageNode&&(this.imageNode.remove(),this.imageNode=null));if(!this.imageNode){this.imageNode=document.createElement("div"),this.imageNode.className="designbase-wc-card__media designbase-wc-card__thumbnail",this.imageNode.setAttribute("slot","media");const e=document.createElement("img");e.className="designbase-wc-card__thumbnail-image",this.imageNode.append(e);const t=this.querySelector(':scope > .designbase-wc-card__body, :scope > [slot="body"], :scope > .designbase-wc-card__footer, :scope > [slot="footer"]');t?this.insertBefore(this.imageNode,t):this.insertBefore(this.imageNode,this.firstChild)}const s=this.imageNode.querySelector("img");s&&(s.src=e,s.alt=this.getAttribute("image-alt")||"")}sync(){this.syncImageMedia(),this.syncAttributes(),this.syncOverlays()}syncOverlays(){const e=this.querySelector(":scope > .designbase-wc-card__loading-overlay"),t=this.querySelector(":scope > .designbase-wc-card__select-overlay");if(this.loading){if(!e){const e=document.createElement("div");e.className="designbase-wc-card__loading-overlay",e.setAttribute("aria-live","polite"),e.setAttribute("aria-busy","true");const t=document.createElement("div");t.className="designbase-wc-card__loading-spinner",e.append(t),this.append(e)}}else e?.remove();if(this.selectable)if(t)this.selectCheckbox&&(this.selected?this.selectCheckbox.setAttribute("checked",""):this.selectCheckbox.removeAttribute("checked"));else{const e=document.createElement("div");e.className="designbase-wc-card__select-overlay",e.addEventListener("click",e=>this.handleSelect(e));const t=document.createElement("db-checkbox");t.className="designbase-wc-card__select-checkbox",t.setAttribute("size","s"),t.setAttribute("has-label","false"),t.setAttribute("aria-label","카드 선택"),this.selected&&t.setAttribute("checked",""),t.addEventListener("click",e=>e.stopPropagation()),t.addEventListener("db-change",e=>{e.stopPropagation(),this.handleSelect()}),e.append(t),this.append(e),this.selectCheckbox=t}else t?.remove(),this.selectCheckbox=null}syncAttributes(){this.classList.add("designbase-wc-card"),this.setAttribute("aria-disabled",String(this.disabled||this.loading)),!this.clickable||this.disabled||this.loading?(this.removeAttribute("role"),this.removeAttribute("tabindex")):(this.setAttribute("role","button"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0")),e.forEach(e=>this.classList.remove(`designbase-wc-card--${e}`)),t.forEach(e=>this.classList.remove(`designbase-wc-card--${e}`)),this.classList.add(`designbase-wc-card--${e.includes(this.variant)?this.variant:"default"}`),this.classList.add(`designbase-wc-card--${t.includes(this.size)?this.size:"m"}`),this.classList.toggle("designbase-wc-card--full-width",this.hasAttribute("full-width")),this.classList.toggle("designbase-wc-card--clickable",this.clickable),this.classList.toggle("designbase-wc-card--hoverable",this.hasAttribute("hoverable")),this.classList.toggle("designbase-wc-card--selectable",this.hasAttribute("selectable")),this.classList.toggle("designbase-wc-card--selected",this.hasAttribute("selected")),this.classList.toggle("designbase-wc-card--disabled",this.disabled),this.classList.toggle("designbase-wc-card--loading",this.loading),this.classList.toggle("designbase-wc-card--with-media",this.hasMediaSection()),this.classList.toggle("designbase-wc-card--with-thumbnail",this.hasMediaSection()),this.classList.toggle("designbase-wc-card--with-footer",this.hasFooterSection())}}customElements.get("db-card")||customElements.define("db-card",DbCard);export{DbCard};

package/dist/esm/components/db-carousel.js

@@ -1,264 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-class DbCarousel extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.currentIndex = 0;
-        this.timer = null;
-        this.isAutoPlaying = false;
-    }
-    static get observedAttributes() {
-        return [
-            'items',
-            'size',
-            'variant',
-            'theme',
-            'transition',
-            'auto-play',
-            'auto-play-interval',
-            'infinite',
-            'show-navigation',
-            'show-indicators',
-            'indicator-style',
-            'show-auto-play-control',
-            'show-title',
-            'show-description',
-            'disabled',
-            'readonly',
-        ];
-    }
-    get items() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('items') || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    set items(value) {
-        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    connectedCallback() {
-        this.style.display = 'block';
-        this.clampCurrentIndex();
-        this.isAutoPlaying = this.getBool('auto-play');
-        this.startAutoPlay();
-        this.render();
-    }
-    disconnectedCallback() {
-        this.stopAutoPlay();
-    }
-    attributeChangedCallback(name) {
-        if (name === 'items')
-            this.clampCurrentIndex();
-        if (name === 'auto-play' || name === 'auto-play-interval') {
-            this.isAutoPlaying = this.getBool('auto-play');
-            this.startAutoPlay();
-        }
-        this.render();
-    }
-    getBool(name, fallback = false) {
-        if (!this.hasAttribute(name))
-            return fallback;
-        const value = this.getAttribute(name);
-        return value === '' || value === 'true';
-    }
-    clampCurrentIndex() {
-        if (this.currentIndex >= this.items.length)
-            this.currentIndex = 0;
-    }
-    stopAutoPlay() {
-        if (this.timer) {
-            window.clearInterval(this.timer);
-            this.timer = null;
-        }
-    }
-    startAutoPlay() {
-        this.stopAutoPlay();
-        if (!this.isAutoPlaying || this.items.length <= 1)
-            return;
-        const interval = Math.max(1000, Number(this.getAttribute('auto-play-interval') || 5000));
-        this.timer = window.setInterval(() => this.goToNext(), interval);
-    }
-    getIndicatorType() {
-        const useIndicatorAutoplay = this.getBool('show-auto-play-control', true) && this.getBool('show-indicators', true) && this.items.length > 1;
-        if (useIndicatorAutoplay)
-            return 'combined';
-        const style = this.getAttribute('indicator-style') || 'dots';
-        if (style === 'lines')
-            return 'line';
-        if (style === 'numbers')
-            return 'numbers';
-        return 'dots';
-    }
-    getIndicatorSize() {
-        const size = this.getAttribute('size') || 'm';
-        return size === 'l' || size === 'xl' ? 'm' : 's';
-    }
-    goTo(index) {
-        if (index < 0 || index >= this.items.length)
-            return;
-        this.currentIndex = index;
-        this.dispatchEvent(new CustomEvent('db-slide-change', { detail: { index }, bubbles: true, composed: true }));
-        this.render();
-    }
-    goToPrev() {
-        if (this.items.length === 0)
-            return;
-        const infinite = this.getBool('infinite', true);
-        const next = this.currentIndex - 1;
-        if (next < 0)
-            this.goTo(infinite ? this.items.length - 1 : 0);
-        else
-            this.goTo(next);
-    }
-    goToNext() {
-        if (this.items.length === 0)
-            return;
-        const infinite = this.getBool('infinite', true);
-        const next = this.currentIndex + 1;
-        if (next >= this.items.length)
-            this.goTo(infinite ? 0 : this.items.length - 1);
-        else
-            this.goTo(next);
-    }
-    render() {
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const theme = this.getAttribute('theme') || 'light';
-        const transition = this.getAttribute('transition') || 'slide';
-        const showNavigation = this.getBool('show-navigation', true);
-        const showIndicators = this.getBool('show-indicators', true);
-        const showAutoPlayControl = this.getBool('show-auto-play-control', true);
-        const showTitle = this.getBool('show-title', true);
-        const showDescription = this.getBool('show-description', true);
-        const disabled = this.getBool('disabled');
-        const readonly = this.getBool('readonly');
-        const indicatorStyle = this.getAttribute('indicator-style') || 'dots';
-        const useIndicatorAutoplay = showAutoPlayControl && showIndicators && this.items.length > 1;
-        this.className = [
-            'designbase-wc-carousel',
-            `designbase-wc-carousel--size-${size}`,
-            `designbase-wc-carousel--variant-${variant}`,
-            `designbase-wc-carousel--theme-${theme}`,
-            `designbase-wc-carousel--transition-${transition}`,
-            `designbase-wc-carousel--indicator-${indicatorStyle}`,
-            disabled && 'designbase-wc-carousel--disabled',
-            readonly && 'designbase-wc-carousel--readonly',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const container = document.createElement('div');
-        container.className = 'designbase-wc-carousel__container';
-        const track = document.createElement('div');
-        track.className = 'designbase-wc-carousel__track';
-        track.style.transform = `translateX(-${this.currentIndex * 100}%)`;
-        this.items.forEach((item, index) => {
-            const slide = document.createElement('div');
-            slide.className = `designbase-wc-carousel__slide${index === this.currentIndex ? ' designbase-wc-carousel__slide--active' : ''}`;
-            slide.style.flex = '0 0 100%';
-            slide.style.width = '100%';
-            slide.style.height = '100%';
-            slide.style.minWidth = '0';
-            const captionColor = item.image ? '#ffffff' : '';
-            if (captionColor)
-                slide.style.color = captionColor;
-            if (item.image) {
-                const imageWrap = document.createElement('div');
-                imageWrap.className = 'designbase-wc-carousel__slide-image';
-                const image = document.createElement('img');
-                image.className = 'designbase-wc-carousel__slide-img';
-                image.src = item.image;
-                image.alt = item.alt || item.title || `Slide ${index + 1}`;
-                imageWrap.append(image);
-                slide.append(imageWrap);
-            }
-            if ((showTitle && item.title) || (showDescription && item.description)) {
-                const info = document.createElement('div');
-                info.className = 'designbase-wc-carousel__slide-info';
-                if (captionColor)
-                    info.style.color = captionColor;
-                if (showTitle && item.title) {
-                    const title = document.createElement('h3');
-                    title.className = 'designbase-wc-carousel__slide-title';
-                    title.textContent = item.title;
-                    if (captionColor)
-                        title.style.color = captionColor;
-                    info.append(title);
-                }
-                if (showDescription && item.description) {
-                    const description = document.createElement('p');
-                    description.className = 'designbase-wc-carousel__slide-description';
-                    description.textContent = item.description;
-                    if (captionColor)
-                        description.style.color = captionColor;
-                    info.append(description);
-                }
-                slide.append(info);
-            }
-            slide.addEventListener('click', () => {
-                this.dispatchEvent(new CustomEvent('db-item-click', { detail: { item, index }, bubbles: true, composed: true }));
-            });
-            track.append(slide);
-        });
-        container.append(track);
-        if (showNavigation && this.items.length > 1) {
-            const prev = document.createElement('button');
-            prev.className = 'designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--prev';
-            prev.type = 'button';
-            prev.append(createDbIcon('chevron-left', 20));
-            prev.disabled = disabled || readonly;
-            prev.addEventListener('click', () => this.goToPrev());
-            const next = document.createElement('button');
-            next.className = 'designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--next';
-            next.type = 'button';
-            next.append(createDbIcon('chevron-right', 20));
-            next.disabled = disabled || readonly;
-            next.addEventListener('click', () => this.goToNext());
-            container.append(prev, next);
-        }
-        const children = [container];
-        if (showIndicators && this.items.length > 1) {
-            const controls = document.createElement('div');
-            controls.className = 'designbase-wc-carousel__controls';
-            const indicators = document.createElement('div');
-            indicators.className = 'designbase-wc-carousel__indicators';
-            const indicator = document.createElement('db-indicator');
-            indicator.setAttribute('current', String(this.currentIndex));
-            indicator.setAttribute('total', String(this.items.length));
-            indicator.setAttribute('type', this.getIndicatorType());
-            indicator.setAttribute('size', this.getIndicatorSize());
-            indicator.setAttribute('clickable', '');
-            if (useIndicatorAutoplay) {
-                indicator.setAttribute('timer', '');
-                indicator.setAttribute('timer-duration', String(Math.max(1000, Number(this.getAttribute('auto-play-interval') || 5000))));
-                indicator.setAttribute('auto-roll', 'false');
-                if (this.isAutoPlaying)
-                    indicator.setAttribute('playing', '');
-                else
-                    indicator.removeAttribute('playing');
-                if (disabled || readonly)
-                    indicator.setAttribute('playback-disabled', '');
-            }
-            indicator.addEventListener('db-step-click', ((event) => {
-                const customEvent = event;
-                this.goTo(customEvent.detail.index);
-            }));
-            indicator.addEventListener('db-playing-change', ((event) => {
-                const customEvent = event;
-                this.isAutoPlaying = customEvent.detail.playing;
-                this.startAutoPlay();
-                this.render();
-            }));
-            indicators.append(indicator);
-            controls.append(indicators);
-            children.push(controls);
-        }
-        this.replaceChildren(...children);
-    }
-}
-if (!customElements.get('db-carousel'))
-    customElements.define('db-carousel', DbCarousel);
-
-export { DbCarousel };
+import{createDbIcon as t}from"./db-icons.js";class DbCarousel extends HTMLElement{constructor(){super(...arguments),this.currentIndex=0,this.timer=null,this.isAutoPlaying=!1}static get observedAttributes(){return["items","size","variant","theme","transition","auto-play","auto-play-interval","infinite","show-navigation","show-indicators","indicator-style","show-auto-play-control","show-title","show-description","disabled","readonly"]}get items(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}set items(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}connectedCallback(){this.style.display="block",this.clampCurrentIndex(),this.isAutoPlaying=this.getBool("auto-play"),this.startAutoPlay(),this.render()}disconnectedCallback(){this.stopAutoPlay()}attributeChangedCallback(t){"items"===t&&this.clampCurrentIndex(),"auto-play"!==t&&"auto-play-interval"!==t||(this.isAutoPlaying=this.getBool("auto-play"),this.startAutoPlay()),this.render()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const s=this.getAttribute(t);return""===s||"true"===s}clampCurrentIndex(){this.currentIndex>=this.items.length&&(this.currentIndex=0)}stopAutoPlay(){this.timer&&(window.clearInterval(this.timer),this.timer=null)}startAutoPlay(){if(this.stopAutoPlay(),!this.isAutoPlaying||this.items.length<=1)return;const t=Math.max(1e3,Number(this.getAttribute("auto-play-interval")||5e3));this.timer=window.setInterval(()=>this.goToNext(),t)}getIndicatorType(){if(this.getBool("show-auto-play-control",!0)&&this.getBool("show-indicators",!0)&&this.items.length>1)return"combined";const t=this.getAttribute("indicator-style")||"dots";return"lines"===t?"line":"numbers"===t?"numbers":"dots"}getIndicatorSize(){const t=this.getAttribute("size")||"m";return"l"===t||"xl"===t?"m":"s"}goTo(t){t<0||t>=this.items.length||(this.currentIndex=t,this.dispatchEvent(new CustomEvent("db-slide-change",{detail:{index:t},bubbles:!0,composed:!0})),this.render())}goToPrev(){if(0===this.items.length)return;const t=this.getBool("infinite",!0),e=this.currentIndex-1;e<0?this.goTo(t?this.items.length-1:0):this.goTo(e)}goToNext(){if(0===this.items.length)return;const t=this.getBool("infinite",!0),e=this.currentIndex+1;e>=this.items.length?this.goTo(t?0:this.items.length-1):this.goTo(e)}render(){const e=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",i=this.getAttribute("theme")||"light",n=this.getAttribute("transition")||"slide",a=this.getBool("show-navigation",!0),o=this.getBool("show-indicators",!0),r=this.getBool("show-auto-play-control",!0),l=this.getBool("show-title",!0),c=this.getBool("show-description",!0),d=this.getBool("disabled"),u=this.getBool("readonly"),h=this.getAttribute("indicator-style")||"dots",g=r&&o&&this.items.length>1;this.className=["designbase-wc-carousel",`designbase-wc-carousel--size-${e}`,`designbase-wc-carousel--variant-${s}`,`designbase-wc-carousel--theme-${i}`,`designbase-wc-carousel--transition-${n}`,`designbase-wc-carousel--indicator-${h}`,d&&"designbase-wc-carousel--disabled",u&&"designbase-wc-carousel--readonly"].filter(Boolean).join(" ");const m=document.createElement("div");m.className="designbase-wc-carousel__container";const b=document.createElement("div");if(b.className="designbase-wc-carousel__track",b.style.transform=`translateX(-${100*this.currentIndex}%)`,this.items.forEach((t,e)=>{const s=document.createElement("div");s.className="designbase-wc-carousel__slide"+(e===this.currentIndex?" designbase-wc-carousel__slide--active":""),s.style.flex="0 0 100%",s.style.width="100%",s.style.height="100%",s.style.minWidth="0";const i=t.image?"#ffffff":"";if(i&&(s.style.color=i),t.image){const i=document.createElement("div");i.className="designbase-wc-carousel__slide-image";const n=document.createElement("img");n.className="designbase-wc-carousel__slide-img",n.src=t.image,n.alt=t.alt||t.title||`Slide ${e+1}`,i.append(n),s.append(i)}if(l&&t.title||c&&t.description){const e=document.createElement("div");if(e.className="designbase-wc-carousel__slide-info",i&&(e.style.color=i),l&&t.title){const s=document.createElement("h3");s.className="designbase-wc-carousel__slide-title",s.textContent=t.title,i&&(s.style.color=i),e.append(s)}if(c&&t.description){const s=document.createElement("p");s.className="designbase-wc-carousel__slide-description",s.textContent=t.description,i&&(s.style.color=i),e.append(s)}s.append(e)}s.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:t,index:e},bubbles:!0,composed:!0}))}),b.append(s)}),m.append(b),a&&this.items.length>1){const e=document.createElement("button");e.className="designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--prev",e.type="button",e.append(t("chevron-left",20)),e.disabled=d||u,e.addEventListener("click",()=>this.goToPrev());const s=document.createElement("button");s.className="designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--next",s.type="button",s.append(t("chevron-right",20)),s.disabled=d||u,s.addEventListener("click",()=>this.goToNext()),m.append(e,s)}const p=[m];if(o&&this.items.length>1){const t=document.createElement("div");t.className="designbase-wc-carousel__controls";const e=document.createElement("div");e.className="designbase-wc-carousel__indicators";const s=document.createElement("db-indicator");s.setAttribute("current",String(this.currentIndex)),s.setAttribute("total",String(this.items.length)),s.setAttribute("type",this.getIndicatorType()),s.setAttribute("size",this.getIndicatorSize()),s.setAttribute("clickable",""),g&&(s.setAttribute("timer",""),s.setAttribute("timer-duration",String(Math.max(1e3,Number(this.getAttribute("auto-play-interval")||5e3)))),s.setAttribute("auto-roll","false"),this.isAutoPlaying?s.setAttribute("playing",""):s.removeAttribute("playing"),(d||u)&&s.setAttribute("playback-disabled","")),s.addEventListener("db-step-click",t=>{const e=t;this.goTo(e.detail.index)}),s.addEventListener("db-playing-change",t=>{const e=t;this.isAutoPlaying=e.detail.playing,this.startAutoPlay(),this.render()}),e.append(s),t.append(e),p.push(t)}this.replaceChildren(...p)}}customElements.get("db-carousel")||customElements.define("db-carousel",DbCarousel);export{DbCarousel};