@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -1,133 +1 @@
-const CLASS = 'designbase-wc-gradient';
-class DbGradient extends HTMLElement {
-    static get observedAttributes() {
-        return [
-            'colors',
-            'direction',
-            'size',
-            'variant',
-            'animation-duration',
-            'animation-delay',
-            'full-width',
-            'full-height',
-        ];
-    }
-    connectedCallback() {
-        this.style.display = 'flex';
-        this.updateUI();
-    }
-    attributeChangedCallback() {
-        this.updateUI();
-    }
-    getBool(name) {
-        return this.hasAttribute(name) && this.getAttribute(name) !== 'false';
-    }
-    get colors() {
-        return this.parseColors();
-    }
-    set colors(value) {
-        this.setAttribute('colors', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    parseColors() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('colors') || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    directionMap(direction) {
-        const map = {
-            'to-right': 'to right',
-            'to-left': 'to left',
-            'to-bottom': 'to bottom',
-            'to-top': 'to top',
-            'to-bottom-right': 'to bottom right',
-            'to-bottom-left': 'to bottom left',
-            'to-top-right': 'to top right',
-            'to-top-left': 'to top left',
-            radial: 'circle',
-        };
-        return map[direction];
-    }
-    colorStops(colors) {
-        return colors
-            .map((entry) => {
-            const position = entry.position !== undefined ? `${entry.position}%` : '';
-            return position ? `${entry.color} ${position}` : entry.color;
-        })
-            .join(', ');
-    }
-    generateGradientStyle(colors, direction) {
-        if (colors.length === 0)
-            return {};
-        const stops = this.colorStops(colors);
-        if (direction === 'radial') {
-            return { background: `radial-gradient(circle, ${stops})` };
-        }
-        return { background: `linear-gradient(${this.directionMap(direction)}, ${stops})` };
-    }
-    generateAnimatedStyle(colors, direction, duration, delay) {
-        const animatedStops = colors
-            .map((entry, index) => {
-            const position = entry.position !== undefined ? entry.position : 0;
-            const animatedPosition = (position + index * 20) % 100;
-            return `${entry.color} ${animatedPosition}%`;
-        })
-            .join(', ');
-        const gradient = direction === 'radial'
-            ? `radial-gradient(circle, ${animatedStops})`
-            : `linear-gradient(${this.directionMap(direction)}, ${animatedStops})`;
-        return {
-            background: gradient,
-            animation: `gradient-shift ${duration}s ease-in-out ${delay}s infinite`,
-            backgroundSize: '200% 200%',
-        };
-    }
-    generateMeshStyle(colors) {
-        const meshColors = colors.slice(0, 4);
-        const stops = meshColors
-            .map((entry, index) => {
-            const position = entry.position !== undefined ? entry.position : index * 33.33;
-            return `${entry.color} ${position}%`;
-        })
-            .join(', ');
-        return { background: `conic-gradient(from 0deg, ${stops})` };
-    }
-    updateUI() {
-        const colors = this.parseColors();
-        const direction = (this.getAttribute('direction') || 'to-right');
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const duration = Number(this.getAttribute('animation-duration') || 3);
-        const delay = Number(this.getAttribute('animation-delay') || 0);
-        const fullWidth = this.getBool('full-width');
-        const fullHeight = this.getBool('full-height');
-        this.className = [
-            CLASS,
-            `${CLASS}--size-${size}`,
-            `${CLASS}--variant-${variant}`,
-            `${CLASS}--direction-${direction}`,
-            fullWidth && `${CLASS}--full-width`,
-            fullHeight && `${CLASS}--full-height`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        let style = {};
-        if (variant === 'animated') {
-            style = this.generateAnimatedStyle(colors, direction, duration, delay);
-        }
-        else if (variant === 'mesh') {
-            style = this.generateMeshStyle(colors);
-        }
-        else {
-            style = this.generateGradientStyle(colors, direction);
-        }
-        Object.assign(this.style, style);
-    }
-}
-if (!customElements.get('db-gradient'))
-    customElements.define('db-gradient', DbGradient);
-
-export { DbGradient };
+const t="designbase-wc-gradient";class DbGradient extends HTMLElement{static get observedAttributes(){return["colors","direction","size","variant","animation-duration","animation-delay","full-width","full-height"]}connectedCallback(){this.style.display="flex",this.updateUI()}attributeChangedCallback(){this.updateUI()}getBool(t){return this.hasAttribute(t)&&"false"!==this.getAttribute(t)}get colors(){return this.parseColors()}set colors(t){this.setAttribute("colors","string"==typeof t?t:JSON.stringify(t))}parseColors(){try{const t=JSON.parse(this.getAttribute("colors")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}directionMap(t){return{"to-right":"to right","to-left":"to left","to-bottom":"to bottom","to-top":"to top","to-bottom-right":"to bottom right","to-bottom-left":"to bottom left","to-top-right":"to top right","to-top-left":"to top left",radial:"circle"}[t]}colorStops(t){return t.map(t=>{const e=void 0!==t.position?`${t.position}%`:"";return e?`${t.color} ${e}`:t.color}).join(", ")}generateGradientStyle(t,e){if(0===t.length)return{};const i=this.colorStops(t);return"radial"===e?{background:`radial-gradient(circle, ${i})`}:{background:`linear-gradient(${this.directionMap(e)}, ${i})`}}generateAnimatedStyle(t,e,i,o){const r=t.map((t,e)=>{const i=((void 0!==t.position?t.position:0)+20*e)%100;return`${t.color} ${i}%`}).join(", ");return{background:"radial"===e?`radial-gradient(circle, ${r})`:`linear-gradient(${this.directionMap(e)}, ${r})`,animation:`gradient-shift ${i}s ease-in-out ${o}s infinite`,backgroundSize:"200% 200%"}}generateMeshStyle(t){return{background:`conic-gradient(from 0deg, ${t.slice(0,4).map((t,e)=>{const i=void 0!==t.position?t.position:33.33*e;return`${t.color} ${i}%`}).join(", ")})`}}updateUI(){const e=this.parseColors(),i=this.getAttribute("direction")||"to-right",o=this.getAttribute("size")||"m",r=this.getAttribute("variant")||"default",n=Number(this.getAttribute("animation-duration")||3),a=Number(this.getAttribute("animation-delay")||0),s=this.getBool("full-width"),l=this.getBool("full-height");this.className=[t,`${t}--size-${o}`,`${t}--variant-${r}`,`${t}--direction-${i}`,s&&`${t}--full-width`,l&&`${t}--full-height`].filter(Boolean).join(" ");let d={};d="animated"===r?this.generateAnimatedStyle(e,i,n,a):"mesh"===r?this.generateMeshStyle(e):this.generateGradientStyle(e,i),Object.assign(this.style,d)}}customElements.get("db-gradient")||customElements.define("db-gradient",DbGradient);export{DbGradient};