📦 refactor(empty): use NgOptimizedImage for improved image performance

[mikij]

What was done? 📝

• Add NgOptimizedImage directive for optimized image loading
• Set default image dimensions to 64x64 with TailwindCSS override support
• Remove redundant standalone: true from demo components
• Add explicit type="button" for accessibility
• Update icon syntax to self-closing tags
• Update API documentation with image sizing notes

Screenshots or GIFs 📸

|-----Figma-----|
|-----Implementation-----|

Link to Issue 🔗

Type of change 🏗

• New feature (non-breaking change that adds functionality)
• Bug fix (non-breaking change that fixes an issue)
• Refactor (non-breaking change that improves the code or technical debt)
• Chore (none of the above, such as upgrading libraries)

Breaking change 🚨

Checklist 🧐

• Tested on Chrome
• Tested on Safari
• Tested on Firefox
• No errors in the console

Summary by CodeRabbit

• Bug Fixes

  • Buttons now include explicit type attributes to prevent unintended form submissions.

• Improvements

  • Empty visuals use optimized image loading for consistent sizing and performance.
  • Icons updated for more consistent sizing and rendering; demo components benefit from improved change-detection for better performance.
  • Updated icon template syntax for consistency.

• Documentation

  • Clarified default Empty image size (64×64) and how to override it.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Note

.coderabbit.yaml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key(s) in object: 'tools', 'path_instructions'

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

📝 Walkthrough

Walkthrough

This PR standardizes component metadata across empty and icon components: removes standalone: true, applies ChangeDetectionStrategy.OnPush to icon demos, narrows icon size types, switches to NgOptimizedImage for images, and adds explicit type="button" to action buttons.

Changes

Cohort / File(s)	Summary
Empty Component Demos libs/zard/src/lib/shared/components/empty/demo/advanced.ts, libs/zard/src/lib/shared/components/empty/demo/custom-image.ts, libs/zard/src/lib/shared/components/empty/demo/default.ts	Removed standalone: true from @Component decorators; added type="button" to buttons; updated icon markup in default.ts.
Empty Component Core libs/zard/src/lib/shared/components/empty/empty.component.ts	Added NgOptimizedImage import and replaced <img [src]> with <img [ngSrc] width="64" height="64"> for optimized image handling.
Empty Component Documentation libs/zard/src/lib/shared/components/empty/doc/api.md	Added note: string zImage defaults to 64×64 and can be overridden with TailwindCSS sizing.
Icon Component Demos libs/zard/src/lib/shared/components/icon/demo/colors.ts, libs/zard/src/lib/shared/components/icon/demo/default.ts, libs/zard/src/lib/shared/components/icon/demo/sizes.ts, libs/zard/src/lib/shared/components/icon/demo/stroke-width.ts	Removed standalone: true; added ChangeDetectionStrategy import and changeDetection: ChangeDetectionStrategy.OnPush.
Icon Component Core & Types libs/zard/src/lib/shared/components/icon/icon.component.ts, libs/zard/src/lib/shared/components/icon/icon.variants.ts	Replaced ZardIconVariants with ZardIconSizeVariants (non-nullable zSize), updated zSize input type, and removed standalone: true and host: {} from the component decorator.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• ✨ feat(context-menu): adding context menu directive #381 — Overlapping changes to component metadata and migration away from standalone/module-style exports; touches similar component decorator patterns.

Suggested reviewers

• srizzon
• Luizgomess
• ribeiromatheuss

Poem

Components drop their lone attire,
OnPush whispers, lean and wire,
Images optimized, sizes tamed,
Buttons clear — no forms misnamed,
A tidy Angular choir ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	Title accurately reflects the main change: refactoring to use NgOptimizedImage for improved performance, which aligns with the core modification to the empty component.
Description check	✅ Passed	Description covers the main changes with sufficient detail, includes proper type selection (Refactor), and mentions testing. However, referenced screenshots are placeholders and Safari/Firefox testing is incomplete.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@libs/zard/src/lib/shared/components/empty/doc/api.md`:
- Line 18: Replace the typo "overriden" with the correct spelling "overridden"
in the documentation sentence referencing zImage and TailwindCSS (the line
mentioning zImage as string default size and the [&_img]: selector for sizing in
the custom image example); ensure the link to docs/components/empty#custom-image
and references to zImage and TailwindCSS remain unchanged.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@libs/zard/src/lib/shared/components/empty/empty.component.ts`:
- Line 42: The template currently hardcodes alt="Empty"; add a configurable
input on the EmptyComponent (e.g., an `@Input`() property named alt or altText
with a default of "Empty") and bind that input to the image alt attribute in the
template (replace the hardcoded alt with the input binding) so consumers can
pass meaningful alt text while preserving the default.

[srizzon]

LGTM