jqx-es 1.2.8 → 1.3.0

package/Resource/Common/DOM.js

@@ -23,6 +23,7 @@ function characterDataElement2DOM(elem, root, position) {
 
 function inject2DOMTree( collection = [], root = document.body, position = insertPositions.BeforeEnd ) {
   position = position || insertPositions.BeforeEnd;
+  root = root?.isJQx ? root.node : root || document.body;
   return collection.reduce( (acc, elem) => {
     const created = isNode(elem) && element2DOM(elem, root, position);
     return created ? [...acc, created] : acc;

package/Resource/Common/HandlerFactory.js

@@ -1,85 +1,114 @@
-import { isNonEmptyString } from "./Utilities.js";
-const handlerStore = {};
-const shouldCaptureEventTypes = [
-  `load`, `unload`, `scroll`, `focus`, `blur`, `DOMNodeRemovedFromDocument`,
-  `DOMNodeInsertedIntoDocument`, `loadstart`, `progress`, `error`, `abort`,
-  `load`, `loadend`, `pointerenter`, `pointerleave`, `readystatechange`];
-const getCapture = eventType => !!(shouldCaptureEventTypes.find(t => t === eventType));
-export { handlerStore as listeners, HandleFactory as default };
+import { IS, isNonEmptyString, getCaptureValue, getHandlerName } from "./Utilities.js";
 
-function HandleFactory(jqx) {
-  return function(spec) {
-    let {eventType, selector, callback, name, capture, once, canRemove} = spec;
+export { HandlerFactory  };
 
-    switch(true) {
-      case !isNonEmptyString(eventType) || !jqx.IS(callback, Function):
-      default:
-        name = name || (!/handlers$/.test(callback.name) && callback.name) || undefined;
-        capture = jqx.IS(capture, Boolean) ? capture : false;
-        once = jqx.IS(once, Boolean) ? once : false;
-        canRemove = isNonEmptyString(name, 4) && jqx.IS(canRemove, Boolean) ? canRemove : once;
-        const { handler, signal, remove } = wrapHandlerFunction({selector, callback, canRemove, once, name, eventType});
-        return addAndStoreListener({eventType, handler, capture, once, signal, remove, name});
+function HandlerFactory(jqx) {
+  const store = {};
+  const anon = `anonymous_`;
+  
+  function setListener(listener) {
+    if (listener) {
+      const {handler, capture, type} = listener;
+      document.addEventListener(type, handler, {capture});
     }
-  };
-
-  function wrapHandlerFunction(spec) {
-    const {selector, callback, canRemove, name, eventType, once} = spec;
-    const abortcontroller = (canRemove || once) && new AbortController();
-    const remove = removeHandlerFactory({once, abortcontroller, name, eventType});
-    const listener = !selector
-      ? { handler: evt => callback(evt, evt.target, remove), remove}
-      : { handler: evt => {
-            const target = evt.target?.closest?.(selector);
-            return target && callback(evt, jqx(target), remove);
-          },
-          remove
-        };
-
-    if (abortcontroller) {
-      listener.signal = abortcontroller.signal;
-      if (once) {
-          return {
-            handler: (evt, me) => {
-              listener.handler(evt, me);
-              remove();
-          }
+  }
+  
+  function removeListener(listener) {
+    if (listener) {
+      const {type, handler, capture} = listener;
+      document.removeEventListener(type, handler, {capture});
+    }
+  }
+  
+  function wrapFn4Selector(fn, selector, once, handlerName) {
+    return function(evt) {
+        if (!isNonEmptyString(selector)) {
+          return fn({evt});
+        }
+        
+        const elemFound = evt.target.closest(selector);
+        if (elemFound) {
+          const me = jqx(elemFound);
+          fn({self: me, me, evt}); // self is legacy
+          // to avoid listener removal on capturing/bubbling,
+          // once is handled manually
+          if (once) { remove(evt.type, handlerName); }
         }
+        return true;
       }
-    }
-
-    return listener;
   }
-
-  function removeHandlerFactory(spec) {
-    const {once, abortcontroller, name, eventType} = spec;
-    return !name
-      ? function() { jqx.logger.error(`JQx: an anonymous listener can not be removed`); }
-      : !abortcontroller
-        ? function(evt) {
-            jqx.logger.error(`JQx: listener for event type [${eventType}] with name [${
-              name}] is not marked as removable`);
-          }
-        : function removeHandler() {
-          abortcontroller.abort();
-          const toRemove = [...handlerStore[eventType].entries()].find(([k, v]) => v.name === name);
-          handlerStore[eventType].delete(toRemove[0]);
-          jqx.logger.log(`JQx: Listener for event type [${eventType}] with name [${
-              name}] was removed${once ? ` (once active, so handled once).` : ``}`);
-          }
+  
+  function storedEventType(eventType) {
+    store[eventType] = store[eventType] || {};
+    return store[eventType];
   }
-
-  function addAndStoreListener(spec) {
-    const {eventType, handler, capture, once, signal, remove, name} = spec;
-    if (!handlerStore[eventType]) { handlerStore[eventType] = new Map(); }
-    const delegateExists = handlerStore[eventType].has(handler) ||
-      [...handlerStore[eventType].values()].find(h => (h.name || ``) === name);
-    if (!delegateExists) {
-      const opts = {capture: capture || getCapture(eventType), once: once || false};
-      if (signal) { opts.signal = signal; }
-      document.addEventListener(eventType, handler, opts);
-      const stored = { name, remove, capture: capture || getCapture(eventType), }
-      handlerStore[eventType].set(handler, stored);
+  
+  function retrieve(eventType, name) {
+    return Object.entries(storedEventType(eventType))
+      .find( ([key, ]) => key  === name );
+  }
+  
+  function remove(eventType, name) {
+    const listener = retrieve(eventType, name)
+    if (listener) {
+      removeListener(listener[1]);
+      delete store[eventType][name];
+      delete idCache[name];
+      
+      if (Object.keys(store[eventType]).length < 1) {
+        delete store[eventType];
+      }
+      
+      console.warn(`Removed listener [${name}] for event type [${eventType}].`);
     }
   }
+  
+  function storeHandler(spec) {
+    let { type, handler, name, capture, once, selector, node, about } = spec;
+    store[type] = store[type] || {};
+    let handlerName = getHandlerName(name || handler.name);
+    
+    if (node instanceof HTMLElement) {
+      // Note: for multiple event types dataset.hid may be defined already
+      const handlerID = node.dataset.hid || handlerName;
+      node.dataset.hid = handlerID;
+      selector = `[data-hid=${handlerID}]`;
+    }
+    
+    switch(true) {
+      case !store[type][handlerName]:
+        store[type][handlerName] = {
+          name: handlerName,
+          handler: wrapFn4Selector(handler, selector, once, handlerName),
+          capture: getCaptureValue(type, capture),
+          once: !!once,
+          type: type,
+          selector: !!selector && selector || false,
+          about: !!about && about || false,
+          unListen() { remove(type, handlerName); },
+        };
+        return store[type][handlerName];
+      default: return console.error(`The name [${handlerName}] for [${
+        type}] exists. Use unique (function) names.`);
+    }
+  }
+  
+  return {
+    remove(...args) { return remove(...args); },
+    listen: function(spec) {
+      const { type, handler } = spec;
+      if ( !isNonEmptyString(type) || !IS(handler, Function) ) { return; }
+      const nwHandler = storeHandler(spec);
+      
+      if (nwHandler) {
+        setListener(nwHandler);
+        return {
+          type,
+          name: nwHandler.name,
+          unListen() { remove(type, nwHandler.name); },
+        };
+      }
+    },
+    get ListenerStore() { return Object.freeze({...store}); }
+  };
 }

package/Resource/Common/Popup.js

@@ -7,11 +7,24 @@ export default function($) {
   $.editCssRules(...styleRules);
   const [popupContent, popupNode] = [$(`#jqxPopupContent`), $.node(`#jqxPopup`)];
   let currentProps = {};
-  $.handle( { type: `click, keydown`, handlers: genericPopupCloseHandler, capture: true } );
-  return Object.freeze({show: initPopup, removeModal});
+  $.handle( {
+    type: `click, keydown`,
+    handlers: genericPopupCloseHandler,
+    name: `genericPopupCloseHandler`,
+    capture: true,
+    about: "A generic handler for JQx popups"} );
+  return Object.freeze({show: initPopup, remove: initHidePopup, removeModal});
 
   function initPopup(props) {
-    if (popupNode.open) { return; }
+    if (popupNode.open) {
+      switch(true) {
+        case isCurrent(props): return;
+        default:
+          initHidePopup();
+          return setTimeout(() => initPopup(props), 200);
+      }
+    }
+    
     currentProps = {...props};
     let {content} = currentProps;
     return !($.IS(content, String, HTMLElement) || content?.isJQx) ? true : showPopup();
@@ -19,11 +32,18 @@ export default function($) {
 
   function initHidePopup() {
     if (currentProps.modal) {
-      return failModalClose(currentProps.warnMessage)
+      return failModalClose(currentProps.warnMessage);
     }
 
     return hidePopup();
   }
+  
+  function isCurrent(props) {
+    for (const [key, value] of Object.entries(currentProps)) {
+      if (value !== props[key]) { return false; }
+    }
+    return true;
+  }
 
   function showPopup() {
     popupContent.clear();
@@ -37,7 +57,9 @@ export default function($) {
 
   function hidePopup() {
     popupNode.close(currentProps.returnValue);
-    if ($.IS(currentProps.callback, Function)) { return currentProps.callback(currentProps.returnValue); }
+    if ($.IS(currentProps.callback, Function)) {
+      return setTimeout(() => currentProps.callback(currentProps.returnValue), 200);
+    }
     currentProps = {};
   }
 
@@ -48,7 +70,7 @@ export default function($) {
     initHidePopup();
   }
 
-  function genericPopupCloseHandler(evt) {
+  function genericPopupCloseHandler({evt}) {
     if ( Object.keys(currentProps).length < 1 || !popupNode.open ) { return; }
 
     if (evt.key === `Escape`) {

package/Resource/Common/Utilities.js

@@ -4,10 +4,14 @@ import {default as tagFNFactory} from "./tinyDOM.js";
 import styleFactory from "./LifeCSS.js";
 import {createElementFromHtmlString, inject2DOMTree, cleanupHtml} from "./DOM.js";
 import PopupFactory from "./Popup.js";
-import { listeners, default as HandleFactory } from "./HandlerFactory.js";
+import { HandlerFactory } from "./HandlerFactory.js";
 import tagLib from "./HTMLTags.js";
 
 const systemLog = systemLogFactory();
+const allwaysCaptureEventTypes = [
+  `load`, `unload`, `scroll`, `focus`, `blur`, `DOMNodeRemovedFromDocument`,
+  `DOMNodeInsertedIntoDocument`, `loadstart`, `progress`, `error`, `abort`,
+  `load`, `loadend`, `pointerenter`, `pointerleave`, `readystatechange`];
 const insertPositions = Object.freeze(new Proxy({
   start: "afterbegin", afterbegin: "afterbegin",
   end: "beforeend", beforeend: "beforeend",
@@ -24,17 +28,39 @@ const datasetKeyProxy = Object.freeze({
   enumerable: false,
   configurable: false
 });
+const handlerIdCache = {};
 
 export {
   after, applyStyle, assignAttrValues, ATTRS, before, checkProp, cleanupHtml, cloneAndDestroy,
   createElementFromHtmlString, datasetKeyProxy, inject2DOMTree, ElemArray2HtmlString, emptyElement,
-  escHtml, findParentScrollDistance, HandleFactory, input2Collection, insertPositions, IS, isArrayOfHtmlElements,
+  escHtml, findParentScrollDistance, input2Collection, insertPositions, IS, isArrayOfHtmlElements,
   isArrayOfHtmlStrings, isComment, isCommentOrTextNode, isHtmlString, isModal, isNode, isNonEmptyString,
-  isText, isVisible, isWritable, listeners, logTime, maybe, pad0, PopupFactory, randomNr, randomString,
+  isText, isVisible, isWritable, logTime, maybe, pad0, PopupFactory, randomNr, randomString,
   resolveEventTypeParameter, setData, styleFactory, systemLog, tagFNFactory, tagLib, toCamelcase,
-  toDashedNotation, truncate2SingleStr, truncateHtmlStr, ucFirst,
+  toDashedNotation, truncate2SingleStr, truncateHtmlStr, ucFirst, HandlerFactory, getCaptureValue,
+  getHandlerName,
 };
 
+function getHandlerName(name) {
+  const validName = isNonEmptyString(name) && !!name && !/^handler|handlers$/gi.test(name.trim())
+  return validName ? name.trim() : uniqueHandlerID();
+}
+
+function uniqueHandlerID(idCache) {
+  const anonID = `anonymous_${Math.random().toString(36).slice(2)}`;
+  
+  if (!handlerIdCache[anonID]) {
+    handlerIdCache[anonID] = anonID;
+    return anonID;
+  }
+  
+  return uniqueHandlerID();
+}
+
+function getCaptureValue(eventType, captureValue) {
+  return !!(allwaysCaptureEventTypes.find(t => t === eventType)) || !!captureValue;
+}
+
 function checkProp(prop) {
   return prop.startsWith(`data`) || ATTRS.html.find(attr => prop.toLowerCase() === attr);
 }

package/Resource/Common/WebComponentFactory.min.js

@@ -0,0 +1,11 @@
+function d(t,...e){let n=typeof t=="symbol"?Symbol("any"):t;return e.length>1?L(n,...e):P(n,...e)}function P(t,...e){let{compareWith:n,inputIsNothing:o,shouldBeIsNothing:r,inputCTOR:a,is_NAN:c}=j(t,...e);return c&&n?(n=S({trial:l=>String(n),whenError:l=>""}),n===String(t)||e===Number):o||r?r?String(t)===String(n):n?!1:`${t}`:a===Boolean?n?a===n:"Boolean":M(t,n,I(t,a))}function I(t,e){return t===0?Number:t===""?String:t?e:{name:String(t)}}function j(t,...e){let n=e.length>0,o=n&&e.shift(),r=_(t),a=n&&_(o),c=!r&&Object.getPrototypeOf(t)?.constructor,l=S({trial:i=>String(t),whenError:i=>""})==="NaN";return{compareWith:o,inputIsNothing:r,shouldBeIsNothing:a,inputCTOR:c,is_NAN:l}}function M(t,e,n){return S({trial:o=>String(e),whenError:o=>"-"})==="NaN"?String(t)==="NaN":e?S({trial:o=>t instanceof e,whenError:o=>!1})||e===n||e===Object.getPrototypeOf(n)||`${e?.name}`===n?.name:n?.name}function L(t,...e){for(let n of e)if(d(t,n))return!0;return!1}function _(t){return S({trial:e=>/^(undefined|null)$/.test(String(t)),whenError:e=>!1})}function S({trial:t,whenError:e=n=>console.log(n)}={}){if(!t||!(t instanceof Function))return console.info("TypeofAnything {maybe}: trial parameter not a Function or Lambda"),!1;try{return t()}catch(n){return e(n)}}function H({IS:t,tryJSON:e,contractsPrefix:n}={}){return n=n&&`${n}
+`||"",{EN:{unknownOrNa:"unknown or n/a",unknown:"unknown",nameOkExpected:"The contract to add needs a name (String)",isMethodExpected:"The contract to add needs a method (Function)",expectedOkExpected:"The contract to add needs an expected value method (String|Function)",addContracts_Contract_Expected:"the parameter for [addContracts] should be at least { [contractName]: { method: Function, expected: String|Function } }",addContract_Contract_Expected:`addContract parameters should at least be {name, method, expected}
+(when method is a named function, the name was derived from that)`,report_sorry:(o,r)=>`\u2718 ${n}Contract violation for contract [${o}], input ${r}`,report_forValue:o=>`${o}`,report_Expected:o=>`
+${o}`,report_defaultValue:(o,r)=>o?"":`
+Using the contract default value (${t(r,Function)?r.toString():t(r,String)?`"${r}"`:e(r)}) instead`},NL:{unknownOrNa:"onbekend of nvt",unknown:"onbekend",nameOkExpected:"Het contract moet een naam hebben (eigenschap name: String)",isMethodExpected:"Het contract moet kunnen worden uitgevoerd (eigenschap method: Function)",expectedOkExpected:"Het contract moet aangeven wat er wordt verwacht (eigenschap expected: String|Function)",addContracts_Contract_Expected:"De parameter for [addContracts] moet tenminste { [contractName]: { method: Function, expected: String|Function } } zijn",addContract_Contract_Expected:`De invoer vooor [addContract] moet tenminste {name, method, expected} zijn
+(wanneer de eigenschap [method] een functie met naam was wordt [name] daarvan afgeleid)`,report_sorry:(o,r)=>`\u2718 ${n} Contractbreuk voor contract [${o}], input ${r}`,report_forValue:o=>`${o}`,report_Expected:o=>`
+${o}`,report_defaultValue:(o,r)=>o?"":`
+In plaats daarvan wordt de voor dit contract toegekende standaardwaarde (${t(r,Function)?r.toString():t(r,String)?`"${r}"`:e(r)}) gebruikt`}}}var s,F=z,v=q(),A=J();function z(t){l(t);let{reporter:e,logViolations:n,alwaysThrow:o,language:r,contractsPrefix:a}=t;s=H({IS:d,tryJSON:N,contractsPrefix:a})[r];let c={addContract:b,addContracts:i};return U(c),Object.freeze({contracts:c,IS:d,tryJSON:N});function l(u){u.reporter=u.reporter||E,u.logViolations=u.logViolations||!1,u.alwaysThrow=u.alwaysThrow||!1,u.language=u.language||"EN"}function i(u){if(!c.addContracts_Contract(u))return;let m=Object.entries(u);for(let[p,h]of m)b({...h,paramsChecked:!0,name:p})}function b(u=v.addContract){let{name:m,method:p,expected:h,defaultValue:y,customReport:g,reportFn:O,shouldThrow:V,reportViolationsByDefault:w,paramsChecked:x}=u;m=m||p?.name;let B=c.addContract_Contract||A.checkSingleContractParameters;if(!x&&!B({name:m,method:p,expected:h}))return;let D=W({name:m,method:p,expected:h,defaultValue:y,reporter:e,reportFn:O,customReport:g,reportViolationsByDefault:w,logViolations:n,shouldThrow:V,alwaysThrow:o});return Object.defineProperty(c,m,{value:D,enumerable:!0})}}function W(t=v.createContract){let{name:e,method:n,expected:o,defaultValue:r,customReport:a,reportFn:c,reporter:l,logViolations:i,shouldThrow:b,reportViolationsByDefault:u,alwaysThrow:m}=t;return function(p,...h){let y=n(p,...h),g=d(h[0],Object)&&{...h[0],value:p}||{value:p};if(c=c??l??E,d(a,Function)&&a(g),$(y)){let O=d(o,Function)?o(g):o;y=!$(g.defaultValue)||r?g.defaultValue||r:y;let[V,w]=[g.reportViolation??u,g.shouldThrow??b];if(V||w||i){let x=K({inputValue:p,defaultValue:y,shouldBe:O,fnName:e||n.name});if(w||m)throw new TypeError(x);l(x)}}return y}}function q(){let[t,e,n,o,r,a,c]=[...Array(7)];return{get reportViolations(){return{inputValue:c,defaultValue:o,shouldBe:s.unknowOrNa,fnName:s.unknown}},get createContract(){return{name:t,method:e,expected:n,defaultValue:o,customReport:r,reportFn:a,reporter:E,logViolations:!1,shouldThrow:!1,alwaysThrow:!1,reportViolationsByDefault:!1}},get addContract(){return{name:t,method:e,expected:n,defaultValue:o,customReport:r,reportFn:a,reporter:E,shouldThrow:!1,reportViolationsByDefault:!1,paramsChecked:!1}}}}function J(){let t=o=>d(o,String)&&o.trim().length,e=o=>d(o,String)&&o.length||d(o,Function),n=o=>d(o,Function);return{nameOk:t,expectedOk:e,isMethod:n,checkSingleContractParameters:({name:o,method:r,expected:a}={})=>o&&t(o)&&r&&n(r)&&a&&e(a)}}function U(t){let{nameOk:e,expectedOk:n,isMethod:o,checkSingleContractParameters:r}=A;t.addContract({method:e,expected:s.nameOkExpected,reportViolationsByDefault:!0}),t.addContract({method:o,expected:s.isMethodExpected,reportViolationsByDefault:!0}),t.addContract({method:n,expected:s.expectedOkExpected,reportViolationsByDefault:!0}),t.addContract({name:"addContracts_Contract",method:a=>d(a,Object)&&[...Object.entries(a)].filter(([,c])=>c.method&&o(c.method)&&c.expected&&n(c.expected)).length>0?a:void 0,expected:s.addContracts_Contract_Expected,reportViolationsByDefault:!0}),t.addContract({name:"addContract_Contract",method:r,expected:s.addContract_Contract_Expected,reportViolationsByDefault:!0})}function K(t=v.reportViolations){let{inputValue:e,defaultValue:n,shouldBe:o,fnName:r}=t,a=s.report_sorry(r,G(e)),c=s.report_forValue(a),l=s.report_Expected(o),i=s.report_defaultValue($(n),n);return Q(`${c}${l}${i}`)}function Q(t,e=3){return t.replace(/\n/g,`
+${" ".repeat(e)}`)}function $(t){return d(t,void 0,null,NaN)}function N(t){return X(()=>{let e=JSON.stringify(t);return/Infinity|NaN/.test(e)?e.replace(/"/g,""):e},t)}function G(t){let e=n=>d(n,String)?`"${n}"`:d(n,Object)?N(n):String(n);return d(t,String)?`"${t}"`:d(t,Object)?N(t):/Array\(/.test(t?.constructor.toString())?`[${[...t].map(e)}]`:String(t)}function E(t){console.info(t)}function X(t,e){try{return t()}catch(n){return console.error({isOk:n.name===expected,message:n.message,type:n.name}),e}}var{contracts:k,IS:f,tryJSON:Y}=F({contractsPrefix:"[Web Component creator module]"});Z();function Z(){k.addContracts({componentName:{method:tt,reportViolationsByDefault:!0,expected({customElementName:e}={}){return[`createComponent componentName: '${e??"*no name given*"}' is not a valid custom element name!`,"See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name"].join(`
+`)}},attrChange:{method:t,defaultValue:{attributes:[],method:function(){}},expected:"onAttrChange expected {attributes: Array, method: Function}"}});function t(e){let n=f(e,Object)&&r(e?.attributes)&&f(e?.method,Function);return e&&!n&&o(),n?e:void 0;function o(){let a=f(e?.method,Function)?"Function ok":"nothing or not a Function";console.log(["\u2718 [Web Component creator module]","createComponent onAttrChange: contract for  parameters violated",`Input: { attributes: ${Y(e?.attributes)}, method: ${a} }`,"Input expected: nothing or { attributes: Array[string], method: Function({input}) {...} }","Will use default: { attributes: [], method: () => {} }"].join(`
+   `))}function r(a){return f(a,Array)&&a.filter(c=>f(c,String)&&!/\s/g.test(c)).length===a.length&&a||void 0}}}function tt(t){let e=["annotation-xml","color-profile","font-face","font-face-src","font-face-uri","font-face-format","font-face-name","missing-glyph"];return f(t,String)&&/\-{1,}/.test(t)&&t.toLowerCase()===t&&!e.find(n=>n===t)&&t||void 0}var T={};["a","area","audio","br","base","body","button","canvas","dl","data","datalist","div","em","fieldset","font","footer","form","hr","head","header","output","iframe","frameset","img","input","li","label","legend","link","map","mark","menu","media","meta","nav","meter","ol","object","optgroup","option","p","param","picture","pre","progress","quote","script","select","source","span","style","caption","td","col","table","tr","template","textarea","time","title","track","details","ul","video","del","ins","slot","blockquote","svg","dialog","summary","main","address","colgroup","tbody","tfoot","thead","th","dd","dt","figcaption","figure","i","b","code","h1","h2","h3","h4","abbr","bdo","dfn","kbd","q","rb","rp","rt","ruby","s","strike","samp","small","strong","sup","sub","u","var","wbr","nobr","tt","noscript"].forEach(t=>{Object.defineProperty(T,t,{get(){if(!t)return;let e=document.createElement(t)?.constructor;return e!==HTMLUnknownElement?e:void 0}})});var R=Object.freeze(T);var C=ut();function ht(t){t=rt(t);let{componentName:e}=t;if(k.componentName(e)&&!customElements.get(e)){let n=t.extends?.toLowerCase()?.trim(),o=R[n]??HTMLElement,r=et({forElem:o});ot(r,t),!C.clientOnly&&C.report(`[factory] Registered component "${e}"`),customElements.define(e,r,{extends:n})}}function et({forElem:t}={}){let e=t;return function n(){return n.prototype=e.prototype,nt(n),Reflect.construct(e,[],n)}}function nt(t){if(!t.prototype.setComponentState){let e={},n=o=>o.hasAttribute("is")||/-/.test(o.tagName);Object.defineProperties(t.prototype,{myName:{get:function(){return it(this)}},state:{get:function(){return n(this)&&e[this.myName]||{}}},nth:{value:function(o){return f(o,Number,void 0)&&at(this,o)||void 0}},instanceNr:{get(){return n(this)&&getInstancePositionInDom(this)}},setComponentState:{value:function(o){if(n(this)){let r=this.myName;Object.entries(o).forEach(([a,c])=>{e[r]=e[r]??{component:this.myName},e[r][a]=c})}}}})}}function ot(t,e){let{onConnect:n,onDisconnect:o,onAdopted:r,onAttrChange:a}=e,[c,l]=[a.attributes,a.method];t.observedAttributes=c,t.prototype={connectedCallback:function(){let i=this;return!C.clientOnly&&C.report(`[factory] (Re)connected an instance of &lt;${i.myName}>`),i.shadowRoot?.isConnected?!0:n(i)},disconnectedCallback(){let i=this;!C.clientOnly&&C.report(`[factory] Removed an instance of &lt;${i.myName}>`),o(i)},adoptedCallback(){return r(this)},attributeChangedCallback(i,b,u){if(c.length)return c.find(m=>m===i)&&l(this,i,b,u),!0}}}function rt(t){t.onAttrChange=k.attrChange(t.onAttrChange);let e=function(){};return t.onConnect=t.onConnect??e,t.onDisconnect=t.onDisconnect??e,t.onAdopted=t.onAdopted??e,t}function at(t,e=1){return[...t.getRootNode().querySelectorAll(t.myName)].find((n,o)=>e===o+1)}function ct(){let t=new Date;return[t.getHours(),t.getMinutes(),t.getSeconds(),t.getMilliseconds()].reduce((e,n,o)=>`${e}${o<3?":":"."}${`${n}`.padStart(o<3?2:3,"0")}`,"").slice(1)}function it(t){let e=t.getAttribute("is");return`${t.tagName.toLowerCase()}${e?`[is='${e}']`:""}`}function gt(t,e={mode:"open"}){let n=t.shadowRoot;return n||t.attachShadow(e)}function yt(t,e){if(t.state.styling)return t.state.styling;e=e.startsWith("#")?document.querySelector(e).content.querySelector("style").textContent:e,C.report(`[client] Storing embedded style for &lt;${t.myName}>`);let n=new CSSStyleSheet;return n.replaceSync(e),t.setComponentState({styling:n}),t.state.styling}function ut(){let t={"&lt;":"<","&gt;":">"},e=!1,n=function(c){console.info(`\u2714 ${c.replaceAll(/&lt;|&gt;/g,l=>t[l])}`)},o=n,r=function(){},a=!1;return{on(){e=!0},off(){e=!1},get now(){return ct},set clientOnly(c){a=f(c,Boolean)&&c||!1},get clientOnly(){return a},set report(c){o=c||n},get report(){return e&&o||r}}}export{gt as createOrRetrieveShadowRoot,ht as default,C as reporter,yt as setComponentStyleFor};

package/Resource/Common/_HandlerFactory.js

@@ -0,0 +1,85 @@
+import { isNonEmptyString } from "./Utilities.js";
+const handlerStore = {};
+const shouldCaptureEventTypes = [
+  `load`, `unload`, `scroll`, `focus`, `blur`, `DOMNodeRemovedFromDocument`,
+  `DOMNodeInsertedIntoDocument`, `loadstart`, `progress`, `error`, `abort`,
+  `load`, `loadend`, `pointerenter`, `pointerleave`, `readystatechange`];
+const getCapture = eventType => !!(shouldCaptureEventTypes.find(t => t === eventType));
+export { handlerStore as listeners, HandleFactory as default };
+
+function HandleFactory(jqx) {
+  return function(spec) {
+    let {eventType, selector, callback, name, capture, once, canRemove} = spec;
+
+    switch(true) {
+      case !isNonEmptyString(eventType) || !jqx.IS(callback, Function):
+      default:
+        name = name || (!/handlers$/.test(callback.name) && callback.name) || undefined;
+        capture = jqx.IS(capture, Boolean) ? capture : false;
+        once = jqx.IS(once, Boolean) ? once : false;
+        canRemove = isNonEmptyString(name, 4) && jqx.IS(canRemove, Boolean) ? canRemove : once;
+        const { handler, signal, remove } = wrapHandlerFunction({selector, callback, canRemove, once, name, eventType});
+        return addAndStoreListener({eventType, handler, capture, once, signal, remove, name});
+    }
+  };
+
+  function wrapHandlerFunction(spec) {
+    const {selector, callback, canRemove, name, eventType, once} = spec;
+    const abortcontroller = (canRemove || once) && new AbortController();
+    const remove = removeHandlerFactory({once, abortcontroller, name, eventType});
+    const listener = !selector
+      ? { handler: evt => callback(evt, evt.target, remove), remove}
+      : { handler: evt => {
+            const target = evt.target?.closest?.(selector);
+            return target && callback(evt, jqx(target), remove);
+          },
+          remove
+        };
+
+    if (abortcontroller) {
+      listener.signal = abortcontroller.signal;
+      if (once) {
+          return {
+            handler: (evt, me) => {
+              listener.handler(evt, me);
+              remove();
+          }
+        }
+      }
+    }
+
+    return listener;
+  }
+
+  function removeHandlerFactory(spec) {
+    const {once, abortcontroller, name, eventType} = spec;
+    return !name
+      ? function() { jqx.logger.error(`JQx: an anonymous listener can not be removed`); }
+      : !abortcontroller
+        ? function(evt) {
+            jqx.logger.error(`JQx: listener for event type [${eventType}] with name [${
+              name}] is not marked as removable`);
+          }
+        : function removeHandler() {
+          abortcontroller.abort();
+          const toRemove = [...handlerStore[eventType].entries()].find(([k, v]) => v.name === name);
+          handlerStore[eventType].delete(toRemove[0]);
+          jqx.logger.log(`JQx: Listener for event type [${eventType}] with name [${
+              name}] was removed${once ? ` (once active, so handled once).` : ``}`);
+          }
+  }
+
+  function addAndStoreListener(spec) {
+    const {eventType, handler, capture, once, signal, remove, name} = spec;
+    if (!handlerStore[eventType]) { handlerStore[eventType] = new Map(); }
+    const delegateExists = handlerStore[eventType].has(handler) ||
+      [...handlerStore[eventType].values()].find(h => (h.name || ``) === name);
+    if (!delegateExists) {
+      const opts = {capture: capture || getCapture(eventType), once: once || false};
+      if (signal) { opts.signal = signal; }
+      document.addEventListener(eventType, handler, opts);
+      const stored = { name, remove, capture: capture || getCapture(eventType), }
+      handlerStore[eventType].set(handler, stored);
+    }
+  }
+}

package/Resource/Common/cright.css

@@ -0,0 +1,40 @@
+:host {
+  color: #555;
+  display: inline-block;
+  position: fixed;
+  background-color: #fff;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  border-radius: 4px;
+  padding: 2px 0;
+  width: 100vw;
+  text-align: center;
+  box-shadow: 0 2px 14px #999;
+}
+
+::slotted(span.yr) {
+  font-weight: bold;
+  color: green;
+}
+
+::slotted(a[target]) {
+  text-decoration: none;
+  font-weight: bold;
+}
+
+::slotted(a[target]):before {
+  color: rgba(0, 0, 238, 0.7);
+  font-size: 1.1rem;
+  padding-right: 2px;
+  vertical-align: baseline;
+}
+
+::slotted(a[target]):after {
+  content: ' | ';
+  color: #000;
+  font-weight: normal;
+}
+
+::slotted(a[target]:last-child):after { content: ''; margin-right: 2rem; }

package/Resource/Common/css.min.js

@@ -0,0 +1,31 @@
+/*! `css` grammar compiled for Highlight.js 11.11.1 */
+(()=>{var e=(()=>{"use strict"
+;const e=["a","abbr","address","article","aside","audio","b","blockquote","body","button","canvas","caption","cite","code","dd","del","details","dfn","div","dl","dt","em","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","html","i","iframe","img","input","ins","kbd","label","legend","li","main","mark","menu","nav","object","ol","optgroup","option","p","picture","q","quote","samp","section","select","source","span","strong","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","tr","ul","var","video","defs","g","marker","mask","pattern","svg","switch","symbol","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feFlood","feGaussianBlur","feImage","feMerge","feMorphology","feOffset","feSpecularLighting","feTile","feTurbulence","linearGradient","radialGradient","stop","circle","ellipse","image","line","path","polygon","polyline","rect","text","use","textPath","tspan","foreignObject","clipPath"],i=["any-hover","any-pointer","aspect-ratio","color","color-gamut","color-index","device-aspect-ratio","device-height","device-width","display-mode","forced-colors","grid","height","hover","inverted-colors","monochrome","orientation","overflow-block","overflow-inline","pointer","prefers-color-scheme","prefers-contrast","prefers-reduced-motion","prefers-reduced-transparency","resolution","scan","scripting","update","width","min-width","max-width","min-height","max-height"].sort().reverse(),t=["active","any-link","blank","checked","current","default","defined","dir","disabled","drop","empty","enabled","first","first-child","first-of-type","fullscreen","future","focus","focus-visible","focus-within","has","host","host-context","hover","indeterminate","in-range","invalid","is","lang","last-child","last-of-type","left","link","local-link","not","nth-child","nth-col","nth-last-child","nth-last-col","nth-last-of-type","nth-of-type","only-child","only-of-type","optional","out-of-range","past","placeholder-shown","read-only","read-write","required","right","root","scope","target","target-within","user-invalid","valid","visited","where"].sort().reverse(),o=["after","backdrop","before","cue","cue-region","first-letter","first-line","grammar-error","marker","part","placeholder","selection","slotted","spelling-error"].sort().reverse(),r=["accent-color","align-content","align-items","align-self","alignment-baseline","all","anchor-name","animation","animation-composition","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-range","animation-range-end","animation-range-start","animation-timeline","animation-timing-function","appearance","aspect-ratio","backdrop-filter","backface-visibility","background","background-attachment","background-blend-mode","background-clip","background-color","background-image","background-origin","background-position","background-position-x","background-position-y","background-repeat","background-size","baseline-shift","block-size","border","border-block","border-block-color","border-block-end","border-block-end-color","border-block-end-style","border-block-end-width","border-block-start","border-block-start-color","border-block-start-style","border-block-start-width","border-block-style","border-block-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-style","border-bottom-width","border-collapse","border-color","border-end-end-radius","border-end-start-radius","border-image","border-image-outset","border-image-repeat","border-image-slice","border-image-source","border-image-width","border-inline","border-inline-color","border-inline-end","border-inline-end-color","border-inline-end-style","border-inline-end-width","border-inline-start","border-inline-start-color","border-inline-start-style","border-inline-start-width","border-inline-style","border-inline-width","border-left","border-left-color","border-left-style","border-left-width","border-radius","border-right","border-right-color","border-right-style","border-right-width","border-spacing","border-start-end-radius","border-start-start-radius","border-style","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-style","border-top-width","border-width","bottom","box-align","box-decoration-break","box-direction","box-flex","box-flex-group","box-lines","box-ordinal-group","box-orient","box-pack","box-shadow","box-sizing","break-after","break-before","break-inside","caption-side","caret-color","clear","clip","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","color-scheme","column-count","column-fill","column-gap","column-rule","column-rule-color","column-rule-style","column-rule-width","column-span","column-width","columns","contain","contain-intrinsic-block-size","contain-intrinsic-height","contain-intrinsic-inline-size","contain-intrinsic-size","contain-intrinsic-width","container","container-name","container-type","content","content-visibility","counter-increment","counter-reset","counter-set","cue","cue-after","cue-before","cursor","cx","cy","direction","display","dominant-baseline","empty-cells","enable-background","field-sizing","fill","fill-opacity","fill-rule","filter","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","float","flood-color","flood-opacity","flow","font","font-display","font-family","font-feature-settings","font-kerning","font-language-override","font-optical-sizing","font-palette","font-size","font-size-adjust","font-smooth","font-smoothing","font-stretch","font-style","font-synthesis","font-synthesis-position","font-synthesis-small-caps","font-synthesis-style","font-synthesis-weight","font-variant","font-variant-alternates","font-variant-caps","font-variant-east-asian","font-variant-emoji","font-variant-ligatures","font-variant-numeric","font-variant-position","font-variation-settings","font-weight","forced-color-adjust","gap","glyph-orientation-horizontal","glyph-orientation-vertical","grid","grid-area","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-column","grid-column-end","grid-column-start","grid-gap","grid-row","grid-row-end","grid-row-start","grid-template","grid-template-areas","grid-template-columns","grid-template-rows","hanging-punctuation","height","hyphenate-character","hyphenate-limit-chars","hyphens","icon","image-orientation","image-rendering","image-resolution","ime-mode","initial-letter","initial-letter-align","inline-size","inset","inset-area","inset-block","inset-block-end","inset-block-start","inset-inline","inset-inline-end","inset-inline-start","isolation","justify-content","justify-items","justify-self","kerning","left","letter-spacing","lighting-color","line-break","line-height","line-height-step","list-style","list-style-image","list-style-position","list-style-type","margin","margin-block","margin-block-end","margin-block-start","margin-bottom","margin-inline","margin-inline-end","margin-inline-start","margin-left","margin-right","margin-top","margin-trim","marker","marker-end","marker-mid","marker-start","marks","mask","mask-border","mask-border-mode","mask-border-outset","mask-border-repeat","mask-border-slice","mask-border-source","mask-border-width","mask-clip","mask-composite","mask-image","mask-mode","mask-origin","mask-position","mask-repeat","mask-size","mask-type","masonry-auto-flow","math-depth","math-shift","math-style","max-block-size","max-height","max-inline-size","max-width","min-block-size","min-height","min-inline-size","min-width","mix-blend-mode","nav-down","nav-index","nav-left","nav-right","nav-up","none","normal","object-fit","object-position","offset","offset-anchor","offset-distance","offset-path","offset-position","offset-rotate","opacity","order","orphans","outline","outline-color","outline-offset","outline-style","outline-width","overflow","overflow-anchor","overflow-block","overflow-clip-margin","overflow-inline","overflow-wrap","overflow-x","overflow-y","overlay","overscroll-behavior","overscroll-behavior-block","overscroll-behavior-inline","overscroll-behavior-x","overscroll-behavior-y","padding","padding-block","padding-block-end","padding-block-start","padding-bottom","padding-inline","padding-inline-end","padding-inline-start","padding-left","padding-right","padding-top","page","page-break-after","page-break-before","page-break-inside","paint-order","pause","pause-after","pause-before","perspective","perspective-origin","place-content","place-items","place-self","pointer-events","position","position-anchor","position-visibility","print-color-adjust","quotes","r","resize","rest","rest-after","rest-before","right","rotate","row-gap","ruby-align","ruby-position","scale","scroll-behavior","scroll-margin","scroll-margin-block","scroll-margin-block-end","scroll-margin-block-start","scroll-margin-bottom","scroll-margin-inline","scroll-margin-inline-end","scroll-margin-inline-start","scroll-margin-left","scroll-margin-right","scroll-margin-top","scroll-padding","scroll-padding-block","scroll-padding-block-end","scroll-padding-block-start","scroll-padding-bottom","scroll-padding-inline","scroll-padding-inline-end","scroll-padding-inline-start","scroll-padding-left","scroll-padding-right","scroll-padding-top","scroll-snap-align","scroll-snap-stop","scroll-snap-type","scroll-timeline","scroll-timeline-axis","scroll-timeline-name","scrollbar-color","scrollbar-gutter","scrollbar-width","shape-image-threshold","shape-margin","shape-outside","shape-rendering","speak","speak-as","src","stop-color","stop-opacity","stroke","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width","tab-size","table-layout","text-align","text-align-all","text-align-last","text-anchor","text-combine-upright","text-decoration","text-decoration-color","text-decoration-line","text-decoration-skip","text-decoration-skip-ink","text-decoration-style","text-decoration-thickness","text-emphasis","text-emphasis-color","text-emphasis-position","text-emphasis-style","text-indent","text-justify","text-orientation","text-overflow","text-rendering","text-shadow","text-size-adjust","text-transform","text-underline-offset","text-underline-position","text-wrap","text-wrap-mode","text-wrap-style","timeline-scope","top","touch-action","transform","transform-box","transform-origin","transform-style","transition","transition-behavior","transition-delay","transition-duration","transition-property","transition-timing-function","translate","unicode-bidi","user-modify","user-select","vector-effect","vertical-align","view-timeline","view-timeline-axis","view-timeline-inset","view-timeline-name","view-transition-name","visibility","voice-balance","voice-duration","voice-family","voice-pitch","voice-range","voice-rate","voice-stress","voice-volume","white-space","white-space-collapse","widows","width","will-change","word-break","word-spacing","word-wrap","writing-mode","x","y","z-index","zoom"].sort().reverse()
+;return n=>{const a=n.regex,l=(e=>({IMPORTANT:{scope:"meta",begin:"!important"},
+BLOCK_COMMENT:e.C_BLOCK_COMMENT_MODE,HEXCOLOR:{scope:"number",
+begin:/#(([0-9a-fA-F]{3,4})|(([0-9a-fA-F]{2}){3,4}))\b/},FUNCTION_DISPATCH:{
+className:"built_in",begin:/[\w-]+(?=\()/},ATTRIBUTE_SELECTOR_MODE:{
+scope:"selector-attr",begin:/\[/,end:/\]/,illegal:"$",
+contains:[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]},CSS_NUMBER_MODE:{
+scope:"number",
+begin:e.NUMBER_RE+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",
+relevance:0},CSS_VARIABLE:{className:"attr",begin:/--[A-Za-z_][A-Za-z0-9_-]*/}
+}))(n),s=[n.APOS_STRING_MODE,n.QUOTE_STRING_MODE];return{name:"CSS",
+case_insensitive:!0,illegal:/[=|'\$]/,keywords:{keyframePosition:"from to"},
+classNameAliases:{keyframePosition:"selector-tag"},contains:[l.BLOCK_COMMENT,{
+begin:/-(webkit|moz|ms|o)-(?=[a-z])/},l.CSS_NUMBER_MODE,{
+className:"selector-id",begin:/#[A-Za-z0-9_-]+/,relevance:0},{
+className:"selector-class",begin:"\\.[a-zA-Z-][a-zA-Z0-9_-]*",relevance:0
+},l.ATTRIBUTE_SELECTOR_MODE,{className:"selector-pseudo",variants:[{
+begin:":("+t.join("|")+")"},{begin:":(:)?("+o.join("|")+")"}]},l.CSS_VARIABLE,{
+className:"attribute",begin:"\\b("+r.join("|")+")\\b"},{begin:/:/,end:/[;}{]/,
+contains:[l.BLOCK_COMMENT,l.HEXCOLOR,l.IMPORTANT,l.CSS_NUMBER_MODE,...s,{
+begin:/(url|data-uri)\(/,end:/\)/,relevance:0,keywords:{built_in:"url data-uri"
+},contains:[...s,{className:"string",begin:/[^)]/,endsWithParent:!0,
+excludeEnd:!0}]},l.FUNCTION_DISPATCH]},{begin:a.lookahead(/@/),end:"[{;]",
+relevance:0,illegal:/:/,contains:[{className:"keyword",begin:/@-?\w[\w]*(-\w+)*/
+},{begin:/\s/,endsWithParent:!0,excludeEnd:!0,relevance:0,keywords:{
+$pattern:/[a-z-]+/,keyword:"and or not only",attribute:i.join(" ")},contains:[{
+begin:/[a-z-]+(?=:)/,className:"attribute"},...s,l.CSS_NUMBER_MODE]}]},{
+className:"selector-tag",begin:"\\b("+e.join("|")+")\\b"}]}}})()
+;hljs.registerLanguage("css",e)})();