sashafirsov · sashafirsov · Aug 5, 2023 · Aug 5, 2023 · Aug 5, 2023
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ Collection API inherits the element API and Array.
 [![NPM version][npm-image]][npm-url] [![coverage][coverage-image]][coverage-url]
 
 ## Live demo
-https://unpkg.com/[email protected].8/dist/demo.html
+https://unpkg.com/[email protected].9/dist/demo.html
 
 # [CssChain](https://github.com/sashafirsov/css-chain/blob/main/CssChain.js)
 ## html elements methods
@@ -132,7 +132,7 @@ If you customize the configuration a lot, you can consider moving them to indivi
 
 [npm-image]:      https://img.shields.io/npm/v/css-chain.svg
 [npm-url]:        https://npmjs.org/package/css-chain-test
-[coverage-image]: https://unpkg.com/[email protected].8/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/[email protected].8/coverage/lcov-report/index.html
-[PokeApi-explorer-image]: https://unpkg.com/[email protected].8/src/PokeApi-Explorer.png
-[PokeApi-explorer-url]: https://unpkg.com/[email protected].8/dist/PokeApi-Explorer.html
+[coverage-image]: https://unpkg.com/[email protected].9/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/[email protected].9/coverage/lcov-report/index.html
+[PokeApi-explorer-image]: https://unpkg.com/[email protected].9/src/PokeApi-Explorer.png
+[PokeApi-explorer-url]: https://unpkg.com/[email protected].9/dist/PokeApi-Explorer.html
diff --git a/coverage/lcov-report/ApiChain.js.html b/coverage/lcov-report/ApiChain.js.html
@@ -295,7 +295,7 @@ <h1><a href="index.html">All files</a> ApiChain.js</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-05T19:05:51.736Z
+                at 2023-08-05T21:35:14.947Z
             </div>
         <script src="prettify.js"></script>
         <script>

diff --git a/coverage/lcov-report/CssChain.js.html b/coverage/lcov-report/CssChain.js.html
@@ -1006,7 +1006,7 @@ <h1><a href="index.html">All files</a> CssChain.js</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-05T19:05:51.736Z
+                at 2023-08-05T21:35:14.947Z
             </div>
         <script src="prettify.js"></script>
         <script>

diff --git a/coverage/lcov-report/CssChainElement.js.html b/coverage/lcov-report/CssChainElement.js.html
@@ -172,7 +172,7 @@ <h1><a href="index.html">All files</a> CssChainElement.js</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-05T19:05:51.736Z
+                at 2023-08-05T21:35:14.947Z
             </div>
         <script src="prettify.js"></script>
         <script>

diff --git a/coverage/lcov-report/css-chain-element.js.html b/coverage/lcov-report/css-chain-element.js.html
@@ -85,7 +85,7 @@ <h1><a href="index.html">All files</a> css-chain-element.js</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-05T19:05:51.736Z
+                at 2023-08-05T21:35:14.947Z
             </div>
         <script src="prettify.js"></script>
         <script>

diff --git a/coverage/lcov-report/index.html b/coverage/lcov-report/index.html
@@ -176,7 +176,7 @@ <h1>All files</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-05T19:05:51.736Z
+                at 2023-08-05T21:35:14.947Z
             </div>
         <script src="prettify.js"></script>
         <script>

diff --git a/coverage/lcov-report/slots-in-shadow.js.html b/coverage/lcov-report/slots-in-shadow.js.html
@@ -193,7 +193,7 @@ <h1><a href="index.html">All files</a> slots-in-shadow.js</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-05T19:05:51.736Z
+                at 2023-08-05T21:35:14.947Z
             </div>
         <script src="prettify.js"></script>
         <script>

diff --git a/coverage/lcov-report/slots-light-vs-shadow.js.html b/coverage/lcov-report/slots-light-vs-shadow.js.html
@@ -400,7 +400,7 @@ <h1><a href="index.html">All files</a> slots-light-vs-shadow.js</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-05T19:05:51.736Z
+                at 2023-08-05T21:35:14.947Z
             </div>
         <script src="prettify.js"></script>
         <script>

diff --git a/dist/CssChain.d.ts b/dist/CssChain.d.ts
@@ -8,105 +8,112 @@ import { HTMLElementMixin as AnyElement } from './HTMLElementMixin';
  * @param el Node|Node[] css selector to be applied on node(s)
  * @param protoArr prototype(s) for members and methods of CssChain
  */
-export function CssChain<T= AnyElement>(css?: string|AnyElement|Array<AnyElement&T>|HTMLElement, el?: Document|Node|Node[], protoArr?: string|T|string[]): CssChainCollection<T>&T;
+export function CssChain<T= AnyElement>(css?: string|AnyElement|Array<AnyElement&T>|HTMLElement, el?: Document|Node|Node[], protoArr?: string|T|string[]): CssChainT<T>;
 
 /** CssChain as Array and HTMLElementMixin dual interface */
 export type CssChainT<T = AnyElement > = CssChainCollection<T> & T;
-
+interface CssChainEvent<T>  extends Omit<Event, 'target'>{
+    target:T
+}
 /** CssChain Array part */
-export interface CssChainCollection<T> extends  Array<AnyElement&T>, AnyElement
+export interface CssChainCollection<T> extends  Array<AnyElement&T>, Omit<AnyElement,'addEventListener'>
 {
-    forEach(callbackfn: (value: AnyElement&T, index: number, array: CssChainCollection<T>) => void, thisArg?: any) : CssChainCollection<T>;
+    forEach(callbackFn: (value: AnyElement&T, index: number, array: CssChainT<T>) => void, thisArg?: any) : CssChainT<T>;
 
     /** (alias for `getAttribute`) returns 1st element attribute value or `undefined` for empty collection */
-    attr(name:string): CssChainCollection<T>;
+    attr(name:string): CssChainT<T>;
     /** (alias for `setAttribute`) sets elements attribute, returns CssChain */
-    attr(name:string, value:string): CssChainCollection<T>;
+    attr(name:string, value:string): CssChainT<T>;
     /** (alias for `setAttribute`) sets elements attribute with value from callback, returns CssChain */
-    attr(name:string, valueCallback:( (el:T, i:number, arr:CssChainCollection<T>)=>string) ): CssChainCollection<T>;
-    /** (alias for `setAttribute`) sets `css`-defined sub-tree elements attribute, returns CssChain */
-    attr(name:string, valueOrCallback:string | ( (el:T, i:number, arrCss:CssChainCollection<T>, arrThis:CssChainCollection<T>)=>string), css:string): CssChainCollection<T>;
+    attr(name:string, valueCallback:( (el:T, i:number, arr:CssChainCollection<T>)=>string) ): CssChainT<T>;
+    /** (alias for `setAttribute`) sets `css`-defined subtree elements attribute, returns CssChain */
+    attr(name:string, valueOrCallback:string | ( (el:T, i:number, arrCss:CssChainCollection<T>, arrThis:CssChainCollection<T>)=>string), css:string): CssChainT<T>;
     /** returns 1st element property value or `undefined` for empty collection */
     prop(name:string): any;
     /** sets elements property, returns CssChain */
-    prop(name:string, valueOrCallback:any | ( (el:T, i:number, arr:CssChainCollection<T>)=>string)): CssChainCollection<T>;
-    /** sets `css`-defined sub-tree elements property, returns CssChain */
-    prop(name:string, valueOrCallback:any | ( (el:T, i:number, arrCss:CssChainCollection<T>, arrThis:CssChainCollection<T>)=>string), css:string): CssChainCollection<T>;
+    prop(name:string, valueOrCallback:any | ( (el:T, i:number, arr:CssChainCollection<T>)=>string)): CssChainT<T>;
+    /** sets `css`-defined subtree elements property, returns CssChain */
+    prop(name:string, valueOrCallback:any | ( (el:T, i:number, arrCss:CssChainCollection<T>, arrThis:CssChainCollection<T>)=>string), css:string): CssChainT<T>;
     /** selects 1st elements by @param css string from each collection element, returns CssChain */
     querySelector(css: string): CssChainT;
     /** selects child elements by @param css string, returns CssChain */
     querySelectorAll(css: string): CssChainT;
     /** alias to [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll) */
-    $(css: string): CssChainCollection<T>;
+    $(css: string): CssChainT<T>;
     /** set of parents of current set which
      [matches](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches)
      the selector, duplications removed */
-    parent(css: string): CssChainCollection<T>;
+    parent(css: string): CssChainT<T>;
+
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: T, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions):CssChainT;
     /** alias to [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) */
-    on( eventName:string, listener: (ev: Event) => any ): CssChainCollection<T>;
+    on( eventName:string, listener: (this:T , ev: CssChainEvent<T>) => any ): CssChainT<T>;
+    on<E extends HTMLElement>( eventName:string, listener: (this:E , ev: CssChainEvent<T>) => any ): CssChainT<T>;
+    on<E extends HTMLElement>( eventName:string, listener: (this:E ) => any ): CssChainT<T>;
+    on( eventName:string, listener: (this:T) => any ): CssChainT<T>;
     /** appends html or node */
     append(htmlOrElement: string|string[]|Node|Node[]|CssChainT): CssChainT;
     /** delete all nodes, returns empty CssChain */
-    remove(): CssChainCollection<T>;
+    remove(): CssChainT<T>;
     /** alias to [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) */
-    remove(eventName:string,callback:any): CssChainCollection<T>;
+    remove(eventName:string,callback:any): CssChainT<T>;
     /** removes content of collection nodes, collection nodes remain */
-    erase(): CssChainCollection<T>;
+    erase(): CssChainT<T>;
     /** returns text of whole collection */
     txt(): string;
     /** sets text for each element from `val`  */
-    txt(val: string): CssChainCollection<T>;
+    txt(val: string): CssChainT<T>;
     /** sets text for each element from callback */
-    txt( valCb: (el:T,i:number,arr:CssChainCollection<T>)=>string): CssChainCollection<T>;
+    txt( valCb: (el:T,i:number,arr:CssChainCollection<T>)=>string): CssChainT<T>;
     /** sets text for each element from `val`  */
-    txt(val: string, css: string|CssChainCollection<T>): CssChainCollection<T>;
+    txt(val: string, css: string|CssChainCollection<T>): CssChainT<T>;
     /** sets text for each element from callback */
-    txt( valCb: (el:T,i:number,arrCss:CssChainCollection<T>,arrThis:CssChainCollection<T>)=>string, css: string|CssChainCollection<T>): CssChainCollection<T>;
+    txt( valCb: (el:T,i:number,arrCss:CssChainCollection<T>,arrThis:CssChainCollection<T>)=>string, css: string|CssChainCollection<T>): CssChainT<T>;
     /** sets text for children elements defined by css, returns original collection */
-    txt(val: any, css: string|CssChainCollection<T>): CssChainCollection<T>;
+    txt(val: any, css: string|CssChainCollection<T>): CssChainT<T>;
 
     /** returns concatenated innerHTML of collection */
     html(): string;
     /** sets innerHTML of each collection element */
-    html( callback: ((el:T,i:number,arr:CssChainCollection<T>)=>string) ): CssChainCollection<T>;
+    html( callback: ((el:T,i:number,arr:CssChainCollection<T>)=>string) ): CssChainT<T>;
     /** sets innerHTML of each collection element */
-    html( htmlStr: string): CssChainCollection<T>;
+    html( htmlStr: string): CssChainT<T>;
     /** array duplicated within each collection element */
-    html( htmlStrArr: string[] | T[] ): CssChainCollection<T>;
+    html( htmlStrArr: string[] | T[] ): CssChainT<T>;
     /** sets html for children elements defined by css. `val` type is one of above. Returns original collection */
-    html( val: string, css: string ): CssChainCollection<T>;
+    html( val: string, css: string ): CssChainT<T>;
     /** returns collection of cloned elements of current one by [Node.cloneNode(deep)](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) */
     cloneNode(...args: any[]): CssChainT;
     /** clone nodes(deep) or objects(shallow). Returns cloned collection */
-    clone(): CssChainCollection<T>;
+    clone(): CssChainT<T>;
     /** clone nodes to be inserted into document using [Document.importNode()](https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode) */
-    clone(doc:Document): CssChainCollection<T>;
+    clone(doc:Document): CssChainT<T>;
     /** when callback result is a string or node it is used as return value */
-    clone(count: number, cb: ((clonedNode:T, index:number)=>void) ): CssChainCollection<T>;
+    clone(count: number, cb: ((clonedNode:T, index:number)=>void) ): CssChainT<T>;
     /** alias of `clone(arr.length) */
-    clone( arr: any[] | CssChainCollection<T> ): CssChainCollection<T>;
+    clone( arr: any[] | CssChainCollection<T> ): CssChainT<T>;
     /** call callback after clone */
-    clone( arr: any[] | CssChainCollection<T>, callback:(( clonedNode:T, dataItem:any, index:number, arr:any[] )=>void) ): CssChainCollection<T>;
+    clone( arr: any[] | CssChainCollection<T>, callback:(( clonedNode:T, dataItem:any, index:number, arr:any[] )=>void) ): CssChainT<T>;
     /** append HTML text or nodes */
-    append( html:string | string[] | Node[] | CssChainT ): CssChainCollection<T>;
+    append( html:string | string[] | Node[] | CssChainT ): CssChainT<T>;
     /** returns all slots */
-    slots(): CssChainCollection<T>;
+    slots(): CssChainT<T>;
     /** `slots('')` - returns slot without name <br/>
      * `slots(',name1,name2...')` - returns named slots. Blank name defines unnamed(default) slot  */
-    slots(nameCsv:string): CssChainCollection<T>;
+    slots(nameCsv:string): CssChainT<T>;
     /** slots(name, val | cb(el,i,arr) )` assigns slot content, alias to [HTMLSlotElement.assign(nodes)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assign)
      when `cb` is defined slots content is set by `html(cb)` */
-    slots(nameCsv:string, val: string|Node|(((name:string,i:number,arr:CssChainCollection<T>)=>string))): CssChainCollection<T>;
+    slots(nameCsv:string, val: string|Node|(((name:string,i:number,arr:CssChainCollection<T>)=>string))): CssChainT<T>;
 
     /** would render the current node as a template with immediate children with `slot='xxx'`
      as assignedNodes payload for `<slot name='xxx'>`. There is no default slot in such case as the inner DOM serves the
      default content. */
-    template(): CssChainCollection<T>;
+    template(): CssChainT<T>;
     /** typically `template('template')` would extract the template defined by selector,
      clone it with assigned slots from remaining children */
-    template(css:string): CssChainCollection<T>;
+    template(css:string): CssChainT<T>;
     /** the children are used as slot content within node clone which is set as a child */
-    template(node:Node): CssChainCollection<T>;
+    template(node:Node): CssChainT<T>;
 
     /** returns a sequence of the elements assigned to this slot (and no other nodes).
      *
@@ -124,13 +131,13 @@ export interface CssChainCollection<T> extends  Array<AnyElement&T>, AnyElement
     assignedNodes(f: any): CssChainT;
 
     /** retrieves firstElementChild for each collection element */
-    get firstElementChild(): CssChainCollection<T>;
+    get firstElementChild(): CssChainT<T>;
 
     /** retrieves firstChild for each collection element */
-    get firstChild(): CssChainCollection<T>;
+    get firstChild(): CssChainT<T>;
     /** retrieves child nodes for each collection element */
-    get childNodes(): CssChainCollection<T>;
+    get childNodes(): CssChainT<T>;
     /** retrieves children nodes for each collection element */
-    get children(): CssChainCollection<T>;
+    get children(): CssChainT<T>;
 }
 export default CssChain;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
         "email": "[email protected]",
         "url": "https://blog.firsov.net/"
     },
-    "version": "1.1.8",
+    "version": "1.1.9",
     "browser": "index.js",
     "module": "index.js",
     "type": "module",
@@ -30,7 +30,7 @@
         "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
     },
     "dependencies": {
-        "css-chain": "1.1.8",
+        "css-chain": "1.1.9",
         "lit": "2.8.0"
     },
     "devDependencies": {