File
Implements
Metadata
| selector |
designation-facet |
| styleUrls |
./facet-designation.component.scss |
| templateUrl |
./facet-designation.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
facet
|
Type : DesignationFacet
|
|
|
Methods
|
applyFilter
|
applyFilter()
|
|
|
|
|
|
facetId
|
Default value : this.idGenerator.getId()
|
|
|
|
filterInput
|
Type : FormControl
|
Default value : new FormControl()
|
|
|
import { Component, OnChanges, OnInit, SimpleChanges, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { DesignationFacet } from 'skf-search-angular-service';
@Component({
selector: 'designation-facet',
templateUrl: './facet-designation.component.html',
styleUrls: ['./facet-designation.component.scss']
})
export class DesignationFacetComponent implements OnInit, OnChanges {
@Input() facet: DesignationFacet;
filterInput: FormControl = new FormControl();
facetId = this.idGenerator.getId();
constructor(private idGenerator: IdGeneratorService) {
}
ngOnInit() {
}
ngOnChanges(changes: SimpleChanges) {
if (changes) {
}
}
applyFilter() {
this.facet.displayDesignation({value: this.filterInput.value});
}
}
<div class="accordion designation-facet" [id]="'designation-facet-' + facetId" *ngIf="facet">
<div class="card">
<div class="card-header" [id]="facet.displayName">
<a class="toggler" data-toggle="collapse" [href]="'#designation-' + facetId" role="button" aria-expanded="true" [attr.aria-controls]="'designation-' + facetId">
<span>{{ facet.displayName | uppercase }}</span>
<i class="closed icon-chevronUp"></i>
<i class="open icon-chevronDown"></i>
</a>
</div>
<div class="collapse show" [id]="'designation-' + facetId" [attr.aria-labelledby]="facet.displayName" [attr.data-parent]="'#designation-facet-' + facetId">
<div class="card-body">
<div class="input-group input-group-sm">
<input class="designation-filter form-control" [formControl]="filterInput" type="search" (keyup.enter)="applyFilter()">
</div>
</div>
</div>
</div>
</div>
@import "src/app/styles/helpers";
.designation-facet {
margin-bottom: calc-rem(2);
color: white;
background-color: $cool-grey;
.card {
background-color: inherit;
border: none;
&-header {
border: none;
background: transparent;
padding: calc-rem(20);
.toggler {
display: flex;
justify-content: space-between;
align-items: center;
color: $light-blue;
@include font-scale(14, uppercase);
letter-spacing: calc-rem(2);
&:hover { text-decoration: none; }
i { @include font-size(8);}
&[aria-expanded=true] .open {
display: none;
}
&[aria-expanded=false] .closed {
display: none;
}
}
}
&-body {
padding-top: calc-rem(10);
.designation-filter {
background-color: #f8f8f8;
@include font-size(14);
&:focus {
border-color: unset;
box-shadow: none;
}
}
}
}
}
Legend
Html element with directive