File
Implements
Metadata
| selector |
[top-menu-search] |
| styleUrls |
./top-menu-search.component.scss |
| templateUrl |
./top-menu-search.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
navToggler
|
Type : HTMLElement
|
|
|
Methods
|
clickNavbarToggler
|
clickNavbarToggler()
|
|
|
|
|
|
handleSearchField
|
handleSearchField(e: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| e |
Event
|
No
|
|
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { SearchInputComponent } from 'src/app/sitesearch/shared/search-input/search-input.component';
@Component({
selector: '[top-menu-search]',
templateUrl: './top-menu-search.component.html',
styleUrls: ['./top-menu-search.component.scss']
})
export class TopMenuSearchComponent implements OnInit {
@ViewChild(SearchInputComponent)
private searcher: SearchInputComponent;
@Input() navToggler: HTMLElement;
@Input() isNavbarCollapsed: boolean;
constructor() {}
ngOnInit() {
}
clickNavbarToggler() {
if (!this.isNavbarCollapsed) {
this.navToggler.click();
}
}
handleSearchField(e: Event) {
if (e) {
setTimeout(() => {
this.searcher.focusInput();
}, 100);
} else {
this.searcher.clearInput();
}
}
}
<div ngbDropdown placement="bottom-right" #searchDropdown="ngbDropdown" (openChange)="handleSearchField($event)">
<button type="button" class="btn btn-search" role="button" aria-label="search" ngbDropdownToggle (click)="clickNavbarToggler()">
<i class="icon-masthead-search"></i>
</button>
<search-input [showSearchButton]="false" (performedSearch)="searchDropdown.close()" ngbDropdownMenu></search-input>
</div>
@import "src/app/styles/helpers";
:host(.search) {
.btn-search {
border: none;
outline: none;
color: $white;
background-color: transparent;
padding: calc-rem(19) calc-rem(20) calc-rem(20);
&:focus {
box-shadow: none;
}
&:after {
display: none;
}
}
.dropdown {
&.show {
background-color: $dark-blue;
}
&-menu {
box-shadow: $box-shadow-lg;
margin-top: 0;
width: 100vw;
background-color: $dark-blue;
color: $white;
border: none;
padding-top: 0;
padding-bottom: 0;
@include media-breakpoint-up(lg) {
width: 50vw;
margin-left: calc-rem(1);
}
::ng-deep .searchbox {
max-width: none;
}
::ng-deep .search-textbox {
background-color: $dark-blue;
width: 100%;
@include font-size(16);
@include media-breakpoint-up(lg) {
padding-left: calc-rem(24);
padding-right: calc-rem(24);
}
}
::ng-deep .clear-input {
right: calc-rem(23);
i {
font-size: calc-rem(16) !important;
}
}
::ng-deep .qc-box {
@include box-shadow(lg);
@include font-scale(14, medium);
border: 1px solid $slate;
}
}
}
}
Legend
Html element with directive