refactor: Fixed output event names for components#347
refactor: Fixed output event names for components#347srizzon merged 5 commits intozard-ui:masterfrom
Conversation
|
Note
|
| Cohort / File(s) | Summary |
|---|---|
Command Component libs/zard/src/lib/components/command/command.component.ts, libs/zard/src/lib/components/command/command.component.spec.ts, libs/zard/src/lib/components/command/demo/default.ts, libs/zard/src/lib/components/command/doc/api.md |
Renamed outputs zOnSelect → zCommandSelected, zOnChange → zCommandChange; replaced EventEmitter/@output with output(...); updated emits, tests, demo bindings, and docs. |
Combobox Component libs/zard/src/lib/components/combobox/combobox.component.ts, libs/zard/src/lib/components/combobox/demo/default.ts, libs/zard/src/lib/components/combobox/demo/grouped.ts, libs/zard/src/lib/components/combobox/doc/api.md |
Renamed zOnSelect → zComboSelected; switched outputs to output(...); updated template bindings, emits, demos, and docs; host listeners migrated to host metadata. |
App usage / Doc command apps/web/src/app/domain/components/doc-command/doc-command.component.ts |
Updated template binding (zOnSelect) → (zCommandSelected) and minor template formatting. |
Command Input libs/zard/src/lib/components/command/command-input.component.ts |
Replaced @Output() valueChange = EventEmitter<string> with readonly valueChange = output<string>() and adjusted imports. |
Toggle Component libs/zard/src/lib/components/toggle/toggle.component.ts, libs/zard/src/lib/components/toggle/doc/api.md |
Renamed onClick→zToggleClick, onHover→zToggleHover, onChange→zToggleChange; switched to output(...); moved HostListener -> host metadata for hover. |
Slider Component libs/zard/src/lib/components/slider/slider.component.ts, libs/zard/src/lib/components/slider/doc/api.md |
Renamed onSlide → zSlideIndexChange; switched to output(...); updated all emit sites and docs. |
Tabs Component libs/zard/src/lib/components/tabs/tabs.component.ts, libs/zard/src/lib/components/tabs/doc/api.md |
Renamed zOnTabChange → zTabChange; switched to output(...); updated emit and docs. |
Resizable Component libs/zard/src/lib/components/resizable/resizable.component.ts, libs/zard/src/lib/components/resizable/doc/api.md |
Replaced three EventEmitter outputs with output(...) variants (zResizeStart, zResize, zResizeEnd); minor template formatting change; docs updated. |
Radio Styling libs/zard/src/lib/components/radio/radio.component.ts |
Minor presentational CSS change: left-[4px] → left-1. |
ESLint Configuration libs/zard/eslint.config.mjs |
Escalated @angular-eslint/no-output-on-prefix from 'warn' to 'error'. |
Demos / Templates libs/zard/src/lib/components/*/demo/*.ts, apps/web/.../doc-command.component.ts |
Updated demo/template bindings across components to new event names. |
Sequence Diagram(s)
sequenceDiagram
participant Parent
participant Component
participant Output
rect rgb(240,246,255)
Note over Parent,Component: Old flow (EventEmitter outputs)
Parent->>Component: listen (zOnSelect / onSlide / onClick / onChange)
Component->>Output: .emit(...) via EventEmitter
Output-->>Parent: callback invoked
end
rect rgb(237,255,240)
Note over Parent,Component: New flow (signal-style outputs)
Parent->>Component: listen (zCommandSelected / zComboSelected / zSlideIndexChange / zToggleClick / zTabChange)
Component->>Output: .emit(...) via output(...)
Output-->>Parent: signal delivered
end
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~25 minutes
- Areas to focus:
- Verify all template bindings (apps, demos, docs, tests) were updated to the new event names.
- Confirm all EventEmitter ->
output(...)conversions include correct imports and preserve typing/emit behavior. - Check host listener migrations (
@HostListener-> host metadata) for correctness and event scoping. - Review ESLint strictness impact and fix violations introduced by the rule escalation.
Possibly related PRs
- Eslint config update #315 — Modifies the same
libs/zard/eslint.config.mjs; likely related due to enforcement changes to@angular-eslint/no-output-on-prefix.
Suggested reviewers
- Luizgomess
- ribeiromatheuss
- srizzon
Poem
✨ Events shed their old, familiar dress,
Newz*names hum, tidy and express,
Demos, docs, and tests now sing in tune,
ESLint keeps watch beneath the moon,
Small renames — a cleaner codebase bless. 🛠️
Pre-merge checks and finishing touches
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description check | ✅ Passed | The description covers the main change and includes required sections: objectives, type of change (Refactor), and testing checklist. However, 'Screenshots or GIFs' and 'Breaking change' sections are missing, and the description lacks detail about the migration to signal-based outputs. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
| Title check | ✅ Passed | The title accurately reflects the main change: systematic renaming of output event names across multiple components to improve naming consistency and follow Angular conventions. |
✨ Finishing touches
- 📝 Generate docstrings
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
Tip
📝 Customizable high-level summaries are now available in beta!
You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
- Provide your own instructions using the
high_level_summary_instructionssetting. - Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
- Use
high_level_summary_in_walkthroughto move the summary from the description to the walkthrough section.
Example instruction:
"Divide the high-level summary into five sections:
- 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
- 📓 References — List relevant issues, discussions, documentation, or related PRs.
- 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
- 📊 Contributor Summary — Include a Markdown table showing contributions:
| Contributor | Lines Added | Lines Removed | Files Changed |- ✔️ Additional Notes — Add any extra reviewer context.
Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.
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.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
libs/zard/src/lib/components/command/demo/default.ts (1)
74-108: Refactor@HostListenerto use thehostproperty.Move the keyboard event listener from the decorator to the component's
hostmetadata for consistency with the codebase pattern.Based on learnings, components in this codebase should use the
hostproperty instead of@HostListenerdecorators.Apply this diff:
@Component({ selector: 'z-demo-command-default', imports: [ZardCommandModule], standalone: true, + host: { + '(window:keydown)': 'handleKeydown($event)', + }, template: `Then remove the decorator:
- @HostListener('window:keydown', ['$event']) handleKeydown(event: KeyboardEvent) {libs/zard/src/lib/components/combobox/combobox.component.ts (2)
297-377: Refactor@HostListenerto use thehostproperty.Move the keydown event listener from the decorator to the component's
hostmetadata for consistency with Angular best practices in this codebase.Based on learnings, components should use the
hostproperty instead of@HostListenerdecorators.Apply this diff:
host: { '[class]': 'classes()', + '(keydown)': 'onKeyDown($event)', },Then remove the decorator:
- @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
379-391: Refactor@HostListenerto use thehostproperty.Move the document-level keydown listener to the component's
hostmetadata.Based on learnings, event listeners should be in the
hostproperty.Apply this diff:
host: { '[class]': 'classes()', + '(document:keydown)': 'onDocumentKeyDown($event)', },Then remove the decorator:
- @HostListener('document:keydown', ['$event']) onDocumentKeyDown(event: KeyboardEvent) {
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (14)
apps/web/public/components/combobox/demo/default.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/combobox/demo/grouped.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/combobox/doc/api.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/command/demo/default.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/command/doc/api.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/slider/doc/api.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/tabs/doc/api.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/toggle/doc/api.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/radio.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/slider.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/tabs.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/toggle.mdis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (17)
apps/web/src/app/domain/components/doc-command/doc-command.component.ts(1 hunks)libs/zard/eslint.config.mjs(1 hunks)libs/zard/src/lib/components/combobox/combobox.component.ts(3 hunks)libs/zard/src/lib/components/combobox/demo/default.ts(1 hunks)libs/zard/src/lib/components/combobox/demo/grouped.ts(1 hunks)libs/zard/src/lib/components/combobox/doc/api.md(1 hunks)libs/zard/src/lib/components/command/command.component.spec.ts(3 hunks)libs/zard/src/lib/components/command/command.component.ts(2 hunks)libs/zard/src/lib/components/command/demo/default.ts(1 hunks)libs/zard/src/lib/components/command/doc/api.md(1 hunks)libs/zard/src/lib/components/radio/radio.component.ts(1 hunks)libs/zard/src/lib/components/slider/doc/api.md(1 hunks)libs/zard/src/lib/components/slider/slider.component.ts(3 hunks)libs/zard/src/lib/components/tabs/doc/api.md(1 hunks)libs/zard/src/lib/components/tabs/tabs.component.ts(2 hunks)libs/zard/src/lib/components/toggle/doc/api.md(1 hunks)libs/zard/src/lib/components/toggle/toggle.component.ts(3 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
libs/zard/src/lib/components/**/doc/**/*.md
📄 CodeRabbit inference engine (CLAUDE.md)
Write component documentation in
doc/overview.mdanddoc/api.mdfiles
Files:
libs/zard/src/lib/components/command/doc/api.mdlibs/zard/src/lib/components/tabs/doc/api.mdlibs/zard/src/lib/components/slider/doc/api.mdlibs/zard/src/lib/components/combobox/doc/api.mdlibs/zard/src/lib/components/toggle/doc/api.md
libs/zard/src/lib/components/*/doc/{overview,api}.md
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Write documentation in
overview.mdfor use cases and basic examples, andapi.mdfor complete API reference
Files:
libs/zard/src/lib/components/command/doc/api.mdlibs/zard/src/lib/components/tabs/doc/api.mdlibs/zard/src/lib/components/slider/doc/api.mdlibs/zard/src/lib/components/combobox/doc/api.mdlibs/zard/src/lib/components/toggle/doc/api.md
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.tslibs/zard/src/lib/components/combobox/demo/default.tslibs/zard/src/lib/components/combobox/demo/grouped.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/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.tslibs/zard/src/lib/components/combobox/demo/default.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/toggle/toggle.component.tslibs/zard/src/lib/components/combobox/demo/grouped.tslibs/zard/src/lib/components/radio/radio.component.tslibs/zard/src/lib/components/tabs/tabs.component.tslibs/zard/src/lib/components/slider/slider.component.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.tslibs/zard/src/lib/components/combobox/demo/default.tslibs/zard/src/lib/components/combobox/demo/grouped.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/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.tslibs/zard/src/lib/components/combobox/demo/default.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/toggle/toggle.component.tslibs/zard/src/lib/components/combobox/demo/grouped.tslibs/zard/src/lib/components/radio/radio.component.tslibs/zard/src/lib/components/tabs/tabs.component.tslibs/zard/src/lib/components/slider/slider.component.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.tslibs/zard/src/lib/components/combobox/demo/default.tslibs/zard/src/lib/components/combobox/demo/grouped.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/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.tslibs/zard/src/lib/components/toggle/toggle.component.tslibs/zard/src/lib/components/radio/radio.component.tslibs/zard/src/lib/components/tabs/tabs.component.tslibs/zard/src/lib/components/slider/slider.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.ts
🧠 Learnings (32)
📓 Common learnings
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.653Z
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.533Z
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
📚 Learning: 2025-11-25T18:54:01.533Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.533Z
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:
libs/zard/src/lib/components/command/doc/api.mdlibs/zard/src/lib/components/tabs/doc/api.mdlibs/zard/src/lib/components/slider/doc/api.mdlibs/zard/src/lib/components/toggle/doc/api.md
📚 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/doc/api.mdlibs/zard/src/lib/components/tabs/doc/api.mdlibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.tslibs/zard/src/lib/components/combobox/demo/default.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/combobox/doc/api.mdapps/web/src/app/domain/components/doc-command/doc-command.component.tslibs/zard/src/lib/components/toggle/doc/api.mdlibs/zard/src/lib/components/toggle/toggle.component.tslibs/zard/src/lib/components/combobox/demo/grouped.tslibs/zard/src/lib/components/radio/radio.component.tslibs/zard/src/lib/components/tabs/tabs.component.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:01.533Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.533Z
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/command/doc/api.mdlibs/zard/src/lib/components/tabs/doc/api.mdlibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.tslibs/zard/src/lib/components/combobox/doc/api.mdlibs/zard/src/lib/components/toggle/toggle.component.tslibs/zard/src/lib/components/tabs/tabs.component.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:22.653Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.653Z
Learning: Applies to libs/zard/src/lib/components/*/doc/{overview,api}.md : Write documentation in `overview.md` for use cases and basic examples, and `api.md` for complete API reference
Applied to files:
libs/zard/src/lib/components/command/doc/api.mdlibs/zard/src/lib/components/tabs/doc/api.mdlibs/zard/src/lib/components/slider/doc/api.mdlibs/zard/src/lib/components/toggle/doc/api.md
📚 Learning: 2025-11-25T18:54:22.653Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.653Z
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/doc/api.mdlibs/zard/src/lib/components/tabs/doc/api.mdlibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/slider/doc/api.mdlibs/zard/src/lib/components/command/command.component.tslibs/zard/src/lib/components/combobox/demo/default.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/combobox/doc/api.mdapps/web/src/app/domain/components/doc-command/doc-command.component.tslibs/zard/src/lib/components/toggle/doc/api.mdlibs/zard/src/lib/components/toggle/toggle.component.tslibs/zard/src/lib/components/combobox/demo/grouped.tslibs/zard/src/lib/components/tabs/tabs.component.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:01.533Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.533Z
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/tabs/doc/api.mdlibs/zard/src/lib/components/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.tslibs/zard/src/lib/components/combobox/demo/default.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/toggle/doc/api.mdlibs/zard/src/lib/components/toggle/toggle.component.tslibs/zard/src/lib/components/radio/radio.component.tslibs/zard/src/lib/components/tabs/tabs.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/eslint.config.mjs
📚 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/tabs/doc/api.mdlibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.tslibs/zard/src/lib/components/combobox/demo/default.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/combobox/doc/api.mdapps/web/src/app/domain/components/doc-command/doc-command.component.tslibs/zard/src/lib/components/toggle/toggle.component.tslibs/zard/src/lib/components/combobox/demo/grouped.tslibs/zard/src/lib/components/tabs/tabs.component.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:22.653Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.653Z
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/demo/default.tslibs/zard/src/lib/components/command/command.component.spec.tslibs/zard/src/lib/components/combobox/demo/grouped.ts
📚 Learning: 2025-11-25T18:54:01.533Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.533Z
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/demo/default.tsapps/web/src/app/domain/components/doc-command/doc-command.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/demo/default.tslibs/zard/src/lib/components/combobox/demo/default.tslibs/zard/src/lib/components/combobox/demo/grouped.ts
📚 Learning: 2025-11-04T20:46:01.373Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 309
File: libs/zard/src/lib/components/select/demo/multi-select.ts:23-27
Timestamp: 2025-11-04T20:46:01.373Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, console.log statements are acceptable and often intentional to demonstrate reactivity and help users understand how the component works.
Applied to files:
libs/zard/src/lib/components/command/demo/default.ts
📚 Learning: 2025-11-25T18:54:22.653Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.653Z
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/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.tslibs/zard/src/lib/components/combobox/demo/default.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/toggle/toggle.component.tslibs/zard/src/lib/components/combobox/demo/grouped.tslibs/zard/src/lib/components/radio/radio.component.tslibs/zard/src/lib/components/tabs/tabs.component.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:01.533Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.533Z
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/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.tslibs/zard/src/lib/components/combobox/demo/default.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/toggle/toggle.component.tslibs/zard/src/lib/components/combobox/demo/grouped.tslibs/zard/src/lib/components/radio/radio.component.tslibs/zard/src/lib/components/tabs/tabs.component.tslibs/zard/src/lib/components/slider/slider.component.tslibs/zard/eslint.config.mjs
📚 Learning: 2025-11-25T18:54:22.653Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.653Z
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/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.tslibs/zard/src/lib/components/combobox/demo/default.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/toggle/toggle.component.tslibs/zard/src/lib/components/combobox/demo/grouped.tslibs/zard/src/lib/components/radio/radio.component.tslibs/zard/src/lib/components/tabs/tabs.component.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:01.533Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.533Z
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/command/demo/default.tslibs/zard/src/lib/components/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.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/toggle/toggle.component.tslibs/zard/src/lib/components/radio/radio.component.ts
📚 Learning: 2025-11-25T18:54:50.365Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.365Z
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/demo/default.tsapps/web/src/app/domain/components/doc-command/doc-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/command/demo/default.tslibs/zard/src/lib/components/command/command.component.spec.ts
📚 Learning: 2025-11-25T18:54:22.653Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.653Z
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/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.tslibs/zard/src/lib/components/toggle/toggle.component.tslibs/zard/src/lib/components/radio/radio.component.tslibs/zard/src/lib/components/tabs/tabs.component.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:22.653Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.653Z
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/combobox/combobox.component.tslibs/zard/src/lib/components/command/command.component.tslibs/zard/src/lib/components/combobox/demo/default.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/toggle/toggle.component.tslibs/zard/src/lib/components/tabs/tabs.component.tslibs/zard/src/lib/components/slider/slider.component.ts
📚 Learning: 2025-11-25T18:54:01.533Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.533Z
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.ts
📚 Learning: 2025-11-25T18:54:01.533Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.533Z
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.ts
📚 Learning: 2025-11-25T18:54:22.653Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.653Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with `[class]` for dynamic class application in components
Applied to files:
apps/web/src/app/domain/components/doc-command/doc-command.component.tslibs/zard/src/lib/components/combobox/demo/grouped.ts
📚 Learning: 2025-11-25T18:54:01.533Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.533Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
apps/web/src/app/domain/components/doc-command/doc-command.component.tslibs/zard/src/lib/components/combobox/demo/grouped.ts
📚 Learning: 2025-11-25T18:54:50.365Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.365Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Implement standalone Angular components with explicit imports rather than using module declarations
Applied to files:
apps/web/src/app/domain/components/doc-command/doc-command.component.ts
📚 Learning: 2025-11-25T18:54:50.365Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.365Z
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/toggle/toggle.component.ts
📚 Learning: 2025-11-25T18:54:22.653Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.653Z
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/radio/radio.component.ts
📚 Learning: 2025-11-25T18:54:01.533Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.533Z
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/radio/radio.component.ts
📚 Learning: 2025-11-25T18:54:01.533Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.533Z
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/radio/radio.component.ts
📚 Learning: 2025-11-25T18:54:22.653Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.653Z
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/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:22.653Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.653Z
Learning: Applies to **/*.{ts,tsx,js} : Use `zard/*` path aliases for imports mapping to `libs/zard/src/lib/*` directories
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.mjs
🔇 Additional comments (21)
libs/zard/src/lib/components/radio/radio.component.ts (2)
44-44: Refactor arbitrary TailwindCSS value to standard spacing scale.Changing from
left-[4px]toleft-1aligns with TailwindCSS best practices by using the design system's standard spacing scale instead of arbitrary values, improving consistency and maintainability.
65-65: Verify event name alignment with PR objectives.The PR title indicates standardized output event naming across components. Per the AI summary, other components are being renamed to use a specific prefix pattern (e.g.,
zCommandSelected,zSlideIndexChange,zToggleClick). However, this component'sradioChangeoutput does not follow that pattern and appears unchanged. Confirm whether the radio component was intentionally excluded from event renaming or if this should be updated to match the PR's standardization effort (e.g.,zRadioChange).apps/web/src/app/domain/components/doc-command/doc-command.component.ts (1)
14-14: LGTM: Event binding updated correctly.The event binding now uses
(zCommandSelected)which aligns with the renamed output in the command component. The handler signature remains compatible.libs/zard/src/lib/components/command/command.component.ts (2)
88-89: LGTM: Output names now follow component-specific convention.The outputs have been renamed from
zOnChange/zOnSelecttozCommandChange/zCommandSelected, providing clearer semantic meaning and avoiding theonprefix that ESLint now flags as an error.
170-171: LGTM: Emission calls correctly updated.Both emission sites now use the renamed outputs
zCommandChangeandzCommandSelected, maintaining consistency with the output declarations and preserving the original payload type.libs/zard/eslint.config.mjs (1)
67-67: LGTM: Enforcing output naming convention.Upgrading
@angular-eslint/no-output-on-prefixfrom 'warn' to 'error' ensures consistent output naming going forward and prevents regression to the old pattern. This aligns with the refactoring work completed in this PR.libs/zard/src/lib/components/tabs/tabs.component.ts (2)
180-184: LGTM: Output renamed with signal-based API.The output has been renamed from
zOnTabChangetozTabChange, removing theOnprefix. The signal-basedoutput()function is correctly used, and the payload type remains unchanged.
271-271: LGTM: Emission updated correctly.The emission call now uses
zTabChange.emit()consistent with the renamed output declaration.libs/zard/src/lib/components/tabs/doc/api.md (1)
16-16: LGTM: Documentation updated to reflect API change.The event name in the API documentation has been correctly updated to
(zTabChange), matching the implementation change.libs/zard/src/lib/components/toggle/toggle.component.ts (2)
58-60: LGTM: Outputs renamed with component-specific prefixes.The outputs have been renamed from generic names (
onClick,onHover,onChange) to component-specific names (zToggleClick,zToggleHover,zToggleChange), providing clearer semantics and avoiding theonprefix. Signal-basedoutput()is correctly used.
79-79: LGTM: Emission calls updated correctly.All emission sites now use the renamed outputs (
zToggleHover,zToggleClick,zToggleChange), maintaining consistency with the output declarations.Also applies to: 91-92
libs/zard/src/lib/components/toggle/doc/api.md (1)
21-25: LGTM: API documentation updated correctly.The event documentation has been updated to reflect the renamed outputs (
zToggleClick,zToggleHover,zToggleChange), maintaining accurate API reference for consumers.libs/zard/src/lib/components/combobox/demo/default.ts (1)
16-16: LGTM: Demo updated to use renamed event.The event binding has been correctly updated to
(zComboSelected), aligning with the combobox component's refactored output name. The local handler method name remains unchanged, which is appropriate.libs/zard/src/lib/components/combobox/demo/grouped.ts (1)
15-15: LGTM! Template binding updated to match the renamed output.The event binding correctly reflects the component's public API change from
zOnSelecttozComboSelected.libs/zard/src/lib/components/command/demo/default.ts (1)
11-11: LGTM! Event binding updated to match the component API.The binding correctly uses the renamed
zCommandSelectedoutput.libs/zard/src/lib/components/slider/doc/api.md (1)
20-22: LGTM! Documentation updated to reflect the renamed output.The API documentation correctly shows the new
zSlideIndexChangeevent name, maintaining consistency with the component implementation.libs/zard/src/lib/components/combobox/doc/api.md (1)
21-24: LGTM! API documentation updated correctly.The outputs table accurately reflects the renamed
zComboSelectedevent with the proper type signature.libs/zard/src/lib/components/command/doc/api.md (1)
14-17: LGTM! Events documentation updated with renamed outputs.The API documentation clearly shows both
zCommandChangeandzCommandSelectedevents with appropriate descriptions distinguishing their purposes.libs/zard/src/lib/components/combobox/combobox.component.ts (1)
90-90: LGTM! Output renamed consistently across declaration, template, and emission.The
zComboSelectedoutput is correctly:
- Declared at line 189 with the proper type
- Bound in the template at line 90
- Emitted at line 286
Also applies to: 189-189, 286-286
libs/zard/src/lib/components/command/command.component.spec.ts (1)
28-28: LGTM! Test suite updated to match the renamed outputs.The test template and descriptions correctly reference the new event names
zCommandSelectedandzCommandChange, maintaining proper test coverage for the component's public API.Also applies to: 150-150, 165-165
libs/zard/src/lib/components/slider/slider.component.ts (1)
204-204: LGTM! Excellent use of modern Angular patterns with the renamed output.The output rename from
onSlidetozSlideIndexChangeis implemented correctly using theoutput()function, with all emission sites consistently updated. This component exemplifies best practices:
- Signal-based output with
output<number>()- OnPush change detection strategy
- Dependency injection with
inject()- Proper ControlValueAccessor implementation
Also applies to: 357-357, 371-371
…ut` with output signal
mikij
left a comment
mikij
left a comment
There was a problem hiding this comment.
LGTM but we shall wait for @srizzon or @Luizgomess regard merging
mikij
changed the title
* origin/master: 🐛 fix: add control value accessor and update navigation (zard-ui#353) 📦 refactor: fixed output event names for components (zard-ui#347) ✨ feat(sidebar): documentation sidebar should scroll to active component (zard-ui#339) 📦 refactor: refactored string template outlet directive (zard-ui#333)
3 participants
What was done? 📝
Renamed variable names for output events in all components.
Link to Issue 🔗
Component API cleanup: #340
Type of change 🏗
Checklist 🧐
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.