@blackbaud/skyux
Version:
SKY UX built on Angular 2
125 lines • 6.96 kB
JavaScript
import { Component, ElementRef, Input, Renderer } from '@angular/core';
import { SkyDropdownAdapterService } from './dropdown-adapter.service';
import { SkyWindowRefService } from '../window';
import { SkyResources } from '../resources';
var SkyDropdownComponent = (function () {
function SkyDropdownComponent(renderer, elRef, adapterService, windowObj) {
var _this = this;
this.renderer = renderer;
this.elRef = elRef;
this.adapterService = adapterService;
this.windowObj = windowObj;
this.alignment = 'left';
this.open = false;
this.opening = false;
this.adapterService.dropdownClose.subscribe(function () {
_this.open = false;
});
}
Object.defineProperty(SkyDropdownComponent.prototype, "buttonType", {
get: function () {
return this._buttonType || 'select';
},
set: function (value) {
this._buttonType = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyDropdownComponent.prototype, "trigger", {
get: function () {
return this._trigger || 'click';
},
set: function (value) {
this._trigger = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyDropdownComponent.prototype, "label", {
get: function () {
return this._label || SkyResources.getString('context_menu_default_label');
},
set: function (value) {
this._label = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyDropdownComponent.prototype, "buttonStyle", {
get: function () {
return this._buttonStyle || 'default';
},
set: function (value) {
this._buttonStyle = value;
},
enumerable: true,
configurable: true
});
SkyDropdownComponent.prototype.click = function () {
this.openMenu();
};
SkyDropdownComponent.prototype.resetDropdownPosition = function () {
this.adapterService.setMenuLocation(this.elRef, this.renderer, this.windowObj.getWindow(), this.alignment);
};
SkyDropdownComponent.prototype.windowClick = function () {
if (this.opening) {
this.opening = false;
this.open = true;
}
else {
this.adapterService.hideDropdown(this.elRef, this.renderer, this.windowObj.getWindow());
}
};
SkyDropdownComponent.prototype.mouseEnter = function () {
if (this.trigger === 'hover') {
this.openMenu();
this.opening = false;
this.open = true;
}
};
SkyDropdownComponent.prototype.mouseLeave = function () {
if (this.trigger === 'hover') {
this.adapterService.hideDropdown(this.elRef, this.renderer, this.windowObj.getWindow());
}
};
SkyDropdownComponent.prototype.ngOnDestroy = function () {
this.adapterService.hideDropdown(this.elRef, this.renderer, this.windowObj.getWindow());
};
SkyDropdownComponent.prototype.openMenu = function () {
if (!this.open) {
this.adapterService.showDropdown(this.elRef, this.renderer, this.windowObj.getWindow(), this.alignment);
// Notify the window click handler that the menu was just opened so it doesn't try to
// close it.
this.opening = true;
}
};
return SkyDropdownComponent;
}());
export { SkyDropdownComponent };
SkyDropdownComponent.decorators = [
{ type: Component, args: [{
selector: 'sky-dropdown',
template: "<div class=\"sky-dropdown\" (mouseenter)=\"mouseEnter()\" (mouseleave)=\"mouseLeave()\">\n <button\n type=\"button\"\n (click)=\"click()\"\n class=\"sky-btn sky-dropdown-button\"\n [ngClass]=\"[\n 'sky-dropdown-button-type-' + buttonType,\n 'sky-btn-' + buttonStyle\n ]\"\n (document:click)=\"windowClick()\"\n [attr.aria-label]=\"label\"\n [attr.title]=\"title\"\n >\n <div [ngSwitch]=\"buttonType\">\n <ng-template ngSwitchCase=\"context-menu\">\n <i class=\"fa fa-ellipsis-h\"></i>\n </ng-template>\n\n <ng-template ngSwitchDefault>\n <div class=\"sky-dropdown-button-container\" *ngIf=\"buttonType === 'select' || buttonType === 'tab' || !buttonType\">\n <div class=\"sky-dropdown-button-content-container\">\n <ng-content select=\"sky-dropdown-button\"></ng-content>\n </div>\n <div class=\"sky-dropdown-button-icon-container\">\n <i class=\"fa fa-caret-down sky-dropdown-caret\"></i>\n </div>\n </div>\n <div\n *ngIf=\"buttonType !== 'select' && buttonType !== 'tab' && buttonType\">\n <i\n class=\"fa fa-lg\"\n [ngClass]=\"['fa-' + buttonType]\"\n ></i>\n </div>\n\n </ng-template>\n </div>\n </button>\n <div class=\"sky-dropdown-menu\">\n <ng-content select=\"sky-dropdown-menu\"></ng-content>\n </div>\n</div>\n",
styles: [".sky-dropdown-button-type-tab{background-color:transparent;border:none;border-radius:4px 4px 0 0;color:#686c73;cursor:pointer;display:inline-block;font-weight:600;line-height:1.8;padding:8px 16px;background-color:#007ca6;color:#fff;max-width:100%}.sky-dropdown-button-type-tab:hover,.sky-dropdown-button-type-tab:focus{background-color:#eeeeef;color:#282b31;text-decoration:none}.sky-dropdown-button-type-tab:hover,.sky-dropdown-button-type-tab:focus{background-color:#007ca6;color:#fff}.sky-dropdown-button-type-context-menu{border-radius:50%;padding-bottom:3px;padding-left:6px;padding-right:6px;padding-top:2px}.sky-dropdown-caret{margin-left:10px}.sky-dropdown-menu{background-color:#fff;display:none;position:fixed;box-shadow:0px 0px 5px 0 rgba(0,0,0,0.3);z-index:1000}.sky-dropdown-menu.sky-dropdown-open{display:block}.sky-dropdown-button-container{display:flex}.sky-dropdown-button-content-container{flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.sky-dropdown-button-icon-container{flex-grow:1}.sky-dropdown-menu /deep/ button{overflow:hidden;text-overflow:ellipsis}\n"],
providers: [
SkyDropdownAdapterService
]
},] },
];
/** @nocollapse */
SkyDropdownComponent.ctorParameters = function () { return [
{ type: Renderer, },
{ type: ElementRef, },
{ type: SkyDropdownAdapterService, },
{ type: SkyWindowRefService, },
]; };
SkyDropdownComponent.propDecorators = {
'buttonType': [{ type: Input },],
'trigger': [{ type: Input },],
'label': [{ type: Input },],
'title': [{ type: Input },],
'alignment': [{ type: Input },],
'buttonStyle': [{ type: Input },],
};
//# sourceMappingURL=dropdown.component.js.map