@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,325 @@
-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};
+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 };

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

@@ -1 +1,286 @@
-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};
+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 };