File
Implements
Metadata
| selector |
[multi-select-drop-down] |
| styleUrls |
./multi-select-drop-down.component.scss |
| templateUrl |
./multi-select-drop-down.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Methods
|
Public
find
|
find(form)
|
|
|
Output form to parent component.
|
|
pleaseSelectLabel
|
Type : string
|
|
|
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { LabelService } from 'src/app/core/services/label-service/label-service.service';
@Component({
selector: '[multi-select-drop-down]',
templateUrl: './multi-select-drop-down.component.html',
styleUrls: ['./multi-select-drop-down.component.scss']
})
export class MultiSelectDropDownComponent implements OnInit {
// Labels
pleaseSelectLabel: string;
@Input() dataList: [any];
@Input() buttonLabel: string;
@Output() findQuery = new EventEmitter();
constructor(
private labelService: LabelService,
) { }
ngOnInit() {
this.labelService.getLabel('pleaseSelect').then(label => this.pleaseSelectLabel = label);
}
/** Output form to parent component. */
public find(form) {
this.findQuery.emit(form);
}
}
<div #dropdownMenu="ngbDropdown" *ngIf="dataList?.length > 0" placement="bottom-left"
ngbDropdown [autoClose]="false" (clickOutside)="dropdownMenu.close()">
<div class="selectBox" id="multi-select" ngbDropdownToggle>
{{pleaseSelectLabel}}
<span class="icon-chevronDown"></span>
<span class="icon-chevronUp"></span>
</div>
<div ngbDropdownMenu aria-labelledby="multi-select" class="multi-drop">
<form #multiForm="ngForm" (ngSubmit)="find(multiForm)">
<div class="multi-list">
<div class="form-check container" *ngFor="let data of dataList; let i=index">
<input [name]="data.Value" type="checkbox" class="form-check-input" [value]="data.Value" [id]="data.Value + '-' + i"
ngModel>
<label class="form-check-label" [for]="data.Value + '-' + i">
{{data.Key}}
</label>
<label class="checkmark" [for]="data.Value + '-' + i"></label>
</div>
</div>
<div class="list-footer border-shadow-top">
<button class="btn btn-green button-find" type="submit" (click)="dropdownMenu.close()">{{buttonLabel}}</button>
</div>
</form>
</div>
</div>
@import "src/app/styles/helpers";
.selectBox {
width: 100%;
line-height: 1.5rem;
border: 1px solid $light-slate;
padding: calc-rem(8) calc-rem(20);
padding-right: calc-rem(10);
color: $cool-grey;
display: flex;
justify-content: space-between;
cursor: pointer;
&:after {
content: "";
display: none;
}
&[aria-expanded=true] .icon-chevronDown {
display: none;
}
&[aria-expanded=false] .icon-chevronUp {
display: none;
}
span {
@include font-size(8);
margin-right: calc-rem(10);
}
}
.multi-drop {
background: white;
width: 100%;
padding-bottom: 0;
margin-top: calc-rem(-2);
border-top: none;
.multi-list {
width: 100%;
padding: calc-rem(20);
padding-top: 0;
max-height: calc-rem(275);
overflow-y: auto;
.form-check {
display: flex;
position: relative;
padding-left: calc-rem(35);
padding-bottom: calc-rem(6);
padding-top: calc-rem(6);
font-size: inherit;
/* Hide the browser's default checkbox */
&-input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
/* Show the checkmark when checked */
&:checked~.checkmark:after {
display: block;
}
}
&-label{
flex-grow: 1;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 6px;
left: 5px;
height: calc-rem(16);
width: calc-rem(15);
background-color: $white;
border: 1px solid $slate;
margin-top: calc-rem(7);
cursor: pointer;
/* Create the checkmark/indicator (hidden when not checked) */
&:after {
content: "";
position: absolute;
display: none;
left: 4px;
top: 1px;
width: 5px;
height: 10px;
border: solid $blue;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
}
}
}
.list-footer {
display: flex;
padding: calc-rem(20);
.button-find {
flex-grow: 1;
}
}
}
Legend
Html element with directive