@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,325 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const SIZES = ['s', 'm', 'l'];
-const VARIANTS = ['default', 'minimal', 'card', 'inline', 'large'];
-const DISPLAYS = ['stars', 'number', 'both', 'reviews', 'detailed'];
-const TYPES = ['star', 'number', 'percentage', 'text'];
-const COLORS = ['primary', 'secondary', 'success', 'warning', 'error', 'custom'];
-class DbRating extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.hoverValue = null;
-        this.starsEl = null;
-        this.handlePointerMove = (event) => {
-            if (!this.isInteractive() || !this.getBooleanAttr('hover-effect', true))
-                return;
-            const star = event.target?.closest('.designbase-wc-rating__star');
-            if (!star || !this.contains(star))
-                return;
-            const index = Number(star.dataset.index);
-            if (!Number.isFinite(index))
-                return;
-            const maxValue = this.getNumberAttr('max-value', 5);
-            const nextHover = this.getPointerValue(index, event.clientX, star, maxValue);
-            if (this.hoverValue === nextHover)
-                return;
-            this.hoverValue = nextHover;
-            this.classList.toggle('designbase-wc-rating--hovering', true);
-            this.refreshStars();
-            this.dispatchEvent(new CustomEvent('db-hover', {
-                detail: { value: nextHover },
-                bubbles: true,
-                composed: true,
-            }));
-        };
-        this.handlePointerLeave = () => {
-            if (this.hoverValue === null)
-                return;
-            this.hoverValue = null;
-            this.classList.remove('designbase-wc-rating--hovering');
-            this.refreshStars();
-        };
-        this.handleClick = (event) => {
-            if (!this.isInteractive())
-                return;
-            const star = event.target?.closest('.designbase-wc-rating__star');
-            if (!star || !this.contains(star))
-                return;
-            event.preventDefault();
-            const index = Number(star.dataset.index);
-            if (!Number.isFinite(index))
-                return;
-            const maxValue = this.getNumberAttr('max-value', 5);
-            const nextValue = this.getPointerValue(index, event.clientX, star, maxValue);
-            this.hoverValue = null;
-            this.classList.remove('designbase-wc-rating--hovering');
-            this.setAttribute('value', String(nextValue));
-            this.dispatchEvent(new CustomEvent('db-change', {
-                detail: { value: nextValue },
-                bubbles: true,
-                composed: true,
-            }));
-            this.render();
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'value',
-            'max-value',
-            'size',
-            'variant',
-            'type',
-            'display',
-            'review-count',
-            'rating-text',
-            'review-text',
-            'allow-half',
-            'readonly',
-            'disabled',
-            'clickable',
-            'color',
-            'custom-color',
-            'animated',
-            'hover-effect',
-        ];
-    }
-    connectedCallback() {
-        this.addEventListener('mousemove', this.handlePointerMove);
-        this.addEventListener('mouseleave', this.handlePointerLeave);
-        this.addEventListener('click', this.handleClick);
-        this.render();
-    }
-    disconnectedCallback() {
-        this.removeEventListener('mousemove', this.handlePointerMove);
-        this.removeEventListener('mouseleave', this.handlePointerLeave);
-        this.removeEventListener('click', this.handleClick);
-    }
-    attributeChangedCallback() {
-        if (this.isConnected)
-            this.render();
-    }
-    getNumberAttr(name, fallback) {
-        const raw = this.getAttribute(name);
-        if (raw === null || raw === '')
-            return fallback;
-        const value = Number(raw);
-        return Number.isFinite(value) ? value : fallback;
-    }
-    getBooleanAttr(name, fallback = false) {
-        if (!this.hasAttribute(name))
-            return fallback;
-        const value = this.getAttribute(name);
-        return value === '' || value === 'true';
-    }
-    getOption(name, options, fallback) {
-        const value = this.getAttribute(name);
-        return value && options.includes(value) ? value : fallback;
-    }
-    normalizeSize(raw) {
-        if (raw === 'xs' || raw === 's')
-            return 's';
-        if (raw === 'xl' || raw === 'l')
-            return 'l';
-        if (raw === 'm')
-            return 'm';
-        return this.getOption('size', SIZES, 'm');
-    }
-    getStarIconSize() {
-        const size = this.normalizeSize(this.getAttribute('size'));
-        if (size === 's')
-            return 16;
-        if (size === 'l')
-            return 24;
-        return 20;
-    }
-    supportsHalfSteps() {
-        return this.getBooleanAttr('allow-half') || this.getBooleanAttr('clickable');
-    }
-    isInteractive() {
-        return (this.getBooleanAttr('clickable') &&
-            !this.getBooleanAttr('readonly') &&
-            !this.getBooleanAttr('disabled'));
-    }
-    getStarFill(index, normalizedValue, allowHalfDisplay) {
-        const starIndex = index + 1;
-        if (normalizedValue >= starIndex)
-            return 1;
-        if (allowHalfDisplay && normalizedValue >= starIndex - 0.5)
-            return 0.5;
-        return 0;
-    }
-    getPointerValue(index, clientX, starEl, maxValue) {
-        const rect = starEl.getBoundingClientRect();
-        let normalized;
-        if (this.supportsHalfSteps()) {
-            normalized = clientX - rect.left < rect.width / 2 ? index + 0.5 : index + 1;
-        }
-        else {
-            normalized = index + 1;
-        }
-        return (normalized / 5) * maxValue;
-    }
-    formatRating(value, maxValue, type, allowHalf) {
-        const normalized = (value / maxValue) * 5;
-        if (type === 'percentage')
-            return `${Math.round((value / maxValue) * 100)}%`;
-        if (type === 'number')
-            return allowHalf ? normalized.toFixed(1) : String(Math.round(normalized));
-        if (type === 'text')
-            return normalized >= 4.5 ? '매우 좋음' : normalized >= 3 ? '보통' : '낮음';
-        return `${normalized.toFixed(1)}/5`;
-    }
-    updateStarElement(star, fill, index, interactive, isHoverPreview) {
-        star.className = [
-            'designbase-wc-rating__star',
-            fill === 0 && 'designbase-wc-rating__star--empty',
-            fill > 0 && isHoverPreview && 'designbase-wc-rating__star--hover-preview',
-            interactive && 'designbase-wc-rating__star--clickable',
-            this.getBooleanAttr('animated') && 'designbase-wc-rating__star--animated',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        star.dataset.index = String(index);
-        const iconName = fill === 1 ? 'star-filled' : fill === 0.5 ? 'star-half' : 'star';
-        const iconSize = this.getStarIconSize();
-        const current = star.querySelector('svg');
-        if (current?.getAttribute('data-designbase-icon') === iconName && current.getAttribute('width') === String(iconSize)) {
-            return;
-        }
-        star.replaceChildren(createDbIcon(iconName, iconSize));
-    }
-    refreshStars() {
-        if (!this.starsEl)
-            return;
-        const value = this.getNumberAttr('value', 0);
-        const maxValue = this.getNumberAttr('max-value', 5);
-        const allowHalf = this.getBooleanAttr('allow-half', false);
-        const hoverEffect = this.getBooleanAttr('hover-effect', true);
-        const isHovering = this.hoverValue !== null && hoverEffect;
-        const shownValue = isHovering ? this.hoverValue : value;
-        const normalized = (shownValue / maxValue) * 5;
-        const interactive = this.isInteractive();
-        const allowHalfDisplay = allowHalf || isHovering;
-        const stars = Array.from(this.starsEl.querySelectorAll(':scope > .designbase-wc-rating__star'));
-        for (let i = 0; i < 5; i += 1) {
-            const fill = this.getStarFill(i, normalized, allowHalfDisplay);
-            const isHoverPreview = isHovering && fill > 0;
-            const star = stars[i] ?? document.createElement('span');
-            star.setAttribute('aria-hidden', 'true');
-            this.updateStarElement(star, fill, i, interactive, isHoverPreview);
-            if (!stars[i])
-                this.starsEl.append(star);
-        }
-        for (let i = stars.length - 1; i >= 5; i -= 1) {
-            stars[i]?.remove();
-        }
-    }
-    render() {
-        const value = this.getNumberAttr('value', 0);
-        const maxValue = this.getNumberAttr('max-value', 5);
-        const size = this.normalizeSize(this.getAttribute('size'));
-        const variant = this.getOption('variant', VARIANTS, 'default');
-        const type = this.getOption('type', TYPES, 'star');
-        const display = this.getOption('display', DISPLAYS, 'stars');
-        const color = this.getOption('color', COLORS, 'primary');
-        const reviewCount = this.getNumberAttr('review-count', 0);
-        const allowHalf = this.getBooleanAttr('allow-half', false);
-        const readonly = this.getBooleanAttr('readonly', false);
-        const disabled = this.getBooleanAttr('disabled', false);
-        const clickable = this.getBooleanAttr('clickable', false);
-        const hoverEffect = this.getBooleanAttr('hover-effect', true);
-        const isHovering = this.hoverValue !== null && hoverEffect;
-        this.className = [
-            'designbase-wc-rating',
-            `designbase-wc-rating--size-${size}`,
-            `designbase-wc-rating--variant-${variant}`,
-            `designbase-wc-rating--type-${type}`,
-            `designbase-wc-rating--display-${display}`,
-            `designbase-wc-rating--color-${color}`,
-            readonly && 'designbase-wc-rating--readonly',
-            disabled && 'designbase-wc-rating--disabled',
-            clickable && 'designbase-wc-rating--clickable',
-            this.getBooleanAttr('animated') && 'designbase-wc-rating--animated',
-            isHovering && 'designbase-wc-rating--hovering',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const customColor = this.getAttribute('custom-color');
-        if (color === 'custom' && customColor) {
-            this.style.setProperty('--rating-color', customColor);
-        }
-        else {
-            this.style.removeProperty('--rating-color');
-        }
-        let root = this.querySelector(':scope > [role="img"]');
-        if (!root) {
-            root = document.createElement('div');
-            this.replaceChildren(root);
-        }
-        root.setAttribute('role', 'img');
-        root.setAttribute('aria-label', `rating ${this.formatRating(value, maxValue, type, allowHalf)}`);
-        const showStars = display === 'stars' || display === 'both' || display === 'detailed';
-        if (showStars) {
-            const existingStars = root.querySelectorAll(':scope > .designbase-wc-rating__stars');
-            existingStars.forEach((node, index) => {
-                if (index > 0)
-                    node.remove();
-            });
-            const starsContainer = existingStars[0];
-            if (starsContainer) {
-                this.starsEl = starsContainer;
-            }
-            else {
-                this.starsEl = document.createElement('div');
-                this.starsEl.className = 'designbase-wc-rating__stars';
-                root.prepend(this.starsEl);
-            }
-            this.refreshStars();
-        }
-        else if (this.starsEl) {
-            this.starsEl.remove();
-            this.starsEl = null;
-        }
-        const ratingText = this.getAttribute('rating-text') || this.formatRating(value, maxValue, type, allowHalf);
-        let numberWrap = root.querySelector('.designbase-wc-rating__number-container');
-        if (display === 'number' || display === 'both') {
-            if (!numberWrap) {
-                numberWrap = document.createElement('div');
-                numberWrap.className = 'designbase-wc-rating__number-container';
-                const number = document.createElement('span');
-                number.className = 'designbase-wc-rating__number';
-                numberWrap.append(number);
-                root.append(numberWrap);
-            }
-            const number = numberWrap.querySelector('.designbase-wc-rating__number');
-            if (number)
-                number.textContent = ratingText;
-        }
-        else {
-            numberWrap?.remove();
-        }
-        let reviews = root.querySelector('.designbase-wc-rating__review-count');
-        if (display === 'reviews' || display === 'detailed') {
-            const reviewText = this.getAttribute('review-text') ||
-                (reviewCount > 0 ? `${reviewCount.toLocaleString()} 리뷰` : '');
-            if (reviewText) {
-                if (!reviews) {
-                    reviews = document.createElement('span');
-                    reviews.className = 'designbase-wc-rating__review-count';
-                    root.append(reviews);
-                }
-                reviews.textContent = reviewText;
-            }
-            else {
-                reviews?.remove();
-            }
-        }
-        else {
-            reviews?.remove();
-        }
-    }
-}
-if (!customElements.get('db-rating'))
-    customElements.define('db-rating', DbRating);
-
-export { DbRating };
+import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],s=["default","minimal","card","inline","large"],i=["stars","number","both","reviews","detailed"],r=["star","number","percentage","text"],a=["primary","secondary","success","warning","error","custom"];class DbRating extends HTMLElement{constructor(){super(...arguments),this.hoverValue=null,this.starsEl=null,this.handlePointerMove=e=>{if(!this.isInteractive()||!this.getBooleanAttr("hover-effect",!0))return;const t=e.target?.closest(".designbase-wc-rating__star");if(!t||!this.contains(t))return;const s=Number(t.dataset.index);if(!Number.isFinite(s))return;const i=this.getNumberAttr("max-value",5),r=this.getPointerValue(s,e.clientX,t,i);this.hoverValue!==r&&(this.hoverValue=r,this.classList.toggle("designbase-wc-rating--hovering",!0),this.refreshStars(),this.dispatchEvent(new CustomEvent("db-hover",{detail:{value:r},bubbles:!0,composed:!0})))},this.handlePointerLeave=()=>{null!==this.hoverValue&&(this.hoverValue=null,this.classList.remove("designbase-wc-rating--hovering"),this.refreshStars())},this.handleClick=e=>{if(!this.isInteractive())return;const t=e.target?.closest(".designbase-wc-rating__star");if(!t||!this.contains(t))return;e.preventDefault();const s=Number(t.dataset.index);if(!Number.isFinite(s))return;const i=this.getNumberAttr("max-value",5),r=this.getPointerValue(s,e.clientX,t,i);this.hoverValue=null,this.classList.remove("designbase-wc-rating--hovering"),this.setAttribute("value",String(r)),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:r},bubbles:!0,composed:!0})),this.render()}}static get observedAttributes(){return["value","max-value","size","variant","type","display","review-count","rating-text","review-text","allow-half","readonly","disabled","clickable","color","custom-color","animated","hover-effect"]}connectedCallback(){this.addEventListener("mousemove",this.handlePointerMove),this.addEventListener("mouseleave",this.handlePointerLeave),this.addEventListener("click",this.handleClick),this.render()}disconnectedCallback(){this.removeEventListener("mousemove",this.handlePointerMove),this.removeEventListener("mouseleave",this.handlePointerLeave),this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.isConnected&&this.render()}getNumberAttr(e,t){const s=this.getAttribute(e);if(null===s||""===s)return t;const i=Number(s);return Number.isFinite(i)?i:t}getBooleanAttr(e,t=!1){if(!this.hasAttribute(e))return t;const s=this.getAttribute(e);return""===s||"true"===s}getOption(e,t,s){const i=this.getAttribute(e);return i&&t.includes(i)?i:s}normalizeSize(e){return"xs"===e||"s"===e?"s":"xl"===e||"l"===e?"l":"m"===e?"m":this.getOption("size",t,"m")}getStarIconSize(){const e=this.normalizeSize(this.getAttribute("size"));return"s"===e?16:"l"===e?24:20}supportsHalfSteps(){return this.getBooleanAttr("allow-half")||this.getBooleanAttr("clickable")}isInteractive(){return this.getBooleanAttr("clickable")&&!this.getBooleanAttr("readonly")&&!this.getBooleanAttr("disabled")}getStarFill(e,t,s){const i=e+1;return t>=i?1:s&&t>=i-.5?.5:0}getPointerValue(e,t,s,i){const r=s.getBoundingClientRect();let a;return a=this.supportsHalfSteps()&&t-r.left<r.width/2?e+.5:e+1,a/5*i}formatRating(e,t,s,i){const r=e/t*5;return"percentage"===s?`${Math.round(e/t*100)}%`:"number"===s?i?r.toFixed(1):String(Math.round(r)):"text"===s?r>=4.5?"매우 좋음":r>=3?"보통":"낮음":`${r.toFixed(1)}/5`}updateStarElement(t,s,i,r,a){t.className=["designbase-wc-rating__star",0===s&&"designbase-wc-rating__star--empty",s>0&&a&&"designbase-wc-rating__star--hover-preview",r&&"designbase-wc-rating__star--clickable",this.getBooleanAttr("animated")&&"designbase-wc-rating__star--animated"].filter(Boolean).join(" "),t.dataset.index=String(i);const n=1===s?"star-filled":.5===s?"star-half":"star",l=this.getStarIconSize(),o=t.querySelector("svg");o?.getAttribute("data-designbase-icon")===n&&o.getAttribute("width")===String(l)||t.replaceChildren(e(n,l))}refreshStars(){if(!this.starsEl)return;const e=this.getNumberAttr("value",0),t=this.getNumberAttr("max-value",5),s=this.getBooleanAttr("allow-half",!1),i=this.getBooleanAttr("hover-effect",!0),r=null!==this.hoverValue&&i,a=(r?this.hoverValue:e)/t*5,n=this.isInteractive(),l=s||r,o=Array.from(this.starsEl.querySelectorAll(":scope > .designbase-wc-rating__star"));for(let e=0;e<5;e+=1){const t=this.getStarFill(e,a,l),s=r&&t>0,i=o[e]??document.createElement("span");i.setAttribute("aria-hidden","true"),this.updateStarElement(i,t,e,n,s),o[e]||this.starsEl.append(i)}for(let e=o.length-1;e>=5;e-=1)o[e]?.remove()}render(){const e=this.getNumberAttr("value",0),t=this.getNumberAttr("max-value",5),n=this.normalizeSize(this.getAttribute("size")),l=this.getOption("variant",s,"default"),o=this.getOption("type",r,"star"),c=this.getOption("display",i,"stars"),h=this.getOption("color",a,"primary"),g=this.getNumberAttr("review-count",0),u=this.getBooleanAttr("allow-half",!1),d=this.getBooleanAttr("readonly",!1),m=this.getBooleanAttr("disabled",!1),b=this.getBooleanAttr("clickable",!1),v=this.getBooleanAttr("hover-effect",!0),p=null!==this.hoverValue&&v;this.className=["designbase-wc-rating",`designbase-wc-rating--size-${n}`,`designbase-wc-rating--variant-${l}`,`designbase-wc-rating--type-${o}`,`designbase-wc-rating--display-${c}`,`designbase-wc-rating--color-${h}`,d&&"designbase-wc-rating--readonly",m&&"designbase-wc-rating--disabled",b&&"designbase-wc-rating--clickable",this.getBooleanAttr("animated")&&"designbase-wc-rating--animated",p&&"designbase-wc-rating--hovering"].filter(Boolean).join(" ");const f=this.getAttribute("custom-color");"custom"===h&&f?this.style.setProperty("--rating-color",f):this.style.removeProperty("--rating-color");let w=this.querySelector(':scope > [role="img"]');w||(w=document.createElement("div"),this.replaceChildren(w)),w.setAttribute("role","img"),w.setAttribute("aria-label",`rating ${this.formatRating(e,t,o,u)}`);if("stars"===c||"both"===c||"detailed"===c){const e=w.querySelectorAll(":scope > .designbase-wc-rating__stars");e.forEach((e,t)=>{t>0&&e.remove()});const t=e[0];t?this.starsEl=t:(this.starsEl=document.createElement("div"),this.starsEl.className="designbase-wc-rating__stars",w.prepend(this.starsEl)),this.refreshStars()}else this.starsEl&&(this.starsEl.remove(),this.starsEl=null);const A=this.getAttribute("rating-text")||this.formatRating(e,t,o,u);let E=w.querySelector(".designbase-wc-rating__number-container");if("number"===c||"both"===c){if(!E){E=document.createElement("div"),E.className="designbase-wc-rating__number-container";const e=document.createElement("span");e.className="designbase-wc-rating__number",E.append(e),w.append(E)}const e=E.querySelector(".designbase-wc-rating__number");e&&(e.textContent=A)}else E?.remove();let _=w.querySelector(".designbase-wc-rating__review-count");if("reviews"===c||"detailed"===c){const e=this.getAttribute("review-text")||(g>0?`${g.toLocaleString()} 리뷰`:"");e?(_||(_=document.createElement("span"),_.className="designbase-wc-rating__review-count",w.append(_)),_.textContent=e):_?.remove()}else _?.remove()}}customElements.get("db-rating")||customElements.define("db-rating",DbRating);export{DbRating};

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

@@ -1,286 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const VARIANTS = ['default', 'bordered', 'filled', 'minimal'];
-const SIZES = ['s', 'm', 'l'];
-const ORIENTATIONS = ['vertical', 'horizontal'];
-class DbReorder extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.draggedIndex = -1;
-        this.dropIndex = -1;
-        this.handleContainerDragOver = (event) => {
-            if (this.draggedIndex < 0)
-                return;
-            const target = event.target;
-            if (target instanceof Element && target.closest('.designbase-wc-reorder__item'))
-                return;
-            event.preventDefault();
-            if (event.dataTransfer) {
-                event.dataTransfer.dropEffect = 'move';
-            }
-            const nextDropIndex = this.getDropIndexFromContainerPointer(event);
-            this.setDropIndex(this.isValidDropIndex(nextDropIndex) ? nextDropIndex : -1);
-        };
-        this.handleContainerDrop = (event) => {
-            if (this.draggedIndex < 0)
-                return;
-            const target = event.target;
-            if (target instanceof Element && target.closest('.designbase-wc-reorder__item'))
-                return;
-            event.preventDefault();
-            const nextDropIndex = this.dropIndex >= 0 ? this.dropIndex : this.getDropIndexFromContainerPointer(event);
-            this.commitDrop(nextDropIndex);
-        };
-    }
-    static get observedAttributes() {
-        return ['items', 'variant', 'size', 'orientation', 'selectable', 'multi-select', 'show-drag-handle', 'show-drag-icon', 'full-width', 'disabled'];
-    }
-    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.addEventListener('dragover', this.handleContainerDragOver);
-        this.addEventListener('drop', this.handleContainerDrop);
-        this.render();
-    }
-    disconnectedCallback() {
-        this.removeEventListener('dragover', this.handleContainerDragOver);
-        this.removeEventListener('drop', this.handleContainerDrop);
-    }
-    attributeChangedCallback() {
-        this.render();
-    }
-    getBool(name, fallback = false) {
-        if (!this.hasAttribute(name))
-            return fallback;
-        const value = this.getAttribute(name);
-        return value === '' || value === 'true';
-    }
-    getOption(name, values, fallback) {
-        const value = this.getAttribute(name);
-        return value && values.includes(value) ? value : fallback;
-    }
-    emitReorder(next) {
-        this.items = next;
-        this.dispatchEvent(new CustomEvent('db-reorder', { detail: { items: next }, bubbles: true, composed: true }));
-    }
-    getItemElements() {
-        return Array.from(this.children).filter((child) => child instanceof HTMLElement && child.classList.contains('designbase-wc-reorder__item'));
-    }
-    updateDragClasses() {
-        const orientation = this.getOption('orientation', ORIENTATIONS, 'vertical');
-        const hasActiveDrag = this.draggedIndex >= 0;
-        const itemCount = this.items.length;
-        const hasActiveDrop = hasActiveDrag && this.isValidDropIndex(this.dropIndex);
-        this.classList.toggle('designbase-wc-reorder--dragging', hasActiveDrag);
-        this.getItemElements().forEach((itemEl, index) => {
-            const isDragged = hasActiveDrag && this.draggedIndex === index;
-            const showBefore = hasActiveDrop && this.dropIndex === index;
-            const showAfterLast = hasActiveDrop && this.dropIndex === itemCount && index === itemCount - 1;
-            const isDragOver = showBefore || showAfterLast;
-            itemEl.classList.toggle('designbase-wc-reorder__item--dragged', isDragged);
-            itemEl.classList.toggle('designbase-wc-reorder__item--drag-over', isDragOver);
-            itemEl.classList.toggle('designbase-wc-reorder__item--drag-down', showBefore && orientation === 'vertical');
-            itemEl.classList.toggle('designbase-wc-reorder__item--drag-up', showAfterLast && orientation === 'vertical');
-            itemEl.classList.toggle('designbase-wc-reorder__item--drag-right', showBefore && orientation === 'horizontal');
-            itemEl.classList.toggle('designbase-wc-reorder__item--drag-left', showAfterLast && orientation === 'horizontal');
-        });
-    }
-    getAdjustedDropIndex(dropIndex = this.dropIndex) {
-        if (this.draggedIndex < 0 || dropIndex < 0)
-            return -1;
-        return dropIndex > this.draggedIndex ? dropIndex - 1 : dropIndex;
-    }
-    isValidDropIndex(dropIndex = this.dropIndex) {
-        const adjustedDropIndex = this.getAdjustedDropIndex(dropIndex);
-        return adjustedDropIndex >= 0 && adjustedDropIndex !== this.draggedIndex;
-    }
-    getDropIndexFromPointer(event, itemEl, index, orientation) {
-        const rect = itemEl.getBoundingClientRect();
-        const pointerOffset = orientation === 'horizontal' ? event.clientX - rect.left : event.clientY - rect.top;
-        const midpoint = orientation === 'horizontal' ? rect.width / 2 : rect.height / 2;
-        return pointerOffset < midpoint ? index : index + 1;
-    }
-    getDropIndexFromContainerPointer(event) {
-        const orientation = this.getOption('orientation', ORIENTATIONS, 'vertical');
-        const items = this.getItemElements();
-        if (items.length === 0)
-            return -1;
-        const pointerPosition = orientation === 'horizontal' ? event.clientX : event.clientY;
-        for (let index = 0; index < items.length; index += 1) {
-            const rect = items[index].getBoundingClientRect();
-            const start = orientation === 'horizontal' ? rect.left : rect.top;
-            const size = orientation === 'horizontal' ? rect.width : rect.height;
-            if (pointerPosition < start + size / 2) {
-                return index;
-            }
-        }
-        return items.length;
-    }
-    commitDrop(dropIndex) {
-        const adjustedDropIndex = this.getAdjustedDropIndex(dropIndex);
-        if (this.draggedIndex < 0 || adjustedDropIndex < 0 || adjustedDropIndex === this.draggedIndex) {
-            this.resetDragState();
-            return;
-        }
-        const copied = [...this.items];
-        const [moved] = copied.splice(this.draggedIndex, 1);
-        copied.splice(adjustedDropIndex, 0, moved);
-        this.draggedIndex = -1;
-        this.dropIndex = -1;
-        this.emitReorder(copied);
-    }
-    setDropIndex(index) {
-        if (this.dropIndex === index)
-            return;
-        this.dropIndex = index;
-        this.updateDragClasses();
-    }
-    resetDragState() {
-        this.draggedIndex = -1;
-        this.dropIndex = -1;
-        this.updateDragClasses();
-    }
-    render() {
-        const variant = this.getOption('variant', VARIANTS, 'default');
-        const size = this.getOption('size', SIZES, 'm');
-        const orientation = this.getOption('orientation', ORIENTATIONS, 'vertical');
-        const disabled = this.getBool('disabled');
-        const selectable = this.getBool('selectable');
-        const multiSelect = this.getBool('multi-select');
-        const showDragHandle = this.getBool('show-drag-handle', true);
-        const showDragIcon = this.getBool('show-drag-icon', true);
-        this.className = [
-            'designbase-wc-reorder',
-            `designbase-wc-reorder--${variant}`,
-            `designbase-wc-reorder--${size}`,
-            `designbase-wc-reorder--${orientation}`,
-            this.getBool('full-width') && 'designbase-wc-reorder--full-width',
-            disabled && 'designbase-wc-reorder--disabled',
-            selectable && 'designbase-wc-reorder--selectable',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const fragment = document.createDocumentFragment();
-        this.items.forEach((item, index) => {
-            const itemEl = document.createElement('div');
-            const isDisabled = disabled || !!item.disabled;
-            const isDragged = this.draggedIndex === index;
-            const hasActiveDrop = this.draggedIndex >= 0 && this.isValidDropIndex(this.dropIndex);
-            const showBefore = hasActiveDrop && this.dropIndex === index;
-            const showAfterLast = hasActiveDrop && this.dropIndex === this.items.length && index === this.items.length - 1;
-            const isDragOver = showBefore || showAfterLast;
-            itemEl.className = [
-                'designbase-wc-reorder__item',
-                item.selected && 'designbase-wc-reorder__item--selected',
-                isDragged && 'designbase-wc-reorder__item--dragged',
-                isDisabled && 'designbase-wc-reorder__item--disabled',
-                isDragOver && 'designbase-wc-reorder__item--drag-over',
-                showBefore && orientation === 'vertical' && 'designbase-wc-reorder__item--drag-down',
-                showAfterLast && orientation === 'vertical' && 'designbase-wc-reorder__item--drag-up',
-                showBefore && orientation === 'horizontal' && 'designbase-wc-reorder__item--drag-right',
-                showAfterLast && orientation === 'horizontal' && 'designbase-wc-reorder__item--drag-left',
-            ]
-                .filter(Boolean)
-                .join(' ');
-            itemEl.draggable = !isDisabled;
-            itemEl.addEventListener('dragstart', (event) => {
-                if (isDisabled)
-                    return;
-                this.draggedIndex = index;
-                this.dropIndex = -1;
-                if (event.dataTransfer) {
-                    event.dataTransfer.effectAllowed = 'move';
-                    event.dataTransfer.setData('text/plain', item.id);
-                }
-                this.updateDragClasses();
-            });
-            itemEl.addEventListener('dragover', (event) => {
-                event.preventDefault();
-                if (event.dataTransfer) {
-                    event.dataTransfer.dropEffect = 'move';
-                }
-                if (this.draggedIndex < 0) {
-                    this.setDropIndex(-1);
-                    return;
-                }
-                const nextDropIndex = this.getDropIndexFromPointer(event, itemEl, index, orientation);
-                this.setDropIndex(this.isValidDropIndex(nextDropIndex) ? nextDropIndex : -1);
-            });
-            itemEl.addEventListener('dragleave', (event) => {
-                const rect = itemEl.getBoundingClientRect();
-                const x = event.clientX - rect.left;
-                const y = event.clientY - rect.top;
-                if (x < 0 || x > rect.width || y < 0 || y > rect.height) {
-                    this.setDropIndex(-1);
-                }
-            });
-            itemEl.addEventListener('drop', (event) => {
-                event.preventDefault();
-                const nextDropIndex = this.dropIndex >= 0
-                    ? this.dropIndex
-                    : this.getDropIndexFromPointer(event, itemEl, index, orientation);
-                this.commitDrop(nextDropIndex);
-            });
-            itemEl.addEventListener('dragend', () => {
-                this.resetDragState();
-            });
-            if (showDragHandle && !isDisabled) {
-                const handle = document.createElement('div');
-                handle.className = 'designbase-wc-reorder__drag-handle';
-                handle.setAttribute('aria-hidden', 'true');
-                if (showDragIcon) {
-                    const gripIcon = orientation === 'horizontal' ? 'grip-horizontal' : 'grip-vertical';
-                    const gripSize = size === 's' ? 14 : size === 'l' ? 18 : 16;
-                    handle.append(createDbIcon(gripIcon, gripSize));
-                }
-                else {
-                    handle.textContent = '≡';
-                }
-                itemEl.append(handle);
-            }
-            if (selectable) {
-                const checkbox = document.createElement('div');
-                checkbox.className = 'designbase-wc-reorder__checkbox';
-                const input = document.createElement('input');
-                input.type = multiSelect ? 'checkbox' : 'radio';
-                input.checked = !!item.selected;
-                input.disabled = isDisabled;
-                input.className = 'designbase-wc-reorder__checkbox-input';
-                input.addEventListener('change', () => {
-                    const current = this.items;
-                    const next = current.map((entry) => {
-                        if (entry.id !== item.id) {
-                            return multiSelect ? entry : { ...entry, selected: false };
-                        }
-                        return { ...entry, selected: multiSelect ? !entry.selected : true };
-                    });
-                    this.items = next;
-                    this.dispatchEvent(new CustomEvent('db-select', { detail: { items: next.filter((entry) => entry.selected) }, bubbles: true, composed: true }));
-                    this.render();
-                });
-                checkbox.append(input);
-                itemEl.append(checkbox);
-            }
-            const content = document.createElement('div');
-            content.className = 'designbase-wc-reorder__content';
-            content.textContent = item.content;
-            itemEl.append(content);
-            fragment.append(itemEl);
-        });
-        this.replaceChildren(fragment);
-    }
-}
-if (!customElements.get('db-reorder'))
-    customElements.define('db-reorder', DbReorder);
-
-export { DbReorder };
+import{createDbIcon as e}from"./db-icons.js";const t=["default","bordered","filled","minimal"],r=["s","m","l"],s=["vertical","horizontal"];class DbReorder extends HTMLElement{constructor(){super(...arguments),this.draggedIndex=-1,this.dropIndex=-1,this.handleContainerDragOver=e=>{if(this.draggedIndex<0)return;const t=e.target;if(t instanceof Element&&t.closest(".designbase-wc-reorder__item"))return;e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move");const r=this.getDropIndexFromContainerPointer(e);this.setDropIndex(this.isValidDropIndex(r)?r:-1)},this.handleContainerDrop=e=>{if(this.draggedIndex<0)return;const t=e.target;if(t instanceof Element&&t.closest(".designbase-wc-reorder__item"))return;e.preventDefault();const r=this.dropIndex>=0?this.dropIndex:this.getDropIndexFromContainerPointer(e);this.commitDrop(r)}}static get observedAttributes(){return["items","variant","size","orientation","selectable","multi-select","show-drag-handle","show-drag-icon","full-width","disabled"]}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.addEventListener("dragover",this.handleContainerDragOver),this.addEventListener("drop",this.handleContainerDrop),this.render()}disconnectedCallback(){this.removeEventListener("dragover",this.handleContainerDragOver),this.removeEventListener("drop",this.handleContainerDrop)}attributeChangedCallback(){this.render()}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const r=this.getAttribute(e);return""===r||"true"===r}getOption(e,t,r){const s=this.getAttribute(e);return s&&t.includes(s)?s:r}emitReorder(e){this.items=e,this.dispatchEvent(new CustomEvent("db-reorder",{detail:{items:e},bubbles:!0,composed:!0}))}getItemElements(){return Array.from(this.children).filter(e=>e instanceof HTMLElement&&e.classList.contains("designbase-wc-reorder__item"))}updateDragClasses(){const e=this.getOption("orientation",s,"vertical"),t=this.draggedIndex>=0,r=this.items.length,i=t&&this.isValidDropIndex(this.dropIndex);this.classList.toggle("designbase-wc-reorder--dragging",t),this.getItemElements().forEach((s,d)=>{const n=t&&this.draggedIndex===d,o=i&&this.dropIndex===d,a=i&&this.dropIndex===r&&d===r-1,g=o||a;s.classList.toggle("designbase-wc-reorder__item--dragged",n),s.classList.toggle("designbase-wc-reorder__item--drag-over",g),s.classList.toggle("designbase-wc-reorder__item--drag-down",o&&"vertical"===e),s.classList.toggle("designbase-wc-reorder__item--drag-up",a&&"vertical"===e),s.classList.toggle("designbase-wc-reorder__item--drag-right",o&&"horizontal"===e),s.classList.toggle("designbase-wc-reorder__item--drag-left",a&&"horizontal"===e)})}getAdjustedDropIndex(e=this.dropIndex){return this.draggedIndex<0||e<0?-1:e>this.draggedIndex?e-1:e}isValidDropIndex(e=this.dropIndex){const t=this.getAdjustedDropIndex(e);return t>=0&&t!==this.draggedIndex}getDropIndexFromPointer(e,t,r,s){const i=t.getBoundingClientRect();return("horizontal"===s?e.clientX-i.left:e.clientY-i.top)<("horizontal"===s?i.width/2:i.height/2)?r:r+1}getDropIndexFromContainerPointer(e){const t=this.getOption("orientation",s,"vertical"),r=this.getItemElements();if(0===r.length)return-1;const i="horizontal"===t?e.clientX:e.clientY;for(let e=0;e<r.length;e+=1){const s=r[e].getBoundingClientRect();if(i<("horizontal"===t?s.left:s.top)+("horizontal"===t?s.width:s.height)/2)return e}return r.length}commitDrop(e){const t=this.getAdjustedDropIndex(e);if(this.draggedIndex<0||t<0||t===this.draggedIndex)return void this.resetDragState();const r=[...this.items],[s]=r.splice(this.draggedIndex,1);r.splice(t,0,s),this.draggedIndex=-1,this.dropIndex=-1,this.emitReorder(r)}setDropIndex(e){this.dropIndex!==e&&(this.dropIndex=e,this.updateDragClasses())}resetDragState(){this.draggedIndex=-1,this.dropIndex=-1,this.updateDragClasses()}render(){const i=this.getOption("variant",t,"default"),d=this.getOption("size",r,"m"),n=this.getOption("orientation",s,"vertical"),o=this.getBool("disabled"),a=this.getBool("selectable"),g=this.getBool("multi-select"),l=this.getBool("show-drag-handle",!0),c=this.getBool("show-drag-icon",!0);this.className=["designbase-wc-reorder",`designbase-wc-reorder--${i}`,`designbase-wc-reorder--${d}`,`designbase-wc-reorder--${n}`,this.getBool("full-width")&&"designbase-wc-reorder--full-width",o&&"designbase-wc-reorder--disabled",a&&"designbase-wc-reorder--selectable"].filter(Boolean).join(" ");const h=document.createDocumentFragment();this.items.forEach((t,r)=>{const s=document.createElement("div"),i=o||!!t.disabled,m=this.draggedIndex===r,p=this.draggedIndex>=0&&this.isValidDropIndex(this.dropIndex),b=p&&this.dropIndex===r,u=p&&this.dropIndex===this.items.length&&r===this.items.length-1,x=b||u;if(s.className=["designbase-wc-reorder__item",t.selected&&"designbase-wc-reorder__item--selected",m&&"designbase-wc-reorder__item--dragged",i&&"designbase-wc-reorder__item--disabled",x&&"designbase-wc-reorder__item--drag-over",b&&"vertical"===n&&"designbase-wc-reorder__item--drag-down",u&&"vertical"===n&&"designbase-wc-reorder__item--drag-up",b&&"horizontal"===n&&"designbase-wc-reorder__item--drag-right",u&&"horizontal"===n&&"designbase-wc-reorder__item--drag-left"].filter(Boolean).join(" "),s.draggable=!i,s.addEventListener("dragstart",e=>{i||(this.draggedIndex=r,this.dropIndex=-1,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",t.id)),this.updateDragClasses())}),s.addEventListener("dragover",e=>{if(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this.draggedIndex<0)return void this.setDropIndex(-1);const t=this.getDropIndexFromPointer(e,s,r,n);this.setDropIndex(this.isValidDropIndex(t)?t:-1)}),s.addEventListener("dragleave",e=>{const t=s.getBoundingClientRect(),r=e.clientX-t.left,i=e.clientY-t.top;(r<0||r>t.width||i<0||i>t.height)&&this.setDropIndex(-1)}),s.addEventListener("drop",e=>{e.preventDefault();const t=this.dropIndex>=0?this.dropIndex:this.getDropIndexFromPointer(e,s,r,n);this.commitDrop(t)}),s.addEventListener("dragend",()=>{this.resetDragState()}),l&&!i){const t=document.createElement("div");if(t.className="designbase-wc-reorder__drag-handle",t.setAttribute("aria-hidden","true"),c){const r="horizontal"===n?"grip-horizontal":"grip-vertical",s="s"===d?14:"l"===d?18:16;t.append(e(r,s))}else t.textContent="≡";s.append(t)}if(a){const e=document.createElement("div");e.className="designbase-wc-reorder__checkbox";const r=document.createElement("input");r.type=g?"checkbox":"radio",r.checked=!!t.selected,r.disabled=i,r.className="designbase-wc-reorder__checkbox-input",r.addEventListener("change",()=>{const e=this.items.map(e=>e.id!==t.id?g?e:{...e,selected:!1}:{...e,selected:!g||!e.selected});this.items=e,this.dispatchEvent(new CustomEvent("db-select",{detail:{items:e.filter(e=>e.selected)},bubbles:!0,composed:!0})),this.render()}),e.append(r),s.append(e)}const I=document.createElement("div");I.className="designbase-wc-reorder__content",I.textContent=t.content,s.append(I),h.append(s)}),this.replaceChildren(h)}}customElements.get("db-reorder")||customElements.define("db-reorder",DbReorder);export{DbReorder};