Add TabsCollabsedService to manage tabs bar collapsed/expanded state with
proximity-based switching. Implement activity indicators for navigation items
that bubble up from child routes when menu is collapsed.
- Add TabsCollabsedService for centralized tabs state management
- Add indicator support to navigation types and components
- Implement indicator bubbling from children to parent when collapsed
- Update shell-layout with click-outside-to-close for mobile navigation
- Add dynamic route resolution with factory functions and signals
- Update shell-tabs with compact mode and proximity detection
- Add ShellTabsComponent to the header section
- Use UiElementSizeObserverDirective for dynamic margin calculations
- Apply fixed positioning for header and navigation with proper z-index
- Calculate main content margins based on header/navigation dimensions
Add modular navigation system with three reusable components:
- NavigationGroupComponent for grouped navigation sections
- NavigationItemComponent for main navigation entries with expand/collapse
- NavigationSubItemComponent for nested child routes
Include navigation types, route configuration with dynamic tabId support,
and integrate navigation into shell-layout sidebar.
Update documentation for shell-header, shell-layout, shell-notifications,
and shell-common libraries with API references, E2E attributes, and
accessibility documentation.
Add new util library providing state management services for shell components:
- NavigationService: navigation drawer open/closed state
- FontSizeService: application-wide font size with document sync
- NotificationsService: notification state with read status tracking
- Replace NgModule bootstrap with bootstrapApplication and ApplicationConfig
- Convert app.module.ts to app.config.ts with provider functions
- Convert routing module to standalone routes array
- Remove domain NgModules (services now providedIn: 'root')
- Remove NgRx application store in favor of signals
- Update icon components and registries for modern patterns
- Update page components for standalone compatibility
- Move shell-layout from nested folder to lib root
- Add network-status-banner component for connectivity display
- Remove old component structure and specs
- Scaffold new core-connectivity library with Nx generator
- Migrate NetworkStatusService from isa-app to shared library
- Refactor service to use fromEvent/merge with shareReplay
- Add NetworkStatus type and injectNetworkStatus signal helper
- Update all consumers to use @isa/core/connectivity imports
- Add comprehensive unit tests (9 tests)
- Configure Vitest with JUnit/Cobertura reporters
- Update library-reference.md (74 → 75 libraries)
✨ feat(navigation): implement title management and enhance tab system
This commit introduces a comprehensive title management system and extends
the tab functionality with subtitle support, improving navigation clarity
and user experience across the application.
Key changes:
Title Management System:
- Add @isa/common/title-management library with dual approach:
- IsaTitleStrategy for route-based static titles
- usePageTitle() for component-based dynamic titles
- Implement TitleRegistryService for nested component hierarchies
- Automatic ISA prefix addition and TabService integration
- Comprehensive test coverage (1,158 lines of tests)
Tab System Enhancement:
- Add subtitle field to tab schema for additional context
- Update TabService API (addTab, patchTab) to support subtitles
- Extend Zod schemas with subtitle validation
- Update documentation with usage examples
Routing Modernization:
- Consolidate route guards using ActivateProcessIdWithConfigKeyGuard
- Replace 4+ specific guards with generic config-key-based approach
- Add title attributes to 100+ routes across all modules
- Remove deprecated ProcessIdGuard in favor of ActivateProcessIdGuard
Code Cleanup:
- Remove deprecated preview component and related routes
- Clean up unused imports and exports
- Update TypeScript path aliases
Dependencies:
- Update package.json and package-lock.json
- Add @isa/common/title-management to tsconfig path mappings
Refs: #5351, #5418, #5419, #5420
- Add --amend option with safety rules to commit command
- Add logging skill cross-references to angular-template and html-template
- Fix logging skill name from logging-helper to logging
- Add extended thinking triggers, context monitoring, and code investigation
rules to CLAUDE.md
feature(crm-data-access): Added check in customer resource if customerId has changed to prevent flickering in the view after Filter changes etc.
Ref: #5478
feature(checkout-reward, core-tabs): Added back button and configured it so it can accept optional route to navigate. Added orderNumber and orderDate to reward order confirmation
Ref: #5456
Customer Card Copy-to-Clipboard (#5508)
- Click on card number copies it to clipboard using Angular CDK Clipboard
- Shows success tooltip confirmation positioned on the right
- Tooltip auto-dismisses after 3 seconds
Card Stack Carousel Improvements (#5509)
- Fix card centering by using afterNextRender instead of AfterViewInit
- Add ResizeObserver to handle dynamic size changes
- Disable transforms until natural position is measured (prevents initial jump)
- Center single card in carousel view
Tooltip Enhancements
- Add success variant with green styling (isa-accent-green)
- Add position input (left | right | top | bottom)
- Add fade in/out CSS keyframes animations (150ms)
- Respect prefers-reduced-motion for accessibility
Related Tasks
- Closes#5508
- Refs #5509
feat(checkout): add branch selection to reward catalog
- Add new select-branch-dropdown library with BranchDropdownComponent
and SelectedBranchDropdownComponent for branch selection
- Extend DropdownButtonComponent with filter and option subcomponents
- Integrate branch selection into reward catalog page
- Add BranchesResource for fetching available branches
- Update CheckoutMetadataService with branch selection persistence
- Add comprehensive tests for dropdown components
Related work items: #5464
fix(shared-barcode, crm-customer-card): improve barcode rendering with transparent SVG background
Enhance barcode component flexibility by separating container and SVG
background colors. The SVG barcode now defaults to transparent background
while maintaining container background control, enabling better integration
with various card designs.
Changes:
- Add separate svgBackground input for SVG element (default: transparent)
- Keep background input for container styling (default: #ffffff)
- Add containerWidth and containerHeight inputs for flexible sizing
- Update customer card to remove explicit white background on barcode
- Add opacity styling for inactive customer cards
- Enhance test coverage for new background and sizing inputs
The separation of concerns allows the barcode to adapt to parent container
backgrounds while maintaining consistent rendering across different contexts.
Ref: #5498
Add new skill for creating performant CSS animations:
- Native @keyframes animations with GPU acceleration
- Angular animate.enter/leave for modern view transitions
- Performance guidelines and best practices
- Reference guide for common animation patterns
feat(carousel): convert to transformX with touch support and card animations
- Convert carousel from scroll-based to translate3d() transform positioning
- Add touch/swipe support with direct DOM manipulation for smooth 60fps performance
- Add mouse drag support for desktop navigation
- Implement hardware-accelerated transforms with will-change optimization
- Add disabled input to prevent navigation when needed
- Fix bounds calculation to use parent viewport width
- Add card stacking animation with translateY and rotation effects
- Remove shadow for cards beyond 3rd position in stacked mode
- Update tests with 4 new disabled state test cases (17 tests total)
Refs #5499
Related work items: #5499
