fancy-components/index.js

An UI components Library with Web Components

const A=Array.from,N=Number,l=null,a='display:flex;align-items:center;justify-content:center;',e='background:var(--color);',f='-webkit-user-select:none;user-select:none;cursor:pointer;',g='stroke-dasharray',h='stroke-dashoffset',v='display:block;width:var(--width);height:var(--height);flex-shrink:0;--max-width:none;--min-width:none;--max-height:none;--min-height:none;--box-sizing:border-box;',c='width:100%;height:100%;max-width:var(--max-width);min-width:var(--min-width);max-height:var(--max-height);min-height:var(--min-height);box-sizing:var(--box-sizing);',i='position:absolute;top:0;left:0;width:100%;height:100%;',j=a=>a.length,r='position:relative;',m={mode:'open'},d=(F,n)=>customElements&&(customElements.get(n)?false:customElements.define(n,F)),z=navigator.userAgent.toLowerCase().includes('firefox');class F extends HTMLElement{has(k){return this.hasAttribute(k)}attr(k,v){return v===undefined?this.getAttribute(k):this.setAttribute(k,v)}set(k,v,i=false,c=this){return i?(v===false||v===l)?c.removeAttribute(k):c.setAttribute(k,''):c.setAttribute(k,v)}h(e='div'){return document.createElement(e)}}export const FcTypingInput=class{constructor(n='fc-typing-input'){d(class extends F{static get observedAttributes(){return ['type','placeholder','value','white','red','disabled','autofocus','required','autocomplete','title','name','pattern','maxlength']}constructor(){super();const {h}=this,d=h('fieldset'),n=h(),l=h('legend'),i=h('input'),c=h(),p=h('p');d.id='r';n.id='m';l.id='l';i.id='i';c.id='c';p.id='p';i.type='text';d.append(n,l,i,c,p);this.attachShadow(m);this.dom=d;this.mask=n;this.legend=l;this.input=i;this.circle=c;this.placeholderDOM=p;this.end=false;this.letters;this.render()}render(i=true){this.shadowRoot.innerHTML=this.css(this.white,this.red);i&&this.renderPlaceholder(this.placeholder);this.shadowRoot.append(this.dom)}renderPlaceholder(t){const{dom:d,input:i,placeholderDOM:p,legend:l}=this;let h='';if(t)for(const w of t){h+=`<p class="letter">${w===' '?'&nbsp;':w}</p>`}l.innerText=t;p.innerHTML=h;const a=p.children;j(a)&&a[j(a)-1].addEventListener('animationend',e=>{d.classList.contains('filled')&&(this.isEnd=true)});this.letters=A(d.getElementsByClassName('letter'));this.onFocus&&i.removeEventListener('focus',this.onFocus);this.onBlur&&i.removeEventListener('blur',this.onBlur);i.removeEventListener('focus',this.onFocus);i.removeEventListener('blur',this.onBlur);i.addEventListener('focus',e=>{d.classList.add('filled');this.anim(d,true)},false);i.addEventListener('blur',e=>{if(!j(i.value)){this.isEnd=false;d.classList.remove('filled');this.anim(d,false)}},false)}attributeChangedCallback(n,o,v){const{input:i,dom:d,set:s,disabled:a}=this;switch(n){case'type':(v==='text'||v==='password')?i[n]=v:console.warn('fcTypingInput\'s type only support text & password');break;case'placeholder':this.placeholderDOM.innerText=v;break;case'value':s('value',v,false,i);break;case'disabled':s('disabled',v,true,i);s('disabled',v,true,this.mask);s('disabled',v,true,d);break;case'red':this._red=v;break;case'autofocus':a||(i[n]=v);break;default:i[n]=v}this.render(n==='placeholder');if(i.value){d.classList.add('filled');this.anim(d,true)}}focus(){this.input.focus()}blur(){this.input.blur()}select(){this.input.select()}setSelectionRange(s,e,d){this.input.setSelectionRange(s,e,d)}checkValidity(){return this.input.checkValidity()}setCustomValidity(c){this.input.setCustomValidity(c)}get white(){return this.has('white')}set white(v){this.set('white',v,true)}get red(){return this.has('red')}set red(v){this.set('red',v,true)}get value(){return this.input.value}set value(v){this.set('value',v)}get type(){return this.input.type}set type(v){this.set('type',v)}get placeholder(){return this.placeholderDOM.textContent}set placeholder(v){this.set('placeholder',v)}get disabled(){return this.has('disabled')}set disabled(v){this.set('disabled',v,true)}get autofocus(){return this.input.autofocus}set autofocus(v){this.set('autofocus',v,true)}get required(){return this.input.required}set required(v){this.set('required',v,true)}get list(){return this.input.list}get autocomplete(){return this.input.autocomplete}set autocomplete(v){this.set('autocomplete',v)}get title(){return this.input.title}set title(v){this.set('title',v)}get name(){return this.input.name}set name(v){this.set('name',v)}get pattern(){return this.input.pattern}set pattern(v){this.set('pattern',v)}get maxLength(){return this.input.maxLength}set maxLength(v){this.set('maxlength',v)}get isEnd(){return this.end}set isEnd(v){this.legend.classList[(this.end=v)?'add':'remove']('active')}anim(d,a){const{letters:l}=this;if(l){if(l.isReversed){l.reverse();l.isReversed=false}if(!a){l.reverse();l.isReversed=true}l.forEach((l,i)=>{const c=d.classList.contains('filled');if(!(a&&!c||!a&&c)){l.setAttribute('style',a?`animation:i .3s ${50*i+'ms'} forwards`:`transform:translate(calc(var(--height)*-.7),calc(var(--height)*-.55));color:var(--placeholder-color-focus);animation:o .3s ${50*i+'ms'} forwards`)}})}}css(z,x){return`<style>:host{--width:220px;--height:40px;${v}font-size:16px;font-weight:400;--color:#caf;color:${x?'red':z?'#fffc':'var(--color)'};--border-color:${x?'red':`#${z?'fff':'000'}3`};--border-color-hover:${x?'red':`${z?'#fff6':'var(--color)'}`};--border-color-focus:${x?'red':`var(--border-color${z?'':'-hover'})`};--border-radius:4px;--box-shadow-focus:0 0 6px var(--border-color-focus);--circle-color:${x?'red':`#${z?'fff':'000'}3`};--circle-color-hover:${x?'red':`${z?'#fff3':'var(--circle-color)'}`};--placeholder-color:${x?'red':`#${z?'fff':'0005'}`};--placeholder-color-focus:${x?'red':`${z?'#fff':'var(--border-color-focus)'}`};--placeholder-animate-color:red;--placeholder-animate-title-color:#0f8;--placeholder-shadow:${x?'red':`${z?'0 0 5px #fff':0}`};--stripe-color:#${z?'fff':'000'}3;--stripe-deg:45;--disabled-filter:opacity(80%)grayscale(100%)}:host([disabled]){filter:var(--disabled-filter)}#r{${c}${r}margin:0;padding:0 calc(var(--height)/4);border:1px solid var(--border-color);border-radius:var(--border-radius);transition:border .3s,box-shadow .3s}#r[disabled]{cursor:not-allowed}#r[disabled]>#i{pointer-events:none}#r:hover{border-color:var(--border-color-hover)}#r:hover>#c::after{background:var(--circle-color-hover)}#r:focus-within{box-shadow:var(--box-shadow-focus)}#r.filled{border-color:var(--border-color-focus)}#r.filled>#c::after{transform:scale(32);opacity:0}#m{${i}display:none;z-index:4;border-radius:calc(var(--border-radius) - 1px);background:repeating-linear-gradient(calc(var(--stripe-deg)*1deg),var(--stripe-color)0,var(--stripe-color)calc(var(--height)/4),transparent calc(var(--height)/4),transparent calc(var(--height)/2))}#m[disabled]{display:block}#l{width:0;height:0;padding:0;opacity:0}#l.active{width:auto}#c{${i}overflow:hidden;border-radius:var(--border-radius)}#c::after{content:'';position:absolute;left:calc(var(--height)/2);top:calc(var(--height)/2);width:calc(var(--height)/3);height:calc(var(--height)/3);z-index:2;border-radius:50%;background:var(--circle-color);transition:transform .6s,opacity 1s,background .3s;transform:translate(-50%,-50%)}#i{${i}color:currentColor;padding:0 calc(var(--height)/4);box-sizing:border-box;font-weight:inherit;z-index:3;outline:0;background:none;border:0}#p{${i}display:flex;align-items:center;vertical-align:middle;z-index:1;padding-left:var(--height);margin:0}.letter{${r}transition:color .1s;color:var(--placeholder-color);text-shadow:var(--placeholder-shadow)}@keyframes i{25%{transform:translate(0,calc(var(--height)/5));color:var(--placeholder-animate-color)}45%{transform:translate(0,calc(var(--height)/5));opacity:0}56%{transform:translate(calc(var(--height)*-.75),calc(var(--height)*-.55));opacity:0;color:var(--placeholder-animate-title-color)}76%{opacity:1;color:var(--placeholder-animate-title-color)}to{transform:translate(calc(var(--height)*-.75),calc(var(--height)*-.55));color:var(--placeholder-color-focus)}}@keyframes o{0%{transform:translate(calc(var(--height)*-.75),calc(var(--height)*-.55));opacity:1}25%{transform:translate(calc(var(--height)*-.75),calc(var(--height)/3));color:var(--placeholder-animate-color);opacity:0}55%{transform:translate(0,calc(var(--height)/3));opacity:0}56%{transform:translate(0,calc(var(--height)/3));color:var(--placeholder-animate-color)}66%{color:var(--placeholder-animate-color)}to{color:var(--placeholder-color);transform:translate(0,0)}}</style>`}},n)}},FcBubbles=class{constructor(n='fc-bubbles'){d(class extends F{static get observedAttributes(){return ['click','active']}constructor(){super();const {h}=this,d=h(),b=h();d.id='r';b.id='b';d.innerHTML='<slot></slot>';d.append(b);this.attachShadow(m);this.dom=d;this.bubbles=b;this.render()}_l(){this.active=true}render(){this.shadowRoot.innerHTML=this.css(this.has('click'));this.shadowRoot.append(this.dom)}attributeChangedCallback(n,o,v){if(o!==v){if(n==='click'){this.removeEventListener('click',this._l);this.has('click')&&this.addEventListener('click',this._l,{once:true});this.render()}else{this.bubbles.className=(JSON.parse(v)?'':'de')+'active';this.render()}}}get active(){return this.has('click')?undefined:this.bubbles.classList.contains('active')&&!this.bubbles.classList.contains('deactive')}set active(v){this.attr('active',v)}css(k){const g=`radial-gradient(circle,var(--color)6%,#fff0 7%)`,h=`radial-gradient(circle,#fff0 5%,var(--color)6%,var(--color)7%,#fff0 8%)`,j='background-position:0 50%,5%26%,14%10%,27%3%,50%0,67%0,82%4%,94%16%,6%75%,100%50%,13%88%,24%92%,50%98%,67%96%,84%88%,96%70%,4%30%,96%30%,96%70%,4%70%,34%4%,66%4%,70%96%,34%96%;';return`<style>:host{--width:${z?'-moz-':''}fit-content;--height:${z?'-moz-':''}fit-content;${v}--color:#1cd;--spread:50%;--spread-x:var(--spread);--spread-y:var(--spread);--z-index:99999}#r{${c}${r}}#b{content:'';position:absolute;top:calc(-1*var(--spread-y));right:calc(-1*var(--spread-x));bottom:calc(-1*var(--spread-y));left:calc(-1*var(--spread-x));z-index:var(--z-index);pointer-events:none;background-repeat:no-repeat;background-size:72%72%}#b.active{background-image:${g},${h},${g},${h},${g},${h},${g},${h},${h},${g},${g},${h},${g},${h},${g},${h},${g},${g},${g},${g},${g},${g},${g},${g};background-position:-36%47%,-30%8%,-15%-22%,20%-29%,50%-34%,80%-29%,114%-22%,129%12%,-30%88%,135%50%,-15%120%,18%129%,50%134%,82%129%,117%119%,129%86%,0 30%,98%30%,98%70%,0 70%,30%4%,70%4%,70%94%,30%94%;animation:b .8s cubic-bezier(.2,.6,.4,1)forwards}${k?'#r:active>#b':'#b.deactive'}{background-size:0;animation:none}@keyframes b{70%{${j}}to{${j}background-size:0%0%}}</style>`}},n)}},Fc3DBtn=class{constructor(n='fc-3d-btn'){d(class extends F{constructor(){super();const d=this.h();d.id='r';d.innerHTML='<slot>3D-Btn</slot>';this.dom=d;this.attachShadow(m);this.render()}render(){this.shadowRoot.innerHTML=this.css();this.shadowRoot.append(this.dom)}css(){return`<style>:host{--width:100px;--height:36px;${v}color:#fffc;font-size:14px;--color:#66d;--cover-color:#0005;--shadow-color:#0008;--inset-shadow-color:#fffc;--inset-shadow-color-active:var(--inset-shadow-color)}#r{${c}${a}${e}${f}border:1px solid var(--color);border-radius:calc(var(--height)/6);transition:transform .1s,box-shadow .1s;box-shadow:0 calc(var(--height)/8) var(--cover-color),0 calc(var(--height)/8) var(--color),0 calc(var(--height)/5)calc(var(--height)/4)calc(var(--height)/-40)var(--shadow-color),0 0 calc(var(--height)/20)calc(var(--height)/60)var(--inset-shadow-color)inset}#r:hover{transform:translateY(calc(var(--height)/20));box-shadow:0 calc(var(--height)/13.5)var(--cover-color),0 calc(var(--height)/13.5)var(--color),0 calc(var(--height)/8)calc(var(--height)/7)calc(var(--height)/-40)var(--shadow-color),0 0 calc(var(--height)/20)calc(var(--height)/60)var(--inset-shadow-color)inset}#r:active{transform:translateY(calc(var(--height)/8));box-shadow:0 0 var(--cover-color),0 0 var(--color),0 calc(var(--height)/30)calc(var(--height)/20)var(--shadow-color),0 0 calc(var(--height)/20)calc(var(--height)/20)var(--inset-shadow-color-active)inset}}</style>`}},n)}},FcParenthesesBtn=class{constructor(n='fc-parentheses-btn'){d(class extends F{constructor(){super();const d=this.h();d.id='r';d.innerHTML=`<slot>Button</slot><svg id=s viewBox="0 0 80 30"preserveAspectRatio=none ${g}="29,69"${h}="-8.5"stroke-linecap=round><path d="M65,30A15,15,0,0,0,65,0H15A15,15,0,0,0,15,30H65Z"/></svg>`;this.attachShadow(m);this.dom=d;this.render()}render(){this.shadowRoot.innerHTML=this.css();this.shadowRoot.append(this.dom)}css(){return`<style>:host{--width:80px;--height:30px;${v}--color:#1cd;font-size:14px;color:var(--color)}#r{${c}${r}${a}${f}transition:transform ease-out .1s}#r:active{transform:translateY(20%)}#s{${i}overflow:visible;stroke:var(--color);stroke-width:1.5;fill:none;transition:${g} 1s,${h} 1s}#s:hover{${h}:300;${g}:66,0}</style>`}},n)}},FcDblWarpBtn=class{constructor(n='fc-dbl-warp-btn'){d(class extends F{constructor(){super();const {h}=this,d=h(),after=h(),bg=h();d.id='r';after.id='a';bg.id='b';bg.innerHTML='<slot>Dbl-Warp-Btn</slot>';d.append(after,bg);this.attachShadow(m);this.shadowRoot.innerHTML=this.css();this.shadowRoot.append(d)}css(){return`<style>:host{--width:180px;--height:40px;${v}color:white;font-size:16px;--color:#1cd;--shadow-color:#0005}#r{${c}${f}${r}transition:transform .1s}#r::before{content:'';left:calc(var(--width)/30);transform:rotate(-5deg)}#a{right:calc(var(--width)/30);transform:rotate(5deg)}#r::before,#a{position:absolute;bottom:calc(var(--height)*.39);width:75%;height:60%;transition:transform .3s;box-shadow:0 calc(var(--height)*.38)calc(var(--height)/4)var(--shadow-color)}#b{${i}${a}background:var(--color)radial-gradient(#fff0,#fff0 47%,#fff8 70%)center 16%/130%calc(var(--width)*6);border-radius:calc(var(--height)/8);box-shadow:calc(var(--width)/222)calc(var(--width)/111)calc(var(--width)/222)calc(var(--width)/-222)#0005;transition:background-position .2s}#r:hover::before,#r:hover>#a{transform:translateY(calc(var(--height)*-.2))rotate(0)}#r:hover>#b{background-position:center}#r:active{transform:translateY(20%)}</style>`}},n)}},FcArrowBtn=class{constructor(n='fc-arrow-btn'){d(class extends F{static get observedAttributes(){return ['right']}constructor(){super();const d=this.h();d.id='r';d.innerHTML='<slot>Back</slot><svg id=s viewBox="0 0 100 30"preserveAspectRatio=none><defs><linearGradient id=g x1="0"y1="0"x2="100%"y2="0"><stop id=a offset="0%"/><stop id=b offset="60%"/><stop id=c offset="100%"/></linearGradient></defs><path d="M99.25,29.25H15L0.75,15L15,0.75"id=p><animate attributeName=d values="M99.25,29.25H15L0.75,15L15,0.75;M99.25,29.25H0.75L0.75,15L0.75,0;M98,33H-3L-3,15L-3,3"calcMode="spline"keyTimes="0;.4;1"keySplines=".3 .7 .7 .8;.2 .1 .5 1"begin="k.mouseover"dur="300ms"fill=freeze /><animate attributeName=d values="M98,33H-3L-3,15L-3,3;M99.25,29.25H0.75L0.75,15L0.75,0;M99.25,29.25H15L0.75,15L15,0.75"calcMode="spline"keyTimes="0;.3;1"keySplines=".2 .1 .5 1;.3 .7 .7 .8"begin="k.mouseout+100ms"dur="300ms"fill=freeze /><animate attributeName=d to="M100,30H0L0,15L0,0"begin="k.mousedown"dur="80ms"fill=freeze /><animate attributeName=d to="M98,33H-3L-3,15L-3,3"begin="k.mouseup"dur="80ms"fill=freeze /></path><path d="M100,30V0H0V30H100"id=k /></svg>';this.attachShadow(m);this.dom=d;this.render()}render(){this.shadowRoot.innerHTML=this.css();this.shadowRoot.append(this.dom)}css(){const s='stroke',o='stop-opacity:';return `<style>:host{--width:100px;--height:30px;${v}--color:#1cd;color:var(--color);font-size:16px}#r{${c}${r}${a}${f}transition:transform .1s}#r:active{transform:translateY(10%)}#r:hover #p{${s}:var(--color)}#s:hover>#k{${h}:0}#r[right]>#s{transform:rotateY(180deg)}#s,#k{${s}-width:1.5}#s{${i}overflow:visible;fill:none;${s}:url(#g);${s}-width:1.5}#k{transition:${h} ease-in-out .3s;fill:#fff0;${s}:var(--color);${g}:260,260;${h}:-260;${s}-linecap:square}#a,#b,#c{stop-color:var(--color)}#a{${o}1}#b{${o}.7}#c{${o}0}</style>`}attributeChangedCallback(){this.right=this.has('right')}get right(){return this.has('right')}set right(r){this.set('right',r,true,this.dom)}},n)}},FcPixelBtn=class{constructor(n='fc-pixel-btn'){d(class extends F{constructor(){super();const d=this.h();d.id='r';d.innerHTML='<p id=t><slot>Pixel-Btn</slot></p><svg id=s viewBox="0 0 100 40"preserveAspectRatio=none><line class="h l a"x1=0 y1=0 x2=100 y2=0 /><line class="h l b"x1=95 y1="7.5"x2=5 y2="7.5"/><line class="h l c"x1=10 y1="12.5"x2=90 y2="12.5"/><line class="h l d"x1=85 y1="17.5"x2=15 y2="17.5"/><line class="v l a"x1=100 y1=0 x2=100 y2=40 /><line class="v l b"x1="92.5" y1="32.5" x2="92.5" y2="7.5"/><line class="v l c"x1="87.5"y1="12.5"x2="87.5"y2="27.5"/><line class="h l a"x1=100 y1=40 x2=0 y2=40 /><line class="h l b"x1=5 y1="32.5"x2=95 y2="32.5"/><line class="h l c"x1=90 y1="27.5"x2=10 y2="27.5"/><line class="h l d"x1=15 y1="22.5"x2=85 y2="22.5"/><line class="v l a"x1=0 y1=40 x2=0 y2=0 /><line class="v l b"x1="7.5"y1="7.5"x2="7.5"y2="32.5"/><line class="v l c"x1="12.5"y1="27.5"x2="12.5"y2="12.5"/></svg>';this.attachShadow(m);this.dom=d;this.render()}render(){this.shadowRoot.innerHTML=this.css();this.shadowRoot.append(this.dom)}css(){const x='#r:hover',w='stroke-width:',t='transition:',b='box-shadow';return `<style>:host{--width:100px;--height:40px;${v}--color:#1cd;color:white;font-size:16px}#r{${c}${a}${f}${r}${t}transform .1s,color .3s .6s;overflow:hidden;border-radius:2px}${x}{${t}transform .1s,color .1s .6s,${b} .6s .6s;color:var(--color);${b}:0 0 3px var(--color)}${x} .v.a{${h}:40}${x} .v.b{${h}:30}${x} .v.c{${h}:20}${x} .v.d{${h}:10}${x} .h.a{${h}:100}${x} .h.b{${h}:90}${x} .h.c{${h}:80}${x} .h.d{${h}:70}#r:active{transform:translateY(20%)}#t{z-index:1}#s{${i}stroke:var(--color)}.l{${w}5.5}.a{${w}10.5;${t}${h} .3s}.b{${t}${h} .3s .2s}.c{${t}${h} .3s .4s}.d{${t}${h} .3s .6s}.v.a{${g}:40}.v.b{${g}:30}.v.c{${g}:20}.v.d{${g}:10}.h.a{${g}:100}.h.b{${g}:90}.h.c{${g}:80}.h.d{${g}:70}</style>`}},n)}},FcRoundBtn=class{constructor(n='fc-round-btn'){d(class extends F{constructor(){super();const d=this.h(),o=window.ResizeObserver&&new ResizeObserver(([{contentRect:{width:w,height:h}}])=>this.render(w/h/2.5));d.id='r';o&&o.observe(d);this.attachShadow(m);this.dom=d;this.ob=o;this.render()}render(r=1){this.dom.innerHTML=`<slot><p id=t>Round-Btn</p></slot><svg id=s viewBox="0 0 100 40"><path id=a d="M50,37.5H${17.5/r}A${17.5/r},17.5,0,0,1,${17.5/r},2.5H50M50,37.5H${100-17.5/r}A${17.5/r},17.5,0,0,0,${100-17.5/r},2.5H50"${g}="${45.125/r+95}"/><path id=b d="M50,32.5H${17.5/r}A${12.5/r},12.5,0,0,1,${17.5/r},7.5H50M50,32.5H${100-17.5/r}A${12.5/r},12.5,0,0,0,${100-17.5/r},7.5H50"${g}="${34.375/r+85}"/><path id=c d="M50,27.5H${17.5/r}A${7.5/r},7.5,0,0,1,${17.5/r},12.5H50M50,27.5H${100-17.5/r}A${7.5/r},7.5,0,0,0,${100-17.5/r},12.5H50"${g}="${75+28.625/r}"/><path id=d d="M50,22.5H${17.5/r}A${2.5/r},2.5,0,0,1,${17.5/r},17.5H50M50,22.5H${100-17.5/r}A${2.5/r},2.5,0,0,0,${100-17.5/r},17.5H50"${g}="${22.875/r+65}"/></svg>`;this.shadowRoot.innerHTML=this.css(r);this.shadowRoot.append(this.dom)}css(b){const d='#r:hover ',s='stroke';return `<style>:host{--width:100px;--height:40px;${v}--color:#1cd;font-size:16px;color:white}#r{${c}${r}${a}${f}border-radius:calc(var(--height)/2);transition:transform .1s,color .3s .45s}${d}{transition:transform .1s,color .3s .45s,box-shadow .6s .45s;color:var(--color);box-shadow:0 0 3px var(--color)}${d}#a{${h}:${45.125/b+95}}${d}#b{${h}:${34.375/b+85}}${d}#c{${h}:${75+28.625/b}}${d}#d{${h}:${22.875/b+65}}#r:active{transform:translateY(20%)}#t{z-index:1}#s{${i}overflow:visible;fill:none;${s}:var(--color);${s}-width:5.5;${s}-linecap:round}#a{transition: ${h} .3s}#b{transition:${h} .3s .15s}#c{transition:${h} .3s .3s}#d{transition:${h} .3s .45s}</style>`}disconnectedCallback(){this.ob&&this.ob.unobserve(this.dom)}},n)}},FcUnderlineBtn=class{constructor(n='fc-underline-btn'){d(class extends F{constructor(){super();const d=this.h();d.id='r';d.innerHTML='<slot>Button</slot><svg id=s viewBox="0 0 100 30"preserveAspectRatio=none><rect width=100 height=30 /></svg>';this.dom=d;this.attachShadow(m);this.render()}render(){this.shadowRoot.innerHTML=this.css();this.shadowRoot.append(this.dom)}css(){return `<style>:host{--width:100px;--height:30px;${v}--color:#1cd;font-size:16px;color:var(--color)}#r{${c}${r}${a}${f}transition:transform ease-out .1s}#r:active{transform:translateY(20%)}#s{${i}overflow:visible;fill:none;stroke:var(--color);stroke-width:1.2;${g}:60,260;${h}:-150;transition:${g} 1s,${h} 1s}#s:hover{${h}:0;${g}:30,0}</style>`}},n)}},FcWarpBtn=class{constructor(n='fc-warp-btn'){d(class extends F{static get observedAttributes(){return ['text-align']}constructor(){super();const d=this.h(),o=window.ResizeObserver&&new ResizeObserver(([{contentRect:{height:h}}])=>this.render(h));d.id='r';d.innerHTML='<div id=c></div><div id=m><slot>Fc-Warp-Button</slot></div><div id=s></div>';o&&o.observe(d);this.dom=d;this.ob=o;this.attachShadow(m);this.render()}render(h=40){this.shadowRoot.innerHTML=this.css(h);this.shadowRoot.append(this.dom)}css(h){const z=33+(h>40?(h-40)*0.02:0);return `<style>:host{--width:200px;--height:40px;${v}--color:#1cd;--shadow-color:#0008;color:white;font-size:16px}#r{${c}${r}${f}display:flex;align-items:stretch;border-radius:4px;transition:transform .1s ease-out;box-shadow:1px 2px 1px -1px #0005}#r:active{transform:translateY(20%)}#r:hover>#m{background-position:left bottom}#r:hover>#s{transform:translateY(-25%) rotate(0)}#r.left>#m{justify-content:flex-start}#r.center>#m{justify-content:center}#m,#c{z-index:1}#m{display:flex;align-items:center;justify-content:flex-end;flex:1;transition:background-position .15s;padding-right:12px;border-radius:0 4px 4px 0;background:var(--color)linear-gradient(80deg,#fff0 56%,#fffb 100%) right top/200% 200%}#s{position:absolute;right:3%;bottom:0;width:60%;height:60%;transform:rotate(4deg);transition:transform .3s;background:var(--shadow-color);filter:blur(6px)}#c{${a}background:radial-gradient(#fff0,#fff0 ${z>36?35.9:z}%,var(--color)36%,var(--color));width:${h}px;border-radius:4px 0 0 4px}#c::after{content:'';width:50%;height:50%;border-radius:50%;box-shadow:1px 1px 0 #0008 inset}</style>`}disconnectedCallback(){this.ob&&this.ob.unobserve(this.dom)}attributeChangedCallback(_,o,v){if(o!==v)this.dom.className=v}get textAlign(){return this.attr('text-align')}set textAlign(v){this.attr('text-align',v)}},n)}},FcChina=class{constructor(n='fc-china'){d(class extends F{constructor(){super();const d=this.h(),f=i=>`<svg id=${i} viewBox="0 0 20 19"preserveAspectRatio=none><polygon points="10,0 3.78,19 20,7.33 0,7.33 16.22,19"/></svg>`;d.id='r';d.innerHTML=`<svg id=a viewBox="0 0 60 57"preserveAspectRatio=none><polygon points="30,0 11.34,57 60,22 0,22 48.66,57"/></svg>${f('b')+f('c')+f('d')+f('e')}<svg id=o viewBox="0 0 300 200"preserveAspectRatio=none><path id=w d="M150,0L0,0v100"/><path id=x d="M150,0h150v100"/><path id=y d="M150,200h150v-100"/><path id=z d="M150,200h-150v-100"/></svg>`;d.onanimationend=e=>e.animationName==='q'&&this.dispatchEvent(new CustomEvent('animationend',{detail:e,bubbles:true,cancelable:true}));this.dom=d;this.attachShadow(m);this.render()}render(){this.shadowRoot.innerHTML=this.css();this.shadowRoot.append(this.dom)}css(){const a='transform:scale(2) ',b='animation:',d='translate',e='calc(var(',f=' forwards',i=' + var(',j='transform:',k=' rotate(',l='stroke',m=' ease-out ',n=' ease-in ',o='@keyframes ';return `<style>:host{--width:300px;--height:200px;${v}--flag-${l}-color:red;--star-fill-color:red;--star-${l}-color:red;--delay:0s;--dur:6.6s}#r{${c}${r}background-size:350%;${b}q ${e}--dur)*.3)${e}--dur)*.77${i}--delay))${f}}#a{top:9.9%;left:7.25%;width:19%;height:27.2%;${a}${d}(50%, 40%);${b}l ${e}--dur)*.277)${m}var(--delay)${f},m ${e}--dur)*.2)${e}--dur)*.261${i}--delay))${f},n ${e}--dur)*.2) ${e}--dur)*.261${i}--delay))${f},a ${e}--dur)*.15) ${e}--dur)*.4${i}--delay)),o ${e}--dur)*.046)${n}${e}--dur)*.63${i}--delay))${f},p ${e}--dur)*.05)${n}${e}--dur)*.77${i}--delay))${f}}#b{top:4.4%;left:30.2%;${a}${d}X(300%);${b}l ${e}--dur)*.277)${m}var(--delay)${f},m ${e}--dur)*.2)${e}--dur)*.261${i}--delay))${f},n ${e}--dur)*.2)${e}--dur)*.261${i}--delay))${f},b ${e}--dur)*.15)${e}--dur)*.4${i}--delay))${f},h ${e}--dur)*.046)${n}${e}--dur)*.63${i}--delay))${f},p ${e}--dur)*.05)${n}${e}--dur)*.77${i}--delay))${f}}#c{top:14.5%;left:36.6%;${a}${d}(250%,80%);${b}l ${e}--dur)*.277)${m}var(--delay)${f},m ${e}--dur)*.2)${e}--dur)*.261${i}--delay))${f},n ${e}--dur)*.2)${e}--dur)*.261${i}--delay))${f},c ${e}--dur)*.15) ${e}--dur)*.4${i}--delay))${f},i ${e}--dur)*.046)${n}${e}--dur)*.63${i}--delay))${f},p ${e}--dur)*.05)${n}${e}--dur)*.77${i}--delay))${f}}#d{top:29.6%;left:36.8%;${a}${d}(250%,140%);${b}l ${e}--dur)*.277) ${m}var(--delay)${f},m ${e}--dur)*.2)${e}--dur)*.261${i}--delay))${f},n ${e}--dur)*.2)${e}--dur)*.261${i}--delay))${f},d ${e}--dur)*.15)${e}--dur)*.4${i}--delay))${f},j ${e}--dur)*.046)${n}${e}--dur)*.63${i}--delay))${f},p ${e}--dur)*.05)${n}${e}--dur)*.77${i}--delay))${f}}#e{top:39.6%;left:29.9%;${a}${d}(300%,220%);${b}l ${e}--dur)*.277)${m}var(--delay)${f},m ${e}--dur)*.2)${e}--dur)*.261${i}--delay))${f},n ${e}--dur)*.2)${e}--dur)*.261${i}--delay))${f},e ${e}--dur)*.15)${e}--dur)*.4${i}--delay))${f},k ${e}--dur)*.046)${n}${e}--dur)*.63${i}--delay))${f},p ${e}--dur)*.05)${n}${e}--dur)*.77${i}--delay))${f}}#b,#c,#d,#e{width:6.6%;height:9.9%}#a,#b,#c,#d,#e{position:absolute;overflow:visible;fill:var(--star-fill-color);fill-opacity:0;${l}:var(--star-${l}-color);${l}-width:${e}--width)/300);${g}:520%;${h}:520%}#o{width:100%;height:100%;${l}-width:${e}--width)/100);${g}:100%;${h}:100%}#w,#x,#y,#z{${l}:var(--flag-${l}-color);fill:none;${b}g ${e}--dur)*.3) ${e}--dur)*.68${i}--delay))}${o}a{20%{${a}${d}(20%,40%)}25%{${a}${d}(100%,40%)}40%{${a}${d}(130%,40%)}48%{${a}${d}(38%,40%)}56%{${a}${d}(25%,40%)}73%{${a}${d}(60%,40%)}88%{${a}${d}(38%,40%)}to{${a}${d}(50%,40%)}}${o}b{25%{${a}${d}X(300%)}37%{${a}${d}X(220%)${k}-100deg)}55%{${a}${d}X(270%)${k}0deg)}75%{${a}${d}X(240%)${k}-72deg)}88%{${a}${d}X(255%)${k}-38deg)}to{${a}${d}X(250%)${k}-50deg)}}${o}c{25%{${a}${d}(250%,80%)}37%{${a}${d}(330%,80%)${k}-75.8deg)}55%{${a}${d}(280%,80%)${k}24.2deg)}75%{${a}${d}(310%,80%)${k}-47.8deg)}88%{${a}${d}(295%,80%)${k}-13.8deg)}to{${a}${d}(300%,80%)${k}-25.8deg)}}${o}d{25%{${a}${d}(250%,140%)}37%{${a}${d}(330%,140%)${k}48deg)}55%{${a}${d}(280%,140%)${k}-52deg)}75%{${a}${d}(310%,140%)${k}20deg)}88%{${a}${d}(295%,140%)${k}-10deg)}to{${a}${d}(300%,140%)${k}-2deg)}}${o}e{25%{${a}${d}(300%,220%)}37%{${a}${d}(220%,220%)${k}-72.6deg)}55%{${a}${d}(270%,220%)${k}-172.6deg)}75%{${a}${d}(240%,220%)${k}-100.4deg)}88%{${a}${d}(255%,220%)${k}-130.6deg)}to{${a}${d}(250%,220%)${k}-122.6deg)}}${o}g{57%{${l}:var(--flag-${l}-color);${h}:0}}${o}h{from{${a}${d}X(250%)${k}-50deg)}to{${j}${k}-50deg)}}${o}i{from{${a}${d}(300%,80%)${k}-25.8deg)}to{${j}${k}-25.8deg)}}${o}j{from{${a}${d}(300%,140%)${k}-2deg)}to{${j}${k}-2deg)}}${o}k{from{${a}${d}(250%,220%)${k}-122.6deg)}to{${j}${k}-122.6deg)}}${o}l{to{${h}:0}}${o}m{to{${l}-opacity:0}}${o}n{to{fill-opacity:1}}${o}o{to{${j}none}}${o}p{to{fill:yellow}}${o}q{to{background:red}}</style>`}},n)}},FcWaveFilter=class{constructor(n='fc-wave-filter'){d(class extends F{static get observedAttributes(){return ['color','delay','interval','dur','amplitude','mode']}constructor(){super();const t=this,d=t.h();d.id='r';d.innerHTML=`<slot></slot><svg id=s viewBox="0 0 100 100" preserveAspectRatio=none><mask id=m mask-type=alpha /><g/></svg>`;t.dom=d;t._i=t._a=t._b=0;t._c=3;t._d=12,t._m='alpha';d.addEventListener('slotchange',e=>t.render(t._s=A(e.target.assignedElements(),(d,i)=>{d.setAttribute('style','width:var(--width,auto);height:var(--height,auto);'+(i?'display:none':'display:block;opacity:0'));return d.src})));t.attachShadow(m);t.shadowRoot.innerHTML=`<style>:host{${v}width:var(--width,${z?'-moz-':''}fit-content);height:var(--height,${z?'-moz-':''}fit-content);overflow:hidden}#r{${c}${r}}#s{${i}fill:var(--color,black)}</style>`;t.shadowRoot.append(d)}_e(i,a=''){return `<image width=100 height=100 xlink:href=${i} preserveAspectRatio=none ${a} />`}_g(s){const {_f,_a,_c,_b,_d}=this,r=_a||_b,v=',50,0',q='q25,';return `<path ${s?'mask=url(#m)':''} ${_f?`fill=${_f}`:''} d="M0,0H100V100H0V0Z"><animate id=a attributeName=d dur=${_c} begin="${`${_a?0:r};a.end+${r<0.1?0.1:r}`}" from="M-400,106${q+_d+v}q25,${-1*_d+v}${q+_d+v}q25,${-1*_d+v}${q+_d+v}q25,${-1*_d+v}${q+_d+v}q25,${-1*_d+v}${q+_d+v}q25,${-1*_d+v}V100H-400Z" to="M0,-6${q+_d+v}q25,${-1*_d+v}${q+_d+v}q25,${-1*_d+v}${q+_d+v}q25,${-1*_d+v}${q+_d+v}q25,${-1*_d+v}${q+_d+v}q25,${-1*_d+v}V100H0Z"/></path>`}render(){let {dom:d,_i,_g,_e,_h,_j,_s,_m}=this;if(_s&&j(_s)){const [a,p]=_s,b=j(_s)===1,c=d.querySelector('#m'),e=d.querySelector('g'),f=_m==='img',q=['slideshow','slide show','slide-show'].includes(_m),r=['alpha','luminance'].includes(_m),g=_e.bind(this),h=_g.bind(this);if(r){c.setAttribute('mask-type',_m);c.innerHTML=g(a);e.innerHTML=g(a,'mask=url(#m)')+h(r)}else if(f){c.innerHTML=h(!r);e.innerHTML=(b?'':g(p))+g(a,'mask=url(#m)')}else if(q){if(b){throw new Error('slideshow mode at least two <img> are required')}c.innerHTML=h(!r);e.innerHTML=g(_s[_i])+g(_s[_i+1],`mask=url(#m) style="display:none"`);const a=d.querySelector('animate'),k=d.querySelectorAll('image'),[o,l]=k,x='xlink:href';a.removeEventListener('beginEvent',_h);a.removeEventListener('endEvent',_j);a.addEventListener('beginEvent',this._h=_=>{l.removeAttribute('style');l.setAttribute(x,_s[_i>=_s.length-1?this._i=_i=0:this._i=++_i])});a.addEventListener('endEvent',this._j=_=>{o.setAttribute(x,_s[_i])})}}}attributeChangedCallback(n,o,v){const t=this;if(o!==v){switch(n){case 'color':t._f=v.replace(/\s*/g,'')||'black';break;case 'delay':t._a=N(v);break;case 'dur':t._c=N(v)||3;break;case 'interval':t._b=N(v);break;case 'amplitude':t._d=(v===l?1:v)*12;break;case 'mode':t._m=v}t.render()}}get color(){return this.attr('color')}set color(v){this.attr('color',v)}get delay(){return this.attr('delay')}set delay(v){this.attr('delay',v)}get dur(){return this.attr('dur')}set dur(v){this.attr('dur',v)}get interval(){return this.attr('interval')}set interval(v){this.attr('interval',v)}get amplitude(){return this.attr('amplitude')}set amplitude(v){this.attr('amplitude',v)}get mode(){return this.attr('mode')}set mode(v){this.attr('mode',v)}},n)}}