@nebular/theme
Version:
@nebular/theme
294 lines • 22.2 kB
JavaScript
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild, } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { of as observableOf, Subject } from 'rxjs';
import { filter, delay, takeUntil } from 'rxjs/operators';
import { NbSearchService } from './search.service';
import { NbThemeService } from '../../services/theme.service';
import { NbOverlayService } from '../cdk/overlay/overlay-service';
import { NbPortalDirective } from '../cdk/overlay/mapping';
/**
* search-field-component is used under the hood by nb-search component
* can't be used itself
*/
export class NbSearchFieldComponent {
constructor() {
this.show = false;
this.close = new EventEmitter();
this.search = new EventEmitter();
this.searchInput = new EventEmitter();
}
get showClass() {
return this.show;
}
get modalZoomin() {
return this.type === NbSearchFieldComponent.TYPE_MODAL_ZOOMIN;
}
get rotateLayout() {
return this.type === NbSearchFieldComponent.TYPE_ROTATE_LAYOUT;
}
get modalMove() {
return this.type === NbSearchFieldComponent.TYPE_MODAL_MOVE;
}
get curtain() {
return this.type === NbSearchFieldComponent.TYPE_CURTAIN;
}
get columnCurtain() {
return this.type === NbSearchFieldComponent.TYPE_COLUMN_CURTAIN;
}
get modalDrop() {
return this.type === NbSearchFieldComponent.TYPE_MODAL_DROP;
}
get modalHalf() {
return this.type === NbSearchFieldComponent.TYPE_MODAL_HALF;
}
ngOnChanges({ show }) {
const becameHidden = !show.isFirstChange() && show.currentValue === false;
if (becameHidden && this.inputElement) {
this.inputElement.nativeElement.value = '';
}
this.focusInput();
}
ngAfterViewInit() {
this.focusInput();
}
emitClose() {
this.close.emit();
}
submitSearch(term) {
if (term) {
this.search.emit(term);
}
}
emitSearchInput(term) {
this.searchInput.emit(term);
}
focusInput() {
if (this.show && this.inputElement) {
this.inputElement.nativeElement.focus();
}
}
}
NbSearchFieldComponent.TYPE_MODAL_ZOOMIN = 'modal-zoomin';
NbSearchFieldComponent.TYPE_ROTATE_LAYOUT = 'rotate-layout';
NbSearchFieldComponent.TYPE_MODAL_MOVE = 'modal-move';
NbSearchFieldComponent.TYPE_CURTAIN = 'curtain';
NbSearchFieldComponent.TYPE_COLUMN_CURTAIN = 'column-curtain';
NbSearchFieldComponent.TYPE_MODAL_DROP = 'modal-drop';
NbSearchFieldComponent.TYPE_MODAL_HALF = 'modal-half';
NbSearchFieldComponent.decorators = [
{ type: Component, args: [{
selector: 'nb-search-field',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div class="search" (keyup.esc)="emitClose()">
<button (click)="emitClose()" nbButton ghost class="close-button">
<nb-icon icon="close-outline" pack="nebular-essentials"></nb-icon>
</button>
<div class="form-wrapper">
<form class="form" (keyup.enter)="submitSearch(searchInput.value)">
<div class="form-content">
<input class="search-input"
#searchInput
(input)="emitSearchInput(searchInput.value)"
autocomplete="off"
[attr.placeholder]="placeholder"
tabindex="-1"
(blur)="focusInput()"/>
</div>
<span class="info">{{ hint }}</span>
</form>
</div>
</div>
`,
styles: [":host button{margin:0;padding:0;cursor:pointer;border:none;background:none}:host button:focus{box-shadow:none;outline:none}:host input{border-top:0;border-right:0;border-left:0;background:transparent;border-radius:0;line-height:1;display:inline-block;box-sizing:border-box;padding:0.05rem 0;-webkit-appearance:none}:host input:focus{outline:none}:host input::placeholder{opacity:0.3}:host span{font-size:90%;font-weight:bold;display:block;width:75%;margin:0 auto;padding:0.85rem 0;text-align:right}:host.modal-zoomin{display:block}:host.modal-zoomin .search{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:fixed;z-index:1050;top:0;left:0;width:100%;height:100vh;pointer-events:none;opacity:0;transition:opacity 0.5s}:host.modal-zoomin .search::before,:host.modal-zoomin .search::after{content:'';position:absolute;width:calc(100% + 15px);height:calc(100% + 15px);pointer-events:none}:host.modal-zoomin .search::before{top:0;left:0;border-right-width:0;border-bottom-width:0;transform:translate3d(-15px, -15px, 0)}:host.modal-zoomin .search::after{right:0;bottom:0;border-top-width:0;border-left-width:0;transform:translate3d(15px, 15px, 0)}:host.modal-zoomin .search button{position:absolute;top:3rem;font-size:2.5rem}[dir=ltr] :host.modal-zoomin .search button{right:3rem}[dir=rtl] :host.modal-zoomin .search button{left:3rem}:host.modal-zoomin .search input{font-size:10vw;width:75%}:host.modal-zoomin .search button{opacity:0;transform:scale3d(0.8, 0.8, 1);transition:opacity 0.5s, transform 0.5s}:host.modal-zoomin .search form{opacity:0;transform:scale3d(0.8, 0.8, 1);transition:opacity 0.5s, transform 0.5s}:host.modal-zoomin.show .search{pointer-events:auto;opacity:1}:host.modal-zoomin.show .search::before,:host.modal-zoomin.show .search::after{transform:translate3d(0, 0, 0);transition:transform 0.5s}:host.modal-zoomin.show .search button{opacity:1;transform:scale3d(1, 1, 1)}:host.modal-zoomin.show .search form{opacity:1;transform:scale3d(1, 1, 1)}@media screen and (max-width: 40rem){:host.modal-zoomin form{margin:5rem 0 1rem}:host.modal-zoomin span{text-align:left}}\n", "::ng-deep nb-layout.rotate-layout{position:fixed;overflow:hidden;width:100%}::ng-deep nb-layout.rotate-layout .scrollable-container{position:relative;z-index:10001;transition:transform 0.5s cubic-bezier(0.2, 1, 0.3, 1)}::ng-deep nb-layout.rotate-layout.with-search .scrollable-container{transition:transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);transform-origin:50vw 50vh;transform:perspective(1000px) translate3d(0, 50vh, 0) rotate3d(1, 0, 0, 30deg);pointer-events:none}:host.rotate-layout{position:absolute;display:block;width:100vw;height:100vh;pointer-events:none;opacity:0;transition-property:opacity;transition-delay:0.4s}:host.rotate-layout .search{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:1050;position:fixed;top:0;left:0;width:100%;height:50vh;pointer-events:none;opacity:0;transition:opacity 0.5s;transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)}:host.rotate-layout .search button{position:absolute;top:3rem;font-size:2.5rem;opacity:0;transform:scale3d(0.8, 0.8, 1);transition:opacity 0.5s, transform 0.5s;transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)}[dir=ltr] :host.rotate-layout .search button{right:3rem}[dir=rtl] :host.rotate-layout .search button{left:3rem}:host.rotate-layout .search form{margin:5rem 0;opacity:0;transform:scale3d(0.7, 0.7, 1);transition:opacity 0.5s, transform 0.5s;transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)}:host.rotate-layout .search input{font-size:7vw;width:75%}:host.rotate-layout.show{opacity:1;transition-delay:0s}:host.rotate-layout.show .search{pointer-events:auto;opacity:1}:host.rotate-layout.show .search button{opacity:1;transform:scale3d(1, 1, 1)}:host.rotate-layout.show .search form{opacity:1;transform:scale3d(1, 1, 1)}\n", "::ng-deep nb-layout.modal-move .layout{transition:transform 0.5s}::ng-deep nb-layout.modal-move.with-search .layout{transform:scale3d(0.8, 0.8, 1);pointer-events:none}:host.modal-move .search{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:fixed;z-index:1050;top:0;left:0;width:100%;height:100vh;pointer-events:none;opacity:0;transition:opacity 0.5s}:host.modal-move .search button{position:absolute;top:3rem;font-size:2.5rem;opacity:0;transition:opacity 0.5s}[dir=ltr] :host.modal-move .search button{right:3rem}[dir=rtl] :host.modal-move .search button{left:3rem}:host.modal-move .search form{margin:5rem 0;opacity:0;transform:scale3d(0.8, 0.8, 1);transition:opacity 0.5s, transform 0.5s}:host.modal-move .search input{font-size:10vw;width:75%;transform:scale3d(0, 1, 1);transform-origin:0 50%;transition:transform 0.3s}:host.modal-move.show .search{pointer-events:auto;opacity:1}:host.modal-move.show .search button{opacity:1}:host.modal-move.show .search form{opacity:1;transform:scale3d(1, 1, 1)}:host.modal-move.show .search input{transform:scale3d(1, 1, 1);transition-duration:0.5s}@media screen and (max-width: 40rem){:host.modal-move span{text-align:left}}\n", ":host.curtain .search{position:fixed;z-index:1050;top:0;left:100%;overflow:hidden;height:100vh;width:100%;padding:3rem;pointer-events:none;transition:transform 0.3s;transition-delay:0.4s;transition-timing-function:ease-out}:host.curtain .search::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;transition:transform 0.3s;transition-timing-function:ease-out}:host.curtain .search button{font-size:2.5rem;position:absolute;top:3rem;transition:opacity 0.1s;transition-delay:0.3s}[dir=ltr] :host.curtain .search button{right:3rem}[dir=rtl] :host.curtain .search button{left:3rem}:host.curtain .search form{width:50%;opacity:0;transform:scale3d(0.8, 0.8, 1);transition:opacity 0.5s, transform 0.5s}:host.curtain .search input{width:100%;font-size:6vw}:host.curtain.show .search{width:100%;pointer-events:auto;transform:translate3d(-100%, 0, 0);transition-delay:0s}:host.curtain.show .search::after{transform:translate3d(100%, 0, 0);transition-delay:0.4s}:host.curtain.show .search button{opacity:1;transform:scale3d(1, 1, 1)}:host.curtain.show .search form{opacity:1;transform:scale3d(1, 1, 1)}@media screen and (max-width: 40em){:host.curtain span{width:90%}:host.curtain input{font-size:2em;width:90%}}::ng-deep nb-layout.curtain .scrollable-container{position:relative;z-index:0}\n", "::ng-deep nb-layout.column-curtain.with-search .layout{pointer-events:none}:host.column-curtain{display:block;position:fixed;z-index:1050;top:0;left:50%;overflow:hidden;width:50%;height:100vh;pointer-events:none}:host.column-curtain::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;transform:scale3d(0, 1, 1);transform-origin:0 50%;transition:transform 0.3s;transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1)}:host.column-curtain .search{position:relative;padding:2.5rem 1.5rem 0;background:transparent}:host.column-curtain .search button{position:absolute;top:2rem;font-size:2.5rem;opacity:0;transition:opacity 0.5s}[dir=ltr] :host.column-curtain .search button{right:2rem}[dir=rtl] :host.column-curtain .search button{left:2rem}:host.column-curtain .search form{width:85%;transform:translate3d(-150%, 0, 0);transition:transform 0.3s}:host.column-curtain .search input{font-size:2.5rem;width:100%}:host.column-curtain .search span{font-size:85%}:host.column-curtain.show{pointer-events:auto}:host.column-curtain.show::before{transform:scale3d(1, 1, 1)}:host.column-curtain.show .search form{transform:translate3d(0, 0, 0);transition-delay:0.15s;transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1)}:host.column-curtain.show .search button{opacity:1;z-index:100}@media screen and (max-width: 40rem){:host.column-curtain span{width:90%}:host.column-curtain input{font-size:2rem;width:90%}}\n", "::ng-deep nb-layout.modal-drop .layout{position:relative;transition:transform 0.4s, opacity 0.4s;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}::ng-deep nb-layout.modal-drop.with-search .layout{opacity:0;transform:scale3d(0.9, 0.9, 1);pointer-events:none}:host.modal-drop .search{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:1050;position:fixed;top:0;left:0;width:100%;height:100vh;background:none;pointer-events:none}:host.modal-drop .search::before{content:'';position:absolute;top:0;right:0;width:100%;height:100%;opacity:0;transition:opacity 0.4s}:host.modal-drop .search button{font-size:2.5rem;position:absolute;top:3rem;display:block;opacity:0;transition:opacity 0.4s}[dir=ltr] :host.modal-drop .search button{right:3rem}[dir=rtl] :host.modal-drop .search button{left:3rem}:host.modal-drop .search form{position:relative;margin:5rem 0 2rem}:host.modal-drop .search input{font-size:6vw;width:60%;padding:0.25rem;text-align:center;opacity:0;transition:opacity 0.4s}:host.modal-drop .search span{position:relative;z-index:9;display:block;width:60%;padding:0.85rem 0;opacity:0;transform:translate3d(0, -50px, 0);transition:opacity 0.4s, transform 0.4s}:host.modal-drop .search .form-content{position:relative;z-index:10;overflow:hidden;transform:translate3d(0, -50px, 0);transition:transform 0.4s}:host.modal-drop .search .form-content::after{content:'';position:absolute;top:0;left:20%;width:60%;height:105%;opacity:0;transform-origin:50% 0}:host.modal-drop.show .search{pointer-events:auto}:host.modal-drop.show .search::before{opacity:1}:host.modal-drop.show .search button{opacity:1}:host.modal-drop.show .search .form-content{transform:translate3d(0, 0, 0);transition:none}:host.modal-drop.show .search .form-content::after{animation:scaleUpDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards}:host.modal-drop.show .search input{opacity:1;transition:opacity 0s 0.4s}:host.modal-drop.show .search span{opacity:1;transform:translate3d(0, 0, 0);transition-delay:0.4s;transition-timing-function:ease-out}@keyframes scaleUpDown{0%{opacity:1;transform:scale3d(1, 0, 1)}50%{transform:scale3d(1, 1, 1);transform-origin:50% 0;transition-timing-function:ease-out}50.1%{transform-origin:50% 100%;transition-timing-function:ease-out}100%{opacity:1;transform:scale3d(1, 0, 1);transform-origin:50% 100%;transition-timing-function:ease-out}}@media screen and (max-width: 40rem){:host.modal-drop form{margin:2rem 0}:host.modal-drop input{width:100%;left:0}}\n", "::ng-deep nb-layout.modal-half .layout{transition:transform 0.6s, opacity 0.6s;transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)}::ng-deep nb-layout.modal-half.with-search .layout{transform:scale3d(0.8, 0.8, 1);pointer-events:none}:host.modal-half .search{text-align:center;position:fixed;z-index:1050;top:0;left:0;overflow:hidden;width:100%;height:100vh;background:none;pointer-events:none}:host.modal-half .search::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 0.6s;transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)}:host.modal-half .search button{font-size:2.5rem;position:absolute;top:3rem;display:block;z-index:100;opacity:0;transform:scale3d(0.8, 0.8, 1);transition:opacity 0.6s, transform 0.6s;transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)}[dir=ltr] :host.modal-half .search button{right:3rem}[dir=rtl] :host.modal-half .search button{left:3rem}:host.modal-half .search .form-wrapper{position:absolute;display:flex;justify-content:center;align-items:center;width:100%;height:50%;transition:transform 0.6s;transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);transform:translate3d(0, -100%, 0)}:host.modal-half .search form{width:75%;margin:0 auto}:host.modal-half .search input{font-size:7vw;width:100%}:host.modal-half.show .search{pointer-events:auto}:host.modal-half.show .search::before{opacity:1}:host.modal-half.show .search button{opacity:1;transform:scale3d(1, 1, 1)}:host.modal-half.show .search .form-wrapper{transform:translate3d(0, 0, 0)}\n"]
},] }
];
NbSearchFieldComponent.propDecorators = {
type: [{ type: Input }],
placeholder: [{ type: Input }],
hint: [{ type: Input }],
show: [{ type: Input }],
close: [{ type: Output }],
search: [{ type: Output }],
searchInput: [{ type: Output }],
inputElement: [{ type: ViewChild, args: ['searchInput',] }],
showClass: [{ type: HostBinding, args: ['class.show',] }],
modalZoomin: [{ type: HostBinding, args: ['class.modal-zoomin',] }],
rotateLayout: [{ type: HostBinding, args: ['class.rotate-layout',] }],
modalMove: [{ type: HostBinding, args: ['class.modal-move',] }],
curtain: [{ type: HostBinding, args: ['class.curtain',] }],
columnCurtain: [{ type: HostBinding, args: ['class.column-curtain',] }],
modalDrop: [{ type: HostBinding, args: ['class.modal-drop',] }],
modalHalf: [{ type: HostBinding, args: ['class.modal-half',] }]
};
/**
* Beautiful full-page search control.
*
* @stacked-example(Showcase, search/search-showcase.component)
*
* Basic setup:
*
* ```ts
* <nb-search type="rotate-layout"></nb-search>
* ```
* ### Installation
*
* Import `NbSearchModule` to your feature module.
* ```ts
* @NgModule({
* imports: [
* // ...
* NbSearchModule,
* ],
* })
* export class PageModule { }
* ```
* ### Usage
*
* Several animation types are available:
* modal-zoomin, rotate-layout, modal-move, curtain, column-curtain, modal-drop, modal-half
*
* It is also possible to handle search event using `NbSearchService`:
*
* @stacked-example(Search Event, search/search-event.component)
*
* @styles
*
* search-background-color:
* search-divider-color:
* search-divider-style:
* search-divider-width:
* search-extra-background-color:
* search-text-color:
* search-text-font-family:
* search-text-font-size:
* search-text-font-weight:
* search-text-line-height:
* search-placeholder-text-color:
* search-info-text-color:
* search-info-text-font-family:
* search-info-text-font-size:
* search-info-text-font-weight:
* search-info-text-line-height:
*/
export class NbSearchComponent {
constructor(searchService, themeService, router, overlayService, changeDetector) {
this.searchService = searchService;
this.themeService = themeService;
this.router = router;
this.overlayService = overlayService;
this.changeDetector = changeDetector;
this.destroy$ = new Subject();
this.showSearchField = false;
/**
* Search input placeholder
* @type {string}
*/
this.placeholder = 'Search...';
/**
* Hint showing under the input field to improve user experience
*
* @type {string}
*/
this.hint = 'Hit enter to search';
}
ngOnInit() {
this.router.events
.pipe(filter(event => event instanceof NavigationEnd), takeUntil(this.destroy$))
.subscribe(() => this.hideSearch());
this.searchService.onSearchActivate()
.pipe(filter(data => !this.tag || data.tag === this.tag), takeUntil(this.destroy$))
.subscribe(() => this.openSearch());
this.searchService.onSearchDeactivate()
.pipe(filter(data => !this.tag || data.tag === this.tag), takeUntil(this.destroy$))
.subscribe(() => this.hideSearch());
}
ngOnDestroy() {
if (this.overlayRef && this.overlayRef.hasAttached()) {
this.removeLayoutClasses();
this.overlayRef.detach();
}
this.destroy$.next();
this.destroy$.complete();
}
openSearch() {
if (!this.overlayRef) {
this.overlayRef = this.overlayService.create();
this.overlayRef.attach(this.searchFieldPortal);
}
this.themeService.appendLayoutClass(this.type);
observableOf(null).pipe(delay(0)).subscribe(() => {
this.themeService.appendLayoutClass('with-search');
this.showSearchField = true;
this.changeDetector.detectChanges();
});
}
hideSearch() {
this.removeLayoutClasses();
this.showSearchField = false;
this.changeDetector.detectChanges();
this.searchButton.nativeElement.focus();
}
search(term) {
this.searchService.submitSearch(term, this.tag);
this.hideSearch();
}
emitInput(term) {
this.searchService.searchInput(term, this.tag);
}
emitActivate() {
this.searchService.activateSearch(this.type, this.tag);
}
emitDeactivate() {
this.searchService.deactivateSearch(this.type, this.tag);
}
removeLayoutClasses() {
this.themeService.removeLayoutClass('with-search');
observableOf(null).pipe(delay(500)).subscribe(() => {
this.themeService.removeLayoutClass(this.type);
});
}
}
NbSearchComponent.decorators = [
{ type: Component, args: [{
selector: 'nb-search',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<button #searchButton class="start-search" (click)="emitActivate()" nbButton ghost>
<nb-icon icon="search-outline" pack="nebular-essentials"></nb-icon>
</button>
<nb-search-field
*nbPortal
[show]="showSearchField"
[type]="type"
[placeholder]="placeholder"
[hint]="hint"
(search)="search($event)"
(searchInput)="emitInput($event)"
(close)="emitDeactivate()">
</nb-search-field>
`,
styles: [":host button{font-size:2rem;margin:0 auto;padding:0;cursor:pointer;border:none;background:none}:host button:focus{box-shadow:none;outline:none}::ng-deep nb-layout.with-search .scrollable-container{position:relative;z-index:0}\n"]
},] }
];
NbSearchComponent.ctorParameters = () => [
{ type: NbSearchService },
{ type: NbThemeService },
{ type: Router },
{ type: NbOverlayService },
{ type: ChangeDetectorRef }
];
NbSearchComponent.propDecorators = {
tag: [{ type: Input }],
placeholder: [{ type: Input }],
hint: [{ type: Input }],
type: [{ type: Input }],
searchFieldPortal: [{ type: ViewChild, args: [NbPortalDirective,] }],
searchButton: [{ type: ViewChild, args: ['searchButton', { read: ElementRef },] }]
};
//# sourceMappingURL=search.component.js.map