ng5-simple-select
Version:
Simple select component for Angular 5.
197 lines (190 loc) • 8.87 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms'], factory) :
(factory((global.ng = global.ng || {}, global.ng.simpleSelect = {}),global.ng.core,global.ng.common,global.ng.forms));
}(this, (function (exports,core,common,forms) { 'use strict';
var NgSimpleSelectOptionComponent = (function () {
function NgSimpleSelectOptionComponent(element) {
this.element = element;
this.highlighted = false;
}
NgSimpleSelectOptionComponent.prototype.ngOnInit = function () {
//setting value, if it's not provided
if (!this.value) {
this.value = this.element.nativeElement.innerText.trim();
}
};
NgSimpleSelectOptionComponent.prototype.setParentValue = function () {
this.parentChangeFn(this.value);
};
NgSimpleSelectOptionComponent.prototype.setParentChangeFn = function (fn) {
this.parentChangeFn = fn;
};
NgSimpleSelectOptionComponent.prototype.setHighlightedState = function (val) {
this.highlighted = val;
};
NgSimpleSelectOptionComponent.prototype.getValue = function () {
return this.value;
};
NgSimpleSelectOptionComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ng-simple-select-option',
template: "<div class=\"ng-simple-select-option\" [ngClass]=\"{'ng-simple-select-option--highlighted': highlighted}\" (click)=\"setParentValue()\"> <ng-content></ng-content> </div> ",
styles: [".ng-simple-select-option { padding: 1px 5px; cursor: default; } .ng-simple-select-option--highlighted { background-color: gainsboro; } .ng-simple-select-option:hover { background-color: #c3c3c3; } "]
},] },
];
/** @nocollapse */
NgSimpleSelectOptionComponent.ctorParameters = function () { return [
{ type: core.ElementRef, },
]; };
NgSimpleSelectOptionComponent.propDecorators = {
"value": [{ type: core.Input },],
};
return NgSimpleSelectOptionComponent;
}());
var NgSimpleSelectComponent = (function () {
function NgSimpleSelectComponent(element) {
this.element = element;
this.subscriptions = [];
this.placeholder = '';
this.change = new core.EventEmitter();
this.onChange = function (newVal) { };
this.onTouched = function () { };
}
NgSimpleSelectComponent.prototype.ngOnChanges = function () {
};
NgSimpleSelectComponent.prototype.ngOnInit = function () {
};
NgSimpleSelectComponent.prototype.ngAfterContentInit = function () {
var _this = this;
this.addParentFnToChildren(this.options);
this.setChildHighlightedState(this.options);
var s = this.options.changes.subscribe(function (query) {
_this.addParentFnToChildren(query);
_this.setChildHighlightedState(query);
});
this.subscriptions.push(s);
};
NgSimpleSelectComponent.prototype.ngOnDestroy = function () {
this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
};
NgSimpleSelectComponent.prototype.addParentFnToChildren = function (options) {
var _this = this;
options.forEach(function (child) {
child.setParentChangeFn(_this.childChanges.bind(_this));
});
};
NgSimpleSelectComponent.prototype.setChildHighlightedState = function (options) {
var val = this.value;
options.forEach(function (child) {
child.setHighlightedState(child.getValue() === val);
});
};
NgSimpleSelectComponent.prototype.toggleDropdown = function () {
if (this.disabled) {
return;
}
this.showDropdown = !this.showDropdown;
this.onTouched();
};
NgSimpleSelectComponent.prototype.childChanges = function (str) {
this.showDropdown = false;
this.value = str;
this.setChildHighlightedState(this.options);
this.change.emit(this.value);
this.onChange(this.value);
};
NgSimpleSelectComponent.prototype.onDocClick = function (ev) {
if (this.isClickOutsideComponent(ev)) {
this.showDropdown = false;
}
};
NgSimpleSelectComponent.prototype.writeValue = function (newVal) {
if (!this.disabled) {
// setting dirty state, if ngModel changed and this is not initialisation
if (this.value && this.value !== newVal) {
this.onChange(this.value);
}
this.value = newVal;
}
};
NgSimpleSelectComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
NgSimpleSelectComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
NgSimpleSelectComponent.prototype.setDisabledState = function (isDisabled) {
this.disabled = isDisabled;
};
NgSimpleSelectComponent.prototype.isClickOutsideComponent = function (ev) {
var target = ev.target;
// checking only 10 parents
var i = 0;
while (target.parentNode && i < 10) {
if (target !== this.element.nativeElement) {
target = target.parentNode;
i++;
}
else {
return false;
}
}
return true;
};
NgSimpleSelectComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ng-simple-select',
template: "<div class=\"ng-simple-select\"> <div class=\"ng-simple-select_input\" (click)=\"toggleDropdown()\"> {{displayValue ? displayValue : value}} {{!displayValue && !value ? placeholder : ''}} </div> <div class=\"ng-simple-select_dropdown\" [hidden]=\"!showDropdown\"> <ng-content></ng-content> </div> </div> ",
styles: [".ng-simple-select { position: relative; box-sizing: border-box; height: 30px; } .ng-simple-select_input { height: 30px; width: 100%; border: 1px solid darkgray; display: inline-block; position: relative; padding: 1px 20px 1px 5px; cursor: default; } .ng-simple-select_input::after { content: ''; display: inline-block; width: 0; height: 0; position: absolute; top: 12px; right: 5px; border: 5px solid transparent; border-top-color: black; } .ng-simple-select_input:hover { border-color: #909090; } .ng-simple-select_dropdown { background-color: white; z-index: 1; border: 1px solid darkgray; display: block; position: absolute; top: 30px; width: 100%; } "],
host: {
'(document:click)': 'onDocClick($event)'
},
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return NgSimpleSelectComponent; }),
multi: true
}
]
},] },
];
/** @nocollapse */
NgSimpleSelectComponent.ctorParameters = function () { return [
{ type: core.ElementRef, },
]; };
NgSimpleSelectComponent.propDecorators = {
"displayValue": [{ type: core.Input },],
"placeholder": [{ type: core.Input },],
"change": [{ type: core.Output },],
"options": [{ type: core.ContentChildren, args: [NgSimpleSelectOptionComponent,] },],
};
return NgSimpleSelectComponent;
}());
var NgSimpleSelectModule = (function () {
function NgSimpleSelectModule() {
}
NgSimpleSelectModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule
],
declarations: [
NgSimpleSelectComponent,
NgSimpleSelectOptionComponent
],
exports: [
NgSimpleSelectComponent,
NgSimpleSelectOptionComponent
]
},] },
];
/** @nocollapse */
NgSimpleSelectModule.ctorParameters = function () { return []; };
return NgSimpleSelectModule;
}());
exports.NgSimpleSelectModule = NgSimpleSelectModule;
exports.NgSimpleSelectComponent = NgSimpleSelectComponent;
exports.NgSimpleSelectOptionComponent = NgSimpleSelectOptionComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));