✨ feat(core): event manager plugins with CLI update

.github/workflows/tests.yml

@@ -0,0 +1,33 @@
+name: CI/Unit Tests
+
+on:
+  push:
+    branches: ['main', 'master']
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches: ['main', 'master']
+
+permissions:
+  contents: read
+  pull-requests: read
+
+jobs:
+  build-and-test:
+    # Specifies the runner environment for the job
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Install dependencies
+        run: npm ci
+
+      # Step 4: Runs the unit tests
+      - name: Run unit tests
+        run: npm test

.vscode/settings.json

@@ -124,5 +124,6 @@
   },
   "[jsonc]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "CodeGPT.apiKey": "Perplexity"
 }

apps/web/public/components/accordion/demo/multiple-last-not-collapsible.md

@@ -0,0 +1,33 @@
+```angular-ts showLineNumbers copyButton
+import { Component } from '@angular/core';
+
+import { ZardAccordionItemComponent } from '../accordion-item.component';
+import { ZardAccordionComponent } from '../accordion.component';
+
+@Component({
+  selector: 'z-demo-accordion-multiple-last-not-collapsible',
+  imports: [ZardAccordionComponent, ZardAccordionItemComponent],
+  template: `
+    <z-accordion zType="multiple" [zDefaultValue]="defaults" [zCollapsible]="false">
+      <z-accordion-item zValue="item-1" zTitle="A Study in Scarlet">
+        The first case of Sherlock Holmes and Dr. Watson. They investigate a murder in London, which leads to a
+        backstory involving Mormons in the U.S. Introduces Holmes’s deductive method.
+      </z-accordion-item>
+
+      <z-accordion-item zValue="item-2" zTitle="The Sign of Four">
+        The first case of Sherlock Holmes and Dr. Watson. They investigate a murder in London, which leads to a
+        backstory involving Mormons in the U.S. Introduces Holmes’s deductive method.
+      </z-accordion-item>
+
+      <z-accordion-item zValue="item-3" zTitle="The Hound of the Baskervilles">
+        Holmes and Watson investigate the legend of a demonic hound haunting the Baskerville family. Set in the eerie
+        Dartmoor moorlands, the story involves betrayal and greed.
+      </z-accordion-item>
+    </z-accordion>
+  `,
+})
+export class ZardDemoAccordionMultipleLastNotCollapsibleComponent {
+  readonly defaults: string[] = ['item-1', 'item-3'];
+}
+
+```

apps/web/public/components/accordion/demo/multiple-not-collapsible.md

@@ -0,0 +1,34 @@
+```angular-ts showLineNumbers copyButton
+import { Component } from '@angular/core';
+
+import { ZardAccordionItemComponent } from '../accordion-item.component';
+import { ZardAccordionComponent } from '../accordion.component';
+
+@Component({
+  selector: 'z-demo-accordion-multiple',
+  imports: [ZardAccordionComponent, ZardAccordionItemComponent],
+  standalone: true,
+  template: `
+    <z-accordion zType="multiple" [zDefaultValue]="defaults" [zCollapsible]="false">
+      <z-accordion-item zValue="item-1" zTitle="A Study in Scarlet">
+        The first case of Sherlock Holmes and Dr. Watson. They investigate a murder in London, which leads to a
+        backstory involving Mormons in the U.S. Introduces Holmes’s deductive method.
+      </z-accordion-item>
+
+      <z-accordion-item zValue="item-2" zTitle="The Sign of Four" zDescription="Sir Arthur Conan Doyle">
+        The first case of Sherlock Holmes and Dr. Watson. They investigate a murder in London, which leads to a
+        backstory involving Mormons in the U.S. Introduces Holmes’s deductive method.</z-accordion-item
+      >
+
+      <z-accordion-item zValue="item-3" zTitle="The Hound of the Baskervilles">
+        Holmes and Watson investigate the legend of a demonic hound haunting the Baskerville family. Set in the eerie
+        Dartmoor moorlands, the story involves betrayal and greed.
+      </z-accordion-item>
+    </z-accordion>
+  `,
+})
+export class ZardDemoAccordionMultipleNotCollapsibleComponent {
+  defaults = ['item-1', 'item-3'];
+}
+
+```

apps/web/public/components/command/demo/default.md

@@ -77,33 +77,30 @@ export class ZardDemoCommandDefaultComponent {
   // Handle keyboard shortcuts
   handleKeydown(event: KeyboardEvent) {
     if (event.metaKey || event.ctrlKey) {
+      if ('nos12td'.includes(event.key.toLowerCase())) {
+        event.preventDefault();
+      }
+
       switch (event.key.toLowerCase()) {
         case 'n':
-          event.preventDefault();
           this.executeCommand('new-project', 'Create new project');
           break;
         case 'o':
-          event.preventDefault();
           this.executeCommand('open-file', 'Open file');
           break;
         case 's':
-          event.preventDefault();
           this.executeCommand('save-all', 'Save all');
           break;
         case '1':
-          event.preventDefault();
           this.executeCommand('dashboard', 'Go to Dashboard');
           break;
         case '2':
-          event.preventDefault();
           this.executeCommand('projects', 'Go to Projects');
           break;
         case 't':
-          event.preventDefault();
           this.executeCommand('terminal', 'Open terminal');
           break;
         case 'd':
-          event.preventDefault();
           this.executeCommand('theme', 'Toggle theme');
           break;
       }

apps/web/public/components/dropdown/demo/default.md

@@ -8,9 +8,8 @@ import { ZardDropdownModule } from '../dropdown.module';
 @Component({
   selector: 'z-dropdown-demo',
   imports: [ZardDropdownModule, ZardButtonComponent, ZardDividerComponent],
-  standalone: true,
   template: `
-    <button z-button zType="outline" z-dropdown [zDropdownMenu]="menu">Open</button>
+    <button type="button" z-button zType="outline" z-dropdown [zDropdownMenu]="menu">Open</button>
 
     <z-dropdown-menu-content #menu="zDropdownMenuContent" class="w-56">
       <z-dropdown-menu-label>My Account</z-dropdown-menu-label>

apps/web/public/installation/manual/accordion.md

@@ -19,8 +19,9 @@ import { mergeClasses } from '../../shared/utils/utils';
 
 @Component({
   selector: 'z-accordion',
-  standalone: true,
-  template: ` <ng-content />`,
+  template: `
+    <ng-content />
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   host: {
@@ -39,28 +40,22 @@ export class ZardAccordionComponent implements AfterContentInit {
   protected readonly classes = computed(() => mergeClasses(accordionVariants(), this.class()));
 
   ngAfterContentInit(): void {
-    setTimeout(() => {
-      this.items().forEach(item => {
-        item.accordion = this;
-      });
-
-      const defaultValue = this.zDefaultValue();
-      if (defaultValue) {
-        if (typeof defaultValue === 'string') {
-          const item = this.items().find(i => i.zValue() === defaultValue);
+    const defaultValue = this.zDefaultValue();
+    if (defaultValue) {
+      if (typeof defaultValue === 'string') {
+        const item = this.items().find(i => i.zValue() === defaultValue);
+        if (item) {
+          item.isOpen.set(true);
+        }
+      } else if (Array.isArray(defaultValue)) {
+        for (const value of defaultValue) {
+          const item = this.items().find(item => item.zValue() === value);
           if (item) {
-            item.setOpen(true);
+            item.isOpen.set(true);
           }
-        } else if (Array.isArray(defaultValue)) {
-          defaultValue.forEach(value => {
-            const item = this.items().find(i => i.zValue() === value);
-            if (item) {
-              item.setOpen(true);
-            }
-          });
         }
       }
-    });
+    }
   }
 
   toggleItem(selectedItem: ZardAccordionItemComponent): void {
@@ -71,10 +66,10 @@ export class ZardAccordionComponent implements AfterContentInit {
         return;
       }
 
-      this.items().forEach(item => {
+      for (const item of this.items()) {
         const shouldBeOpen = item === selectedItem ? !item.isOpen() : false;
-        item.setOpen(shouldBeOpen);
-      });
+        item.isOpen.set(shouldBeOpen);
+      }
     } else {
       if (isClosing && !this.zCollapsible()) {
         const openItemsCount = this.countOpenItems();
@@ -83,7 +78,7 @@ export class ZardAccordionComponent implements AfterContentInit {
         }
       }
 
-      selectedItem.setOpen(!selectedItem.isOpen());
+      selectedItem.isOpen.update(v => !v);
     }
   }
 
@@ -145,39 +140,28 @@ export type ZardAccordionContentVariants = VariantProps<typeof accordionContentV
 
 
 ```angular-ts title="accordion-item.component.ts" expandable="true" expandableTitle="Expand" copyButton showLineNumbers
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  computed,
-  inject,
-  input,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input, signal, ViewEncapsulation } from '@angular/core';
 
 import type { ClassValue } from 'clsx';
 
-import type { ZardAccordionComponent } from './accordion.component';
+import { ZardAccordionComponent } from './accordion.component';
 import { accordionContentVariants, accordionItemVariants, accordionTriggerVariants } from './accordion.variants';
 import { mergeClasses } from '../../shared/utils/utils';
+import { checkForProperZardInitialization } from '../core/provider/providezard';
 import { ZardIconComponent } from '../icon/icon.component';
 
 @Component({
   selector: 'z-accordion-item',
   imports: [ZardIconComponent],
-  standalone: true,
   template: `
     <button
       type="button"
+      [attr.aria-controls]="'content-' + zValue()"
+      [attr.aria-expanded]="isOpen()"
       [id]="'accordion-' + zValue()"
       [class]="triggerClasses()"
       (click)="toggle()"
-      (keydown.enter)="onKeydown($any($event))"
-      (keydown.space)="onKeydown($any($event))"
-      [attr.aria-expanded]="isOpen()"
-      [attr.aria-controls]="'content-' + zValue()"
-      tabindex="0"
+      (keydown.{enter,space}.prevent)="toggle()"
     >
       {{ zTitle() }}
       <z-icon
@@ -188,11 +172,11 @@ import { ZardIconComponent } from '../icon/icon.component';
     </button>
 
     <div
-      [class]="contentClasses()"
-      [id]="'content-' + zValue()"
-      [attr.data-state]="isOpen() ? 'open' : 'closed'"
       role="region"
       [attr.aria-labelledby]="'accordion-' + zValue()"
+      [attr.data-state]="isOpen() ? 'open' : 'closed'"
+      [id]="'content-' + zValue()"
+      [class]="contentClasses()"
     >
       <div class="overflow-hidden">
         <div class="pt-0 pb-4">
@@ -210,39 +194,29 @@ import { ZardIconComponent } from '../icon/icon.component';
   exportAs: 'zAccordionItem',
 })
 export class ZardAccordionItemComponent {
-  private cdr = inject(ChangeDetectorRef);
+  private accordion = inject(ZardAccordionComponent, { optional: true });
 
   readonly zTitle = input<string>('');
   readonly zValue = input<string>('');
   readonly class = input<ClassValue>('');
 
-  private readonly isOpenSignal = signal(false);
-
-  accordion?: ZardAccordionComponent;
-
-  readonly isOpen = computed(() => this.isOpenSignal());
+  readonly isOpen = signal(false);
 
   protected readonly itemClasses = computed(() => mergeClasses(accordionItemVariants(), this.class()));
   protected readonly triggerClasses = computed(() => mergeClasses(accordionTriggerVariants()));
   protected readonly contentClasses = computed(() => mergeClasses(accordionContentVariants({ isOpen: this.isOpen() })));
 
-  setOpen(open: boolean): void {
-    this.isOpenSignal.set(open);
-    this.cdr.markForCheck();
+  constructor() {
+    checkForProperZardInitialization();
   }
 
   toggle(): void {
     if (this.accordion) {
       this.accordion.toggleItem(this);
     } else {
-      this.setOpen(!this.isOpen());
+      this.isOpen.update(v => !v);
     }
   }
-
-  onKeydown(event: KeyboardEvent): void {
-    event.preventDefault();
-    this.toggle();
-  }
 }
 
 ```