Socket
Socket
Sign inDemoInstall

@neuronet.io/vido

Package Overview
Dependencies
Maintainers
1
Versions
212
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@neuronet.io/vido - npm Package Compare versions

Comparing version 4.0.20 to 4.1.0

6

dist/StyleMap.js
import { Directive, directive } from 'lit-html/directive.js';
import { noChange } from 'lit-html';
import { schedule as _schedule } from './helpers';
const elements = new WeakMap();

@@ -15,6 +16,9 @@ class _StyleMap extends Directive {

export class StyleMap {
constructor(styleInfo) {
constructor(styleInfo, options = { schedule: false }) {
this.style = styleInfo;
this._directive = directive(_StyleMap);
this.execute = this.execute.bind(this);
if (options.schedule) {
this.execute = _schedule(this.execute);
}
}

@@ -21,0 +25,0 @@ directive() {

229

dist/vido.js

@@ -148,2 +148,114 @@ /**

/**
* Schedule - a throttle function that uses requestAnimationFrame to limit the rate at which a function is called.
*
* @param {function} fn
* @returns {function}
*/
function schedule(fn) {
let frameId = 0;
function wrapperFn(argument) {
if (frameId) {
return;
}
function executeFrame() {
frameId = 0;
fn.apply(undefined, [argument]);
}
frameId = requestAnimationFrame(executeFrame);
}
return wrapperFn;
}
/**
* Is object - helper function to determine if specified variable is an object
*
* @param {any} item
* @returns {boolean}
*/
function isObject(item) {
if (item && item.constructor) {
return item.constructor.name === 'Object';
}
return typeof item === 'object' && item !== null;
}
/**
* Merge deep - helper function which will merge objects recursively - creating brand new one - like clone
*
* @param {object} target
* @params {[object]} sources
* @returns {object}
*/
function mergeDeep(target, ...sources) {
const source = sources.shift();
if (isObject(target) && isObject(source)) {
for (const key in source) {
if (isObject(source[key])) {
if (typeof source[key].clone === 'function') {
target[key] = source[key].clone();
}
else {
if (typeof target[key] === 'undefined') {
target[key] = {};
}
target[key] = mergeDeep(target[key], source[key]);
}
}
else if (Array.isArray(source[key])) {
target[key] = new Array(source[key].length);
let index = 0;
for (let item of source[key]) {
if (isObject(item)) {
if (typeof item.clone === 'function') {
target[key][index] = item.clone();
}
else {
target[key][index] = mergeDeep({}, item);
}
}
else {
target[key][index] = item;
}
index++;
}
}
else {
target[key] = source[key];
}
}
}
if (!sources.length) {
return target;
}
return mergeDeep(target, ...sources);
}
/**
* Clone helper function
*
* @param source
* @returns {object} cloned source
*/
function clone(source) {
// @ts-ignore
if (typeof source.actions !== 'undefined') {
// @ts-ignore
const actns = source.actions.map((action) => {
const result = Object.assign({}, action);
const props = Object.assign({}, result.props);
delete props.state;
delete props.api;
delete result.element;
result.props = props;
return result;
});
// @ts-ignore
source.actions = actns;
}
return mergeDeep({}, source);
}
var helpers = {
mergeDeep,
clone,
schedule,
};
const elements = new WeakMap();

@@ -161,6 +273,9 @@ class _StyleMap extends i$4 {

class StyleMap {
constructor(styleInfo) {
constructor(styleInfo, options = { schedule: false }) {
this.style = styleInfo;
this._directive = e$4(_StyleMap);
this.execute = this.execute.bind(this);
if (options.schedule) {
this.execute = schedule(this.execute);
}
}

@@ -713,114 +828,2 @@ directive() {

/**
* Schedule - a throttle function that uses requestAnimationFrame to limit the rate at which a function is called.
*
* @param {function} fn
* @returns {function}
*/
function schedule(fn) {
let frameId = 0;
function wrapperFn(argument) {
if (frameId) {
return;
}
function executeFrame() {
frameId = 0;
fn.apply(undefined, [argument]);
}
frameId = requestAnimationFrame(executeFrame);
}
return wrapperFn;
}
/**
* Is object - helper function to determine if specified variable is an object
*
* @param {any} item
* @returns {boolean}
*/
function isObject(item) {
if (item && item.constructor) {
return item.constructor.name === 'Object';
}
return typeof item === 'object' && item !== null;
}
/**
* Merge deep - helper function which will merge objects recursively - creating brand new one - like clone
*
* @param {object} target
* @params {[object]} sources
* @returns {object}
*/
function mergeDeep(target, ...sources) {
const source = sources.shift();
if (isObject(target) && isObject(source)) {
for (const key in source) {
if (isObject(source[key])) {
if (typeof source[key].clone === 'function') {
target[key] = source[key].clone();
}
else {
if (typeof target[key] === 'undefined') {
target[key] = {};
}
target[key] = mergeDeep(target[key], source[key]);
}
}
else if (Array.isArray(source[key])) {
target[key] = new Array(source[key].length);
let index = 0;
for (let item of source[key]) {
if (isObject(item)) {
if (typeof item.clone === 'function') {
target[key][index] = item.clone();
}
else {
target[key][index] = mergeDeep({}, item);
}
}
else {
target[key][index] = item;
}
index++;
}
}
else {
target[key] = source[key];
}
}
}
if (!sources.length) {
return target;
}
return mergeDeep(target, ...sources);
}
/**
* Clone helper function
*
* @param source
* @returns {object} cloned source
*/
function clone(source) {
// @ts-ignore
if (typeof source.actions !== 'undefined') {
// @ts-ignore
const actns = source.actions.map((action) => {
const result = Object.assign({}, action);
const props = Object.assign({}, result.props);
delete props.state;
delete props.api;
delete result.element;
result.props = props;
return result;
});
// @ts-ignore
source.actions = actns;
}
return mergeDeep({}, source);
}
var helpers = {
mergeDeep,
clone,
schedule,
};
class Slots {

@@ -827,0 +830,0 @@ constructor(vido, props) {

@@ -57,3 +57,3 @@ /**

* SPDX-License-Identifier: BSD-3-Clause
*/const xt=R(class extends k{render(t){return b}update(t,e){if("boolean"!=typeof e[0])throw new Error("[vido] Detach directive argument should be a boolean.");let s=e[0];const n=t.element;if(s)bt.has(t)||bt.set(t,{element:n,nextSibling:n.nextSibling,previousSibling:n.previousSibling,parent:n.parentNode}),n.remove();else{const e=bt.get(t);e&&(e.nextSibling&&e.nextSibling.parentNode?e.nextSibling.parentNode.insertBefore(e.element,e.nextSibling):e.previousSibling&&e.previousSibling.parentNode?e.previousSibling.parentNode.appendChild(e.element):e.parent&&e.parent.appendChild(e.element),bt.delete(t))}return this.render(s)}}),Ct=R(class extends k{constructor(t){var e;if(super(t),t.type!==D.ATTRIBUTE||"style"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((e,s)=>{const n=t[s];return null==n?e:e+`${s=s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${n};`}),"")}update(t,[e]){const{style:s}=t.element;if(void 0===this.ut){this.ut=new Set;for(const t in e)this.ut.add(t);return this.render(e)}this.ut.forEach((t=>{null==e[t]&&(this.ut.delete(t),t.includes("-")?s.removeProperty(t):s[t]="")}));for(const t in e){const n=e[t];null!=n&&(this.ut.add(t),t.includes("-")?s.setProperty(t,n):s[t]=n)}return _}}),wt=new WeakMap;
*/const xt=R(class extends k{render(t){return b}update(t,e){if("boolean"!=typeof e[0])throw new Error("[vido] Detach directive argument should be a boolean.");let s=e[0];const n=t.element;if(s)bt.has(t)||bt.set(t,{element:n,nextSibling:n.nextSibling,previousSibling:n.previousSibling,parent:n.parentNode}),n.remove();else{const e=bt.get(t);e&&(e.nextSibling&&e.nextSibling.parentNode?e.nextSibling.parentNode.insertBefore(e.element,e.nextSibling):e.previousSibling&&e.previousSibling.parentNode?e.previousSibling.parentNode.appendChild(e.element):e.parent&&e.parent.appendChild(e.element),bt.delete(t))}return this.render(s)}}),Ct=R(class extends k{constructor(t){var e;if(super(t),t.type!==D.ATTRIBUTE||"style"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((e,s)=>{const n=t[s];return null==n?e:e+`${s=s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${n};`}),"")}update(t,[e]){const{style:s}=t.element;if(void 0===this.ut){this.ut=new Set;for(const t in e)this.ut.add(t);return this.render(e)}this.ut.forEach((t=>{null==e[t]&&(this.ut.delete(t),t.includes("-")?s.removeProperty(t):s[t]="")}));for(const t in e){const n=e[t];null!=n&&(this.ut.add(t),t.includes("-")?s.setProperty(t,n):s[t]=n)}return _}});
/**

@@ -63,3 +63,3 @@ * @license

* SPDX-License-Identifier: BSD-3-Clause
*/class Et extends k{update(t,e){return e[0].execute(t),_}render(t){return t.toString()}}class It{constructor(t){this.style=t,this._directive=R(Et),this.execute=this.execute.bind(this)}directive(){return this._directive(this)}setStyle(t){this.style=t}toString(){return Object.keys(this.style).reduce(((t,e)=>{const s=this.style[e];return null==s?t:t+`${e=e.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`}),"")}execute(t){const e=t.element;let s;wt.has(e)?s=wt.get(e):(s={toUpdate:[],toRemove:[],previousStyle:{}},wt.set(e,s)),s.toRemove.length=0,s.toUpdate.length=0;const n=e.style,i=s.previousStyle,o=e.style.cssText.split(";").map((t=>t.substr(0,t.indexOf(":")).trim())).filter((t=>!!t));for(const t of o)void 0===this.style[t]&&(s.toRemove.includes(t)||s.toRemove.push(t));for(const t in i)t in this.style&&void 0===this.style[t]&&o.includes(t)&&(s.toRemove.includes(t)||s.toRemove.push(t));for(const t in this.style){if(!(t in this.style))continue;const e=this.style[t],n=i[t];void 0!==n&&n===e&&o.includes(t)||s.toUpdate.push(t)}if(s.toRemove.length||s.toUpdate.length){for(const t of s.toRemove)n.removeProperty(t),n[t]&&delete n[t];for(const t of s.toUpdate){const e=this.style[t];t.includes("-")?n.setProperty(t,e):n[t]=e}s.previousStyle=Object.assign({},this.style)}wt.set(e,s)}}
*/function wt(t){let e=0;return function(s){e||(e=requestAnimationFrame((function(){e=0,t.apply(void 0,[s])})))}}function Et(t){return t&&t.constructor?"Object"===t.constructor.name:"object"==typeof t&&null!==t}function It(t,...e){const s=e.shift();if(Et(t)&&Et(s))for(const e in s)if(Et(s[e]))"function"==typeof s[e].clone?t[e]=s[e].clone():(void 0===t[e]&&(t[e]={}),t[e]=It(t[e],s[e]));else if(Array.isArray(s[e])){t[e]=new Array(s[e].length);let n=0;for(let i of s[e])Et(i)?"function"==typeof i.clone?t[e][n]=i.clone():t[e][n]=It({},i):t[e][n]=i,n++}else t[e]=s[e];return e.length?It(t,...e):t}function Tt(t){if(void 0!==t.actions){const e=t.actions.map((t=>{const e=Object.assign({},t),s=Object.assign({},e.props);return delete s.state,delete s.api,delete e.element,e.props=s,e}));t.actions=e}return It({},t)}var Mt={mergeDeep:It,clone:Tt,schedule:wt};const Pt=new WeakMap;class Yt extends k{update(t,e){return e[0].execute(t),_}render(t){return t.toString()}}class Xt{constructor(t,e={schedule:!1}){this.style=t,this._directive=R(Yt),this.execute=this.execute.bind(this),e.schedule&&(this.execute=wt(this.execute))}directive(){return this._directive(this)}setStyle(t){this.style=t}toString(){return Object.keys(this.style).reduce(((t,e)=>{const s=this.style[e];return null==s?t:t+`${e=e.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`}),"")}execute(t){const e=t.element;let s;Pt.has(e)?s=Pt.get(e):(s={toUpdate:[],toRemove:[],previousStyle:{}},Pt.set(e,s)),s.toRemove.length=0,s.toUpdate.length=0;const n=e.style,i=s.previousStyle,o=e.style.cssText.split(";").map((t=>t.substr(0,t.indexOf(":")).trim())).filter((t=>!!t));for(const t of o)void 0===this.style[t]&&(s.toRemove.includes(t)||s.toRemove.push(t));for(const t in i)t in this.style&&void 0===this.style[t]&&o.includes(t)&&(s.toRemove.includes(t)||s.toRemove.push(t));for(const t in this.style){if(!(t in this.style))continue;const e=this.style[t],n=i[t];void 0!==n&&n===e&&o.includes(t)||s.toUpdate.push(t)}if(s.toRemove.length||s.toUpdate.length){for(const t of s.toRemove)n.removeProperty(t),n[t]&&delete n[t];for(const t of s.toUpdate){const e=this.style[t];t.includes("-")?n.setProperty(t,e):n[t]=e}s.previousStyle=Object.assign({},this.style)}Pt.set(e,s)}}
/**

@@ -69,3 +69,3 @@ * @license

* SPDX-License-Identifier: BSD-3-Clause
*/const Tt=R(class extends k{constructor(t){var e;if(super(t),t.type!==D.ATTRIBUTE||"class"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((e=>t[e])).join(" ")+" "}update(t,[e]){var s,n;if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.et=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in e)e[t]&&!(null===(s=this.et)||void 0===s?void 0:s.has(t))&&this.st.add(t);return this.render(e)}const i=t.element.classList;this.st.forEach((t=>{t in e||(i.remove(t),this.st.delete(t))}));for(const t in e){const s=!!e[t];s===this.st.has(t)||(null===(n=this.et)||void 0===n?void 0:n.has(t))||(s?(i.add(t),this.st.add(t)):(i.remove(t),this.st.delete(t)))}return _}});class Mt{constructor(){this.isAction=!0}}Mt.prototype.isAction=!0;const Pt={element:document.createTextNode(""),axis:"xy",threshold:10,onDown(){},onMove(){},onUp(){},onWheel(){}},Yt="undefined"!=typeof PointerEvent;let Xt=0;class Ht extends Mt{constructor(t,e){super(),this.moving="",this.initialX=0,this.initialY=0,this.lastY=0,this.lastX=0,this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onWheel=this.onWheel.bind(this),this.element=t,this.id=++Xt,this.options=Object.assign(Object.assign({},Pt),e.pointerOptions),Yt?(t.addEventListener("pointerdown",this.onPointerDown),document.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp)):(t.addEventListener("touchstart",this.onPointerDown),document.addEventListener("touchmove",this.onPointerMove,{passive:!1}),document.addEventListener("touchend",this.onPointerUp),document.addEventListener("touchcancel",this.onPointerUp),t.addEventListener("mousedown",this.onPointerDown),document.addEventListener("mousemove",this.onPointerMove,{passive:!1}),document.addEventListener("mouseup",this.onPointerUp))}normalizeMouseWheelEvent(t){let e=t.deltaX||0,s=t.deltaY||0,n=t.deltaZ||0;const i=t.deltaMode,o=parseInt(getComputedStyle(t.target).getPropertyValue("line-height"));let r=1;switch(i){case 1:r=o;break;case 2:r=window.height}return e*=r,s*=r,n*=r,{x:e,y:s,z:n,event:t}}onWheel(t){const e=this.normalizeMouseWheelEvent(t);this.options.onWheel(e)}normalizePointerEvent(t){let e={x:0,y:0,pageX:0,pageY:0,clientX:0,clientY:0,screenX:0,screenY:0,event:t};switch(t.type){case"wheel":const s=this.normalizeMouseWheelEvent(t);e.x=s.x,e.y=s.y,e.pageX=e.x,e.pageY=e.y,e.screenX=e.x,e.screenY=e.y,e.clientX=e.x,e.clientY=e.y;break;case"touchstart":case"touchmove":case"touchend":case"touchcancel":e.x=t.changedTouches[0].screenX,e.y=t.changedTouches[0].screenY,e.pageX=t.changedTouches[0].pageX,e.pageY=t.changedTouches[0].pageY,e.screenX=t.changedTouches[0].screenX,e.screenY=t.changedTouches[0].screenY,e.clientX=t.changedTouches[0].clientX,e.clientY=t.changedTouches[0].clientY;break;default:e.x=t.x,e.y=t.y,e.pageX=t.pageX,e.pageY=t.pageY,e.screenX=t.screenX,e.screenY=t.screenY,e.clientX=t.clientX,e.clientY=t.clientY}return e}onPointerDown(t){if("mousedown"===t.type&&0!==t.button)return;this.moving="xy";const e=this.normalizePointerEvent(t);this.lastX=e.x,this.lastY=e.y,this.initialX=e.x,this.initialY=e.y,this.options.onDown(e)}handleX(t){let e=t.x-this.lastX;return this.lastY=t.y,this.lastX=t.x,e}handleY(t){let e=t.y-this.lastY;return this.lastY=t.y,this.lastX=t.x,e}onPointerMove(t){if(""===this.moving||"mousemove"===t.type&&0!==t.button)return;const e=this.normalizePointerEvent(t);if("x|y"===this.options.axis){let s=0,n=0;("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",s=this.handleX(e)),("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",n=this.handleY(e)),this.options.onMove({movementX:s,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("xy"===this.options.axis){let s=0,n=0;Math.abs(e.x-this.initialX)>this.options.threshold&&(s=this.handleX(e)),Math.abs(e.y-this.initialY)>this.options.threshold&&(n=this.handleY(e)),this.options.onMove({movementX:s,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("x"===this.options.axis)("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",this.options.onMove({movementX:this.handleX(e),movementY:0,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}));else if("y"===this.options.axis){let s=0;("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",s=this.handleY(e)),this.options.onMove({movementX:0,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}}onPointerUp(t){this.moving="";const e=this.normalizePointerEvent(t);this.options.onUp({movementX:0,movementY:0,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}),this.lastY=0,this.lastX=0}destroy(t){Yt?(t.removeEventListener("pointerdown",this.onPointerDown),document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp)):(t.removeEventListener("mousedown",this.onPointerDown),document.removeEventListener("mousemove",this.onPointerMove),document.removeEventListener("mouseup",this.onPointerUp),t.removeEventListener("touchstart",this.onPointerDown),document.removeEventListener("touchmove",this.onPointerMove),document.removeEventListener("touchend",this.onPointerUp),document.removeEventListener("touchcancel",this.onPointerUp))}}function Nt(t){let e=0;return function(s){e||(e=requestAnimationFrame((function(){e=0,t.apply(void 0,[s])})))}}function St(t){return t&&t.constructor?"Object"===t.constructor.name:"object"==typeof t&&null!==t}function Lt(t,...e){const s=e.shift();if(St(t)&&St(s))for(const e in s)if(St(s[e]))"function"==typeof s[e].clone?t[e]=s[e].clone():(void 0===t[e]&&(t[e]={}),t[e]=Lt(t[e],s[e]));else if(Array.isArray(s[e])){t[e]=new Array(s[e].length);let n=0;for(let i of s[e])St(i)?"function"==typeof i.clone?t[e][n]=i.clone():t[e][n]=Lt({},i):t[e][n]=i,n++}else t[e]=s[e];return e.length?Lt(t,...e):t}function Ut(t){if(void 0!==t.actions){const e=t.actions.map((t=>{const e=Object.assign({},t),s=Object.assign({},e.props);return delete s.state,delete s.api,delete e.element,e.props=s,e}));t.actions=e}return Lt({},t)}var Bt={mergeDeep:Lt,clone:Ut,schedule:Nt};class Dt{constructor(t,e){this.slotInstances={},this.destroyed=!1,this.vido=t,this.props=e,this.destroy=this.destroy.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this),this.getInstances=this.getInstances.bind(this),this.setComponents=this.setComponents.bind(this),this.vido.onDestroy((()=>{this.destroy()}))}setComponents(t){if(t&&!this.destroyed){for(const e in t){const s=t[e];void 0===this.slotInstances[e]&&(this.slotInstances[e]=[]);for(const t of this.slotInstances[e])t.destroy();this.slotInstances[e].length=0;for(const t of s)this.slotInstances[e].push(this.vido.createComponent(t,this.props))}this.vido.update()}}destroy(){if(!this.destroyed){for(const t in this.slotInstances){for(const e of this.slotInstances[t])e.destroy();this.slotInstances[t].length=0}this.destroyed=!0}}change(t,e){if(!this.destroyed)for(const s in this.slotInstances){const n=this.slotInstances[s];for(const s of n)s.change(t,e)}}getInstances(t){return this.destroyed?[]:void 0===t?this.slotInstances:this.slotInstances[t]}html(t,e){if(this.destroyed)return;if(!this.slotInstances[t]||0===this.slotInstances[t].length)return e;let s=e;for(const e of this.slotInstances[t])s=e.html(s);return s}getProps(){return this.props}isDestroyed(){return this.destroyed}}class Rt extends k{update(t,e){if("function"!=typeof e[0])throw new Error("[vido] GetElementDirective argument should be a function.");(0,e[0])(t.element)}render(){return b}}function kt(t,e){let s=0;const n=new Map;let i,o,r=new Map,h=0;const l=[],c=Promise.resolve(),a={},d=function(t){return class extends k{update(e,s){const n=e.element,i=s[0],o=s[1],r=s[2];for(const e of o)if(void 0!==e){let s;if(t.has(i))for(const o of t.get(i))if(o.componentAction.create===e&&o.element===n){s=o;break}if(s)s.props=r;else{void 0!==n.vido&&delete n.vido;const s={instance:i,componentAction:{create:e,update(){},destroy(){}},element:n,props:r};let o=[];t.has(i)&&(o=t.get(i)),o.push(s),t.set(i,o)}}}render(t,e,s){return b}}}(r);class u{constructor(t){this.instance=t}create(t,e){const s=R(d);return()=>s(this.instance,t,e)}}const p=function(t,e,s){return class{constructor(t,e,s={}){this.destroyed=!1,this.instance=t,this.name=e.name,this.vidoInstance=e,this.props=s,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this)}destroy(){this.destroyed||(this.vidoInstance.debug&&(console.groupCollapsed(`destroying component ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.destroyComponent(this.instance,this.vidoInstance),this.destroyed=!0)}update(n){return this.vidoInstance.debug&&(console.groupCollapsed(`updating component ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.updateTemplate(n)}change(n,i={}){this.vidoInstance.debug&&(console.groupCollapsed(`changing component ${this.instance}`),console.log(s({props:this.props,newProps:n,components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd());const o=t.get(this.instance);o&&o.change(n,i)}html(e={}){const s=t.get(this.instance);if(s&&!s.destroyed)return s.update(e,this.vidoInstance)}_getComponents(){return t}_getActions(){return e}}}(n,r,Ut),v=function(t,e,s){return class{constructor(t,e,s){this.destroyed=!1,this.instance=t,this.vidoInstance=e,this.renderFunction=s,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this)}destroy(){if(!this.destroyed){this.vidoInstance.debug&&(console.groupCollapsed(`component destroy method fired ${this.instance}`),console.log(s({props:this.vidoInstance.props,components:t.keys(),destroyable:this.vidoInstance.destroyable,actionsByInstance:e})),console.trace(),console.groupEnd()),this.content&&"function"==typeof this.content.destroy&&this.content.destroy();for(const t of this.vidoInstance.destroyable)t();this.vidoInstance.onChangeFunctions.length=0,this.vidoInstance.destroyable.length=0,this.vidoInstance.destroyed=!0,this.destroyed=!0,this.vidoInstance.update()}}update(n={}){return this.vidoInstance.debug&&(console.groupCollapsed(`component update method fired ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.renderFunction(n)}change(n,i={leave:!1}){const o=n;this.vidoInstance.debug&&(console.groupCollapsed(`component change method fired ${this.instance}`),console.log(s({props:o,components:t.keys(),onChangeFunctions:this.vidoInstance.onChangeFunctions,changedProps:n,actionsByInstance:e})),console.trace(),console.groupEnd());for(const t of this.vidoInstance.onChangeFunctions)t(n,i)}}}(n,r,Ut);class y{constructor(s="",i=""){this.instance="",this.name="",this.destroyable=[],this.destroyed=!1,this.onChangeFunctions=[],this.debug=!1,this.state=t,this.api=e,this.lastProps={},this.html=$,this.svg=A,this.directive=R,this.asyncAppend=at,this.asyncReplace=ct,this.cache=dt,this.classMap=Tt,this.styleMap=Ct,this.StyleMap=It,this.guard=pt,this.live=_t,this.ifDefined=vt,this.repeat=mt,this.unsafeHTML=gt,this.until=At,this.schedule=Nt,this.getElement=R(Rt),this.actionsByInstance=()=>{},this.detach=xt,this.PointerAction=Ht,this.Action=Mt,this.Slots=Dt,this._components=n,this._actions=r,this.instance=s,this.reuseComponents=this.reuseComponents.bind(this),this.onDestroy=this.onDestroy.bind(this),this.onChange=this.onChange.bind(this),this.update=this.update.bind(this),this.destroyComponent=this.destroyComponent.bind(this);for(const t in a)this[t]=a[t].bind(this);this.name=i,this.Actions=new u(s)}static addMethod(t,e){a[t]=e}onDestroy(t){this.destroyable.push(t)}onChange(t){this.onChangeFunctions.push(t)}update(t){return this.updateTemplate(t)}reuseComponents(t,e,s,n,i=!0,o=!1){const r=[],h=t.length,l=e.length;let c=!1;!i||void 0!==e&&0!==e.length||(c=!0);let a=0;if(h<l){let i=l-h;for(;i;){const o=e[l-i],h=this.createComponent(n,s(o));t.push(h),r.push(h),i--}}else if(h>l){let e=h-l;for(i&&(c=!0,a=h-e);e;){const s=h-e;i||(r.push(t[s]),t[s].destroy()),e--}i||(t.length=l)}let d=0;o&&console.log("modified components",r),o&&console.log("current components",t),o&&console.log("data array",e);for(const n of t){const t=e[d];o&&console.log(`reuse components data at '${d}'`,t),n&&!r.includes(n)&&(o&&console.log("getProps fn result",s(t)),n.change(s(t),{leave:c&&d>=a})),d++}}createComponent(t,e={}){const i=t.name+":"+s++;let o;o=new y(i,t.name);const h=new p(i,o,e),l=new v(i,o,t(o,e));return n.set(i,l),n.get(i).change(e),o.debug&&(console.groupCollapsed(`component created ${i}`),console.log(Ut({props:e,components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd()),h}destroyComponent(t,e){if(e.debug&&(console.groupCollapsed(`destroying component ${t}...`),console.log(Ut({components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd()),r.has(t))for(const e of r.get(t))"function"==typeof e.componentAction.destroy&&e.componentAction.destroy(e.element,e.props);r.delete(t);const s=n.get(t);s?(s.destroy(),n.delete(t),e.debug&&(console.groupCollapsed(`component destroyed ${t}`),console.log(Ut({components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd())):console.warn(`No component to destroy! [${t}]`)}executeActions(){for(const t of r.values()){for(const e of t)if(void 0===e.element.vido){const t=n.get(e.instance);e.isActive=function(){return t&&!1===t.destroyed};const s=e.componentAction,i=s.create;if(void 0!==i){let t;t=i.prototype&&(i.prototype.isAction||i.prototype.update||i.prototype.destroy)||i.isAction?new i(e.element,e.props):i(e.element,e.props),void 0!==t&&("function"==typeof t?s.destroy=t:("function"==typeof t.update&&(s.update=t.update.bind(t)),"function"==typeof t.destroy&&(s.destroy=t.destroy.bind(t))))}}else e.element.vido=e.props,"function"==typeof e.componentAction.update&&e.isActive()&&e.componentAction.update(e.element,e.props);for(const e of t)e.element.vido=e.props}}updateTemplate(t){return t&&l.push(t),new Promise((t=>{const e=++h,s=this;c.then((function(){if(e===h){h=0,s.render();for(const t of l)t();l.length=0,t(null)}}))}))}createApp(t){o=t.element;const e=this.createComponent(t.component,t.props);return i=e.instance,this.render(),e}render(){const t=n.get(i);t?(C(t.update(),o),this.executeActions()):o&&o.remove()}}return new y}kt.prototype.lithtml=B,kt.prototype.Action=Mt,kt.prototype.Directive=k,kt.prototype.schedule=Nt,kt.prototype.detach=xt,kt.prototype.styleMap=Ct,kt.prototype.classMap=Tt,kt.prototype.StyleMap=It,kt.prototype.PointerAction=Ht,kt.prototype.asyncAppend=at,kt.prototype.asyncReplace=ct,kt.prototype.cache=dt,kt.prototype.guard=pt,kt.prototype.live=_t,kt.prototype.ifDefined=vt,kt.prototype.repeat=mt,kt.prototype.unsafeHTML=gt,kt.prototype.until=At,kt.prototype.Slots=Dt;const Ot=B;export{Mt as Action,k as Directive,D as PartType,Ht as PointerAction,Dt as Slots,It as StyleMap,L as _$LH,at as asyncAppend,ct as asyncReplace,dt as cache,Tt as classMap,kt as default,xt as detach,R as directive,pt as guard,Bt as helpers,$ as html,vt as ifDefined,Ot as lit,B as lithtml,_ as noChange,b as nothing,C as render,mt as repeat,Nt as schedule,Ct as styleMap,A as svg,gt as unsafeHTML,At as until};
*/const Ht=R(class extends k{constructor(t){var e;if(super(t),t.type!==D.ATTRIBUTE||"class"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((e=>t[e])).join(" ")+" "}update(t,[e]){var s,n;if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.et=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in e)e[t]&&!(null===(s=this.et)||void 0===s?void 0:s.has(t))&&this.st.add(t);return this.render(e)}const i=t.element.classList;this.st.forEach((t=>{t in e||(i.remove(t),this.st.delete(t))}));for(const t in e){const s=!!e[t];s===this.st.has(t)||(null===(n=this.et)||void 0===n?void 0:n.has(t))||(s?(i.add(t),this.st.add(t)):(i.remove(t),this.st.delete(t)))}return _}});class Nt{constructor(){this.isAction=!0}}Nt.prototype.isAction=!0;const St={element:document.createTextNode(""),axis:"xy",threshold:10,onDown(){},onMove(){},onUp(){},onWheel(){}},Lt="undefined"!=typeof PointerEvent;let Ut=0;class Bt extends Nt{constructor(t,e){super(),this.moving="",this.initialX=0,this.initialY=0,this.lastY=0,this.lastX=0,this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onWheel=this.onWheel.bind(this),this.element=t,this.id=++Ut,this.options=Object.assign(Object.assign({},St),e.pointerOptions),Lt?(t.addEventListener("pointerdown",this.onPointerDown),document.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp)):(t.addEventListener("touchstart",this.onPointerDown),document.addEventListener("touchmove",this.onPointerMove,{passive:!1}),document.addEventListener("touchend",this.onPointerUp),document.addEventListener("touchcancel",this.onPointerUp),t.addEventListener("mousedown",this.onPointerDown),document.addEventListener("mousemove",this.onPointerMove,{passive:!1}),document.addEventListener("mouseup",this.onPointerUp))}normalizeMouseWheelEvent(t){let e=t.deltaX||0,s=t.deltaY||0,n=t.deltaZ||0;const i=t.deltaMode,o=parseInt(getComputedStyle(t.target).getPropertyValue("line-height"));let r=1;switch(i){case 1:r=o;break;case 2:r=window.height}return e*=r,s*=r,n*=r,{x:e,y:s,z:n,event:t}}onWheel(t){const e=this.normalizeMouseWheelEvent(t);this.options.onWheel(e)}normalizePointerEvent(t){let e={x:0,y:0,pageX:0,pageY:0,clientX:0,clientY:0,screenX:0,screenY:0,event:t};switch(t.type){case"wheel":const s=this.normalizeMouseWheelEvent(t);e.x=s.x,e.y=s.y,e.pageX=e.x,e.pageY=e.y,e.screenX=e.x,e.screenY=e.y,e.clientX=e.x,e.clientY=e.y;break;case"touchstart":case"touchmove":case"touchend":case"touchcancel":e.x=t.changedTouches[0].screenX,e.y=t.changedTouches[0].screenY,e.pageX=t.changedTouches[0].pageX,e.pageY=t.changedTouches[0].pageY,e.screenX=t.changedTouches[0].screenX,e.screenY=t.changedTouches[0].screenY,e.clientX=t.changedTouches[0].clientX,e.clientY=t.changedTouches[0].clientY;break;default:e.x=t.x,e.y=t.y,e.pageX=t.pageX,e.pageY=t.pageY,e.screenX=t.screenX,e.screenY=t.screenY,e.clientX=t.clientX,e.clientY=t.clientY}return e}onPointerDown(t){if("mousedown"===t.type&&0!==t.button)return;this.moving="xy";const e=this.normalizePointerEvent(t);this.lastX=e.x,this.lastY=e.y,this.initialX=e.x,this.initialY=e.y,this.options.onDown(e)}handleX(t){let e=t.x-this.lastX;return this.lastY=t.y,this.lastX=t.x,e}handleY(t){let e=t.y-this.lastY;return this.lastY=t.y,this.lastX=t.x,e}onPointerMove(t){if(""===this.moving||"mousemove"===t.type&&0!==t.button)return;const e=this.normalizePointerEvent(t);if("x|y"===this.options.axis){let s=0,n=0;("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",s=this.handleX(e)),("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",n=this.handleY(e)),this.options.onMove({movementX:s,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("xy"===this.options.axis){let s=0,n=0;Math.abs(e.x-this.initialX)>this.options.threshold&&(s=this.handleX(e)),Math.abs(e.y-this.initialY)>this.options.threshold&&(n=this.handleY(e)),this.options.onMove({movementX:s,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("x"===this.options.axis)("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",this.options.onMove({movementX:this.handleX(e),movementY:0,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}));else if("y"===this.options.axis){let s=0;("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",s=this.handleY(e)),this.options.onMove({movementX:0,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}}onPointerUp(t){this.moving="";const e=this.normalizePointerEvent(t);this.options.onUp({movementX:0,movementY:0,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}),this.lastY=0,this.lastX=0}destroy(t){Lt?(t.removeEventListener("pointerdown",this.onPointerDown),document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp)):(t.removeEventListener("mousedown",this.onPointerDown),document.removeEventListener("mousemove",this.onPointerMove),document.removeEventListener("mouseup",this.onPointerUp),t.removeEventListener("touchstart",this.onPointerDown),document.removeEventListener("touchmove",this.onPointerMove),document.removeEventListener("touchend",this.onPointerUp),document.removeEventListener("touchcancel",this.onPointerUp))}}class Dt{constructor(t,e){this.slotInstances={},this.destroyed=!1,this.vido=t,this.props=e,this.destroy=this.destroy.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this),this.getInstances=this.getInstances.bind(this),this.setComponents=this.setComponents.bind(this),this.vido.onDestroy((()=>{this.destroy()}))}setComponents(t){if(t&&!this.destroyed){for(const e in t){const s=t[e];void 0===this.slotInstances[e]&&(this.slotInstances[e]=[]);for(const t of this.slotInstances[e])t.destroy();this.slotInstances[e].length=0;for(const t of s)this.slotInstances[e].push(this.vido.createComponent(t,this.props))}this.vido.update()}}destroy(){if(!this.destroyed){for(const t in this.slotInstances){for(const e of this.slotInstances[t])e.destroy();this.slotInstances[t].length=0}this.destroyed=!0}}change(t,e){if(!this.destroyed)for(const s in this.slotInstances){const n=this.slotInstances[s];for(const s of n)s.change(t,e)}}getInstances(t){return this.destroyed?[]:void 0===t?this.slotInstances:this.slotInstances[t]}html(t,e){if(this.destroyed)return;if(!this.slotInstances[t]||0===this.slotInstances[t].length)return e;let s=e;for(const e of this.slotInstances[t])s=e.html(s);return s}getProps(){return this.props}isDestroyed(){return this.destroyed}}class Rt extends k{update(t,e){if("function"!=typeof e[0])throw new Error("[vido] GetElementDirective argument should be a function.");(0,e[0])(t.element)}render(){return b}}function kt(t,e){let s=0;const n=new Map;let i,o,r=new Map,h=0;const l=[],c=Promise.resolve(),a={},d=function(t){return class extends k{update(e,s){const n=e.element,i=s[0],o=s[1],r=s[2];for(const e of o)if(void 0!==e){let s;if(t.has(i))for(const o of t.get(i))if(o.componentAction.create===e&&o.element===n){s=o;break}if(s)s.props=r;else{void 0!==n.vido&&delete n.vido;const s={instance:i,componentAction:{create:e,update(){},destroy(){}},element:n,props:r};let o=[];t.has(i)&&(o=t.get(i)),o.push(s),t.set(i,o)}}}render(t,e,s){return b}}}(r);class u{constructor(t){this.instance=t}create(t,e){const s=R(d);return()=>s(this.instance,t,e)}}const p=function(t,e,s){return class{constructor(t,e,s={}){this.destroyed=!1,this.instance=t,this.name=e.name,this.vidoInstance=e,this.props=s,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this)}destroy(){this.destroyed||(this.vidoInstance.debug&&(console.groupCollapsed(`destroying component ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.destroyComponent(this.instance,this.vidoInstance),this.destroyed=!0)}update(n){return this.vidoInstance.debug&&(console.groupCollapsed(`updating component ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.updateTemplate(n)}change(n,i={}){this.vidoInstance.debug&&(console.groupCollapsed(`changing component ${this.instance}`),console.log(s({props:this.props,newProps:n,components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd());const o=t.get(this.instance);o&&o.change(n,i)}html(e={}){const s=t.get(this.instance);if(s&&!s.destroyed)return s.update(e,this.vidoInstance)}_getComponents(){return t}_getActions(){return e}}}(n,r,Tt),v=function(t,e,s){return class{constructor(t,e,s){this.destroyed=!1,this.instance=t,this.vidoInstance=e,this.renderFunction=s,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this)}destroy(){if(!this.destroyed){this.vidoInstance.debug&&(console.groupCollapsed(`component destroy method fired ${this.instance}`),console.log(s({props:this.vidoInstance.props,components:t.keys(),destroyable:this.vidoInstance.destroyable,actionsByInstance:e})),console.trace(),console.groupEnd()),this.content&&"function"==typeof this.content.destroy&&this.content.destroy();for(const t of this.vidoInstance.destroyable)t();this.vidoInstance.onChangeFunctions.length=0,this.vidoInstance.destroyable.length=0,this.vidoInstance.destroyed=!0,this.destroyed=!0,this.vidoInstance.update()}}update(n={}){return this.vidoInstance.debug&&(console.groupCollapsed(`component update method fired ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.renderFunction(n)}change(n,i={leave:!1}){const o=n;this.vidoInstance.debug&&(console.groupCollapsed(`component change method fired ${this.instance}`),console.log(s({props:o,components:t.keys(),onChangeFunctions:this.vidoInstance.onChangeFunctions,changedProps:n,actionsByInstance:e})),console.trace(),console.groupEnd());for(const t of this.vidoInstance.onChangeFunctions)t(n,i)}}}(n,r,Tt);class y{constructor(s="",i=""){this.instance="",this.name="",this.destroyable=[],this.destroyed=!1,this.onChangeFunctions=[],this.debug=!1,this.state=t,this.api=e,this.lastProps={},this.html=$,this.svg=A,this.directive=R,this.asyncAppend=at,this.asyncReplace=ct,this.cache=dt,this.classMap=Ht,this.styleMap=Ct,this.StyleMap=Xt,this.guard=pt,this.live=_t,this.ifDefined=vt,this.repeat=mt,this.unsafeHTML=gt,this.until=At,this.schedule=wt,this.getElement=R(Rt),this.actionsByInstance=()=>{},this.detach=xt,this.PointerAction=Bt,this.Action=Nt,this.Slots=Dt,this._components=n,this._actions=r,this.instance=s,this.reuseComponents=this.reuseComponents.bind(this),this.onDestroy=this.onDestroy.bind(this),this.onChange=this.onChange.bind(this),this.update=this.update.bind(this),this.destroyComponent=this.destroyComponent.bind(this);for(const t in a)this[t]=a[t].bind(this);this.name=i,this.Actions=new u(s)}static addMethod(t,e){a[t]=e}onDestroy(t){this.destroyable.push(t)}onChange(t){this.onChangeFunctions.push(t)}update(t){return this.updateTemplate(t)}reuseComponents(t,e,s,n,i=!0,o=!1){const r=[],h=t.length,l=e.length;let c=!1;!i||void 0!==e&&0!==e.length||(c=!0);let a=0;if(h<l){let i=l-h;for(;i;){const o=e[l-i],h=this.createComponent(n,s(o));t.push(h),r.push(h),i--}}else if(h>l){let e=h-l;for(i&&(c=!0,a=h-e);e;){const s=h-e;i||(r.push(t[s]),t[s].destroy()),e--}i||(t.length=l)}let d=0;o&&console.log("modified components",r),o&&console.log("current components",t),o&&console.log("data array",e);for(const n of t){const t=e[d];o&&console.log(`reuse components data at '${d}'`,t),n&&!r.includes(n)&&(o&&console.log("getProps fn result",s(t)),n.change(s(t),{leave:c&&d>=a})),d++}}createComponent(t,e={}){const i=t.name+":"+s++;let o;o=new y(i,t.name);const h=new p(i,o,e),l=new v(i,o,t(o,e));return n.set(i,l),n.get(i).change(e),o.debug&&(console.groupCollapsed(`component created ${i}`),console.log(Tt({props:e,components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd()),h}destroyComponent(t,e){if(e.debug&&(console.groupCollapsed(`destroying component ${t}...`),console.log(Tt({components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd()),r.has(t))for(const e of r.get(t))"function"==typeof e.componentAction.destroy&&e.componentAction.destroy(e.element,e.props);r.delete(t);const s=n.get(t);s?(s.destroy(),n.delete(t),e.debug&&(console.groupCollapsed(`component destroyed ${t}`),console.log(Tt({components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd())):console.warn(`No component to destroy! [${t}]`)}executeActions(){for(const t of r.values()){for(const e of t)if(void 0===e.element.vido){const t=n.get(e.instance);e.isActive=function(){return t&&!1===t.destroyed};const s=e.componentAction,i=s.create;if(void 0!==i){let t;t=i.prototype&&(i.prototype.isAction||i.prototype.update||i.prototype.destroy)||i.isAction?new i(e.element,e.props):i(e.element,e.props),void 0!==t&&("function"==typeof t?s.destroy=t:("function"==typeof t.update&&(s.update=t.update.bind(t)),"function"==typeof t.destroy&&(s.destroy=t.destroy.bind(t))))}}else e.element.vido=e.props,"function"==typeof e.componentAction.update&&e.isActive()&&e.componentAction.update(e.element,e.props);for(const e of t)e.element.vido=e.props}}updateTemplate(t){return t&&l.push(t),new Promise((t=>{const e=++h,s=this;c.then((function(){if(e===h){h=0,s.render();for(const t of l)t();l.length=0,t(null)}}))}))}createApp(t){o=t.element;const e=this.createComponent(t.component,t.props);return i=e.instance,this.render(),e}render(){const t=n.get(i);t?(C(t.update(),o),this.executeActions()):o&&o.remove()}}return new y}kt.prototype.lithtml=B,kt.prototype.Action=Nt,kt.prototype.Directive=k,kt.prototype.schedule=wt,kt.prototype.detach=xt,kt.prototype.styleMap=Ct,kt.prototype.classMap=Ht,kt.prototype.StyleMap=Xt,kt.prototype.PointerAction=Bt,kt.prototype.asyncAppend=at,kt.prototype.asyncReplace=ct,kt.prototype.cache=dt,kt.prototype.guard=pt,kt.prototype.live=_t,kt.prototype.ifDefined=vt,kt.prototype.repeat=mt,kt.prototype.unsafeHTML=gt,kt.prototype.until=At,kt.prototype.Slots=Dt;const Ot=B;export{Nt as Action,k as Directive,D as PartType,Bt as PointerAction,Dt as Slots,Xt as StyleMap,L as _$LH,at as asyncAppend,ct as asyncReplace,dt as cache,Ht as classMap,kt as default,xt as detach,R as directive,pt as guard,Mt as helpers,$ as html,vt as ifDefined,Ot as lit,B as lithtml,_ as noChange,b as nothing,C as render,mt as repeat,wt as schedule,Ct as styleMap,A as svg,gt as unsafeHTML,At as until};
//# sourceMappingURL=vido.min.js.map

@@ -57,3 +57,3 @@ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Vido=e()}(this,(function(){"use strict";

* SPDX-License-Identifier: BSD-3-Clause
*/const Mt=j(class extends W{render(t){return b}update(t,e){if("boolean"!=typeof e[0])throw new Error("[vido] Detach directive argument should be a boolean.");let s=e[0];const n=t.element;if(s)wt.has(t)||wt.set(t,{element:n,nextSibling:n.nextSibling,previousSibling:n.previousSibling,parent:n.parentNode}),n.remove();else{const e=wt.get(t);e&&(e.nextSibling&&e.nextSibling.parentNode?e.nextSibling.parentNode.insertBefore(e.element,e.nextSibling):e.previousSibling&&e.previousSibling.parentNode?e.previousSibling.parentNode.appendChild(e.element):e.parent&&e.parent.appendChild(e.element),wt.delete(t))}return this.render(s)}}),It=j(class extends W{constructor(t){var e;if(super(t),t.type!==D||"style"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((e,s)=>{const n=t[s];return null==n?e:e+`${s=s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${n};`}),"")}update(t,[e]){const{style:s}=t.element;if(void 0===this.ut){this.ut=new Set;for(const t in e)this.ut.add(t);return this.render(e)}this.ut.forEach((t=>{null==e[t]&&(this.ut.delete(t),t.includes("-")?s.removeProperty(t):s[t]="")}));for(const t in e){const n=e[t];null!=n&&(this.ut.add(t),t.includes("-")?s.setProperty(t,n):s[t]=n)}return _}}),Yt=new WeakMap;
*/const Mt=j(class extends W{render(t){return b}update(t,e){if("boolean"!=typeof e[0])throw new Error("[vido] Detach directive argument should be a boolean.");let s=e[0];const n=t.element;if(s)wt.has(t)||wt.set(t,{element:n,nextSibling:n.nextSibling,previousSibling:n.previousSibling,parent:n.parentNode}),n.remove();else{const e=wt.get(t);e&&(e.nextSibling&&e.nextSibling.parentNode?e.nextSibling.parentNode.insertBefore(e.element,e.nextSibling):e.previousSibling&&e.previousSibling.parentNode?e.previousSibling.parentNode.appendChild(e.element):e.parent&&e.parent.appendChild(e.element),wt.delete(t))}return this.render(s)}}),It=j(class extends W{constructor(t){var e;if(super(t),t.type!==D||"style"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((e,s)=>{const n=t[s];return null==n?e:e+`${s=s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${n};`}),"")}update(t,[e]){const{style:s}=t.element;if(void 0===this.ut){this.ut=new Set;for(const t in e)this.ut.add(t);return this.render(e)}this.ut.forEach((t=>{null==e[t]&&(this.ut.delete(t),t.includes("-")?s.removeProperty(t):s[t]="")}));for(const t in e){const n=e[t];null!=n&&(this.ut.add(t),t.includes("-")?s.setProperty(t,n):s[t]=n)}return _}});
/**

@@ -63,3 +63,3 @@ * @license

* SPDX-License-Identifier: BSD-3-Clause
*/class Xt extends W{update(t,e){return e[0].execute(t),_}render(t){return t.toString()}}class Pt{constructor(t){this.style=t,this._directive=j(Xt),this.execute=this.execute.bind(this)}directive(){return this._directive(this)}setStyle(t){this.style=t}toString(){return Object.keys(this.style).reduce(((t,e)=>{const s=this.style[e];return null==s?t:t+`${e=e.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`}),"")}execute(t){const e=t.element;let s;Yt.has(e)?s=Yt.get(e):(s={toUpdate:[],toRemove:[],previousStyle:{}},Yt.set(e,s)),s.toRemove.length=0,s.toUpdate.length=0;const n=e.style,i=s.previousStyle,o=e.style.cssText.split(";").map((t=>t.substr(0,t.indexOf(":")).trim())).filter((t=>!!t));for(const t of o)void 0===this.style[t]&&(s.toRemove.includes(t)||s.toRemove.push(t));for(const t in i)t in this.style&&void 0===this.style[t]&&o.includes(t)&&(s.toRemove.includes(t)||s.toRemove.push(t));for(const t in this.style){if(!(t in this.style))continue;const e=this.style[t],n=i[t];void 0!==n&&n===e&&o.includes(t)||s.toUpdate.push(t)}if(s.toRemove.length||s.toUpdate.length){for(const t of s.toRemove)n.removeProperty(t),n[t]&&delete n[t];for(const t of s.toUpdate){const e=this.style[t];t.includes("-")?n.setProperty(t,e):n[t]=e}s.previousStyle=Object.assign({},this.style)}Yt.set(e,s)}}
*/function Yt(t){let e=0;return function(s){e||(e=requestAnimationFrame((function(){e=0,t.apply(void 0,[s])})))}}function Xt(t){return t&&t.constructor?"Object"===t.constructor.name:"object"==typeof t&&null!==t}function Pt(t,...e){const s=e.shift();if(Xt(t)&&Xt(s))for(const e in s)if(Xt(s[e]))"function"==typeof s[e].clone?t[e]=s[e].clone():(void 0===t[e]&&(t[e]={}),t[e]=Pt(t[e],s[e]));else if(Array.isArray(s[e])){t[e]=new Array(s[e].length);let n=0;for(let i of s[e])Xt(i)?"function"==typeof i.clone?t[e][n]=i.clone():t[e][n]=Pt({},i):t[e][n]=i,n++}else t[e]=s[e];return e.length?Pt(t,...e):t}function Et(t){if(void 0!==t.actions){const e=t.actions.map((t=>{const e=Object.assign({},t),s=Object.assign({},e.props);return delete s.state,delete s.api,delete e.element,e.props=s,e}));t.actions=e}return Pt({},t)}const St=new WeakMap;class Tt extends W{update(t,e){return e[0].execute(t),_}render(t){return t.toString()}}class Ht{constructor(t,e={schedule:!1}){this.style=t,this._directive=j(Tt),this.execute=this.execute.bind(this),e.schedule&&(this.execute=Yt(this.execute))}directive(){return this._directive(this)}setStyle(t){this.style=t}toString(){return Object.keys(this.style).reduce(((t,e)=>{const s=this.style[e];return null==s?t:t+`${e=e.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`}),"")}execute(t){const e=t.element;let s;St.has(e)?s=St.get(e):(s={toUpdate:[],toRemove:[],previousStyle:{}},St.set(e,s)),s.toRemove.length=0,s.toUpdate.length=0;const n=e.style,i=s.previousStyle,o=e.style.cssText.split(";").map((t=>t.substr(0,t.indexOf(":")).trim())).filter((t=>!!t));for(const t of o)void 0===this.style[t]&&(s.toRemove.includes(t)||s.toRemove.push(t));for(const t in i)t in this.style&&void 0===this.style[t]&&o.includes(t)&&(s.toRemove.includes(t)||s.toRemove.push(t));for(const t in this.style){if(!(t in this.style))continue;const e=this.style[t],n=i[t];void 0!==n&&n===e&&o.includes(t)||s.toUpdate.push(t)}if(s.toRemove.length||s.toUpdate.length){for(const t of s.toRemove)n.removeProperty(t),n[t]&&delete n[t];for(const t of s.toUpdate){const e=this.style[t];t.includes("-")?n.setProperty(t,e):n[t]=e}s.previousStyle=Object.assign({},this.style)}St.set(e,s)}}
/**

@@ -69,3 +69,3 @@ * @license

* SPDX-License-Identifier: BSD-3-Clause
*/const Et=j(class extends W{constructor(t){var e;if(super(t),t.type!==D||"class"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((e=>t[e])).join(" ")+" "}update(t,[e]){var s,n;if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.et=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in e)e[t]&&!(null===(s=this.et)||void 0===s?void 0:s.has(t))&&this.st.add(t);return this.render(e)}const i=t.element.classList;this.st.forEach((t=>{t in e||(i.remove(t),this.st.delete(t))}));for(const t in e){const s=!!e[t];s===this.st.has(t)||(null===(n=this.et)||void 0===n?void 0:n.has(t))||(s?(i.add(t),this.st.add(t)):(i.remove(t),this.st.delete(t)))}return _}});class St{constructor(){this.isAction=!0}}St.prototype.isAction=!0;const Tt={element:document.createTextNode(""),axis:"xy",threshold:10,onDown(){},onMove(){},onUp(){},onWheel(){}},Ht="undefined"!=typeof PointerEvent;let Nt=0;class Ut extends St{constructor(t,e){super(),this.moving="",this.initialX=0,this.initialY=0,this.lastY=0,this.lastX=0,this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onWheel=this.onWheel.bind(this),this.element=t,this.id=++Nt,this.options=Object.assign(Object.assign({},Tt),e.pointerOptions),Ht?(t.addEventListener("pointerdown",this.onPointerDown),document.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp)):(t.addEventListener("touchstart",this.onPointerDown),document.addEventListener("touchmove",this.onPointerMove,{passive:!1}),document.addEventListener("touchend",this.onPointerUp),document.addEventListener("touchcancel",this.onPointerUp),t.addEventListener("mousedown",this.onPointerDown),document.addEventListener("mousemove",this.onPointerMove,{passive:!1}),document.addEventListener("mouseup",this.onPointerUp))}normalizeMouseWheelEvent(t){let e=t.deltaX||0,s=t.deltaY||0,n=t.deltaZ||0;const i=t.deltaMode,o=parseInt(getComputedStyle(t.target).getPropertyValue("line-height"));let r=1;switch(i){case 1:r=o;break;case 2:r=window.height}return e*=r,s*=r,n*=r,{x:e,y:s,z:n,event:t}}onWheel(t){const e=this.normalizeMouseWheelEvent(t);this.options.onWheel(e)}normalizePointerEvent(t){let e={x:0,y:0,pageX:0,pageY:0,clientX:0,clientY:0,screenX:0,screenY:0,event:t};switch(t.type){case"wheel":const s=this.normalizeMouseWheelEvent(t);e.x=s.x,e.y=s.y,e.pageX=e.x,e.pageY=e.y,e.screenX=e.x,e.screenY=e.y,e.clientX=e.x,e.clientY=e.y;break;case"touchstart":case"touchmove":case"touchend":case"touchcancel":e.x=t.changedTouches[0].screenX,e.y=t.changedTouches[0].screenY,e.pageX=t.changedTouches[0].pageX,e.pageY=t.changedTouches[0].pageY,e.screenX=t.changedTouches[0].screenX,e.screenY=t.changedTouches[0].screenY,e.clientX=t.changedTouches[0].clientX,e.clientY=t.changedTouches[0].clientY;break;default:e.x=t.x,e.y=t.y,e.pageX=t.pageX,e.pageY=t.pageY,e.screenX=t.screenX,e.screenY=t.screenY,e.clientX=t.clientX,e.clientY=t.clientY}return e}onPointerDown(t){if("mousedown"===t.type&&0!==t.button)return;this.moving="xy";const e=this.normalizePointerEvent(t);this.lastX=e.x,this.lastY=e.y,this.initialX=e.x,this.initialY=e.y,this.options.onDown(e)}handleX(t){let e=t.x-this.lastX;return this.lastY=t.y,this.lastX=t.x,e}handleY(t){let e=t.y-this.lastY;return this.lastY=t.y,this.lastX=t.x,e}onPointerMove(t){if(""===this.moving||"mousemove"===t.type&&0!==t.button)return;const e=this.normalizePointerEvent(t);if("x|y"===this.options.axis){let s=0,n=0;("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",s=this.handleX(e)),("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",n=this.handleY(e)),this.options.onMove({movementX:s,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("xy"===this.options.axis){let s=0,n=0;Math.abs(e.x-this.initialX)>this.options.threshold&&(s=this.handleX(e)),Math.abs(e.y-this.initialY)>this.options.threshold&&(n=this.handleY(e)),this.options.onMove({movementX:s,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("x"===this.options.axis)("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",this.options.onMove({movementX:this.handleX(e),movementY:0,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}));else if("y"===this.options.axis){let s=0;("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",s=this.handleY(e)),this.options.onMove({movementX:0,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}}onPointerUp(t){this.moving="";const e=this.normalizePointerEvent(t);this.options.onUp({movementX:0,movementY:0,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}),this.lastY=0,this.lastX=0}destroy(t){Ht?(t.removeEventListener("pointerdown",this.onPointerDown),document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp)):(t.removeEventListener("mousedown",this.onPointerDown),document.removeEventListener("mousemove",this.onPointerMove),document.removeEventListener("mouseup",this.onPointerUp),t.removeEventListener("touchstart",this.onPointerDown),document.removeEventListener("touchmove",this.onPointerMove),document.removeEventListener("touchend",this.onPointerUp),document.removeEventListener("touchcancel",this.onPointerUp))}}function Lt(t){let e=0;return function(s){e||(e=requestAnimationFrame((function(){e=0,t.apply(void 0,[s])})))}}function kt(t){return t&&t.constructor?"Object"===t.constructor.name:"object"==typeof t&&null!==t}function Dt(t,...e){const s=e.shift();if(kt(t)&&kt(s))for(const e in s)if(kt(s[e]))"function"==typeof s[e].clone?t[e]=s[e].clone():(void 0===t[e]&&(t[e]={}),t[e]=Dt(t[e],s[e]));else if(Array.isArray(s[e])){t[e]=new Array(s[e].length);let n=0;for(let i of s[e])kt(i)?"function"==typeof i.clone?t[e][n]=i.clone():t[e][n]=Dt({},i):t[e][n]=i,n++}else t[e]=s[e];return e.length?Dt(t,...e):t}function Bt(t){if(void 0!==t.actions){const e=t.actions.map((t=>{const e=Object.assign({},t),s=Object.assign({},e.props);return delete s.state,delete s.api,delete e.element,e.props=s,e}));t.actions=e}return Dt({},t)}class Ot{constructor(t,e){this.slotInstances={},this.destroyed=!1,this.vido=t,this.props=e,this.destroy=this.destroy.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this),this.getInstances=this.getInstances.bind(this),this.setComponents=this.setComponents.bind(this),this.vido.onDestroy((()=>{this.destroy()}))}setComponents(t){if(t&&!this.destroyed){for(const e in t){const s=t[e];void 0===this.slotInstances[e]&&(this.slotInstances[e]=[]);for(const t of this.slotInstances[e])t.destroy();this.slotInstances[e].length=0;for(const t of s)this.slotInstances[e].push(this.vido.createComponent(t,this.props))}this.vido.update()}}destroy(){if(!this.destroyed){for(const t in this.slotInstances){for(const e of this.slotInstances[t])e.destroy();this.slotInstances[t].length=0}this.destroyed=!0}}change(t,e){if(!this.destroyed)for(const s in this.slotInstances){const n=this.slotInstances[s];for(const s of n)s.change(t,e)}}getInstances(t){return this.destroyed?[]:void 0===t?this.slotInstances:this.slotInstances[t]}html(t,e){if(this.destroyed)return;if(!this.slotInstances[t]||0===this.slotInstances[t].length)return e;let s=e;for(const e of this.slotInstances[t])s=e.html(s);return s}getProps(){return this.props}isDestroyed(){return this.destroyed}}class Rt extends W{update(t,e){if("function"!=typeof e[0])throw new Error("[vido] GetElementDirective argument should be a function.");(0,e[0])(t.element)}render(){return b}}function jt(t,e){let s=0;const n=new Map;let i,o,r=new Map,h=0;const l=[],c=Promise.resolve(),a={},d=function(t){return class extends W{update(e,s){const n=e.element,i=s[0],o=s[1],r=s[2];for(const e of o)if(void 0!==e){let s;if(t.has(i))for(const o of t.get(i))if(o.componentAction.create===e&&o.element===n){s=o;break}if(s)s.props=r;else{void 0!==n.vido&&delete n.vido;const s={instance:i,componentAction:{create:e,update(){},destroy(){}},element:n,props:r};let o=[];t.has(i)&&(o=t.get(i)),o.push(s),t.set(i,o)}}}render(t,e,s){return b}}}(r);class u{constructor(t){this.instance=t}create(t,e){const s=j(d);return()=>s(this.instance,t,e)}}const p=function(t,e,s){return class{constructor(t,e,s={}){this.destroyed=!1,this.instance=t,this.name=e.name,this.vidoInstance=e,this.props=s,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this)}destroy(){this.destroyed||(this.vidoInstance.debug&&(console.groupCollapsed(`destroying component ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.destroyComponent(this.instance,this.vidoInstance),this.destroyed=!0)}update(n){return this.vidoInstance.debug&&(console.groupCollapsed(`updating component ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.updateTemplate(n)}change(n,i={}){this.vidoInstance.debug&&(console.groupCollapsed(`changing component ${this.instance}`),console.log(s({props:this.props,newProps:n,components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd());const o=t.get(this.instance);o&&o.change(n,i)}html(e={}){const s=t.get(this.instance);if(s&&!s.destroyed)return s.update(e,this.vidoInstance)}_getComponents(){return t}_getActions(){return e}}}(n,r,Bt),v=function(t,e,s){return class{constructor(t,e,s){this.destroyed=!1,this.instance=t,this.vidoInstance=e,this.renderFunction=s,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this)}destroy(){if(!this.destroyed){this.vidoInstance.debug&&(console.groupCollapsed(`component destroy method fired ${this.instance}`),console.log(s({props:this.vidoInstance.props,components:t.keys(),destroyable:this.vidoInstance.destroyable,actionsByInstance:e})),console.trace(),console.groupEnd()),this.content&&"function"==typeof this.content.destroy&&this.content.destroy();for(const t of this.vidoInstance.destroyable)t();this.vidoInstance.onChangeFunctions.length=0,this.vidoInstance.destroyable.length=0,this.vidoInstance.destroyed=!0,this.destroyed=!0,this.vidoInstance.update()}}update(n={}){return this.vidoInstance.debug&&(console.groupCollapsed(`component update method fired ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.renderFunction(n)}change(n,i={leave:!1}){const o=n;this.vidoInstance.debug&&(console.groupCollapsed(`component change method fired ${this.instance}`),console.log(s({props:o,components:t.keys(),onChangeFunctions:this.vidoInstance.onChangeFunctions,changedProps:n,actionsByInstance:e})),console.trace(),console.groupEnd());for(const t of this.vidoInstance.onChangeFunctions)t(n,i)}}}(n,r,Bt);class f{constructor(s="",i=""){this.instance="",this.name="",this.destroyable=[],this.destroyed=!1,this.onChangeFunctions=[],this.debug=!1,this.state=t,this.api=e,this.lastProps={},this.html=$,this.svg=A,this.directive=j,this.asyncAppend=pt,this.asyncReplace=ut,this.cache=vt,this.classMap=Et,this.styleMap=It,this.StyleMap=Pt,this.guard=mt,this.live=Ct,this.ifDefined=yt,this.repeat=$t,this.unsafeHTML=_t,this.until=xt,this.schedule=Lt,this.getElement=j(Rt),this.actionsByInstance=()=>{},this.detach=Mt,this.PointerAction=Ut,this.Action=St,this.Slots=Ot,this._components=n,this._actions=r,this.instance=s,this.reuseComponents=this.reuseComponents.bind(this),this.onDestroy=this.onDestroy.bind(this),this.onChange=this.onChange.bind(this),this.update=this.update.bind(this),this.destroyComponent=this.destroyComponent.bind(this);for(const t in a)this[t]=a[t].bind(this);this.name=i,this.Actions=new u(s)}static addMethod(t,e){a[t]=e}onDestroy(t){this.destroyable.push(t)}onChange(t){this.onChangeFunctions.push(t)}update(t){return this.updateTemplate(t)}reuseComponents(t,e,s,n,i=!0,o=!1){const r=[],h=t.length,l=e.length;let c=!1;!i||void 0!==e&&0!==e.length||(c=!0);let a=0;if(h<l){let i=l-h;for(;i;){const o=e[l-i],h=this.createComponent(n,s(o));t.push(h),r.push(h),i--}}else if(h>l){let e=h-l;for(i&&(c=!0,a=h-e);e;){const s=h-e;i||(r.push(t[s]),t[s].destroy()),e--}i||(t.length=l)}let d=0;o&&console.log("modified components",r),o&&console.log("current components",t),o&&console.log("data array",e);for(const n of t){const t=e[d];o&&console.log(`reuse components data at '${d}'`,t),n&&!r.includes(n)&&(o&&console.log("getProps fn result",s(t)),n.change(s(t),{leave:c&&d>=a})),d++}}createComponent(t,e={}){const i=t.name+":"+s++;let o;o=new f(i,t.name);const h=new p(i,o,e),l=new v(i,o,t(o,e));return n.set(i,l),n.get(i).change(e),o.debug&&(console.groupCollapsed(`component created ${i}`),console.log(Bt({props:e,components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd()),h}destroyComponent(t,e){if(e.debug&&(console.groupCollapsed(`destroying component ${t}...`),console.log(Bt({components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd()),r.has(t))for(const e of r.get(t))"function"==typeof e.componentAction.destroy&&e.componentAction.destroy(e.element,e.props);r.delete(t);const s=n.get(t);s?(s.destroy(),n.delete(t),e.debug&&(console.groupCollapsed(`component destroyed ${t}`),console.log(Bt({components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd())):console.warn(`No component to destroy! [${t}]`)}executeActions(){for(const t of r.values()){for(const e of t)if(void 0===e.element.vido){const t=n.get(e.instance);e.isActive=function(){return t&&!1===t.destroyed};const s=e.componentAction,i=s.create;if(void 0!==i){let t;t=i.prototype&&(i.prototype.isAction||i.prototype.update||i.prototype.destroy)||i.isAction?new i(e.element,e.props):i(e.element,e.props),void 0!==t&&("function"==typeof t?s.destroy=t:("function"==typeof t.update&&(s.update=t.update.bind(t)),"function"==typeof t.destroy&&(s.destroy=t.destroy.bind(t))))}}else e.element.vido=e.props,"function"==typeof e.componentAction.update&&e.isActive()&&e.componentAction.update(e.element,e.props);for(const e of t)e.element.vido=e.props}}updateTemplate(t){return t&&l.push(t),new Promise((t=>{const e=++h,s=this;c.then((function(){if(e===h){h=0,s.render();for(const t of l)t();l.length=0,t(null)}}))}))}createApp(t){o=t.element;const e=this.createComponent(t.component,t.props);return i=e.instance,this.render(),e}render(){const t=n.get(i);t?(C(t.update(),o),this.executeActions()):o&&o.remove()}}return new f}return jt.prototype.lithtml=k,jt.prototype.Action=St,jt.prototype.Directive=W,jt.prototype.schedule=Lt,jt.prototype.detach=Mt,jt.prototype.styleMap=It,jt.prototype.classMap=Et,jt.prototype.StyleMap=Pt,jt.prototype.PointerAction=Ut,jt.prototype.asyncAppend=pt,jt.prototype.asyncReplace=ut,jt.prototype.cache=vt,jt.prototype.guard=mt,jt.prototype.live=Ct,jt.prototype.ifDefined=yt,jt.prototype.repeat=$t,jt.prototype.unsafeHTML=_t,jt.prototype.until=xt,jt.prototype.Slots=Ot,jt}));
*/const Nt=j(class extends W{constructor(t){var e;if(super(t),t.type!==D||"class"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((e=>t[e])).join(" ")+" "}update(t,[e]){var s,n;if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.et=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in e)e[t]&&!(null===(s=this.et)||void 0===s?void 0:s.has(t))&&this.st.add(t);return this.render(e)}const i=t.element.classList;this.st.forEach((t=>{t in e||(i.remove(t),this.st.delete(t))}));for(const t in e){const s=!!e[t];s===this.st.has(t)||(null===(n=this.et)||void 0===n?void 0:n.has(t))||(s?(i.add(t),this.st.add(t)):(i.remove(t),this.st.delete(t)))}return _}});class Ut{constructor(){this.isAction=!0}}Ut.prototype.isAction=!0;const Lt={element:document.createTextNode(""),axis:"xy",threshold:10,onDown(){},onMove(){},onUp(){},onWheel(){}},kt="undefined"!=typeof PointerEvent;let Dt=0;class Bt extends Ut{constructor(t,e){super(),this.moving="",this.initialX=0,this.initialY=0,this.lastY=0,this.lastX=0,this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onWheel=this.onWheel.bind(this),this.element=t,this.id=++Dt,this.options=Object.assign(Object.assign({},Lt),e.pointerOptions),kt?(t.addEventListener("pointerdown",this.onPointerDown),document.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp)):(t.addEventListener("touchstart",this.onPointerDown),document.addEventListener("touchmove",this.onPointerMove,{passive:!1}),document.addEventListener("touchend",this.onPointerUp),document.addEventListener("touchcancel",this.onPointerUp),t.addEventListener("mousedown",this.onPointerDown),document.addEventListener("mousemove",this.onPointerMove,{passive:!1}),document.addEventListener("mouseup",this.onPointerUp))}normalizeMouseWheelEvent(t){let e=t.deltaX||0,s=t.deltaY||0,n=t.deltaZ||0;const i=t.deltaMode,o=parseInt(getComputedStyle(t.target).getPropertyValue("line-height"));let r=1;switch(i){case 1:r=o;break;case 2:r=window.height}return e*=r,s*=r,n*=r,{x:e,y:s,z:n,event:t}}onWheel(t){const e=this.normalizeMouseWheelEvent(t);this.options.onWheel(e)}normalizePointerEvent(t){let e={x:0,y:0,pageX:0,pageY:0,clientX:0,clientY:0,screenX:0,screenY:0,event:t};switch(t.type){case"wheel":const s=this.normalizeMouseWheelEvent(t);e.x=s.x,e.y=s.y,e.pageX=e.x,e.pageY=e.y,e.screenX=e.x,e.screenY=e.y,e.clientX=e.x,e.clientY=e.y;break;case"touchstart":case"touchmove":case"touchend":case"touchcancel":e.x=t.changedTouches[0].screenX,e.y=t.changedTouches[0].screenY,e.pageX=t.changedTouches[0].pageX,e.pageY=t.changedTouches[0].pageY,e.screenX=t.changedTouches[0].screenX,e.screenY=t.changedTouches[0].screenY,e.clientX=t.changedTouches[0].clientX,e.clientY=t.changedTouches[0].clientY;break;default:e.x=t.x,e.y=t.y,e.pageX=t.pageX,e.pageY=t.pageY,e.screenX=t.screenX,e.screenY=t.screenY,e.clientX=t.clientX,e.clientY=t.clientY}return e}onPointerDown(t){if("mousedown"===t.type&&0!==t.button)return;this.moving="xy";const e=this.normalizePointerEvent(t);this.lastX=e.x,this.lastY=e.y,this.initialX=e.x,this.initialY=e.y,this.options.onDown(e)}handleX(t){let e=t.x-this.lastX;return this.lastY=t.y,this.lastX=t.x,e}handleY(t){let e=t.y-this.lastY;return this.lastY=t.y,this.lastX=t.x,e}onPointerMove(t){if(""===this.moving||"mousemove"===t.type&&0!==t.button)return;const e=this.normalizePointerEvent(t);if("x|y"===this.options.axis){let s=0,n=0;("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",s=this.handleX(e)),("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",n=this.handleY(e)),this.options.onMove({movementX:s,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("xy"===this.options.axis){let s=0,n=0;Math.abs(e.x-this.initialX)>this.options.threshold&&(s=this.handleX(e)),Math.abs(e.y-this.initialY)>this.options.threshold&&(n=this.handleY(e)),this.options.onMove({movementX:s,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("x"===this.options.axis)("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",this.options.onMove({movementX:this.handleX(e),movementY:0,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}));else if("y"===this.options.axis){let s=0;("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",s=this.handleY(e)),this.options.onMove({movementX:0,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}}onPointerUp(t){this.moving="";const e=this.normalizePointerEvent(t);this.options.onUp({movementX:0,movementY:0,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}),this.lastY=0,this.lastX=0}destroy(t){kt?(t.removeEventListener("pointerdown",this.onPointerDown),document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp)):(t.removeEventListener("mousedown",this.onPointerDown),document.removeEventListener("mousemove",this.onPointerMove),document.removeEventListener("mouseup",this.onPointerUp),t.removeEventListener("touchstart",this.onPointerDown),document.removeEventListener("touchmove",this.onPointerMove),document.removeEventListener("touchend",this.onPointerUp),document.removeEventListener("touchcancel",this.onPointerUp))}}class Ot{constructor(t,e){this.slotInstances={},this.destroyed=!1,this.vido=t,this.props=e,this.destroy=this.destroy.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this),this.getInstances=this.getInstances.bind(this),this.setComponents=this.setComponents.bind(this),this.vido.onDestroy((()=>{this.destroy()}))}setComponents(t){if(t&&!this.destroyed){for(const e in t){const s=t[e];void 0===this.slotInstances[e]&&(this.slotInstances[e]=[]);for(const t of this.slotInstances[e])t.destroy();this.slotInstances[e].length=0;for(const t of s)this.slotInstances[e].push(this.vido.createComponent(t,this.props))}this.vido.update()}}destroy(){if(!this.destroyed){for(const t in this.slotInstances){for(const e of this.slotInstances[t])e.destroy();this.slotInstances[t].length=0}this.destroyed=!0}}change(t,e){if(!this.destroyed)for(const s in this.slotInstances){const n=this.slotInstances[s];for(const s of n)s.change(t,e)}}getInstances(t){return this.destroyed?[]:void 0===t?this.slotInstances:this.slotInstances[t]}html(t,e){if(this.destroyed)return;if(!this.slotInstances[t]||0===this.slotInstances[t].length)return e;let s=e;for(const e of this.slotInstances[t])s=e.html(s);return s}getProps(){return this.props}isDestroyed(){return this.destroyed}}class Rt extends W{update(t,e){if("function"!=typeof e[0])throw new Error("[vido] GetElementDirective argument should be a function.");(0,e[0])(t.element)}render(){return b}}function jt(t,e){let s=0;const n=new Map;let i,o,r=new Map,h=0;const l=[],c=Promise.resolve(),a={},d=function(t){return class extends W{update(e,s){const n=e.element,i=s[0],o=s[1],r=s[2];for(const e of o)if(void 0!==e){let s;if(t.has(i))for(const o of t.get(i))if(o.componentAction.create===e&&o.element===n){s=o;break}if(s)s.props=r;else{void 0!==n.vido&&delete n.vido;const s={instance:i,componentAction:{create:e,update(){},destroy(){}},element:n,props:r};let o=[];t.has(i)&&(o=t.get(i)),o.push(s),t.set(i,o)}}}render(t,e,s){return b}}}(r);class u{constructor(t){this.instance=t}create(t,e){const s=j(d);return()=>s(this.instance,t,e)}}const p=function(t,e,s){return class{constructor(t,e,s={}){this.destroyed=!1,this.instance=t,this.name=e.name,this.vidoInstance=e,this.props=s,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this)}destroy(){this.destroyed||(this.vidoInstance.debug&&(console.groupCollapsed(`destroying component ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.destroyComponent(this.instance,this.vidoInstance),this.destroyed=!0)}update(n){return this.vidoInstance.debug&&(console.groupCollapsed(`updating component ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.updateTemplate(n)}change(n,i={}){this.vidoInstance.debug&&(console.groupCollapsed(`changing component ${this.instance}`),console.log(s({props:this.props,newProps:n,components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd());const o=t.get(this.instance);o&&o.change(n,i)}html(e={}){const s=t.get(this.instance);if(s&&!s.destroyed)return s.update(e,this.vidoInstance)}_getComponents(){return t}_getActions(){return e}}}(n,r,Et),v=function(t,e,s){return class{constructor(t,e,s){this.destroyed=!1,this.instance=t,this.vidoInstance=e,this.renderFunction=s,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this)}destroy(){if(!this.destroyed){this.vidoInstance.debug&&(console.groupCollapsed(`component destroy method fired ${this.instance}`),console.log(s({props:this.vidoInstance.props,components:t.keys(),destroyable:this.vidoInstance.destroyable,actionsByInstance:e})),console.trace(),console.groupEnd()),this.content&&"function"==typeof this.content.destroy&&this.content.destroy();for(const t of this.vidoInstance.destroyable)t();this.vidoInstance.onChangeFunctions.length=0,this.vidoInstance.destroyable.length=0,this.vidoInstance.destroyed=!0,this.destroyed=!0,this.vidoInstance.update()}}update(n={}){return this.vidoInstance.debug&&(console.groupCollapsed(`component update method fired ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.renderFunction(n)}change(n,i={leave:!1}){const o=n;this.vidoInstance.debug&&(console.groupCollapsed(`component change method fired ${this.instance}`),console.log(s({props:o,components:t.keys(),onChangeFunctions:this.vidoInstance.onChangeFunctions,changedProps:n,actionsByInstance:e})),console.trace(),console.groupEnd());for(const t of this.vidoInstance.onChangeFunctions)t(n,i)}}}(n,r,Et);class f{constructor(s="",i=""){this.instance="",this.name="",this.destroyable=[],this.destroyed=!1,this.onChangeFunctions=[],this.debug=!1,this.state=t,this.api=e,this.lastProps={},this.html=$,this.svg=A,this.directive=j,this.asyncAppend=pt,this.asyncReplace=ut,this.cache=vt,this.classMap=Nt,this.styleMap=It,this.StyleMap=Ht,this.guard=mt,this.live=Ct,this.ifDefined=yt,this.repeat=$t,this.unsafeHTML=_t,this.until=xt,this.schedule=Yt,this.getElement=j(Rt),this.actionsByInstance=()=>{},this.detach=Mt,this.PointerAction=Bt,this.Action=Ut,this.Slots=Ot,this._components=n,this._actions=r,this.instance=s,this.reuseComponents=this.reuseComponents.bind(this),this.onDestroy=this.onDestroy.bind(this),this.onChange=this.onChange.bind(this),this.update=this.update.bind(this),this.destroyComponent=this.destroyComponent.bind(this);for(const t in a)this[t]=a[t].bind(this);this.name=i,this.Actions=new u(s)}static addMethod(t,e){a[t]=e}onDestroy(t){this.destroyable.push(t)}onChange(t){this.onChangeFunctions.push(t)}update(t){return this.updateTemplate(t)}reuseComponents(t,e,s,n,i=!0,o=!1){const r=[],h=t.length,l=e.length;let c=!1;!i||void 0!==e&&0!==e.length||(c=!0);let a=0;if(h<l){let i=l-h;for(;i;){const o=e[l-i],h=this.createComponent(n,s(o));t.push(h),r.push(h),i--}}else if(h>l){let e=h-l;for(i&&(c=!0,a=h-e);e;){const s=h-e;i||(r.push(t[s]),t[s].destroy()),e--}i||(t.length=l)}let d=0;o&&console.log("modified components",r),o&&console.log("current components",t),o&&console.log("data array",e);for(const n of t){const t=e[d];o&&console.log(`reuse components data at '${d}'`,t),n&&!r.includes(n)&&(o&&console.log("getProps fn result",s(t)),n.change(s(t),{leave:c&&d>=a})),d++}}createComponent(t,e={}){const i=t.name+":"+s++;let o;o=new f(i,t.name);const h=new p(i,o,e),l=new v(i,o,t(o,e));return n.set(i,l),n.get(i).change(e),o.debug&&(console.groupCollapsed(`component created ${i}`),console.log(Et({props:e,components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd()),h}destroyComponent(t,e){if(e.debug&&(console.groupCollapsed(`destroying component ${t}...`),console.log(Et({components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd()),r.has(t))for(const e of r.get(t))"function"==typeof e.componentAction.destroy&&e.componentAction.destroy(e.element,e.props);r.delete(t);const s=n.get(t);s?(s.destroy(),n.delete(t),e.debug&&(console.groupCollapsed(`component destroyed ${t}`),console.log(Et({components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd())):console.warn(`No component to destroy! [${t}]`)}executeActions(){for(const t of r.values()){for(const e of t)if(void 0===e.element.vido){const t=n.get(e.instance);e.isActive=function(){return t&&!1===t.destroyed};const s=e.componentAction,i=s.create;if(void 0!==i){let t;t=i.prototype&&(i.prototype.isAction||i.prototype.update||i.prototype.destroy)||i.isAction?new i(e.element,e.props):i(e.element,e.props),void 0!==t&&("function"==typeof t?s.destroy=t:("function"==typeof t.update&&(s.update=t.update.bind(t)),"function"==typeof t.destroy&&(s.destroy=t.destroy.bind(t))))}}else e.element.vido=e.props,"function"==typeof e.componentAction.update&&e.isActive()&&e.componentAction.update(e.element,e.props);for(const e of t)e.element.vido=e.props}}updateTemplate(t){return t&&l.push(t),new Promise((t=>{const e=++h,s=this;c.then((function(){if(e===h){h=0,s.render();for(const t of l)t();l.length=0,t(null)}}))}))}createApp(t){o=t.element;const e=this.createComponent(t.component,t.props);return i=e.instance,this.render(),e}render(){const t=n.get(i);t?(C(t.update(),o),this.executeActions()):o&&o.remove()}}return new f}return jt.prototype.lithtml=k,jt.prototype.Action=Ut,jt.prototype.Directive=W,jt.prototype.schedule=Yt,jt.prototype.detach=Mt,jt.prototype.styleMap=It,jt.prototype.classMap=Nt,jt.prototype.StyleMap=Ht,jt.prototype.PointerAction=Bt,jt.prototype.asyncAppend=pt,jt.prototype.asyncReplace=ut,jt.prototype.cache=vt,jt.prototype.guard=mt,jt.prototype.live=Ct,jt.prototype.ifDefined=yt,jt.prototype.repeat=$t,jt.prototype.unsafeHTML=_t,jt.prototype.until=xt,jt.prototype.Slots=Ot,jt}));
//# sourceMappingURL=vido.umd.min.js.map
{
"name": "@neuronet.io/vido",
"version": "4.0.20",
"version": "4.1.0",
"description": "Compilation-less and eval free frontend framework for fast scalable apps.",

@@ -43,3 +43,3 @@ "main": "dist/vido.js",

"expect": "^27.2.5",
"jest": "^27.2.5",
"jest": "^27.3.1",
"jest-puppeteer": "^6.0.0",

@@ -46,0 +46,0 @@ "npm-run-all": "^4.1.5",

@@ -6,3 +6,5 @@ import { AttributePart } from 'lit-html/directive.js';

private _directive;
constructor(styleInfo: any);
constructor(styleInfo: any, options?: {
schedule: boolean;
});
directive(): any;

@@ -9,0 +11,0 @@ setStyle(styleInfo: any): void;

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc