fix(attachment-list): hover highlight

[robertwilde]

Related to #1412

---

Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

• element-ng
• element-translate-ng

[gemini-code-assist]

Code Review

This pull request fixes a hover highlight issue on the attachment list component by adjusting the SCSS and expands the example page for this component. My review includes a suggestion to align the example component's state management with the project's style guide by using Angular signals.

[gemini-code-assist]

According to the repository's style guide (line 34), signals should be used for local component state. Consider converting noPreviewAttachments, and other state properties like attachments and readOnlyAttachments, to use signals. This would align with modern Angular practices and the project's conventions.

For example, you could define noPreviewAttachments as a signal:

import { signal } from '@angular/core';
// ...
  noPreviewAttachments = signal<Attachment[]>([
    {
      name: 'budget-quarterly.pptx'
    },
    // ... other attachments
  ]);

Then in your template, you would access it by calling the signal: [attachments]="noPreviewAttachments()".

Similarly, for the mutable attachments property, you could change it to a signal and update it like this:

// In SampleComponent
attachments = signal<Attachment[]>([]);

onRemoveAttachment(attachment: Attachment): void {
  this.logEvent(`Remove attachment: ${attachment.name}`);
  this.attachments.update(attachments => attachments.filter(a => a !== attachment));
}

References

1. The style guide recommends using signals for local component state (line 34). ^(link)