@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

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