diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html index b47a1bc..359d8d3 100644 --- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html +++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html @@ -1,4 +1,4 @@ -
+
@@ -7,7 +7,7 @@
-
+
diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss index bfafa39..ec4540f 100644 --- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss +++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss @@ -7,7 +7,7 @@ sae-multi-selector { margin-left: 20px; - + } } @@ -79,16 +79,32 @@ background: variables.$csc-chips-bg-color; color: white; border: solid 1px variables.$csc-chips-bg-color; - width: 100%; border-radius: 20px; margin-bottom: 10px; display: flex; padding: 8px 10px 10px 12px; + + text-align: center; + font-size: 14px; + font-weight: 600; + line-height: 14px; + justify-content: center; align-items: center; gap: 5px; align-self: stretch; padding-right: 10px; + + } + + + } + + &.highlighted .chips-listing { + border-radius: 8px; + border: 1px solid #C2A9FD; + background: #E3EAF1; + box-shadow: 0 0 10px 0 #A86CFD; } } diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts index 20f1bac..7ca88cd 100644 --- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts +++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts @@ -1,14 +1,16 @@ -import {Component} from '@angular/core'; +import {Component, Input} from '@angular/core'; import {MultiSelector} from '../../inputs/multi-selector/multi-selector'; +import {NgClass} from '@angular/common'; @Component({ selector: 'sae-filters-group', imports: [ - MultiSelector + MultiSelector, + NgClass ], templateUrl: './filters-group.html', styleUrl: './filters-group.scss' }) export class FiltersGroup { - + @Input() highlighted = false; } diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html index 7399fa7..3486b42 100644 --- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html +++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html @@ -6,31 +6,40 @@ {{ label }}
- -