blumjs
Version:
A UI Package for Angular2
183 lines (182 loc) • 10.6 kB
JavaScript
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require("@angular/core");
var option_component_1 = require("./option.component");
var SelectComponent = (function () {
function SelectComponent(elementRef) {
this.elementRef = elementRef;
this.searchable = true;
this.searchTerm = "";
this.disabled = false;
this.hidden = false;
this.multiple = false;
this.noResultMsg = "نتیجهای یافت نشد.";
this.modelChange = new core_1.EventEmitter();
this.change = new core_1.EventEmitter();
this.searchTermChange = new core_1.EventEmitter();
this.rtl = true;
this.isOpen = false;
this.selectedOptions = [];
this.noResult = false;
this.tempOptions = [];
}
SelectComponent.prototype.ngAfterContentInit = function () {
var _this = this;
console.time("Select Init");
this.listenToOptionEvents();
this.options.forEach(function (option) {
_this.tempOptions.push({ text: option.getText(), option: option });
option = Object.assign({ text: option.getText() }, option);
if (option.value == _this.model)
_this.selectedOptions.push(option);
});
console.timeEnd("Select Init");
};
SelectComponent.prototype.modelChanged = function () {
console.time("Model Changed");
this.model = this.selectedOptions[0].value;
this.searchTerm = '';
this.searchTermChanged();
this.modelChange.emit(this.model);
console.timeEnd("Model Changed");
};
SelectComponent.prototype.searchTermChanged = function () {
var _this = this;
console.time("Searching");
if (this.searchTerm === '') {
this.options.forEach(function (option) {
option.hidden = false;
});
this.noResult = false;
return;
}
this.noResult = true;
this.tempOptions.forEach(function (tempOption) {
tempOption.option.hidden = tempOption.text.toLowerCase().indexOf(_this.searchTerm.toLowerCase()) <= -1;
if (!tempOption.option.hidden)
_this.noResult = false;
});
this.searchTermChange.emit(this.searchTerm);
console.timeEnd("Searching");
};
SelectComponent.prototype.changed = function () {
this.change.emit(this.model);
};
SelectComponent.prototype.toggle = function () {
this.isOpen ? this.close() : this.open();
};
SelectComponent.prototype.open = function () {
console.time("Opening");
if (this.disabled)
return;
this.isOpen = true;
console.timeEnd("Opening");
};
SelectComponent.prototype.close = function () {
this.searchTerm = "";
this.isOpen = false;
};
SelectComponent.prototype.listenToOptionEvents = function () {
var _this = this;
this.options.forEach(function (option) {
var sub = option.onSelect.subscribe(function (event) {
console.time("Option Clicked");
if (_this.multiple) {
var found = false;
for (var i = 0; i < _this.selectedOptions.length; i++) {
if (_this.selectedOptions[i] == Object.assign({ text: event.getText() }, event)) {
_this.selectedOptions[i] = Object.assign({ text: event.getText() }, event);
found = true;
}
}
if (!found)
_this.selectedOptions.push(Object.assign({ text: event.getText() }, event));
}
else {
_this.selectedOptions[0] = Object.assign({ text: event.getText() }, event);
}
console.timeEnd("Option Clicked");
_this.modelChanged();
_this.changed();
_this.close();
});
});
};
SelectComponent.prototype.onClick = function (event, targetElement) {
if (!targetElement) {
return;
}
if (!this.elementRef.nativeElement.contains(targetElement)) {
this.close();
}
};
;
return SelectComponent;
}());
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], SelectComponent.prototype, "model", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Boolean)
], SelectComponent.prototype, "searchable", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", String)
], SelectComponent.prototype, "searchTerm", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Boolean)
], SelectComponent.prototype, "disabled", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Boolean)
], SelectComponent.prototype, "hidden", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Boolean)
], SelectComponent.prototype, "multiple", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", String)
], SelectComponent.prototype, "noResultMsg", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], SelectComponent.prototype, "modelChange", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], SelectComponent.prototype, "change", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], SelectComponent.prototype, "searchTermChange", void 0);
__decorate([
core_1.ContentChildren(option_component_1.OptionComponent),
__metadata("design:type", core_1.QueryList)
], SelectComponent.prototype, "options", void 0);
__decorate([
core_1.HostListener('document:click', ['$event', '$event.target']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [MouseEvent, HTMLElement]),
__metadata("design:returntype", void 0)
], SelectComponent.prototype, "onClick", null);
SelectComponent = __decorate([
core_1.Component({
selector: 'bl-select',
template: "\n <div class=\"dropdown\" *ngIf=\"!hidden\" #element>\n <button *ngIf=\"!multiple\" (click)=\"toggle()\" [ngClass]=\"rtl ? 'rtl-button' : 'ltr-button'\" [disabled]=\"disabled\">\n <span *ngIf=\"selectedOptions[0]\">{{selectedOptions[0].text}}</span>\n <i class=\"fa\" [ngClass]=\"isOpen ? 'fa-chevron-up': 'fa-chevron-down'\"></i>\n </button>\n \n <div *ngIf=\"multiple\" class=\"multiple-selection\" (click)=\"toggle()\">\n <span class=\"tag\" *ngFor=\"let selectedOption of selectedOptions\">{{selectedOption.text}}</span>\n <i class=\"fa\" [ngClass]=\"isOpen ? 'fa-chevron-up': 'fa-chevron-down'\"></i>\n </div>\n \n <div \n [hidden]=\"!isOpen\" \n class=\"dropdown-content\" \n [style.width]=\"element.clientWidth + 'px'\"\n >\n <input *ngIf=\"searchable\" [(ngModel)]=\"searchTerm\" (keyup)=\"searchTermChanged()\">\n <div class=\"list\">\n <ng-content *ngIf=\"options\"></ng-content>\n <span class=\"no-result\" *ngIf=\"!options || noResult\">{{noResultMsg}}</span>\n </div> \n </div>\n </div>\n ",
styles: ["\n .rtl-button {\n text-align: right;\n }\n \n .rtl-button > i {\n float: left;\n }\n \n .ltr-button {\n text-align: left;\n }\n \n .ltr-button > i {\n float: right;\n }\n \n .dropdown {\n position: relative;\n display: inline-block;\n width: inherit;\n font-size: 0.9em;\n }\n \n .dropdown>button {\n border: 1px solid rgb(34, 116, 71);\n background-color: white;\n height: 33px;\n width: 100%;\n }\n \n .dropdown-content>input {\n display: inline-block;\n width: 95%;\n height: 23px;\n align-self: center;\n margin: 5px;\n }\n \n .dropdown>button:hover {\n cursor: pointer;\n }\n \n .dropdown>button[disabled]:hover {\n cursor: not-allowed;\n }\n \n .dropdown>button:focus, .dropdown-content>input {\n outline: none;\n }\n \n .dropdown-content {\n position: fixed;\n background-color: white;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 8888;\n overflow: hidden;\n }\n \n .list {\n max-height: 150px;\n overflow-y: auto;\n }\n \n .no-result {\n display: block;\n }\n \n .tag {\n background-color: lightgrey;\n border-radius: 3px;\n padding: 3px;\n margin: 1px;\n }\n \n .multiple-selection {\n border: 1px solid rgb(34, 116, 71);\n cursor: pointer;\n width: 100%;\n padding: 5px;\n }\n "]
}),
__metadata("design:paramtypes", [core_1.ElementRef])
], SelectComponent);
exports.SelectComponent = SelectComponent;