Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/smart selector #7

Merged
merged 11 commits into from
Oct 19, 2024
Merged

Feature/smart selector #7

merged 11 commits into from
Oct 19, 2024

Conversation

AditechGH
Copy link
Owner

Description

This PR integrates the Smart Selector component into the @ngx-smart-forms library collection. The Smart Selector provides advanced selection capabilities with features like single and multi-selection modes, custom layouts, and image-based options. It enhances form handling by supporting Angular forms with validation and theming options.

Key Features:

  • Single and Multi-Selection: Supports flexible selection behavior.
  • Grid and List Layouts: Customize layouts to fit different UI needs.
  • Custom Templates: Render advanced option templates, including image-based options.
  • Theming Support: Switch between light and dark themes or apply custom styles.
  • Select/Deselect All: Easily manage multi-selection actions.
  • Validation: Includes max selection limits and required field validation.
  • Accessibility (A11y): Full keyboard navigation support.
  • Dynamic Filtering: Real-time option filtering for responsive forms.
  • Lazy Loading: Efficient loading for large datasets.

This addition strengthens the library collection, offering developers a powerful and accessible component for various selection needs.

Type of change

  • New feature (non-breaking change which adds functionality)
  • This change requires a documentation update

How Has This Been Tested?

  • Verified form integration with reactive and template-driven forms.
  • Tested keyboard navigation and A11y compliance.
  • Validated behavior for multi-selection limits and required fields.
  • Confirmed proper theming behavior with light/dark modes.
  • Ensured lazy loading works with large datasets.

Checklist

  • Code follows project style guidelines
  • Self-review completed
  • Code is commented in hard-to-understand areas
  • Corresponding documentation updated
  • No new warnings introduced
  • Added tests to ensure feature works
  • All unit tests pass locally

@AditechGH
feat(smart-selector): create component with multi-select, custom layo…
8b0872a 
…ut, and theming options

- Added `SmartSelector` component supporting single and multi-selection modes.
- Implemented flexible option layouts (horizontal, vertical, grid).
- Provided customization through CSS variables for layout, spacing, colors, and more.
- Enabled custom templates for option rendering using `ng-template`.
- Integrated keyboard navigation (arrow keys, space, and enter).
- Added support for lazy rendering via `CdkVirtualScrollViewport`.
- Emitted `optionChanged`, `onSelect`, and `onDeselect` events for enhanced interactivity.
- Ensured ARIA accessibility with proper roles and attributes.
- Included light, dark, and custom theme support with dynamic theming capabilities.
@AditechGH
feat(smart-selector): add directive for toggling selection
5f9967a 
- Added a new directive, SmartToggleSelection, to the smart-selector library.
- The directive allows toggling the selection of all options in the smart-selector component.
- When the directive's host element is changed, it triggers the selectAll() or deselectAll() methods of the associated SmartSelector component.

Refactor smart-selector component HTML and SCSS

- Updated the HTML template of the smart-selector component to include additional logic for displaying placeholders and no options text.
- Added CSS styles to improve the appearance and behavior of the smart-selector component.
- Made adjustments to the grid layout for mobile devices.
@AditechGH
test(smart-selector): add comprehensive unit tests for smart-selector…
092091d 
… component

- Verify correct rendering in list and grid layouts
- Test single and multi-select modes with keyboard navigation
- Ensure placeholder and no-options text display correctly
- Validate max selection logic with custom error handling
- Include tests for ARIA support and accessible navigation
- Add tests for event emissions (onSelect, onDeselect, optionChanged)
@AditechGH
docs(smart-selector): add comprehensive documentation for @ngx-smart-…
53016a9 
…forms/smart-selector library

- Introduce an overview of the smart-selector component
- Add detailed usage examples for single and multi-selection
- Document support for grid and list layouts with custom templates
- Include properties, events, and error handling descriptions
- Provide theming options using CSS variables
- Highlight accessibility (A11y) features and keyboard navigation
- Outline best practices, performance tips, and edge cases
- Add installation instructions and live demo link on StackBlitz
- Include contributing guidelines, support information, and license details
@AditechGH
chore(smart-selector): Disable directive class suffix rule in ESLint …
0d08077 
…config
@AditechGH
feat(smart-selector): add smart-toggle-selection directive
afcccd2
@AditechGH
chore(smart-selector): Update package.json with new version and addit…
92cf45f 
…ional information
@AditechGH
docs: add smart-selector library to ngx-smart-forms collection docume…
ef21095 
…ntation

- Include @ngx-smart-forms/smart-selector in the list of libraries
- Add overview, key features, and usage examples for smart-selector
- Provide installation instructions for the smart-selector library
- Document grid and list layouts, multi-selection, and custom templates
- Update project structure and development commands to reflect smart-selector
- Ensure consistency across all library documentation
@AditechGH
refactor(smart-selector): Update smart-selector component styles and …
4c187c2 
…behavior

- Update CSS variables for disabled state in smart-selector component
- Add smooth scrolling behavior to smart-selector component
- Handle disabled state in smart-selector component logic
@AditechGH
chore: Add detailed comments and documentation to SmartSelector compo…
44f0b63 
…nent

- Added comprehensive comments and JSDoc annotations to all class members, methods, and inputs/outputs.
- Documented the `SmartSelectorOption` interface, lifecycle hooks, and component logic.
- Provided detailed descriptions for `ControlValueAccessor` and `Validator` implementations.
- Clarified the purpose and usage of inputs such as `multiSelect`, `template`, `maxSelection`, and `ariaLabel`.
- Enhanced readability by explaining key functions like `selectOption`, `navigateOptions`, `validate`, and `registerFormControl`.
- Updated event handling logic with comments to improve maintainability.
- Ensured alignment with Angular best practices and improved code clarity for future contributors.
@AditechGH
feat(smart-selector-app): create a comprehensive Smart Selector demo …
05623bf 
…application

- Added multiple examples showcasing Smart Selector functionality:
  - Single and multi-selection modes.
  - Custom layouts (grid and list).
  - Image-based options with custom templates.
  - Max selection limits with large datasets.
  - Custom labels, placeholders, and error handling.
  - Select/Deselect All functionality.
  - Theming support with light/dark mode toggle.
  - Lazy loading options demonstration.
  - Keyboard navigation support for accessibility.
  - Dynamic option filtering in real-time.

- Included form validations for required fields and max selection.
- Improved user experience with clear instructions and reload functionality for lazy loading.
- This demo highlights the flexibility and accessibility of the Smart Selector component.
@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented Oct 19, 2024 •
edited
Loading

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 05623bf. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

Sent with 💌 from NxCloud.

@AditechGH AditechGH merged commit 4aa6ab0 into main Oct 19, 2024
2 checks passed
@AditechGH AditechGH deleted the feature/smart-selector branch October 19, 2024 14:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@AditechGH