tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

up style multi selector

Browse source
This commit is contained in:
Tykayn 2025-10-06 18:31:10 +02:00 • committed by tykayn
parent ffb9027691
commit ac31045ad4
6 changed files with 63 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

6
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
View file

@ -20,6 +20,7 @@
type="text">
<span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
(click)="resetChoicesLists()"
class="selected-items-counter">
{{ selectedChoices?.length || 0 }}
</span>
@ -33,7 +34,8 @@
<div class="dropdown">
<div class="dropdown-list">
<!-- selected:-->
<!-- count: {{ getFilteredSelectedChoices().length + getFilteredAvailableChoices().length }}
selected:-->
@if (selectedChoices?.length && availableChoices?.length) {
<div class="selected-items">
@ -44,7 +46,7 @@
>
<img alt="checkbox" src="checkbox-active.svg" />
<span class="label">
{{ sc.label }}
<!-- {{ sc.label }} -->
</span>
</div>
}

58
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
View file

@ -141,27 +141,43 @@ line-height: 100%; /* 14px */
.separator{
display: flex;
width: 186px;
height: 34px;
min-height: 34px;
max-height: 34px;
padding: var(--Spacing-Spacing-20, 8px) var(--Spacing-Spacing-30, 12px);
align-items: center;
gap: var(--Spacing-Spacing-10, 4px);
border-radius: var(--Radius-list, 0);
background: #F5F5F5;
width: 186px;
height: 34px;
min-height: 34px;
max-height: 34px;
padding: var(--Spacing-Spacing-20, 8px) var(--Spacing-Spacing-30, 12px);
align-items: center;
gap: var(--Spacing-Spacing-10, 4px);
border-radius: var(--Radius-list, 0);
background: #F5F5F5;
margin-top: 6px;
margin-bottom: 16px;
.label{
overflow: hidden;
color: var(--color-text-secondary, #525668);
leading-trim: both;
text-edge: cap;
text-overflow: ellipsis;
font-family: var(--Fonts-Font-text, Barlow);
font-size: var(--Font-Base, 14px);
font-style: italic;
font-weight: 400;
line-height: 100%; /* 14px */
}
.label{
overflow: hidden;
color: var(--color-text-secondary, #525668);
leading-trim: both;
text-edge: cap;
text-overflow: ellipsis;
font-family: var(--Fonts-Font-text, Barlow);
font-size: var(--Font-Base, 14px);
font-style: italic;
font-weight: 400;
line-height: 100%; /* 14px */
}
}
.available-items{
img{
margin-right: 6px;
}
.dropdown-item{
padding: 6px;
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: start;
}
}
}

21
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts
View file

@ -62,13 +62,6 @@ export class MultiSelector implements OnInit {
console.log('toggle selected choice ', choice, 'in filter ', this.label);
this.selectedChoicesChange.emit(choice);
console.log(choice);
this.store.dispatch({
type: this.actionTypes.UPDATE_FILTER,
payload: {
filter: this.label,
selectedChoice: choice
}
})
}
availableChoicesChangeToggleItem(choice: any) {
@ -80,14 +73,7 @@ export class MultiSelector implements OnInit {
const value = typeof c === 'string' ? c : c?.value;
return value !== clickedValue;
});
this.store.dispatch({
type: this.actionTypes.UPDATE_FILTER,
payload: {
filter: this.label,
availableChoice: choice
}
}
)
console.log('toggle available choices', this.label, choice);
}
onInputClickedOrFocused(event?: any) {
@ -111,4 +97,9 @@ export class MultiSelector implements OnInit {
this.displayDropdown = true;
console.log('Opened dropdown:', this.displayDropdown);
}
resetChoicesLists() {
this.selectedChoices = [];
this.availableChoices = [];
}
}