17 lines
3.6 KiB
JavaScript
17 lines
3.6 KiB
JavaScript
import{_ as t,n as a,t as e,a as s,x as r,r as n}from"./card-b98d578d.js";import{c as i}from"./repeat-08ca48e7.js";import{B as o}from"./base-91ab3d27.js";let h=class extends s{constructor(){super(...arguments),this.char="❤️",this.size="1em",this.hue=340,this.saturation=80,this.lightness=55,this.maxOpacity=1,this.pulseDuration="3s",this.pulseDelay="0s",this.startX="0%",this.startY="0%",this._handleAnimationIteration=t=>{"pulse"===t.animationName&&(this.startX=100*Math.random()+"%",this.startY=100*Math.random()+"%")}}connectedCallback(){super.connectedCallback(),this.addEventListener("animationiteration",this._handleAnimationIteration)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("animationiteration",this._handleAnimationIteration)}render(){return r`${this.char}`}updated(){this.style.setProperty("--size",this.size),this.style.setProperty("--hue",`${this.hue}`),this.style.setProperty("--saturation",`${this.saturation}`),this.style.setProperty("--lightness",`${this.lightness}`),this.style.setProperty("--max-opacity",`${this.maxOpacity}`),this.style.setProperty("--pulse-duration",this.pulseDuration),this.style.setProperty("--pulse-delay",this.pulseDelay),this.style.setProperty("--start-x",this.startX),this.style.setProperty("--start-y",this.startY)}static get styles(){return n(":host {\n position: absolute;\n left: var(--start-x);\n top: var(--start-y);\n font-size: var(--size, 1em);\n color: hsl(var(--hue, 340), var(--saturation, 80%), var(--lightness, 55%));\n user-select: none;\n pointer-events: none;\n will-change: transform;\n animation: pulse var(--pulse-duration) ease-in-out infinite;\n animation-delay: var(--pulse-delay);\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 15% {\n opacity: var(--max-opacity, 1);\n }\n 50% {\n transform: scale(1.3);\n }\n 85% {\n opacity: var(--max-opacity, 1);\n }\n 100% {\n transform: scale(0);\n opacity: 0;\n }\n}")}};t([a({type:String})],h.prototype,"char",void 0),t([a({type:String})],h.prototype,"size",void 0),t([a({type:Number})],h.prototype,"hue",void 0),t([a({type:Number})],h.prototype,"saturation",void 0),t([a({type:Number})],h.prototype,"lightness",void 0),t([a({type:Number})],h.prototype,"maxOpacity",void 0),t([a({type:String})],h.prototype,"pulseDuration",void 0),t([a({type:String})],h.prototype,"pulseDelay",void 0),t([a({type:String})],h.prototype,"startX",void 0),t([a({type:String})],h.prototype,"startY",void 0),h=t([e("advanced-camera-card-heart")],h);const p=["❤️","💖","💕","💗","💓"];let l=class extends o{constructor(){super(),this._hearts=Array.from({length:50},((t,a)=>{const e=4*Math.random()+4,s=-Math.random()*e*.8;return{id:a,char:p[Math.floor(Math.random()*p.length)],size:1.5*Math.random()+.5+"em",hue:40*Math.random()+320,saturation:40*Math.random()+60,lightness:20*Math.random()+45,maxOpacity:.5*Math.random()+.2,pulseDuration:`${e}s`,pulseDelay:`${s}s`,startX:100*Math.random()+"%",startY:100*Math.random()+"%"}}))}render(){return r`
|
|
${i(this._hearts,(t=>t.id),(t=>r`
|
|
<advanced-camera-card-heart
|
|
.char=${t.char}
|
|
.size=${t.size}
|
|
.hue=${t.hue}
|
|
.saturation=${t.saturation}
|
|
.lightness=${t.lightness}
|
|
.maxOpacity=${t.maxOpacity}
|
|
.pulseDuration=${t.pulseDuration}
|
|
.pulseDelay=${t.pulseDelay}
|
|
.startX=${t.startX}
|
|
.startY=${t.startY}
|
|
></advanced-camera-card-heart>
|
|
`))}
|
|
`}};l=t([e("advanced-camera-card-effect-hearts")],l);export{l as AdvancedCameraCardEffectHearts};
|