lyco
Version:
Lit-based pure layout rendering function library , including Row/Column/Flex/Grid and other commonly used rendering functions .
1,052 lines (1,024 loc) • 64.2 kB
JavaScript
const e=require(`./core-BoB7sDMv.js`),t=e.__toESM(require(`lit`)),n=e.__toESM(require(`lit/directives/ref.js`)),r=e.__toESM(require(`lit/directives/style-map.js`)),i=typeof window>`u`,a=100;var o=class{constructor(e){this._capacity=e,this.buffer=Array(e)}set(e,t){this.buffer[e%this._capacity]=t}get(e){return this.buffer[e%this._capacity]}clear(){this.buffer.fill(void 0)}get capacity(){return this._capacity}},s=class{constructor(){this.data=new Float64Array}set(e,t){let n=e*3;this.data[n]=t.start,this.data[n+1]=t.end,this.data[n+2]=t.total}get(e){let t=e*3;return t<0||t+2>=this.data.length?{start:0,end:0,total:0}:{start:this.data[t],end:this.data[t+1],total:this.data[t+2]}}initialize(e){this.data=new Float64Array(Math.ceil(e/a)*3),this.data.fill(0)}},c=class{constructor(e,r,c){this._items=[],this._itemSize=50,this._layout=`vertical`,this._preloadCount=5,this._cacheSize=200,this._renderItem=()=>t.html``,this._containerRef=(0,n.createRef)(),this._firstVisible=0,this._lastVisible=0,this._positionCache=new Float64Array,this._sizeCache=new Float32Array,this._cacheInitialized=!1,this._totalContentSize=0,this._blockStore=new s,this._recycledNodes=[],this.RECYCLE_POOL_SIZE=20,this._preRenderChunkSize=5,this.CHUNK_SIZE=1e3,this._chunks=new Map,this._visibleChunkIndexes=new Set,this._loadedChunks=new Set,this._estimatedItemHeight=0,this._isLoading=!1,this._hasMore=!1,this._pageSize=50,this._fetchMoreThreshold=.8,this._getItemSize=e=>typeof this._itemSize==`function`?this._itemSize(e):this._itemSize,this._calculateMetrics=()=>{if(this._items.length===0){this._positionCache=new Float64Array,this._sizeCache=new Float32Array,this._blockStore.initialize(0),this._totalContentSize=0,this._cacheInitialized=!0,this._templateBuffer.clear();return}this._positionCache=new Float64Array(this._items.length),this._sizeCache=new Float32Array(this._items.length),this._blockStore.initialize(this._items.length);let e=0,t=0,n=0;for(let r=0;r<this._items.length;r++){let i=this._getItemSize(r);if(this._positionCache[r]=e,this._sizeCache[r]=i,n+=i,(r+1)%a===0||r===this._items.length-1){let o=Math.floor(r/a);this._blockStore.set(o,{start:t,end:e+i,total:n}),t=e+i,n=0}e+=i}this._totalContentSize=e,this._cacheInitialized=!0,this._templateBuffer.clear()},this._findItemIndexByOffset=e=>{if(!this._cacheInitialized||this._items.length===0)return 0;let t=0,n=this._items.length-1,r=0;for(;t<=n;){let i=Math.floor((t+n)/2);this._positionCache[i]<=e?(r=i,t=i+1):n=i-1}return r},this._updateVisibleRange=()=>{if(!this._containerRef.value)return;let e=this._layout===`vertical`,t=e?this._containerRef.value.scrollTop:this._containerRef.value.scrollLeft,n=e?this._containerRef.value.clientHeight:this._containerRef.value.clientWidth;this._firstVisible=Math.floor(t/this._estimatedItemHeight),this._lastVisible=Math.ceil((t+n)/this._estimatedItemHeight),this._checkAndLoadMore(),this.host.requestUpdate()},this._ticking=!1,this._lastUpdate=0,this.FRAME_BUDGET=16,this._scheduleUpdate=async()=>{if(this._ticking)return;let e=performance.now(),t=e-this._lastUpdate;t>=this.FRAME_BUDGET&&(this._ticking=!0,requestAnimationFrame(()=>{this._updateVisibleRange(),this._ticking=!1,this._lastUpdate=performance.now()}))},this.host=e,e.addController(this),this.updateConfig(r,c),this._templateBuffer=new o(this._cacheSize),this._pageSize=r.pageSize??50,this._fetchMoreThreshold=r.fetchMoreThreshold??.8,i||(this._setupObservers(),this._setupResizeObserver(),this._initializeChunks())}_initializeItems(e){this._items=[...e],this._calculateMetrics(),this._initializeChunks(),this.host.requestUpdate()}_updateMetricsForRange(e,t){if(t>this._positionCache.length){let e=new Float64Array(Math.max(t*1.5,1e3));e.set(this._positionCache),this._positionCache=e;let n=new Float32Array(Math.max(t*1.5,1e3));n.set(this._sizeCache),this._sizeCache=n}let n=e===0?0:this._positionCache[e-1]+this._sizeCache[e-1];for(let r=e;r<t;r++){let e=this._getItemSize(r);this._positionCache[r]=n,this._sizeCache[r]=e,n+=e}this._totalContentSize=n,this._updateChunkMetrics()}_setupObservers(){this._intersectionObserver=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&this._preRenderChunk()})},{rootMargin:`50%`}),this._mutationObserver=new MutationObserver(e=>{e.forEach(e=>{e.removedNodes.forEach(e=>{e instanceof HTMLElement&&this._recycledNodes.length<this.RECYCLE_POOL_SIZE&&this._recycledNodes.push(e)})})})}_setupResizeObserver(){this._resizeObserver=new ResizeObserver(e=>{for(let t of e)if(t.target instanceof HTMLElement){let e=t.contentRect.height;e>0&&(this._estimatedItemHeight=e,this._updateChunkMetrics())}})}_initializeChunks(){this._chunks.clear();let e=Math.ceil(this._items.length/this.CHUNK_SIZE);for(let t=0;t<e;t++){let e=t*this.CHUNK_SIZE,n=Math.min(e+this.CHUNK_SIZE,this._items.length);this._chunks.set(t,this._items.slice(e,n))}}_updateChunkMetrics(){if(!this._containerRef.value)return;let e=this._containerRef.value.clientHeight,t=this._items.length*this._estimatedItemHeight;this._blockStore.initialize(Math.ceil(this._items.length/this.CHUNK_SIZE));let n=0;for(let e=0;e<this._chunks.size;e++){let t=Math.min(this.CHUNK_SIZE,this._items.length-e*this.CHUNK_SIZE),r=t*this._estimatedItemHeight;this._blockStore.set(e,{start:n,end:n+r,total:r}),n+=r}this._totalContentSize=t,this._calculateVisibleChunks()}_calculateVisibleChunks(){if(!this._containerRef.value)return;let e=this._containerRef.value.scrollTop,t=this._containerRef.value.clientHeight,n=Math.floor(e/(this.CHUNK_SIZE*this._estimatedItemHeight)),r=Math.ceil((e+t)/(this.CHUNK_SIZE*this._estimatedItemHeight));this._visibleChunkIndexes.clear();for(let e=n;e<=r;e++)this._chunks.has(e)&&this._visibleChunkIndexes.add(e);this._preloadAdjacentChunks(n-1,r+1)}_preloadAdjacentChunks(e,t){for(let n=e;n<=t;n++)n>=0&&n<this._chunks.size&&!this._loadedChunks.has(n)&&requestIdleCallback(()=>{this._loadChunk(n)})}_loadChunk(e){if(this._loadedChunks.has(e))return;let t=e*this.CHUNK_SIZE,n=Math.min(t+this.CHUNK_SIZE,this._items.length),r=this._items.slice(t,n);this._chunks.set(e,r),this._loadedChunks.add(e),this._calculateMetricsForChunk(e)}_calculateMetricsForChunk(e){let t=e*this.CHUNK_SIZE,n=this._chunks.get(e)||[],r=t*this._estimatedItemHeight;for(let e=0;e<n.length;e++){let n=t+e;this._positionCache[n]=r,this._sizeCache[n]=this._estimatedItemHeight,r+=this._estimatedItemHeight}}_preRenderChunk(){this._idleCallbackId&&cancelIdleCallback(this._idleCallbackId),this._idleCallbackId=requestIdleCallback(e=>{let t=this._lastVisible+1,n=0;for(;e.timeRemaining()>0&&n<this._preRenderChunkSize&&t<this._items.length;)this._prerenderItem(t),t++,n++;t<this._items.length&&this._preRenderChunk()})}_prerenderItem(e){let t=e%this._cacheSize;if(!this._templateBuffer.get(t)){let n=this._positionCache[e],r=this._sizeCache[e];if(n!==void 0&&r!==void 0){let i=this._getItemStyle(n,r),a=this._createItemTemplate(this._items[e],e,i);this._templateBuffer.set(t,a)}}}_getItemStyle(e,t){let n=this._layout===`vertical`;return{position:`absolute`,[n?`top`:`left`]:`${e}px`,[n?`height`:`width`]:`${t}px`,width:n?`100%`:`auto`,height:n?`auto`:`100%`,willChange:`transform`,contain:`content`,backfaceVisibility:`hidden`,WebkitFontSmoothing:`subpixel-antialiased`}}_createItemTemplate(e,n,i){let a=this._recycledNodes.pop(),o=`item-${n}`;return t.html`
${a?t.html`<div
.key=${o}
style=${(0,r.styleMap)(i)}
data-index=${n}
.recycled=${a}
>
${this._renderItem(e,n)}
</div>`:t.html`<div .key=${o} style=${(0,r.styleMap)(i)} data-index=${n}>
${this._renderItem(e,n)}
</div>`}
`}hostConnected(){if(i||this.host.updateComplete.then(()=>{this._containerRef.value&&(this._containerRef.value.addEventListener(`scroll`,this._scheduleUpdate),this._calculateMetrics(),this._updateVisibleRange(),this.host.requestUpdate())}),!i&&this._containerRef.value){var e,t,n;(e=this._intersectionObserver)?.observe(this._containerRef.value),(t=this._mutationObserver)?.observe(this._containerRef.value,{childList:!0,subtree:!0,attributes:!0}),(n=this._resizeObserver)?.observe(this._containerRef.value)}}hostDisconnected(){var e,t,n;!i&&this._containerRef.value&&this._containerRef.value.removeEventListener(`scroll`,this._scheduleUpdate),(e=this._intersectionObserver)?.disconnect(),(t=this._mutationObserver)?.disconnect(),(n=this._resizeObserver)?.disconnect(),this._idleCallbackId&&cancelIdleCallback(this._idleCallbackId)}hostUpdated(){!i&&!this._cacheInitialized&&this._containerRef.value&&this._items.length>0&&(this._calculateMetrics(),this._updateVisibleRange(),this.host.requestUpdate())}async updateConfig(e,t){let n=this._itemSize,r=this._cacheSize;this._itemSize=e.itemSize??50,this._layout=e.layout??`vertical`,this._preloadCount=e.preloadCount??5,this._cacheSize=e.cacheSize??200,this._renderItem=t,this._onLoadMore=e.onLoadMore,`items`in e&&this._initializeItems(e.items),this._pageSize=e.pageSize??this._pageSize,this._fetchMoreThreshold=e.fetchMoreThreshold??this._fetchMoreThreshold,r!==this._cacheSize&&(this._templateBuffer=new o(this._cacheSize)),n!==this._itemSize&&(this._calculateMetrics(),this._initializeChunks()),i||this._updateVisibleRange(),this.host.requestUpdate()}async _checkAndLoadMore(){if(!this._onLoadMore||this._isLoading||!this._containerRef.value)return;let e=this._lastVisible,t=this._pageSize||1e3,n=(e+1)%t===0;if(n){console.log(`Reached end of page, loading more...`,{lastVisibleIndex:e,pageSize:t,totalItems:this._items.length}),this._isLoading=!0;try{await this._onLoadMore()}finally{this._isLoading=!1}}}getRenderedItems(){if(!this._renderItem)return[];let e=[],t=new Set;for(let e of this._visibleChunkIndexes){let n=this._chunks.get(e);if(!n)continue;let r=e*this.CHUNK_SIZE;n.forEach((e,n)=>{let i=r+n;i>=this._firstVisible&&i<=this._lastVisible&&t.add(i)})}return Array.from(t).sort((e,t)=>e-t).forEach(t=>{let n=this._getItemStyle(this._positionCache[t]||t*this._estimatedItemHeight,this._sizeCache[t]||this._estimatedItemHeight);e.push(this._createItemTemplate(this._items[t],t,n))}),e}getContainerRef(){return this._containerRef}getTotalContentSize(){return this._totalContentSize}getLayout(){return this._layout}};const l=new WeakMap,u=()=>{if(i)return null;try{let e=document.currentScript;if(e&&`_$litElement$`in e)return e._$litElement$;if(customElements&&window.customElements){let e=document.querySelector(`virtualizer-example`);if(e&&`_$litElement$`in e)return e._$litElement$}}catch(e){console.warn(`Failed to get Lit host:`,e)}return null};function d(e){return e!==null&&typeof e.addController==`function`}function f(e,a){let o=u();if(!d(o)){console.warn(`Virtualizer: Running in fallback mode`);let n=a||e.renderItem||(e=>t.html`${String(e)}`),r=e.items;return t.html`
<div style="overflow: auto; height: 100%; position: relative;">
<div style="position: relative;">
${r.map((e,t)=>n(e,t))}
</div>
</div>
`}let s=l.get(o);if(!s){let n=a||e.renderItem||(e=>t.html`${e}`);s=new c(o,e,n),l.set(o,s)}let f=a=>{s.updateConfig(e,a);let o={position:`relative`,overflow:i?`visible`:`auto`,[s.getLayout()===`vertical`?`height`:`width`]:`100%`,[s.getLayout()===`vertical`?`minHeight`:`minWidth`]:`1px`},c={position:`relative`,[s.getLayout()===`vertical`?`height`:`width`]:`${s.getTotalContentSize()}px`,transform:s.getLayout()===`vertical`?`translateY(0)`:`translateX(0)`};return t.html`
<div
${(0,n.ref)(s.getContainerRef())}
style=${(0,r.styleMap)(o)}
@scroll=${i?t.nothing:()=>s.host.requestUpdate()}
>
<div style=${(0,r.styleMap)(c)}>
${s.getRenderedItems()}
</div>
</div>
`};return a===void 0?`renderItem`in e?f(e.renderItem):e=>f(e):f(a)}function p(r,i){if(i===void 0){let e=e=>p(r,e??t.html``);return e.html=(e,...n)=>p(r,(0,t.html)(e,...n)),e}let a=r?.fadeBg??`rgba(0,0,0,0.7)`,o=r?.zIndex??2e3,s=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?s.bind(e):s.unbindAll()})}
style="
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: ${a};
z-index: ${o};
display: flex;
justify-content: center;
align-items: center;
"
>
${e.renderFn(i)}
</div>
`}function m(r,i){let a=e.createEventBinder(r?.on??{});return i===void 0?e=>m(r,e??[t.html``]):t.html`
<div
.class="${r?.className}"
${(0,n.ref)(e=>{e?a.bind(e):a.unbindAll()})}
style="
display: flex;
flex-direction: column;
${r?.center?`align-items: center;`:``}
${r?.space?`gap: ${r.space};`:``}
${r?.style??``}
"
>
${e.renderFnOrArray(i)}
</div>
`}function h(r,i){if(i===void 0){let e=e=>h(r,e??t.html``);return e.html=(e,...n)=>h(r,(0,t.html)(e,...n)),e}let a=r?.direction??`row`,o=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?o.bind(e):o.unbindAll()})}
style="
display: flex;
flex-direction: ${a};
${r?.justify?`justify-content: ${r.justify};`:``}
${r?.align?`align-items: ${r.align};`:``}
${r?.gap?`gap: ${r.gap};`:``}
"
>
${e.renderFn(i)}
</div>
`}function g(r,i){if(i===void 0){let e=e=>g(r,e??t.html``);return e.html=(e,...n)=>g(r,(0,t.html)(e,...n)),e}let a=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?a.bind(e):a.unbindAll()})}
style="break-inside: avoid; margin-bottom: 16px;"
>
${e.renderFn(i)}
</div>
`}function _(r,i){if(i===void 0)return e=>_(r,e??[t.html``]);let a=r?.columns??1,o=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?o.bind(e):o.unbindAll()})}
style="
display: grid;
grid-template-columns: repeat(${a}, 1fr);
${r?.gap?`gap: ${r.gap};`:``}
"
>
${e.renderFnOrArray(i)}
</div>
`}function v(r,i){if(i===void 0){let e=e=>v(r,e??t.html``);return e.html=(e,...n)=>v(r,(0,t.html)(e,...n)),e}let a=e.getComponentCount(`GridCol`),o=e.getRandomClassName(`GridCol::grid-col`)+`-lyco-now-`+a,s=r?.gap?`column-gap: ${r.gap};`:``,c=`
.${o} {
display: grid;
grid-auto-flow: column;
${s}
}
`,l=e.createEventBinder(r?.on??{});return e.LycoComponent(`GridCol`,t.html`
<style>
${c}
</style>
<div
${(0,n.ref)(e=>{e?l.bind(e):l.unbindAll()})}
class="${o}"
>
${e.renderFn(i)}
</div>
`)}function y(r,i){if(i===void 0){let e=e=>y(r,e??t.html``);return e.html=(e,...n)=>y(r,(0,t.html)(e,...n)),e}let a=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?a.bind(e):a.unbindAll()})}
style="${r?.span?`grid-column: span ${r.span};`:``}"
>
${e.renderFn(i)}
</div>
`}function b(r,i){if(i===void 0){let e=e=>b(r,e??t.html``);return e.html=(e,...n)=>b(r,(0,t.html)(e,...n)),e}let a=e.getComponentCount(`GridRow`),o=e.getRandomClassName(`GridRow::grid-row`)+`-lyco-now-`+a,s=r?.gap?`row-gap: ${r.gap};`:``,c=`
.${o} {
display: grid;
grid-auto-flow: row;
${s}
}
`,l=e.createEventBinder(r?.on??{});return e.LycoComponent(`GridRow`,t.html`
<style>
${c}
</style>
<div
${(0,n.ref)(e=>{e?l.bind(e):l.unbindAll()})}
class="${o}"
>
${e.renderFn(i)}
</div>
`)}function x(r,i){if(i===void 0)return e=>x(r,e??[t.html``]);let a=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?a.bind(e):a.unbindAll()})}
style="
display: flex;
flex-direction: row;
${r?.center?`align-items: center;`:``}
${r?.space?`gap: ${r.space};`:``}
"
>
${e.renderFnOrArray(i)}
</div>
`}function S(r,i){if(i===void 0){let e=e=>S(r,e??t.html``);return e.html=(e,...n)=>S(r,(0,t.html)(e,...n)),e}let a=r?.columnCount??3,o=r?.gap??`16px`,s=e.getComponentCount(`WaterFlow`),c=e.getRandomClassName(`WaterFlow::waterflow`)+`-lyco-now-${s}`,l=`
/* 使用 CSS 类来控制多列布局 */
.${c} {
column-count: ${a};
column-gap: ${typeof o==`number`?`${o}px`:o};
}
/* 子元素如果是块级元素，需要让它们适应多列流式布局 */
.${c} > * {
display: inline-block;
width: 100%;
}
`,u=e.createEventBinder(r?.on??{});return e.LycoComponent(`WaterFlow`,t.html`
<style>
${l}
</style>
<div
${(0,n.ref)(e=>{e?u.bind(e):u.unbindAll()})}
class="${c}"
>
${e.renderFn(i)}
</div>
`)}function C(r,i){if(i===void 0){let e=e=>C(r,e??t.html``);return e.html=(e,...n)=>C(r,(0,t.html)(e,...n)),e}let a=r?.gap??`0px`,o=r?.firstHeight??`50%`,s=t.html``,c=t.html``;if(typeof i==`function`){var l;let e=(l=i.call)?.call(i,null)??[];s=e[0]??t.html``,c=e[1]??t.html``}else s=e.renderFn(i);let u=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?u.bind(e):u.unbindAll()})}
style="
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
gap: ${a};
"
>
<div style="flex: 0 0 ${o}; overflow: auto;">${s}</div>
<div style="flex: 1 1 auto; overflow: auto;">${c}</div>
</div>
`}function w(r,i){if(i===void 0){let e=e=>w(r,e??t.html``);return e.html=(e,...n)=>w(r,(0,t.html)(e,...n)),e}let a=r?.gap??`0px`,o=r?.firstWidth??`50%`,s=t.html``,c=t.html``;if(typeof i==`function`){var l;let e=(l=i.call)?.call(i,null)??[];s=e[0]??t.html``,c=e[1]??t.html``}else s=e.renderFn(i);let u=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?u.bind(e):u.unbindAll()})}
style="
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
gap: ${a};
"
>
<div style="flex: 0 0 ${o}; overflow: auto;">${s}</div>
<div style="flex: 1 1 auto; overflow: auto;">${c}</div>
</div>
`}function T(r,i){if(i===void 0){let e=e=>T(r,e??t.html``);return e.html=(e,...n)=>T(r,(0,t.html)(e,...n)),e}let a=r?.direction??`vertical`,o=r?.height??`100%`,s=r?.width??`100%`,c=r?.customCss??``,l=e.getComponentCount(`ScrollBar`),u=r?.className??e.getRandomClassName(`ScrollBar::scrollbar-container`)+`-lyco-now-`+l,d=a===`horizontal`?`overflow-x: auto; overflow-y: hidden`:`overflow-y: auto; overflow-x: hidden`,f=`
.${u} {
${d};
width: ${s};
height: ${o};
}
.${u}::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.${u}::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.${u}::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
}
${c}
`,p=e.createEventBinder(r?.on??{});return e.LycoComponent(`ScrollBar`,t.html`
<style>
${f}
</style>
<div
${(0,n.ref)(e=>{e?p.bind(e):p.unbindAll()})}
class="${u}"
>
${e.renderFn(i)}
</div>
`)}function E(r,i){if(i===void 0)return e=>E(r,e??[t.html``]);let a=r?.sidebarWidth??`240px`,o=r?.sidebarPosition??`left`,s=r?.gap??`0px`,c=t.html``,l=t.html``;if(typeof i==`function`){var u;let e=(u=i.call)?.call(i,null)??[];c=e[0]??t.html``,l=e[1]??t.html``}else l=e.renderFnOrArray(i);let d=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?d.bind(e):d.unbindAll()})}
style="
display: flex;
flex-direction: ${o===`left`?`row`:`row-reverse`};
width: 100%;
height: 100%;
gap: ${s};
"
>
<div style="flex: 0 0 ${a}; overflow: auto;">${c}</div>
<div style="flex: 1 1 auto; overflow: auto;">${l}</div>
</div>
`}function D(r={},i){if(i===void 0)return e=>D(r,e??[t.html``]);let a=e.getComponentCount(`Swiper`),{gap:o=`8px`,snapType:s=`mandatory`,height:c=`auto`,width:l=`100%`,className:u=e.getRandomClassName(`Swiper::swiper`)+`-lyco-now-${a}`,direction:d=`x`,scrollBehavior:f=`smooth`,align:p=`start`,showNavigation:m=!0,navigationPosition:h=`inside`,showPagination:g=!0,paginationType:_=`dots`,autoPlay:v=!1,interval:y=3e3,loop:b=!1,touchEnabled:x=!0,mouseWheel:S=!1,onSlideChange:C,on:w}=r,T=u,E=T+`-container`,O=T+`-slide`,k=T+`-navigation`,A=T+`-pagination`,j;j=i?typeof i==`function`?i():i:[];let M=j.length,[N,P]=(()=>{let e={value:0};return[()=>e.value,t=>{let n=Math.max(0,Math.min(t,M-1));e.value!==n&&(e.value=n,C?.(n))}]})(),F=e=>{let t=typeof document<`u`?document.querySelector(`.${E}`):null;if(!t)return;let n=t.querySelectorAll(`.${O}`);if(e<0||e>=n.length)return;let r=n[e],i=r.getBoundingClientRect(),a=t.getBoundingClientRect(),o;d===`x`?(o=r.offsetLeft-t.offsetLeft,p===`center`?o-=(a.width-i.width)/2:p===`end`&&(o-=a.width-i.width),t.scrollTo({left:o,behavior:f})):(o=r.offsetTop-t.offsetTop,p===`center`?o-=(a.height-i.height)/2:p===`end`&&(o-=a.height-i.height),t.scrollTo({top:o,behavior:f})),P(e)},I=()=>{let e=N()+1>=M?b?0:N():N()+1;F(e)},L=()=>{let e=N()-1<0?b?M-1:N():N()-1;F(e)},R=()=>{let e=typeof document<`u`?document.querySelector(`.${E}`):null;if(!e)return;let t=e.querySelectorAll(`.${O}`),n=0,r=1/0;t.forEach((t,i)=>{let a=t.getBoundingClientRect(),o=e.getBoundingClientRect(),s;if(d===`x`){let e=a.left+a.width/2-(o.left+o.width/2);s=Math.abs(e)}else{let e=a.top+a.height/2-(o.top+o.height/2);s=Math.abs(e)}s<r&&(r=s,n=i)}),P(n)},z=e=>{if(!x)return;let t=e.touches[0],n=e.currentTarget;n.dataset.touchStartX=t.clientX.toString(),n.dataset.touchStartY=t.clientY.toString()},B=e=>{if(!x)return;let t=e.touches[0],n=e.currentTarget,r=parseFloat(n.dataset.touchStartX||`0`),i=parseFloat(n.dataset.touchStartY||`0`),a=t.clientX-r,o=t.clientY-i;(Math.abs(a)>Math.abs(o)||d===`x`)&&e.preventDefault()},V=e=>{if(!x)return;let t=e.currentTarget,n=parseFloat(t.dataset.touchStartX||`0`),r=parseFloat(t.dataset.touchStartY||`0`);if(!n&&!r)return;let i=e.changedTouches[0],a=i.clientX-n,o=i.clientY-r,s=Math.max(Math.abs(a),Math.abs(o))>30;s&&(d===`x`?a>0?L():I():o>0?L():I()),delete t.dataset.touchStartX,delete t.dataset.touchStartY},H=e=>{S&&(e.preventDefault(),e.deltaY>0?I():L())},ee=e=>{if(!v||!e)return;let t,n=()=>{t=setInterval(I,y)},r=()=>{clearInterval(t)};return e.addEventListener(`mouseenter`,r),e.addEventListener(`mouseleave`,n),n(),()=>{clearInterval(t),e.removeEventListener(`mouseenter`,r),e.removeEventListener(`mouseleave`,n)}},U=()=>{let e=typeof document<`u`?document.querySelector(`.${E}`):null;if(!e)return;let t=[];e.addEventListener(`scroll`,R),t.push(()=>e.removeEventListener(`scroll`,R)),x&&(e.addEventListener(`touchstart`,z),e.addEventListener(`touchmove`,B,{passive:!1}),e.addEventListener(`touchend`,V),t.push(()=>e.removeEventListener(`touchstart`,z)),t.push(()=>e.removeEventListener(`touchmove`,B)),t.push(()=>e.removeEventListener(`touchend`,V))),S&&(e.addEventListener(`wheel`,H,{passive:!1}),t.push(()=>e.removeEventListener(`wheel`,H)));let n=ee(e);return n&&t.push(n),F(0),()=>t.forEach(e=>e())};typeof window<`u`&&typeof document<`u`&&setTimeout(U,0);let W=t.html`
<div class="${A}">
${Array.from({length:M},(e,n)=>t.html`
<button
class="${n===N()?`active`:``}"
@click=${()=>F(n)}
></button>
`)}
</div>
`,G=t.html`
<div class="${A} fraction">
<span class="current">${N()+1}</span>
<span class="separator">/</span>
<span class="total">${M}</span>
</div>
`,K=t.html`
<div class="${A} progressbar">
<div
class="progress"
style="width: ${M>1?N()/(M-1)*100:0}%"
></div>
</div>
`,q=t.html`
<div class="${k}">
<button class="prev" @click=${L}>◀</button>
<button class="next" @click=${I}>▶</button>
</div>
`,te=`
.${T} {
position: relative;
overflow: hidden;
width: ${l};
height: ${c};
}
.${E} {
width: 100%;
height: 100%;
overflow: auto;
scroll-snap-type: ${d+` `+s};
-webkit-overflow-scrolling: touch;
scroll-behavior: ${f};
gap: ${o};
display: flex;
flex-direction: ${d===`x`?`row`:`column`};
}
.${O} {
scroll-snap-align: ${p};
flex-shrink: 0;
}
.${k} {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: none;
padding: ${h===`outside`?`0 1rem`:`0 0.5rem`};
}
.${k} button {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
transition: background-color 0.3s;
}
.${k} button:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.${A} {
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 0.5rem;
align-items: center;
}
.${A} button {
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}
.${A} button.active {
background-color: white;
transform: scale(1.2);
}
.${A}.fraction {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 1rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
.${A}.progressbar {
position: absolute;
bottom: 0.5rem;
left: 0;
right: 0;
height: 0.25rem;
background-color: rgba(255, 255, 255, 0.2);
}
.${A}.progressbar .progress {
height: 100%;
background-color: white;
transition: width 0.3s;
}
`,J=e.createEventBinder(w??{});return e.LycoComponent(`Swiper`,t.html`
<style>
${te}
</style>
<div
${(0,n.ref)(e=>{e?J.bind(e):J.unbindAll()})}
class="${T}"
>
<div class="${E}">
${j.map((e,n)=>t.html`
<div class="${O} --slide-${n}" key=${n}>
${e}
</div>
`)}
</div>
${m?q:null}
${g&&_===`dots`?W:null}
${g&&_===`fraction`?G:null}
${g&&_===`progressbar`?K:null}
</div>
`)}const O={borderRadius:{small:`4px`,medium:`8px`,large:`16px`,full:`9999px`},elevation:{level1:`0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14)`,level2:`0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12)`,level3:`0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10)`,level4:`0 15px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05)`,level5:`0 20px 40px rgba(0,0,0,0.2)`},animation:{standard:`0.2s cubic-bezier(0.4, 0, 0.2, 1)`,emphasized:`0.3s cubic-bezier(0.4, 0, 0.2, 1)`,decelerated:`0.4s cubic-bezier(0, 0, 0.2, 1)`},colors:{primary:`#6750A4`,onPrimary:`#FFFFFF`,primaryContainer:`#EADDFF`,onPrimaryContainer:`#21005E`,secondary:`#625B71`,onSecondary:`#FFFFFF`,secondaryContainer:`#E8DEF8`,onSecondaryContainer:`#1E192B`,surface:`#FEF7FF`,onSurface:`#1C1B1F`,surfaceVariant:`#E7E0EB`,onSurfaceVariant:`#49454E`,error:`#B00020`}};function k(r){let{checked:i=!1,disabled:a=!1,size:o=`medium`,color:s=O.colors.primary,onChange:c,className:l=``,on:u={}}=r??{},d=e.getComponentCount(`SwitchInput`),f=e.getRandomClassName(`SwitchInput::switch`)+`-lyco-now-${d}`,p={small:{width:32,height:16,thumbSize:12},medium:{width:44,height:24,thumbSize:18},large:{width:56,height:32,thumbSize:24}},{width:m,height:h,thumbSize:g}=p[o],_=`
.${f} {
display: inline-block;
position: relative;
width: ${m}px;
height: ${h}px;
cursor: ${a?`not-allowed`:`pointer`};
}
.${f} input {
opacity: 0;
width: 0;
height: 0;
}
.${f} .slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: ${a?O.colors.surfaceVariant:O.colors.onSurfaceVariant};
transition: ${O.animation.standard};
border-radius: ${h}px;
opacity: ${a?.38:.5};
}
.${f} .slider:before {
position: absolute;
content: "";
height: ${g}px;
width: ${g}px;
left: ${(h-g)/2}px;
bottom: ${(h-g)/2}px;
background-color: ${O.colors.surface};
transition: ${O.animation.emphasized};
border-radius: 50%;
box-shadow: ${O.elevation.level1};
}
.${f} input:checked + .slider {
background-color: ${a?O.colors.surfaceVariant:s};
opacity: ${a?.38:1};
}
.${f} input:checked + .slider:before {
transform: translateX(${m-h}px);
background-color: ${O.colors.onPrimary};
}
.${f}:hover .slider:before {
box-shadow: ${a?O.elevation.level1:O.elevation.level2};
}
.${f}:active .slider:before {
box-shadow: ${a?O.elevation.level1:O.elevation.level3};
width: ${g*1.2}px;
}
`,v=e.createEventBinder(u);return e.LycoComponent(`SwitchInput`,t.html`
<style>
${_}
</style>
<label
class="${f} ${l}"
${(0,n.ref)(e=>{e?v.bind(e):v.unbindAll()})}
>
<input
type="checkbox"
?checked=${i}
?disabled=${a}
@change=${e=>{!a&&c&&c(e.target.checked)}}
/>
<span class="slider"></span>
</label>
`)}function A(r,i){let a=r?.top?`top: ${r.top};`:``,o=r?.right?`right: ${r.right};`:``,s=r?.bottom?`bottom: ${r.bottom};`:``,c=r?.left?`left: ${r.left};`:``,l=r?.width?`width: ${r.width};`:``,u=r?.height?`height: ${r.height};`:``,d=typeof r?.zIndex==`number`?`z-index: ${r.zIndex};`:``,f=r?.style?r.style:``,p=r?.className?r.className:``,m=e.createEventBinder(r?.on??{}),h=r=>t.html`
<div
${(0,n.ref)(e=>{e?m.bind(e):m.unbindAll()})}
class="${p}"
style="
position: absolute;
${a} ${o} ${s} ${c}
${l} ${u}
${d}
${f}
"
>
${e.renderFn(r)}
</div>
`;return e.renderFnOrCurry(i,h)}function j(r,i){let a=r?.width??`300px`,o=r?.height??`auto`,s=r?.top??`20%`,c=r?.bottom??`auto`,l=r?.left??`50%`,u=r?.right??`auto`,d=l===`auto`?``:`transform: translateX(-50%);`,f=r?.background??`rgba(255, 255, 255, 0.3)`,p=r?.blur??`10px`,m=r?.borderRadius??`12px`,h=r?.padding??`16px`,g=r?.zIndex??1e3,_=e.createEventBinder(r?.on??{}),v=e=>t.html`
<div
${(0,n.ref)(e=>{e?_.bind(e):_.unbindAll()})}
style="
position: fixed;
top: ${s};
bottom: ${c};
left: ${l};
right: ${u};
${d}
width: ${a};
height: ${o};
background: ${f};
backdrop-filter: blur(${p});
-webkit-backdrop-filter: blur(${p});
border-radius: ${m};
padding: ${h};
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
z-index: ${g};
display: flex;
flex-direction: column;
"
>
${e}
</div>
`;return e.renderFnOrArrayOrCurry(i,void 0,v)}function M(r,i){if(i===void 0)return e=>M(r,e??[t.html``]);let a=`${100/r.ratio}%`,o=r.maxWidth?`max-width: ${r.maxWidth};`:``,s=r.background?`background: ${r.background};`:``,c=r.overflow??`hidden`,l=e.createEventBinder(r.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?l.bind(e):l.unbindAll()})}
style="
position: relative;
width: 100%;
${o}
${s}
overflow: ${c};
"
>
<div style="width: 100%; padding-top: ${a};"></div>
<div
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
"
>
${e.renderFnOrArray(i)}
</div>
</div>
`}function N(r,i){if(i===void 0){let e=e=>N(r,e);return e.html=(e,...n)=>N(r,(0,t.html)(e,...n)),e}let a=e.getComponentCount(`AutoFitGrid`),o=e.getRandomClassName(`AutoFitGrid::auto-fit-grid`)+`-lyco-now-`+a,s=r?.gap??`16px`,c=`
.${o} {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(${r.minItemWidth}, 1fr));
gap: ${s};
}
`,l=e.createEventBinder(r.on??{});return e.LycoComponent(`AutoFitGrid`,t.html`
<style>
${c}
</style>
<div
class="${o}"
${(0,n.ref)(e=>{e?l.bind(e):l.unbindAll()})}
>
${e.renderFn(i)}
</div>
`)}function P(r,i){if(i===void 0)return e=>P(r,e??[t.html``]);let a=r?.size??`32px`,o=r?.overlap??`-8px`,s=e.createEventBinder(r?.on??{}),c=(e,n)=>t.html`
<div
style="
width: ${a};
height: ${a};
border-radius: 50%;
overflow: hidden;
border: 2px solid #fff;
margin-left: ${n===0?`0`:o};
box-sizing: content-box;
"
>
${e}
</div>
`;return t.html`
<div
${(0,n.ref)(e=>{e?s.bind(e):s.unbindAll()})}
style="display: flex; align-items: center;"
>
${e.renderFnOrArray(i,c)}
</div>
`}function F(r,i){if(i===void 0){let e=e=>F(r,e??t.html``);return e.html=(e,...n)=>F(r,(0,t.html)(e,...n)),e}let a=r?.position??`top-right`,o=r?.size??`16px`,s=r?.background??`red`,c=r?.color??`#fff`,[l,u,d,f]=[a.includes(`top`)?`0`:`auto`,a.includes(`right`)?`0`:`auto`,a.includes(`bottom`)?`0`:`auto`,a.includes(`left`)?`0`:`auto`],p=e.createEventBinder(r?.on??{});return t.html`
<div style="position: relative; display: inline-block;">
${e.renderFn(i)}
<div
${(0,n.ref)(e=>{e?p.bind(e):p.unbindAll()})}
style="
position: absolute;
top: ${l};
right: ${u};
bottom: ${d};
left: ${f};
width: ${o};
height: ${o};
background: ${s};
color: ${c};
font-size: calc(${o} * 0.6);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transform: translate(${f===`0`?`-50%`:`0`}, ${l===`0`?`-50%`:`0`});
"
>
${r?.content??``}
</div>
</div>
`}function I(r,i){if(!i)return e=>I(r,e??(0,n.createRef)());let a=e.createEventBinder(r?.on??{}),o=e=>{e?(a.bind(e),typeof i==`function`?i(e):i={value:e}):a.unbindAll()};return t.html`
<canvas
${(0,n.ref)(o)}
.class=${r?.className}
style=${r?.style??``}
></canvas>
`}function L(r,i){if(i===void 0)return e=>L(r,e??[t.html``]);let a=r?.padding??`16px`,o=r?.borderRadius??`8px`,s=r?.shadow??`0 2px 8px rgba(0,0,0,0.1)`,c=r?.background??`#fff`,l=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?l.bind(e):l.unbindAll()})}
style="
background: ${c};
border-radius: ${o};
box-shadow: ${s};
padding: ${a};
box-sizing: border-box;
"
>
${e.renderFnOrArray(i)}
</div>
`}function R(r,i){if(i===void 0){let e=e=>R(r,e??t.html``);return e.html=(e,...n)=>R(r,(0,t.html)(e,...n)),e}let a=r?.width?`width: ${r.width};`:``,o=r?.height?`height: ${r.height};`:``,s=r?.background?`background: ${r.background};`:``,c=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?c.bind(e):c.unbindAll()})}
style="
display: flex;
justify-content: center;
align-items: center;
${a} ${o} ${s}
"
>
${e.renderFn(i)}
</div>
`}function z(r){let{value:i=``,options:a=[],placeholder:o=``,disabled:s=!1,error:c=!1,className:l=``,style:u=``,maxHeight:d=`300px`,onChange:f,onInput:p,onFocus:m,onBlur:h,on:g={},optionRender:_}=r??{},v=e.getComponentCount(`Combobox`),y=e.getRandomClassName(`Combobox::combobox`)+`-lyco-now-${v}`,b=!1,x=null,S=`
.${y} {
position: relative;
width: 100%;
}
.${y} input {
width: 100%;
padding: 12px 16px;
font-size: 16px;
border: 1px solid ${c?O.colors.error:O.colors.surfaceVariant};
border-radius: ${O.borderRadius.small};
color: ${O.colors.onSurface};
transition: all ${O.animation.standard};
outline: none;
box-sizing: border-box;
}
.${y} input:focus {
border-color: ${O.colors.primary};
box-shadow: 0 0 0 2px ${O.colors.primaryContainer};
}
.${y} input:disabled {
background: ${O.colors.surfaceVariant};
color: ${O.colors.onSurfaceVariant};
cursor: not-allowed;
}
.${y} .options {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: ${d};
overflow-y: auto;
border: 1px solid ${O.colors.surfaceVariant};
border-radius: ${O.borderRadius.small};
box-shadow: ${O.elevation.level2};
z-index: 1000;
display: none;
}
.${y} .options.open {
display: block;
}
.${y} .option {
padding: 12px 16px;
cursor: pointer;
transition: background ${O.animation.standard};
}
.${y} .option:hover {
background: ${O.colors.primaryContainer};
}
.${y} .option.selected {
background: ${O.colors.primaryContainer};
color: ${O.colors.onPrimaryContainer};
}
`,C=e.createEventBinder(g),w=null,T=()=>{b?w?.classList.remove(`open`):w?.classList.add(`open`),b=!b},E=(e,t)=>{if(x){x.value=e.value;let n=t.currentTarget;Array.from(w?.querySelectorAll(`.selected`)??[]).forEach(e=>e.classList.remove(`selected`)),!n.classList.contains(`selected`)&&n.classList.add(`selected`),f?.(e.value)}T()},D=e=>{let t=e.target;t.closest(`.${y}`)||(b=!1,w?.classList.remove(`open`))};return typeof window<`u`&&document.addEventListener(`click`,D),e.LycoComponent(`Combobox`,t.html`
<style>
${S}
</style>
<div class="${y} ${l}" style="${u}">
<input
${(0,n.ref)(e=>{e?(x=e,C.bind(e)):C.unbindAll()})}
type="text"
.value=${i}
placeholder=${o}
?disabled=${s}
@focus=${()=>{m?.(),T()}}
@input=${e=>{let t=e.target;p?.(t.value)}}
@change=${e=>{let t=e.target;f?.(t.value)}}
/>
<div
${(0,n.ref)(e=>{e&&(w=e)})}
class="options"
>
${a.map(e=>t.html`
<div
class="option ${e.value===(x?.value??i)?`selected`:``}"
@click=${t=>E(e,t)}
>
${_?_(e):e.label}
</div>
`)}
</div>
</div>
`)}function B(r,i){if(i===void 0)return e=>B(r,e??[t.html``]);let a=r?.maxWidth??`1024px`,o=r?.padding??`0 16px`,s=r?.background?`background: ${r.background};`:``,c=r?.fullHeight?`height: 100%;`:``,l=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?l.bind(e):l.unbindAll()})}
style="
width: 100%;
max-width: ${a};
margin-left: auto;
margin-right: auto;
padding: ${o};
${s}
${c}
box-sizing: border-box;
"
>
${e.renderFnOrArray(i)}
</div>
`}function V(r){let i=r?.orientation??`horizontal`,a=r?.thickness??`1px`,o=r?.color??`#e0e0e0`,s=r?.margin??(i===`horizontal`?`8px 0`:`0 8px`),c=e.createEventBinder(r?.on??{}),l=i===`horizontal`?`width: 100%; height: ${a}; background: ${o}; margin: ${s};`:`width: ${a}; height: 100%; background: ${o}; margin: ${s};`;return t.html`<div
${(0,n.ref)(e=>{e?c.bind(e):c.unbindAll()})}
style="${l}"
></div>`}function H(r,i){if(i===void 0){let e=e=>H(r,e??t.html``);return e.html=(e,...n)=>H(r,(0,t.html)(e,...n)),e}let a=r?.columns??4,o=r?.gap??`24px`,s=r?.background??`#f8f8f8`,c=r?.padding??`40px 16px`,l=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?l.bind(e):l.unbindAll()})}
style="
width: 100%;
background: ${s};
padding: ${c};
box-sizing: border-box;
"
>
<div
style="
display: grid;
grid-template-columns: repeat(${a}, 1fr);
gap: ${o};
"
>
${e.renderFn(i)}
</div>
<div style="text-align: center; margin-top: 24px; color: #666;">
© ${new Date().getFullYear()} Your Company. All rights reserved.
</div>
</div>
`}function ee(e,t){return t?e.map((e,n)=>t(e,n)):t=>e.map((e,n)=>t(e,n))}function U(r,i){if(i===void 0){let e=e=>U(r,e??t.html``);return e.html=(e,...n)=>U(r,(0,t.html)(e,...n)),e}let a=r.defaultColumns??1,o=r.gap??`16px`,s=e.getComponentCount(`GridBreakpoint`),c=r.className??e.getRandomClassName(`GridBreakpoint::grid-breakpoint`)+`-lyco-now-`+s,l=Object.entries(r.breakpoints).map(([e,t])=>`@media`+e+`{
`+c+`{ grid-template-columns: repeat(`+t+`, 1fr); }
}`).join(`
`),u=`
.${c} {
display: grid;
grid-template-columns: repeat(${a}, 1fr);
gap: ${o};
}
${l}`,d=e.createEventBinder(r?.on??{});return e.LycoComponent(`GridBreakpoint`,t.html`
<style>
${u}
</style>
<div
${(0,n.ref)(e=>{e?d.bind(e):d.unbindAll()})}
class="${c}"
>
${e.renderFn(i)}
</div>
`)}function W(r,i){if(i===void 0)return e=>W(r,e??[t.html``]);let a=r?.backgroundImage?`background-image: url('${r.backgroundImage}');`:``,o=r?.height??`400px`,s=r?.overlayColor??`rgba(0, 0, 0, 0.3)`,c=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?c.bind(e):c.unbindAll()})}
style="
position: relative;
width: 100%;
height: ${o};
${a}
background-size: cover;
background-position: center;
"
>
<div
style="
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: ${s};
"
></div>
<div
style="
position: relative;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
padding: 0 16px;
box-sizing: border-box;
"
>
${e.renderFnOrArray(i)}
</div>
</div>
`}function G(r,i){if(i===void 0){let e=e=>G(r,e??t.html``);return e.html=(e,...n)=>G(r,(0,t.html)(e,...n)),e}let a=r?.breakpoint??`(max-width: 600px)`,o=r?.mode??`hide`,s=e.getComponentCount(`Hidden`),c=r?.className??e.getRandomClassName(`Hidden::hidden-container`)+`-lyco-now-`+s,l=o===`hide`?`@media ${a} { .${c} { display: none !important; } }`:`@media ${a} { .${c} { display: block !important; } }
@media not ${a} { .${c} { display: none !important; } }`,u=`
.${c} {
display: block;
}
${l}`,d=e.createEventBinder(r?.on??{});return e.LycoComponent(`Hidden`,t.html`
<style>
${u}
</style>
<div
${(0,n.ref)(e=>{e?d.bind(e):d.unbindAll()})}
class="${c}"
>
${e.renderFn(i)}
</div>
`)}function K(r,i,a=.1,o={}){let s=Array(r.length).fill(!1),c=`${a*100}vh`,l=`100vw`,u=r.map((r,a)=>t.html`
<div
${(0,n.ref)(n=>{if(n&&!s[a]){let c=new IntersectionObserver((n,c)=>{n.forEach(n=>{if(n.isIntersecting&&!s[a]){let l=n.target;s[a]=!0,(0,t.render)(i(r,a),l),e.AnimationAPI.applyAnimation(l,o);let u=l.querySelector(`[data-fallback]`);u&&u.remove(),c.unobserve(l)}})},{root:null,rootMargin:`0px`});c.observe(n)}})}
data-index="${a}"
style="transition: transform ${o.duration||`1s`} ease;"
>
<!-- 占位元素 -->
<div
data-fallback
style="height: ${c}; width: ${l};"
></div>
</div>
`);return u}function q(n){return t.html` <li>${e.renderFnOrArray(n)}</li> `}function te(n,r){let i=n?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,a=n?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,o=n?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,s=e.getComponentCount(`List`),c=n?.className??e.getRandomClassName(`List::list`)+`-lyco-now-${s}`,l=`
ul.${c} {
list-style: none;
margin: 0;
padding: 0;
${i};
}
ul.${c} li {
padding: 12px 16px;
${n?.bordered?`border-bottom: 1px solid #ddd`:``};
}
ul.${c} li:last-child {
${n?.bordered?`border-bottom: none`:``};
}
${a}
${o}
`.toString(),u=n=>e.LycoComponent(`List`,t.html`
<style>
${l}
</style>
<ul class="${c}">
${e.renderFnOrArray(n)}
</ul>
`);return r===void 0?u:u(r)}function J(r,i){let a=r?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,o=r?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,s=r?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,c=e.getComponentCount(`ListGroup`),l=r?.className??e.getRandomClassName(`ListGroup::list-group`)+`-lyco-now-`+c,u=(e,n,r,i)=>r?t.html` <li>${e}</li> `:e,d=`
ul.${l} {
list-style: none;
margin: 0;
padding: 0;
${a};
}
ul.${l} li {
padding: 12px 16px;
${r?.bordered?`border-bottom: 1px solid #ddd`:``};
}
ul.${l} li:last-child {
${r?.bordered?`border-bottom: none`:``};
}
${o}
${s}
`,f=e.createEventBinder(r?.on??{}),p=r=>e.LycoComponent(`ListGroup`,t.html`
<style>
${d}
</style>
<ul
${(0,n.ref)(e=>{e?f.bind(e):f.unbindAll()})}
class="${l}"
>
${e.renderFnOrArray(r,u)}
</ul>
`);return e.renderFnOrArrayOrCurry(i,p)}function ne(r,i){if(i===void 0)return e=>ne(r,e??[t.html``]);let a=r?.background??`rgba(0, 0, 0, 0.5)`,o=r?.zIndex??1e3,s=r?.fullScreen!==!1,c=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?c.bind(e):c.unbindAll()})}
style="
position: ${s?`fixed`:`absolute`};
top: 0; left: 0; right: 0; bottom: 0;
background: ${a};
z-index: ${o};
display: flex;
justify-content: center;
align-items: center;
"
>
${e.renderFnOrArray(i)}
</div>
`}function Y(r,i){if(i===void 0){let e=e=>Y(r,e??t.html``);return e.html=(e,...n)=>Y(r,(0,t.html)(e,...n)),e}let a=r?.width?`width: ${r.width};`:``,o=r?.height?`height: ${r.height};`:``,s=r?.background?`background: ${r.background};`:``,c=e.createEventBinder(r?.on??{});return t.html`
<div
${(0,n.ref)(e=>{e?c.bind(e):c.unbindAll()})}
style="
position: relative;
${a} ${o} ${s}
overflow: hidden;
"
>
${e.renderFn(i)}
</div>
`}function re(r){let i=Math.min(100,Math.max(0,r?.value??0)),a=Math.min(100,Math.max(0,r?.bufferValue??0)),o=r?.color??`#1976d2`,s=r?.secondaryColor??`#90caf9`,c=r?.backgroundColor??`#e0e0e0`,l=r?.height??`4px`,u=r?.radius??`4px`,d=r?.showLabel??!1,f=r?.labelPosition??`inside`,p=r?.labelColor??(i>50?`white`:o),m=r?.labelFontSize??`12px`,h=r?.striped??!1,g=r?.animated??!1,_=r?.paused??!1,v=r?.transitionDuration??`0.3s`,y=r?.className??``,b=r?.style??``,x=e.createEventBinder(r?.on??{}),S=h?`background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
animation: progress-stripes 1s linear infinite;
animation-play-state: ${_?`paused`:`running`};`:``;return t.html`
<style>
${t.css`
@keyframes progress-stripes {
from {
background-position: 1rem 0;
}
to {
background-position: 0 0;
}
}
`.cssText}
</style>
<div
${(0,n.ref)(e=>{e?x.bind(e):x.unbindAll()})}
class="lyco-progress ${y}"
role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="${i}"
style="
width: 100%;
background: ${c};
border-radius: ${u};
height: ${l};
position: relative;
overflow: hidden;
display: flex;
align-items: center;
${b}
"
>
${r?.prefixIcon}
<!-- 缓冲进度 -->
<div
style="
position: absolute;
width: ${a}%;
height: 100%;
background: ${s};
transition: width ${v} ease;
"
></div>
<!-- 主进度 -->
<div
style="
position: absolute;
width: ${i}%;
height: 100%;
background: ${o};
border-radius: ${u};
transition: width ${v} ease;
${S}
"
></div>
<!-- 文本标签 -->
${d?t.html`
<div
style="
position: ${f===`inside`?`absolute`:`relative`};
${f===`inside`?`right: 8px; top: 50%; transform: translateY(-50%);`:`margin-left: auto; margin-right: 4px;`}
font-size: ${m};
color: ${p};
z-index: 1;
"
>
${i}%
</div>
`:``}
${r?.suffixIcon}
</div>
`}function ie(r){let i=r?.width?`width: ${r.width};`:``,a=r?.height?`height: ${r.height};`:``,o=e.createEventBinder(r?.on??{});return t.html`<div
${(0,n.ref)(e=>{e?o.bind(e):o.unbindAll()})}
style="${i} ${a}"
></div>`}function ae(r){let{type:i=`rect`,width:a=`100%`,height:o=`16px`,borderRadius:s=`4px`,animation:c=!0,animationType:l=`shimmer`,bgColor:u=`#eee`,highlightColor:d=`#ddd`,count:f=1,spacing:p=`8px`,direction:m=`vertical`,delay:h=0,autoHide:g=!1,duration:_=2e3,on:v={}}=r??{},y=e.getComponentCount(`SkeletonLoader`),b=e.getRandomClassName(`SkeletonLoader::skeleton`)+`-lyco-now-`+y,x=e.createEventBinder(v),S=i===`circle`?`border-radius:50%;width:${a};height:${a}`:`border-radius:${s};width:${a};height:${o}`,C=``,w=``;c&&(l===`shimmer`?(C=`@keyframes ${b}-shimmer { 0% { background-color: ${u}; } 50% { background-color: ${d}; } 100% { background-color: ${u}; } }`,w=`animation:${b}-shimmer 1.2s infinite ease-in-out;`):(C=`@keyframes ${b}-pulse { 0% { opacity:1; } 50% { opacity:0.4; } 100% { opacity:1; } }`,w=`animation:${b}-pulse 1.2s infinite ease-in-out;`));let T=m===`horizontal`?`display:flex;flex-direction:row;gap:${p}`:`display:flex;flex-direction:column;gap:${p}`,E=[];for(let e=0;e<f;e++)E.push(t.html`
<div
class="${b}"
style="${S};background-color:${u};${w};opacity:0;transition:opacity 0.3s"
${(0,n.ref)(e=>{e&&x.bind(e)})}
></div>
`);function D(e){let t=Array.from(e.querySelectorAll(`.${b}`));setTimeout(()=>{t.forEach(e=>e.style.opacity=`1`),g&&setTimeout(()=>{t.forEach(e=>e.style.opacity=`0`)},_)},h)}return e.LycoComponent(`SkeletonLoader`,t.html`
<style>
${C}
</style>
<div
style="${T}"
${(0,n.ref)(e=>e&&D(e))}
>
${E}
</div>
`)}function oe(r){let i=e.createEventBinder(r?.on??{});return t.html`<div
${(0,n.ref)(e=>{e?i.bind(e):i.unbindAll()})}
style="flex: 1 1 auto;"
></div>`}function se(r){let{size:i=`24px`,color:a=O.colors.primary,thickness:o=`2px`,speed:s=`1.2s`,className:c=``,opacity:l=1,startAngle:u=0,easing:d=`linear`,reverse:f=!1,style:p=``,on:m={},children:h,svgMode:g=!1,strokeLinecap:_=`butt`,strokeDasharray:v=``}=r??{},y=e.createEventBinder(m),b=e.getComponentCount(`Spinner`),x=t.html`
<div
class="${c}"
style="display: inline-flex; align-items: center; justify-content: center; width: ${i}; height: ${i}; ${p}"
${(0,n.ref)()}
>
<div
style="
width: 100%;
height: 100%;
border: ${o} solid ${a};
border-right-color: transparent;
border-radius: 50%;
box-sizing: border-box;
opacity: ${l};
animation: lyco-spin-${b} ${s} ${d} infinite ${f?`reverse`:`normal`};
"
></div>
</div>
<style>
${t.css`
@keyframes lyco-spin-${b} {
from {
transform: rotate(${u}deg);
}
to {
transform: rotate(${u+360}deg);
}
}
`.cssText}
</style>
`,S=t.html`
<div
class="${c}"
style="display: inline-flex; align-items: center; justify-content: center; width: ${i}; height: ${i}; ${p}"
${(0,n.ref)(e=>{e?y.bind(e):y.unbindAll()})}
>
<svg
width="100%"
height="100%"
viewBox="0 0 100 100"
style="opacity: ${l}; overflow: visible; filter: drop-shadow(${O.elevation.level1});"
>
<circle
cx="50"
cy="50"
r="45"
fill="no