Added icon-toggle-button component in shared folder

[kyasbal]

[gemini-code-assist]

Summary of Changes

Hello @kyasbal, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a new, versatile IconToggleButtonComponent to the application's shared component library. This addition aims to standardize the implementation of interactive icon-based toggle buttons across the user interface, promoting consistency in design and behavior while improving developer efficiency through reusability.

Highlights

• New Component Introduction: A new IconToggleButtonComponent has been added to the shared components library, providing a reusable UI element for interactive icon-based toggle buttons.
• Component Functionality: The component supports displaying a Material icon, includes tooltip functionality, manages a toggleable selected state, and can be set to a disabled state.
• Styling and States: Comprehensive SCSS styling has been implemented to define the visual appearance of the button in its normal, selected, disabled, and hover states, ensuring a consistent user experience.
• Storybook Integration: Storybook stories have been created for the IconToggleButtonComponent, demonstrating its various states (default, selected, disabled, selected and disabled) for easy development and testing.

Changelog

• web/src/app/shared/components/icon-toggle-button/icon-toggle-button.component.html
  • Created the HTML template for the IconToggleButtonComponent, defining its structure with a button element and a Material icon.
• web/src/app/shared/components/icon-toggle-button/icon-toggle-button.component.scss
  • Added SCSS styling for the IconToggleButtonComponent, including definitions for normal, selected, disabled, and hover states with color palette integration.
• web/src/app/shared/components/icon-toggle-button/icon-toggle-button.component.ts
  • Implemented the TypeScript logic for the IconToggleButtonComponent, managing its inputs (icon, tooltip, disabled) and a two-way bound selected state, along with click handling.
• web/src/app/shared/components/icon-toggle-button/icon-toggle-button.stories.ts
  • Developed Storybook stories for the IconToggleButtonComponent, showcasing its default, selected, disabled, and selected-and-disabled states for documentation and testing.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new icon-toggle-button component, which is a well-structured and reusable Angular component. It effectively utilizes Angular's signal-based inputs (input(), model()) and built-in control flow, aligning with the latest Angular syntax recommendations from the repository's style guide. The component includes functionality for displaying a Material icon, tooltips, and handling selected/disabled states. Storybook stories are also provided, which is excellent for demonstrating and testing the component's various configurations. The component's adherence to the khi- selector prefix is also a good practice.