✨ feat(core): event manager plugins with CLI update#348
Merged
Conversation
3 tasks
|
Warning Rate limit exceeded@mikij has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 13 minutes and 3 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (17)
📒 Files selected for processing (40)
Note
|
| Cohort / File(s) | Summary |
|---|---|
Core provider & themes libs/zard/src/lib/components/core/provider/providezard.ts, libs/zard/src/lib/components/core/provider/config/config.types.ts, .../update-preset.ts, .../styles/{gray,neutral,slate,stone,zinc}.ts, .../event-manager-plugins/{zard-event-manager-plugin.ts,zard-debounce-event-manager-plugin.ts} |
Add provideZard() + ZARD_CONFIG token and checkForProperZardInitialization(), theme preset types and updatePreset(), five CSS theme constants, and two EventManagerPlugin implementations (modifier and debounce). |
App registration apps/web/src/app/app.config.ts |
Import and register provideZard() in appConfig.providers. |
Public API exports libs/zard/src/index.ts |
Expand public exports to include provider, config types, presets, event-manager plugins and many component exports (reorganization and dedicated type aliases). |
ESLint rules libs/zard/eslint.config.mjs |
Add TS rules (curly, arrow-body-style, prefer-destructuring), raise @angular-eslint/prefer-output-emitter-ref to error, remove two template rules. |
| Test infra wiring many libs/zard/src/lib/components/**/*.component.spec.ts |
Register EVENT_MANAGER_PLUGINS providers (ZardEventManagerPlugin and/or ZardDebounceEventManagerPlugin) in test modules; adjust tests to use event dispatch patterns and standardized debounce timing. |
| Keyboard & init modernizations multiple libs/zard/src/lib/components/** |
Remove many standalone: true flags, add constructors that call checkForProperZardInitialization(), migrate HostListener handlers to template key modifiers, change some keyboard handler signatures to Event, convert several EventEmitter @Outputs to output<T>() signals, apply OnPush and small API adjustments (ids, method renames). |
Dropdown service libs/zard/src/lib/components/dropdown/dropdown.service.ts |
Introduce Renderer2 usage for listeners, centralize open/close guards, improve outside-click handling and cleanup; make open(...) private. |
Command / input rework libs/zard/src/lib/components/command/* |
Remove Subject-based debouncing, move to signal/output pattern, drop OnInit/OnDestroy, expose updateParentComponents, and refactor selection/search flows. |
Resizable & slider changes libs/zard/src/lib/components/resizable/*, libs/zard/src/lib/components/slider/* |
Add initialization guard, convert resize outputs to output<ZardResizeEvent>() and extend payload, add slider disabled variant and pointer guards, change key handler signatures to generic Event. |
| Demos & formatting assorted libs/zard/src/lib/components/*/demo/*, apps/web/src/** |
Add new accordion demo (multiple-last-not-collapsible), many template formatting and minor non-functional template cleanups. |
Sequence Diagram(s)
sequenceDiagram
autonumber
actor App
participant provideZard as provideZard()
participant Plugins as EventManagerPlugins
participant Doc as DocumentHead
participant Component as ZardComponent
App->>provideZard: call during bootstrap (appConfig.providers)
provideZard->>Plugins: register ZardEventManagerPlugin & ZardDebounceEventManagerPlugin (EVENT_MANAGER_PLUGINS)
provideZard->>Doc: apply/update theme style tag (updatePreset for selected preset)
provideZard-->>App: return EnvironmentProviders
Component->>provideZard: constructor calls checkForProperZardInitialization()
alt plugins present
provideZard-->>Component: initialization OK
else missing
provideZard-->>Component: throw initialization error
end
Note over Plugins,Component: Plugins intercept template event names (modifiers / .debounce) and wrap handlers
Estimated code review effort
🎯 4 (Complex) | ⏱️ ~75 minutes
- Focus areas:
- event-manager plugins (parsing, modifier semantics, key matching, unsubscribe correctness)
- provideZard theme application (style tag lifecycle, error/edge cases)
- Dropdown service (Renderer2 listener lifecycle, outside-click logic, overlay cleanup)
- Command/Combobox/Select: keyboard flows, CVA interactions, runInInjectionContext usage
- Test changes: ensure EVENT_MANAGER_PLUGINS providers and debounce timing are consistent
Possibly related PRs
- 🧪 test: test failure fixed #343 — overlapping debounce/timing and test wiring changes in command tests.
- 🐛 fix(select): add outsidePointerEvents #328 — related Select overlay / lifecycle and keyboard handling edits.
- Eslint config update #315 — overlapping ESLint config edits.
Suggested reviewers
- srizzon
- Luizgomess
- ribeiromatheuss
Poem
🌱 provideZard wakes, a theme unfurled,
Plugins hush keys across the world,
Five palettes hum in dark and light,
Components signal, events take flight,
Modern Zard — initialized and pearled.
Pre-merge checks and finishing touches
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title check | ✅ Passed | The title clearly summarizes the main change: introduction of event manager plugins and CLI update. |
| Description check | ✅ Passed | The description covers all required sections: what was done, type of change, breaking changes, and testing checklist with appropriate completeness. |
| Docstring Coverage | ✅ Passed | Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. |
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
3 tasks
3 tasks
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 27
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
libs/zard/eslint.config.mjs (1)
56-67: Remove duplicatearrow-body-stylerule.The
arrow-body-stylerule is defined twice (lines 56 and 65 with identical configuration). Remove one of these duplicate entries to avoid confusion.Apply this diff:
'@angular-eslint/prefer-standalone': 'error', '@angular-eslint/no-async-lifecycle-method': 'error', '@angular-eslint/prefer-signals': 'warn', '@angular-eslint/consistent-component-styles': 'error', '@angular-eslint/sort-keys-in-type-decorator': 'error', - 'arrow-body-style': ['warn', 'as-needed'], 'prefer-destructuring': 'warn', curly: 'warn', // remove following graduallylibs/zard/src/lib/components/command/command-input.component.ts (1)
27-27: Remove redundantstandalone: true.Per Angular 19+ conventions, components are standalone by default. This flag is redundant and can be removed for cleaner code. Based on learnings.
- standalone: true,libs/zard/src/lib/components/command/command-divider.component.spec.ts (1)
91-103: Inconsistent debounce wait times.This test uses
200mstimeout (line 98), but other tests in this file use150ms(lines 124, 165). Consider using a constant likecommand.component.spec.tsdoes withSEARCH_DEBOUNCE_MS.Extract a constant for consistency:
+const SEARCH_DEBOUNCE_MS = 150; + describe('ZardCommandDividerComponent', () => {Then replace all
setTimeout(resolve, 200)andsetTimeout(resolve, 150)withsetTimeout(resolve, SEARCH_DEBOUNCE_MS)or add a small buffer likeSEARCH_DEBOUNCE_MS + 50where needed.libs/zard/src/lib/components/combobox/combobox.component.ts (1)
60-60:standalone: trueis redundant in Angular 19+.Per project learnings, Angular 19+ components are standalone by default. This explicit declaration can be removed for consistency with other components in this PR that omit it.
imports: [ ... ], - standalone: true, template: `
libs/zard/src/lib/components/accordion/demo/multiple-last-not-collapsible.ts
Show resolved
Hide resolved
libs/zard/src/lib/components/calendar/calendar-grid.component.ts
Outdated
Show resolved
Hide resolved
libs/zard/src/lib/components/resizable/resizable.component.spec.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/web/src/app/domain/components/doc-command/doc-command.component.ts (1)
10-39: Consider enabling OnPush change detection for this dialog doc componentFor consistency with Angular best practices and to reduce unnecessary change detection in this modal, you could import
ChangeDetectionStrategyand addchangeDetection: ChangeDetectionStrategy.OnPushto the@Componentmetadata.libs/zard/src/lib/components/combobox/combobox.component.ts (1)
290-307: LGTM: Option emission adds type-safe selection feedback.The
zComboSelected.emit()provides consumers with the full option object, which is more useful than just the value string. The group and flat option lookup logic is correct.Lines 296-298 could be simplified:
- if (selectedOption) { - break; - } + if (selectedOption) break;
♻️ Duplicate comments (3)
libs/zard/src/lib/components/slider/slider.component.ts (1)
329-341: Event type handling already flagged in previous review.The cast from
EventtoKeyboardEventat Line 340 was already addressed in a previous review comment, which suggested adding a runtime type guard for additional safety.libs/zard/src/lib/components/carousel/carousel.component.ts (1)
24-27: Prefer path-alias import for the provideZard core helperTo align with the repo’s
@zard/*(orzard/*) path aliases and avoid deep relative paths, consider importingcheckForProperZardInitializationvia the configured alias instead of'../core/providezard'(e.g.@zard/.../providezard, matching yourtsconfigpaths).As per coding guidelines, prefer path aliases over relative imports for library code.
libs/zard/src/lib/components/command/command.component.ts (1)
179-185: Event type is intentional architecture trade-off.The
Eventparameter type (with cast toKeyboardEvent) is required by theZardEventManagerPluginhandler signature, as confirmed in previous review discussions. The host binding guarantees these are keyboard events at runtime.Based on past review: The plugin's
addEventListenersignature defines handlers as(event: Event) => void, making this type necessary for compatibility.Also applies to: 189-189
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (6)
apps/web/public/components/command/demo/default.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/carousel.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/combobox.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/command.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/resizable.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/slider.mdis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (11)
apps/web/src/app/domain/components/doc-command/doc-command.component.ts(1 hunks)libs/zard/eslint.config.mjs(2 hunks)libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.ts(2 hunks)libs/zard/src/lib/components/carousel/carousel.component.ts(3 hunks)libs/zard/src/lib/components/combobox/combobox.component.ts(9 hunks)libs/zard/src/lib/components/command/command.component.spec.ts(9 hunks)libs/zard/src/lib/components/command/command.component.ts(4 hunks)libs/zard/src/lib/components/command/demo/default.ts(1 hunks)libs/zard/src/lib/components/dialog/dialog.spec.ts(2 hunks)libs/zard/src/lib/components/sheet/sheet.component.spec.ts(1 hunks)libs/zard/src/lib/components/slider/slider.component.ts(6 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
libs/zard/src/lib/components/**/*.component.ts
📄 CodeRabbit inference engine (CLAUDE.md)
libs/zard/src/lib/components/**/*.component.ts: Create components as standalone components withstandalone: truein Angular
Use Signal-based inputs with theinput()function instead of @input decorators in Angular components
Use OnPush change detection strategy in Angular components:changeDetection: ChangeDetectionStrategy.OnPush
Use host binding for dynamic classes in components:host: { '[class]': 'classes()' }
UsemergeClasses()utility withclsxandtailwind-mergeto resolve class conflicts in component styling
Use computed properties in Angular components for reactive class calculations:protected readonly classes = computed(() => ...)
libs/zard/src/lib/components/**/*.component.ts: Use signal-based inputs (input()) for Angular component inputs in the ZardUI library
Use OnPush change detection strategy for all Angular components
Use host binding with[class]for dynamic class application in components
Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
UsemergeClassesutility withtailwind-mergeto resolve class conflicts in components
Use Angular standalone components as the base template for component architecture
Files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use
@zard/*path aliases for imports mapping tolibs/zard/src/lib/*directories
Files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.ts
libs/zard/src/lib/components/**/*.spec.ts
📄 CodeRabbit inference engine (CLAUDE.md)
libs/zard/src/lib/components/**/*.spec.ts: Co-locate test files with components using.spec.tssuffix next to component files
Use Angular TestBed and ComponentFixture utilities for testing componentsWrite co-located Jest tests using TestBed and ComponentFixture next to components
Files:
libs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.ts
libs/zard/src/lib/components/**/demo/**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
Create demo components in the
demo/folder with a main export, default example, and variant examples
Files:
libs/zard/src/lib/components/command/demo/default.ts
libs/zard/src/lib/components/*/demo/*.ts
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Create component demo files with
name,code, andcomponentproperties following existing patterns
Files:
libs/zard/src/lib/components/command/demo/default.ts
libs/zard/src/lib/components/*/demo/**/*.ts
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Export demo and documentation components with proper naming for automatic site generation
Files:
libs/zard/src/lib/components/command/demo/default.ts
🧠 Learnings (38)
📓 Common learnings
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.ts
📚 Learning: 2025-11-26T10:13:44.258Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with `[class]` for dynamic class application in components
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to **/*.{ts,tsx,js} : Use `zard/*` path aliases for imports mapping to `libs/zard/src/lib/*` directories
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/eslint.config.mjs
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Use path aliases `zard/*` pointing to `libs/zard/src/lib/*` for component imports
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-29T15:31:22.348Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.348Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/eslint.config.mjs
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Implement CVA (Class Variance Authority) for typed variants in component variant files
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy for all Angular components
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
libs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.ts
📚 Learning: 2025-11-26T11:20:45.264Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/select/select.component.spec.ts:79-88
Timestamp: 2025-11-26T11:20:45.264Z
Learning: In ZardUI select component tests (libs/zard/src/lib/components/select/select.component.spec.ts), use fakeAsync() with flush() instead of setTimeout because the component uses setTimeout(..., 0) for focus management, which requires advancing macrotasks in tests.
Applied to files:
libs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Write co-located Jest tests using TestBed and ComponentFixture next to components
Applied to files:
libs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Co-locate test files with components using `.spec.ts` suffix next to component files
Applied to files:
libs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Use Jest with `happy-dom/jest-environment` for testing Angular components
Applied to files:
libs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Implement standalone Angular components with explicit imports rather than using module declarations
Applied to files:
libs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
libs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/alert-dialog/alert-dialog.spec.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
libs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Applied to files:
libs/zard/src/lib/components/command/demo/default.tsapps/web/src/app/domain/components/doc-command/doc-command.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create component demo files with `name`, `code`, and `component` properties following existing patterns
Applied to files:
libs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
libs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
libs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
Applied to files:
libs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-19T20:03:29.205Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 320
File: libs/zard/src/lib/components/tooltip/tooltip.ts:82-105
Timestamp: 2025-11-19T20:03:29.205Z
Learning: In the zard-ui/zardui repository, non-null assertion operator (!) is forbidden by ESLint rule "Forbidden non-null assertion". Use type assertions (e.g., `(value as Type)`) instead when narrowing types after null/undefined checks.
Applied to files:
libs/zard/eslint.config.mjs
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Use signals (`signal()` from `angular/core`) for reactive state management in block components, such as loading states and UI state
Applied to files:
libs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
libs/zard/src/lib/components/command/command.component.ts
🧬 Code graph analysis (4)
libs/zard/src/lib/components/carousel/carousel.component.ts (1)
libs/zard/src/lib/components/core/providezard.ts (1)
checkForProperZardInitialization(70-78)
libs/zard/src/lib/components/command/command.component.spec.ts (2)
libs/zard/src/lib/components/core/event-manager-plugins/zard-event-manager-plugin.ts (1)
ZardEventManagerPlugin(26-106)libs/zard/src/lib/components/core/event-manager-plugins/zard-debounce-event-manager-plugin.ts (1)
ZardDebounceEventManagerPlugin(4-32)
libs/zard/src/lib/components/slider/slider.component.ts (2)
libs/zard/src/lib/shared/utils/utils.ts (1)
mergeClasses(4-6)libs/zard/src/lib/components/slider/slider.variants.ts (1)
sliderThumbVariants(59-69)
libs/zard/src/lib/components/combobox/combobox.component.ts (1)
libs/zard/src/lib/components/core/providezard.ts (1)
checkForProperZardInitialization(70-78)
🔇 Additional comments (26)
libs/zard/eslint.config.mjs (2)
48-57: TS style rules are coherent; narrowedprefer-destructuringavoids prior noiseThe
curly: 'warn'andarrow-body-style: ['warn', 'as-needed']additions fit well with the rest of the TS rules and should gently enforce safer, clearer control flow and arrow usage without being overbearing.Configuring
'prefer-destructuring'with{ object: true, array: false }addresses the earlier concern about noisy array cases while still nudging toward clearer object access, which is a good balance for this codebase.
73-73: Raising@angular-eslint/prefer-output-emitter-reftoerrormatches strict Angular best practicesTreating
@angular-eslint/prefer-output-emitter-refas an error is consistent with the rest of the strict Angular rules here and will help keep outputs aligned with the preferred emitter-ref / signal patterns across the library.Just ensure the entire libs/zard tree is clean against this rule before merging so it doesn’t suddenly block unrelated work in other packages.
libs/zard/src/lib/components/command/demo/default.ts (1)
79-81: Centralized preventDefault guard is correct and keeps behavior aligned with displayed shortcutsConsolidating the
preventDefault()call behind the meta/ctrl check forn,o,s,1,2,t, anddremoves duplication while preserving the intended handling of these shortcuts and avoiding browser defaults.apps/web/src/app/domain/components/doc-command/doc-command.component.ts (2)
19-27: Getting Started command option formatting change looks goodThe refactored
<z-command-option>markup preserves the same bindings (zLabel,zValue,zIcon) and behavior; this is a safe, readability-only change.
31-35: Components command option one-line template is functionally unchangedThe single-line
<z-command-option>keeps the same label/value/icon semantics as before; no issues from a behavior or event-handling standpoint.libs/zard/src/lib/components/slider/slider.component.ts (4)
136-138: LGTM! Disabled variant properly integrated.The computed classes now correctly include the disabled state, enabling conditional hover effects via the variant system.
174-174: LGTM! Event manager plugin syntax used correctly.The
.preventmodifier leverages the new event manager plugin to handle preventDefault declaratively, reducing boilerplate.
249-251: LGTM! Defensive disabled guards correctly placed.The disabled checks at interaction entry points prevent unwanted state changes when the slider is disabled, ensuring proper accessibility behavior.
Also applies to: 286-288
342-367: LGTM! Conditional update optimizes performance.The restructured logic now only updates state and emits changes when the value actually changes, preventing unnecessary operations when keys are pressed at min/max bounds.
libs/zard/src/lib/components/carousel/carousel.component.ts (2)
103-106: Keyboard host bindings correctly use event modifiers and host configWiring arrow key navigation via the
hostobject with(keydown.arrowleft.prevent)/(keydown.arrowright.prevent)keeps things declarative, leverages the new event manager plugins, and avoids@HostListener, which matches the library’s Angular best-practice guidelines. No issues from my side here.As per coding guidelines, this correctly uses host bindings instead of
@HostListener.
134-136: Constructor-level initialization guard is appropriateCalling
checkForProperZardInitialization()in the constructor gives a clear, early failure whenprovideZard()(and the event manager plugins) are missing, and the helper itself usesinject(EVENT_MANAGER_PLUGINS, { optional: true }), so it’s DI-safe in this context. This is consistent with the new initialization pattern introduced in this PR.Based on learnings, this matches the intended
provideZard()+ guard workflow.libs/zard/src/lib/components/combobox/combobox.component.ts (9)
2-2: LGTM: Import additions support proper lifecycle and initialization.The new Angular core imports (
afterNextRender,inject,Injector,runInInjectionContext) enable deterministic post-render timing instead of relying onsetTimeout, andcheckForProperZardInitializationenforces theprovideZard()requirement.Also applies to: 8-9, 12-12, 30-30
170-176: LGTM: Keyboard bindings now preserve Tab navigation accessibility.Splitting Tab into a separate binding without
.prevent(line 175) correctly allows browser focus movement while still closing the popover, addressing the accessibility concern from previous reviews.
180-180: LGTM: Injector field enables proper injection context in lifecycle callbacks.Using
inject(Injector)to maintain context forafterNextRendercallbacks is the correct Angular pattern.
196-197: Excellent migration to signal-based outputs.Converting
zValueChangefromEventEmittertooutput()and adding the typedzComboSelectedoutput aligns perfectly with Angular's modern signal-based API patterns.
246-248: LGTM: Initialization guard enforces provideZard() requirement.The constructor properly invokes
checkForProperZardInitialization()to ensure event manager plugins are registered, aligning with the broader initialization strategy introduced in this PR.Based on learnings, the CLI will automatically handle this requirement in the next release.
261-276: LGTM: Lifecycle refactor replaces setTimeout with deterministic timing.Wrapping
commandRef.refreshOptions()and focus management inrunInInjectionContext(() => afterNextRender(...))provides predictable post-render execution and maintains proper DI context, addressing previous timing concerns.
316-325: LGTM: Escape handler now flattened and clearer.The refactored logic with early return (lines 317-319) when the popover is open simplifies the conditional flow compared to the previous nested structure.
383-395: LGTM: Document escape handler with proper target containment check.The comment typo has been fixed, and the containment check (line 390) correctly prevents double-handling when Escape is pressed while focused on the component itself.
327-381: Perfect! I've verified thatZardCommandComponenthas a publiconKeyDownmethod at line 179 inlibs/zard/src/lib/components/command/command.component.ts. The method signature isonKeyDown(event: Event), which is compatible with the call on line 350 of the combobox component where it's invoked with aKeyboardEvent(which extendsEvent).The verification request in the original review comment is satisfied. Here's the rewritten review comment:
LGTM: Comprehensive keyboard handling with proper lifecycle timing.
The refactored
onKeyDownmethod provides clear state separation (open vs. closed) and usesrunInInjectionContext(() => afterNextRender(...))for type-ahead character seeding (lines 367-376), replacing the fragilesetTimeoutpattern.The Tab case (line 338-341) correctly closes the popover without preventing default, preserving focus navigation.
ZardCommandComponentexposes a publiconKeyDown(event: Event)method that is called on line 350, and the method signature is compatible with theKeyboardEventpassed from the combobox component.libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.ts (1)
18-18: LGTM! Consistent removal of animation module dependencies.The removal of
NoopAnimationsModulealigns with the PR's architectural shift toward event manager plugins and reduces test dependencies. The alert dialog tests remain focused on service-level functionality and don't require animation scaffolding.Also applies to: 71-71
libs/zard/src/lib/components/sheet/sheet.component.spec.ts (1)
72-72: LGTM! Animation module removal is consistent.Removing
BrowserAnimationsModulealigns with the broader test architecture changes in this PR. The test suite's animation timing waits (viasetTimeout) continue to verify final states correctly.libs/zard/src/lib/components/dialog/dialog.spec.ts (2)
12-14: Good practice: explicit button type added.The explicit
type="button"prevents unintended form submission behavior and improves accessibility. The template formatting also enhances readability.
35-35: LGTM! Consistent animation module removal.Removing
NoopAnimationsModulealigns with the PR's shift to event manager plugin-based testing architecture.libs/zard/src/lib/components/command/command.component.spec.ts (1)
3-3: Excellent! Proper EVENT_MANAGER_PLUGINS wiring.The test setup correctly registers both
ZardEventManagerPluginandZardDebounceEventManagerPluginusing Angular's multi-provider pattern. This enables testing of the new event modifier syntax (.prevent,.debounce) introduced in this PR.Also applies to: 12-13, 66-77
libs/zard/src/lib/components/command/command.component.ts (1)
75-75: Add initialization validation to command.component.ts to match library pattern.The
command.component.tsuses custom event manager plugin syntax ((keydown.{arrowdown,arrowup,enter,escape}.prevent)) but does not validate thatprovideZard()is configured, unlike all other components using custom event syntax (carousel, select, dropdown, etc.).Add
checkForProperZardInitialization()to the command component's constructor:import { checkForProperZardInitialization } from '../core/providezard'; constructor() { checkForProperZardInitialization(); effect(() => { this.triggerOptionsUpdate(); }); }Note: Missing
provideZard()throws an explicit error ("Zard: Initialization missing. Please callprovideZard()in your app's root providers") rather than failing silently. The library components consistently enforce this check at instantiation time.⛔ Skipped due to learnings
Learnt from: mikij Repo: zard-ui/zardui PR: 348 File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22 Timestamp: 2025-11-26T10:13:44.258Z Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.Learnt from: CR Repo: zard-ui/zardui PR: 0 File: CONTRIBUTING.md:0-0 Timestamp: 2025-11-25T18:54:22.692Z Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI libraryLearnt from: mikij Repo: zard-ui/zardui PR: 326 File: libs/zard/src/lib/components/input/float.label.component.ts:71-0 Timestamp: 2025-11-14T22:52:09.135Z Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).Learnt from: CR Repo: zard-ui/zardui PR: 0 File: CONTRIBUTING.md:0-0 Timestamp: 2025-11-25T18:54:22.692Z Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architectureLearnt from: CR Repo: zard-ui/zardui PR: 0 File: libs/blocks/README.md:0-0 Timestamp: 2025-11-25T18:54:50.383Z Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templatesLearnt from: CR Repo: zard-ui/zardui PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-25T18:54:01.560Z Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular componentsLearnt from: CR Repo: zard-ui/zardui PR: 0 File: CONTRIBUTING.md:0-0 Timestamp: 2025-11-25T18:54:22.692Z Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`Learnt from: CR Repo: zard-ui/zardui PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-25T18:54:01.560Z Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`Learnt from: CR Repo: zard-ui/zardui PR: 0 File: CONTRIBUTING.md:0-0 Timestamp: 2025-11-25T18:54:22.692Z Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy for all Angular componentsLearnt from: CR Repo: zard-ui/zardui PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-25T18:54:01.560Z Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
mikij
force-pushed
the
task/#341-event-manager-plugin
branch
from
bb9e644 to
8b3503f
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
libs/zard/src/lib/components/dialog/dialog.spec.ts (1)
174-174: Remove outdated comment.This comment references
NoopAnimationsModule, which was removed from the test configuration at line 35. The comment is now misleading and should be deleted.Apply this diff:
- // With animations, state should be 'open' - // Note: NoopAnimationsModule is used in tests so animation states still work + // Dialog should be in 'open' statelibs/zard/src/lib/components/command/demo/default.ts (1)
76-106: CentralizedpreventDefaultis fine, but the key guard is a bit opaque and may affect browser shortcutsThe new guard
if ('nos12td'.includes(event.key.toLowerCase())) { event.preventDefault(); }is functionally correct, but the magic string is hard to read and easy to desync from the switch below.
Consider something like:
const key = event.key.toLowerCase(); const HOTKEY_KEYS = new Set(['n', 'o', 's', '1', '2', 't', 'd']); if (HOTKEY_KEYS.has(key)) { event.preventDefault(); } switch (key) { // ... }This makes the intent clearer and keeps the guard and switch in lockstep.
Also, because this listener is on
window:keydownand callspreventDefault()for these meta/ctrl combinations, it will suppress common browser shortcuts (e.g., Cmd/Ctrl+T, Cmd/Ctrl+1/2, etc.) across the page. If that’s not strictly desired for the docs/demo environment, you may want to scope the listener (or early‑return) based onevent.targetto avoid hijacking global browser shortcuts outside the command context.
♻️ Duplicate comments (2)
libs/zard/src/lib/components/carousel/carousel.component.ts (1)
26-26: Prefer path-alias import forcheckForProperZardInitialization.Use the configured alias import here (e.g.
@zard/core/providezard) instead of the relative'../core/providezard'to stay consistent with the rest of the library and ease refactors.-import { checkForProperZardInitialization } from '../core/providezard'; +import { checkForProperZardInitialization } from '@zard/core/providezard';As per coding guidelines, alias imports are preferred.
libs/zard/src/lib/components/slider/slider.component.ts (1)
329-368: Add a runtime type guard before usingevent.keyinhandleKeydown.
handleKeydownnow takesEventand then casts toKeyboardEventto read.key. For extra safety and to align with prior feedback, add a guard so non‑keyboard events are ignored and you can drop the cast:- handleKeydown(event: Event): void { - if (this.disabled()) { - return; - } - - const percent = this.percentValue(); + handleKeydown(event: Event): void { + if (this.disabled()) { + return; + } + if (!(event instanceof KeyboardEvent)) { + return; + } + + const percent = this.percentValue(); @@ - let newValue = currentValue; - - const { key } = event as KeyboardEvent; + let newValue = currentValue; + const { key } = event;The rest of the logic (no‑op when
newValue === currentValue, emitting throughzSlideIndexChange, updating signals, and relying on the template’s.preventmodifier) looks good.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (7)
apps/web/public/components/command/demo/default.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/calendar.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/carousel.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/combobox.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/command.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/resizable.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/slider.mdis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (11)
apps/web/src/app/domain/components/doc-command/doc-command.component.ts(1 hunks)libs/zard/eslint.config.mjs(2 hunks)libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.ts(2 hunks)libs/zard/src/lib/components/carousel/carousel.component.ts(3 hunks)libs/zard/src/lib/components/combobox/combobox.component.ts(9 hunks)libs/zard/src/lib/components/command/command.component.spec.ts(9 hunks)libs/zard/src/lib/components/command/command.component.ts(4 hunks)libs/zard/src/lib/components/command/demo/default.ts(1 hunks)libs/zard/src/lib/components/dialog/dialog.spec.ts(2 hunks)libs/zard/src/lib/components/sheet/sheet.component.spec.ts(1 hunks)libs/zard/src/lib/components/slider/slider.component.ts(6 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
libs/zard/src/lib/components/**/*.spec.ts
📄 CodeRabbit inference engine (CLAUDE.md)
libs/zard/src/lib/components/**/*.spec.ts: Co-locate test files with components using.spec.tssuffix next to component files
Use Angular TestBed and ComponentFixture utilities for testing componentsWrite co-located Jest tests using TestBed and ComponentFixture next to components
Files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.ts
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/command/command.component.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use
@zard/*path aliases for imports mapping tolibs/zard/src/lib/*directories
Files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/carousel/carousel.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/command/command.component.ts
libs/zard/src/lib/components/**/*.component.ts
📄 CodeRabbit inference engine (CLAUDE.md)
libs/zard/src/lib/components/**/*.component.ts: Create components as standalone components withstandalone: truein Angular
Use Signal-based inputs with theinput()function instead of @input decorators in Angular components
Use OnPush change detection strategy in Angular components:changeDetection: ChangeDetectionStrategy.OnPush
Use host binding for dynamic classes in components:host: { '[class]': 'classes()' }
UsemergeClasses()utility withclsxandtailwind-mergeto resolve class conflicts in component styling
Use computed properties in Angular components for reactive class calculations:protected readonly classes = computed(() => ...)
libs/zard/src/lib/components/**/*.component.ts: Use signal-based inputs (input()) for Angular component inputs in the ZardUI library
Use OnPush change detection strategy for all Angular components
Use host binding with[class]for dynamic class application in components
Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
UsemergeClassesutility withtailwind-mergeto resolve class conflicts in components
Use Angular standalone components as the base template for component architecture
Files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
libs/zard/src/lib/components/**/demo/**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
Create demo components in the
demo/folder with a main export, default example, and variant examples
Files:
libs/zard/src/lib/components/command/demo/default.ts
libs/zard/src/lib/components/*/demo/*.ts
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Create component demo files with
name,code, andcomponentproperties following existing patterns
Files:
libs/zard/src/lib/components/command/demo/default.ts
libs/zard/src/lib/components/*/demo/**/*.ts
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Export demo and documentation components with proper naming for automatic site generation
Files:
libs/zard/src/lib/components/command/demo/default.ts
🧠 Learnings (41)
📓 Common learnings
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Use path aliases `zard/*` pointing to `libs/zard/src/lib/*` for component imports
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/sheet/sheet.component.spec.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Write co-located Jest tests using TestBed and ComponentFixture next to components
Applied to files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/carousel/carousel.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Co-locate test files with components using `.spec.ts` suffix next to component files
Applied to files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.ts
📚 Learning: 2025-11-26T11:20:45.264Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/select/select.component.spec.ts:79-88
Timestamp: 2025-11-26T11:20:45.264Z
Learning: In ZardUI select component tests (libs/zard/src/lib/components/select/select.component.spec.ts), use fakeAsync() with flush() instead of setTimeout because the component uses setTimeout(..., 0) for focus management, which requires advancing macrotasks in tests.
Applied to files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/sheet/sheet.component.spec.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy for all Angular components
Applied to files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Applied to files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/carousel/carousel.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Implement standalone Angular components with explicit imports rather than using module declarations
Applied to files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/carousel/carousel.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/command/demo/default.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Applied to files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/carousel/carousel.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tsapps/web/src/app/domain/components/doc-command/doc-command.component.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Use Jest with `happy-dom/jest-environment` for testing Angular components
Applied to files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/sheet/sheet.component.spec.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Applied to files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/carousel/carousel.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
libs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/carousel/carousel.component.tsapps/web/src/app/domain/components/doc-command/doc-command.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/sheet/sheet.component.spec.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-26T10:13:44.258Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Applied to files:
libs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
Applied to files:
libs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Applied to files:
libs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
libs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with `[class]` for dynamic class application in components
Applied to files:
libs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to **/*.{ts,tsx,js} : Use `zard/*` path aliases for imports mapping to `libs/zard/src/lib/*` directories
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/eslint.config.mjs
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Use path aliases `zard/*` pointing to `libs/zard/src/lib/*` for component imports
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-29T15:31:22.348Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.348Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/eslint.config.mjslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Implement CVA (Class Variance Authority) for typed variants in component variant files
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Applied to files:
apps/web/src/app/domain/components/doc-command/doc-command.component.tslibs/zard/src/lib/components/command/demo/default.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/doc/**/*.md : Write component documentation in `doc/overview.md` and `doc/api.md` files
Applied to files:
apps/web/src/app/domain/components/doc-command/doc-command.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create component demo files with `name`, `code`, and `component` properties following existing patterns
Applied to files:
apps/web/src/app/domain/components/doc-command/doc-command.component.tslibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
libs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
libs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
libs/zard/src/lib/components/dialog/dialog.spec.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
Applied to files:
libs/zard/eslint.config.mjslibs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Applied to files:
libs/zard/eslint.config.mjs
📚 Learning: 2025-11-19T20:03:29.205Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 320
File: libs/zard/src/lib/components/tooltip/tooltip.ts:82-105
Timestamp: 2025-11-19T20:03:29.205Z
Learning: In the zard-ui/zardui repository, non-null assertion operator (!) is forbidden by ESLint rule "Forbidden non-null assertion". Use type assertions (e.g., `(value as Type)`) instead when narrowing types after null/undefined checks.
Applied to files:
libs/zard/eslint.config.mjslibs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Use signals (`signal()` from `angular/core`) for reactive state management in block components, such as loading states and UI state
Applied to files:
libs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
libs/zard/src/lib/components/command/command.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Always use the `protected` access modifier for component properties and methods that are accessed in templates (e.g., `protected readonly`, `protected onSubmit()`)
Applied to files:
libs/zard/src/lib/components/command/command.component.ts
🧬 Code graph analysis (4)
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.ts (1)
libs/zard/src/index.ts (1)
ZardAlertDialogComponent(62-62)
libs/zard/src/lib/components/command/command.component.spec.ts (2)
libs/zard/src/lib/components/core/event-manager-plugins/zard-event-manager-plugin.ts (1)
ZardEventManagerPlugin(26-106)libs/zard/src/lib/components/core/event-manager-plugins/zard-debounce-event-manager-plugin.ts (1)
ZardDebounceEventManagerPlugin(4-32)
libs/zard/src/lib/components/carousel/carousel.component.ts (1)
libs/zard/src/lib/components/core/providezard.ts (1)
checkForProperZardInitialization(70-78)
libs/zard/src/lib/components/slider/slider.component.ts (2)
libs/zard/src/lib/shared/utils/utils.ts (1)
mergeClasses(4-6)libs/zard/src/lib/components/slider/slider.variants.ts (1)
sliderThumbVariants(59-69)
🔇 Additional comments (26)
libs/zard/src/lib/components/alert-dialog/alert-dialog.spec.ts (1)
18-18: LGTM: Test module simplification aligns with plugin-based architecture.Removing
NoopAnimationsModuleis consistent with the PR's shift to event manager plugins and reduces unnecessary test dependencies.Also applies to: 71-71
libs/zard/src/lib/components/sheet/sheet.component.spec.ts (1)
72-72: LGTM: Simplified test module configuration.Removing
BrowserAnimationsModulealigns with the PR's plugin-based event handling approach and reduces test setup complexity.libs/zard/src/lib/components/dialog/dialog.spec.ts (2)
12-14: LGTM: Explicit button type prevents form submission.Adding
type="button"follows best practices and prevents the button from accidentally submitting forms in test contexts.
35-35: LGTM: Test module simplification.Removing
NoopAnimationsModuleis consistent with the plugin-based event handling architecture introduced in this PR.apps/web/src/app/domain/components/doc-command/doc-command.component.ts (2)
21-25: Multi-line option markup keeps bindings intactThe switch to multi-line
<z-command-option>markup preserves the[zLabel],[zValue]('navigate:' + item.path), andzIconbindings, with no behavioral change and slightly clearer diff/readability.
33-33: Components group option remains consistent with navigate patternThis option still uses the same
'navigate:' + item.pathvalue convention and icon usage, so it stays aligned withhandleCommand’s navigation logic and the group above.libs/zard/eslint.config.mjs (1)
48-57: TS style rules (curly / arrow-body-style / prefer-destructuring) are well‑tuned for strict TS
curly: 'warn'plus'arrow-body-style': ['warn', 'as-needed']and the object‑onlyprefer-destructuringconfig give you clearer, more consistent TS without the usual noisy array warnings. This matches the repo’s push toward strict, readable TypeScript and should play nicely with the Angular signal/OnPush patterns elsewhere.If you haven’t already, please run the full Nx lint targets for
libs/zardto confirm warning volume fromcurly/arrow-body-styleis acceptable for existing code and doesn’t drown out higher‑value Angular signal/CVA violations.libs/zard/src/lib/components/carousel/carousel.component.ts (2)
103-106: Host-level arrow-key bindings with.preventlook good and plugin-friendly.Binding
(keydown.arrowleft.prevent)/(keydown.arrowright.prevent)inhostkeeps keyboard logic on the host element, works cleanly with the new EventManagerPlugins, and avoids@HostListener, matching the Angular + signals best-practice direction.
134-136: Ctor init guard is correct; confirm all entrypoints wireprovideZard().Calling
checkForProperZardInitialization()in the constructor enforces that the event plugins are registered, but it will now throw in any context that instantiatesZardCarouselComponentwithoutprovideZard()(e.g., Storybook stories or isolated tests). Please double-check that all such entrypoints either callprovideZard()or provide equivalent test providers; the CLI auto-wiring mentioned in the learnings will cover future apps but not existing manual setups. Based on learnings, this is the intended guard, but it still needs ecosystem verification.libs/zard/src/lib/components/combobox/combobox.component.ts (8)
2-2: LGTM! Clean injection and initialization setup.The imports and injector field follow Angular best practices using the
inject()function and proper injection context handling forafterNextRender.Also applies to: 8-9, 12-12, 30-30, 180-180
246-248: LGTM! Initialization guard properly enforced.The constructor correctly enforces proper Zard initialization through
checkForProperZardInitialization(), ensuring the event manager plugins are registered.Based on learnings, the ZardUI CLI will automatically add
provideZard()to app configuration before the next release.
172-175: LGTM! Keyboard accessibility preserved with proper Tab handling.The host bindings correctly separate Tab (line 175) without
.preventto allow native focus navigation, while applying.preventto other navigation keys to prevent scrolling. The document-level escape handler and component-level escape handler work together properly.
196-197: LGTM! Modern output() pattern correctly applied.Both outputs properly use the
output()function instead of@Output()decorators, following Angular best practices for signal-based APIs. The newzComboSelectedoutput provides useful access to the full option object.
258-277: LGTM! Proper injection context usage for post-render logic.The
runInInjectionContextwithafterNextRendercorrectly ensures the DOM is ready before accessing elements and managing focus. This is more deterministic thansetTimeoutand follows Angular best practices for lifecycle-aware rendering.
316-325: LGTM! Escape key logic is correct.The dual behavior (close popover if open, clear value if closed) makes sense for UX. The logic is correct and readable.
Optional: Could flatten slightly with early return:
onKeyDownEscape(): void { if (this.open()) { this.popoverDirective().hide(); this.buttonRef().nativeElement.focus(); + return; - } else if (this.getCurrentValue()) { + } + if (this.getCurrentValue()) { this.internalValue.set(null); this.onChange(null); this.zValueChange.emit(null); } }
327-381: LGTM! Comprehensive keyboard handling with proper type-ahead support.The keyboard handling correctly:
- Uses
Eventparameter to match the plugin signature, casting toKeyboardEventfor property access- Separates open/closed state logic clearly
- Delegates navigation to command component when open
- Implements type-ahead for searchable comboboxes using proper injection context
- Properly sets input value and focuses after the next render
The type-ahead logic has been confirmed working by the developer.
383-395: LGTM! Document-level escape handling with proper containment check.The document-level escape handler correctly complements the component-level handler by only acting when the escape is pressed outside the component, preventing duplicate handling. The containment check ensures proper event delegation.
libs/zard/src/lib/components/command/command.component.spec.ts (4)
3-3: LGTM! Proper event manager plugin imports for testing.The imports correctly bring in the platform's
EVENT_MANAGER_PLUGINStoken and both custom event manager plugins needed for comprehensive testing of the component's keyboard and debounced event handling.Also applies to: 12-13
66-77: LGTM! Correct multi-provider registration for event manager plugins.The TestBed configuration properly registers both event manager plugins using
multi: true, which is required for theEVENT_MANAGER_PLUGINStoken. This mirrors the production setup and ensures keyboard and debounced events work correctly in tests.
15-15: LGTM! Debounce constant improves test maintainability.The
SEARCH_DEBOUNCE_MSconstant eliminates magic numbers and makes the debounce timing explicit and consistent throughout the test suite.Also applies to: 300-300, 321-321
167-167: LGTM! Idiomatic array destructuring improves readability.The array destructuring pattern
[firstOption]and[, disabledOption]is more idiomatic than indexed access and improves test readability.Also applies to: 182-182, 196-196, 208-208
libs/zard/src/lib/components/command/command.component.ts (4)
72-73: LGTM! Optimized static ARIA attributes and correct key binding.The static host attributes for
roleandaria-haspopupeliminate unnecessary change detection overhead. The keydown binding correctly filters to navigation keys (ArrowDown, ArrowUp, Enter, Escape) with proper preventDefault behavior.Also applies to: 75-75
104-106: LGTM! Defensive guards prevent runtime errors.The guards correctly handle:
- Null
optionComponents()by returning empty array- Empty search term by returning all options
- Empty search in status message by returning empty string (no status announcement needed)
These guards improve robustness and prevent potential null reference errors.
Also applies to: 109-111, 125-127
179-179: LGTM! Correct Event signature with safe KeyboardEvent cast.The
Eventparameter type matches the event manager plugin's handler signature, with a safe cast toKeyboardEventfor property access. The guard for emptyfilteredOptionsprevents unnecessary processing.As per past review, this pattern is correct because the plugin handler signature requires
Event.Also applies to: 181-183, 185-185
189-217: LGTM! Clean keyboard navigation logic with proper wrapping.The switch statement correctly handles:
- ArrowDown/ArrowUp: Cycles through options with wrap-around
- Enter: Selects current option with disabled check
- Escape: Clears selection
The logic is sound and follows accessible keyboard navigation patterns.
libs/zard/src/lib/components/slider/slider.component.ts (1)
136-138: Thumb classes now correctly incorporate the disabled variant.Wiring
disabled: this.disabled()intosliderThumbVariantsmatches the variant definition and ensures hover styling is suppressed when disabled; this looks consistent and correct.
mikij
force-pushed
the
task/#341-event-manager-plugin
branch
from
7053239 to
27db5aa
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
apps/web/public/installation/manual/calendar.mdis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (1)
libs/zard/src/lib/components/core/providezard.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/components/core/providezard.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use
@zard/*path aliases for imports mapping tolibs/zard/src/lib/*directories
Files:
libs/zard/src/lib/components/core/providezard.ts
🧠 Learnings (19)
📓 Common learnings
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
📚 Learning: 2025-11-26T10:13:44.258Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to **/*.{ts,tsx,js} : Use `zard/*` path aliases for imports mapping to `libs/zard/src/lib/*` directories
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-29T15:31:22.348Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.348Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Keep commit messages in present tense, single line format with scope and description (e.g., '✨ feat(popover): add popover component')
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-19T20:03:29.205Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 320
File: libs/zard/src/lib/components/tooltip/tooltip.ts:82-105
Timestamp: 2025-11-19T20:03:29.205Z
Learning: In the zard-ui/zardui repository, non-null assertion operator (!) is forbidden by ESLint rule "Forbidden non-null assertion". Use type assertions (e.g., `(value as Type)`) instead when narrowing types after null/undefined checks.
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
🔇 Additional comments (3)
libs/zard/src/lib/components/core/providezard.ts (3)
16-16: LGTM: Injection token is well-defined.The
ZARD_CONFIGinjection token follows Angular best practices with proper typing and a descriptive identifier.
63-67: LGTM: Preset helpers are clean and type-safe.The preset helper functions follow a consistent pattern and use
as constfor proper type narrowing. They provide a clean, discoverable API for consumers.
69-77: LGTM: Initialization check is robust.The initialization guard correctly uses optional injection with a safe default and provides a clear error message when
provideZard()hasn't been called. Based on learnings, the CLI will automatically add this call in future releases.
mikij
force-pushed
the
task/#341-event-manager-plugin
branch
from
c503a07 to
59cbb15
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
libs/zard/src/lib/components/slider/slider.component.ts (1)
326-364: Add runtime type guard for Event→KeyboardEvent cast.The
Eventparameter type matches the template binding, but the cast toKeyboardEventon line 337 lacks a runtime type guard. While the binding ensures keyboard events, adding an explicit check improves type safety and follows best practices.Apply this diff to add a type guard:
handleKeydown(event: Event): void { if (this.disabled()) { return; } + if (!(event instanceof KeyboardEvent)) { + return; + } const percent = this.percentValue(); const rawValue = this.zMin() + ((this.zMax() - this.zMin()) * percent) / 100; const currentValue = roundToStep(rawValue, this.zMin(), this.zStep()); let newValue = currentValue; - const { key } = event as KeyboardEvent; + const { key } = event; switch (key) {Note: The consolidated switch logic and conditional update at line 359 are excellent optimizations.
libs/zard/src/lib/components/core/providezard.ts (1)
18-65: Clarify thatprovideZard()is meant to be called once at the app root (plugin stacking)
provideZard()nicely bundles config, event-manager plugins, and the theme app initializer. Because both plugins are registered withmulti: true, callingprovideZard()multiple times will stack duplicate plugin instances. It would help DX to make the “single root usage” expectation explicit in this usage comment (and in docs/CLI), so consumers don’t accidentally register the plugins more than once.You could tweak the block comment like this:
-/* - usage: - - provideZard(): uses the theme defined in styles.css only - - provideZard(withSlatePreset()): selects a base color preset from app.config and - overrides what is defined in styles.css - - ** Note ** styles.css from CLI is still required for overrides to work. - */ +/* + usage (call once at the app root): + - provideZard(): uses the theme defined in styles.css only + - provideZard(withSlatePreset()): selects a base color preset from app.config and + overrides what is defined in styles.css + + **Note** styles.css from CLI is still required for overrides to work. + + Calling provideZard() more than once will register duplicate event-manager plugins. + */Given the CLI will soon auto-inject
provideZard()in app configuration, this root-only expectation seems reasonable. Based on learnings, this aligns with the planned CLI behavior.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
libs/zard/src/lib/components/core/providezard.ts(1 hunks)libs/zard/src/lib/components/slider/slider.component.ts(7 hunks)libs/zard/tsconfig.json(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/src/lib/components/slider/slider.component.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use
@zard/*path aliases for imports mapping tolibs/zard/src/lib/*directories
Files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/src/lib/components/slider/slider.component.ts
libs/zard/src/lib/components/**/*.component.ts
📄 CodeRabbit inference engine (CLAUDE.md)
libs/zard/src/lib/components/**/*.component.ts: Create components as standalone components withstandalone: truein Angular
Use Signal-based inputs with theinput()function instead of @input decorators in Angular components
Use OnPush change detection strategy in Angular components:changeDetection: ChangeDetectionStrategy.OnPush
Use host binding for dynamic classes in components:host: { '[class]': 'classes()' }
UsemergeClasses()utility withclsxandtailwind-mergeto resolve class conflicts in component styling
Use computed properties in Angular components for reactive class calculations:protected readonly classes = computed(() => ...)
libs/zard/src/lib/components/**/*.component.ts: Use signal-based inputs (input()) for Angular component inputs in the ZardUI library
Use OnPush change detection strategy for all Angular components
Use host binding with[class]for dynamic class application in components
Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
UsemergeClassesutility withtailwind-mergeto resolve class conflicts in components
Use Angular standalone components as the base template for component architecture
Files:
libs/zard/src/lib/components/slider/slider.component.ts
🧠 Learnings (33)
📓 Common learnings
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
📚 Learning: 2025-11-26T10:13:44.258Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Applied to files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/tsconfig.json
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Applied to files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/tsconfig.jsonlibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Applied to files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/tsconfig.json
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/tsconfig.json
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Applied to files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to **/*.{ts,tsx,js} : Use `zard/*` path aliases for imports mapping to `libs/zard/src/lib/*` directories
Applied to files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/tsconfig.json
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-29T15:31:22.348Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.348Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-30T08:29:35.844Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/combobox/combobox.component.ts:227-229
Timestamp: 2025-11-30T08:29:35.844Z
Learning: In the zard-ui/zardui repository, the "curly" ESLint rule is enforced (configured as 'warn' in libs/zard/eslint.config.mjs). Always use explicit braces around control flow statements (if, else, for, while, etc.) even for single-statement blocks. Do not suggest one-line early returns or removing braces.
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Keep commit messages in present tense, single line format with scope and description (e.g., '✨ feat(popover): add popover component')
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-19T20:03:29.205Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 320
File: libs/zard/src/lib/components/tooltip/tooltip.ts:82-105
Timestamp: 2025-11-19T20:03:29.205Z
Learning: In the zard-ui/zardui repository, non-null assertion operator (!) is forbidden by ESLint rule "Forbidden non-null assertion". Use type assertions (e.g., `(value as Type)`) instead when narrowing types after null/undefined checks.
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Use path aliases `zard/*` pointing to `libs/zard/src/lib/*` for component imports
Applied to files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/tsconfig.json
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Co-locate test files with components using `.spec.ts` suffix next to component files
Applied to files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/tsconfig.json
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create component demo files with `name`, `code`, and `component` properties following existing patterns
Applied to files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/tsconfig.json
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Applied to files:
libs/zard/src/lib/components/core/providezard.tslibs/zard/tsconfig.json
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
libs/zard/src/lib/components/core/providezard.ts
📚 Learning: 2025-11-25T18:55:04.698Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-11-25T18:55:04.698Z
Learning: Applies to packages/cli/**/tsconfig.json : Configure TypeScript path mappings in tsconfig.json to use clean import paths like shared/*
Applied to files:
libs/zard/tsconfig.json
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Use ES modules with `"type": "module"` in package.json configuration
Applied to files:
libs/zard/tsconfig.json
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
libs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy for all Angular components
Applied to files:
libs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
libs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with `[class]` for dynamic class application in components
Applied to files:
libs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
libs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Use Angular's `ReactiveFormsModule` for form handling in block components and implement form validation with `FormControl`, `FormGroup`, and `Validators`
Applied to files:
libs/zard/src/lib/components/slider/slider.component.ts
🧬 Code graph analysis (2)
libs/zard/src/lib/components/core/providezard.ts (4)
libs/zard/src/lib/components/core/config/config.types.ts (1)
ZardConfigType(13-13)libs/zard/src/lib/components/core/event-manager-plugins/zard-event-manager-plugin.ts (1)
ZardEventManagerPlugin(26-106)libs/zard/src/lib/components/core/event-manager-plugins/zard-debounce-event-manager-plugin.ts (1)
ZardDebounceEventManagerPlugin(4-32)libs/zard/src/lib/components/core/config/update-preset.ts (1)
updatePreset(8-22)
libs/zard/src/lib/components/slider/slider.component.ts (2)
libs/zard/src/lib/shared/utils/utils.ts (1)
mergeClasses(4-6)libs/zard/src/lib/components/slider/slider.variants.ts (1)
sliderThumbVariants(59-69)
🔇 Additional comments (7)
libs/zard/src/lib/components/slider/slider.component.ts (3)
136-138: LGTM: Disabled variant integration.The updated
classescomputed correctly passes the disabled state tosliderThumbVariants(), enabling proper styling for the disabled thumb. This aligns with the new disabled variant inslider.variants.ts.
174-174: Event binding correctly uses the new event manager plugin.The
.preventmodifier in the keydown binding now relies on the Angular event manager plugin introduced in this PR, eliminating the need for manualevent.preventDefault()calls. EnsureprovideZard()is configured in the app to register these plugins.Based on learnings, the ZardUI CLI will automatically add
provideZard()before the next release.
306-308: LGTM: Efficient early return prevents redundant updates.The early return when
roundedValue === this.lastEmittedValue()correctly avoids unnecessary state updates and maintains proper CVA behavior.libs/zard/tsconfig.json (2)
11-13: No issues found. The path alias configuration@zard/*is correct and consistently used throughout the codebase. Extensive verification across the repository confirms all imports use the@zard/prefix convention.
10-10: No action needed—verbatimModuleSyntax: trueis compatible with the codebase.The codebase already follows proper import patterns: type-only imports use the
typekeyword explicitly (e.g.,import type { ClassValue }), and components use standalone declarations with explicit imports. No namespace imports exist that would conflict with this setting. This is a standard TypeScript 5.0+ compiler option with no build compatibility issues.libs/zard/src/lib/components/core/providezard.ts (2)
1-15: Imports and path aliases are consistent with project conventionsThe import block cleanly pulls in Angular core/common/platform-browser primitives and uses the
@zard/components/...aliases for internal modules, matching the repo’s path-alias guidelines. No changes needed here.As per coding guidelines, the
@zard/*alias usage is correct.
73-81: Initialization guard pattern is solid; all call sites correctly use DI context
checkForProperZardInitialization()implements a good centralized guard: it uses optionalEVENT_MANAGER_PLUGINSinjection and provides a descriptive error message for misconfigured setups.All 13 call sites across the codebase (resizable, popover, select, combobox, command-input, dropdown, dropdown-trigger, sidebar, carousel, calendar-grid, accordion-item, and checkbox components) invoke the function from within component and directive constructors—valid Angular injection contexts where
inject()is safe. No violations detected.
mikij
force-pushed
the
task/#341-event-manager-plugin
branch
from
59cbb15 to
f3c8aa8
Compare
mikij
changed the title
mikij
force-pushed
the
task/#341-event-manager-plugin
branch
2 times, most recently
from
c24b30f to
c3bb505
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (15)
.vscode/settings.jsonis excluded by none and included by noneapps/web/public/installation/manual/accordion.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/calendar.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/carousel.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/checkbox.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/combobox.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/command.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/date-picker.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/dropdown.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/layout.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/popover.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/resizable.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/select.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/slider.mdis excluded by!apps/web/public/**and included byapps/**packages/cli/src/core/registry/registry-data.tsis excluded by!packages/**and included by none
📒 Files selected for processing (16)
apps/web/src/app/app.config.ts(2 hunks)libs/zard/src/index.ts(3 hunks)libs/zard/src/lib/components/accordion/accordion-item.component.ts(3 hunks)libs/zard/src/lib/components/calendar/calendar-grid.component.ts(8 hunks)libs/zard/src/lib/components/carousel/carousel.component.ts(3 hunks)libs/zard/src/lib/components/checkbox/checkbox.component.ts(6 hunks)libs/zard/src/lib/components/combobox/combobox.component.ts(9 hunks)libs/zard/src/lib/components/command/command-input.component.ts(5 hunks)libs/zard/src/lib/components/core/provider/providezard.ts(1 hunks)libs/zard/src/lib/components/dropdown/dropdown-trigger.directive.ts(3 hunks)libs/zard/src/lib/components/dropdown/dropdown.component.ts(8 hunks)libs/zard/src/lib/components/layout/sidebar.component.ts(3 hunks)libs/zard/src/lib/components/popover/popover.component.ts(5 hunks)libs/zard/src/lib/components/resizable/resizable.component.ts(5 hunks)libs/zard/src/lib/components/select/select.component.ts(11 hunks)libs/zard/src/lib/components/slider/slider.component.ts(7 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
libs/zard/src/lib/components/**/*.component.ts
📄 CodeRabbit inference engine (CLAUDE.md)
libs/zard/src/lib/components/**/*.component.ts: Create components as standalone components withstandalone: truein Angular
Use Signal-based inputs with theinput()function instead of @input decorators in Angular components
Use OnPush change detection strategy in Angular components:changeDetection: ChangeDetectionStrategy.OnPush
Use host binding for dynamic classes in components:host: { '[class]': 'classes()' }
UsemergeClasses()utility withclsxandtailwind-mergeto resolve class conflicts in component styling
Use computed properties in Angular components for reactive class calculations:protected readonly classes = computed(() => ...)
libs/zard/src/lib/components/**/*.component.ts: Use signal-based inputs (input()) for Angular component inputs in the ZardUI library
Use OnPush change detection strategy for all Angular components
Use host binding with[class]for dynamic class application in components
Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
UsemergeClassesutility withtailwind-mergeto resolve class conflicts in components
Use Angular standalone components as the base template for component architecture
Files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use
@zard/*path aliases for imports mapping tolibs/zard/src/lib/*directories
Files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
🧠 Learnings (46)
📓 Common learnings
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.081Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-30T08:50:23.081Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.081Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-26T10:13:44.258Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy for all Angular components
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/select/select.component.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Implement CVA (Class Variance Authority) for typed variants in component variant files
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/core/provider/providezard.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
Applied to files:
libs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
Applied to files:
libs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-26T11:20:45.264Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/select/select.component.spec.ts:79-88
Timestamp: 2025-11-26T11:20:45.264Z
Learning: In ZardUI select component tests (libs/zard/src/lib/components/select/select.component.spec.ts), use fakeAsync() with flush() instead of setTimeout because the component uses setTimeout(..., 0) for focus management, which requires advancing macrotasks in tests.
Applied to files:
libs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
libs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to **/*.{ts,tsx,js} : Use `zard/*` path aliases for imports mapping to `libs/zard/src/lib/*` directories
Applied to files:
apps/web/src/app/app.config.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Use path aliases `zard/*` pointing to `libs/zard/src/lib/*` for component imports
Applied to files:
apps/web/src/app/app.config.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
apps/web/src/app/app.config.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Implement standalone Angular components with explicit imports rather than using module declarations
Applied to files:
libs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Follow ARIA guidelines and use semantic HTML when building block components for accessibility compliance
Applied to files:
libs/zard/src/lib/components/accordion/accordion-item.component.ts
📚 Learning: 2025-11-29T15:31:22.348Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.348Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
libs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Always use the `protected` access modifier for component properties and methods that are accessed in templates (e.g., `protected readonly`, `protected onSubmit()`)
Applied to files:
libs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with `[class]` for dynamic class application in components
Applied to files:
libs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
libs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.{component.ts,component.html} : Ensure block components are responsive and work correctly across all viewport sizes: desktop (100% width), tablet (768px), and mobile (375px)
Applied to files:
libs/zard/src/lib/components/resizable/resizable.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
libs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.ts
📚 Learning: 2025-11-30T08:29:35.844Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/combobox/combobox.component.ts:227-229
Timestamp: 2025-11-30T08:29:35.844Z
Learning: In the zard-ui/zardui repository, the "curly" ESLint rule is enforced (configured as 'warn' in libs/zard/eslint.config.mjs). Always use explicit braces around control flow statements (if, else, for, while, etc.) even for single-statement blocks. Do not suggest one-line early returns or removing braces.
Applied to files:
libs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Keep commit messages in present tense, single line format with scope and description (e.g., '✨ feat(popover): add popover component')
Applied to files:
libs/zard/src/lib/components/core/provider/providezard.ts
📚 Learning: 2025-11-19T20:03:29.205Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 320
File: libs/zard/src/lib/components/tooltip/tooltip.ts:82-105
Timestamp: 2025-11-19T20:03:29.205Z
Learning: In the zard-ui/zardui repository, non-null assertion operator (!) is forbidden by ESLint rule "Forbidden non-null assertion". Use type assertions (e.g., `(value as Type)`) instead when narrowing types after null/undefined checks.
Applied to files:
libs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/combobox/combobox.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Co-locate test files with components using `.spec.ts` suffix next to component files
Applied to files:
libs/zard/src/lib/components/calendar/calendar-grid.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Use signals (`signal()` from `angular/core`) for reactive state management in block components, such as loading states and UI state
Applied to files:
libs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-21T16:17:37.255Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 333
File: libs/zard/src/lib/components/core/directives/string-template-outlet/string-template-outlet.directive.ts:43-43
Timestamp: 2025-11-21T16:17:37.255Z
Learning: In the zard-ui/zardui repository, avoid using `any` type at all costs. Use proper generic types and type constraints instead, even for complex scenarios like TemplateRef variance.
Applied to files:
libs/zard/src/lib/components/checkbox/checkbox.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Use Angular's `ReactiveFormsModule` for form handling in block components and implement form validation with `FormControl`, `FormGroup`, and `Validators`
Applied to files:
libs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create component demo files with `name`, `code`, and `component` properties following existing patterns
Applied to files:
libs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
libs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
libs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Applied to files:
libs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/index.ts : Export all block components and metadata in the library's index file (`libs/blocks/src/index.ts`)
Applied to files:
libs/zard/src/index.ts
🧬 Code graph analysis (3)
libs/zard/src/lib/components/popover/popover.component.ts (2)
libs/zard/src/lib/components/dialog/dialog-ref.ts (1)
trigger(74-85)libs/zard/src/lib/components/sheet/sheet-ref.ts (1)
trigger(76-85)
libs/zard/src/lib/components/slider/slider.component.ts (2)
libs/zard/src/lib/shared/utils/utils.ts (1)
mergeClasses(4-6)libs/zard/src/lib/components/slider/slider.variants.ts (1)
sliderThumbVariants(59-69)
libs/zard/src/lib/components/dropdown/dropdown.component.ts (1)
libs/zard/src/lib/components/accordion/accordion-item.component.ts (1)
Component(11-78)
🔇 Additional comments (14)
libs/zard/src/lib/components/carousel/carousel.component.ts (1)
26-26: Initialization guard and keyboard event plugin integration look solid.The constructor-level
checkForProperZardInitialization()ensures proper Zard setup before instantiation, and the keyboard bindings(keydown.arrowleft.prevent)/(keydown.arrowright.prevent)cleanly delegate to the new event manager plugins, eliminating the need for manualpreventDefault()calls inhandleKeyDown.The past review comment already flagged the relative import path at Line 26. As per learnings, this path structure is intentional due to CLI transformation requirements, so no changes are needed unless the CLI logic is updated.
Also applies to: 103-106, 134-136
libs/zard/src/lib/components/dropdown/dropdown-trigger.directive.ts (1)
1-5: Dropdown trigger event handling and initialization guard are well-implemented.The constructor-level initialization check and host binding updates correctly leverage the new event manager plugins:
(click.prevent-with-stop)handles click interactions(keydown.{enter,space}.prevent-with-stop)and(keydown.arrowdown.prevent)provide accessible keyboard support- All methods properly gate on
zTrigger()andzDisabled()statescontentTemplate()is called directly after truthy checks (no redundant optional chaining)Past review feedback on optional chaining and method naming have been addressed in prior commits.
Also applies to: 15-19, 32-34, 45-81
libs/zard/src/lib/components/checkbox/checkbox.component.ts (1)
17-18: Checkbox accessibility, typing, and initialization guard are correctly implemented.The changes align with Angular best practices and PR objectives:
- Generated
idviagenerateId('checkbox')properly wires[id]and[for]for label association[attr.aria-disabled]="disabled()"on the wrapper span enables the event manager plugin's disabled guard for keyboard modifiers- Precise type aliases (
OnTouchedType = () => void,OnChangeType = (value: boolean) => void) eliminateanyusage(keydown.{enter,space}.prevent)="onCheckboxChange()"leverages the new event plugindisabled()guard inonCheckboxChange()prevents state changes when disabled- Constructor-level
checkForProperZardInitialization()ensures proper Zard setupAll past review feedback has been addressed in prior commits.
Also applies to: 21-22, 33-35, 41-41, 56-56, 93-97, 117-119
libs/zard/src/lib/components/core/provider/providezard.ts (1)
16-81: Core provider implementation is well-structured and follows Angular best practices.The
provideZard()function cleanly bundles:
- Event manager plugins (
ZardEventManagerPlugin,ZardDebounceEventManagerPlugin) viaEVENT_MANAGER_PLUGINSwithmulti: true- Theme initialization via
provideAppInitializer()that manipulates a<style data-zard-theme>tag based on preset configuration- Preset helper functions (
withGrayPreset(), etc.) for easy theme switchingKey strengths:
checkForProperZardInitialization()uses optional injection (inject(EVENT_MANAGER_PLUGINS, { optional: true }) ?? []) to provide a descriptive error when plugins are missing, avoiding Angular's genericNullInjectorError- Usage comments at lines 18-25 clearly explain when
styles.cssis required- Import paths intentionally use
../core/event-manager-plugins/...pattern for CLI transformation compatibility (per learnings)Past review feedback on usage comment wording and optional injection has been addressed.
libs/zard/src/lib/components/layout/sidebar.component.ts (1)
23-23: Sidebar initialization guard and keyboard binding updates are correct.The changes align with the PR-wide refactoring:
- Constructor-level
checkForProperZardInitialization()ensures proper Zard setup (throwing an error ifprovideZard()is missing from app config)- Consolidated keyboard binding
(keydown.{enter,space}.prevent)="toggleCollapsed()"leverages the new event manager plugin, replacing separatekeydown.enterandkeydown.spacehandlersAs per learnings, the ZardUI CLI will automatically add
provideZard()to app configuration and install the core component before the next CLI release, mitigating the breaking change impact for new projects.Also applies to: 41-41, 73-75
apps/web/src/app/app.config.ts (1)
6-6: App configuration correctly wires Zard initialization.The addition of
provideZard()to the root providers array registers:
- Event manager plugins (
ZardEventManagerPlugin,ZardDebounceEventManagerPlugin) required by components using the new keyboard binding syntax- Theme initialization logic (no preset specified, so defaults to
styles.cssonly)The import uses the correct
@zard/components/core/provider/providezardpath alias, aligning with project conventions.Also applies to: 23-23
libs/zard/src/lib/components/popover/popover.component.ts (1)
28-28: Popover initialization guard and event handling updates are correct.The changes align with the PR-wide refactoring:
- Constructor-level
checkForProperZardInitialization()ensures proper Zard setuphide()method now uses explicit braces around the early return (consistent with the "curly" ESLint rule enforced in this repository)- Event listener setup at lines 210-215 uses
renderer.listenwith'click.stop'and hover eventsThe past review concern about
'click.stop'not applying.stopPropagation()forMouseEventinstances was addressed in commit d3d95a2.Also applies to: 100-101, 154-157, 210-215, 368-370
libs/zard/src/lib/components/resizable/resizable.component.ts (1)
24-24: Resizable component initialization guard and refactoring look good.The changes improve code consistency and align with the PR-wide patterns:
- Constructor-level
checkForProperZardInitialization()ensures proper Zard setup- Early returns at lines 102-104, 177-179, and 270-272 now use explicit braces (consistent with the "curly" ESLint rule)
getEventPosition()refactoring (lines 241-256) cleanly handles bothMouseEventandTouchEvent, using destructuring for touch coordinates after a null check (no redundant optional chaining)getContainerSize()(lines 261-262) uses destructuring for cleaner code- Updated TODO comment at line 265 provides more specific guidance for future refactoring
Past review feedback on redundant optional chaining and TODO specificity has been addressed in commit d3d95a2.
Also applies to: 68-70, 102-104, 177-179, 241-256, 261-262, 265-265, 270-272
libs/zard/src/lib/components/calendar/calendar-grid.component.ts (1)
17-18: Calendar grid initialization + keyboard handling look solid and consistent with the new event-manager pattern.
checkForProperZardInitialization()in the constructor and the grouped keydown host binding integrate this component cleanly withprovideZardand the plugins.- Guards in
onDayClick,getFocusedDayIndex,onKeyDown, andfindEnabledInRangecover disabled state, empty calendars, and focus movement across rows/month boundaries without obvious edge-case holes.Also applies to: 56-60, 85-107, 119-140, 158-229, 259-292
libs/zard/src/lib/components/dropdown/dropdown.component.ts (1)
26-27: Dropdown’s initialization, overlay guards, and keyboard navigation align well with the new core patterns.
- The ctor guard, trigger/content keydown bindings with
.prevent, and[attr.data-state]host binding consistently integrate withprovideZardand the event-manager plugins.- Defensive checks around
disabled(),overlayRefexistence/attachment, and empty item lists intoggle,open,createOverlay,getDropdownItems, and navigation helpers make the dropdown’s open/close and keyboard UX resilient.Also applies to: 33-36, 39-45, 53-56, 81-84, 101-127, 129-138, 140-162, 173-177, 220-228, 230-246
libs/zard/src/lib/components/command/command-input.component.ts (1)
14-15: Command input now follows a clean CVA pattern and uses the debounce/event plugins correctly.
- Removing
ngModelin favor ofsearchTerm+[value]and(input.debounce.150)plus the ctor guard integrates neatly with the debounce/event manager plugins.updateParentComponentsnow notifies the parent command, CVAonChange, andvalueChange, whilewriteValueonly updates internal state and the parent command—this matches the ControlValueAccessor contract.- Disabled state and touched state are correctly wired via
setDisabledState→disabledsignal and(blur)="onTouched()".Also applies to: 21-22, 24-39, 62-83, 85-103, 122-128, 130-140
libs/zard/src/lib/components/combobox/combobox.component.ts (1)
1-16: Combobox keyboard, focus, and initialization wiring look correct and consistent with the new core/event-manager setup.
- The ctor guard, host keydown bindings (split Tab vs
.preventfor navigation keys), and document Escape handler integrate cleanly withprovideZardand the event-manager plugins.setOpen’s use ofrunInInjectionContext+afterNextRenderto refresh command options and focus either the search input or command component is a solid pattern.handleSelect,onKeyDownEscape, andonKeyDowncover toggle, clear-on-escape, arrow/Home/End/PageUp/PageDown navigation, and the searchable type-ahead path without obvious edge-case gaps.Also applies to: 30-31, 170-176, 180-223, 246-276, 279-307, 316-381, 383-395
libs/zard/src/lib/components/accordion/accordion-item.component.ts (1)
1-9: Accordion item ARIA wiring, optional parent, and initialization guard are all in good shape.
[attr.aria-controls]/[attr.aria-labelledby]with matching[id]plusrole="region"and data‑state attributes form a correct accessible relationship between header and panel.- Optional
inject(ZardAccordionComponent, { optional: true })paired with theif (this.accordion) ... else ...toggle keeps the item usable both inside and outside an accordion container.- The ctor call to
checkForProperZardInitialization()matches the new initialization pattern for components relying on the event-manager plugins.Also applies to: 15-38, 48-51, 55-76
libs/zard/src/index.ts (1)
1-13: Index barrel cleanly exposes core wiring and component surface, including the new dialog/alert dialog types.
- Grouping core exports (config, styles, event-manager plugins,
providezard) separately from UI components makes the public API easier to discover.- The explicit re-exports for dialog and alert dialog, including aliased
OnClickCallbacktypes, provide a clear and strongly-typed surface for consumers without overexposing internals.Also applies to: 14-59, 60-69, 80-86
mikij
force-pushed
the
task/#341-event-manager-plugin
branch
2 times, most recently
from
91e2762 to
21a0fee
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
libs/zard/src/lib/components/checkbox/checkbox.component.ts (1)
82-85: Optional: Remove eslint-disable comments since types are now precise.With the tightened
OnTouchedTypeandOnChangeTypedefinitions, the empty function initializers should satisfy the linter without suppression:- /* eslint-disable-next-line @typescript-eslint/no-empty-function */ private onChange: OnChangeType = () => {}; - /* eslint-disable-next-line @typescript-eslint/no-empty-function */ private onTouched: OnTouchedType = () => {};The
@typescript-eslint/no-empty-functionrule typically allows empty arrow functions for callbacks. If it still triggers, consider usingFunction.prototypeas a no-op or configuring the rule.
♻️ Duplicate comments (5)
libs/zard/src/lib/components/slider/slider.component.ts (2)
326-365: Add aKeyboardEventruntime guard instead of casting fromEvent.
handleKeydownis typed asEvent(to match the key‑modifier binding), but it still casts toKeyboardEvent. For stricter typing and safer interaction with the event-manager plugins, add a runtime guard and drop the cast:handleKeydown(event: Event): void { if (this.disabled()) { return; } + if (!(event instanceof KeyboardEvent)) { + return; + } @@ - const { key } = event as KeyboardEvent; + const { key } = event;The rest of the logic—Home/End handling, Arrow key step changes, and the
newValue !== currentValuecheck before emitting—looks solid and aligned with CVA patterns and signal-based state.[Suggest_essential_refactor]
In Angular 20 with custom event-manager plugins adding `.prevent` key modifiers, is an `instanceof KeyboardEvent` runtime check on a `keydown` handler still valid for events bound as `(keydown.{home,end,arrowleft,arrowright,arrowdown,arrowup}.prevent)`?
174-175: Grouped keydown binding and pointerDown filter look good; drop redundant disabled guard in subscribe.
- The consolidated
(keydown.{home,end,arrowleft,arrowright,arrowdown,arrowup}.prevent)binding is consistent with the new event-manager plugin setup and keeps keyboard handling centralized inhandleKeydown.- Adding
filter(() => !this.disabled())topointerDown$is the right way to prevent starting drag streams while disabled.- With that upstream filter in place, the
if (this.disabled()) { return; }inside thesubscribeat Lines 283‑285 is now redundant and can be removed to keep the RxJS pipeline minimal (this was already noted in an earlier review on this file).Apply this diff to simplify the subscription:
.subscribe(percentage => { - if (this.disabled()) { - return; - } this.updateSliderFromPercentage(percentage); this.onTouched(); });Also applies to: 246-285
libs/zard/src/lib/components/select/select.component.ts (1)
86-87: Missingspacein dropdown keydown binding will cause page scroll.The handler at line 215 handles
case ' ':for selection, butspaceis missing from the.preventkey list. Without it, pressing Space to select an item will also scroll the page.- (keydown.{arrowdown,arrowup,enter,escape,home,end}.prevent)="onDropdownKeydown($event)" + (keydown.{arrowdown,arrowup,enter,space,escape,home,end}.prevent)="onDropdownKeydown($event)"libs/zard/src/lib/components/core/provider/providezard.ts (1)
29-40: Document single-use expectation forprovideZard().Since both plugins use
multi: true, callingprovideZard()multiple times will stack duplicate plugin instances. Consider adding an inline comment or updating docs to clarify thatprovideZard()should be called exactly once at the application root.+ // Note: provideZard() should be called once at the application root. + // Calling it multiple times will register duplicate event manager plugins. const eventManagerPlugins = [ { provide: EVENT_MANAGER_PLUGINS, useClass: ZardEventManagerPlugin, multi: true, },libs/zard/src/lib/components/dropdown/dropdown.component.ts (1)
101-127: Event handler type casting mirrors other components.This follows the same pattern as calendar-grid and other components in the PR. The
Event→KeyboardEventcast is functional since the event manager plugin guarantees only keyboard events reach this handler.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (16)
.vscode/settings.jsonis excluded by none and included by noneapps/web/public/installation/manual/accordion.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/calendar.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/carousel.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/checkbox.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/combobox.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/command.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/date-picker.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/dropdown.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/layout.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/popover.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/resizable.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/select.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/slider.mdis excluded by!apps/web/public/**and included byapps/**packages/cli/src/commands/init/update-angular-config.tsis excluded by!packages/**and included by nonepackages/cli/src/core/registry/registry-data.tsis excluded by!packages/**and included by none
📒 Files selected for processing (25)
apps/web/src/app/app.config.ts(2 hunks)libs/zard/src/index.ts(3 hunks)libs/zard/src/lib/components/accordion/accordion-item.component.ts(3 hunks)libs/zard/src/lib/components/calendar/calendar-grid.component.ts(8 hunks)libs/zard/src/lib/components/carousel/carousel.component.ts(3 hunks)libs/zard/src/lib/components/checkbox/checkbox.component.ts(6 hunks)libs/zard/src/lib/components/combobox/combobox.component.ts(9 hunks)libs/zard/src/lib/components/command/command-input.component.ts(5 hunks)libs/zard/src/lib/components/core/provider/config/config.types.ts(1 hunks)libs/zard/src/lib/components/core/provider/config/styles/gray.ts(1 hunks)libs/zard/src/lib/components/core/provider/config/styles/neutral.ts(1 hunks)libs/zard/src/lib/components/core/provider/config/styles/slate.ts(1 hunks)libs/zard/src/lib/components/core/provider/config/styles/stone.ts(1 hunks)libs/zard/src/lib/components/core/provider/config/styles/zinc.ts(1 hunks)libs/zard/src/lib/components/core/provider/config/update-preset.ts(1 hunks)libs/zard/src/lib/components/core/provider/event-manager-plugins/zard-debounce-event-manager-plugin.ts(1 hunks)libs/zard/src/lib/components/core/provider/event-manager-plugins/zard-event-manager-plugin.ts(1 hunks)libs/zard/src/lib/components/core/provider/providezard.ts(1 hunks)libs/zard/src/lib/components/dropdown/dropdown-trigger.directive.ts(3 hunks)libs/zard/src/lib/components/dropdown/dropdown.component.ts(8 hunks)libs/zard/src/lib/components/layout/sidebar.component.ts(3 hunks)libs/zard/src/lib/components/popover/popover.component.ts(5 hunks)libs/zard/src/lib/components/resizable/resizable.component.ts(5 hunks)libs/zard/src/lib/components/select/select.component.ts(11 hunks)libs/zard/src/lib/components/slider/slider.component.ts(7 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
libs/zard/src/lib/components/**/*.component.ts
📄 CodeRabbit inference engine (CLAUDE.md)
libs/zard/src/lib/components/**/*.component.ts: Create components as standalone components withstandalone: truein Angular
Use Signal-based inputs with theinput()function instead of @input decorators in Angular components
Use OnPush change detection strategy in Angular components:changeDetection: ChangeDetectionStrategy.OnPush
Use host binding for dynamic classes in components:host: { '[class]': 'classes()' }
UsemergeClasses()utility withclsxandtailwind-mergeto resolve class conflicts in component styling
Use computed properties in Angular components for reactive class calculations:protected readonly classes = computed(() => ...)
libs/zard/src/lib/components/**/*.component.ts: Use signal-based inputs (input()) for Angular component inputs in the ZardUI library
Use OnPush change detection strategy for all Angular components
Use host binding with[class]for dynamic class application in components
Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
UsemergeClassesutility withtailwind-mergeto resolve class conflicts in components
Use Angular standalone components as the base template for component architecture
Files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.ts
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/core/provider/config/styles/stone.tslibs/zard/src/lib/components/core/provider/config/styles/gray.tslibs/zard/src/lib/components/core/provider/config/styles/slate.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-debounce-event-manager-plugin.tslibs/zard/src/lib/components/core/provider/config/config.types.tslibs/zard/src/lib/components/core/provider/config/styles/zinc.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-event-manager-plugin.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/core/provider/config/styles/neutral.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/core/provider/config/update-preset.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use
@zard/*path aliases for imports mapping tolibs/zard/src/lib/*directories
Files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/core/provider/config/styles/stone.tslibs/zard/src/lib/components/core/provider/config/styles/gray.tslibs/zard/src/lib/components/core/provider/config/styles/slate.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-debounce-event-manager-plugin.tslibs/zard/src/lib/components/core/provider/config/config.types.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/core/provider/config/styles/zinc.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-event-manager-plugin.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/core/provider/config/styles/neutral.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/core/provider/config/update-preset.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.ts
🧠 Learnings (48)
📓 Common learnings
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.081Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy for all Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-debounce-event-manager-plugin.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-event-manager-plugin.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/config/config.types.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/core/provider/config/styles/zinc.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/core/provider/config/styles/stone.tslibs/zard/src/lib/components/core/provider/config/styles/gray.tslibs/zard/src/lib/components/core/provider/config/styles/slate.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-debounce-event-manager-plugin.tslibs/zard/src/lib/components/core/provider/config/config.types.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/core/provider/config/styles/zinc.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-event-manager-plugin.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/core/provider/config/update-preset.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-debounce-event-manager-plugin.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-event-manager-plugin.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-debounce-event-manager-plugin.tslibs/zard/src/lib/components/core/provider/config/config.types.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/core/provider/config/styles/zinc.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-event-manager-plugin.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-30T08:50:23.081Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.081Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-debounce-event-manager-plugin.tslibs/zard/src/lib/components/core/provider/config/config.types.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/core/provider/config/styles/zinc.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-event-manager-plugin.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/core/provider/config/update-preset.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-debounce-event-manager-plugin.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-event-manager-plugin.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-26T10:13:44.258Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-debounce-event-manager-plugin.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-event-manager-plugin.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-event-manager-plugin.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy for all Angular components
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/core/provider/config/styles/stone.tslibs/zard/src/lib/components/core/provider/config/styles/gray.tslibs/zard/src/lib/components/core/provider/config/styles/slate.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/config/config.types.tslibs/zard/src/lib/components/core/provider/config/styles/zinc.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/core/provider/config/styles/neutral.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/carousel/carousel.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/core/provider/config/styles/gray.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/config/config.types.tslibs/zard/src/lib/components/core/provider/config/styles/zinc.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/core/provider/config/styles/neutral.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/carousel/carousel.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/core/provider/config/styles/gray.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/config/config.types.tslibs/zard/src/lib/components/core/provider/config/styles/zinc.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/core/provider/config/styles/neutral.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/carousel/carousel.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Implement CVA (Class Variance Authority) for typed variants in component variant files
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/config/config.types.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/select/select.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/core/provider/config/styles/stone.tslibs/zard/src/lib/components/core/provider/config/styles/gray.tslibs/zard/src/lib/components/core/provider/config/styles/slate.tslibs/zard/src/lib/components/core/provider/config/config.types.tslibs/zard/src/lib/components/core/provider/config/styles/zinc.tslibs/zard/src/lib/components/core/provider/config/styles/neutral.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/core/provider/config/update-preset.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/layout/sidebar.component.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/core/provider/event-manager-plugins/zard-event-manager-plugin.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
libs/zard/src/lib/components/popover/popover.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-25T18:55:04.698Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-11-25T18:55:04.698Z
Learning: Applies to packages/cli/src/styles.css : Define design tokens in src/styles.css using theme directive with TailwindCSS v4 syntax
Applied to files:
libs/zard/src/lib/components/core/provider/config/styles/stone.tslibs/zard/src/lib/components/core/provider/config/styles/gray.tslibs/zard/src/lib/components/core/provider/config/styles/slate.tslibs/zard/src/lib/components/core/provider/config/config.types.tslibs/zard/src/lib/components/core/provider/config/styles/neutral.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
Applied to files:
libs/zard/src/lib/components/core/provider/config/styles/stone.tslibs/zard/src/lib/components/core/provider/config/styles/gray.tslibs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/core/provider/config/config.types.tslibs/zard/src/lib/components/core/provider/config/styles/zinc.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/core/provider/config/styles/neutral.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create component demo files with `name`, `code`, and `component` properties following existing patterns
Applied to files:
libs/zard/src/lib/components/core/provider/config/styles/gray.tslibs/zard/src/lib/components/core/provider/config/config.types.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:55:04.698Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-11-25T18:55:04.698Z
Learning: Components should support dark mode through built-in styling and configuration
Applied to files:
libs/zard/src/lib/components/core/provider/config/styles/gray.tslibs/zard/src/lib/components/core/provider/config/styles/slate.tslibs/zard/src/lib/components/core/provider/config/styles/neutral.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
Applied to files:
libs/zard/src/lib/components/layout/sidebar.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to **/*.{ts,tsx,js} : Use `zard/*` path aliases for imports mapping to `libs/zard/src/lib/*` directories
Applied to files:
libs/zard/src/lib/components/core/provider/config/config.types.tsapps/web/src/app/app.config.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-21T16:17:37.255Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 333
File: libs/zard/src/lib/components/core/directives/string-template-outlet/string-template-outlet.directive.ts:43-43
Timestamp: 2025-11-21T16:17:37.255Z
Learning: In the zard-ui/zardui repository, avoid using `any` type at all costs. Use proper generic types and type constraints instead, even for complex scenarios like TemplateRef variance.
Applied to files:
libs/zard/src/lib/components/core/provider/config/config.types.tslibs/zard/src/lib/components/checkbox/checkbox.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Use path aliases `zard/*` pointing to `libs/zard/src/lib/*` for component imports
Applied to files:
apps/web/src/app/app.config.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/carousel/carousel.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
apps/web/src/app/app.config.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/core/provider/providezard.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
libs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Implement standalone Angular components with explicit imports rather than using module declarations
Applied to files:
libs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/resizable/resizable.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
libs/zard/src/lib/components/slider/slider.component.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Use Angular's `ReactiveFormsModule` for form handling in block components and implement form validation with `FormControl`, `FormGroup`, and `Validators`
Applied to files:
libs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.{component.ts,component.html} : Ensure block components are responsive and work correctly across all viewport sizes: desktop (100% width), tablet (768px), and mobile (375px)
Applied to files:
libs/zard/src/lib/components/resizable/resizable.component.ts
📚 Learning: 2025-11-26T11:20:45.264Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/select/select.component.spec.ts:79-88
Timestamp: 2025-11-26T11:20:45.264Z
Learning: In ZardUI select component tests (libs/zard/src/lib/components/select/select.component.spec.ts), use fakeAsync() with flush() instead of setTimeout because the component uses setTimeout(..., 0) for focus management, which requires advancing macrotasks in tests.
Applied to files:
libs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/select/select.component.tslibs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-29T15:31:22.348Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.348Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
libs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/core/provider/providezard.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.ts
📚 Learning: 2025-11-30T08:29:35.844Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/combobox/combobox.component.ts:227-229
Timestamp: 2025-11-30T08:29:35.844Z
Learning: In the zard-ui/zardui repository, the "curly" ESLint rule is enforced (configured as 'warn' in libs/zard/eslint.config.mjs). Always use explicit braces around control flow statements (if, else, for, while, etc.) even for single-statement blocks. Do not suggest one-line early returns or removing braces.
Applied to files:
libs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/core/provider/providezard.ts
📚 Learning: 2025-11-19T20:03:29.205Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 320
File: libs/zard/src/lib/components/tooltip/tooltip.ts:82-105
Timestamp: 2025-11-19T20:03:29.205Z
Learning: In the zard-ui/zardui repository, non-null assertion operator (!) is forbidden by ESLint rule "Forbidden non-null assertion". Use type assertions (e.g., `(value as Type)`) instead when narrowing types after null/undefined checks.
Applied to files:
libs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/core/provider/providezard.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Use signals (`signal()` from `angular/core`) for reactive state management in block components, such as loading states and UI state
Applied to files:
libs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
libs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with `[class]` for dynamic class application in components
Applied to files:
libs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/dropdown/dropdown-trigger.directive.tslibs/zard/src/lib/components/calendar/calendar-grid.component.tslibs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/carousel/carousel.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Co-locate test files with components using `.spec.ts` suffix next to component files
Applied to files:
libs/zard/src/lib/components/calendar/calendar-grid.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
libs/zard/src/lib/components/dropdown/dropdown.component.tslibs/zard/src/lib/components/carousel/carousel.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Always use the `protected` access modifier for component properties and methods that are accessed in templates (e.g., `protected readonly`, `protected onSubmit()`)
Applied to files:
libs/zard/src/lib/components/checkbox/checkbox.component.tslibs/zard/src/lib/components/accordion/accordion-item.component.tslibs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Keep commit messages in present tense, single line format with scope and description (e.g., '✨ feat(popover): add popover component')
Applied to files:
libs/zard/src/lib/components/core/provider/providezard.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Follow ARIA guidelines and use semantic HTML when building block components for accessibility compliance
Applied to files:
libs/zard/src/lib/components/accordion/accordion-item.component.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
libs/zard/src/lib/components/command/command-input.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Applied to files:
libs/zard/src/index.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/index.ts : Export all block components and metadata in the library's index file (`libs/blocks/src/index.ts`)
Applied to files:
libs/zard/src/index.ts
🧬 Code graph analysis (5)
libs/zard/src/lib/components/popover/popover.component.ts (2)
libs/zard/src/lib/components/dialog/dialog-ref.ts (1)
trigger(74-85)libs/zard/src/lib/components/sheet/sheet-ref.ts (1)
trigger(76-85)
libs/zard/src/lib/components/slider/slider.component.ts (2)
libs/zard/src/lib/shared/utils/utils.ts (1)
mergeClasses(4-6)libs/zard/src/lib/components/slider/slider.variants.ts (1)
sliderThumbVariants(59-69)
libs/zard/src/lib/components/dropdown/dropdown.component.ts (3)
libs/zard/src/lib/components/accordion/accordion-item.component.ts (1)
Component(11-78)libs/zard/src/lib/components/calendar/calendar-grid.component.ts (1)
Component(19-301)libs/zard/src/lib/components/checkbox/checkbox.component.ts (1)
Component(24-125)
libs/zard/src/lib/components/checkbox/checkbox.component.ts (1)
libs/zard/src/lib/shared/utils/utils.ts (1)
generateId(12-15)
libs/zard/src/lib/components/command/command-input.component.ts (2)
libs/zard/src/lib/shared/utils/utils.ts (1)
mergeClasses(4-6)libs/zard/src/lib/components/command/command.variants.ts (1)
commandInputVariants(20-26)
...src/lib/components/core/provider/event-manager-plugins/zard-debounce-event-manager-plugin.ts
Outdated
Show resolved
Hide resolved
mikij
force-pushed
the
task/#341-event-manager-plugin
branch
2 times, most recently
from
bad6ca8 to
5d357d6
Compare
mikij
force-pushed
the
task/#341-event-manager-plugin
branch
from
5d357d6 to
8c64aa1
Compare
srizzon
approved these changes
Dec 3, 2025
Contributor
srizzon
left a comment
srizzon
left a comment
There was a problem hiding this comment.
Great work, made some tests and it seems that everything is good. I liked the new provider. Thanks man!
mikij
added a commit
that referenced
this pull request
Dec 3, 2025
This was referenced Dec 9, 2025
Merged
8 tasks
8 tasks
8 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What was done? 📝
I have created Angular event manager plugins for preventDefault and similar event actions and use them to avoid boilerplate code with repetitive event.preventDefault calls in the code. This makes code cleaner and readable. In this PR I introduced provideZard() that needs to be add to app config to properly register these plugins. Also I extended this function to support change of base theme for Zard. It means user can use provideZard(withZincPreset()) to switch Zard to this theme preset and to ignore the one defined in styles.css. For now I don't have solution to avoid styles.css and definition of everything is still necessary from styles.css. But at least once we set styles we can change presets without need to copy/paste into styles.css anymore. The CLI registry is updated so all components that needs event manager plugins depend on core component. From other things I did in this PR there are different code cleanup, some Eslint rules added, some bug fixes like keyboard issue on select component and more.
Screenshots or GIFs 📸
|-----Figma-----|
|-----Implementation-----|
Link to Issue 🔗
#341
Type of change 🏗
Breaking change 🚨
provideZard() will be needed so we need to decide should we update documentation to address that or make this change part of CLI init so we automatically add this to config file and install core component during init procedure.
Checklist 🧐
Summary by CodeRabbit
New Features
Improvements
Chores
✏️ Tip: You can customize this high-level summary in your review settings.