@blackbaud/skyux
Version:
SKY UX built on Angular 2
214 lines • 13.6 kB
JavaScript
import { Component, ElementRef, Output, Input, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { SkySearchAdapterService } from './search-adapter.service';
import { SkyMediaBreakpoints, SkyMediaQueryService } from '../media-queries';
import { SkyResourcesService } from '../resources';
import { style, state, trigger, transition, animate } from '@angular/animations';
var INPUT_SHOWN_STATE = 'inputShown';
var INPUT_HIDDEN_STATE = 'inputHidden';
var EXPAND_MODE_RESPONSIVE = 'responsive';
var EXPAND_MODE_FIT = 'fit';
var EXPAND_MODE_NONE = 'none';
var SkySearchComponent = (function () {
function SkySearchComponent(mediaQueryService, elRef, searchAdapter, resources, changeRef) {
this.mediaQueryService = mediaQueryService;
this.elRef = elRef;
this.searchAdapter = searchAdapter;
this.resources = resources;
this.changeRef = changeRef;
this.searchApply = new EventEmitter();
this.searchChange = new EventEmitter();
this.expandMode = EXPAND_MODE_RESPONSIVE;
this.isFullWidth = false;
this.isCollapsible = true;
this.inputAnimate = INPUT_SHOWN_STATE;
this.searchButtonShown = false;
this.mobileSearchShown = false;
this.dismissButtonShown = false;
this.clearButtonShown = false;
this.searchInputFocused = false;
}
Object.defineProperty(SkySearchComponent.prototype, "placeholderText", {
get: function () {
if (this._placeholderText === undefined) {
return this.resources.getString('search_placeholder');
}
else {
return this._placeholderText;
}
},
set: function (value) {
this._placeholderText = value;
},
enumerable: true,
configurable: true
});
SkySearchComponent.prototype.ngOnInit = function () {
var _this = this;
if (this.searchShouldCollapse()) {
this.breakpointSubscription = this.mediaQueryService.subscribe(function (args) {
_this.mediaQueryCallback(args);
_this.changeRef.detectChanges();
});
}
};
SkySearchComponent.prototype.ngOnChanges = function (changes) {
if (this.expandModeBindingChanged(changes)) {
switch (this.expandMode) {
case EXPAND_MODE_NONE:
this.isCollapsible = false;
this.isFullWidth = false;
break;
case EXPAND_MODE_FIT:
this.isCollapsible = false;
this.isFullWidth = true;
break;
default:
this.isCollapsible = true;
this.isFullWidth = false;
break;
}
}
if (this.searchBindingChanged(changes)) {
this.clearButtonShown = this.searchText && this.searchText !== '';
if (this.shouldOpenInput()) {
this.inputAnimate = INPUT_SHOWN_STATE;
}
}
this.changeRef.detectChanges();
};
SkySearchComponent.prototype.inputFocused = function (isFocused) {
this.searchInputFocused = isFocused;
};
SkySearchComponent.prototype.clearSearchText = function () {
this.searchText = '';
this.clearButtonShown = false;
this.searchAdapter.focusInput(this.elRef);
this.searchApply.emit(this.searchText);
};
SkySearchComponent.prototype.enterPress = function (event, searchText) {
if (event.which === 13) {
this.applySearchText(searchText);
}
};
SkySearchComponent.prototype.applySearchText = function (searchText) {
if (searchText !== this.searchText) {
this.searchText = searchText;
}
this.clearButtonShown = searchText && searchText !== '';
if (searchText && searchText !== '') {
this.searchAdapter.selectInput(this.elRef);
}
this.searchApply.emit(searchText);
};
SkySearchComponent.prototype.searchTextChanged = function (searchText) {
this.searchChange.emit(searchText);
};
SkySearchComponent.prototype.toggleSearchInput = function (showInput) {
if (this.searchShouldCollapse()) {
if (showInput) {
this.inputAnimate = INPUT_SHOWN_STATE;
}
else {
this.inputAnimate = INPUT_HIDDEN_STATE;
}
}
};
SkySearchComponent.prototype.inputAnimationStart = function (event) {
if (this.searchShouldCollapse()) {
this.searchAdapter.startInputAnimation(this.elRef);
if (event.toState === INPUT_SHOWN_STATE
&& this.mediaQueryService.current === SkyMediaBreakpoints.xs) {
this.mobileSearchShown = true;
this.searchButtonShown = false;
}
}
};
SkySearchComponent.prototype.inputAnimationEnd = function (event) {
if (this.searchShouldCollapse()) {
this.searchAdapter.endInputAnimation(this.elRef);
this.searchButtonShown = event.toState === INPUT_HIDDEN_STATE
&& this.mediaQueryService.current === SkyMediaBreakpoints.xs;
if ((event.toState === INPUT_HIDDEN_STATE
&& this.mediaQueryService.current === SkyMediaBreakpoints.xs)
|| this.mediaQueryService.current !== SkyMediaBreakpoints.xs) {
this.mobileSearchShown = false;
}
}
};
SkySearchComponent.prototype.ngOnDestroy = function () {
if (this.breakpointSubscription) {
this.breakpointSubscription.unsubscribe();
}
};
SkySearchComponent.prototype.searchBindingChanged = function (changes) {
return changes['searchText'] &&
changes['searchText'].previousValue !== changes['searchText'].currentValue;
};
SkySearchComponent.prototype.expandModeBindingChanged = function (changes) {
return changes['expandMode'] &&
changes['expandMode'].previousValue !== changes['expandMode'].currentValue;
};
SkySearchComponent.prototype.shouldOpenInput = function () {
return this.searchText !== '' &&
this.mediaQueryService.current === SkyMediaBreakpoints.xs && this.searchShouldCollapse();
};
SkySearchComponent.prototype.mediaQueryCallback = function (args) {
if (this.searchShouldCollapse()) {
if (args === SkyMediaBreakpoints.xs) {
this.inputAnimate = INPUT_HIDDEN_STATE;
}
else if (this.inputAnimate !== INPUT_SHOWN_STATE) {
this.inputAnimate = INPUT_SHOWN_STATE;
}
else {
this.mobileSearchShown = false;
}
}
this.changeRef.markForCheck();
};
SkySearchComponent.prototype.searchShouldCollapse = function () {
return (this.isCollapsible || this.isCollapsible === undefined) && this.isFullWidth !== true;
};
return SkySearchComponent;
}());
export { SkySearchComponent };
SkySearchComponent.decorators = [
{ type: Component, args: [{
selector: 'sky-search',
template: "<div class=\"sky-search-container\">\n\n <div\n class=\"sky-search-button-container\">\n <button\n type=\"button\"\n [ngClass]=\"{'sky-search-btn-open-applied': clearButtonShown}\"\n [hidden]=\"!searchButtonShown\"\n class=\"sky-btn sky-btn-default sky-search-btn-open\"\n [attr.title]=\"'search_open' | skyResources\"\n (click)=\"toggleSearchInput(true)\">\n <i class=\"fa fa-search fa-lg\"></i>\n </button>\n </div>\n <div\n [hidden]=\"searchButtonShown\"\n [ngClass]=\"{'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth }\"\n class=\"sky-search-dismiss-container\">\n <div class=\"sky-search-item-input\">\n <div\n [ngClass]=\"{'sky-search-input-focused': searchInputFocused}\"\n [@inputState]=\"inputAnimate\"\n (@inputState.start)=\"inputAnimationStart($event)\"\n (@inputState.done)=\"inputAnimationEnd($event)\"\n class=\"sky-search-input-container sky-input-group\">\n <input\n type=\"text\"\n class=\"sky-form-control sky-search-input\"\n [(ngModel)]=\"searchText\"\n (change)=\"searchTextChanged(searchText)\"\n (keyup)=\"enterPress($event, searchText)\"\n (focus)=\"inputFocused(true)\"\n (blur)=\"inputFocused(false)\"\n [attr.aria-label]=\"'search_label' | skyResources\"\n [attr.placeholder]=\"placeholderText\" />\n <span\n class=\"sky-input-group-btn sky-input-group-clear\"\n [hidden]=\"!clearButtonShown\"\n >\n <button\n tabindex=\"-1\"\n aria-hidden=\"true\"\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-search-btn-clear\"\n (click)=\"clearSearchText()\">\n <i class=\"fa fa-times\"></i>\n </button>\n </span>\n <span class=\"sky-input-group-btn\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-search-btn-apply\"\n (click)=\"applySearchText(searchText)\"\n [attr.aria-label]=\"'search_label' | skyResources\" >\n <i class=\"fa fa-search fa-lg\"></i>\n </button>\n </span>\n </div>\n </div>\n <div\n class=\"sky-search-item-dismiss\">\n <button\n *ngIf=\"mobileSearchShown\"\n type=\"button\"\n [attr.title]=\"'search_dismiss' | skyResources\"\n class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n (click)=\"toggleSearchInput(false)\">\n <i class=\"fa fa-chevron-circle-left fa-lg\">\n </i>\n </button>\n </div>\n </div>\n</div>\n",
styles: ["@media (min-width: 768px){.sky-search-input-container{min-width:300px}}@media (max-width: 767px){.sky-search-input,.sky-search-btn-apply,.sky-search-btn-clear{font-size:16px}}.sky-search-input{border-radius:6px;border-right:none}.sky-search-input::-ms-clear{display:none}.sky-input-group.sky-search-input-container .sky-input-group-btn .sky-btn.sky-search-btn-apply{border-left:none;border-bottom-right-radius:6px;border-top-right-radius:6px;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-input-group.sky-search-input-container .sky-input-group-btn .sky-btn.sky-search-btn-clear{border-right:none;border-left:none;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4}.sky-search-btn-dismiss,.sky-search-btn-dismiss:hover{border:1px transparent solid;background-color:transparent}.sky-search-dismiss-container{display:flex}.sky-search-item-dismiss{flex-shrink:0;display:flex}.sky-search-item-input{flex-grow:1;display:flex}@media (min-width: 768px){.sky-search-item-input{flex-shrink:0}}.sky-search-btn-clear{padding-right:6px;padding-left:18px}.sky-search-btn-apply{padding-left:6px}.sky-search-btn-apply:hover,.sky-search-btn-apply:focus,.sky-search-btn-clear:hover,.sky-search-btn-clear:focus{background-color:#fff}.sky-search-dismiss-absolute{position:absolute;background-color:#fff;top:0;left:0;bottom:0;right:0;padding:5px}.sky-search-input-container{width:100%;border:1px transparent solid}.sky-input-group.sky-search-input-container.sky-search-input-focused{border:1px solid #1f90d8;box-shadow:0 0 8px rgba(28,132,198,0.6);border-radius:6px}.sky-input-group.sky-search-input-container.sky-search-input-focused .sky-input-group-btn .sky-btn.sky-search-btn-apply{border-right:1px transparent solid;border-top:1px transparent solid;border-bottom:1px transparent solid}.sky-input-group.sky-search-input-container.sky-search-input-focused .sky-input-group-btn .sky-btn.sky-search-btn-clear{border-top:1px transparent solid;border-bottom:1px transparent solid}.sky-form-control.sky-search-input:focus{border-top:1px transparent solid;border-bottom:1px transparent solid;border-left:1px transparent solid;border-right:none;box-shadow:none;outline:none}.sky-search-btn-open-applied.sky-search-btn-open,.sky-search-btn-open-applied.sky-search-btn-open:hover{color:#71bf43;border:2px solid #71bf43;padding:5px 11px}\n"],
animations: [
trigger('inputState', [
state(INPUT_HIDDEN_STATE, style({
opacity: 0,
width: 0
})),
state(INPUT_SHOWN_STATE, style({
opacity: 1,
width: '100%'
})),
transition('* <=> *', animate('150ms'))
])
],
providers: [
SkySearchAdapterService,
SkyResourcesService
]
},] },
];
/** @nocollapse */
SkySearchComponent.ctorParameters = function () { return [
{ type: SkyMediaQueryService, },
{ type: ElementRef, },
{ type: SkySearchAdapterService, },
{ type: SkyResourcesService, },
{ type: ChangeDetectorRef, },
]; };
SkySearchComponent.propDecorators = {
'searchApply': [{ type: Output },],
'searchChange': [{ type: Output },],
'searchText': [{ type: Input },],
'expandMode': [{ type: Input },],
'placeholderText': [{ type: Input },],
};
//# sourceMappingURL=search.component.js.map