@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,121 +1 @@
-import { createRandomGradientStyle, COLOR_PALETTES } from './random-gradient-palettes.js';
-
-const CLASS = 'designbase-wc-random-gradient';
-class DbRandomGradient extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-    }
-    static get observedAttributes() {
-        return [
-            'scheme',
-            'tone',
-            'width',
-            'height',
-            'blur',
-            'color-count',
-            'animated',
-            'animation-duration',
-            'overlay',
-            'overlay-opacity',
-        ];
-    }
-    connectedCallback() {
-        this.style.display = 'block';
-        if (!this.built) {
-            this.built = true;
-            this.build();
-        }
-        this.updateUI();
-    }
-    disconnectedCallback() {
-        this.stopAnimation();
-    }
-    attributeChangedCallback() {
-        if (!this.built)
-            return;
-        this.updateUI();
-    }
-    getBool(name, fallback = false) {
-        if (!this.hasAttribute(name))
-            return fallback;
-        const value = this.getAttribute(name);
-        return value === '' || value === 'true';
-    }
-    build() {
-        this.backgroundEl = document.createElement('div');
-        this.backgroundEl.className = `${CLASS}__background`;
-        this.overlayEl = document.createElement('div');
-        this.overlayEl.className = `${CLASS}__overlay`;
-        this.contentEl = document.createElement('div');
-        this.contentEl.className = `${CLASS}__content`;
-        this.append(this.backgroundEl, this.overlayEl, this.contentEl);
-    }
-    stopAnimation() {
-        if (this.animationTimer) {
-            window.clearInterval(this.animationTimer);
-            this.animationTimer = undefined;
-        }
-    }
-    applyGradient() {
-        const scheme = (this.getAttribute('scheme') || 'primary');
-        const tone = (this.getAttribute('tone') || 'vivid');
-        const colorCount = Number(this.getAttribute('color-count') || 4);
-        const blur = Number(this.getAttribute('blur') || 80);
-        const animated = this.getBool('animated');
-        const animationDuration = Number(this.getAttribute('animation-duration') || 10);
-        const style = createRandomGradientStyle(scheme, tone, colorCount, blur, animated, animationDuration);
-        if (this.backgroundEl)
-            Object.assign(this.backgroundEl.style, style);
-    }
-    syncContent() {
-        if (!this.contentEl)
-            return;
-        const nodes = Array.from(this.childNodes).filter((node) => node !== this.backgroundEl &&
-            node !== this.overlayEl &&
-            node !== this.contentEl &&
-            !(node instanceof HTMLElement && node.hasAttribute('data-wc-internal')));
-        nodes.forEach((node) => this.contentEl.append(node));
-        this.contentEl.hidden = this.contentEl.childNodes.length === 0;
-    }
-    updateUI() {
-        const scheme = (this.getAttribute('scheme') || 'primary');
-        const tone = (this.getAttribute('tone') || 'vivid');
-        const width = this.getAttribute('width') || '100%';
-        const height = this.getAttribute('height') || '600px';
-        const overlay = !this.hasAttribute('overlay') || this.getAttribute('overlay') !== 'false';
-        const overlayOpacity = Number(this.getAttribute('overlay-opacity') || 0.2);
-        const animated = this.getBool('animated');
-        this.className = [
-            CLASS,
-            animated && `${CLASS}--animated`,
-            overlay && `${CLASS}--with-overlay`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.style.width = /^\d+$/.test(width) ? `${width}px` : width;
-        this.style.height = /^\d+$/.test(height) ? `${height}px` : height;
-        if (this.overlayEl) {
-            this.overlayEl.hidden = !overlay;
-            if (overlay) {
-                const palette = COLOR_PALETTES[scheme][tone];
-                Object.assign(this.overlayEl.style, {
-                    background: `linear-gradient(45deg, ${palette[0]}, ${palette[1]})`,
-                    opacity: String(overlayOpacity),
-                });
-            }
-        }
-        this.stopAnimation();
-        this.applyGradient();
-        if (animated) {
-            const animationDuration = Number(this.getAttribute('animation-duration') || 10);
-            this.animationTimer = window.setInterval(() => this.applyGradient(), animationDuration * 1000);
-        }
-        this.syncContent();
-    }
-}
-if (!customElements.get('db-random-gradient')) {
-    customElements.define('db-random-gradient', DbRandomGradient);
-}
-
-export { DbRandomGradient };
+import{createRandomGradientStyle as t,COLOR_PALETTES as e}from"./random-gradient-palettes.js";const i="designbase-wc-random-gradient";class DbRandomGradient extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["scheme","tone","width","height","blur","color-count","animated","animation-duration","overlay","overlay-opacity"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.stopAnimation()}attributeChangedCallback(){this.built&&this.updateUI()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}build(){this.backgroundEl=document.createElement("div"),this.backgroundEl.className=`${i}__background`,this.overlayEl=document.createElement("div"),this.overlayEl.className=`${i}__overlay`,this.contentEl=document.createElement("div"),this.contentEl.className=`${i}__content`,this.append(this.backgroundEl,this.overlayEl,this.contentEl)}stopAnimation(){this.animationTimer&&(window.clearInterval(this.animationTimer),this.animationTimer=void 0)}applyGradient(){const e=this.getAttribute("scheme")||"primary",i=this.getAttribute("tone")||"vivid",n=Number(this.getAttribute("color-count")||4),a=Number(this.getAttribute("blur")||80),s=this.getBool("animated"),r=Number(this.getAttribute("animation-duration")||10),o=t(e,i,n,a,s,r);this.backgroundEl&&Object.assign(this.backgroundEl.style,o)}syncContent(){if(!this.contentEl)return;Array.from(this.childNodes).filter(t=>t!==this.backgroundEl&&t!==this.overlayEl&&t!==this.contentEl&&!(t instanceof HTMLElement&&t.hasAttribute("data-wc-internal"))).forEach(t=>this.contentEl.append(t)),this.contentEl.hidden=0===this.contentEl.childNodes.length}updateUI(){const t=this.getAttribute("scheme")||"primary",n=this.getAttribute("tone")||"vivid",a=this.getAttribute("width")||"100%",s=this.getAttribute("height")||"600px",r=!this.hasAttribute("overlay")||"false"!==this.getAttribute("overlay"),o=Number(this.getAttribute("overlay-opacity")||.2),l=this.getBool("animated");if(this.className=[i,l&&`${i}--animated`,r&&`${i}--with-overlay`].filter(Boolean).join(" "),this.style.width=/^\d+$/.test(a)?`${a}px`:a,this.style.height=/^\d+$/.test(s)?`${s}px`:s,this.overlayEl&&(this.overlayEl.hidden=!r,r)){const i=e[t][n];Object.assign(this.overlayEl.style,{background:`linear-gradient(45deg, ${i[0]}, ${i[1]})`,opacity:String(o)})}if(this.stopAnimation(),this.applyGradient(),l){const t=Number(this.getAttribute("animation-duration")||10);this.animationTimer=window.setInterval(()=>this.applyGradient(),1e3*t)}this.syncContent()}}customElements.get("db-random-gradient")||customElements.define("db-random-gradient",DbRandomGradient);export{DbRandomGradient};