@techexp/webitem 0.5.3 → 0.6.0

package/README-dev.md

@@ -5,13 +5,13 @@ This file contains info to help the developer of the library.
 
 ## Project Directory Structure
 
-1. The root of the project conatins these files
+1. The root of the project contains these files
     1. `.ackrc`: Config for [Ack](https://beyondgrep.com/) grep tool
     2. `.editorconfig`: Config for [EditorConfig](https://editorconfig.org/)
     3. `.eslintrc`: ES Lint customized rules
     4. `.gitignore`: List of files to be ignored by git
     5. `.npmrc`: Configuration for npm.
-    6. `LICENSE`: License file, usaing Apache v 2.0
+    6. `LICENSE`: License file, using Apache v 2.0
     7. `package.json`, `package-lock.json`: NPM package definition.
     8. `README.md`: Info about using the library.
     9. `README-dev.md`: This file.

package/README.md

@@ -4,7 +4,7 @@ A library to simplify creating HTML5 Web Components (Custom Elements).
 ## Introduction
 In modern HTML, you can create web components using
 [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
-This API is powerfull, but can be verbose and complicated. The _webitem.js_ library provides a wrapper
+This API is powerful, but can be verbose and complicated. The _webitem.js_ library provides a wrapper
 around that API in an attempt to make it simple for the application's programmer.
 
 ## Install
@@ -125,7 +125,7 @@ CSS applied to a web component (_through shadow DOM_) is scoped to the component
 with CSS outside the component.
 
 If you need to use a common CSS file within the component, a possible solution is to use
-the `<link>` tag in the component's html, for exmaple, add the next line at the top of your component's html:
+the `<link>` tagDef in the component's html, for exmaple, add the next line at the top of your component's html:
 
 ```html
 <link rel="stylesheet" href="css/common.css">

package/dist/webitem-esm.js

@@ -1,6 +1,6 @@
 // webitem.js Library to simplify creating HTML5 Custom Elements
 // https://github.com/ahabra/webitem
-// Copyright 2021 (C) Abdul Habra. Version 0.5.3.
+// Copyright 2021 (C) Abdul Habra. Version 0.6.0.
 // Apache License Version 2.0
 
 
@@ -17,8 +17,7 @@ function defineElement({
   actionList,
   eventHandlerList
 }) {
-  if (customElements.get(nameWithDash))
-    return false;
+  if (customElements.get(nameWithDash)) return false;
   const el = class extends HTMLElement {
     constructor() {
       super();
@@ -41,8 +40,7 @@ function defineElement({
 }
 function bindProperties(root, propertyList) {
   const result = {};
-  if (!validatePropertyList(propertyList))
-    return result;
+  if (!validatePropertyList(propertyList)) return result;
   propertyList.forEach((p) => addProperty(result, p, root));
   return result;
 }
@@ -54,13 +52,11 @@ function addProperty(obj, prop, root) {
   }
 }
 function createOnChange(prop, root) {
-  if (!prop.onChange)
-    return void 0;
+  if (!prop.onChange) return void 0;
   return (oldValue, newValue) => prop.onChange(root, oldValue, newValue);
 }
 function validatePropertyList(propertyList) {
-  if (!propertyList)
-    return false;
+  if (!propertyList) return false;
   if (!Array.isArray(propertyList)) {
     throw "propertyList must be an array of {name, value, [sel], [attr]} objects";
   }
@@ -68,21 +64,18 @@ function validatePropertyList(propertyList) {
 }
 function defineActions(root, actionList) {
   const actions = {};
-  if (!actionList)
-    return actions;
+  if (!actionList) return actions;
   actionList.forEach((pair) => {
     addAction(root, actions, pair.name, pair.action);
   });
   return actions;
 }
 function addAction(root, actions, name, action) {
-  if (!Objecter.isString(name) || !Objecter.isFunction(action))
-    return;
+  if (!Objecter.isString(name) || !Objecter.isFunction(action)) return;
   actions[name] = action.bind(root);
 }
 function addEventListeners(root, eventHandlerList) {
-  if (!eventHandlerList)
-    return;
+  if (!eventHandlerList) return;
   if (!Array.isArray(eventHandlerList)) {
     throw "eventHandlerList must be an array of {sel, eventName, listener} objects";
   }
@@ -110,8 +103,7 @@ function getCss(css, display) {
 }
 function buildCss(css) {
   css = Stringer.trim(css);
-  if (css.length === 0)
-    return "";
+  if (css.length === 0) return "";
   if (!Stringer.startsWith(css, "<style>", false)) {
     css = Domer.tag("style", {}, css);
   }
@@ -119,8 +111,7 @@ function buildCss(css) {
 }
 function displayStyle(display) {
   display = Stringer.trim(display);
-  if (display.length === 0)
-    return "";
+  if (display.length === 0) return "";
   return `
   <style>
     :host { display: ${display};}

package/dist/webitem-script-min.js

@@ -1,15 +1,15 @@
 // webitem.js Library to simplify creating HTML5 Custom Elements
 // https://github.com/ahabra/webitem
-// Copyright 2021 (C) Abdul Habra. Version 0.5.3.
+// Copyright 2021 (C) Abdul Habra. Version 0.6.0.
 // Apache License Version 2.0
 
 
-var webitem=(()=>{var v=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ie=Object.prototype.hasOwnProperty;var ue=(e,t)=>{for(var n in t)v(e,n,{get:t[n],enumerable:!0})},oe=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of re(t))!ie.call(e,i)&&i!==n&&v(e,i,{get:()=>t[i],enumerable:!(r=ne(t,i))||r.enumerable});return e};var fe=e=>oe(v({},"__esModule",{value:!0}),e);var ft={};ue(ft,{defineElement:()=>Ue});var se=Object.defineProperty,g=(e,t)=>{for(var n in t)se(e,n,{get:t[n],enumerable:!0})},l={};g(l,{add:()=>Oe,all:()=>F,classPresentIf:()=>Te,createElement:()=>Se,createElements:()=>M,first:()=>be,getAttributes:()=>ve,id:()=>Ee,removeElements:()=>Ne,setContent:()=>Ce,tag:()=>_});var d={};g(d,{equals:()=>q,forEachEntry:()=>L,has:()=>le,isDate:()=>S,isFunction:()=>R,isInteger:()=>ce,isNil:()=>ae,isNumber:()=>P,isRegExp:()=>j,isString:()=>p});function ae(e){return e==null}function p(e){return m(e,"String")}function R(e){return m(e,"Function")}function S(e){return m(e,"Date")}function P(e){return m(e,"Number")?Number.isNaN(e)?!1:Number.isFinite(e):!p(e)||(e=e.trim(),e==="")?!1:!isNaN(e)}function ce(e){return P(e)?Number.isInteger(Number.parseFloat(e)):!1}function j(e){return m(e,"RegExp")}function m(e,t){return Object.prototype.toString.call(e)===`[object ${t}]`}function L(e,t){if(!(!e||!t)){if(Array.isArray(e)){e.forEach((n,r)=>{t(r,n)});return}Object.entries(e).forEach(n=>t(n[0],n[1]))}}function le(e,t){return!e||!t?!1:Object.prototype.hasOwnProperty.call(e,t)}function q(e,t){return e===t?!0:e===void 0||t===void 0?!1:de(e,t)}function de(e,t){return N(e)||N(t)?e===t:he(e,t)}var me=new Set(["boolean","number","bigint","string","symbol"]);function N(e){return me.has(typeof e)}function he(e,t){return ge(e,t)?pe(e,t)?!0:ye(e,t):!1}function ge(e,t){return T(e)===T(t)}function T(e){return Object.prototype.toString.call(e)}function pe(e,t){return S(e)&&S(t)?e.getTime()===t.getTime():!1}function ye(e,t){let n=Object.keys(e);return n.length!==Object.keys(t).length?!1:n.every(r=>q(e[r],t[r]))}function Ee(e,t=document){return O(t)&&(t=t.shadowRoot),t.getElementById(e)}function F(e,t=document){return O(t)&&(t=t.shadowRoot),Array.from(t.querySelectorAll(e))}function be(e,t=document){if(O(t)&&(t=t.shadowRoot),!e.includes("/"))return t.querySelector(e);let n=e.split("/").map(r=>r.trim()).filter(r=>r.length>0);for(let r of n)if(t=we(r,t),t===null)break;return t}function we(e,t){return e==="shadowRoot"||e==="shadow-root"?t.shadowRoot:t.querySelector(e)}function O(e){return e&&e.shadowRoot&&e.tagName.includes("-")}function ve(e){let t={},n=e.attributes;if(!n||n.length===0)return t;for(let r=0;r<n.length;r++){let i=n[r];t[i.name]=i.value}return t}function M(e=""){if(e=e.trim(),!e)return[];let t=document.createElement("template");return t.innerHTML=e,Array.from(t.content.childNodes)}function Se(e,t={},n=""){let r=_(e,t,n),i=M(r);return i.length===0?null:i[0]}function _(e,t={},n=""){if(!e)return"";let r=Ae(t);return`<${e}${r}>${n}</${e}>`}function Ae(e){let t=[];return L(e,(r,i)=>{t.push(`${r}="${i}"`)}),(t.length>0?" ":"")+t.join(" ")}var Le=new Set(["beforebegin","afterbegin","beforeend","afterend"]);function Oe(e,t,n="beforeend"){return n=n.toLowerCase(),Le.has(n)?(p(t)?e.insertAdjacentHTML(n,t):xe(e,t,n),!0):!1}function xe(e,t,n){Array.isArray(t)?t.forEach(r=>e.insertAdjacentElement(n,r)):e.insertAdjacentElement(n,t)}function Ce(e,...t){e.innerHTML="",e.append(...t)}function Ne(e,t=document){F(e,t).forEach(r=>{r.parentNode.removeChild(r)})}function Te(e,t,n){if(!e)return;let r=n?"add":"remove";e.classList[r](t)}var h={};g(h,{endsWith:()=>D,indexOf:()=>x,indexOfFirstMatch:()=>$e,indexOfLastMatch:()=>Re,isEmpty:()=>y,removePrefix:()=>H,removeSuffix:()=>I,removeSurrounding:()=>Pe,replaceAll:()=>V,replaceTemplate:()=>Fe,startsWith:()=>W,strip:()=>We,stripEnd:()=>_e,stripStart:()=>Me,substringAfter:()=>je,substringBefore:()=>qe,trim:()=>A});function x(e,t,n=0,r=!1){return e?r?e.toLowerCase().indexOf(t.toLowerCase(),n):e.indexOf(t,n):-1}function $e(e,t){return!t||!e?-1:e.split("").findIndex(t)}function Re(e,t){if(!t||!e)return-1;let n=e.split("");for(let r=n.length;r>=0;--r)if(t(n[r],r))return r;return-1}function W(e="",t=void 0,n=!1){if(n){let r=e.substring(0,t.length).toLowerCase();return t.toLowerCase()===r}return e.startsWith(t)}function D(e,t,n=!1){return n?e.toLowerCase().endsWith(t.toLowerCase()):e.endsWith(t)}function H(e,t,n=!1){return W(e,t,n)&&(e=e.substring(t.length)),e}function I(e,t,n=!1){return D(e,t,n)&&(e=e.substring(0,e.length-t.length)),e}function Pe(e,t,n,r=!1){return I(H(e,t,r),n,r)}function je(e,t,n=!1){if(!t)return e;let r=x(e,t,0,n);return r<0?"":e.substring(r+t.length)}function qe(e,t,n=!1){if(!t)return"";let r=x(e,t,0,n);return r<0?e:e.substring(0,r)}function A(e){return y(e)?"":(p(e)||(e=String(e)),e.trim(e))}function y(e){return e==null||e===""}function V(e,t,n){if(R(String.prototype.replaceAll))return e.replaceAll(t,n);if(j(t))return e.replace(t,n);let r=new RegExp(t,"g");return e.replace(r,n)}function Fe(e="",t={},n="${",r="}"){return L(t,(i,u)=>{u!==void 0&&(i=n+i+r,e=V(e,i,u))}),e}function Me(e,t=""){return y(e)?"":t?k(e,new Set(Array.from(t))):e}function k(e,t){for(let n=0;n<e.length;n++)if(!t.has(e.charAt(n)))return e.substring(n);return""}function _e(e,t=""){return y(e)?"":t?B(e,new Set(Array.from(t))):e}function B(e,t){for(let n=e.length-1;n>=0;n--)if(!t.has(e.charAt(n)))return e.substring(0,n+1);return""}function We(e,t=""){if(e===void 0||e==="")return"";if(!t)return e;let n=new Set(Array.from(t));return e=k(e,n),e?B(e,n):""}var De={};g(De,{compareLines:()=>He});function He(e,t,{trim:n=!0,skipEmpty:r=!0,caseSensitive:i=!0}={trim:!0,skipEmpty:!0,caseSensitive:!0}){if(e=$(e,{trim:n,skipEmpty:r}),t=$(t,{trim:n,skipEmpty:r}),e.length!==t.length)return`t1 has ${e.length} lines(s) while t2 has ${t.length} line(s).`;for(let u=0;u<e.length;u++){let o=Ie(e[u],t[u],u,i);if(o.length>0)return o}return""}function Ie(e,t,n,r){let i=r?e:e.toLowerCase(),u=r?t:t.toLowerCase();return i!==u?`Line #${n+1} mismatch.
+var webitem=(()=>{var v=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ie=Object.prototype.hasOwnProperty;var ue=(e,t)=>{for(var n in t)v(e,n,{get:t[n],enumerable:!0})},oe=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of re(t))!ie.call(e,i)&&i!==n&&v(e,i,{get:()=>t[i],enumerable:!(r=ne(t,i))||r.enumerable});return e};var fe=e=>oe(v({},"__esModule",{value:!0}),e);var at={};ue(at,{defineElement:()=>Ye});var se=Object.defineProperty,g=(e,t)=>{for(var n in t)se(e,n,{get:t[n],enumerable:!0})},l={};g(l,{add:()=>xe,all:()=>F,classPresentIf:()=>$e,createElement:()=>Ae,createElements:()=>M,first:()=>be,getAttributes:()=>Se,id:()=>Ee,removeElements:()=>Te,setContent:()=>Ne,tag:()=>_});var d={};g(d,{equals:()=>q,forEachEntry:()=>L,has:()=>le,isDate:()=>S,isFunction:()=>P,isInteger:()=>ce,isNil:()=>ae,isNumber:()=>R,isRegExp:()=>j,isString:()=>p});function ae(e){return e==null}function p(e){return m(e,"String")}function P(e){return m(e,"Function")}function S(e){return m(e,"Date")}function R(e){return m(e,"Number")?Number.isNaN(e)?!1:Number.isFinite(e):!p(e)||(e=e.trim(),e==="")?!1:!isNaN(e)}function ce(e){return R(e)?Number.isInteger(Number.parseFloat(e)):!1}function j(e){return m(e,"RegExp")}function m(e,t){return Object.prototype.toString.call(e)===`[object ${t}]`}function L(e,t){if(!(!e||!t)){if(Array.isArray(e)){e.forEach((n,r)=>{t(r,n)});return}Object.entries(e).forEach(n=>t(n[0],n[1]))}}function le(e,t){return!e||!t?!1:Object.prototype.hasOwnProperty.call(e,t)}function q(e,t){return e===t?!0:e===void 0||t===void 0?!1:de(e,t)}function de(e,t){return N(e)||N(t)?e===t:he(e,t)}var me=new Set(["boolean","number","bigint","string","symbol"]);function N(e){return me.has(typeof e)}function he(e,t){return ge(e,t)?pe(e,t)?!0:ye(e,t):!1}function ge(e,t){return T(e)===T(t)}function T(e){return Object.prototype.toString.call(e)}function pe(e,t){return S(e)&&S(t)?e.getTime()===t.getTime():!1}function ye(e,t){let n=Object.keys(e);return n.length!==Object.keys(t).length?!1:n.every(r=>q(e[r],t[r]))}function Ee(e,t=document){return O(t)&&(t=t.shadowRoot),t.getElementById(e)}function F(e,t=document){return O(t)&&(t=t.shadowRoot),Array.from(t.querySelectorAll(e))}function be(e,t=document){return O(t)&&(t=t.shadowRoot),e.includes("/")?we(e,t):t.querySelector(e)}function we(e,t){let n=e.split("/").map(r=>r.trim()).filter(r=>r.length>0);for(let r of n)if(t=ve(r,t),t===null)break;return t}function ve(e,t){return e==="shadowRoot"||e==="shadow-root"?t.shadowRoot:t.querySelector(e)}function O(e){return e&&e.shadowRoot&&e.tagName.includes("-")}function Se(e){let t={},n=e.attributes;if(!n||n.length===0)return t;for(let r=0;r<n.length;r++){let i=n[r];t[i.name]=i.value}return t}function M(e=""){if(e=e.trim(),!e)return[];let t=document.createElement("template");return t.innerHTML=e,Array.from(t.content.childNodes)}function Ae(e,t={},n=""){let r=_(e,t,n),i=M(r);return i.length===0?null:i[0]}function _(e,t={},n=""){if(!e)return"";let r=Le(t);return`<${e}${r}>${n}</${e}>`}function Le(e){let t=[];return L(e,(r,i)=>{t.push(`${r}="${i}"`)}),(t.length>0?" ":"")+t.join(" ")}var Oe=new Set(["beforebegin","afterbegin","beforeend","afterend"]);function xe(e,t,n="beforeend"){return n=n.toLowerCase(),Oe.has(n)?(p(t)?e.insertAdjacentHTML(n,t):Ce(e,t,n),!0):!1}function Ce(e,t,n){Array.isArray(t)?t.forEach(r=>e.insertAdjacentElement(n,r)):e.insertAdjacentElement(n,t)}function Ne(e,...t){e.innerHTML="",e.append(...t)}function Te(e,t=document){F(e,t).forEach(r=>{r.parentNode.removeChild(r)})}function $e(e,t,n){if(!e)return;let r=n?"add":"remove";e.classList[r](t)}var h={};g(h,{endsWith:()=>D,indexOf:()=>x,indexOfFirstMatch:()=>Pe,indexOfLastMatch:()=>Re,isEmpty:()=>y,removePrefix:()=>H,removeSuffix:()=>I,removeSurrounding:()=>je,replaceAll:()=>V,replaceTemplate:()=>Me,startsWith:()=>W,strip:()=>De,stripEnd:()=>We,stripStart:()=>_e,substringAfter:()=>qe,substringBefore:()=>Fe,trim:()=>A});function x(e,t,n=0,r=!1){return e?r?e.toLowerCase().indexOf(t.toLowerCase(),n):e.indexOf(t,n):-1}function Pe(e,t){return!t||!e?-1:e.split("").findIndex(t)}function Re(e,t){if(!t||!e)return-1;let n=e.split("");for(let r=n.length;r>=0;--r)if(t(n[r],r))return r;return-1}function W(e="",t=void 0,n=!1){if(n){let r=e.substring(0,t.length).toLowerCase();return t.toLowerCase()===r}return e.startsWith(t)}function D(e,t,n=!1){return n?e.toLowerCase().endsWith(t.toLowerCase()):e.endsWith(t)}function H(e,t,n=!1){return W(e,t,n)&&(e=e.substring(t.length)),e}function I(e,t,n=!1){return D(e,t,n)&&(e=e.substring(0,e.length-t.length)),e}function je(e,t,n,r=!1){return I(H(e,t,r),n,r)}function qe(e,t,n=!1){if(!t)return e;let r=x(e,t,0,n);return r<0?"":e.substring(r+t.length)}function Fe(e,t,n=!1){if(!t)return"";let r=x(e,t,0,n);return r<0?e:e.substring(0,r)}function A(e){return y(e)?"":(p(e)||(e=String(e)),e.trim(e))}function y(e){return e==null||e===""}function V(e,t,n){if(P(String.prototype.replaceAll))return e.replaceAll(t,n);if(j(t))return e.replace(t,n);let r=new RegExp(t,"g");return e.replace(r,n)}function Me(e="",t={},n="${",r="}"){return L(t,(i,u)=>{u!==void 0&&(i=n+i+r,e=V(e,i,u))}),e}function _e(e,t=""){return y(e)?"":t?k(e,new Set(Array.from(t))):e}function k(e,t){for(let n=0;n<e.length;n++)if(!t.has(e.charAt(n)))return e.substring(n);return""}function We(e,t=""){return y(e)?"":t?B(e,new Set(Array.from(t))):e}function B(e,t){for(let n=e.length-1;n>=0;n--)if(!t.has(e.charAt(n)))return e.substring(0,n+1);return""}function De(e,t=""){if(e===void 0||e==="")return"";if(!t)return e;let n=new Set(Array.from(t));return e=k(e,n),e?B(e,n):""}var He={};g(He,{compareLines:()=>Ie});function Ie(e,t,{trim:n=!0,skipEmpty:r=!0,caseSensitive:i=!0}={trim:!0,skipEmpty:!0,caseSensitive:!0}){return e=$(e,{trim:n,skipEmpty:r}),t=$(t,{trim:n,skipEmpty:r}),e.length!==t.length?`t1 has ${e.length} lines(s) while t2 has ${t.length} line(s).`:Ve(e,t,i)}function Ve(e,t,n){for(let r=0;r<e.length;r++){let i=ke(e[r],t[r],r,n);if(i.length>0)return i}return""}function ke(e,t,n,r){let i=r?e:e.toLowerCase(),u=r?t:t.toLowerCase();return i!==u?`Line #${n+1} mismatch.
 ${e}
 ${t}`:""}function $(e,{trim:t,skipEmpty:n}){return t&&(e=A(e)),e=e.split(`
-`),t&&(e=e.map(r=>A(r))),n&&(e=e.filter(r=>!!r)),e}function C({obj:e={},prop:t,sel:n,attr:r,root:i=document,getter:u,setter:o,onChange:f}){Qe(t),ke(e,t);let s={};return u||(u=()=>Be({prop:t,sel:n,attr:r,root:i,objNotBound:s})),o||(o=a=>ze({prop:t,value:a,root:i,sel:n,attr:r,objNotBound:s})),Ve({obj:e,prop:t,getter:u,setter:o,onChange:f})}function Ve({obj:e,prop:t,getter:n,setter:r,onChange:i}){return Object.defineProperty(e,t,{get:()=>n(),set:o=>{if(i){let f=n(t);f!==o&&i(f,o)}r(o)},configurable:!0,enumerable:!0}),e}var E=e=>e.type==="checkbox",b=e=>e.type==="radio",G=e=>e.nodeName.toLowerCase()==="select",J=e=>e.nodeName.toLowerCase()==="input-field",K=e=>"value"in e,z=e=>new Set(Array.isArray(e)?e:[e]);function ke(e,t){let n=e[t];return n!==void 0&&(console.info(`Property '${t}' already exists in object. Will override previous definition but retain old value of ${n}.`),e[t]=n),n}function Be({prop:e,root:t,sel:n,attr:r,objNotBound:i}){return n?Ge(t,n,r):i[e]}function ze({prop:e,value:t,root:n,sel:r,attr:i,objNotBound:u}){if(r){Je(n,r,t,i);return}u[e]=t}function Ge(e,t,n){let r=Q(e,t);if(r.length===0)return null;let i=r[0];if(n)return i.getAttribute(n);if(!K(i))return i.innerHTML;if(E(i))return r.filter(u=>E(u)&&u.checked).map(u=>u.value==="on"?u.name:u.value);if(G(i))return[...i.querySelectorAll("option")].filter(o=>o.selected).map(o=>o.value);if(!(b(i)&&(i=r.filter(b).find(u=>u.checked),!i)))return J(i)?i.getAttribute("value"):i.value}function Je(e,t,n,r){let i=Q(e,t);if(i.length===0)return;let u=i[0];if(E(u)){let o=z(n);i.filter(E).forEach(f=>f.checked=o.has(f.value)||o.has(f.name));return}if(G(u)){let o=z(n);u.querySelectorAll("option").forEach(f=>f.selected=o.has(f.value));return}if(b(u)){i.filter(b).forEach(o=>o.checked=o.value===n);return}i.forEach(o=>Ke(o,n,r))}function Ke(e,t,n){n?e.setAttribute(n,t):K(e)?e.value=t:J(e)?e.setAttribute("value",t):e.innerHTML=t}function Q(e,t){let n=e.querySelectorAll(t);return n.length===0&&console.warn(`No elements found matching selector ${t}`),[...n]}function Qe(e){if(typeof e!="string"||e.length===0)throw"'prop' argument must be a String defining the name a property."}function Ue({nameWithDash:e,html:t,css:n,display:r,propertyList:i,actionList:u,eventHandlerList:o}){if(customElements.get(e))return!1;let f=class extends HTMLElement{constructor(){super();let s=this;nt(this,t,n,r),this.wi={},this.wi.properties=Xe(this,i),this.wi.actions=et(this,u),tt(this,o),this.wi.addProperty=function(a,c,w,Z,ee){let te={name:a,value:c,sel:w,attr:Z,onChange:ee};U(s.wi.properties,te,s)},this.wi.addAction=(a,c)=>X(s,s.wi.actions,a,c),this.wi.addEventListener=(a,c,w)=>Y(s,{sel:a,eventName:c,listener:w})}};return customElements.define(e,f),!0}function Xe(e,t){let n={};return Ze(t)&&t.forEach(r=>U(n,r,e)),n}function U(e,t,n){let r=Ye(t,n);C({obj:e,prop:t.name,sel:t.sel,attr:t.attr,root:n.shadowRoot,onChange:r}),t.value!==void 0&&(e[t.name]=t.value)}function Ye(e,t){if(e.onChange)return(n,r)=>e.onChange(t,n,r)}function Ze(e){if(!e)return!1;if(!Array.isArray(e))throw"propertyList must be an array of {name, value, [sel], [attr]} objects";return!0}function et(e,t){let n={};return t&&t.forEach(r=>{X(e,n,r.name,r.action)}),n}function X(e,t,n,r){!d.isString(n)||!d.isFunction(r)||(t[n]=r.bind(e))}function tt(e,t){if(t){if(!Array.isArray(t))throw"eventHandlerList must be an array of {sel, eventName, listener} objects";t.forEach(n=>Y(e,n))}}function Y(e,{sel:t,eventName:n,listener:r}){l.all(t,e.shadowRoot).forEach(u=>{u.addEventListener(n,o=>{r(o,e)})})}function nt(e,t,n,r){t=rt(e,t);let i=e.attachShadow({mode:"open"}),u=l.createElements(it(n,r)+t);i.append(...u)}function rt(e,t){return d.isFunction(t)?t(e):t}function it(e,t){return ot(t)+ut(e)}function ut(e){return e=h.trim(e),e.length===0?"":(h.startsWith(e,"<style>",!1)||(e=l.tag("style",{},e)),e)}function ot(e){return e=h.trim(e),e.length===0?"":`
+`),t&&(e=e.map(r=>A(r))),n&&(e=e.filter(r=>!!r)),e}function C({obj:e={},prop:t,sel:n,attr:r,root:i=document,getter:u,setter:o,onChange:f}){Xe(t),ze(e,t);let s={};return u||(u=()=>Ge({prop:t,sel:n,attr:r,root:i,objNotBound:s})),o||(o=a=>Je({prop:t,value:a,root:i,sel:n,attr:r,objNotBound:s})),Be({obj:e,prop:t,getter:u,setter:o,onChange:f})}function Be({obj:e,prop:t,getter:n,setter:r,onChange:i}){return Object.defineProperty(e,t,{get:()=>n(),set:o=>{if(i){let f=n(t);f!==o&&i(f,o)}r(o)},configurable:!0,enumerable:!0}),e}var E=e=>e.type==="checkbox",b=e=>e.type==="radio",G=e=>e.nodeName.toLowerCase()==="select",J=e=>e.nodeName.toLowerCase()==="input-field",K=e=>"value"in e,z=e=>new Set(Array.isArray(e)?e:[e]);function ze(e,t){let n=e[t];return n!==void 0&&(console.info(`Property '${t}' already exists in object. Will override previous definition but retain old value of ${n}.`),e[t]=n),n}function Ge({prop:e,root:t,sel:n,attr:r,objNotBound:i}){return n?Ke(t,n,r):i[e]}function Je({prop:e,value:t,root:n,sel:r,attr:i,objNotBound:u}){if(r){Qe(n,r,t,i);return}u[e]=t}function Ke(e,t,n){let r=Q(e,t);if(r.length===0)return null;let i=r[0];if(n)return i.getAttribute(n);if(!K(i))return i.innerHTML;if(E(i))return r.filter(u=>E(u)&&u.checked).map(u=>u.value==="on"?u.name:u.value);if(G(i))return[...i.querySelectorAll("option")].filter(o=>o.selected).map(o=>o.value);if(!(b(i)&&(i=r.filter(b).find(u=>u.checked),!i)))return J(i)?i.getAttribute("value"):i.value}function Qe(e,t,n,r){let i=Q(e,t);if(i.length===0)return;let u=i[0];if(E(u)){let o=z(n);i.filter(E).forEach(f=>f.checked=o.has(f.value)||o.has(f.name));return}if(G(u)){let o=z(n);u.querySelectorAll("option").forEach(f=>f.selected=o.has(f.value));return}if(b(u)){i.filter(b).forEach(o=>o.checked=o.value===n);return}i.forEach(o=>Ue(o,n,r))}function Ue(e,t,n){n?e.setAttribute(n,t):K(e)?e.value=t:J(e)?e.setAttribute("value",t):e.innerHTML=t}function Q(e,t){let n=e.querySelectorAll(t);return n.length===0&&console.warn(`No elements found matching selector ${t}`),[...n]}function Xe(e){if(typeof e!="string"||e.length===0)throw"'prop' argument must be a String defining the name a property."}function Ye({nameWithDash:e,html:t,css:n,display:r,propertyList:i,actionList:u,eventHandlerList:o}){if(customElements.get(e))return!1;let f=class extends HTMLElement{constructor(){super();let s=this;it(this,t,n,r),this.wi={},this.wi.properties=Ze(this,i),this.wi.actions=nt(this,u),rt(this,o),this.wi.addProperty=function(a,c,w,Z,ee){let te={name:a,value:c,sel:w,attr:Z,onChange:ee};U(s.wi.properties,te,s)},this.wi.addAction=(a,c)=>X(s,s.wi.actions,a,c),this.wi.addEventListener=(a,c,w)=>Y(s,{sel:a,eventName:c,listener:w})}};return customElements.define(e,f),!0}function Ze(e,t){let n={};return tt(t)&&t.forEach(r=>U(n,r,e)),n}function U(e,t,n){let r=et(t,n);C({obj:e,prop:t.name,sel:t.sel,attr:t.attr,root:n.shadowRoot,onChange:r}),t.value!==void 0&&(e[t.name]=t.value)}function et(e,t){if(e.onChange)return(n,r)=>e.onChange(t,n,r)}function tt(e){if(!e)return!1;if(!Array.isArray(e))throw"propertyList must be an array of {name, value, [sel], [attr]} objects";return!0}function nt(e,t){let n={};return t&&t.forEach(r=>{X(e,n,r.name,r.action)}),n}function X(e,t,n,r){!d.isString(n)||!d.isFunction(r)||(t[n]=r.bind(e))}function rt(e,t){if(t){if(!Array.isArray(t))throw"eventHandlerList must be an array of {sel, eventName, listener} objects";t.forEach(n=>Y(e,n))}}function Y(e,{sel:t,eventName:n,listener:r}){l.all(t,e.shadowRoot).forEach(u=>{u.addEventListener(n,o=>{r(o,e)})})}function it(e,t,n,r){t=ut(e,t);let i=e.attachShadow({mode:"open"}),u=l.createElements(ot(n,r)+t);i.append(...u)}function ut(e,t){return d.isFunction(t)?t(e):t}function ot(e,t){return st(t)+ft(e)}function ft(e){return e=h.trim(e),e.length===0?"":(h.startsWith(e,"<style>",!1)||(e=l.tag("style",{},e)),e)}function st(e){return e=h.trim(e),e.length===0?"":`
   <style>
     :host { display: ${e};}
     :host([hidden]) {display: none;}
   </style>
-  `}return fe(ft);})();
+  `}return fe(at);})();

package/dist/webitem-script.js

@@ -1,6 +1,6 @@
 // webitem.js Library to simplify creating HTML5 Custom Elements
 // https://github.com/ahabra/webitem
-// Copyright 2021 (C) Abdul Habra. Version 0.5.3.
+// Copyright 2021 (C) Abdul Habra. Version 0.6.0.
 // Apache License Version 2.0
 
 
@@ -76,20 +76,16 @@ var webitem = (() => {
   }
   function isNumber(n) {
     if (isType(n, "Number")) {
-      if (Number.isNaN(n))
-        return false;
+      if (Number.isNaN(n)) return false;
       return Number.isFinite(n);
     }
-    if (!isString(n))
-      return false;
+    if (!isString(n)) return false;
     n = n.trim();
-    if (n === "")
-      return false;
+    if (n === "") return false;
     return !isNaN(n);
   }
   function isInteger(n) {
-    if (!isNumber(n))
-      return false;
+    if (!isNumber(n)) return false;
     return Number.isInteger(Number.parseFloat(n));
   }
   function isRegExp(re) {
@@ -99,8 +95,7 @@ var webitem = (() => {
     return Object.prototype.toString.call(v) === `[object ${type}]`;
   }
   function forEachEntry(object, func) {
-    if (!object || !func)
-      return;
+    if (!object || !func) return;
     if (Array.isArray(object)) {
       object.forEach((v, index) => {
         func(index, v);
@@ -110,20 +105,16 @@ var webitem = (() => {
     Object.entries(object).forEach((p) => func(p[0], p[1]));
   }
   function has(object, propName) {
-    if (!object || !propName)
-      return false;
+    if (!object || !propName) return false;
     return Object.prototype.hasOwnProperty.call(object, propName);
   }
   function equals(a, b) {
-    if (a === b)
-      return true;
-    if (a === void 0 || b === void 0)
-      return false;
+    if (a === b) return true;
+    if (a === void 0 || b === void 0) return false;
     return isEqual(a, b);
   }
   function isEqual(a, b) {
-    if (isSimpleType(a) || isSimpleType(b))
-      return a === b;
+    if (isSimpleType(a) || isSimpleType(b)) return a === b;
     return isEqualCompoundType(a, b);
   }
   var simpleTypes = /* @__PURE__ */ new Set(["boolean", "number", "bigint", "string", "symbol"]);
@@ -131,10 +122,8 @@ var webitem = (() => {
     return simpleTypes.has(typeof v);
   }
   function isEqualCompoundType(a, b) {
-    if (!isEqualType(a, b))
-      return false;
-    if (isEqualDates(a, b))
-      return true;
+    if (!isEqualType(a, b)) return false;
+    if (isEqualDates(a, b)) return true;
     return isEqualObjects(a, b);
   }
   function isEqualType(a, b) {
@@ -151,8 +140,7 @@ var webitem = (() => {
   }
   function isEqualObjects(a, b) {
     const akeys = Object.keys(a);
-    if (akeys.length !== Object.keys(b).length)
-      return false;
+    if (akeys.length !== Object.keys(b).length) return false;
     return akeys.every((k) => equals(a[k], b[k]));
   }
   function id(elementId, root = document) {
@@ -174,11 +162,13 @@ var webitem = (() => {
     if (!selector.includes("/")) {
       return root.querySelector(selector);
     }
+    return traverseSelectorPath(selector, root);
+  }
+  function traverseSelectorPath(selector, root) {
     const path = selector.split("/").map((p) => p.trim()).filter((p) => p.length > 0);
     for (const p of path) {
       root = nextChild(p, root);
-      if (root === null)
-        break;
+      if (root === null) break;
     }
     return root;
   }
@@ -192,8 +182,7 @@ var webitem = (() => {
   function getAttributes(el) {
     const result = {};
     const atts = el.attributes;
-    if (!atts || atts.length === 0)
-      return result;
+    if (!atts || atts.length === 0) return result;
     for (let i = 0; i < atts.length; i++) {
       const a = atts[i];
       result[a.name] = a.value;
@@ -202,8 +191,7 @@ var webitem = (() => {
   }
   function createElements(html = "") {
     html = html.trim();
-    if (!html)
-      return [];
+    if (!html) return [];
     const temp = document.createElement("template");
     temp.innerHTML = html;
     return Array.from(temp.content.childNodes);
@@ -211,13 +199,11 @@ var webitem = (() => {
   function createElement(name, attributes = {}, content = "") {
     const html = tag(name, attributes, content);
     const elements = createElements(html);
-    if (elements.length === 0)
-      return null;
+    if (elements.length === 0) return null;
     return elements[0];
   }
   function tag(name, attributes = {}, content = "") {
-    if (!name)
-      return "";
+    if (!name) return "";
     const atts = attsToString(attributes);
     return `<${name}${atts}>${content}</${name}>`;
   }
@@ -232,8 +218,7 @@ var webitem = (() => {
   var LOCATIONS = /* @__PURE__ */ new Set(["beforebegin", "afterbegin", "beforeend", "afterend"]);
   function add(target, tobeAdded, location = "beforeend") {
     location = location.toLowerCase();
-    if (!LOCATIONS.has(location))
-      return false;
+    if (!LOCATIONS.has(location)) return false;
     if (isString(tobeAdded)) {
       target.insertAdjacentHTML(location, tobeAdded);
     } else {
@@ -259,8 +244,7 @@ var webitem = (() => {
     });
   }
   function classPresentIf(el, cssClass, condition) {
-    if (!el)
-      return;
+    if (!el) return;
     const func = condition ? "add" : "remove";
     el.classList[func](cssClass);
   }
@@ -285,25 +269,21 @@ var webitem = (() => {
     trim: () => trim
   });
   function indexOf(st, search, fromIndex = 0, ignoreCase = false) {
-    if (!st)
-      return -1;
+    if (!st) return -1;
     if (ignoreCase) {
       return st.toLowerCase().indexOf(search.toLowerCase(), fromIndex);
     }
     return st.indexOf(search, fromIndex);
   }
   function indexOfFirstMatch(st, callback) {
-    if (!callback || !st)
-      return -1;
+    if (!callback || !st) return -1;
     return st.split("").findIndex(callback);
   }
   function indexOfLastMatch(st, callback) {
-    if (!callback || !st)
-      return -1;
+    if (!callback || !st) return -1;
     const chars = st.split("");
     for (let i = chars.length; i >= 0; --i) {
-      if (callback(chars[i], i))
-        return i;
+      if (callback(chars[i], i)) return i;
     }
     return -1;
   }
@@ -340,8 +320,7 @@ var webitem = (() => {
       return st;
     }
     const i = indexOf(st, search, 0, ignoreCase);
-    if (i < 0)
-      return "";
+    if (i < 0) return "";
     return st.substring(i + search.length);
   }
   function substringBefore(st, search, ignoreCase = false) {
@@ -349,13 +328,11 @@ var webitem = (() => {
       return "";
     }
     const i = indexOf(st, search, 0, ignoreCase);
-    if (i < 0)
-      return st;
+    if (i < 0) return st;
     return st.substring(0, i);
   }
   function trim(s) {
-    if (isEmpty(s))
-      return "";
+    if (isEmpty(s)) return "";
     if (!isString(s)) {
       s = String(s);
     }
@@ -384,10 +361,8 @@ var webitem = (() => {
     return text;
   }
   function stripStart(s, stripChars = "") {
-    if (isEmpty(s))
-      return "";
-    if (!stripChars)
-      return s;
+    if (isEmpty(s)) return "";
+    if (!stripChars) return s;
     return stripStart_(s, new Set(Array.from(stripChars)));
   }
   function stripStart_(s, stripSet) {
@@ -399,10 +374,8 @@ var webitem = (() => {
     return "";
   }
   function stripEnd(s, stripChars = "") {
-    if (isEmpty(s))
-      return "";
-    if (!stripChars)
-      return s;
+    if (isEmpty(s)) return "";
+    if (!stripChars) return s;
     return stripEnd_(s, new Set(Array.from(stripChars)));
   }
   function stripEnd_(s, stripSet) {
@@ -414,14 +387,11 @@ var webitem = (() => {
     return "";
   }
   function strip(s, stripChars = "") {
-    if (s === void 0 || s === "")
-      return "";
-    if (!stripChars)
-      return s;
+    if (s === void 0 || s === "") return "";
+    if (!stripChars) return s;
     const stripSet = new Set(Array.from(stripChars));
     s = stripStart_(s, stripSet);
-    if (!s)
-      return "";
+    if (!s) return "";
     return stripEnd_(s, stripSet);
   }
   var LineCompare_exports = {};
@@ -434,6 +404,9 @@ var webitem = (() => {
     if (t1.length !== t2.length) {
       return `t1 has ${t1.length} lines(s) while t2 has ${t2.length} line(s).`;
     }
+    return compareArraysOfLines(t1, t2, caseSensitive);
+  }
+  function compareArraysOfLines(t1, t2, caseSensitive) {
     for (let i = 0; i < t1.length; i++) {
       const result = compareTwoLines(t1[i], t2[i], i, caseSensitive);
       if (result.length > 0) {
@@ -521,8 +494,7 @@ ${t2}`;
     return oldValue;
   }
   function getValue({ prop, root, sel, attr, objNotBound }) {
-    if (sel)
-      return getDomVal(root, sel, attr);
+    if (sel) return getDomVal(root, sel, attr);
     return objNotBound[prop];
   }
   function setValue({ prop, value, root, sel, attr, objNotBound }) {
@@ -534,13 +506,10 @@ ${t2}`;
   }
   function getDomVal(root, sel, attr) {
     const elements = findElements(root, sel);
-    if (elements.length === 0)
-      return null;
+    if (elements.length === 0) return null;
     let el = elements[0];
-    if (attr)
-      return el.getAttribute(attr);
-    if (!isInput(el))
-      return el.innerHTML;
+    if (attr) return el.getAttribute(attr);
+    if (!isInput(el)) return el.innerHTML;
     if (isCheckbox(el)) {
       return elements.filter((e) => isCheckbox(e) && e.checked).map((e) => e.value === "on" ? e.name : e.value);
     }
@@ -550,8 +519,7 @@ ${t2}`;
     }
     if (isRadio(el)) {
       el = elements.filter(isRadio).find((e) => e.checked);
-      if (!el)
-        return void 0;
+      if (!el) return void 0;
     }
     if (isInputField(el)) {
       return el.getAttribute("value");
@@ -560,8 +528,7 @@ ${t2}`;
   }
   function setDomVal(root, sel, val, attr) {
     const elements = findElements(root, sel);
-    if (elements.length === 0)
-      return;
+    if (elements.length === 0) return;
     const el = elements[0];
     if (isCheckbox(el)) {
       const v = toSet(val);
@@ -613,8 +580,7 @@ ${t2}`;
     actionList,
     eventHandlerList
   }) {
-    if (customElements.get(nameWithDash))
-      return false;
+    if (customElements.get(nameWithDash)) return false;
     const el = class extends HTMLElement {
       constructor() {
         super();
@@ -637,8 +603,7 @@ ${t2}`;
   }
   function bindProperties(root, propertyList) {
     const result = {};
-    if (!validatePropertyList(propertyList))
-      return result;
+    if (!validatePropertyList(propertyList)) return result;
     propertyList.forEach((p) => addProperty(result, p, root));
     return result;
   }
@@ -650,13 +615,11 @@ ${t2}`;
     }
   }
   function createOnChange(prop, root) {
-    if (!prop.onChange)
-      return void 0;
+    if (!prop.onChange) return void 0;
     return (oldValue, newValue) => prop.onChange(root, oldValue, newValue);
   }
   function validatePropertyList(propertyList) {
-    if (!propertyList)
-      return false;
+    if (!propertyList) return false;
     if (!Array.isArray(propertyList)) {
       throw "propertyList must be an array of {name, value, [sel], [attr]} objects";
     }
@@ -664,21 +627,18 @@ ${t2}`;
   }
   function defineActions(root, actionList) {
     const actions = {};
-    if (!actionList)
-      return actions;
+    if (!actionList) return actions;
     actionList.forEach((pair) => {
       addAction(root, actions, pair.name, pair.action);
     });
     return actions;
   }
   function addAction(root, actions, name, action) {
-    if (!Objecter_exports.isString(name) || !Objecter_exports.isFunction(action))
-      return;
+    if (!Objecter_exports.isString(name) || !Objecter_exports.isFunction(action)) return;
     actions[name] = action.bind(root);
   }
   function addEventListeners(root, eventHandlerList) {
-    if (!eventHandlerList)
-      return;
+    if (!eventHandlerList) return;
     if (!Array.isArray(eventHandlerList)) {
       throw "eventHandlerList must be an array of {sel, eventName, listener} objects";
     }
@@ -706,8 +666,7 @@ ${t2}`;
   }
   function buildCss(css) {
     css = Stringer_exports.trim(css);
-    if (css.length === 0)
-      return "";
+    if (css.length === 0) return "";
     if (!Stringer_exports.startsWith(css, "<style>", false)) {
       css = Domer_exports.tag("style", {}, css);
     }
@@ -715,8 +674,7 @@ ${t2}`;
   }
   function displayStyle(display) {
     display = Stringer_exports.trim(display);
-    if (display.length === 0)
-      return "";
+    if (display.length === 0) return "";
     return `
   <style>
     :host { display: ${display};}

package/eslint.config.js

@@ -0,0 +1,95 @@
+import js from '@eslint/js'
+import globals from "globals"
+import { defineConfig } from 'eslint/config'
+
+const error = 'error'
+const readonly = 'readonly'
+const always = 'always'
+const never = 'never'
+
+export default defineConfig([
+  {
+    files: ['**/*.js'],
+    plugins: {  js  },
+    extends: ['js/recommended'],
+
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+
+      globals: {
+        ...globals.browser,
+        describe: readonly,
+        it: readonly,
+        beforeEach: readonly,
+        afterEach: readonly
+      }
+    },
+
+    rules: {
+      indent: [error, 2],
+      'linebreak-style': [error, 'unix'],
+      quotes: [error, 'single'],
+      semi: [error, never],
+
+      'block-scoped-var': [error],
+      complexity: [error, 6],
+      'dot-location': [error, 'object'],
+      eqeqeq: [error, always],
+      'no-else-return': [error],
+      'no-multi-spaces': [error, { ignoreEOLComments: true }],
+      'no-octal': [error],
+      'no-octal-escape': [error],
+      'no-return-assign': [error, always],
+      'no-sequences': [error],
+      'no-useless-concat': [error],
+      'no-useless-return': [error],
+      radix: [error],
+      yoda: [error],
+
+      'no-label-var': [error],
+      'brace-style': [error, '1tbs', {allowSingleLine: true}],
+      'comma-spacing': [error, {before: false, after: true}],
+      'comma-style': [error, 'last'],
+      'func-call-spacing': [error, never],
+      'key-spacing': [error, {beforeColon: false, afterColon:true}],
+      'keyword-spacing': [error],
+      'max-depth': [error, 4],
+      'max-len': [error, {code: 120, comments: 100, ignoreUrls: true}],
+      'max-lines': [error, {max: 300, skipBlankLines: true, skipComments: false}],
+      'max-lines-per-function': [error, {max: 200, skipBlankLines: true, skipComments: true, IIFEs: false}],
+      'max-nested-callbacks': [error, 4],
+      'max-params': [error, 5],
+      'max-statements': [error, 10],
+      'max-statements-per-line': [error, {max: 2}],
+      'new-cap': [error],
+      'new-parens': [error, always],
+      'no-array-constructor': [error],
+      'no-bitwise': [error],
+      'no-lonely-if': [error],
+      'no-multi-assign': [error],
+      'no-multiple-empty-lines': [error, {max: 3, maxBOF: 1, maxEOF: 1}],
+      'no-nested-ternary': [error],
+      'no-new-object': [error],
+      'no-tabs': [error],
+      'no-trailing-spaces': [error],
+      'no-unneeded-ternary': [error],
+      'no-whitespace-before-property': [error],
+      'nonblock-statement-body-position': [error, 'beside'],
+      'prefer-exponentiation-operator': [error],
+      'quote-props': [error, 'as-needed'],
+      'semi-spacing': [error],
+      'semi-style': [error],
+      'space-before-function-paren': [error, never],
+      'space-infix-ops': [error],
+      'spaced-comment': [error, always],
+      'switch-colon-spacing': [error],
+      'no-duplicate-imports': [error],
+      'no-useless-computed-key': [error],
+      'no-useless-constructor': [error],
+      'no-var': [error],
+      'prefer-const': [error],
+      'prefer-rest-params': [error]
+    },
+  }
+]);

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@techexp/webitem",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Library to simplify creating Web Components/Custom Elements",
   "author": "Abdul Habra",
   "license": "Apache",
   "repository": "ahabra/webitem",
   "main": "dist/webitem-esm.js",
+  "type": "module",
   "keywords": [
     "web component",
     "custom element"
@@ -29,18 +30,18 @@
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@web/test-runner": "^0.18.0",
+    "@web/test-runner": "^0.20.2",
     "@web/test-runner-commands": "^0.9.0",
-    "@web/test-runner-puppeteer": "^0.15.0",
-    "chalk": "^5.3.0",
-    "esbuild": "^0.19.10",
-    "eslint": "^8.56.0",
-    "fs-extra": "^11.2.0",
-    "npm-check-updates": "^16.14.12",
-    "serve": "^14.2.1"
+    "@web/test-runner-puppeteer": "^0.18.0",
+    "chalk": "^5.4.1",
+    "esbuild": "^0.25.4",
+    "eslint": "^9.27.0",
+    "fs-extra": "^11.3.0",
+    "npm-check-updates": "^18.0.1",
+    "serve": "^14.2.4"
   },
   "dependencies": {
-    "@techexp/data-bind": "^0.9.3",
-    "@techexp/jshelper": "^0.6.3"
+    "@techexp/data-bind": "^0.9.4",
+    "@techexp/jshelper": "^0.7.0"
   }
 }

package/.eslintrc.js

@@ -1,92 +0,0 @@
-const error = 'error'
-const readonly = 'readonly'
-const always = 'always'
-const never = 'never'
-
-module.exports = {
-    extends: 'eslint:recommended',
-
-    env: {
-        browser: true,
-        es2021: true
-    },
-
-    parserOptions: {
-        ecmaVersion: 12,
-        sourceType: 'module'
-    },
-
-    globals: {
-        describe: readonly,
-        it: readonly,
-        beforeEach: readonly,
-        afterEach: readonly
-    },
-
-    rules: {
-        indent: [error, 2],
-        'linebreak-style': [error, 'unix'],
-        quotes: [error, 'single'],
-        semi: [error, never],
-
-        'block-scoped-var': [error],
-        complexity: [error, 4],
-        'dot-location': [error, 'object'],
-        eqeqeq: [error, always],
-        'no-else-return': [error],
-        'no-multi-spaces': [error, { ignoreEOLComments: true }],
-        'no-octal': [error],
-        'no-octal-escape': [error],
-        'no-return-assign': [error, always],
-        'no-sequences': [error],
-        'no-useless-concat': [error],
-        'no-useless-return': [error],
-        radix: [error],
-        yoda: [error],
-
-        'no-label-var': [error],
-        'brace-style': [error, '1tbs', {allowSingleLine: true}],
-        'comma-spacing': [error, {before: false, after: true}],
-        'comma-style': [error, 'last'],
-        'func-call-spacing': [error, never],
-        'key-spacing': [error, {beforeColon: false, afterColon:true}],
-        'keyword-spacing': [error],
-        'max-depth': [error, 4],
-        'max-len': [error, {code: 120, comments: 100, ignoreUrls: true}],
-        'max-lines': [error, {max: 250, skipBlankLines: true, skipComments: false}],
-        'max-lines-per-function': [error, {max: 200, skipBlankLines: true, skipComments: true, IIFEs: false}],
-        'max-nested-callbacks': [error, 4],
-        'max-params': [error, 5],
-        'max-statements': [error, 10],
-        'max-statements-per-line': [error, {max: 2}],
-        'new-cap': [error],
-        'new-parens': [error, always],
-        'no-array-constructor': [error],
-        'no-bitwise': [error],
-        'no-lonely-if': [error],
-        'no-multi-assign': [error],
-        'no-multiple-empty-lines': [error, {max: 3, maxBOF: 1, maxEOF: 1}],
-        'no-nested-ternary': [error],
-        'no-new-object': [error],
-        'no-tabs': [error],
-        'no-trailing-spaces': [error],
-        'no-unneeded-ternary': [error],
-        'no-whitespace-before-property': [error],
-        'nonblock-statement-body-position': [error, 'beside'],
-        'prefer-exponentiation-operator': [error],
-        'quote-props': [error, 'as-needed'],
-        'semi-spacing': [error],
-        'semi-style': [error],
-        'space-before-function-paren': [error, never],
-        'space-infix-ops': [error],
-        'spaced-comment': [error, always],
-        'switch-colon-spacing': [error],
-        'no-duplicate-imports': [error],
-        'no-useless-computed-key': [error],
-        'no-useless-constructor': [error],
-        'no-var': [error],
-        'prefer-const': [error],
-        'prefer-rest-params': [error]
-
-    }
-}