@dooboostore/simple-web-component 1.0.44 → 1.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -93,9 +93,9 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
     "@dooboostore/core": "1.0.32",
-    "@dooboostore/core-web": "1.0.12",
+    "@dooboostore/core-node": "1.0.12",
     "@dooboostore/simple-boot": "1.0.56",
-    "@dooboostore/core-node": "1.0.12"
+    "@dooboostore/core-web": "1.0.12"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/addEventListener.ts

@@ -17,9 +17,11 @@ export interface AddEventListenerBaseOptions<TEvent extends Event = Event> exten
   distinctUntilChanged?: boolean | ((prev: TEvent, curr: TEvent) => boolean);
 }
 
+export type EventListenerSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+
 export interface AddEventListenerMetadata<TEvent extends Event = Event> {
   propertyKey: string | symbol;
-  selector: string;
+  selector: EventListenerSelector;
   type: string;
   options: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions & { delegate?: boolean };
 }
@@ -27,11 +29,11 @@ export interface AddEventListenerMetadata<TEvent extends Event = Event> {
 export const ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for('simple-web-component:add-event-listener');
 
 export function addEventListener<TEvent extends Event = Event>(target: SpecialSelector, type: string, options?: AddEventListenerBaseOptions<TEvent>): MethodDecorator;
-export function addEventListener<TEvent extends Event = Event>(selector: string, type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions & { delegate?: boolean }): MethodDecorator;
+export function addEventListener<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions & { delegate?: boolean }): MethodDecorator;
 /**
  * @addEventListener decorator to bind events to elements.
  */
-export function addEventListener<TEvent extends Event = Event>(selectorOrTarget: string, type: string, options: any = {}): MethodDecorator {
+export function addEventListener<TEvent extends Event = Event>(selectorOrTarget: EventListenerSelector, type: string, options: any = {}): MethodDecorator {
   return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
     const constructor = targetObj.constructor;
 
@@ -46,17 +48,17 @@ export function addEventListener<TEvent extends Event = Event>(selectorOrTarget:
 }
 
 
-export function addEventListenerDelegateLightDom<TEvent extends Event = Event>(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {
+export function addEventListenerDelegateLightDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {
   return addEventListener<TEvent>(selector, type, {...options??{}, root:'light', delegate: true});
 }
 
-export function addEventListenerDelegateShadowDom<TEvent extends Event = Event>(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {
+export function addEventListenerDelegateShadowDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {
   return addEventListener<TEvent>(selector, type, {...options??{}, root:'shadow', delegate: true});
 }
-export function addEventListenerDelegateAllDom<TEvent extends Event = Event>(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {
+export function addEventListenerDelegateAllDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {
   return addEventListener<TEvent>(selector, type, {...options??{}, root:'all', delegate: true});
 }
-export function addEventListenerDelegate<TEvent extends Event = Event>(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {
+export function addEventListenerDelegate<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {
   return addEventListener<TEvent>(selector, type, {...options??{}, root:'auto', delegate: true});
 }
 

package/src/decorators/applyAttribute.ts

@@ -40,9 +40,11 @@ export interface AttributeOptions extends SwcQueryOptions {
   valueKey?: symbol | string;
 }
 
+export type AttributeSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+
 export interface AttributeMetadata {
   propertyKey: string | symbol;
-  selector: string;
+  selector: AttributeSelector;
   targetAttributeName: string;
   options: AttributeOptions;
   type: 'property' | 'method';
@@ -93,7 +95,7 @@ const convertValue = (val: string | null, type: any): any => {
 
 export {convertValue};
 
-export const getAttributeValue = (inst: any, attrName: string, options?: AttributeOptions & { selector?: string }): any => {
+export const getAttributeValue = (inst: any, attrName: string, options?: AttributeOptions & { selector?: AttributeSelector }): any => {
   const conf = getElementConfig(inst);
   const currentWin = inst._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
 
@@ -131,15 +133,42 @@ export const getAttributeValue = (inst: any, attrName: string, options?: Attribu
 
 /**
  * Resolve target elements based on selector and options
- * Handles special selectors ($this, $host, etc.) and CSS selectors
+ * Handles special selectors ($this, $host, etc.), CSS selectors, and function-based selectors
  * Returns HTMLElement[] for attribute operations
  */
-export const resolveAttributeTargets = (inst: any, selector: string, options: AttributeOptions): HTMLElement[] => {
+export const resolveAttributeTargets = (inst: any, selector: AttributeSelector, options: AttributeOptions): HTMLElement[] => {
   const conf = getElementConfig(inst);
   const currentWin = conf.window;
   const r = options.root || 'auto';
   const results: HTMLElement[] = [];
 
+  // Resolve selector if it's a function
+  let resolvedSelector: string | Element | NodeList | Element[] | null = selector as any;
+  if (typeof selector === 'function') {
+    const hostSet = SwcUtils.getHelperAndHostSet(currentWin, inst);
+    resolvedSelector = selector(inst, hostSet);
+  }
+
+  // If selector function returned elements directly, use them
+  if (resolvedSelector instanceof currentWin.Element) {
+    results.push(resolvedSelector as HTMLElement);
+    return results;
+  }
+  if (resolvedSelector instanceof currentWin.NodeList) {
+    results.push(...(Array.from(resolvedSelector) as HTMLElement[]));
+    return results;
+  }
+  if (Array.isArray(resolvedSelector)) {
+    results.push(...(resolvedSelector as HTMLElement[]));
+    return results;
+  }
+  if (resolvedSelector === null) {
+    return results;
+  }
+
+  // Handle string selector
+  const stringSelector = resolvedSelector as string;
+
   const applyRoot = (target: any) => {
     if (!target) return;
     if (r === 'auto') {
@@ -150,33 +179,33 @@ export const resolveAttributeTargets = (inst: any, selector: string, options: At
     }
   };
 
-  if (selector === '$this' || !selector) {
+  if (stringSelector === '$this' || !stringSelector) {
     applyRoot(inst);
   } else {
     const hostSet = SwcUtils.getHostSet(inst);
-    if (selector === '$host') applyRoot(hostSet.$host);
-    else if (selector === '$parentHost') applyRoot(hostSet.$parentHost);
-    else if (selector === '$appHost') applyRoot(hostSet.$appHost as any);
-    else if (selector === '$firstHost') applyRoot(hostSet.$firstHost);
-    else if (selector === '$lastHost') applyRoot(hostSet.$lastHost);
-    else if (selector === '$firstAppHost') applyRoot(hostSet.$firstAppHost as any);
-    else if (selector === '$lastAppHost') applyRoot(hostSet.$lastAppHost as any);
-    else if (selector === '$hosts') hostSet.$hosts.forEach(applyRoot);
-    else if (selector === '$appHosts') hostSet.$appHosts.forEach(applyRoot);
+    if (stringSelector === '$host') applyRoot(hostSet.$host);
+    else if (stringSelector === '$parentHost') applyRoot(hostSet.$parentHost);
+    else if (stringSelector === '$appHost') applyRoot(hostSet.$appHost as any);
+    else if (stringSelector === '$firstHost') applyRoot(hostSet.$firstHost);
+    else if (stringSelector === '$lastHost') applyRoot(hostSet.$lastHost);
+    else if (stringSelector === '$firstAppHost') applyRoot(hostSet.$firstAppHost as any);
+    else if (stringSelector === '$lastAppHost') applyRoot(hostSet.$lastAppHost as any);
+    else if (stringSelector === '$hosts') hostSet.$hosts.forEach(applyRoot);
+    else if (stringSelector === '$appHosts') hostSet.$appHosts.forEach(applyRoot);
     else {
       if (r === 'shadow') {
-        const found = inst.shadowRoot?.querySelectorAll(selector);
+        const found = inst.shadowRoot?.querySelectorAll(stringSelector);
         if (found) results.push(...found);
       } else if (r === 'light') {
-        const found = inst.querySelectorAll(selector);
+        const found = inst.querySelectorAll(stringSelector);
         if (found) results.push(...found);
       } else if (r === 'all') {
-        const sMatch = inst.shadowRoot?.querySelectorAll(selector);
-        const lMatch = inst.querySelectorAll(selector);
+        const sMatch = inst.shadowRoot?.querySelectorAll(stringSelector);
+        const lMatch = inst.querySelectorAll(stringSelector);
         if (sMatch) results.push(...sMatch);
         if (lMatch) results.push(...lMatch);
       } else {
-        const found = (inst.shadowRoot || inst).querySelectorAll(selector);
+        const found = (inst.shadowRoot || inst).querySelectorAll(stringSelector);
         if (found) results.push(...found);
       }
     }
@@ -191,11 +220,12 @@ export const resolveAttributeTargets = (inst: any, selector: string, options: At
  * - @applyAttribute('selector', 'attrName') - Set attribute with explicit name
  * - @applyAttribute('selector') - Use property name as attribute name
  * - @applyAttribute('selector', { name: 'attrName' }) - Set attribute via options
+ * - @applyAttribute((this, helper) => 'selector', 'attrName') - Function-based selector
  * - Return null to remove attribute
  */
-export function applyAttribute(selector: string, targetAttributeName: string, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
-export function applyAttribute(selector: string, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
-export function applyAttribute(selector: string, targetAttributeNameOrOptions?: string | AttributeOptions, options?: AttributeOptions): MethodDecorator & PropertyDecorator {
+export function applyAttribute(selector: AttributeSelector, targetAttributeName: string, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
+export function applyAttribute(selector: AttributeSelector, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
+export function applyAttribute(selector: AttributeSelector, targetAttributeNameOrOptions?: string | AttributeOptions, options?: AttributeOptions): MethodDecorator & PropertyDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
     // ensureInit(target as any);
 
@@ -228,7 +258,7 @@ export function applyAttribute(selector: string, targetAttributeNameOrOptions?:
     }
     metaList.push({
       propertyKey,
-      selector,
+      selector: selector as AttributeSelector,
       targetAttributeName,
       options: finalOptions,
       type: metaType
@@ -346,14 +376,16 @@ export function applyAttribute(selector: string, targetAttributeNameOrOptions?:
  * - @attribute('#user', 'product-id') - Attribute name on selector
  * - @attribute('product-id', options) - Attribute name on $this with options
  * - @attribute('#user', 'product-id', options) - Attribute name on selector with options
+ * - @attribute((this, helper) => 'selector', 'product-id') - Function-based selector
  * - @attribute - Bare decorator (uses property name as attribute on $this)
  * 
  * Note: This decorator is for FIELDS ONLY. For methods, use @setAttribute.
  */
+export function attribute(target: Object, propertyKey: string | symbol):  void;
 export function attribute(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
 export function attribute(attributeName: string, options?: AttributeOptions): PropertyDecorator;
-export function attribute(selector: string, attributeName: string, options?: AttributeOptions): PropertyDecorator;
-export function attribute(selectorOrAttributeOrTarget?: string | Object, attributeNameOrOptions?: any, optionsOrDescriptor?: any): any {
+export function attribute(selector: AttributeSelector, attributeName: string, options?: AttributeOptions): PropertyDecorator;
+export function attribute(selectorOrAttributeOrTarget?: AttributeSelector | Object, attributeNameOrOptions?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @attribute
   if (optionsOrDescriptor !== undefined && (typeof attributeNameOrOptions === 'string' || typeof attributeNameOrOptions === 'symbol')) {
     return applyAttribute('$this', undefined as any, {})(selectorOrAttributeOrTarget as Object, attributeNameOrOptions, optionsOrDescriptor as PropertyDescriptor);
@@ -391,6 +423,7 @@ export function attribute(selectorOrAttributeOrTarget?: string | Object, attribu
  * - @setAttribute('#user', 'data-id') - Attribute name on selector
  * - @setAttribute('data-id', options) - Attribute name on $this with options
  * - @setAttribute('#user', 'data-id', options) - Attribute name on selector with options
+ * - @setAttribute((this, helper) => 'selector', 'data-id') - Function-based selector
  * - @setAttribute - Bare decorator (uses method name as attribute on $this)
  * 
  * Note: This decorator is for METHODS ONLY. For fields, use @attribute.
@@ -401,9 +434,9 @@ export function attribute(selectorOrAttributeOrTarget?: string | Object, attribu
  *   return 'active';
  * }
  */
-export function setAttribute(selector: string, attributeName: string, options?: AttributeOptions): MethodDecorator;
+export function setAttribute(selector: AttributeSelector, attributeName: string, options?: AttributeOptions): MethodDecorator;
 export function setAttribute(attributeName: string, options?: AttributeOptions): MethodDecorator;
-export function setAttribute(selectorOrAttributeOrOptions?: string | AttributeOptions, attributeNameOrOptions?: any, optionsOrUndefined?: AttributeOptions): MethodDecorator {
+export function setAttribute(selectorOrAttributeOrOptions?: AttributeSelector | AttributeOptions, attributeNameOrOptions?: any, optionsOrUndefined?: AttributeOptions): MethodDecorator {
   // With string as first parameter
   if (typeof selectorOrAttributeOrOptions === 'string') {
     // Check if first parameter is a CSS selector or attribute name

package/src/decorators/applyClass.ts

@@ -7,6 +7,73 @@ export const CLASS_METADATA_KEY = Symbol.for('simple-web-component:class');
 
 export type ClassAction = 'set' | 'update' | 'add' | 'remove' | 'toggle';
 
+/**
+ * Resolve selector to string or elements
+ * Handles function-based selectors and returns elements if applicable
+ */
+const resolveSelector = (selector: ClassSelector, inst: any, win: Window): string | HTMLElement[] => {
+  if (typeof selector === 'function') {
+    const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+    const result = selector(inst, hostSet);
+    
+    if (result instanceof win.Element) {
+      return [result as HTMLElement];
+    }
+    if (result instanceof win.NodeList) {
+      return Array.from(result) as HTMLElement[];
+    }
+    if (Array.isArray(result)) {
+      return result as HTMLElement[];
+    }
+    if (result === null) {
+      return [];
+    }
+    return result as string;
+  }
+  return selector as string;
+};
+
+/**
+ * Get target elements from selector
+ */
+const getTargetElements = (selector: ClassSelector, inst: any, win: Window, root: string): HTMLElement[] => {
+  const resolved = resolveSelector(selector, inst, win);
+  
+  if (Array.isArray(resolved)) {
+    return resolved;
+  }
+
+  const stringSelector = resolved as string;
+  const targetEls: HTMLElement[] = [];
+  const host = inst as unknown as HTMLElement;
+  const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+
+  const applyRoot = (t: any) => {
+    if (!t || !(t instanceof win.HTMLElement)) return;
+    targetEls.push(t);
+  };
+
+  if (stringSelector === '$this' || !stringSelector) applyRoot(host);
+  else if (stringSelector === '$host') applyRoot(hostSet.$host);
+  else if (stringSelector === '$parentHost') applyRoot(hostSet.$parentHost);
+  else if (stringSelector === '$appHost') applyRoot(hostSet.$appHost);
+  else if (stringSelector === '$firstHost') applyRoot(hostSet.$firstHost);
+  else if (stringSelector === '$lastHost') applyRoot(hostSet.$lastHost);
+  else if (stringSelector === '$firstAppHost') applyRoot(hostSet.$firstAppHost);
+  else if (stringSelector === '$lastAppHost') applyRoot(hostSet.$lastAppHost);
+  else if (stringSelector === '$hosts') hostSet.$hosts.forEach(applyRoot);
+  else if (stringSelector === '$appHosts') hostSet.$appHosts.forEach(applyRoot);
+  else {
+    const targetRoot = root === 'auto' ? (host.shadowRoot || host) : (root === 'shadow' ? host.shadowRoot : host);
+    if (targetRoot) {
+      const found = targetRoot.querySelectorAll(stringSelector);
+      if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+    }
+  }
+
+  return targetEls;
+};
+
 export interface ClassApplyOptions extends SwcQueryOptions {
   filter?: (target: HTMLElement, value: any, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
   /**
@@ -17,15 +84,17 @@ export interface ClassApplyOptions extends SwcQueryOptions {
   valueKey?: symbol | string;
 }
 
+export type ClassSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+
 export interface ClassApplyMetadata {
   propertyKey: string | symbol;
-  selector: string;
+  selector: ClassSelector;
   action: ClassAction;
   options: ClassApplyOptions;
 }
 
 function createClassDecorator(action: ClassAction) {
-  return (selector: string, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}): MethodDecorator => {
+  return (selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}): MethodDecorator => {
     return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
       const constructor = target.constructor;
       let metaList = ReflectUtils.getOwnMetadata(CLASS_METADATA_KEY, constructor) as Map<string | symbol, ClassApplyMetadata>;
@@ -72,30 +141,7 @@ function createClassDecorator(action: ClassAction) {
             const host = this as unknown as HTMLElement;
             const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
             const r = finalOptions.root || 'auto';
-            const targetEls: HTMLElement[] = [];
-
-            const applyRoot = (t: any) => {
-              if (!t || !(t instanceof win.HTMLElement)) return;
-              targetEls.push(t);
-            };
-
-            if (selector === '$this' || !selector) applyRoot(host);
-            else if (selector === '$host') applyRoot(hostSet.$host);
-            else if (selector === '$parentHost') applyRoot(hostSet.$parentHost);
-            else if (selector === '$appHost') applyRoot(hostSet.$appHost);
-            else if (selector === '$firstHost') applyRoot(hostSet.$firstHost);
-            else if (selector === '$lastHost') applyRoot(hostSet.$lastHost);
-            else if (selector === '$firstAppHost') applyRoot(hostSet.$firstAppHost);
-            else if (selector === '$lastAppHost') applyRoot(hostSet.$lastAppHost);
-            else if (selector === '$hosts') hostSet.$hosts.forEach(applyRoot);
-            else if (selector === '$appHosts') hostSet.$appHosts.forEach(applyRoot);
-            else {
-              const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
-              if (targetRoot) {
-                  const found = targetRoot.querySelectorAll(selector);
-                  if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
-              }
-            }
+            const targetEls = getTargetElements(selector, this, win, r);
 
             targetEls.forEach(targetEl => {
               if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, {currentThis: this, helper: hostSet})) {
@@ -164,7 +210,7 @@ function createClassDecorator(action: ClassAction) {
 }
 
 export function applyClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function applyClass(selector: string, action?: ClassAction, options?: ClassApplyOptions): MethodDecorator;
+export function applyClass(selector: ClassSelector, action?: ClassAction, options?: ClassApplyOptions): MethodDecorator;
 export function applyClass(selectorOrTarget?: any, actionOrPropertyKey?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @applyClass
   if (optionsOrDescriptor !== undefined && (typeof actionOrPropertyKey === 'string' || typeof actionOrPropertyKey === 'symbol')) {
@@ -183,7 +229,7 @@ export function applyClass(selectorOrTarget?: any, actionOrPropertyKey?: any, op
 }
 
 export function setClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function setClass(selector: string, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
+export function setClass(selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
 export function setClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @setClass
   if (optionsOrDescriptor !== undefined && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
@@ -198,7 +244,7 @@ export function setClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?
 }
 
 export function updateClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function updateClass(selector: string, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
+export function updateClass(selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
 export function updateClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @updateClass
   if (optionsOrDescriptor !== undefined && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
@@ -213,7 +259,7 @@ export function updateClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyK
 }
 
 export function addClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function addClass(selector: string, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
+export function addClass(selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
 export function addClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @addClass
   if (optionsOrDescriptor !== undefined && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
@@ -228,7 +274,7 @@ export function addClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?
 }
 
 export function removeClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function removeClass(selector: string, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
+export function removeClass(selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
 export function removeClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @removeClass
   if (optionsOrDescriptor !== undefined && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
@@ -243,7 +289,7 @@ export function removeClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyK
 }
 
 export function toggleClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function toggleClass(selector: string, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
+export function toggleClass(selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
 export function toggleClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @toggleClass
   if (optionsOrDescriptor !== undefined && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {