@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

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