mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
eb0d96698c
feat(shared-filter, ui-switch): add switch filter menu button for inline toggle filters
Add a new SwitchMenuButtonComponent that renders filter inputs as compact toggle switches
without an overlay menu. This provides a more streamlined UX for simple boolean/single-option
filters directly in the controls panel.
Key changes:
- Create new switch-menu module with button component and tests
- Extend FilterControlsPanelComponent to accept switchFilters input array
- Rename IconSwitchComponent to SwitchComponent for consistency
- Update filter actions to use 'target' property instead of 'group' for filtering
- Add isEmptyFilterInput support for NumberRange inputs
- Export switch-menu module from shared/filter public API
The switch button auto-commits on toggle and uses the checkbox filter model internally,
allowing simple configuration like:
switchFilters = [{ filter: stockFilter, icon: 'isaFiliale' }]
This implementation follows the existing filter architecture patterns and maintains
full accessibility support through ARIA attributes and keyboard navigation.
Ref: #5427
85 lines
1.5 KiB
SCSS
85 lines
1.5 KiB
SCSS
.ui-switch {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
&.disabled {
|
|
@apply cursor-default pointer-events-none opacity-50;
|
|
}
|
|
}
|
|
|
|
.ui-switch__track {
|
|
position: relative;
|
|
width: 5.25rem;
|
|
height: 3rem;
|
|
border-radius: 1.5rem;
|
|
transition: background-color 0.2s ease-in-out;
|
|
@apply bg-isa-neutral-400;
|
|
|
|
&--checked {
|
|
@apply bg-isa-secondary-400;
|
|
}
|
|
}
|
|
|
|
.ui-switch__thumb {
|
|
position: absolute;
|
|
left: 0.375rem;
|
|
width: 1.875rem;
|
|
height: 1.875rem;
|
|
border-radius: 50%;
|
|
transition: all 0.3s ease-in-out;
|
|
@apply bg-isa-white;
|
|
top: 50%;
|
|
transform: translate(0.1875rem, -50%);
|
|
|
|
&--checked {
|
|
transform: translate(2.2rem, -50%);
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
}
|
|
|
|
.ui-switch:hover & {
|
|
transform: translate(0.1875rem, -50%) scale(0.9);
|
|
}
|
|
|
|
.ui-switch:hover &--checked {
|
|
transform: translate(2.25rem, -50%) scale(0.9);
|
|
}
|
|
}
|
|
|
|
.ui-switch__icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0.75rem;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: none;
|
|
transition: color 0.2s ease-in-out;
|
|
}
|
|
|
|
.ui-switch__primary {
|
|
.ui-switch__track {
|
|
@apply bg-isa-neutral-400;
|
|
|
|
&--checked {
|
|
@apply bg-isa-secondary-400;
|
|
}
|
|
}
|
|
|
|
.ui-switch__icon {
|
|
@apply text-isa-white;
|
|
}
|
|
|
|
.ui-switch__track--checked .ui-switch__icon {
|
|
@apply text-isa-secondary-400;
|
|
}
|
|
}
|
|
|
|
.ui-switch:disabled,
|
|
.ui-switch.disabled {
|
|
@apply cursor-default;
|
|
}
|