dothtml 5.1.0 → 5.2.0

package/lib/component.d.ts

@@ -1,8 +1,17 @@
 import { IDotElement } from "./i-dot";
 import IDotCss from "./styling/i-dotcss";
 declare abstract class Component {
+    #private;
+    /**
+     * Called once per component, on the first build.
+     * TODO: this shouldn't require an instance of the component. Please experiment with fixing this.
+    */
     static initializeComponent<T extends Component>(obj: T): void;
-    static build<T extends Component>(obj: T): Element;
+    static build<T extends Component>(obj: T): HTMLElement;
+    /**
+     * Called any time the component needs to be completely rebuilt.
+    */
+    static rebuild<T extends Component>(obj: T): void;
     static initializeEventHandlers(obj: any): void;
     static createProp(activePropContainer: Function, name: string): void;
     static configureDependency(cc: Component, name: string): void;
@@ -57,7 +66,7 @@ declare abstract class Component {
     */
     get $el(): HTMLElement;
     $refs: {
-        [key: string]: Element;
+        [key: string]: HTMLElement;
     };
     /**
      * Name of the component (optional). If provided, dot and the VDBO will be extended.

package/lib/dothtml.d.ts

@@ -15,6 +15,8 @@ import dot from "./dot";
  * - Re-imagined components from the ground up. Components are now classes that inherit from `Component`. Plays very nicely with TS and ES6.
  * - Added interfaces for new methods that can be invoked on various elements. For instance, play, pause, and stop on audio and video elements.
  * - Updated scopeClass method to put the optional parameter last.
+ * - Fixed some color bugs.
+ * - Added a filter builder.
  */
 export default dot;
 export { default as DotComponent } from "./component";

package/lib/dothtml.js

@@ -1,2 +1,2 @@
-/*! For license information please see dothtml.js.LICENSE.txt */
-(()=>{"use strict";var e={555:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ConditionalArgCallback=t.ArrayArgCallback=t.ContentArgCallback=t.AttrArgCallback=t.ArgCallback=void 0;class n{constructor(e,t){this.el=e,this.f=t}}t.ArgCallback=n,t.AttrArgCallback=class extends n{constructor(e,t,n){super(e,n),this.attr=t}updateContent(e){this.el.setAttribute(this.attr,this.f())}},t.ContentArgCallback=class extends n{constructor(e,t){super(e,t)}updateContent(e,t){e(this.el).empty().h(this.f(t))}},t.ArrayArgCallback=class extends n{constructor(e,t){super(null,t),this.dotTarget=e}updateContent(){}},t.ConditionalArgCallback=class extends n{constructor(e,t,n,r){super(null,n),this.startNode=e,this.endNode=t,this.condition=r,this.lastValue=void 0}updateContent(e){if(this.lastValue!=!!this.condition())if(this.lastValue=!this.lastValue,this.lastValue)e._appendOrCreateDocument(this.f,this.endNode.parentNode,this.endNode);else do{var t=this.startNode.nextSibling;t&&t!=this.endNode&&t.parentNode.removeChild(t)}while(this.startNode.nextSibling&&this.startNode.nextSibling!=this.endNode)}}},999:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=r(n(969)),i=r(n(150)),o=n(669),s=r(n(177)),l=n(555);class u{static initializeComponent(e){e.constructor.__dotComponentInitialized||(e.constructor.__dotComponentInitialized=!0,e.constructor.__dotClassNumb=o.ClassPrefix.next,e.constructor.__activePropContainer=function(e){this.__component=e},(0,o.eachK)(e.props,((t,n)=>{u.createProp(e.constructor.__activePropContainer,t)})))}static build(e){u.initializeComponent(e),o.GlobalComponentStack.push(e),e.created&&e.created(...e.__args),e.__built&&(0,s.default)("CB"),e.__built=!0,e.__propContainer={activePropConstructor:e.constructor.__activePropContainer,rawProps:e.props||{},activeProps:new e.constructor.__activePropContainer(e),propDependencies:{},bindings:{}},e.props=e.__propContainer.activeProps,(0,o.eachK)(e.__propContainer.rawProps,((t,n)=>{e.__propContainer.bindings[t]=[],e.props[t]=n})),u.initializeEventHandlers(e);let t=e.builder(...e.__args).getLast();return(!t||t.parentNode.childNodes.length>1)&&(0,s.default)("C#",e.name||e.constructor.name||"(unnamed obj)"),e.__$el=e.$el||t,e.$el.__dothtml_component=e,e.style&&(e.$styleBuilder=function(){i.default.css.scopeToEl(e.$el),e.__stylesSet||(i.default.css.cacheScopedStaticStyles(e.$el),e.__stylesSet=!0),i.default.css.clearDynamicStyles(e.$el),e.style(i.default.css),i.default.css.unscope()},e.$updateStyles()),e.built&&e.built(),e.ready&&(0,o.sT)((()=>{o.GlobalComponentStack.push(e),e.ready(),o.GlobalComponentStack.pop()}),0),o.GlobalComponentStack.pop(),e.$el}static initializeEventHandlers(e){e.__eventsInitialized||(e.__eventsInitialized=!0,(0,o.eachK)(e.events,((t,n)=>{e.events[t]=function(){for(let n of e.events[t].__handlers)n.apply(this,arguments)},e.events[t].__handlers=[]})))}static createProp(e,t){Object.defineProperty(e.prototype,t,{configurable:!1,enumerable:!1,get:function(){i.default.__lastProp=t,i.default.__lastIndex=null,i.default.__lastComponent=this.__component;let e=this.__component.__propContainer.rawProps[t];return u.configureDependency(this.__component,t),e},set:function(e){let n=e;e instanceof Array&&(n=new a.default(e),n.addEventListener("read",(e=>{i.default.__lastIndex=e.index}))),this.__component.__propContainer.rawProps[t]=n;for(let e of this.__component.__propContainer.bindings[t])(0,i.default)(e.element).as(i.default.input).setVal(n);return u.updateProp(this.__component,t),n}})}static configureDependency(e,t){var n=i.default.__currentArgCallback[i.default.__currentArgCallback.length-1];if(n){let i=e.__propContainer.rawProps[t];i instanceof a.default&&(i.addEventListener("itemadded",(function(r){n instanceof l.ArrayArgCallback?n.dotTarget._appendOrCreateDocument(n.f(r.item,r.index),void 0,r.index):n&&u.updateProp(e,t)})),i.addEventListener("itemset",(function(r){if(n instanceof l.ArrayArgCallback){var a=n.dotTarget.__document,i=a.childNodes[r.index];a.removeChild(i),n.dotTarget._appendOrCreateDocument(n.f(r.item,r.index),void 0,r.index)}else n&&u.updateProp(e,t)})),i.addEventListener("itemremoved",(function(r){n instanceof l.ArrayArgCallback?n.dotTarget.__document.removeChild(n.dotTarget.__document.childNodes[r.index]):n&&u.updateProp(e,t)})));var r=e.__propContainer.propDependencies[t];r||(r=e.__propContainer.propDependencies[t]=[]),r.push(n)}}static updateProp(e,t){let n=e.__propContainer.propDependencies[t],r=e.__propContainer.rawProps[t],a=!1;for(let e=0;e<(n||[]).length;e++){let t=n[e];t.updateContent(i.default,r),t instanceof l.AttrArgCallback&&"class"==t.attr&&(a=!0)}a&&e.$updateStyles()}constructor(...e){this.__built=!1,this.__stylesSet=!1,this.__eventsInitialized=!1,this.$refs={},this.__args=e}created(...e){}ready(){}deleting(){}deleted(){}built(){}on(e,t){u.initializeEventHandlers(this);let n=this.events&&this.events[e];n||(0,s.default)("UE",e);let r=n.__handlers;-1==r.indexOf(t)&&r.push(t)}off(e,t){let n=this.events&&this.events[e];n||(0,s.default)("UE",e);let r=n.__handlers,a=r.indexOf(t);a>-1&&r.splice(a,1)}get $el(){return this.__$el}$updateStyles(){this.$styleBuilder&&this.$styleBuilder()}}t.default=u},669:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.numberStep=t.floatRegex=t.GlobalComponentStack=t.ClassPrefix=t.str=t.sT=t.isF=t.eachK=void 0,t.eachK=function(e,t){if(e)for(var n=Object.keys(e),r=0;r<n.length;r++)t(n[r],e[n[r]])},t.isF=function(e){return e&&e.constructor&&e.call&&e.apply},t.sT=setTimeout,t.str=function(e,t){return(e||"").toString(t)},t.ClassPrefix=new class{constructor(){this.current=65536}reset(){this.current=65536}get next(){return this.current++}},t.GlobalComponentStack=[],t.floatRegex=new RegExp("[-+]?[0-9]*\\.?[0-9]+(?:[eE][-+]?[0-9]+)?","g"),t.numberStep=function(e,t,n,r,a){switch(e=Number(e),t=Number(t),a){case"geometric":case"exponential":case"ease":return e+.5*(1-Math.cos(Math.PI*(n/r)))*(t-e);default:return e+n/r*(t-e)}}},150:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var a=Object.getOwnPropertyDescriptor(t,n);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,a)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),a=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return a(t,e),t},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ATTRIBUTE_MODE=t.SELECTOR_MODE=void 0;const s=o(n(351)),l=i(n(782)),u=o(n(177)),c=n(669),d=o(n(999)),h=n(555),f=o(n(969)),p=function(e){var n=e?"string"==typeof e?document.querySelectorAll(e):e instanceof Element||e instanceof Node?[e]:e instanceof NodeList||e instanceof Array&&e[0]&&(e[0]instanceof Element||e[0]instanceof Node)?e:[]:[],r=new C;return n.length>0&&(r.__document=n[0]),p.__selectionMode=t.SELECTOR_MODE,r},g="DOTHTML-DEFER";var m=0;function b(e,t){S[e]=p[e]=t}function _(e){var t=null,n=e.__dothtml_component;n&&(n.deleting&&n.deleting(),n.__$el=null,t=n.deleted),e.parentNode&&e.parentNode.removeChild(e),t&&t.apply(n)}function y(e,t,n,r){e.addEventListener?e.addEventListener(t,n,r||!1):e.attachEvent("on"+t,n)}function v(e){b(e,(function(t){return this.el(e,t)}))}function k(e,t){S[t||e]=function(t){return this.attr(e,t)}}t.SELECTOR_MODE=1,t.ATTRIBUTE_MODE=2;var w,C=function(e,n){this.__document=e,this.__lastNode=e?e.lastChild:null,this.__if=null,this.__pendingCalls=[],this.__anonAttrFuncs={},this.__classPrefix=n||0,this.__classedElements=[],this.__selectionMode=t.SELECTOR_MODE},S=C.prototype,x=["a","aside","abbr","address","area","article","audio","b","bdi","bdo","blockQuote","body","br","button","canvas","caption","cite","code","col","colGroup","content","data","dataList","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldSet","figCaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hr","i","iFrame","img","input","ins","kbd","keyGen","label","legend","li","main","map","mark","menu","menuItem","meter","nav","object","ol","optGroup","option","output","p","param","pre","progress","q","rp","rt","ruby","s","samp","section","select","small","source","span","strong","svg","sub","summary","sup","table","tBody","td","textArea","tFoot","th","tHead","time","tr","track","u","ul","var","video","wbr"],N=["accept","accessKey","action","align","aLink","alt","archive","autoComplete","autoFocus","autoPlay","autoSave","axis","background","bgColor","border","buffered","cellPadding","cellSpacing","challenge","char","charOff","checked","classId","clear","codeBase","codeType","color","cols","colSpan","compact","contentEditable","contextMenu","controls","coords","dateTime","declare","default","dir","dirName","disabled","download","draggable","dropZone","encType","face","font","fontFace","fontFaceFormat","fontFaceName","fontFaceSrc","fontFaceUri","fontSpecification","for","foreignObject","formAction","frame","frameBorder","headers","height","hidden","high","hRef","hRefLang","hSpace","icon","id","images","isMap","itemProp","keyType","kind","lang","list","longDesc","loop","low","manifest","marginHeight","marginWidth","max","maxLength","media","metadata","method","min","missingGlyph","multiple","muted","name","noHRef","noResize","noShade","noValidate","nowrap","open","optimum","pattern","ping","placeholder","poster","preload","prompt","radioGroup","readOnly","rel","required","rev","reversed","rows","rowSpan","rules","sandbox","scope","scrolling","seamless","selected","shape","size","sizes","spellCheck","src","srcDoc","srcLang","srcSet","standby","start","step","style","tabIndex","target","title","type","useMap","vAlign","value","valueType","width","wrap"],O=[["quoteCite","cite"],["objectData","data"],["whichForm","form"],["trackLabel","label"],["colSpan","span"],["tableSummary","summary"],["optionLabel","label"],["acceptCharset","accept-charset"]],A=["onAbort","onBlur","onChange","onInput","onCanPlay","onCantPlayThrough","onClick","onCopy","onContextMenu","onCueChange","onCut","onDblClick","onDrag","onDragEnd","onDragEnter","onDragLeave","onDragOver","onDragStart","onDrop","onDurationChange","onEmptied","onEnded","onError","onFocus","onHashChange","onInvalid","onKeyDown","onKeyPress","onKeyUp","onLoad","onLoadedData","onLoadedMetadata","onLoadStart","onMouseDown","onMouseEnter","onMouseMove","onMouseOut","onMouseOver","onMouseUp","onMouseWheel","onOffline","onOnline","onPageHide","onPagePaste","onPageShow","onPause","onPlay","onPlaying","onPopState","onProgress","onRateChange","onReset","onResize","onScroll","onSearch","onSeeked","onSeeking","onSelect","onStalled","onStorage","onSubmit","onSuspend","onTimeUpdate","onToggle","onUnload","onVolumeChange","onWaiting","onWheel"];for(w in x)v(x[w]);for(w in N)k(N[w]);for(w in O)k(O[w][1],O[w][0]);for(w in A)k(A[w]);b("as",(function(e){return this})),b("_getNewDocument",(function(){return document.createElement("DOTHTML-DOCUMENT")})),b("_getAnInstance",(function(){if(this.__document||this.__pendingCalls.length>0)return this;var e=new C(null,this.__classPrefix);return e.__if=this.__if,e})),b("_getLastChildOrNull",(function(){return this.__document&&this.__document.lastChild?this.__document.lastChild:null})),b("getLast",(function(){return this._getLastChildOrNull()})),b("getCurrent",(function(){let e;switch(p.__selectionMode){case t.SELECTOR_MODE:e=this.__document;break;case t.ATTRIBUTE_MODE:e=this.getLast()||this.__document}return e})),S.toString=function(){return this.__document?this.__document.innerHTML:""},S.ref=function(e){let t=this.getLast(),n=c.GlobalComponentStack.length;return t&&n>0&&(c.GlobalComponentStack[n-1].$refs[e]=t),this},b("_evalContent",(function(e,t){if(null==e||null==e)return null;if("string"==typeof e||"number"==typeof e||"boolean"==typeof e){let t=new C(this._getNewDocument(),this.__classPrefix);return t.__document.innerHTML=e,t.__document.childNodes}if(e instanceof Node)return e;if("[object Array]"===Object.prototype.toString.call(e)){let t=new C(this._getNewDocument(),this.__classPrefix);for(let n=0;n<e.length;n++)t._appendOrCreateDocument(e[n]);if(t.__document)return t.__document.childNodes}else{if((0,c.isF)(e))return this._evalContent(e(),t);if(e instanceof d.default)return this._evalContent(d.default.build(e));if(e instanceof C){for(let n=0;n<e.__pendingCalls.length;n++)t.push(e.__pendingCalls[n]);let n=this.__classPrefix;for(let t in e.__classedElements){let r=e.__classedElements[t];n?r.className="dot-"+(0,c.str)(n,16)+"-"+r.className:this.__classedElements.push(r)}if(e.__document)return e.__document.childNodes}}return null})),b("_appendOrCreateDocument",(function(e,t,n){var r=this;if(t&&n&&isNaN(n)&&n.parentNode!=t)throw"beforeNode is not in parentEl.";t=t||(n&&isNaN(n)?n.parentNode:null)||r.__document||r._getNewDocument(),isNaN(n)||(n=t.childNodes[n]);var a=r.__document===t?r:new C(t,r.__classPrefix);a.__if=r.__if;var i,o=[],s=(0,c.isF)(e);s&&p.__currentArgCallback.push(new h.ContentArgCallback(t,e));try{i=a._evalContent(e,o)}finally{s&&p.__currentArgCallback.pop()}for(var l=0;l<o.length;l++){var u=o[l],d=(n?n.previousSibling||t:null)||t.lastChild||t;d&&"DOCUMENT"!=d.tagName?"attr"==u.type?(0,c.isF)(u.params[0])?y(d,u.name,u.params[0],u.arg3):d.setAttribute(u.name,u.params[0]):"wait"==u.type&&u.callback():a.__pendingCalls.push(u)}if(null!=i)if(i instanceof NodeList)for(;i.length>0;)n?t.insertBefore(i[0],n):t.appendChild(i[0]);else n?t.insertBefore(i,n):t.appendChild(i);return a})),b("el",(function(e,n){var r=this,a=document.createElement(e),i=r.__document||r._getNewDocument();i.appendChild(a),n&&r._appendOrCreateDocument(n,a);var o=r.__document===i?r:new C(i,r.__classPrefix);if(n&&n instanceof C)for(var s in n.__classedElements)o.__classedElements.push(n.__classedElements[s]);return p.__selectionMode=t.ATTRIBUTE_MODE,o})),b("h",(function(e){var t=this,n=t._getNewDocument();new C(n,t.__classPrefix)._appendOrCreateDocument(e);for(var r=t.__document||t._getNewDocument();n.childNodes.length>0;)r.appendChild(n.childNodes[0]);return t.__document===r?t:new C(r,t.__classPrefix)})),b("t",(function(e){var t=document.createTextNode(e),n=this.__document||this._getNewDocument();return n.appendChild(t),new C(n,this.__classPrefix)})),b("attr",(function(e,t,n){var r=this;if((0,c.isF)(t)&&(0==e.indexOf("on")&&-1!=A.indexOf(e)?e=e.substring(2).toLowerCase():(p.__anonAttrFuncs[m]=t,t="dot.__anonAttrFuncs["+m+++"](arguments[0]);")),!r.__document){var a=r._getAnInstance();return a.__pendingCalls.push({type:"attr",name:e,params:[t],arg3:n}),a}var i=r.__document.childNodes,o=i[i.length-1];if(o&&o.setAttribute)if((0,c.isF)(t))y(o,e,t,n);else{if("object"==typeof t&&!(t instanceof l._Builder)){var s=t,u=function(){var e="";return(0,c.eachK)(s,(function(t,n){(n=(0,c.isF)(n)?n():n)&&(e+=" "+t)})),e.substring(1)};p.__currentArgCallback.push(new h.AttrArgCallback(o,e,u)),t=u(),p.__currentArgCallback.pop()}var d=o.getAttribute(e);d?d+=" ":d="",o.setAttribute(e,d+(void 0===t?e:t))}return r})),b("_appendSetElement",(function(e,t){var n=this;if(!e)return(0,u.default)("A",e),n;var r=document.getElementById(e);if(!r)return(0,u.default)("F",e),n;if(n.__document)for(t||(r.innerHTML="");n.__document.childNodes.length>0;)r.appendChild(n.__document.childNodes[0]);return n})),b("iterate",(function(e,t){for(var n=this,r=0;r<e;r++){let e=null;(0,c.isF)(t)&&(e=t(r)),n=n._appendOrCreateDocument(e)}return n})),b("each",(function(e,t,n){var r=this;if((0,c.isF)(e)){if(!n)return r.defer((function(n){n.each(e,t,!0)}));var a=e;p.__currentArgCallback.push(new h.ArrayArgCallback(r,t));try{e=a()}finally{p.__currentArgCallback.pop()}}if(e instanceof Array||e instanceof f.default)for(var i=0;i<e.length;i++)r=r._appendOrCreateDocument(t(e[i],i));else{var o=Object.keys(e);for(i=0;i<o.length;i++){var s=o[i];r=r._appendOrCreateDocument(t(e[s],s))}}return r})),S.customData=function(e,t){return this.attr("data-"+e,t)},S.class=function(e){var t=this.__classPrefix;if(t){var n="dot-"+(0,c.str)(t,16)+"-";if("string"==typeof e)e=n+e;else if("object"==typeof e){var r={};(0,c.eachK)(e,(function(e,t){r[n+e]=t})),e=r}}else{var a=this.getLast();a&&this.__classedElements.push(a)}return this.attr("class",e)},S.play=function(){let e=this.getCurrent();return e.play&&e.play(),this},S.pause=function(e){let t=this.getCurrent();return t.pause&&t.pause(),e&&(t.currentTime=0),this},S.stop=function(){return this.pause(!0)},S.setVal=function(e){let t=this.getCurrent();return t?(Array.isArray&&Array.isArray(e)||!Array.isArray&&e.join?e=e.join(""):null==e&&(e=""),"checkbox"==t.type||"radio"==t.type?t.checked=!!e:"OPTION"==t.tagName?t.selected=!!e:t.value=e,this):this},S.getVal=function(){var e=this.__lastNode||this.__document;if(e&&1===e.nodeType)return"checkbox"==e.type||"radio"==e.type?!!e.checked:"OPTION"==e.tagName?!!e.selected:e.value},b("when",(function(e,t,n){var r=this._getAnInstance();if((0,c.isF)(e)){n||(n=r.__conditionalArray=[e]);var a=n.length-1;r=function(e,t,n,r){var a=document.createTextNode(""),i=document.createTextNode(""),o=new h.ConditionalArgCallback(a,i,r,t);p.__currentArgCallback.push(o);var s=t();e=e._appendOrCreateDocument(a);for(var l=0;l<n.length;l++)n[l]();return o.lastValue=s,s&&(e=e._appendOrCreateDocument(r)),e=e._appendOrCreateDocument(i),p.__currentArgCallback.pop(),e}(r,(function(){for(var t=0;t<a;t++)if(n[t]())return!1;return!!e()}),n,t)}else e?(r=r._appendOrCreateDocument((0,c.isF)(t)?t():t)).__if=!0:r.__if=!1;return r})),b("otherwiseWhen",(function(e,t){if((0,c.isF)(e)){var n=this.__conditionalArray;return n||(0,u.default)("MC"),n.push(e),this.when(e,t,n)}return this.__if?this:this.when(e,t)})),b("otherwise",(function(e){var t=this.__conditionalArray;if(t){var n=function(){return!0};return t.push(n),this.when(n,e,t)}return this.__if?this:(this.__if=null,this._getAnInstance()._appendOrCreateDocument(e))})),b("script",(function(e){var t=this.getLast();return(0,c.sT)((function(){e(t)}),0),this})),b("wait",(function(e,t){var n=this.el(g),r=n.__document.lastChild;return(0,c.sT)((()=>{n._appendOrCreateDocument(t,null,r),r.parentElement.removeChild(r)}),e),n})),b("defer",(function(e){(0,c.isF)(e)||(0,u.default)("XF","defer");var t=this.el(g),n=t.__document.lastChild;return(0,c.sT)((()=>{e(p(n.parentElement)),n.parentElement.removeChild(n)}),0),t})),b("empty",(function(){if(this.__document){for(var e=[this.__document],t=!0,n=[];e.length>0;){var r=e.shift();if(r.childNodes.length>0)for(var a=0;a<r.childNodes.length;a++)e.push(r.childNodes[a]);!t&&n.push(r),t=!1}for(;n.length>0;)_(n.pop())}return this})),b("remove",(function(){this.empty(),_(this.__document)})),b("scopeClass",(function(e,t){null==e&&(e=c.ClassPrefix.next);var n=this;n.__classPrefix=e;var r=n.h(t);return n.__classPrefix=0,r})),S.bindTo=function(e){let t=p.__lastProp,n=p.__lastIndex,r=p.__lastComponent,a=this.getLast(),i=r.props[t];null!=n&&null!=n&&(i=i[n]);let o=this.setVal(i);return y(a,"change",(function(e){r.props[t]=p(a).as(p.input).getVal()})),r.__propContainer.bindings[t].push({element:a}),o},p.resetScopeClass=function(){return c.ClassPrefix.reset(),this},p.css=l.default,p.bus=s.default,p.__currentArgCallback=[],p.__document=null,p.__if=null,p.__pendingCalls=[],p.__anonAttrFuncs={},t.default=p},220:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.DotComponent=void 0;const a=r(n(150)),i=r(n(999));a.default.version="5.0.0",a.default.Component=i.default,t.default=a.default;var o=n(999);Object.defineProperty(t,"DotComponent",{enumerable:!0,get:function(){return r(o).default}})},177:(e,t)=>{var n;Object.defineProperty(t,"__esModule",{value:!0}),n=function(e,...t){throw{A:`Can't append "${(t=t||[])[0]}".`,CB:"Unable to build the same component twice. Ensure each component is only used once.",CU:"Invalid usage: a component should at least have a name and a builder function.","C#":`Component "${t[0]}" must return exactly one child node.`,F:`Element "${t[0]}" not found.`,MC:"Can't mix static conditions with dynamic conditional rendering.",R:"Router must be passed a JSON object that contains an 'routes' array containing objects with a 'path', 'title', and 'component'.",S:"SVG is not supported by DOThtml.",UE:`Unknown event name "${t[0]}".`,XS:"Expected a string.",XF:`Expected a function in "${t[0]}".`}[e]||"Unknown error."},t.default=n},351:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0});const r=n(669),a=new class{constructor(){this._callbacks={},this._checkAddEvent=function(e){var t=this._callbacks[e];return t||(this._callbacks[e]=t=[]),t}}on(e,t){this._checkAddEvent(e).push(t)}off(e,t){for(var n=this._checkAddEvent(e),r=n.length-1;n>=0;r--)n[r]==t&&n.splice(r,1)}emit(e,...t){var n=this._checkAddEvent(e);(0,r.eachK)(n,(function(e,n){n(...t)}))}flush(e){this._checkAddEvent(e).length=0}};t.default=a},969:(e,t)=>{function n(e){var t=this,n=[],r={itemadded:[],itemremoved:[],itemset:[],read:[]};function a(e){e in t||Object.defineProperty(t,e,{configurable:!0,enumerable:!0,get:function(){return i({type:"read",index:e,item:n[e]}),n[e]},set:function(t){n[e]!=t&&(n[e]=t,i({type:"itemset",index:e,item:t}))}})}function i(e){r[e.type].forEach((function(n){n.call(t,e)}))}Object.defineProperty(t,"addEventListener",{configurable:!1,enumerable:!1,writable:!1,value:function(e,t){if(!((e=(""+e).toLowerCase())in r))throw new Error("Invalid event name.");if("function"!=typeof t)throw new Error("Invalid handler.");r[e].push(t)}}),Object.defineProperty(t,"removeEventListener",{configurable:!1,enumerable:!1,writable:!1,value:function(e,t){if(!((e=(""+e).toLowerCase())in r))throw new Error("Invalid event name.");if("function"!=typeof t)throw new Error("Invalid handler.");for(var n=r[e],a=n.length;--a>=0;)n[a]===t&&n.splice(a,1)}}),Object.defineProperty(t,"push",{configurable:!1,enumerable:!1,writable:!1,value:function(){for(var e,t=0,r=arguments.length;t<r;t++)e=n.length,n.push(arguments[t]),a(e),i({type:"itemadded",index:e,item:arguments[t]});return n.length}}),Object.defineProperty(t,"pop",{configurable:!1,enumerable:!1,writable:!1,value:function(){if(n.length>-1){var e=n.length-1,r=n.pop();return delete t[e],i({type:"itemremoved",index:e,item:r}),r}}}),Object.defineProperty(t,"unshift",{configurable:!1,enumerable:!1,writable:!1,value:function(){for(var e=0,t=arguments.length;e<t;e++)n.splice(e,0,arguments[e]),a(n.length-1),i({type:"itemadded",index:e,item:arguments[e]});return n.length}}),Object.defineProperty(t,"shift",{configurable:!1,enumerable:!1,writable:!1,value:function(){if(n.length>-1){var e=n.shift();return delete t[n.length],i({type:"itemremoved",index:0,item:e}),e}}}),Object.defineProperty(t,"splice",{configurable:!1,enumerable:!1,writable:!1,value:function(e,r){var o,s=[];e=null==e?0:e<0?n.length+e:e,r=null==r?n.length-e:r>0?r:0;for(var l=[];r--;)o=n.splice(e,1)[0],s.push(o),delete t[n.length],l.push({type:"itemremoved",index:e+s.length-1,item:o});for(var u=l.length-1;u>=0;u--)i(l[u]);u=2;for(var c=arguments.length;u<c;u++)n.splice(e,0,arguments[u]),a(n.length-1),i({type:"itemadded",index:e,item:arguments[u]}),e++;return s}}),Object.defineProperty(t,"length",{configurable:!1,enumerable:!1,get:function(){return n.length},set:function(e){var r=Number(e),a=n.length;if(!(r%1==0&&r>=0))throw new RangeError("Invalid array length");return r<a?t.splice(r):r>a&&t.push.apply(t,new Array(r-a)),n.length=r,e}}),Object.getOwnPropertyNames(Array.prototype).forEach((function(e){e in t||Object.defineProperty(t,e,{configurable:!1,enumerable:!1,writable:!1,value:Array.prototype[e]})})),e instanceof Array&&t.push.apply(t,e)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n,n.prototype.length=0},170:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=n(669),i=r(n(856));class o extends i.default{constructor(e){super("angle"),e=e||"0deg",isNaN(e)||(e=`${Math.round(e)}deg`),this.angle=Number(e.match(a.floatRegex)[0]),this.units=e.split(a.floatRegex)[1]||"deg"}toString(){return this.angle+this.units}}t.default=o},834:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=r(n(856));class i extends a.default{constructor(e){if(super("color"),this.r=0,this.g=0,this.b=0,this.a=1,1==e.length)if(""==(e=e[0])||"none"==e||"initial"==e||"inherit"==e);else if(isNaN(e))if("#"==e[0]){var t=e.split("#")[1];3==t.length?(this.r=Number("0x"+t[0]+t[0]),this.g=Number("0x"+t[1]+t[1]),this.b=Number("0x"+t[2]+t[2])):6==t.length&&(this.r=Number("0x"+t[0]+t[1]),this.g=Number("0x"+t[2]+t[3]),this.b=Number("0x"+t[4]+t[5]))}else if(0===e.toLowerCase().indexOf("rgb")){var n=e.split("(")[1];3!=(n=(n=n.split(")")[0]).split(",")).length&&4!=n.length||(this.r=Number(n[0]),this.g=Number(n[1]),this.b=Number(n[2]),this.a=Number(n[3]||1))}else{var r=0,a=0,i=0;switch(e.toLowerCase()){case"aliceblue":r=240,a=248,i=255;break;case"antiquewhite":r=250,a=235,i=215;break;case"aqua":case"cyan":r=0,a=255,i=255;break;case"aquamarine":r=127,a=255,i=212;break;case"azure":r=240,a=255,i=255;break;case"beige":r=245,a=245,i=220;break;case"bisque":r=255,a=228,i=196;break;case"black":r=0,a=0,i=0;break;case"blanchedalmond":r=255,a=235,i=205;break;case"blue":r=0,a=0,i=255;break;case"blueviolet":r=138,a=43,i=226;break;case"brown":r=165,a=42,i=42;break;case"burlywood":r=222,a=184,i=135;break;case"cadetblue":r=95,a=158,i=160;break;case"chartreuse":r=127,a=255,i=0;break;case"chocolate":r=210,a=105,i=30;break;case"coral":r=255,a=127,i=80;break;case"cornflowerblue":r=100,a=149,i=237;break;case"cornsilk":r=255,a=248,i=220;break;case"crimson":r=220,a=20,i=60;break;case"darkblue":r=0,a=0,i=139;break;case"darkcyan":r=0,a=139,i=139;break;case"darkgoldenrod":r=184,a=134,i=11;break;case"darkgray":case"darkgrey":r=169,a=169,i=169;break;case"darkgreen":r=0,a=100,i=0;break;case"darkkhaki":r=189,a=183,i=107;break;case"darkmagenta":r=139,a=0,i=139;break;case"darkolivegreen":r=85,a=107,i=47;break;case"darkorange":r=255,a=140,i=0;break;case"darkorchid":r=153,a=50,i=204;break;case"darkred":r=139,a=0,i=0;break;case"darksalmon":r=233,a=150,i=122;break;case"darkseagreen":r=143,a=188,i=143;break;case"darkslateblue":r=72,a=61,i=139;break;case"darkslategray":case"darkslategrey":r=47,a=79,i=79;break;case"darkturquoise":r=0,a=206,i=209;break;case"darkviolet":r=148,a=0,i=211;break;case"deeppink":r=255,a=20,i=147;break;case"deepskyblue":r=0,a=191,i=255;break;case"dimgray":case"dimgrey":r=105,a=105,i=105;break;case"dodgerblue":r=30,a=144,i=255;break;case"firebrick":r=178,a=34,i=34;break;case"floralwhite":r=255,a=250,i=240;break;case"forestgreen":r=34,a=139,i=34;break;case"fuchsia":case"magenta":r=255,a=0,i=255;break;case"gainsboro":r=220,a=220,i=220;break;case"ghostwhite":r=248,a=248,i=255;break;case"gold":r=255,a=215,i=0;break;case"goldenrod":r=218,a=165,i=32;break;case"gray":case"grey":r=128,a=128,i=128;break;case"green":r=0,a=128,i=0;break;case"greenyellow":r=173,a=255,i=47;break;case"honeydew":r=240,a=255,i=240;break;case"hotpink":r=255,a=105,i=180;break;case"indianred":r=205,a=92,i=92;break;case"indigo":r=75,a=0,i=130;break;case"ivory":r=255,a=255,i=240;break;case"khaki":r=240,a=230,i=140;break;case"lavender":r=230,a=230,i=250;break;case"lavenderblush":r=255,a=240,i=245;break;case"lawngreen":r=124,a=252,i=0;break;case"lemonchiffon":r=255,a=250,i=205;break;case"lightblue":r=173,a=216,i=230;break;case"lightcoral":r=240,a=128,i=128;break;case"lightcyan":r=224,a=255,i=255;break;case"lightgoldenrodyellow":r=250,a=250,i=210;break;case"lightgray":case"lightgrey":r=211,a=211,i=211;break;case"lightgreen":r=144,a=238,i=144;break;case"lightpink":r=255,a=182,i=193;break;case"lightsalmon":r=255,a=160,i=122;break;case"lightseagreen":r=32,a=178,i=170;break;case"lightskyblue":r=135,a=206,i=250;break;case"lightslategray":case"lightslategrey":r=119,a=136,i=153;break;case"lightsteelblue":r=176,a=196,i=222;break;case"lightyellow":r=255,a=255,i=224;break;case"lime":r=0,a=255,i=0;break;case"limegreen":r=50,a=205,i=50;break;case"linen":r=250,a=240,i=230;break;case"maroon":r=128,a=0,i=0;break;case"mediumaquamarine":r=102,a=205,i=170;break;case"mediumblue":r=0,a=0,i=205;break;case"mediumorchid":r=186,a=85,i=211;break;case"mediumpurple":r=147,a=112,i=219;break;case"mediumseagreen":r=60,a=179,i=113;break;case"mediumslateblue":r=123,a=104,i=238;break;case"mediumspringgreen":r=0,a=250,i=154;break;case"mediumturquoise":r=72,a=209,i=204;break;case"mediumvioletred":r=199,a=21,i=133;break;case"midnightblue":r=25,a=25,i=112;break;case"mintcream":r=245,a=255,i=250;break;case"mistyrose":r=255,a=228,i=225;break;case"moccasin":r=255,a=228,i=181;break;case"navajowhite":r=255,a=222,i=173;break;case"navy":r=0,a=0,i=128;break;case"oldlace":r=253,a=245,i=230;break;case"olive":r=128,a=128,i=0;break;case"olivedrab":r=107,a=142,i=35;break;case"orange":r=255,a=165,i=0;break;case"orangered":r=255,a=69,i=0;break;case"orchid":r=218,a=112,i=214;break;case"palegoldenrod":r=238,a=232,i=170;break;case"palegreen":r=152,a=251,i=152;break;case"paleturquoise":r=175,a=238,i=238;break;case"palevioletred":r=219,a=112,i=147;break;case"papayawhip":r=255,a=239,i=213;break;case"peachpuff":r=255,a=218,i=185;break;case"peru":r=205,a=133,i=63;break;case"pink":r=255,a=192,i=203;break;case"plum":r=221,a=160,i=221;break;case"powderblue":r=176,a=224,i=230;break;case"purple":r=128,a=0,i=128;break;case"rebeccapurple":r=102,a=51,i=153;break;case"red":r=255,a=0,i=0;break;case"rosybrown":r=188,a=143,i=143;break;case"royalblue":r=65,a=105,i=225;break;case"saddlebrown":r=139,a=69,i=19;break;case"salmon":r=250,a=128,i=114;break;case"sandybrown":r=244,a=164,i=96;break;case"seagreen":r=46,a=139,i=87;break;case"seashell":r=255,a=245,i=238;break;case"sienna":r=160,a=82,i=45;break;case"silver":r=192,a=192,i=192;break;case"skyblue":r=135,a=206,i=235;break;case"slateblue":r=106,a=90,i=205;break;case"slategray":case"slategrey":r=112,a=128,i=144;break;case"snow":r=255,a=250,i=250;break;case"springgreen":r=0,a=255,i=127;break;case"steelblue":r=70,a=130,i=180;break;case"tan":r=210,a=180,i=140;break;case"teal":r=0,a=128,i=128;break;case"thistle":r=216,a=191,i=216;break;case"tomato":r=255,a=99,i=71;break;case"turquoise":r=64,a=224,i=208;break;case"violet":r=238,a=130,i=238;break;case"wheat":r=245,a=222,i=179;break;case"white":r=255,a=255,i=255;break;case"whitesmoke":r=245,a=245,i=245;break;case"yellow":r=255,a=255,i=0;break;case"yellowgreen":r=154,a=205,i=50}this.r=r,this.g=a,this.b=i}else this.b=255&e,e>>=8,this.g=255&e,e>>=8,this.r=255&e;else 3!=e.length&&4!=e.length||(this.r=e[0],this.g=e[1],this.b=e[2],4==e.length&&(this.a=e[3]))}toString(){var e=Math.round,t=Math.max,n=Math.min;return 1==this.a?"rgb("+n(255,t(0,e(this.r)))+", "+n(255,t(0,e(this.g)))+", "+n(255,t(0,e(this.b)))+")":"rgba("+n(255,t(0,e(this.r)))+", "+n(255,t(0,e(this.g)))+", "+n(255,t(0,e(this.b)))+", "+n(1,t(0,this.a))+")"}}t.default=i},392:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=n(669),i=r(n(856));class o extends i.default{constructor(e){super("complex"),this.parts=(" "+e+" ").split(a.floatRegex),this.numbers=e.match(a.floatRegex)}toString(){for(var e=this.parts[0],t=0;t<this.numbers.length;t++)e+=this.numbers[t]+this.parts[t+1];return e}}t.default=o},856:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.default=class{constructor(e){this.type=e}}},287:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=n(669),i=r(n(856));class o extends i.default{constructor(e){super("length"),e=e||"0px",isNaN(e)||(e=Math.round(e)+"px"),this.length=Number(e.match(a.floatRegex)[0]),this.units=e.split(a.floatRegex)[1]||"px"}toString(){return`${this.length}${this.units}`}}t.default=o},70:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=r(n(856));class i extends a.default{constructor(e){super("number"),this.value=Number(e)}toString(){return this.value}}t.default=i},939:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=n(669),i=n(718),o=r(n(170)),s=r(n(856)),l=r(n(287));class u extends s.default{constructor(e){super("transformation"),this.transformations=[],"string"!=typeof e?(0,a.isF)(e)&&e(this):this.simpleValue=e}toString(){if(this.simpleValue)return this.simpleValue;for(var e="",t=0;t<this.transformations.length;t++){var n=this.transformations[t];e+=n.transformation+"(";for(var r=0;r<n.args.length;r++)e+=n.args[r].toString()+",";e=e.substring(0,e.length-1),e+=") "}return e.trim()}appendTransformString(e,t){return this.transformations.push({transformation:e,args:t}),this}matrix3d(e,t,n,r,a,i,o,s,l,u,c,d,h,f,p,g){return this.appendTransformString("matrix3d",arguments)}matrix(e,t,n,r,a,i){return this.appendTransformString("matrix",arguments)}translate(e,t){return 1==arguments.length?this.appendTransformString("translate",[new l.default(e)]):this.appendTransformString("translate",[new l.default(e),new l.default(t)])}translate3d(e,t,n){return this.appendTransformString("translate3d",[new l.default(e),new l.default(t),new l.default(n)])}translateX(e){return this.appendTransformString("translateX",[new l.default(e)])}translateY(e){return this.appendTransformString("translateY",[new l.default(e)])}translateZ(e){return this.appendTransformString("translateZ",[new l.default(e)])}scale(e,t){return this.appendTransformString("scale",[e,t??1])}scale3d(e,t,n){return this.appendTransformString("scale3d",[e,t,n])}scaleX(e){return this.appendTransformString("scaleX",[e])}scaleY(e){return this.appendTransformString("scaleY",[e])}scaleZ(e){return this.appendTransformString("scaleZ",[e])}rotate(e){return this.appendTransformString("rotate",[new o.default(e)])}rotate3d(e,t,n,r){return this.appendTransformString("rotate3d",[e,t,n,new o.default(r)])}rotate3dDeg(e,t,n,r){return this.rotate3d(e,t,n,r)}rotate3dRad(e,t,n,r){return this.rotate3d(e,t,n,`${r}rad`)}rotate3dGrad(e,t,n,r){return this.rotate3d(e,t,n,`${r}grad`)}rotate3dTurn(e,t,n,r){return this.rotate3d(e,t,n,`${r}turn`)}rotateX(e){return this.appendTransformString("rotateX",[new o.default(e)])}rotateY(e){return this.appendTransformString("rotateY",[new o.default(e)])}rotateZ(e){return this.appendTransformString("rotateZ",[new o.default(e)])}skew(e,t){return 1==arguments.length?this.appendTransformString("skew",[new o.default(e)]):this.appendTransformString("skew",[new o.default(e),new o.default(t)])}skewX(e){return this.appendTransformString("skewX",[new o.default(e)])}skewY(e){return this.appendTransformString("skewY",[new o.default(e)])}perspective(e){return this.appendTransformString("perspective",[new l.default(e)])}}t.default=u;const c="translate|translate3d|translateX|translateY|translateZ|perspective".split("|"),d="rotate|rotateX|rotateY|rotateZ|skew|skewX|skewY".split("|");for(let e=0;e<c.length;e++){let t=c[e];for(let e=0;e<i.AllLengthUnits.length;e++){let n=i.AllLengthUnits[e];u.prototype[t+(n.jsName||n.unit)]=function(){for(var e=0;e<arguments.length;e++)arguments[e]=arguments[e]+n.unit.toLowerCase();return u.prototype[t].apply(this,arguments)}}}for(let e=0;e<d.length;e++){let t=d[e];for(let e=0;e<i.AllAngleUnits.length;e++){let n=i.AllAngleUnits[e];u.prototype[t+n.unit]=function(){for(var e=0;e<arguments.length;e++)arguments[e]=arguments[e]+n.unit.toLowerCase();return u.prototype[t].apply(this,arguments)}}}},761:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=r(n(856));class i extends a.default{constructor(e){super("unknown"),this.value=e}toString(){return this.value}}t.default=i},300:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=r(n(856));class i extends a.default{constructor(e){if(super("url"),this.url=null,!e||0==e.length||1==e.length&&""==e[0]||"none"==e[0]||"initial"==e[0]||"inherit"==e[0])this.url=null;else{this.url=[];for(var t=0;t<e.length;t++)if(0===e[t].toLowerCase().indexOf("url")){var n=e[t].substring(e[t].indexOf("("),e[t].lastIndexOf(")")).trim();(n.indexOf('"')&&n.lastIndexOf('"')==n.length-1||n.indexOf("'")&&n.lastIndexOf("'")==n.length-1)&&(n=n.substring(1,n.length-1)),this.url.push(n)}else this.url.push(e[t])}}toString(){if(this.url){for(var e=[],t=0;t<this.url.length;t++)e.push('url("'+this.url[t]+'")');return e.join(", ")}return"none"}}t.default=i},782:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t._Builder=void 0;const a=n(718),i=r(n(170)),o=r(n(834)),s=r(n(392)),l=r(n(287)),u=r(n(70)),c=r(n(939)),d=r(n(761)),h=r(n(300)),f=n(669),p="data-dot-static-styles",g=new class{constructor(){this.fxInterval=1e3/60,this.lastBuilder=null,this.scopeStack=[],this.globalStyleElement=null}animateFull(e,t,n,r,a,i,o,s,l,u,c){if(!c||e.style[t]==c)if(s-o>0){switch(n){case"color":var d=Math.round((0,f.numberStep)(r.r,a.r,o,s,l)),h=Math.round((0,f.numberStep)(r.g,a.g,o,s,l)),p=Math.round((0,f.numberStep)(r.b,a.b,o,s,l)),b=m.formatNumberValue((0,f.numberStep)(r.a,a.a,o,s,l));m(e)[t](d,h,p,b);break;case"length":m(e)[t](m.formatNumberValue((0,f.numberStep)(r.length,a.length,o,s,l),r.units)+r.units);break;case"transformation":for(var _="",y=0;y<r.transformations.length;y++){var v=r.transformations[y],k=a.transformations[y];_+=v.transformation+"(";for(var w=0;w<v.args.length;w++){var C=v.args[w],S=k.args[w],x=isNaN(C)?C.length||C.angle||C.value||0:C,N=isNaN(S)?S.length||S.angle||S.value||0:S,O=isNaN(C)?C.units:"";_+=m.formatNumberValue((0,f.numberStep)(x,N,o,s,l),O)+O+","}_=_.substring(0,_.length-1),_+=") "}m(e)[t](_);break;default:switch(r.type){case"number":m(e)[t](m.formatNumberValue((0,f.numberStep)(r.value,a.value,o,s,l)));break;case"complex":var A="";for(y=0;y<r.numbers.length;y++)A+=r.parts[y],A+=m.formatNumberValue((0,f.numberStep)(r.numbers[y],a.numbers[y],o,s,l));A+=r.parts[r.parts.length-1],m(e)[t](A);break;default:console.warn("Unexpected data type for animation.")}}var P=window.performance&&window.performance.now?window.performance.now():null,D=e.style[t],T=function(c){var d=P?window.performance.now()-P:g.fxInterval;g.animateFull(e,t,n,r,a,i,o+d,s,l,u,D)};window.requestAnimationFrame?window.requestAnimationFrame(T):window.setTimeout(T,g.fxInterval)}else m(e)[t](i),u&&u()}extendDothtml(e,t,n){let r=_.prototype;if(r[t]=function(){if(0==arguments.length)return this;for(var r=[],a=0;a<arguments.length;a++)r.push(arguments[a]);var i=g.convertStyleIntoDotCssObject(r,n).toString(),o=e+":"+i+";";if(this.currentCss+=o,this.targets)for(var s=0;s<this.targets.length;s++){var l=this.targets[s];"STYLE"==l.tagName?l.innerHTML=l.innerHTML.substring(0,l.innerHTML.length-1)+e+":"+i+";}":l.style[t]=i}return this},g.addPropFunctionToDotCssObject(t),"length"==n)for(var i=0;i<a.AllLengthUnits.length;i++){var o=a.AllLengthUnits[i];!function(e){r[t+(e.jsName||e.unit)]=function(){for(var n=0;n<arguments.length;n++)arguments[n]=arguments[n]+e.unit.toLowerCase();return r[t].apply(this,arguments)}}(o),g.addPropFunctionToDotCssObject(t+(o.jsName||o.unit))}for(var s in r[t].type=n,r[t].jsFriendlyProp=t,y.prototype)void 0===r[t][s]&&(r[t][s]=y.prototype[s])}convertStyleIntoDotCssObject(e,t){return e instanceof Array||(e=[e]),"color"==t?new o.default(e):"url"==t?new h.default(e):"length"!=t||isNaN(e[0])&&(-1!=e[0].indexOf(" ")||e[0].replace(f.floatRegex,"")==e[0])?"transformation"==t?new c.default(e[0]).toString():""===e[0]||isNaN(e[0])&&(""+e[0]).replace(f.floatRegex,"")==e[0]?new d.default(e[0]):isNaN(e[0])?new s.default(e[0]):new u.default(e[0]):new l.default(e[0])}compareComplexDataTypes(e,t){if("complex"!=e.type||"complex"!=t.type)return!1;if(e.numbers.length!=t.numbers.length)return!1;if(e.parts.length!=t.parts.length)return!1;for(var n=0;n<e.parts.length;n++)if(e.parts[n]!=t.parts[n])return!1;return!0}addPropFunctionToDotCssObject(e){m[e]=function(){var t=new _;return t[e].apply(t,arguments)}}computedStyleOrActualStyle(e,t){return window.getComputedStyle(e)[t]||e.style[t]}modDeg(e){return e<0&&(e=360- -e%360),e%360}},m=function(e){var t=null;if(e){if("string"==typeof e)if(e.length>2&&e.indexOf("{}")==e.length-2)e=e.substring(0,e.length-2),g.globalStyleElement||(g.globalStyleElement=document.createElement("style"),document.head.appendChild(g.globalStyleElement)),(t=[g.globalStyleElement])[0].innerHTML+=e+"{}\r\n";else{var n=g.scopeStack[0];t=n&&n.parentNode&&n.querySelectorAll?b(e,n):document.querySelectorAll(e)}(e instanceof NodeList||e instanceof Array)&&(t=e),e instanceof Node&&(t=[e])}return g.lastBuilder=new _(t),g.lastBuilder};function b(e,t){for(var n=Array.from(t.querySelectorAll(e)),r=0;r<n.length;r++){var a=n[r];if(a.__dothtml_component){n.splice(r,1),r--;for(var i=a.querySelectorAll(e),o=0;o<i.length;o++){let e=i[o];n.splice(n.indexOf(e,r+1),1)}}}var s=Array.from(t.parentNode.querySelectorAll(e)),l=s.indexOf(t);return-1!=l&&n.unshift(s[l]),n}m.version="0.16.0";class _{constructor(e){this.currentCss="",this.targets=e??null}toString(){return this.currentCss}hide(e){if(this.targets){var t=arguments[0]||{},n=t,r=t,a={};if(a.duration=r.duration||(isNaN(n)?0:n)||0,a.complete=r.complete||("function"==typeof arguments[1]?arguments[1]:"function"==typeof arguments[2]?arguments[2]:function(){}),a.hideStyle=r.hideStyle||"normal",a.animationStyle=r.animationStyle||("string"==typeof arguments[1]?arguments[1]:"ease"),a.duration>0){let e=0,t=0,n=this.targets.length;for(let r=0;r<this.targets.length;r++){let i,o=this.targets[r].style.width,s=this.targets[r].style.height,l=this.targets[r].style.opacity;i=l&&""!==l?Number(l):1;let u=this.targets[r].style.overflow;"fade"!=a.hideStyle&&(this.targets[r].style.overflow="hidden",t+=2,function(r,i,o,s,l){m(i).width.animate(0,a.duration,a.animationStyle,(function(){m(i).display("none").width(o).overflow(l),e++,e>=t*n&&a.complete(r)})),m(i).height.animate(0,a.duration,a.animationStyle,(function(){m(i).display("none").height(s),e++,e>=t*n&&a.complete(r)}))}(this,this.targets[r],o,s,u)),"shrink"!=a.hideStyle&&(t++,function(r,i,o){m(i).opacity.animate(0,a.duration,a.animationStyle,(function(){m(i).display("none").opacity(o),e++,e>=t*n&&a.complete(r)}))}(this,this.targets[r],i))}}else m(this.targets).display("none"),a.complete(this)}return this}show(e){if(this.targets){let e=arguments[0]||{},t=e,n=e,r={};if(r.duration=n.duration||(isNaN(t)?0:t)||0,r.display=n.display||"block",r.opacity=n.opacity,r.width=n.width||null,r.height=n.height||null,r.complete=n.complete||("function"==typeof arguments[1]?arguments[1]:"function"==typeof arguments[2]?arguments[2]:function(){}),r.showStyle=n.showStyle||"normal",r.animationStyle=n.animationStyle||("string"==typeof arguments[1]?arguments[1]:"ease"),!(r.duration>0))return m(this.targets).display(r.display);{let e=0,t=this.targets.length,n=0;for(let a=0;a<this.targets.length;a++){let i=r.opacity;if(void 0===r.opacity&&(i=parseFloat(this.targets[a].style.opacity)||1),"fade"!=r.showStyle){n+=2;let i=r.width||this.targets[a].style.width,o=r.height||this.targets[a].style.height;m(this.targets[a]).width(0),m(this.targets[a]).height(0),m(this.targets[a]).width.animate(i,r.duration,r.animationStyle,(function(){e++,e>=t*n&&r.complete()})),m(this.targets[a]).height.animate(o,r.duration,r.animationStyle,(function(){e++,e>=t*n&&r.complete()}))}m(this.targets[a]).opacity(0),m(this.targets[a]).display(r.display),"grow"!=r.showStyle&&(n++,m(this.targets[a]).opacity.animate(i,r.duration,r.animationStyle,(function(){e++,e==t*n&&r.complete()})))}}}return this}fadeOut(e,t){return this.hide({duration:isNaN(e)?400:Number(e),hideStyle:"fade",complete:t})}fadeIn(e,t){return this.show({duration:isNaN(e)?400:Number(e),showStyle:"fade",complete:t})}}t._Builder=_,m.prototype.toString=_.prototype.toString;class y{constructor(){this.apply=Function.apply,this.call=Function.call,this.type=null,this.jsFriendlyProp=null}toString(){if(g.lastBuilder.targets){let e=null;if(g.lastBuilder.targets.length>1){e=[];for(let t=0;t<g.lastBuilder.targets.length;t++)e.push(g.lastBuilder.targets[t].style[this.jsFriendlyProp])}else e=g.lastBuilder.targets[0].style[this.jsFriendlyProp];return e}return null}val(){if(g.lastBuilder.targets){let e=null;if(g.lastBuilder.targets.length>1){e=null;for(let t=0;t<g.lastBuilder.targets.length;t++)g.lastBuilder.targets[0].style[this.jsFriendlyProp]?e.push(g.convertStyleIntoDotCssObject(g.lastBuilder.targets[t].style[this.jsFriendlyProp],this.type)):e.push(null)}else e=g.lastBuilder.targets[0].style[this.jsFriendlyProp]?g.convertStyleIntoDotCssObject(g.lastBuilder.targets[0].style[this.jsFriendlyProp],this.type):null;return e}return null}animate(e,t,n,r){if(t=isNaN(t)?400:t||0,g.lastBuilder&&g.lastBuilder.targets){!r&&n&&n.call&&n.apply&&(r=n,n=void 0);for(let a=0;a<g.lastBuilder.targets.length;a++){let o=g.lastBuilder.targets[a],s=null,u=null,c=null;if(u=g.convertStyleIntoDotCssObject(e,this.type),"transformation"==this.type&&(s=g.convertStyleIntoDotCssObject(o.style[this.jsFriendlyProp],this.type)),s||(s=g.convertStyleIntoDotCssObject(g.computedStyleOrActualStyle(o,this.jsFriendlyProp),this.type)),c=u.toString(),"length"==this.type){if(s.units!=u.units)if(0==s.length)s.units=u.units,s.length=0;else if(0==u.length)u.units=s.units,u.length=0;else{let e=m.lengthToPx(s.toString(),this.jsFriendlyProp,o),t=m.lengthToPx(u.toString(),this.jsFriendlyProp,o);s.length=e,s.units="px",u.length=t,u.units="px"}}else if("color"==this.type);else if("transformation"==this.type){let e="",t="",n=s.transformations.length-1,r=u.transformations.length-1;for(;n>=0||r>=0;){let o="",c=null,d=null;if(n>=0&&r>=0&&s.transformations[n].transformation==u.transformations[r].transformation){let e=s.transformations[n],t=u.transformations[r];o=e.transformation,c=e.args,d=t.args,n--,r--}else if(n>=r){let e=s.transformations[n];if(o=e.transformation,c=e.args,"matrix"==o)d=[1,0,0,1,0,0];else if("matrix3d"==o)d=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];else{let e=-1==o.indexOf("scale")?0:1;d=[];for(let t=0;t<c.length;t++)d.push(isNaN(c[t])?isNaN(c[t].angle)?isNaN(c[t].length)?0:new l.default(0):new i.default(0):e)}n--}else{let e=u.transformations[r];if(o=e.transformation,d=e.args,"matrix"==o)c=[1,0,0,1,0,0];else if("matrix3d"==o)c=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];else{let e=-1==o.indexOf("scale")?0:1;c=[];for(let t=0;t<d.length;t++)c.push(isNaN(d[t])?isNaN(d[t].angle)?isNaN(d[t].length)?0:new l.default(0):new i.default(0):e)}r--}if(e=") "+e,t=") "+t,-1!=o.indexOf("rotate")){let e=c[c.length-1].angle,t=d[d.length-1].angle,n=m.angleSubtract(t,e);c[c.length-1].angle=t-n}for(let n=c.length-1;n>=0;n--)e=","+c[a]+e,t=","+d[a]+t;e=o+"("+e.substring(1),t=o+"("+t.substring(1)}s=g.convertStyleIntoDotCssObject(e,"transformation"),u=g.convertStyleIntoDotCssObject(t,"transformation")}else if("number"==s.type&&"number"==u.type);else{if("complex"!=s.type||"complex"!=u.type){console.warn("Couldn't animate "+this.jsFriendlyProp+". Not a recognizable length, color, or number.");continue}if(!g.compareComplexDataTypes(s,u)){console.warn("Couldn't animate "+this.jsFriendlyProp+". Value mismatch.");continue}}g.animateFull(o,this.jsFriendlyProp,s.type||this.type,s,u,c,g.fxInterval,t,n||"ease",r)}}return g.lastBuilder}}m.formatNumberValue=function(e,t){return"px"===t?Math.round(e):Math.round(100*e)/100};const v={color:"color|background-Color|border-Bottom-Color|border-Color|border-Left-Color|border-Right-Color|border-Top-Color|text-Decoration-Color|outline-Color|column-Rule-Color",length:"background-Size|border-Bottom-Left-Radius|border-Bottom-Right-Radius|border-Bottom-Width|border-Image-Width|border-Left-Width|border-Radius|border-Right-Width|border-Top-Left-Radius|border-Top-Right-Radius|border-Top-Width|border-Width|bottom|height|left|margin|margin-Bottom|margin-Left|margin-Right|margin-Top|max-Height|max-Width|min-Height|min-Width|padding|padding-Bottom|padding-Left|padding-Right|padding-Top|right|top|width|line-Height|flex-Basis|font-Size",url:"background-Image|border-Image|list-Style-Image|content|image-Orientation",transformation:"transform",misc:"opacity|background|background-Attachment|background-Blend-Mode|background-Position|background-Repeat|background-Clip|background-Origin|border|border-Bottom|border-Bottom-Style|border-Image-Outset|border-Image-Repeat|border-Image-Slice|border-Image-Source|border-Left|border-Left-Style|border-Right|border-Right-Style|border-Style|border-Top|border-Top-Style|box-Decoration-Break|box-Shadow|clear|clip|display|float|overflow|box|overflow-X|overflow-Y|position|visibility|vertical-Align|z-Index|align-Content|align-Items|align-Self|flex|flex-Basis|flex-Direction|flex-Flow|flex-Grow|flex-Shrink|flex-Wrap|grid|grid-Area|grid-Auto-Columns|grid-auto-Rows|grid-Column|grid-Column-End|grid-Column-Gap|grid-Column-Start|grid-Gap|grid-Row|grid-Row-End|grid-Row-Gap|grid-Row-Start|grid-Template|grid-Template-Areas|grid-Template-Columns|grid-Template-Rows|justify-Content|order|hanging-Punctuation|hyphens|letter-Spacing|line-Break|overflow-Wrap|tab-Size|text-Align|text-Align-Last|text-Combine-Upright|text-Indent|text-Justify|text-Transform|white-Space|word-Break|word-Spacing|word-Wrap|text-Decoration|text-Decoration-Line|text-Decoration-Style|text-Shadow|text-Underline-Position|font|font-Family|font-Feature-Settings|font-Kerning|font-Language-Override|font-Size-Adjust|font-Stretch|font-Style|font-Synthesis|font-Variant|font-Variant-Alternates|font-Variant-Caps|font-Variant-East-Asian|font-Variant-Ligatures|font-Variant-Numeric|font-Variant-Position|font-Weight|direction|text-Orientation|text-Combine-Upright|unicode-Bidi|user-Select|writing-Mode|border-Collapse|border-Spacing|caption-Side|empty-Cells|table-Layout|counter-Increment|counter-Reset|list-Style|list-Style-Position|list-Style-Type|animation|animation-Delay|animation-Direction|animation-Duration|animation-Fill-Mode|animation-Iteration-Count|animation-Name|animation-Play-State|animation-Timing-Function|backface-Visibility|perspective2d|perspective-Origin|transform-Origin|transform-Style|transition|transition-Property|transition-Duration|transition-Timing-Function|transition-Delay|box-Sizing|cursor|ime-Mode|nav-Down|nav-Index|nav-Left|nav-Right|nav-Up|outline|outline-Offset|outline-Style|outline-Width|resize|text-Overflow|break-After|break-Before|break-Inside|column-Count|column-Fill|column-Gap|column-Rule|column-Rule-Style|column-Rule-Width|column-Span|column-Width|columns|widows|orphans|page-Break-After|page-Break-Before|page-Break-Inside|marks|quotes|filter|image-Rendering|image-Resolution|object-Fit|object-Position|mask|mask-Type|mark|mark-After|mark-Before|phonemes|rest|rest-After|rest-Before|voice-Balance|voice-Duration|voice-Pitch|voice-Pitch-Range|voice-Rate|voice-Stress|voice-Volume|marquee-Direction|marquee-Play-Count|marquee-Speed|marquee-Style|pointer-Events"};for(var k in m.matrixMultiply3D=function(e,t){if(16!=e.length||16!=t.length)throw"3D matrices must be arrays of 16 length.";for(var n=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],r=0;r<4;r++)for(var a=0;a<4;a++)for(var i=0;i<4;i++)n[r+4*a]+=Number(e[r+4*i])*Number(t[i+4*a]);return n},m.cacheScopedStaticStyles=function(e){let t=b("*",e);for(let e of t)e.hasAttribute("style")&&e.setAttribute(p,e.getAttribute("style"))},m.clearDynamicStyles=function(e){let t=b("*",e);for(let e of t)e.removeAttribute("style"),e.hasAttribute(p)&&e.setAttribute("style",e.getAttribute(p))},m.scopeToEl=function(e){return g.scopeStack.unshift(e),this},m.unscope=function(){return g.scopeStack.shift(),this},v){let e=v[k].split("|");for(var w in e)g.extendDothtml(e[w].toLowerCase(),e[w].replace(new RegExp("-","g"),""),k)}t.default=m},718:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AllAngleUnits=t.AllLengthUnits=void 0,t.AllLengthUnits=[{unit:"Em"},{unit:"Ex"},{unit:"Ch"},{unit:"Rem"},{unit:"Vw"},{unit:"Vh"},{unit:"Vmin"},{unit:"Vmax"},{unit:"%",jsName:"P"},{unit:"Cm"},{unit:"Mm"},{unit:"In"},{unit:"Px"},{unit:"Pt"},{unit:"Pc"}],t.AllAngleUnits=[{unit:"Deg"},{unit:"Grad"},{unit:"Rad"},{unit:"Turn"}]}},t={},n=function n(r){var a=t[r];if(void 0!==a)return a.exports;var i=t[r]={exports:{}};return e[r].call(i.exports,i,i.exports,n),i.exports}(220);module.exports=n})();
+/*! For license information please see dothtml.js.LICENSE.txt */
+(()=>{"use strict";var e={555:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ConditionalArgCallback=t.ArrayArgCallback=t.ContentArgCallback=t.AttrArgCallback=t.ArgCallback=void 0;class n{constructor(e,t){this.el=e,this.f=t}}t.ArgCallback=n,t.AttrArgCallback=class extends n{constructor(e,t,n){super(e,n),this.attr=t}updateContent(e){this.el.setAttribute(this.attr,this.f())}},t.ContentArgCallback=class extends n{constructor(e,t){super(e,t)}updateContent(e,t){e(this.el).empty().h(this.f(t))}},t.ArrayArgCallback=class extends n{constructor(e,t){super(null,t),this.dotTarget=e}updateContent(){}},t.ConditionalArgCallback=class extends n{constructor(e,t,n,r){super(null,n),this.startNode=e,this.endNode=t,this.condition=r,this.lastValue=void 0}updateContent(e){if(this.lastValue!=!!this.condition())if(this.lastValue=!this.lastValue,this.lastValue)e._appendOrCreateDocument(this.f,this.endNode.parentNode,this.endNode);else do{var t=this.startNode.nextSibling;t&&t!=this.endNode&&t.parentNode.removeChild(t)}while(this.startNode.nextSibling&&this.startNode.nextSibling!=this.endNode)}}},999:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=r(n(969)),i=r(n(150)),o=n(669),s=r(n(177)),l=n(555);class u{#e;#t;#n;#r;static initializeComponent(e){e.constructor.__dotComponentInitialized||(e.constructor.__dotComponentInitialized=!0,e.constructor.__dotClassNumb=o.ClassPrefix.next,e.constructor.__activePropContainer=function(e){this.__component=e},(0,o.eachK)(e.props,((t,n)=>{u.createProp(e.constructor.__activePropContainer,t)})))}static build(e){return u.initializeComponent(e),o.GlobalComponentStack.push(e),e.created&&e.created(...e.__args),e.__built&&(0,s.default)("CB"),e.__built=!0,e.__propContainer={activePropConstructor:e.constructor.__activePropContainer,rawProps:e.props||{},activeProps:new e.constructor.__activePropContainer(e),propDependencies:{},bindings:{}},e.props=e.__propContainer.activeProps,(0,o.eachK)(e.__propContainer.rawProps,((t,n)=>{e.__propContainer.bindings[t]=[],e.props[t]=n})),u.initializeEventHandlers(e),u.rebuild(e),e.ready&&(0,o.sT)((()=>{o.GlobalComponentStack.push(e),e.ready(),o.GlobalComponentStack.pop()}),0),o.GlobalComponentStack.pop(),e.$el}static rebuild(e){e.$el,e.__eventsInitialized||(e.#t=!0);let t=e.builder(...e.__args);e.#t=!1;let n=t.getLast();(!n||n.parentNode.childNodes.length>1)&&(0,s.default)("C#",e.name||e.constructor.name||"(unnamed obj)"),e.__$el=n,e.$el.__dothtml_component=e,e.style&&(e.$styleBuilder=function(){i.default.css.scopeToEl(e.$el),e.__stylesSet||(i.default.css.cacheScopedStaticStyles(e.$el),e.__stylesSet=!0),i.default.css.clearDynamicStyles(e.$el),e.style(i.default.css),i.default.css.unscope()},e.__eventsInitialized||(e.#e=!0),e.$updateStyles(),e.#e=!1),e.built&&e.built()}static initializeEventHandlers(e){e.__eventsInitialized||(e.__eventsInitialized=!0,(0,o.eachK)(e.events,((t,n)=>{e.events[t]=function(){for(let n of e.events[t].__handlers)n.apply(this,arguments)},e.events[t].__handlers=[]})))}static createProp(e,t){Object.defineProperty(e.prototype,t,{configurable:!1,enumerable:!1,get:function(){i.default.__lastProp=t,i.default.__lastIndex=null,i.default.__lastComponent=this.__component;let e=this.__component.__propContainer.rawProps[t];return u.configureDependency(this.__component,t),e},set:function(e){let n=e;e instanceof Array&&(n=new a.default(e),n.addEventListener("read",(e=>{i.default.__lastIndex=e.index}))),this.__component.__propContainer.rawProps[t]=n;for(let e of this.__component.__propContainer.bindings[t])(0,i.default)(e.element).as(i.default.input).setVal(n);return u.updateProp(this.__component,t),n}})}static configureDependency(e,t){var n=i.default.__currentArgCallback[i.default.__currentArgCallback.length-1];if(n){let i=e.__propContainer.rawProps[t];i instanceof a.default&&(i.addEventListener("itemadded",(function(r){n instanceof l.ArrayArgCallback?n.dotTarget._appendOrCreateDocument(n.f(r.item,r.index),void 0,r.index):n&&u.updateProp(e,t)})),i.addEventListener("itemset",(function(r){if(n instanceof l.ArrayArgCallback){var a=n.dotTarget.__document,i=a.childNodes[r.index];a.removeChild(i),n.dotTarget._appendOrCreateDocument(n.f(r.item,r.index),void 0,r.index)}else n&&u.updateProp(e,t)})),i.addEventListener("itemremoved",(function(r){n instanceof l.ArrayArgCallback?n.dotTarget.__document.removeChild(n.dotTarget.__document.childNodes[r.index]):n&&u.updateProp(e,t)})));var r=e.__propContainer.propDependencies[t];r||(r=e.__propContainer.propDependencies[t]=[]),r.push(n)}e.#e&&(e.#n[t]=!0),e.#t&&(e.#r[t]=!0)}static updateProp(e,t){let n=e.__propContainer.propDependencies[t],r=e.__propContainer.rawProps[t],a=!1;for(let o=0;o<(n||[]).length;o++){let s=n[o];s.updateContent(i.default,r),(e.#n[t]||s instanceof l.AttrArgCallback&&"class"==s.attr)&&(a=!0)}a&&e.$updateStyles()}constructor(...e){this.#e=!1,this.#t=!1,this.#n={},this.#r={},this.__built=!1,this.__stylesSet=!1,this.__eventsInitialized=!1,this.$refs={},this.__args=e}created(...e){}ready(){}deleting(){}deleted(){}built(){}on(e,t){u.initializeEventHandlers(this);let n=this.events&&this.events[e];n||(0,s.default)("UE",e);let r=n.__handlers;-1==r.indexOf(t)&&r.push(t)}off(e,t){let n=this.events&&this.events[e];n||(0,s.default)("UE",e);let r=n.__handlers,a=r.indexOf(t);a>-1&&r.splice(a,1)}get $el(){return this.__$el}$updateStyles(){this.$styleBuilder&&this.$styleBuilder()}}t.default=u},669:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.numberStep=t.floatRegex=t.GlobalComponentStack=t.ClassPrefix=t.str=t.sT=t.isF=t.eachK=void 0,t.eachK=function(e,t){if(e)for(var n=Object.keys(e),r=0;r<n.length;r++)t(n[r],e[n[r]])},t.isF=function(e){return e&&e.constructor&&e.call&&e.apply},t.sT=setTimeout,t.str=function(e,t){return(e||"").toString(t)},t.ClassPrefix=new class{constructor(){this.current=65536}reset(){this.current=65536}get next(){return this.current++}},t.GlobalComponentStack=[],t.floatRegex=new RegExp("[-+]?[0-9]*\\.?[0-9]+(?:[eE][-+]?[0-9]+)?","g"),t.numberStep=function(e,t,n,r,a){switch(e=Number(e),t=Number(t),a){case"geometric":case"exponential":case"ease":return e+.5*(1-Math.cos(Math.PI*(n/r)))*(t-e);default:return e+n/r*(t-e)}}},150:function(e,t,n){var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var a=Object.getOwnPropertyDescriptor(t,n);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,a)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),a=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return a(t,e),t},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ATTRIBUTE_MODE=t.SELECTOR_MODE=void 0;const s=o(n(351)),l=i(n(782)),u=o(n(177)),c=n(669),d=o(n(999)),h=n(555),p=o(n(969)),f=function(e){var n=e?"string"==typeof e?document.querySelectorAll(e):e instanceof Element||e instanceof Node?[e]:e instanceof NodeList||e instanceof Array&&e[0]&&(e[0]instanceof Element||e[0]instanceof Node)?e:[]:[],r=new C;return n.length>0&&(r.__document=n[0]),f.__selectionMode=t.SELECTOR_MODE,r},g="DOTHTML-DEFER";var m=0;function b(e,t){S[e]=f[e]=t}function _(e){var t=null,n=e.__dothtml_component;n&&(n.deleting&&n.deleting(),n.__$el=null,t=n.deleted),e.parentNode&&e.parentNode.removeChild(e),t&&t.apply(n)}function y(e,t,n,r){e.addEventListener?e.addEventListener(t,n,r||!1):e.attachEvent("on"+t,n)}function v(e){b(e,(function(t){return this.el(e,t)}))}function k(e,t){S[t||e]=function(t){return this.attr(e,t)}}t.SELECTOR_MODE=1,t.ATTRIBUTE_MODE=2;var w,C=function(e,n){this.__document=e,this.__lastNode=e?e.lastChild:null,this.__if=null,this.__pendingCalls=[],this.__anonAttrFuncs={},this.__classPrefix=n||0,this.__classedElements=[],this.__selectionMode=t.SELECTOR_MODE},S=C.prototype,x=["a","aside","abbr","address","area","article","audio","b","bdi","bdo","blockQuote","body","br","button","canvas","caption","cite","code","col","colGroup","content","data","dataList","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldSet","figCaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hr","i","iFrame","img","input","ins","kbd","keyGen","label","legend","li","main","map","mark","menu","menuItem","meter","nav","object","ol","optGroup","option","output","p","param","pre","progress","q","rp","rt","ruby","s","samp","section","select","small","source","span","strong","svg","sub","summary","sup","table","tBody","td","textArea","tFoot","th","tHead","time","tr","track","u","ul","var","video","wbr"],N=["accept","accessKey","action","align","aLink","alt","archive","autoComplete","autoFocus","autoPlay","autoSave","axis","background","bgColor","border","buffered","cellPadding","cellSpacing","challenge","char","charOff","checked","classId","clear","codeBase","codeType","color","cols","colSpan","compact","contentEditable","contextMenu","controls","coords","dateTime","declare","default","dir","dirName","disabled","download","draggable","dropZone","encType","face","font","fontFace","fontFaceFormat","fontFaceName","fontFaceSrc","fontFaceUri","fontSpecification","for","foreignObject","formAction","frame","frameBorder","headers","height","hidden","high","hRef","hRefLang","hSpace","icon","id","images","isMap","itemProp","keyType","kind","lang","list","longDesc","loop","low","manifest","marginHeight","marginWidth","max","maxLength","media","metadata","method","min","missingGlyph","multiple","muted","name","noHRef","noResize","noShade","noValidate","nowrap","open","optimum","pattern","ping","placeholder","poster","preload","prompt","radioGroup","readOnly","rel","required","rev","reversed","rows","rowSpan","rules","sandbox","scope","scrolling","seamless","selected","shape","size","sizes","spellCheck","src","srcDoc","srcLang","srcSet","standby","start","step","style","tabIndex","target","title","type","useMap","vAlign","value","valueType","width","wrap"],O=[["quoteCite","cite"],["objectData","data"],["whichForm","form"],["trackLabel","label"],["colSpan","span"],["tableSummary","summary"],["optionLabel","label"],["acceptCharset","accept-charset"]],P=["onAbort","onBlur","onChange","onInput","onCanPlay","onCantPlayThrough","onClick","onCopy","onContextMenu","onCueChange","onCut","onDblClick","onDrag","onDragEnd","onDragEnter","onDragLeave","onDragOver","onDragStart","onDrop","onDurationChange","onEmptied","onEnded","onError","onFocus","onHashChange","onInvalid","onKeyDown","onKeyPress","onKeyUp","onLoad","onLoadedData","onLoadedMetadata","onLoadStart","onMouseDown","onMouseEnter","onMouseMove","onMouseOut","onMouseOver","onMouseUp","onMouseWheel","onOffline","onOnline","onPageHide","onPagePaste","onPageShow","onPause","onPlay","onPlaying","onPopState","onProgress","onRateChange","onReset","onResize","onScroll","onSearch","onSeeked","onSeeking","onSelect","onStalled","onStorage","onSubmit","onSuspend","onTimeUpdate","onToggle","onUnload","onVolumeChange","onWaiting","onWheel"];for(w in x)v(x[w]);for(w in N)k(N[w]);for(w in O)k(O[w][1],O[w][0]);for(w in P)k(P[w]);b("as",(function(e){return this})),b("_getNewDocument",(function(){return document.createElement("DOTHTML-DOCUMENT")})),b("_getAnInstance",(function(){if(this.__document||this.__pendingCalls.length>0)return this;var e=new C(null,this.__classPrefix);return e.__if=this.__if,e})),b("_getLastChildOrNull",(function(){return this.__document&&this.__document.lastChild?this.__document.lastChild:null})),b("getLast",(function(){return this._getLastChildOrNull()})),b("getCurrent",(function(){let e;switch(f.__selectionMode){case t.SELECTOR_MODE:e=this.__document;break;case t.ATTRIBUTE_MODE:e=this.getLast()||this.__document}return e})),S.toString=function(){return this.__document?this.__document.innerHTML:""},S.ref=function(e){let t=this.getLast(),n=c.GlobalComponentStack.length;return t&&n>0&&(c.GlobalComponentStack[n-1].$refs[e]=t),this},b("_evalContent",(function(e,t){if(null==e||null==e)return null;if("string"==typeof e||"number"==typeof e||"boolean"==typeof e){let t=new C(this._getNewDocument(),this.__classPrefix);return t.__document.innerHTML=e,t.__document.childNodes}if(e instanceof Node)return e;if("[object Array]"===Object.prototype.toString.call(e)){let t=new C(this._getNewDocument(),this.__classPrefix);for(let n=0;n<e.length;n++)t._appendOrCreateDocument(e[n]);if(t.__document)return t.__document.childNodes}else{if((0,c.isF)(e))return this._evalContent(e(),t);if(e instanceof d.default)return this._evalContent(d.default.build(e));if(e instanceof C){for(let n=0;n<e.__pendingCalls.length;n++)t.push(e.__pendingCalls[n]);let n=this.__classPrefix;for(let t in e.__classedElements){let r=e.__classedElements[t];n?r.className="dot-"+(0,c.str)(n,16)+"-"+r.className:this.__classedElements.push(r)}if(e.__document)return e.__document.childNodes}}return null})),b("_appendOrCreateDocument",(function(e,t,n){var r=this;if(t&&n&&isNaN(n)&&n.parentNode!=t)throw"beforeNode is not in parentEl.";t=t||(n&&isNaN(n)?n.parentNode:null)||r.__document||r._getNewDocument(),isNaN(n)||(n=t.childNodes[n]);var a=r.__document===t?r:new C(t,r.__classPrefix);a.__if=r.__if;var i,o=[],s=(0,c.isF)(e);s&&f.__currentArgCallback.push(new h.ContentArgCallback(t,e));try{i=a._evalContent(e,o)}finally{s&&f.__currentArgCallback.pop()}for(var l=0;l<o.length;l++){var u=o[l],d=(n?n.previousSibling||t:null)||t.lastChild||t;d&&"DOCUMENT"!=d.tagName?"attr"==u.type?(0,c.isF)(u.params[0])?y(d,u.name,u.params[0],u.arg3):d.setAttribute(u.name,u.params[0]):"wait"==u.type&&u.callback():a.__pendingCalls.push(u)}if(null!=i)if(i instanceof NodeList)for(;i.length>0;)n?t.insertBefore(i[0],n):t.appendChild(i[0]);else n?t.insertBefore(i,n):t.appendChild(i);return a})),b("el",(function(e,n){var r=this,a=document.createElement(e),i=r.__document||r._getNewDocument();i.appendChild(a),n&&r._appendOrCreateDocument(n,a);var o=r.__document===i?r:new C(i,r.__classPrefix);if(n&&n instanceof C)for(var s in n.__classedElements)o.__classedElements.push(n.__classedElements[s]);return f.__selectionMode=t.ATTRIBUTE_MODE,o})),b("h",(function(e){var t=this,n=t._getNewDocument();new C(n,t.__classPrefix)._appendOrCreateDocument(e);for(var r=t.__document||t._getNewDocument();n.childNodes.length>0;)r.appendChild(n.childNodes[0]);return t.__document===r?t:new C(r,t.__classPrefix)})),b("t",(function(e){var t=document.createTextNode(e),n=this.__document||this._getNewDocument();return n.appendChild(t),new C(n,this.__classPrefix)})),b("attr",(function(e,t,n){var r=this;if((0,c.isF)(t)&&(0==e.indexOf("on")&&-1!=P.indexOf(e)?e=e.substring(2).toLowerCase():(f.__anonAttrFuncs[m]=t,t="dot.__anonAttrFuncs["+m+++"](arguments[0]);")),!r.__document){var a=r._getAnInstance();return a.__pendingCalls.push({type:"attr",name:e,params:[t],arg3:n}),a}var i=r.__document.childNodes,o=i[i.length-1];if(o&&o.setAttribute)if((0,c.isF)(t))y(o,e,t,n);else{if("object"==typeof t&&!(t instanceof l._Builder)){var s=t,u=function(){var e="";return(0,c.eachK)(s,(function(t,n){(n=(0,c.isF)(n)?n():n)&&(e+=" "+t)})),e.substring(1)};f.__currentArgCallback.push(new h.AttrArgCallback(o,e,u)),t=u(),f.__currentArgCallback.pop()}var d=o.getAttribute(e);d?d+=" ":d="",o.setAttribute(e,d+(void 0===t?e:t))}return r})),b("_appendSetElement",(function(e,t){var n=this;if(!e)return(0,u.default)("A",e),n;var r=document.getElementById(e);if(!r)return(0,u.default)("F",e),n;if(n.__document)for(t||(r.innerHTML="");n.__document.childNodes.length>0;)r.appendChild(n.__document.childNodes[0]);return n})),b("iterate",(function(e,t){for(var n=this,r=0;r<e;r++){let e=null;(0,c.isF)(t)&&(e=t(r)),n=n._appendOrCreateDocument(e)}return n})),b("each",(function(e,t,n){var r=this;if((0,c.isF)(e)){if(!n)return r.defer((function(n){n.each(e,t,!0)}));var a=e;f.__currentArgCallback.push(new h.ArrayArgCallback(r,t));try{e=a()}finally{f.__currentArgCallback.pop()}}if(e instanceof Array||e instanceof p.default)for(var i=0;i<e.length;i++)r=r._appendOrCreateDocument(t(e[i],i));else{var o=Object.keys(e);for(i=0;i<o.length;i++){var s=o[i];r=r._appendOrCreateDocument(t(e[s],s))}}return r})),S.customData=function(e,t){return this.attr("data-"+e,t)},S.class=function(e){var t=this.__classPrefix;if(t){var n="dot-"+(0,c.str)(t,16)+"-";if("string"==typeof e)e=n+e;else if("object"==typeof e){var r={};(0,c.eachK)(e,(function(e,t){r[n+e]=t})),e=r}}else{var a=this.getLast();a&&this.__classedElements.push(a)}return this.attr("class",e)},S.play=function(){let e=this.getCurrent();return e.play&&e.play(),this},S.pause=function(e){let t=this.getCurrent();return t.pause&&t.pause(),e&&(t.currentTime=0),this},S.stop=function(){return this.pause(!0)},S.setVal=function(e){let t=this.getCurrent();return t?(Array.isArray&&Array.isArray(e)||!Array.isArray&&e.join?e=e.join(""):null==e&&(e=""),"checkbox"==t.type||"radio"==t.type?t.checked=!!e:"OPTION"==t.tagName?t.selected=!!e:t.value=e,this):this},S.getVal=function(){var e=this.__lastNode||this.__document;if(e&&1===e.nodeType)return"checkbox"==e.type||"radio"==e.type?!!e.checked:"OPTION"==e.tagName?!!e.selected:e.value},b("when",(function(e,t,n){var r=this._getAnInstance();if((0,c.isF)(e)){n||(n=r.__conditionalArray=[e]);var a=n.length-1;r=function(e,t,n,r){var a=document.createTextNode(""),i=document.createTextNode(""),o=new h.ConditionalArgCallback(a,i,r,t);f.__currentArgCallback.push(o);var s=t();e=e._appendOrCreateDocument(a);for(var l=0;l<n.length;l++)n[l]();return o.lastValue=s,s&&(e=e._appendOrCreateDocument(r)),e=e._appendOrCreateDocument(i),f.__currentArgCallback.pop(),e}(r,(function(){for(var t=0;t<a;t++)if(n[t]())return!1;return!!e()}),n,t)}else e?(r=r._appendOrCreateDocument((0,c.isF)(t)?t():t)).__if=!0:r.__if=!1;return r})),b("otherwiseWhen",(function(e,t){if((0,c.isF)(e)){var n=this.__conditionalArray;return n||(0,u.default)("MC"),n.push(e),this.when(e,t,n)}return this.__if?this:this.when(e,t)})),b("otherwise",(function(e){var t=this.__conditionalArray;if(t){var n=function(){return!0};return t.push(n),this.when(n,e,t)}return this.__if?this:(this.__if=null,this._getAnInstance()._appendOrCreateDocument(e))})),b("script",(function(e){var t=this.getLast();return(0,c.sT)((function(){e(t)}),0),this})),b("wait",(function(e,t){var n=this.el(g),r=n.__document.lastChild;return(0,c.sT)((()=>{n._appendOrCreateDocument(t,null,r),r.parentElement.removeChild(r)}),e),n})),b("defer",(function(e){(0,c.isF)(e)||(0,u.default)("XF","defer");var t=this.el(g),n=t.__document.lastChild;return(0,c.sT)((()=>{e(f(n.parentElement)),n.parentElement.removeChild(n)}),0),t})),b("empty",(function(){if(this.__document){for(var e=[this.__document],t=!0,n=[];e.length>0;){var r=e.shift();if(r.childNodes.length>0)for(var a=0;a<r.childNodes.length;a++)e.push(r.childNodes[a]);!t&&n.push(r),t=!1}for(;n.length>0;)_(n.pop())}return this})),b("remove",(function(){this.empty(),_(this.__document)})),b("scopeClass",(function(e,t){null==e&&(e=c.ClassPrefix.next);var n=this;n.__classPrefix=e;var r=n.h(t);return n.__classPrefix=0,r})),S.bindTo=function(e){let t=f.__lastProp,n=f.__lastIndex,r=f.__lastComponent,a=this.getLast(),i=r.props[t];null!=n&&null!=n&&(i=i[n]);let o=this.setVal(i);return y(a,"change",(function(e){r.props[t]=f(a).as(f.input).getVal()})),r.__propContainer.bindings[t].push({element:a}),o},f.resetScopeClass=function(){return c.ClassPrefix.reset(),this},f.css=l.default,f.bus=s.default,f.__currentArgCallback=[],f.__document=null,f.__if=null,f.__pendingCalls=[],f.__anonAttrFuncs={},t.default=f},220:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.DotComponent=void 0;const a=r(n(150)),i=r(n(999));a.default.version="5.2.0",a.default.Component=i.default,t.default=a.default;var o=n(999);Object.defineProperty(t,"DotComponent",{enumerable:!0,get:function(){return r(o).default}})},177:(e,t)=>{var n;Object.defineProperty(t,"__esModule",{value:!0}),n=function(e,...t){throw{A:`Can't append "${(t=t||[])[0]}".`,CB:"Unable to build the same component twice. Ensure each component is only used once.",CU:"Invalid usage: a component should at least have a name and a builder function.","C#":`Component "${t[0]}" must return exactly one child node.`,F:`Element "${t[0]}" not found.`,MC:"Can't mix static conditions with dynamic conditional rendering.",R:"Router must be passed a JSON object that contains an 'routes' array containing objects with a 'path', 'title', and 'component'.",S:"SVG is not supported by DOThtml.",UE:`Unknown event name "${t[0]}".`,XS:"Expected a string.",XF:`Expected a function in "${t[0]}".`}[e]||"Unknown error."},t.default=n},351:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0});const r=n(669),a=new class{constructor(){this._callbacks={},this._checkAddEvent=function(e){var t=this._callbacks[e];return t||(this._callbacks[e]=t=[]),t}}on(e,t){this._checkAddEvent(e).push(t)}off(e,t){for(var n=this._checkAddEvent(e),r=n.length-1;n>=0;r--)n[r]==t&&n.splice(r,1)}emit(e,...t){var n=this._checkAddEvent(e);(0,r.eachK)(n,(function(e,n){n(...t)}))}flush(e){this._checkAddEvent(e).length=0}};t.default=a},969:(e,t)=>{function n(e){var t=this,n=[],r={itemadded:[],itemremoved:[],itemset:[],read:[]};function a(e){e in t||Object.defineProperty(t,e,{configurable:!0,enumerable:!0,get:function(){return i({type:"read",index:e,item:n[e]}),n[e]},set:function(t){n[e]!=t&&(n[e]=t,i({type:"itemset",index:e,item:t}))}})}function i(e){r[e.type].forEach((function(n){n.call(t,e)}))}Object.defineProperty(t,"addEventListener",{configurable:!1,enumerable:!1,writable:!1,value:function(e,t){if(!((e=(""+e).toLowerCase())in r))throw new Error("Invalid event name.");if("function"!=typeof t)throw new Error("Invalid handler.");r[e].push(t)}}),Object.defineProperty(t,"removeEventListener",{configurable:!1,enumerable:!1,writable:!1,value:function(e,t){if(!((e=(""+e).toLowerCase())in r))throw new Error("Invalid event name.");if("function"!=typeof t)throw new Error("Invalid handler.");for(var n=r[e],a=n.length;--a>=0;)n[a]===t&&n.splice(a,1)}}),Object.defineProperty(t,"push",{configurable:!1,enumerable:!1,writable:!1,value:function(){for(var e,t=0,r=arguments.length;t<r;t++)e=n.length,n.push(arguments[t]),a(e),i({type:"itemadded",index:e,item:arguments[t]});return n.length}}),Object.defineProperty(t,"pop",{configurable:!1,enumerable:!1,writable:!1,value:function(){if(n.length>-1){var e=n.length-1,r=n.pop();return delete t[e],i({type:"itemremoved",index:e,item:r}),r}}}),Object.defineProperty(t,"unshift",{configurable:!1,enumerable:!1,writable:!1,value:function(){for(var e=0,t=arguments.length;e<t;e++)n.splice(e,0,arguments[e]),a(n.length-1),i({type:"itemadded",index:e,item:arguments[e]});return n.length}}),Object.defineProperty(t,"shift",{configurable:!1,enumerable:!1,writable:!1,value:function(){if(n.length>-1){var e=n.shift();return delete t[n.length],i({type:"itemremoved",index:0,item:e}),e}}}),Object.defineProperty(t,"splice",{configurable:!1,enumerable:!1,writable:!1,value:function(e,r){var o,s=[];e=null==e?0:e<0?n.length+e:e,r=null==r?n.length-e:r>0?r:0;for(var l=[];r--;)o=n.splice(e,1)[0],s.push(o),delete t[n.length],l.push({type:"itemremoved",index:e+s.length-1,item:o});for(var u=l.length-1;u>=0;u--)i(l[u]);u=2;for(var c=arguments.length;u<c;u++)n.splice(e,0,arguments[u]),a(n.length-1),i({type:"itemadded",index:e,item:arguments[u]}),e++;return s}}),Object.defineProperty(t,"length",{configurable:!1,enumerable:!1,get:function(){return n.length},set:function(e){var r=Number(e),a=n.length;if(!(r%1==0&&r>=0))throw new RangeError("Invalid array length");return r<a?t.splice(r):r>a&&t.push.apply(t,new Array(r-a)),n.length=r,e}}),Object.getOwnPropertyNames(Array.prototype).forEach((function(e){e in t||Object.defineProperty(t,e,{configurable:!1,enumerable:!1,writable:!1,value:Array.prototype[e]})})),e instanceof Array&&t.push.apply(t,e)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n,n.prototype.length=0},170:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=n(669),i=r(n(856));class o extends i.default{constructor(e){super("angle"),e=e||"0deg",isNaN(e)||(e=`${Math.round(e)}deg`),this.angle=Number(e.match(a.floatRegex)[0]),this.units=e.split(a.floatRegex)[1]||"deg"}toString(){return this.angle+this.units}}t.default=o},834:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=r(n(856));class i extends a.default{constructor(e){if(super("color"),this.r=0,this.g=0,this.b=0,this.a=1,Array.isArray(e)&&1==e.length&&(e=e[0]),"number"==typeof e)this.b=255&e,e>>=8,this.g=255&e,e>>=8,this.r=255&e;else if("string"==typeof e)if(""==e||"none"==e||"initial"==e||"inherit"==e);else if("#"==e[0]){var t=e.split("#")[1];3==t.length?(this.r=Number("0x"+t[0]+t[0]),this.g=Number("0x"+t[1]+t[1]),this.b=Number("0x"+t[2]+t[2])):6==t.length&&(this.r=Number("0x"+t[0]+t[1]),this.g=Number("0x"+t[2]+t[3]),this.b=Number("0x"+t[4]+t[5]))}else if(0===e.toLowerCase().indexOf("rgb")){var n=e.split("(")[1],r=(n=n.split(")")[0]).split(",");3!=r.length&&4!=r.length||(this.r=Number(r[0]),this.g=Number(r[1]),this.b=Number(r[2]),this.a=Number(r[3]||1))}else{var a=0,i=0,o=0;switch(e.toLowerCase()){case"aliceblue":a=240,i=248,o=255;break;case"antiquewhite":a=250,i=235,o=215;break;case"aqua":case"cyan":a=0,i=255,o=255;break;case"aquamarine":a=127,i=255,o=212;break;case"azure":a=240,i=255,o=255;break;case"beige":a=245,i=245,o=220;break;case"bisque":a=255,i=228,o=196;break;case"black":a=0,i=0,o=0;break;case"blanchedalmond":a=255,i=235,o=205;break;case"blue":a=0,i=0,o=255;break;case"blueviolet":a=138,i=43,o=226;break;case"brown":a=165,i=42,o=42;break;case"burlywood":a=222,i=184,o=135;break;case"cadetblue":a=95,i=158,o=160;break;case"chartreuse":a=127,i=255,o=0;break;case"chocolate":a=210,i=105,o=30;break;case"coral":a=255,i=127,o=80;break;case"cornflowerblue":a=100,i=149,o=237;break;case"cornsilk":a=255,i=248,o=220;break;case"crimson":a=220,i=20,o=60;break;case"darkblue":a=0,i=0,o=139;break;case"darkcyan":a=0,i=139,o=139;break;case"darkgoldenrod":a=184,i=134,o=11;break;case"darkgray":case"darkgrey":a=169,i=169,o=169;break;case"darkgreen":a=0,i=100,o=0;break;case"darkkhaki":a=189,i=183,o=107;break;case"darkmagenta":a=139,i=0,o=139;break;case"darkolivegreen":a=85,i=107,o=47;break;case"darkorange":a=255,i=140,o=0;break;case"darkorchid":a=153,i=50,o=204;break;case"darkred":a=139,i=0,o=0;break;case"darksalmon":a=233,i=150,o=122;break;case"darkseagreen":a=143,i=188,o=143;break;case"darkslateblue":a=72,i=61,o=139;break;case"darkslategray":case"darkslategrey":a=47,i=79,o=79;break;case"darkturquoise":a=0,i=206,o=209;break;case"darkviolet":a=148,i=0,o=211;break;case"deeppink":a=255,i=20,o=147;break;case"deepskyblue":a=0,i=191,o=255;break;case"dimgray":case"dimgrey":a=105,i=105,o=105;break;case"dodgerblue":a=30,i=144,o=255;break;case"firebrick":a=178,i=34,o=34;break;case"floralwhite":a=255,i=250,o=240;break;case"forestgreen":a=34,i=139,o=34;break;case"fuchsia":case"magenta":a=255,i=0,o=255;break;case"gainsboro":a=220,i=220,o=220;break;case"ghostwhite":a=248,i=248,o=255;break;case"gold":a=255,i=215,o=0;break;case"goldenrod":a=218,i=165,o=32;break;case"gray":case"grey":a=128,i=128,o=128;break;case"green":a=0,i=128,o=0;break;case"greenyellow":a=173,i=255,o=47;break;case"honeydew":a=240,i=255,o=240;break;case"hotpink":a=255,i=105,o=180;break;case"indianred":a=205,i=92,o=92;break;case"indigo":a=75,i=0,o=130;break;case"ivory":a=255,i=255,o=240;break;case"khaki":a=240,i=230,o=140;break;case"lavender":a=230,i=230,o=250;break;case"lavenderblush":a=255,i=240,o=245;break;case"lawngreen":a=124,i=252,o=0;break;case"lemonchiffon":a=255,i=250,o=205;break;case"lightblue":a=173,i=216,o=230;break;case"lightcoral":a=240,i=128,o=128;break;case"lightcyan":a=224,i=255,o=255;break;case"lightgoldenrodyellow":a=250,i=250,o=210;break;case"lightgray":case"lightgrey":a=211,i=211,o=211;break;case"lightgreen":a=144,i=238,o=144;break;case"lightpink":a=255,i=182,o=193;break;case"lightsalmon":a=255,i=160,o=122;break;case"lightseagreen":a=32,i=178,o=170;break;case"lightskyblue":a=135,i=206,o=250;break;case"lightslategray":case"lightslategrey":a=119,i=136,o=153;break;case"lightsteelblue":a=176,i=196,o=222;break;case"lightyellow":a=255,i=255,o=224;break;case"lime":a=0,i=255,o=0;break;case"limegreen":a=50,i=205,o=50;break;case"linen":a=250,i=240,o=230;break;case"maroon":a=128,i=0,o=0;break;case"mediumaquamarine":a=102,i=205,o=170;break;case"mediumblue":a=0,i=0,o=205;break;case"mediumorchid":a=186,i=85,o=211;break;case"mediumpurple":a=147,i=112,o=219;break;case"mediumseagreen":a=60,i=179,o=113;break;case"mediumslateblue":a=123,i=104,o=238;break;case"mediumspringgreen":a=0,i=250,o=154;break;case"mediumturquoise":a=72,i=209,o=204;break;case"mediumvioletred":a=199,i=21,o=133;break;case"midnightblue":a=25,i=25,o=112;break;case"mintcream":a=245,i=255,o=250;break;case"mistyrose":a=255,i=228,o=225;break;case"moccasin":a=255,i=228,o=181;break;case"navajowhite":a=255,i=222,o=173;break;case"navy":a=0,i=0,o=128;break;case"oldlace":a=253,i=245,o=230;break;case"olive":a=128,i=128,o=0;break;case"olivedrab":a=107,i=142,o=35;break;case"orange":a=255,i=165,o=0;break;case"orangered":a=255,i=69,o=0;break;case"orchid":a=218,i=112,o=214;break;case"palegoldenrod":a=238,i=232,o=170;break;case"palegreen":a=152,i=251,o=152;break;case"paleturquoise":a=175,i=238,o=238;break;case"palevioletred":a=219,i=112,o=147;break;case"papayawhip":a=255,i=239,o=213;break;case"peachpuff":a=255,i=218,o=185;break;case"peru":a=205,i=133,o=63;break;case"pink":a=255,i=192,o=203;break;case"plum":a=221,i=160,o=221;break;case"powderblue":a=176,i=224,o=230;break;case"purple":a=128,i=0,o=128;break;case"rebeccapurple":a=102,i=51,o=153;break;case"red":a=255,i=0,o=0;break;case"rosybrown":a=188,i=143,o=143;break;case"royalblue":a=65,i=105,o=225;break;case"saddlebrown":a=139,i=69,o=19;break;case"salmon":a=250,i=128,o=114;break;case"sandybrown":a=244,i=164,o=96;break;case"seagreen":a=46,i=139,o=87;break;case"seashell":a=255,i=245,o=238;break;case"sienna":a=160,i=82,o=45;break;case"silver":a=192,i=192,o=192;break;case"skyblue":a=135,i=206,o=235;break;case"slateblue":a=106,i=90,o=205;break;case"slategray":case"slategrey":a=112,i=128,o=144;break;case"snow":a=255,i=250,o=250;break;case"springgreen":a=0,i=255,o=127;break;case"steelblue":a=70,i=130,o=180;break;case"tan":a=210,i=180,o=140;break;case"teal":a=0,i=128,o=128;break;case"thistle":a=216,i=191,o=216;break;case"tomato":a=255,i=99,o=71;break;case"turquoise":a=64,i=224,o=208;break;case"violet":a=238,i=130,o=238;break;case"wheat":a=245,i=222,o=179;break;case"white":a=255,i=255,o=255;break;case"whitesmoke":a=245,i=245,o=245;break;case"yellow":a=255,i=255,o=0;break;case"yellowgreen":a=154,i=205,o=50}this.r=a,this.g=i,this.b=o}else 3!=e.length&&4!=e.length||(this.r=e[0],this.g=e[1],this.b=e[2],4==e.length&&(this.a=e[3]))}toString(){var e=Math.round,t=Math.max,n=Math.min;return 1==this.a?"rgb("+n(255,t(0,e(this.r)))+", "+n(255,t(0,e(this.g)))+", "+n(255,t(0,e(this.b)))+")":"rgba("+n(255,t(0,e(this.r)))+", "+n(255,t(0,e(this.g)))+", "+n(255,t(0,e(this.b)))+", "+n(1,t(0,this.a))+")"}}t.default=i},392:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=n(669),i=r(n(856));class o extends i.default{constructor(e){super("complex"),this.parts=(" "+e+" ").split(a.floatRegex),this.numbers=e.match(a.floatRegex)}toString(){for(var e=this.parts[0],t=0;t<this.numbers.length;t++)e+=this.numbers[t]+this.parts[t+1];return e}}t.default=o},856:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.default=class{constructor(e){this.type=e}}},212:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=n(669),i=r(n(856)),o=r(n(287)),s=r(n(196)),l=r(n(834));class u extends i.default{constructor(e){super("filter"),this.filters=[],"string"!=typeof e?(0,a.isF)(e)&&e(this):this.simpleValue=e}toString(){if(this.simpleValue)return this.simpleValue;for(var e="",t=0;t<this.filters.length;t++){var n=this.filters[t];e+=n.filter+"(";for(var r=0;r<n.args.length;r++)e+=n.args[r].toString()+" ";e=e.trim()+") "}return e.trim()}appendFilterString(e,t){return this.filters.push({filter:e,args:t}),this}blur(e){return this.appendFilterString("blur",[new o.default(e)])}brightness(e){return this.appendFilterString("brightness",[new s.default(e)])}contrast(e){return this.appendFilterString("contrast",[new s.default(e)])}dropShadow(e,t,n,r){return this.appendFilterString("drop-shadow",[new o.default(e),new o.default(t),new o.default(n),new l.default(r)])}grayscale(e){return this.appendFilterString("grayscale",[new s.default(e)])}hueRotate(e){return this.appendFilterString("hue-rotate",[new s.default(e)])}invert(e){return this.appendFilterString("invert",[new s.default(e)])}opacity(e){return this.appendFilterString("opacity",[new s.default(e)])}sepia(e){return this.appendFilterString("sepia",[new s.default(e)])}saturate(e){return this.appendFilterString("saturate",[new s.default(e)])}}t.default=u},287:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=n(669),i=r(n(856));class o extends i.default{constructor(e){super("length"),e=e||"0px",isNaN(e)||(e=Math.round(e)+"px"),this.length=Number(e.match(a.floatRegex)[0]),this.units=e.split(a.floatRegex)[1]||"px"}toString(){return`${this.length}${this.units}`}}t.default=o},70:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=r(n(856));class i extends a.default{constructor(e){super("number"),this.value=Number(e)}toString(){return this.value}}t.default=i},196:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=r(n(287));class i extends a.default{constructor(e){super(isNaN(e)?e:`${e}%`)}}t.default=i},939:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=n(669),i=n(718),o=r(n(170)),s=r(n(856)),l=r(n(287));class u extends s.default{constructor(e){super("transformation"),this.transformations=[],"string"!=typeof e?(0,a.isF)(e)&&e(this):this.simpleValue=e}toString(){if(this.simpleValue)return this.simpleValue;for(var e="",t=0;t<this.transformations.length;t++){var n=this.transformations[t];e+=n.transformation+"(";for(var r=0;r<n.args.length;r++)e+=n.args[r].toString()+",";e=e.substring(0,e.length-1),e+=") "}return e.trim()}appendTransformString(e,t){return this.transformations.push({transformation:e,args:t}),this}matrix3d(e,t,n,r,a,i,o,s,l,u,c,d,h,p,f,g){return this.appendTransformString("matrix3d",arguments)}matrix(e,t,n,r,a,i){return this.appendTransformString("matrix",arguments)}translate(e,t){return 1==arguments.length?this.appendTransformString("translate",[new l.default(e)]):this.appendTransformString("translate",[new l.default(e),new l.default(t)])}translate3d(e,t,n){return this.appendTransformString("translate3d",[new l.default(e),new l.default(t),new l.default(n)])}translateX(e){return this.appendTransformString("translateX",[new l.default(e)])}translateY(e){return this.appendTransformString("translateY",[new l.default(e)])}translateZ(e){return this.appendTransformString("translateZ",[new l.default(e)])}scale(e,t){return this.appendTransformString("scale",[e,t??1])}scale3d(e,t,n){return this.appendTransformString("scale3d",[e,t,n])}scaleX(e){return this.appendTransformString("scaleX",[e])}scaleY(e){return this.appendTransformString("scaleY",[e])}scaleZ(e){return this.appendTransformString("scaleZ",[e])}rotate(e){return this.appendTransformString("rotate",[new o.default(e)])}rotate3d(e,t,n,r){return this.appendTransformString("rotate3d",[e,t,n,new o.default(r)])}rotate3dDeg(e,t,n,r){return this.rotate3d(e,t,n,r)}rotate3dRad(e,t,n,r){return this.rotate3d(e,t,n,`${r}rad`)}rotate3dGrad(e,t,n,r){return this.rotate3d(e,t,n,`${r}grad`)}rotate3dTurn(e,t,n,r){return this.rotate3d(e,t,n,`${r}turn`)}rotateX(e){return this.appendTransformString("rotateX",[new o.default(e)])}rotateY(e){return this.appendTransformString("rotateY",[new o.default(e)])}rotateZ(e){return this.appendTransformString("rotateZ",[new o.default(e)])}skew(e,t){return 1==arguments.length?this.appendTransformString("skew",[new o.default(e)]):this.appendTransformString("skew",[new o.default(e),new o.default(t)])}skewX(e){return this.appendTransformString("skewX",[new o.default(e)])}skewY(e){return this.appendTransformString("skewY",[new o.default(e)])}perspective(e){return this.appendTransformString("perspective",[new l.default(e)])}}t.default=u;const c="translate|translate3d|translateX|translateY|translateZ|perspective".split("|"),d="rotate|rotateX|rotateY|rotateZ|skew|skewX|skewY".split("|");for(let e=0;e<c.length;e++){let t=c[e];for(let e=0;e<i.AllLengthUnits.length;e++){let n=i.AllLengthUnits[e];u.prototype[t+(n.jsName||n.unit)]=function(){for(var e=0;e<arguments.length;e++)arguments[e]=arguments[e]+n.unit.toLowerCase();return u.prototype[t].apply(this,arguments)}}}for(let e=0;e<d.length;e++){let t=d[e];for(let e=0;e<i.AllAngleUnits.length;e++){let n=i.AllAngleUnits[e];u.prototype[t+n.unit]=function(){for(var e=0;e<arguments.length;e++)arguments[e]=arguments[e]+n.unit.toLowerCase();return u.prototype[t].apply(this,arguments)}}}},761:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=r(n(856));class i extends a.default{constructor(e){super("unknown"),this.value=e}toString(){return this.value}}t.default=i},300:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const a=r(n(856));class i extends a.default{constructor(e){if(super("url"),this.url=null,!e||0==e.length||1==e.length&&""==e[0]||"none"==e[0]||"initial"==e[0]||"inherit"==e[0])this.url=null;else{this.url=[];for(var t=0;t<e.length;t++)if(0===e[t].toLowerCase().indexOf("url")){var n=e[t].substring(e[t].indexOf("("),e[t].lastIndexOf(")")).trim();(n.indexOf('"')&&n.lastIndexOf('"')==n.length-1||n.indexOf("'")&&n.lastIndexOf("'")==n.length-1)&&(n=n.substring(1,n.length-1)),this.url.push(n)}else this.url.push(e[t])}}toString(){if(this.url){for(var e=[],t=0;t<this.url.length;t++)e.push('url("'+this.url[t]+'")');return e.join(", ")}return"none"}}t.default=i},782:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t._Builder=void 0;const a=n(718),i=r(n(170)),o=r(n(834)),s=r(n(392)),l=r(n(287)),u=r(n(70)),c=r(n(939)),d=r(n(761)),h=r(n(300)),p=n(669),f=r(n(212)),g="data-dot-static-styles",m=new class{constructor(){this.fxInterval=1e3/60,this.lastBuilder=null,this.scopeStack=[],this.globalStyleElement=null}animateFull(e,t,n,r,a,i,o,s,l,u,c){if(!c||e.style[t]==c)if(s-o>0){switch(n){case"color":var d=Math.round((0,p.numberStep)(r.r,a.r,o,s,l)),h=Math.round((0,p.numberStep)(r.g,a.g,o,s,l)),f=Math.round((0,p.numberStep)(r.b,a.b,o,s,l)),g=b.formatNumberValue((0,p.numberStep)(r.a,a.a,o,s,l));b(e)[t](d,h,f,g);break;case"length":b(e)[t](b.formatNumberValue((0,p.numberStep)(r.length,a.length,o,s,l),r.units)+r.units);break;case"transformation":for(var _="",y=0;y<r.transformations.length;y++){var v=r.transformations[y],k=a.transformations[y];_+=v.transformation+"(";for(var w=0;w<v.args.length;w++){var C=v.args[w],S=k.args[w],x=isNaN(C)?C.length||C.angle||C.value||0:C,N=isNaN(S)?S.length||S.angle||S.value||0:S,O=isNaN(C)?C.units:"";_+=b.formatNumberValue((0,p.numberStep)(x,N,o,s,l),O)+O+","}_=_.substring(0,_.length-1),_+=") "}b(e)[t](_);break;default:switch(r.type){case"number":b(e)[t](b.formatNumberValue((0,p.numberStep)(r.value,a.value,o,s,l)));break;case"complex":var P="";for(y=0;y<r.numbers.length;y++)P+=r.parts[y],P+=b.formatNumberValue((0,p.numberStep)(r.numbers[y],a.numbers[y],o,s,l));P+=r.parts[r.parts.length-1],b(e)[t](P);break;default:console.warn("Unexpected data type for animation.")}}var A=window.performance&&window.performance.now?window.performance.now():null,D=e.style[t],T=function(c){var d=A?window.performance.now()-A:m.fxInterval;m.animateFull(e,t,n,r,a,i,o+d,s,l,u,D)};window.requestAnimationFrame?window.requestAnimationFrame(T):window.setTimeout(T,m.fxInterval)}else b(e)[t](i),u&&u()}extendDothtml(e,t,n){let r=y.prototype;if(r[t]=function(){if(0==arguments.length)return this;for(var r=[],a=0;a<arguments.length;a++)r.push(arguments[a]);var i=m.convertStyleIntoDotCssObject(r,n).toString(),o=e+":"+i+";";if(this.currentCss+=o,this.targets)for(var s=0;s<this.targets.length;s++){var l=this.targets[s];"STYLE"==l.tagName?l.innerHTML=l.innerHTML.substring(0,l.innerHTML.length-1)+e+":"+i+";}":l.style[t]=i}return this},m.addPropFunctionToDotCssObject(t),"length"==n)for(var i=0;i<a.AllLengthUnits.length;i++){var o=a.AllLengthUnits[i];!function(e){r[t+(e.jsName||e.unit)]=function(){for(var n=0;n<arguments.length;n++)arguments[n]=arguments[n]+e.unit.toLowerCase();return r[t].apply(this,arguments)}}(o),m.addPropFunctionToDotCssObject(t+(o.jsName||o.unit))}for(var s in r[t].type=n,r[t].jsFriendlyProp=t,v.prototype)void 0===r[t][s]&&(r[t][s]=v.prototype[s])}convertStyleIntoDotCssObject(e,t){return e instanceof Array||(e=[e]),"color"==t?new o.default(e):"url"==t?new h.default(e):"length"!=t||isNaN(e[0])&&(-1!=e[0].indexOf(" ")||e[0].replace(p.floatRegex,"")==e[0])?"transformation"==t?new c.default(e[0]).toString():"filter"==t?new f.default(e[0]).toString():""===e[0]||isNaN(e[0])&&(""+e[0]).replace(p.floatRegex,"")==e[0]?new d.default(e[0]):isNaN(e[0])?new s.default(e[0]):new u.default(e[0]):new l.default(e[0])}compareComplexDataTypes(e,t){if("complex"!=e.type||"complex"!=t.type)return!1;if(e.numbers.length!=t.numbers.length)return!1;if(e.parts.length!=t.parts.length)return!1;for(var n=0;n<e.parts.length;n++)if(e.parts[n]!=t.parts[n])return!1;return!0}addPropFunctionToDotCssObject(e){b[e]=function(){var t=new y;return t[e].apply(t,arguments)}}computedStyleOrActualStyle(e,t){return window.getComputedStyle(e)[t]||e.style[t]}modDeg(e){return e<0&&(e=360- -e%360),e%360}},b=function(e){var t=null;if(e){if("string"==typeof e)if(e.length>2&&e.indexOf("{}")==e.length-2)e=e.substring(0,e.length-2),m.globalStyleElement||(m.globalStyleElement=document.createElement("style"),document.head.appendChild(m.globalStyleElement)),(t=[m.globalStyleElement])[0].innerHTML+=e+"{}\r\n";else{var n=m.scopeStack[0];t=n&&n.parentNode&&n.querySelectorAll?_(e,n):document.querySelectorAll(e)}(e instanceof NodeList||e instanceof Array)&&(t=e),e instanceof Node&&(t=[e])}return m.lastBuilder=new y(t),m.lastBuilder};function _(e,t){for(var n=Array.from(t.querySelectorAll(e)),r=0;r<n.length;r++){var a=n[r];if(a.__dothtml_component){n.splice(r,1),r--;for(var i=a.querySelectorAll(e),o=0;o<i.length;o++){let e=i[o];n.splice(n.indexOf(e,r+1),1)}}}var s=Array.from(t.parentNode.querySelectorAll(e)),l=s.indexOf(t);return-1!=l&&n.unshift(s[l]),n}b.version="0.16.0";class y{constructor(e){this.currentCss="",this.targets=e??null}toString(){return this.currentCss}hide(e){if(this.targets){var t=arguments[0]||{},n=t,r=t,a={};if(a.duration=r.duration||(isNaN(n)?0:n)||0,a.complete=r.complete||("function"==typeof arguments[1]?arguments[1]:"function"==typeof arguments[2]?arguments[2]:function(){}),a.hideStyle=r.hideStyle||"normal",a.animationStyle=r.animationStyle||("string"==typeof arguments[1]?arguments[1]:"ease"),a.duration>0){let e=0,t=0,n=this.targets.length;for(let r=0;r<this.targets.length;r++){let i,o=this.targets[r].style.width,s=this.targets[r].style.height,l=this.targets[r].style.opacity;i=l&&""!==l?Number(l):1;let u=this.targets[r].style.overflow;"fade"!=a.hideStyle&&(this.targets[r].style.overflow="hidden",t+=2,function(r,i,o,s,l){b(i).width.animate(0,a.duration,a.animationStyle,(function(){b(i).display("none").width(o).overflow(l),e++,e>=t*n&&a.complete(r)})),b(i).height.animate(0,a.duration,a.animationStyle,(function(){b(i).display("none").height(s),e++,e>=t*n&&a.complete(r)}))}(this,this.targets[r],o,s,u)),"shrink"!=a.hideStyle&&(t++,function(r,i,o){b(i).opacity.animate(0,a.duration,a.animationStyle,(function(){b(i).display("none").opacity(o),e++,e>=t*n&&a.complete(r)}))}(this,this.targets[r],i))}}else b(this.targets).display("none"),a.complete(this)}return this}show(e){if(this.targets){let e=arguments[0]||{},t=e,n=e,r={};if(r.duration=n.duration||(isNaN(t)?0:t)||0,r.display=n.display||"block",r.opacity=n.opacity,r.width=n.width||null,r.height=n.height||null,r.complete=n.complete||("function"==typeof arguments[1]?arguments[1]:"function"==typeof arguments[2]?arguments[2]:function(){}),r.showStyle=n.showStyle||"normal",r.animationStyle=n.animationStyle||("string"==typeof arguments[1]?arguments[1]:"ease"),!(r.duration>0))return b(this.targets).display(r.display);{let e=0,t=this.targets.length,n=0;for(let a=0;a<this.targets.length;a++){let i=r.opacity;if(void 0===r.opacity&&(i=parseFloat(this.targets[a].style.opacity)||1),"fade"!=r.showStyle){n+=2;let i=r.width||this.targets[a].style.width,o=r.height||this.targets[a].style.height;b(this.targets[a]).width(0),b(this.targets[a]).height(0),b(this.targets[a]).width.animate(i,r.duration,r.animationStyle,(function(){e++,e>=t*n&&r.complete()})),b(this.targets[a]).height.animate(o,r.duration,r.animationStyle,(function(){e++,e>=t*n&&r.complete()}))}b(this.targets[a]).opacity(0),b(this.targets[a]).display(r.display),"grow"!=r.showStyle&&(n++,b(this.targets[a]).opacity.animate(i,r.duration,r.animationStyle,(function(){e++,e==t*n&&r.complete()})))}}}return this}fadeOut(e,t){return this.hide({duration:isNaN(e)?400:Number(e),hideStyle:"fade",complete:t})}fadeIn(e,t){return this.show({duration:isNaN(e)?400:Number(e),showStyle:"fade",complete:t})}}t._Builder=y,b.prototype.toString=y.prototype.toString;class v{constructor(){this.apply=Function.apply,this.call=Function.call,this.type=null,this.jsFriendlyProp=null}toString(){if(m.lastBuilder.targets){let e=null;if(m.lastBuilder.targets.length>1){e=[];for(let t=0;t<m.lastBuilder.targets.length;t++)e.push(m.lastBuilder.targets[t].style[this.jsFriendlyProp])}else e=m.lastBuilder.targets[0].style[this.jsFriendlyProp];return e}return null}val(){if(m.lastBuilder.targets){let e=null;if(m.lastBuilder.targets.length>1){e=null;for(let t=0;t<m.lastBuilder.targets.length;t++)m.lastBuilder.targets[0].style[this.jsFriendlyProp]?e.push(m.convertStyleIntoDotCssObject(m.lastBuilder.targets[t].style[this.jsFriendlyProp],this.type)):e.push(null)}else e=m.lastBuilder.targets[0].style[this.jsFriendlyProp]?m.convertStyleIntoDotCssObject(m.lastBuilder.targets[0].style[this.jsFriendlyProp],this.type):null;return e}return null}animate(e,t,n,r){if(t=isNaN(t)?400:t||0,m.lastBuilder&&m.lastBuilder.targets){!r&&n&&n.call&&n.apply&&(r=n,n=void 0);for(let a=0;a<m.lastBuilder.targets.length;a++){let o=m.lastBuilder.targets[a],s=null,u=null,c=null;if(u=m.convertStyleIntoDotCssObject(e,this.type),"transformation"==this.type&&(s=m.convertStyleIntoDotCssObject(o.style[this.jsFriendlyProp],this.type)),s||(s=m.convertStyleIntoDotCssObject(m.computedStyleOrActualStyle(o,this.jsFriendlyProp),this.type)),c=u.toString(),"length"==this.type){if(s.units!=u.units)if(0==s.length)s.units=u.units,s.length=0;else if(0==u.length)u.units=s.units,u.length=0;else{let e=b.lengthToPx(s.toString(),this.jsFriendlyProp,o),t=b.lengthToPx(u.toString(),this.jsFriendlyProp,o);s.length=e,s.units="px",u.length=t,u.units="px"}}else if("color"==this.type);else if("transformation"==this.type){let e="",t="",n=s.transformations.length-1,r=u.transformations.length-1;for(;n>=0||r>=0;){let o="",c=null,d=null;if(n>=0&&r>=0&&s.transformations[n].transformation==u.transformations[r].transformation){let e=s.transformations[n],t=u.transformations[r];o=e.transformation,c=e.args,d=t.args,n--,r--}else if(n>=r){let e=s.transformations[n];if(o=e.transformation,c=e.args,"matrix"==o)d=[1,0,0,1,0,0];else if("matrix3d"==o)d=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];else{let e=-1==o.indexOf("scale")?0:1;d=[];for(let t=0;t<c.length;t++)d.push(isNaN(c[t])?isNaN(c[t].angle)?isNaN(c[t].length)?0:new l.default(0):new i.default(0):e)}n--}else{let e=u.transformations[r];if(o=e.transformation,d=e.args,"matrix"==o)c=[1,0,0,1,0,0];else if("matrix3d"==o)c=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];else{let e=-1==o.indexOf("scale")?0:1;c=[];for(let t=0;t<d.length;t++)c.push(isNaN(d[t])?isNaN(d[t].angle)?isNaN(d[t].length)?0:new l.default(0):new i.default(0):e)}r--}if(e=") "+e,t=") "+t,-1!=o.indexOf("rotate")){let e=c[c.length-1].angle,t=d[d.length-1].angle,n=b.angleSubtract(t,e);c[c.length-1].angle=t-n}for(let n=c.length-1;n>=0;n--)e=","+c[a]+e,t=","+d[a]+t;e=o+"("+e.substring(1),t=o+"("+t.substring(1)}s=m.convertStyleIntoDotCssObject(e,"transformation"),u=m.convertStyleIntoDotCssObject(t,"transformation")}else if("number"==s.type&&"number"==u.type);else{if("complex"!=s.type||"complex"!=u.type){console.warn("Couldn't animate "+this.jsFriendlyProp+". Not a recognizable length, color, or number.");continue}if(!m.compareComplexDataTypes(s,u)){console.warn("Couldn't animate "+this.jsFriendlyProp+". Value mismatch.");continue}}m.animateFull(o,this.jsFriendlyProp,s.type||this.type,s,u,c,m.fxInterval,t,n||"ease",r)}}return m.lastBuilder}}b.formatNumberValue=function(e,t){return"px"===t?Math.round(e):Math.round(100*e)/100};const k={color:"color|background-Color|border-Bottom-Color|border-Color|border-Left-Color|border-Right-Color|border-Top-Color|text-Decoration-Color|outline-Color|column-Rule-Color",length:"background-Size|block-Size|border-Bottom-Left-Radius|border-Bottom-Right-Radius|border-Bottom-Width|border-Image-Width|border-Left-Width|border-Radius|border-Right-Width|border-Top-Left-Radius|border-Top-Right-Radius|border-Top-Width|border-Width|bottom|height|left|margin|margin-Bottom|margin-Left|margin-Right|margin-Top|max-Height|max-Width|min-Height|min-Width|padding|padding-Bottom|padding-Left|padding-Right|padding-Top|right|top|width|line-Height|flex-Basis|font-Size",url:"background-Image|border-Image|list-Style-Image|content|image-Orientation",transformation:"transform",filter:"filter|backdrop-Filter",misc:"appearance|aspect-Ratio|opacity|background|background-Attachment|background-Blend-Mode|background-Position|background-Repeat|background-Clip|background-Origin|border|border-Bottom|border-Bottom-Style|border-Image-Outset|border-Image-Repeat|border-Image-Slice|border-Image-Source|border-Left|border-Left-Style|border-Right|border-Right-Style|border-Style|border-Top|border-Top-Style|box-Decoration-Break|box-Shadow|clear|clip|display|float|overflow|box|overflow-X|overflow-Y|position|visibility|vertical-Align|z-Index|align-Content|align-Items|align-Self|flex|flex-Basis|flex-Direction|flex-Flow|flex-Grow|flex-Shrink|flex-Wrap|grid|grid-Area|grid-Auto-Columns|grid-auto-Rows|grid-Column|grid-Column-End|grid-Column-Gap|grid-Column-Start|grid-Gap|grid-Row|grid-Row-End|grid-Row-Gap|grid-Row-Start|grid-Template|grid-Template-Areas|grid-Template-Columns|grid-Template-Rows|justify-Content|order|hanging-Punctuation|hyphens|letter-Spacing|line-Break|overflow-Wrap|tab-Size|text-Align|text-Align-Last|text-Combine-Upright|text-Indent|text-Justify|text-Transform|white-Space|word-Break|word-Spacing|word-Wrap|text-Decoration|text-Decoration-Line|text-Decoration-Style|text-Shadow|text-Underline-Position|font|font-Family|font-Feature-Settings|font-Kerning|font-Language-Override|font-Size-Adjust|font-Stretch|font-Style|font-Synthesis|font-Variant|font-Variant-Alternates|font-Variant-Caps|font-Variant-East-Asian|font-Variant-Ligatures|font-Variant-Numeric|font-Variant-Position|font-Weight|direction|text-Orientation|text-Combine-Upright|unicode-Bidi|user-Select|writing-Mode|border-Collapse|border-Spacing|caption-Side|empty-Cells|table-Layout|counter-Increment|counter-Reset|list-Style|list-Style-Position|list-Style-Type|animation|animation-Delay|animation-Direction|animation-Duration|animation-Fill-Mode|animation-Iteration-Count|animation-Name|animation-Play-State|animation-Timing-Function|backface-Visibility|perspective2d|perspective-Origin|transform-Origin|transform-Style|transition|transition-Property|transition-Duration|transition-Timing-Function|transition-Delay|box-Sizing|cursor|ime-Mode|nav-Down|nav-Index|nav-Left|nav-Right|nav-Up|outline|outline-Offset|outline-Style|outline-Width|resize|text-Overflow|break-After|break-Before|break-Inside|column-Count|column-Fill|column-Gap|column-Rule|column-Rule-Style|column-Rule-Width|column-Span|column-Width|columns|widows|orphans|page-Break-After|page-Break-Before|page-Break-Inside|marks|quotes|image-Rendering|image-Resolution|object-Fit|object-Position|mask|mask-Type|mark|mark-After|mark-Before|phonemes|rest|rest-After|rest-Before|voice-Balance|voice-Duration|voice-Pitch|voice-Pitch-Range|voice-Rate|voice-Stress|voice-Volume|marquee-Direction|marquee-Play-Count|marquee-Speed|marquee-Style|pointer-Events"};for(var w in b.matrixMultiply3D=function(e,t){if(16!=e.length||16!=t.length)throw"3D matrices must be arrays of 16 length.";for(var n=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],r=0;r<4;r++)for(var a=0;a<4;a++)for(var i=0;i<4;i++)n[r+4*a]+=Number(e[r+4*i])*Number(t[i+4*a]);return n},b.cacheScopedStaticStyles=function(e){let t=_("*",e);for(let e of t)e.hasAttribute("style")&&e.setAttribute(g,e.getAttribute("style"))},b.clearDynamicStyles=function(e){let t=_("*",e);for(let e of t)e.removeAttribute("style"),e.hasAttribute(g)&&e.setAttribute("style",e.getAttribute(g))},b.scopeToEl=function(e){return m.scopeStack.unshift(e),this},b.unscope=function(){return m.scopeStack.shift(),this},k){let e=k[w].split("|");for(var C in e)m.extendDothtml(e[C].toLowerCase(),e[C].replace(new RegExp("-","g"),""),w)}t.default=b},718:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AllAngleUnits=t.AllLengthUnits=void 0,t.AllLengthUnits=[{unit:"Em"},{unit:"Ex"},{unit:"Ch"},{unit:"Rem"},{unit:"Vw"},{unit:"Vh"},{unit:"Vmin"},{unit:"Vmax"},{unit:"%",jsName:"P"},{unit:"Cm"},{unit:"Mm"},{unit:"In"},{unit:"Px"},{unit:"Pt"},{unit:"Pc"}],t.AllAngleUnits=[{unit:"Deg"},{unit:"Grad"},{unit:"Rad"},{unit:"Turn"}]}},t={},n=function n(r){var a=t[r];if(void 0!==a)return a.exports;var i=t[r]={exports:{}};return e[r].call(i.exports,i,i.exports,n),i.exports}(220);module.exports=n})();

package/lib/styling/css-types.ts/css-data-type.d.ts

@@ -1,4 +1,4 @@
-export declare type CssDataTypeToken = "url" | "number" | "length" | "angle" | "color" | "transformation" | "complex" | "unknown";
+export declare type CssDataTypeToken = "url" | "number" | "length" | "angle" | "color" | "transformation" | "filter" | "complex" | "unknown";
 export default abstract class CssDataType {
     type: CssDataTypeToken;
     constructor(type: CssDataTypeToken);

package/lib/styling/css-types.ts/css-filter.d.ts

@@ -0,0 +1,22 @@
+import { AngleUnits, ColorFormat, NumericLength, Percentage } from "../i-dotcss";
+import CssDataType from "./css-data-type";
+export default class CssFilter extends CssDataType {
+    simpleValue: string;
+    filters: Array<{
+        filter: string;
+        args: Array<any>;
+    }>;
+    constructor(value: any);
+    toString(): string;
+    private appendFilterString;
+    blur(v: NumericLength): this;
+    brightness(v: Percentage): this;
+    contrast(v: Percentage): this;
+    dropShadow(x: NumericLength, y: NumericLength, blur: NumericLength, color: ColorFormat): this;
+    grayscale(v: Percentage): this;
+    hueRotate(v: AngleUnits): this;
+    invert(v: Percentage): this;
+    opacity(v: Percentage): this;
+    sepia(v: Percentage): this;
+    saturate(v: Percentage): this;
+}

package/lib/styling/css-types.ts/css-percentage.d.ts

@@ -0,0 +1,5 @@
+import CssLength from "./css-length";
+export default class CssPercentage extends CssLength {
+    length: number;
+    constructor(value: string | number);
+}

package/lib/styling/i-dotcss.d.ts

@@ -1,4 +1,4 @@
-export declare type BasicCommonValues = "inherit" | "initial" | "unset";
+export declare type BasicCommonValues = "inherit" | "initial" | "unset" | "revert" | "revert-layer";
 export declare type AbsoluteUnits = "cm" | "mm" | "in" | "px" | "pt" | "pc";
 export declare type RelativeUnits = "em" | "ex" | "ch" | "rem" | "vw" | "vh" | "vmin" | "vmax" | "%";
 export declare type AllUnits = AbsoluteUnits | RelativeUnits;
@@ -7,6 +7,8 @@ export declare type UrlType = `url('${string}')`;
 export declare type NumericLength = number | `${number}${AllUnits}`;
 export declare type AngleUnits = "deg" | "turn" | "rad" | "grad";
 export declare type NumericAngle = number | `${number}${AngleUnits}`;
+export declare type Percentage = number | `${number}%`;
+export declare type AppearanceValues = BasicCommonValues | "none" | "menulist-button" | "textfield" | "button" | "searchfield" | "textarea" | "push-button" | "slider-horizontal" | "checkbox" | "radio" | "square-button" | "menulist" | "listbox" | "meter" | "progress-bar" | "scrollbarbutton-up" | "button-bevel" | "media-mute-button" | "caret";
 export declare type BackgroundAttachmentValues = BasicCommonValues | "scroll" | "fixed" | "local";
 export declare type BackgroundRepeatValues = BasicCommonValues | "no-repeat" | "repeat" | "space" | "round";
 export declare type BackgroundOriginValues = BasicCommonValues | "padding-box" | "border-box" | "content-box";
@@ -61,7 +63,7 @@ export interface IDotcssProp {
     textDecorationColor: IDotcssAnimatableColor;
     outlineColor: IDotcssAnimatableColor;
     columnRuleColor: IDotcssAnimatableColor;
-    backgroundSize: ((value: BasicCommonValues) => IDotcssProp) | IDotcssAnimatable<BackgroundSizeValues>;
+    backgroundSize: IDotcssAnimatable<BackgroundSizeValues>;
     backgroundSizeCm: IDotcssAnimatable<number>;
     backgroundSizeCh: IDotcssAnimatable<number>;
     backgroundSizeEm: IDotcssAnimatable<number>;
@@ -77,6 +79,22 @@ export interface IDotcssProp {
     backgroundSizeVw: IDotcssAnimatable<number>;
     backgroundSizeVMax: IDotcssAnimatable<number>;
     backgroundSizeVMin: IDotcssAnimatable<number>;
+    blockSize: IDotcssAnimatable<NumericLength>;
+    blockSizeCm: IDotcssAnimatable<number>;
+    blockSizeCh: IDotcssAnimatable<number>;
+    blockSizeEm: IDotcssAnimatable<number>;
+    blockSizeEx: IDotcssAnimatable<number>;
+    blockSizeIn: IDotcssAnimatable<number>;
+    blockSizeMm: IDotcssAnimatable<number>;
+    blockSizeP: IDotcssAnimatable<number>;
+    blockSizePc: IDotcssAnimatable<number>;
+    blockSizePt: IDotcssAnimatable<number>;
+    blockSizePx: IDotcssAnimatable<number>;
+    blockSizeRem: IDotcssAnimatable<number>;
+    blockSizeVh: IDotcssAnimatable<number>;
+    blockSizeVw: IDotcssAnimatable<number>;
+    blockSizeVMax: IDotcssAnimatable<number>;
+    blockSizeVMin: IDotcssAnimatable<number>;
     borderBottomLeftRadius: IDotcssAnimatable<NumericLength>;
     borderBottomLeftRadiusCm: IDotcssAnimatable<number>;
     borderBottomLeftRadiusCh: IDotcssAnimatable<number>;
@@ -642,7 +660,11 @@ export interface IDotcssProp {
     listStyleImage: (value: BackgroundImageFormat) => IDotcssProp;
     content: (value: BasicCommonValues | UrlType) => IDotcssProp;
     transform: (transformOrTransformBuilder: BasicCommonValues | TransformationBuilder) => IDotcssProp;
+    filter: (filterBuilder: FilterBuilder) => IDotcssProp;
+    backdropFilter: (filterBuilder: FilterBuilder) => IDotcssProp;
     opacity: IDotcssAnimatable<number | string>;
+    appearance: (value: AppearanceValues) => IDotcssProp;
+    aspectRatio: (value: string) => IDotcssProp;
     background: (value: BasicCommonValues | string) => IDotcssProp;
     backgroundAttachment: (value: BackgroundAttachmentValues) => IDotcssProp;
     backgroundBlendMode: (value: BasicCommonValues | string) => IDotcssProp;
@@ -811,7 +833,6 @@ export interface IDotcssProp {
     pageBreakInside: (value: BasicCommonValues | string) => IDotcssProp;
     marks: (value: BasicCommonValues | string) => IDotcssProp;
     quotes: (value: BasicCommonValues | string) => IDotcssProp;
-    filter: (value: BasicCommonValues | string) => IDotcssProp;
     imageRendering: (value: BasicCommonValues | string) => IDotcssProp;
     imageResolution: (value: BasicCommonValues | string) => IDotcssProp;
     objectFit: (value: BasicCommonValues | string) => IDotcssProp;
@@ -1015,3 +1036,18 @@ export type ITransformationContext = {
     perspectiveVMax: (v: number) => ITransformationContext;
     perspectiveVMin: (v: number) => ITransformationContext;
 };
+export interface FilterBuilder {
+    (filtCtx: IFilterContext): IFilterContext | string;
+}
+export type IFilterContext = {
+    blur(v: NumericLength): IFilterContext;
+    brightness(v: Percentage): IFilterContext;
+    contrast(v: Percentage): IFilterContext;
+    dropShadow(x: NumericLength, y: NumericLength, blur: NumericLength, color: ColorFormat): IFilterContext;
+    grayscale(v: Percentage): IFilterContext;
+    hueRotate(v: AngleUnits): IFilterContext;
+    invert(v: Percentage): IFilterContext;
+    opacity(v: Percentage): IFilterContext;
+    sepia(v: Percentage): IFilterContext;
+    saturate(v: Percentage): IFilterContext;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dothtml",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "DOThtml is a client-side framework for building single-page applications.",
   "main": "lib/dothtml.js",
   "devDependencies": {

package/src/component.ts

@@ -19,6 +19,22 @@ interface IPropertyContainer{
 
 abstract class Component{
 
+	/**
+	 * Used internally to indicate the first time $updateStyles is called.
+	 * This method is called by the static component builder when the component is created.
+	 * If a prop is accessed within the style builder, the getter reads this field to mark $updateStyles as a dependency.
+	*/
+	#initializingStyles: boolean = false;
+	#initializingBuild: boolean = false;
+	// A bit messy but gets us to MVP for this feature.
+	// Ideally this should be made a singleton somehow, perhaps put in the property metadata.
+	#rebuildStylesOnPropChange: {[propName: string]: true} = {};
+	#rebuildBuilderOnPropChange: {[propName: string]: true} = {};
+
+	/**
+	 * Called once per component, on the first build.
+	 * TODO: this shouldn't require an instance of the component. Please experiment with fixing this.
+	*/
 	static initializeComponent<T extends Component>(obj: T): void{
 		if(!(obj.constructor as any).__dotComponentInitialized) {
 			(obj.constructor as any).__dotComponentInitialized = true;
@@ -36,7 +52,7 @@ abstract class Component{
 
 	}
 
-	static build<T extends Component>(obj: T): Element{
+	static build<T extends Component>(obj: T): HTMLElement{
 		Component.initializeComponent(obj);
 
 		GlobalComponentStack.push(obj);
@@ -87,20 +103,45 @@ abstract class Component{
 
 		Component.initializeEventHandlers(obj);
 	
+		Component.rebuild(obj);
+	
+		// TODO: would be great to do this without a timer, once the DOM is updated. 
+		// May require some type of queueing system within dot.
+		obj.ready && sT(()=>{
+			GlobalComponentStack.push(obj);
+			obj.ready();
+			GlobalComponentStack.pop()
+		}, 0);
+
+		GlobalComponentStack.pop();
+		
+		return obj.$el;
+	}
+
+	/**
+	 * Called any time the component needs to be completely rebuilt.
+	*/
+	static rebuild<T extends Component>(obj: T) {
+
+		let oldEl = obj.$el;
+		
+		if(!obj.__eventsInitialized) obj.#initializingBuild = true;
 		let ret = obj.builder(...obj.__args);
+		obj.#initializingBuild = false;
 	
 		let lst = ret.getLast();
 		(!lst || (lst.parentNode.childNodes.length > 1)) && ERR("C#", obj.name || obj.constructor.name || "(unnamed obj)");
 		
-	
-	
-		// Some weird ass logic to support legacy named components and the new syntax.
-		// if(classNumb || n) ret = (obj instanceof DotDocument ? obj : dot)._appendOrCreateDocument(dot.scopeClass(classNumb, ret));
-		// ret = ret.scopeClass(ret, (obj.constructor as any).__dotClassNumb);
-		
-		obj["__$el"] = obj.$el || lst;
+
+		// Note: I don't know what the justification was for using $obj.el, but all tests pass without it.
+		// It was removed to facilitate rebuilding the component (during a prop change).
+		obj["__$el"] = /*obj.$el ||*/ lst;
 		obj.$el["__dothtml_component"] = obj;
-	
+
+		if(oldEl){
+			// Clean it up and replace it with the new element!
+		}
+
 		// TODO: would there be a way to not have to create obj function for each instance?
 		if(obj.style) {
 			// obj will be the officially supported way to use dothtml.
@@ -115,23 +156,13 @@ abstract class Component{
 				obj.style(dot.css);
 				dot.css.unscope();
 			}
+			if(!obj.__eventsInitialized) obj.#initializingStyles = true;
 			obj.$updateStyles();
+			obj.#initializingStyles = false;
 			//styler();
 		}
 	
 		obj.built && obj.built();
-	
-		// TODO: would be great to do this without a timer, once the DOM is updated. 
-		// May require some type of queueing system within dot.
-		obj.ready && sT(()=>{
-			GlobalComponentStack.push(obj);
-			obj.ready();
-			GlobalComponentStack.pop()
-		}, 0);
-
-		GlobalComponentStack.pop();
-		
-		return obj.$el;
 	}
 
 	static initializeEventHandlers(obj){
@@ -238,6 +269,14 @@ abstract class Component{
 			if(!ar) ar = cc.__propContainer.propDependencies[name] = [];
 			ar.push(cb);
 		}
+
+		// Again I find this a weird way to do it that kind of side-steps the above approach, but it gets the job done and is dead simple.
+		if(cc.#initializingStyles){
+			cc.#rebuildStylesOnPropChange[name] = true;
+		}
+		if(cc.#initializingBuild){
+			cc.#rebuildBuilderOnPropChange[name] = true;
+		}
 	}
 	
 	static updateProp(obj: Component, name: string){
@@ -246,14 +285,21 @@ abstract class Component{
 	
 		// // {f:contentCallback,startNode:startNode, endNode:endNode,condition:condition}
 		let updateStyles = false;
-		for(let i = 0; i < (ar||[]).length; i++){
-			let arg = ar[i];
-			// TODO: this could be used to update attributes.
-			// But right now that relies exclusively on function setters. It's a bit weird.
-			arg.updateContent(dot, value);
-			
-			if(arg instanceof AttrArgCallback && arg.attr == "class"){
-				updateStyles = true;
+		if(false && obj.#rebuildBuilderOnPropChange[name] && !obj.#initializingBuild){
+			// Call the builder again.
+		}
+		else{
+			// Maybe update specific areas.
+			// This is admittedly more efficient.
+			for(let i = 0; i < (ar||[]).length; i++){
+				let arg = ar[i];
+				// TODO: this could be used to update attributes.
+				// But right now that relies exclusively on function setters. It's a bit weird.
+				arg.updateContent(dot, value);
+				
+				if(obj.#rebuildStylesOnPropChange[name] || (arg instanceof AttrArgCallback && arg.attr == "class")){
+					updateStyles = true;
+				}
 			}
 		}
 	
@@ -337,7 +383,7 @@ abstract class Component{
 		return this.__$el;
 	}
 
-	$refs: {[key: string]: Element} = {};
+	$refs: {[key: string]: HTMLElement} = {};
 
 	/**
 	 * Name of the component (optional). If provided, dot and the VDBO will be extended.

package/src/dothtml.ts

@@ -2,7 +2,7 @@
 import dot from "./dot";
 import Component from "./component";
 
-dot.version = "5.0.0";
+dot.version = "5.2.0";
 dot.Component = Component;
 
 /*! DOThtml (c) Joshua Sideris | dothtml.org/license */
@@ -22,6 +22,8 @@ dot.Component = Component;
  * - Re-imagined components from the ground up. Components are now classes that inherit from `Component`. Plays very nicely with TS and ES6.
  * - Added interfaces for new methods that can be invoked on various elements. For instance, play, pause, and stop on audio and video elements.
  * - Updated scopeClass method to put the optional parameter last.
+ * - Fixed some color bugs.
+ * - Added a filter builder.
  */
 
 

package/src/styling/css-types.ts/css-color.ts

@@ -11,16 +11,20 @@ export default class CssColor extends CssDataType{
 		this.g = 0;
 		this.b = 0;
 		this.a = 1;
-		if(value.length == 1) {
-			value = value[0];
+
+		// This is typically the way dothtml passes in values to colors. Flatten.
+		if(Array.isArray(value) && value.length == 1) value = value[0];
+
+		if(typeof value == "number") {
+			this.b = value & 0xFF;
+			value >>= 8;
+			this.g = value & 0xFF;
+			value >>= 8;
+			this.r = value & 0xFF;
+		}
+		else if(typeof value == "string") {
+			// value = value[0];
 			if(value == "" || value == "none" || value == "initial" || value == "inherit"){} //Nothing more needs to be done.
-			else if(!isNaN(value)){
-				this.b = value & 0xFF;
-				value >>= 8;
-				this.g = value & 0xFF;
-				value >>= 8;
-				this.r = value & 0xFF;
-			}
 			else if(value[0] == "#"){
 				var cH = value.split("#")[1];
 				if(cH.length == 3){
@@ -40,12 +44,12 @@ export default class CssColor extends CssDataType{
 				//This also handles rgba.
 				var cData = value.split("(")[1];
 				cData = cData.split(")")[0];
-				cData = cData.split(",");
-				if(cData.length == 3 || cData.length == 4){
-					this.r = Number(cData[0]);
-					this.g = Number(cData[1]);
-					this.b = Number(cData[2]);
-					this.a = Number(cData[3] || 1);
+				var cDataItems = cData.split(",");
+				if(cDataItems.length == 3 || cDataItems.length == 4){
+					this.r = Number(cDataItems[0]);
+					this.g = Number(cDataItems[1]);
+					this.b = Number(cDataItems[2]);
+					this.a = Number(cDataItems[3] || 1);
 				}
 			}
 			else{

package/src/styling/css-types.ts/css-data-type.ts

@@ -1,4 +1,4 @@
-export declare type CssDataTypeToken = "url"|"number"|"length"|"angle"|"color"|"transformation"|"complex"|"unknown";
+export declare type CssDataTypeToken = "url"|"number"|"length"|"angle"|"color"|"transformation"|"filter"|"complex"|"unknown";
 
 export default abstract class CssDataType{
 	type: CssDataTypeToken;

package/src/styling/css-types.ts/css-filter.ts

@@ -0,0 +1,134 @@
+import { isF } from "../../dot-util";
+import {AllAngleUnits, AllLengthUnits} from "../unit-function-tables";
+import { AngleUnits, ColorFormat, NumericAngle, NumericLength, Percentage } from "../i-dotcss";
+import CssAngle from "./css-angle";
+import CssDataType from "./css-data-type";
+import CssLength from "./css-length";
+import CssPercentage from "./css-percentage";
+import CssColor from "./css-color";
+
+export default class CssFilter extends CssDataType{
+		
+	simpleValue: string;
+	filters: Array<{
+		filter: string,
+		args: Array<any>
+	}> = [];
+
+	constructor(value){
+		super("filter");
+		
+		if(typeof value == "string"){
+			this.simpleValue = value;
+			return; //?? Need a better way to handle this.
+		}
+		else if(isF(value)){
+			value(this);
+			// console.log(this.toString());
+		}
+		//var ret = {value: value, type: cssDataType};
+
+		// The old way of doing transformations was that it was set up to accept a big string. The added complexity was to support animations.
+		// The new way is to use the builder. But I might want to come back and revisit the idea of accepting a string.
+		// For instance, a use case of accepting a string for a transformation is if we're trying to animate transforms generated by another framework.
+		// Not sure if that's realistic.
+		// var transformations = value.split(/\)\s*/); transformations.pop(); for(var i = 0; i < transformations.length; i++) transformations[i] += ")";
+		// // var cos = Math.cos; var sin = Math.sin; var tan = Math.tan;
+		// for(var t = 0; t < transformations.length; t++){
+		// 	var trans = transformations[t].trim();
+		// 	var parts = trans.split(/[\(\)]/);
+		// 	var func = parts[0]
+		// 	var p = parts[1].split(/\s*,\s*/)
+		
+		// 	if(this[func]){
+		// 		this[func].apply(this, p);
+		// 	}
+		// }
+	}
+	
+	toString(){
+		if(this.simpleValue){
+			return this.simpleValue;
+		}
+
+		var ret = "";
+		for(var i = 0; i < this.filters.length; i++){
+			var t = this.filters[i];
+			ret += t.filter + "(";
+			for(var k = 0; k < t.args.length; k++){
+				ret += t.args[k].toString() + " ";
+			}
+			ret = ret.trim() + ") ";
+		}
+		return ret.trim();
+	}
+	
+	private appendFilterString(filter: string, args){
+		//this.finalMatrix = dotcss.matrixMultiply3D(m, this.finalMatrix);
+		this.filters.push({filter: filter, args: args});
+		/*if(this.value.length > 0) this.value += " ";
+		this.value += transformation + "(";
+		for(var i = 0; i < args.length; i++){
+			this.value += args[i] + (i == args.length -1 ? "" : ",")
+		}*/
+		return this;
+	}
+
+	blur(v: NumericLength){
+		return this.appendFilterString("blur", [new CssLength(v)]);
+	}
+	brightness(v: Percentage){
+		return this.appendFilterString("brightness", [new CssPercentage(v)]);
+	}
+	contrast(v: Percentage){
+		return this.appendFilterString("contrast", [new CssPercentage(v)]);
+	}
+	dropShadow(x: NumericLength, y: NumericLength, blur: NumericLength, color: ColorFormat){
+		return this.appendFilterString("drop-shadow", [new CssLength(x), new CssLength(y), new CssLength(blur), new CssColor(color)]);
+	}
+	grayscale(v: Percentage){
+		return this.appendFilterString("grayscale", [new CssPercentage(v)]);
+	}
+	hueRotate(v: AngleUnits){
+		return this.appendFilterString("hue-rotate", [new CssPercentage(v)]);
+	}
+	invert(v: Percentage){
+		return this.appendFilterString("invert", [new CssPercentage(v)]);
+	}
+	opacity(v: Percentage){
+		return this.appendFilterString("opacity", [new CssPercentage(v)]);
+	}
+	sepia(v: Percentage){
+		return this.appendFilterString("sepia", [new CssPercentage(v)]);
+	}
+	saturate(v: Percentage){
+		return this.appendFilterString("saturate", [new CssPercentage(v)]);
+	}
+}
+
+// Extend the above with special length and degree functions.
+
+// TODO: when I have some time it would be nice to do the unit functions the same way we do for transforms.
+// const lengthFuncs = "translate|translate3d|translateX|translateY|translateZ|perspective".split("|");
+// const angleFuncs = "rotate|rotateX|rotateY|rotateZ|skew|skewX|skewY".split("|");
+
+// for(let i = 0; i < lengthFuncs.length; i++){
+// 	let F = lengthFuncs[i];
+// 	for(let u = 0; u < AllLengthUnits.length; u++){
+// 		let uu = AllLengthUnits[u];
+// 		CssTransform.prototype[F + (uu.jsName || uu.unit)] = function(){
+// 			for(var i = 0; i < arguments.length; i++) arguments[i] = arguments[i] + uu.unit.toLowerCase();
+// 			return CssTransform.prototype[F].apply(this, arguments);
+// 		}
+// 	}
+// }
+// for(let i = 0; i < angleFuncs.length; i++){
+// 	let F = angleFuncs[i];
+// 	for(let u = 0; u < AllAngleUnits.length; u++){
+// 		let uu = AllAngleUnits[u];
+// 		CssTransform.prototype[F + (uu.unit)] = function(){
+// 			for(var i = 0; i < arguments.length; i++) arguments[i] = arguments[i] + uu.unit.toLowerCase();
+// 			return CssTransform.prototype[F].apply(this, arguments);
+// 		}
+// 	}
+// }

package/src/styling/css-types.ts/css-percentage.ts

@@ -0,0 +1,10 @@
+import { floatRegex } from "../../dot-util";
+import CssDataType from "./css-data-type";
+import CssLength from "./css-length";
+
+export default class CssPercentage extends CssLength{
+	length: number;
+	constructor (value:string|number){
+		super(isNaN(value as any) ? value : `${value}%`)
+	}
+}

package/src/styling/i-dotcss.ts

@@ -1,5 +1,5 @@
 // Building blocks.
-export declare type BasicCommonValues = "inherit"|"initial"|"unset";
+export declare type BasicCommonValues = "inherit"|"initial"|"unset"|"revert"|"revert-layer";
 export declare type AbsoluteUnits = "cm"|"mm"|"in"|"px"|"pt"|"pc";
 export declare type RelativeUnits = "em"|"ex"|"ch"|"rem"|"vw"|"vh"|"vmin"|"vmax"|"%";
 export declare type AllUnits = AbsoluteUnits|RelativeUnits;
@@ -7,14 +7,16 @@ export declare type OptionalWhitespace = ""|" ";
 export declare type UrlType = `url('${string}')`;
 export declare type NumericLength = number|`${number}${AllUnits}`;
 export declare type AngleUnits = "deg"|"turn"|"rad"|"grad";
-export declare type NumericAngle = number|`${number}${AngleUnits}`
+export declare type NumericAngle = number|`${number}${AngleUnits}`;
+export declare type Percentage = number|`${number}%`; // Used for filters.
 
 // ts starts complaining about the complexity of the type :(
 //export declare type DigitStr = "0"|"1"|"2"|"3"|"4"|"5"|"6"|"7"|"8"|"9";
 // export declare type HexStr = DigitStr|"A"|"B"|"C"|"D"|"E"|"F"|"a"|"b"|"c"|"d"|"e"|"f";
 
 // Types
-export declare type BackgroundAttachmentValues = BasicCommonValues|"scroll"|"fixed"|"local"
+export declare type AppearanceValues = BasicCommonValues|"none"|"menulist-button"|"textfield"|"button"|"searchfield"|"textarea"|"push-button"|"slider-horizontal"|"checkbox"|"radio"|"square-button"|"menulist"|"listbox"|"meter"|"progress-bar"|"scrollbarbutton-up"|"button-bevel"|"media-mute-button"|"caret";
+export declare type BackgroundAttachmentValues = BasicCommonValues|"scroll"|"fixed"|"local";
 export declare type BackgroundRepeatValues = BasicCommonValues|"no-repeat"|"repeat"|"space"|"round";
 export declare type BackgroundOriginValues = BasicCommonValues|"padding-box"|"border-box"|"content-box";
 export declare type BackgroundSizeValues = BasicCommonValues|"auto"|NumericLength|"cover"|"contain";
@@ -101,7 +103,7 @@ export interface IDotcssProp{
 	columnRuleColor: IDotcssAnimatableColor;
 
 	//length: 
-	backgroundSize: ((value: BasicCommonValues)=>IDotcssProp)|IDotcssAnimatable<BackgroundSizeValues>;
+	backgroundSize: IDotcssAnimatable<BackgroundSizeValues>;
 	backgroundSizeCm: IDotcssAnimatable<number>;
 	backgroundSizeCh: IDotcssAnimatable<number>;
 	backgroundSizeEm: IDotcssAnimatable<number>;
@@ -118,6 +120,23 @@ export interface IDotcssProp{
 	backgroundSizeVMax: IDotcssAnimatable<number>;
 	backgroundSizeVMin: IDotcssAnimatable<number>;
 
+	blockSize: IDotcssAnimatable<NumericLength>;
+	blockSizeCm: IDotcssAnimatable<number>;
+	blockSizeCh: IDotcssAnimatable<number>;
+	blockSizeEm: IDotcssAnimatable<number>;
+	blockSizeEx: IDotcssAnimatable<number>;
+	blockSizeIn: IDotcssAnimatable<number>;
+	blockSizeMm: IDotcssAnimatable<number>;
+	blockSizeP: IDotcssAnimatable<number>;
+	blockSizePc: IDotcssAnimatable<number>;
+	blockSizePt: IDotcssAnimatable<number>;
+	blockSizePx: IDotcssAnimatable<number>;
+	blockSizeRem: IDotcssAnimatable<number>;
+	blockSizeVh: IDotcssAnimatable<number>;
+	blockSizeVw: IDotcssAnimatable<number>;
+	blockSizeVMax: IDotcssAnimatable<number>;
+	blockSizeVMin: IDotcssAnimatable<number>;
+
 	borderBottomLeftRadius: IDotcssAnimatable<NumericLength>;
 	borderBottomLeftRadiusCm: IDotcssAnimatable<number>;
 	borderBottomLeftRadiusCh: IDotcssAnimatable<number>;
@@ -719,13 +738,18 @@ export interface IDotcssProp{
 	listStyleImage: (value: BackgroundImageFormat)=>IDotcssProp;
 	content: (value: BasicCommonValues|UrlType)=>IDotcssProp;
 
-	//transformation: 
+	//complex: 
 	transform: (transformOrTransformBuilder: BasicCommonValues|TransformationBuilder)=>IDotcssProp;
+	filter: (filterBuilder: FilterBuilder)=>IDotcssProp;
+	backdropFilter: (filterBuilder: FilterBuilder)=>IDotcssProp;
 	
 	//misc numeric: 
 	opacity: IDotcssAnimatable<number|string>;
 
 	//misc: 
+	appearance: (value: AppearanceValues)=>IDotcssProp;
+	aspectRatio: (value: string)=>IDotcssProp; // TODO: better typing on this. Low priority.
+
 	background: (value: BasicCommonValues|string)=>IDotcssProp
 	backgroundAttachment: (value: BackgroundAttachmentValues)=>IDotcssProp
 	backgroundBlendMode: (value: BasicCommonValues|string)=>IDotcssProp
@@ -900,7 +924,6 @@ export interface IDotcssProp{
 	pageBreakInside: (value: BasicCommonValues|string)=>IDotcssProp
 	marks: (value: BasicCommonValues|string)=>IDotcssProp
 	quotes: (value: BasicCommonValues|string)=>IDotcssProp
-	filter: (value: BasicCommonValues|string)=>IDotcssProp
 	imageRendering: (value: BasicCommonValues|string)=>IDotcssProp
 	imageResolution: (value: BasicCommonValues|string)=>IDotcssProp
 	objectFit: (value: BasicCommonValues|string)=>IDotcssProp
@@ -1120,3 +1143,21 @@ export type ITransformationContext = {
 	perspectiveVMin: (v: number)=>ITransformationContext;
 }
 
+export interface FilterBuilder{
+	(filtCtx: IFilterContext): IFilterContext|string;
+}
+
+export type IFilterContext = {
+	// url(commonfilters.svg#filter); // Don't know how this works yet.
+	blur(v: NumericLength): IFilterContext;
+	brightness(v: Percentage): IFilterContext;
+	contrast(v: Percentage): IFilterContext;
+	dropShadow(x: NumericLength, y: NumericLength, blur: NumericLength, color: ColorFormat): IFilterContext;
+	grayscale(v: Percentage): IFilterContext;
+	hueRotate(v: AngleUnits): IFilterContext;
+	invert(v: Percentage): IFilterContext;
+	opacity(v: Percentage): IFilterContext;
+	sepia(v: Percentage): IFilterContext;
+	saturate(v: Percentage): IFilterContext;
+	// url(filters.svg#filter) blur(4px) saturate(150%); // example.
+}

package/src/styling/style-builder.ts

@@ -12,6 +12,7 @@ import CssUnknown from "./css-types.ts/css-unknown";
 import CssUrl from "./css-types.ts/css-url";
 import IDotCss, { HideParams, LengthProp, NumericLength, ShowParams } from "./i-dotcss";
 import { AnimationType, floatRegex, numberStep } from "../dot-util";
+import CssFilter from "./css-types.ts/css-filter";
 
 //Latest Update.
 /*
@@ -194,6 +195,7 @@ class Dotcss2{
 		else if (cssDataType == "url") return new CssUrl(value);
 		else if (cssDataType == "length" && (!isNaN(value[0]) || (value[0].indexOf(" ") == -1 && value[0].replace(floatRegex, "") != value[0]))) return new CssLength(value[0]);
 		else if (cssDataType == "transformation") return (new CssTransform(value[0])).toString()
+		else if (cssDataType == "filter") return (new CssFilter(value[0])).toString()
 		else{
 			if(value[0] === "" 
 				|| (
@@ -749,10 +751,11 @@ dotcss.formatNumberValue = function(value, unit){
 
 const _allProps = {
 	color: "color|background-Color|border-Bottom-Color|border-Color|border-Left-Color|border-Right-Color|border-Top-Color|text-Decoration-Color|outline-Color|column-Rule-Color",
-	length: "background-Size|border-Bottom-Left-Radius|border-Bottom-Right-Radius|border-Bottom-Width|border-Image-Width|border-Left-Width|border-Radius|border-Right-Width|border-Top-Left-Radius|border-Top-Right-Radius|border-Top-Width|border-Width|bottom|height|left|margin|margin-Bottom|margin-Left|margin-Right|margin-Top|max-Height|max-Width|min-Height|min-Width|padding|padding-Bottom|padding-Left|padding-Right|padding-Top|right|top|width|line-Height|flex-Basis|font-Size",
+	length: "background-Size|block-Size|border-Bottom-Left-Radius|border-Bottom-Right-Radius|border-Bottom-Width|border-Image-Width|border-Left-Width|border-Radius|border-Right-Width|border-Top-Left-Radius|border-Top-Right-Radius|border-Top-Width|border-Width|bottom|height|left|margin|margin-Bottom|margin-Left|margin-Right|margin-Top|max-Height|max-Width|min-Height|min-Width|padding|padding-Bottom|padding-Left|padding-Right|padding-Top|right|top|width|line-Height|flex-Basis|font-Size",
 	url: "background-Image|border-Image|list-Style-Image|content|image-Orientation",
 	transformation: "transform",
-	misc: "opacity|background|background-Attachment|background-Blend-Mode|background-Position|background-Repeat|background-Clip|background-Origin|border|border-Bottom|border-Bottom-Style|border-Image-Outset|border-Image-Repeat|border-Image-Slice|border-Image-Source|border-Left|border-Left-Style|border-Right|border-Right-Style|border-Style|border-Top|border-Top-Style|box-Decoration-Break|box-Shadow|clear|clip|display|float|overflow|box|overflow-X|overflow-Y|position|visibility|vertical-Align|z-Index|align-Content|align-Items|align-Self|flex|flex-Basis|flex-Direction|flex-Flow|flex-Grow|flex-Shrink|flex-Wrap|grid|grid-Area|grid-Auto-Columns|grid-auto-Rows|grid-Column|grid-Column-End|grid-Column-Gap|grid-Column-Start|grid-Gap|grid-Row|grid-Row-End|grid-Row-Gap|grid-Row-Start|grid-Template|grid-Template-Areas|grid-Template-Columns|grid-Template-Rows|justify-Content|order|hanging-Punctuation|hyphens|letter-Spacing|line-Break|overflow-Wrap|tab-Size|text-Align|text-Align-Last|text-Combine-Upright|text-Indent|text-Justify|text-Transform|white-Space|word-Break|word-Spacing|word-Wrap|text-Decoration|text-Decoration-Line|text-Decoration-Style|text-Shadow|text-Underline-Position|font|font-Family|font-Feature-Settings|font-Kerning|font-Language-Override|font-Size-Adjust|font-Stretch|font-Style|font-Synthesis|font-Variant|font-Variant-Alternates|font-Variant-Caps|font-Variant-East-Asian|font-Variant-Ligatures|font-Variant-Numeric|font-Variant-Position|font-Weight|direction|text-Orientation|text-Combine-Upright|unicode-Bidi|user-Select|writing-Mode|border-Collapse|border-Spacing|caption-Side|empty-Cells|table-Layout|counter-Increment|counter-Reset|list-Style|list-Style-Position|list-Style-Type|animation|animation-Delay|animation-Direction|animation-Duration|animation-Fill-Mode|animation-Iteration-Count|animation-Name|animation-Play-State|animation-Timing-Function|backface-Visibility|perspective2d|perspective-Origin|transform-Origin|transform-Style|transition|transition-Property|transition-Duration|transition-Timing-Function|transition-Delay|box-Sizing|cursor|ime-Mode|nav-Down|nav-Index|nav-Left|nav-Right|nav-Up|outline|outline-Offset|outline-Style|outline-Width|resize|text-Overflow|break-After|break-Before|break-Inside|column-Count|column-Fill|column-Gap|column-Rule|column-Rule-Style|column-Rule-Width|column-Span|column-Width|columns|widows|orphans|page-Break-After|page-Break-Before|page-Break-Inside|marks|quotes|filter|image-Rendering|image-Resolution|object-Fit|object-Position|mask|mask-Type|mark|mark-After|mark-Before|phonemes|rest|rest-After|rest-Before|voice-Balance|voice-Duration|voice-Pitch|voice-Pitch-Range|voice-Rate|voice-Stress|voice-Volume|marquee-Direction|marquee-Play-Count|marquee-Speed|marquee-Style|pointer-Events"
+	filter: "filter|backdrop-Filter",
+	misc: "appearance|aspect-Ratio|opacity|background|background-Attachment|background-Blend-Mode|background-Position|background-Repeat|background-Clip|background-Origin|border|border-Bottom|border-Bottom-Style|border-Image-Outset|border-Image-Repeat|border-Image-Slice|border-Image-Source|border-Left|border-Left-Style|border-Right|border-Right-Style|border-Style|border-Top|border-Top-Style|box-Decoration-Break|box-Shadow|clear|clip|display|float|overflow|box|overflow-X|overflow-Y|position|visibility|vertical-Align|z-Index|align-Content|align-Items|align-Self|flex|flex-Basis|flex-Direction|flex-Flow|flex-Grow|flex-Shrink|flex-Wrap|grid|grid-Area|grid-Auto-Columns|grid-auto-Rows|grid-Column|grid-Column-End|grid-Column-Gap|grid-Column-Start|grid-Gap|grid-Row|grid-Row-End|grid-Row-Gap|grid-Row-Start|grid-Template|grid-Template-Areas|grid-Template-Columns|grid-Template-Rows|justify-Content|order|hanging-Punctuation|hyphens|letter-Spacing|line-Break|overflow-Wrap|tab-Size|text-Align|text-Align-Last|text-Combine-Upright|text-Indent|text-Justify|text-Transform|white-Space|word-Break|word-Spacing|word-Wrap|text-Decoration|text-Decoration-Line|text-Decoration-Style|text-Shadow|text-Underline-Position|font|font-Family|font-Feature-Settings|font-Kerning|font-Language-Override|font-Size-Adjust|font-Stretch|font-Style|font-Synthesis|font-Variant|font-Variant-Alternates|font-Variant-Caps|font-Variant-East-Asian|font-Variant-Ligatures|font-Variant-Numeric|font-Variant-Position|font-Weight|direction|text-Orientation|text-Combine-Upright|unicode-Bidi|user-Select|writing-Mode|border-Collapse|border-Spacing|caption-Side|empty-Cells|table-Layout|counter-Increment|counter-Reset|list-Style|list-Style-Position|list-Style-Type|animation|animation-Delay|animation-Direction|animation-Duration|animation-Fill-Mode|animation-Iteration-Count|animation-Name|animation-Play-State|animation-Timing-Function|backface-Visibility|perspective2d|perspective-Origin|transform-Origin|transform-Style|transition|transition-Property|transition-Duration|transition-Timing-Function|transition-Delay|box-Sizing|cursor|ime-Mode|nav-Down|nav-Index|nav-Left|nav-Right|nav-Up|outline|outline-Offset|outline-Style|outline-Width|resize|text-Overflow|break-After|break-Before|break-Inside|column-Count|column-Fill|column-Gap|column-Rule|column-Rule-Style|column-Rule-Width|column-Span|column-Width|columns|widows|orphans|page-Break-After|page-Break-Before|page-Break-Inside|marks|quotes|image-Rendering|image-Resolution|object-Fit|object-Position|mask|mask-Type|mark|mark-After|mark-Before|phonemes|rest|rest-After|rest-Before|voice-Balance|voice-Duration|voice-Pitch|voice-Pitch-Range|voice-Rate|voice-Stress|voice-Volume|marquee-Direction|marquee-Play-Count|marquee-Speed|marquee-Style|pointer-Events"
 }
 
 // const _allTransforms = [

package/unittests/calc.test.ts

@@ -1,2 +1,6 @@
 
-// TODO: calc.
+// TODO: calc.
+
+describe("Calculations", () => {
+    test.todo("pass");
+});

package/unittests/non-function-props-rerender.test.ts

@@ -30,6 +30,7 @@ class TestComponentA extends DotComponent{
 	}
 	
 	style(css: IDotCss){
+		console.log("RESTYLING!!");
 		this.styled++;
 
 		this.props.restyle;

package/unittests/styling/filters.test.ts

@@ -0,0 +1,23 @@
+
+import addTest from "../core";
+import dot from "../../src/dothtml";
+
+// TODO: Need much more test coverage. Do later.
+
+addTest("Blur filter.", function(){
+	return dot.div().style(
+		dot.css.filter(f=>f.blur(2))
+	);
+}, `<div style="filter:blur(2px);"></div>`);
+
+addTest("Multi filter param.", function(){
+	return dot.div().style(
+		dot.css.filter(f=>f.dropShadow(4,4,10,"blue"))
+	);
+}, `<div style="filter:drop-shadow(4px 4px 10px rgb(0, 0, 255));"></div>`);
+
+addTest("Multi filter.", function(){
+	return dot.div().style(
+		dot.css.filter(f=>f.blur(2).opacity(20))
+	);
+}, `<div style="filter:blur(2px) opacity(20%);"></div>`);

package/unittests/styling/pseudo-selectors.test.ts

@@ -1 +1,33 @@
-// Planned for 5.2.
+
+import addTest from "../core";
+import dot from "../../src/dothtml";
+
+describe("Pseudo Selectors", () => {
+    test.todo("pass");
+});
+
+// Possible syntaxes:
+// 1. Multiple style functions.
+// 	- dot(target).style(dot.css...)
+// 	- dot(target).styleHover(dot.css...)
+// 	P: Simple syntax.
+// 	C: How would this work in a component's style builder? Multiple style builders seems messed up.
+// 2. Pseudo functions.
+// 	- dot(target).style(dot.css...pseudoHover(css=>css...).pseudoVisited(css=>css...)...)
+//  P: Works for component style functions.
+//  C: Builder syntax is somewhat heavy.
+// 3. DOThtml style.
+// 	- dot(target).style(dot.css...pseudoHover...pseudoVisted...pseudoNone...)
+//  P: No weird function syntax.
+//  P: Consistent with dothtml.
+//  C: Inconsistent with dotcss.
+//  C: Just weird.
+// 4. Pseudo functions v2.
+// 	- dot(target).style(dot.css...pseudo("hover", css=>css...).pseudo("visited", css=>css...)...)
+// 	P/C: same as 2.
+
+// I think 2 is the winner.
+
+// addTest("Dotcss returns stringable value.", function(){
+// 	return dot.a("Hover over me!").style(dot.css.pseudoHover(c=>c.color("green")));
+// }, `<a style="color:"rgb(0, 255, 0);">Hover over me!</a>`); // TODO: need a way to inject the hover event.

package/unittests/styling/value-interpretation.test.ts

@@ -0,0 +1,3 @@
+describe("Value Interpretation", () => {
+    test.todo("pass");
+});

package/src/dot-component-legacy.ts

@@ -1,79 +0,0 @@
-// import { ClassPrefix, eachK, isF, str } from "./dot-util";
-// import ERR from "./err";
-// import ObservableArray from "./observable-array";
-// import { AttrArgCallback } from "./arg-callback-obj";
-
-// /** How it works:
-//  * 
-//  * DotComponent represents the prototype for all components.
-//  * You create a component with dot.component().
-//  * This creates a new class (CC), which acts as the prototype to that component.
-//  * The prototype of CC is set to a new DotComponent.
-//  * Instantiating the component creates a new CC.
-//  * This CC is the `this` for each method of the component.
-//  * 
-//  * 
-//  * */ 
-
-// /** How computed props work.
-//  * 
-//  * If a computed property has a dependency on a regular property, 
-//  * assigning the computed property to an element will cause the regular property's getter to trigger, establishing the dependency.
-//  * */
-
-// function DotComponent(){
-// 	this.$el = null;
-// 	this.$refs = {};
-// 	this.__handlers = {};
-// }
-
-// DotComponent.prototype.__addHandler = function(eventName, event){
-// 	var h = this.__handlers[eventName];
-// 	if(!h) h = this.__handlers[eventName] = [];
-// 	h.push(event);
-// }
-
-// var dot, _p, _D;
-
-
-
-
-
-
-
-// /**
- 
-//  */
-// export function addComponent(prms: ComponentParams){
-	
-// 	// Setting this potentially allows automatic code completion to get the method signature from builder. 
-// 	// var comp = prms.builder;
-
-// 	let n = prms.name;
-
-// 	n && (componentNames[n] = 1);
-// 	var CC = function(){
-// 		DotComponent.call(this);
-// 		this.rawProps = {};
-// 		this.__propDependencies = {};
-// 		this.__prms = prms;
-// 	}
-// 	CC.prototype = Object.create(DotComponent.prototype);
-// 	CC.prototype.constructor = CC;
-
-
-
-	
-
-// 	prms.registered && prms.registered.apply(CC.prototype);
-
-// 	return comp;
-// };
-
-// // export function removeComponent(name){
-// // 	if(componentNames[name]){
-// // 		delete componentNames[name];
-// // 		delete dot[name];
-// // 		delete _p[name];
-// // 	}
-// // }