refactor(*): use methods overload for implementing classlist api

projects/tailwind-ng-core/src/config/tests/classlist.spec.ts

@@ -77,7 +77,7 @@ describe('ClassList', () => {
     };
     const configArray = Obj.toArray(configObj);
 
-    classList.initFrom(configObj);
+    classList.init(configObj);
 
     expect(classList.base).toEqual(configArray);
     expect(classList.value).toEqual(configArray);
@@ -99,7 +99,7 @@ describe('ClassList', () => {
     };
     const configArray = Obj.toArray(configObj);
 
-    classList.setFrom(configObj);
+    classList.set(configObj);
 
     expect(classList.value).toEqual(configArray);
   });
@@ -119,7 +119,7 @@ describe('ClassList', () => {
       }
     };
     const defaultConfig = Obj.toArray(configObj);
-    classList.setFrom(configObj);
+    classList.set(configObj);
 
     const newConfigObj: ComponentConfig = {
       textColor: 'text-gray-800',
@@ -136,7 +136,7 @@ describe('ClassList', () => {
 
     const newConfig = Obj.toArray(newConfigObj);
 
-    classList.updateFrom(newConfigObj);
+    classList.update(newConfigObj);
 
     defaultConfig.forEach(value => {
       if (value === 'shadow-none') {

projects/tailwind-ng/src/elements/avatar/avatar.component.spec.ts

@@ -3,7 +3,7 @@ import { ClassList, Str } from '@tailwind-ng/core';
 import { TestBed } from '@angular/core/testing';
 import { AvatarComponent } from './avatar.component';
 import { Component, viewChild } from '@angular/core';
-import { GetAvatarConfig, provideAvatarConfig } from './avatar.config';
+import { GetAvatarConfig, provideAvatarConfig } from './avatar.component.config';
 
 describe('AvatarComponent', () => {
   beforeEach(async () => {
@@ -51,7 +51,7 @@ describe('AvatarComponent', () => {
     const config = GetAvatarConfig();
     const classList = new ClassList();
 
-    classList.setFrom({ b: config.base, s: config[component.size] });
+    classList.set({ b: config.base, s: config[component.size] });
 
     expect(component.classList.base).toEqual(classList.base);
     expect(component.classList.value).toEqual(classList.value);

projects/tailwind-ng/src/elements/avatar/avatar.component.ts

@@ -15,7 +15,7 @@ export class AvatarComponent extends AvatarBase {
 
   protected override onInit(): void {
     this.config$.subscribe(config => {
-      this.classList.setFrom({ b: config.base, s: config[this.size] });
+      this.classList.set({ b: config.base, s: config[this.size] });
     });
   }
 }

projects/tailwind-ng/src/elements/badge/badge.component.spec.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */
 import { BadgeComponent } from './badge.component';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { GetBadgeConfig, provideBadgeConfig } from './badge.config';
+import { GetBadgeConfig, provideBadgeConfig } from './badge.component.config';
 import { Component, viewChild } from '@angular/core';
 import { ClassList, Str } from '@tailwind-ng/core';
 
@@ -49,7 +49,7 @@ describe('BadgeComponent', () => {
     const config = GetBadgeConfig();
     const classList = new ClassList();
 
-    classList.setFrom({ b: config.base, s: config[component.size] });
+    classList.set({ b: config.base, s: config[component.size] });
 
     expect(component.classList.base).toEqual(classList.base);
     expect(component.classList.value).toEqual(classList.value);

projects/tailwind-ng/src/elements/badge/badge.component.ts

@@ -14,7 +14,7 @@ export class BadgeComponent extends BadgeBase {
 
   protected override onInit(): void {
     this.config$.subscribe(config => {
-      this.classList.setFrom({ b: config.base, s: config[this.size] });
+      this.classList.set({ b: config.base, s: config[this.size] });
     });
   }
 }

projects/tailwind-ng/src/elements/button-group/button-group.component.spec.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @angular-eslint/component-selector, @angular-eslint/component-class-suffix */
 import { ButtonGroupComponent } from './button-group.component';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { GetButtonGroupConfig, provideButtonGroupConfig } from './button-group.config';
+import { GetButtonGroupConfig, provideButtonGroupConfig } from './button-group.component.config';
 import { ClassList } from '@tailwind-ng/core';
 import { Component, viewChild } from '@angular/core';
 import { ButtonComponent } from '../button/button.component';
@@ -30,7 +30,7 @@ describe('ButtonGroupComponent', () => {
 
   it('should set classList', () => {
     const classList = new ClassList();
-    classList.setFrom(GetButtonGroupConfig());
+    classList.set(GetButtonGroupConfig());
 
     expect(component.classList.base).toEqual(classList.base);
     expect(component.classList.value).toEqual(classList.value);

projects/tailwind-ng/src/elements/button-group/button-group.component.ts

@@ -12,7 +12,7 @@ import { ButtonGroupBase } from '@tailwind-ng/core';
 export class ButtonGroupComponent extends ButtonGroupBase {
   protected override onInit(): void {
     this.config$.subscribe((config) => {
-      this.classList.setFrom(config);
+      this.classList.set(config);
     });
   }
 }

projects/tailwind-ng/src/elements/button/button.component.spec.ts

@@ -2,7 +2,7 @@
 import { SizeOption, ClassList, Str, ButtonVariant } from '@tailwind-ng/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ButtonComponent } from './button.component';
-import { GetButtonConfig, provideButtonConfig } from './button.config';
+import { GetButtonConfig, provideButtonConfig } from './button.component.config';
 import { Component, viewChild } from '@angular/core';
 
 describe('ButtonComponent', () => {
@@ -77,7 +77,7 @@ describe('ButtonComponent', () => {
         const config = GetButtonConfig();
         const classList = new ClassList();
 
-        classList.setFrom({
+        classList.set({
           ...config.primary,
           ...config[component.size]
         });
@@ -178,7 +178,7 @@ describe('ButtonComponent', () => {
       it('should set classList', () => {
         const config = GetButtonConfig();
         const classList = new ClassList();
-        classList.setFrom({
+        classList.set({
           ...config.secondary,
           ...config[component.size]
         });

projects/tailwind-ng/src/elements/button/button.component.ts

@@ -5,7 +5,7 @@ import { ButtonBase, ButtonVariant, ComboboxBase, DialogBase, DropdownBase, Popu
  * @ngx-tailwind Button component
  */
 @Component({
-  selector: 'tw-button, [tw-button], [twButton]',
+  selector: 'tw-button, button[tw-button], button[twButton]',
   exportAs: 'twButton',
   template: '<ng-content />',
   encapsulation: ViewEncapsulation.None,
@@ -39,7 +39,7 @@ export class ButtonComponent extends ButtonBase {
 
   protected override onInit(): void {
     this.config$.subscribe((config) => {
-      this.classList.setFrom({
+      this.classList.set({
         // The order of destructuring is important here.
         // Because we want next object properties value to
         // override the value of identical properties from objects destructured before.
@@ -85,9 +85,27 @@ export class ButtonComponent extends ButtonBase {
     });
 
     if (this.popup) {
-      this.nativeElement.addEventListener('click', () => this.popup?.toggle(), true);
+      this.nativeElement.addEventListener('click', this.onClick.bind(this), true);
     }
     this.nativeElement.addEventListener('keydown', this.onKeyDown.bind(this), true);
+
+    this.destroyRef.onDestroy(() => {
+      if (this.popup) {
+        this.nativeElement.removeEventListener('click', this.onClick.bind(this), true);
+      }
+      this.nativeElement.removeEventListener('keydown', this.onKeyDown.bind(this), true);
+    });
+  }
+
+  protected onClick(event: MouseEvent): void {
+    if (this.isDisabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      return;
+    }
+    if (this.popup) {
+      this.popup.toggle();
+    }
   }
 
   protected onKeyDown(event: KeyboardEvent): void {

projects/tailwind-ng/src/elements/dropdown/dropdown.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DropdownComponent } from './dropdown.component';
-import { provideDropdownConfig } from './dropdown.config';
+import { provideDropdownConfig } from './dropdown.component.config';
 
 describe('DropdownComponent', () => {
   let component: DropdownComponent;

projects/tailwind-ng/src/elements/dropdown/dropdown.component.ts

@@ -15,8 +15,8 @@ export class DropdownComponent extends DropdownBase {
   @Input() position: OverlayPosition = { top: 'top-2', right: 'right-0' };
 
   protected override onInit(): void {
-    this.classList.initFrom(this.position);
-    this.config$.subscribe(config => this.classList.setFrom(config));
+    this.classList.init(this.position);
+    this.config$.subscribe(config => this.classList.set(config));
 
     this.opened.subscribe(() => {
       this.updatePositionIfNeeded();

projects/tailwind-ng/src/elements/icon/icon.directive.spec.ts

@@ -3,7 +3,7 @@ import { Str } from '@tailwind-ng/core';
 import { TestBed } from '@angular/core/testing';
 import { IconDirective } from './icon.directive';
 import { Component, ElementRef } from '@angular/core';
-import { GetIconConfig, provideIconConfig } from './icon.config';
+import { GetIconConfig, provideIconConfig } from './icon.directive.config';
 import { By } from '@angular/platform-browser';
 
 describe('IconDirective', () => {

projects/tailwind-ng/src/elements/icon/icon.directive.ts

@@ -15,8 +15,8 @@ export class IconDirective extends IconBase {
 
   protected override onInit(): void {
     this.config$.subscribe((config) => {
-      this.classList.initFrom(config[this.size]);
-      this.classList.setFrom(config.base);
+      this.classList.init(config[this.size]);
+      this.classList.set(config.base);
       if (!config.source[this.key]) {
         console.error(new Error(`Icon with key "${this.key}" does not exists in the icons source config.`));
       } else {

projects/tailwind-ng/src/forms/combobox/combobox-item/combobox-item.component.spec.ts

@@ -3,7 +3,7 @@ import { DropdownComponent } from './../../../elements/dropdown/dropdown.compone
 import { TestBed } from '@angular/core/testing';
 import { ComboboxItemComponent } from './combobox-item.component';
 import { Component, ElementRef, viewChildren } from '@angular/core';
-import { GetComboboxItemConfig, provideComboboxItemConfig } from './combobox-item.config';
+import { GetComboboxItemConfig, provideComboboxItemConfig } from './combobox-item.component.config';
 import { InputDirective } from '../../input/input.directive';
 import { USERS_STUB } from '../combobox.component.spec';
 import { ReactiveFormsModule } from '@angular/forms';

projects/tailwind-ng/src/forms/combobox/combobox-item/combobox-item.component.ts

@@ -31,7 +31,7 @@ export class ComboboxItemComponent extends ComboboxItemBase implements ComboboxI
 
   protected override onInit(): void {
     this.config$.subscribe(config => {
-      this.classList.setFrom(config);
+      this.classList.set(config);
     });
 
     // Select the item if it is the default value.

projects/tailwind-ng/src/forms/combobox/combobox.component.spec.ts

@@ -10,7 +10,7 @@ import { Component, ElementRef, viewChild, viewChildren } from '@angular/core';
 import { ComboboxModule } from './combobox.module';
 import { ButtonComponent } from '../../elements/button/button.component';
 import { ReactiveFormsModule } from '@angular/forms';
-import { provideIconConfig } from '../../elements/icon/icon.config';
+import { provideIconConfig } from '../../elements/icon/icon.directive.config';
 import { ComboboxItemComponent } from './combobox-item/combobox-item.component';
 
 interface User {

projects/tailwind-ng/src/forms/input-radio/input-radio.directive.spec.ts

@@ -1,6 +1,6 @@
 import { InputRadioDirective } from './input-radio.directive';
 import { TestBed } from '@angular/core/testing';
-import { GetInputRadioConfig, provideInputRadioConfig } from './input-radio.config';
+import { GetInputRadioConfig, provideInputRadioConfig } from './input-radio.directive.config';
 import { ClassList } from '@tailwind-ng/core';
 import { Component, viewChild } from '@angular/core';
 
@@ -45,6 +45,6 @@ describe('InputRadioDirective', () => {
     const appFixture = TestBed.createComponent(TestAppComponent);
     const testApp = appFixture.componentInstance;
     appFixture.detectChanges();
-    expect(testApp.input().classList.value).toEqual(new ClassList().setFrom(GetInputRadioConfig()).value);
+    expect(testApp.input().classList.value).toEqual(new ClassList().set(GetInputRadioConfig()).value);
   });
 });

projects/tailwind-ng/src/forms/input-radio/input-radio.directive.ts

@@ -9,7 +9,7 @@ import { InputRadioBase } from '@tailwind-ng/core';
 export class InputRadioDirective extends InputRadioBase {
   protected override onInit(): void {
     this.config$.subscribe(config => {
-      this.classList.setFrom(config);
+      this.classList.set(config);
     });
   }
 }

projects/tailwind-ng/src/forms/input/input.directive.spec.ts

@@ -1,6 +1,6 @@
 import { InputDirective } from './input.directive';
 import { TestBed } from '@angular/core/testing';
-import { GetInputConfig, provideInputConfig } from './input.config';
+import { GetInputConfig, provideInputConfig } from './input.directive.config';
 import { ClassList } from '@tailwind-ng/core';
 import { Component, viewChild } from '@angular/core';
 
@@ -45,6 +45,6 @@ describe('InputDirective', () => {
     const appFixture = TestBed.createComponent(TestAppComponent);
     const testApp = appFixture.componentInstance;
     appFixture.detectChanges();
-    expect(testApp.input().classList.value).toEqual(new ClassList().setFrom(GetInputConfig()).value);
+    expect(testApp.input().classList.value).toEqual(new ClassList().set(GetInputConfig()).value);
   });
 });

projects/tailwind-ng/src/forms/input/input.directive.ts

@@ -9,7 +9,7 @@ import { InputBase } from '@tailwind-ng/core';
 export class InputDirective extends InputBase {
   protected override onInit(): void {
     this.config$.subscribe(config => {
-      this.classList.setFrom(config);
+      this.classList.set(config);
     });
   }
 }

projects/tailwind-ng/src/forms/toggle/toggle.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ToggleComponent } from './toggle.component';
-import { GetToggleConfig, provideToggleConfig } from './toggle.config';
+import { GetToggleConfig, provideToggleConfig } from './toggle.component.config';
 import { ClassList } from '@tailwind-ng/core';
 
 describe('ToggleComponent', () => {
@@ -36,6 +36,6 @@ describe('ToggleComponent', () => {
   });
 
   it('should set classlist', () => {
-    expect(component.classList.value).toEqual(new ClassList().setFrom(GetToggleConfig()).value);
+    expect(component.classList.value).toEqual(new ClassList().set(GetToggleConfig()).value);
   });
 });

projects/tailwind-ng/src/forms/toggle/toggle.component.ts

@@ -24,7 +24,7 @@ export class ToggleComponent extends ToggleBase implements Toggle {
 
   protected override onInit(): void {
     this.config$.subscribe(config => {
-      this.classList.setFrom(config);
+      this.classList.set(config);
     });
     this.nativeElement.addEventListener('click', this.toggle.bind(this), { passive: true, capture: true });
     this.nativeElement.addEventListener('keydown', this.onKeydown.bind(this), true);

projects/tailwind-ng/src/overlays/dialog/dialog-backdrop.directive.ts

@@ -11,7 +11,7 @@ export class DialogBackdrop extends BaseDirective implements ObservableConfig {
 
   override onInit() {
     this.config$.subscribe(config => {
-      this.classList.setFrom(config.backdrop);
+      this.classList.set(config.backdrop);
     });
   }
 }

projects/tailwind-ng/src/overlays/dialog/dialog-container.directive.ts

@@ -26,7 +26,7 @@ export class DialogContainer extends BaseDirective implements ObservableConfig {
 
   protected override onInit() {
     this.config$.subscribe(config => {
-      this.classList.setFrom(config.container);
+      this.classList.set(config.container);
     });
   }
 }

projects/tailwind-ng/src/overlays/dialog/dialog-scrim.directive.ts

@@ -12,7 +12,7 @@ export class DialogScrim extends BaseDirective implements ObservableConfig {
 
   protected override onInit(): void {
     this.config$.subscribe(config => {
-      this.classList.setFrom(config.scrim);
+      this.classList.set(config.scrim);
     });
   }
 }

projects/tailwind-ng/src/overlays/dialog/dialog.component.spec.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @angular-eslint/component-selector */
 import { By } from '@angular/platform-browser';
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { GetDialogConfig, provideDialogConfig } from './dialog.config';
+import { GetDialogConfig, provideDialogConfig } from './dialog.component.config';
 import { DialogComponent } from './dialog.component';
 import { DialogModule } from './dialog.module';
 import { Component, ElementRef, viewChild } from '@angular/core';
@@ -321,7 +321,7 @@ describe('DialogComponent', () => {
       const testComponent = testFixture.componentInstance;
       const container = testComponent.container();
       testFixture.detectChanges();
-      const classList = new ClassList().setFrom(GetDialogConfig().container!);
+      const classList = new ClassList().set(GetDialogConfig().container!);
       expect(container.classList.value).toEqual(classList.value);
     });
 
@@ -392,7 +392,7 @@ describe('DialogComponent', () => {
       const component: TestComponent = fixture.debugElement.componentInstance;
       fixture.detectChanges();
 
-      const classList = new ClassList().setFrom(GetDialogConfig().backdrop!);
+      const classList = new ClassList().set(GetDialogConfig().backdrop!);
       expect(component.backdrop().classList.value).toEqual(classList.value);
     });
 
@@ -433,7 +433,7 @@ describe('DialogComponent', () => {
 
   describe('Scrim', () => {
     it('should set classList', () => {
-      const classList = new ClassList().setFrom(GetDialogConfig().scrim!);
+      const classList = new ClassList().set(GetDialogConfig().scrim!);
 
       TestBed.resetTestingModule();
       TestBed.configureTestingModule({