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

privacy policy style

Browse source
This commit is contained in:
Tykayn 2025-09-02 14:40:47 +02:00 • committed by tykayn
parent d4f3c119b2
commit bca0e5563c
9 changed files with 117 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,31 +6,40 @@
{{ label }}
</span>
</div>
<input class="is-hidden" placeholder="{{label}}" type="text">
<div class="dropdown">
<div class="dropdown-button selector-button">
<!-- bouton-->
<i class="ri-arrow-down-s-line"></i>
</div>
<div class="dropdown-list">
<!-- selected:-->
<div class="selected-items">
<input (blur)="displayDropdown = false" (click)="displayDropdown= !displayDropdown" (focus)="displayDropdown = true"
class="is-hidden" placeholder="{{label}}"
type="text">
@if (displayDropdown) {
<div class="dropdown">
<div class="dropdown-button selector-button">
<!-- bouton-->
<i class="ri-arrow-down-s-line"></i>
</div>
<hr>
<div class="available-items">
<!-- available:-->
<div class="dropdown-item">
<div class="label">
choix 1
</div>
<div class="dropdown-list">
<!-- selected:-->
<div class="selected-items">
@for (sc of selectedChoices; track sc) {
<div class="dropdown-item">
<i class="ri-checkbox-line"></i>
{{ sc }}
</div>
}
</div>
<div class="dropdown-item">
<div class="label">
choix 2
</div>
<hr>
<div class="available-items">
<!-- available:-->
@for (c of choices; track c) {
<div class="dropdown-item">
<i class="ri-checkbox-blank-line"></i>
{{ c }}
</div>
}
</div>
</div>
</div>
</div>
}
</div>

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

@ -61,4 +61,22 @@
border-color: #525668;
}
}
.dropdown {
background: white;
padding: 1rem;
border-radius: 8px;
position: relative;
display: block;
.dropdown-item {
padding: 4px;
cursor: pointer;
&:hover {
background: #525668;
color: white;
}
}
}
}

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

@ -8,5 +8,8 @@ import {Component, Input} from '@angular/core';
})
export class MultiSelector {
@Input() label!: string;
@Input() choices: any = ['choix 1', 'choix 2', 'choix 3'];
@Input() selectedChoices: any = ['choix 4'];
displayDropdown = true;
}