ng5-simple-select/ng-simple-select/ng-simple-select.component.js

Simple select component for Angular 5.

import { Component, forwardRef, ElementRef, QueryList, ContentChildren, Input, Output, EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgSimpleSelectOptionComponent } from '../ng-simple-select-option/ng-simple-select-option.component';
var NgSimpleSelectComponent = (function () {
    function NgSimpleSelectComponent(element) {
        this.element = element;
        this.subscriptions = [];
        this.placeholder = '';
        this.change = new 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: 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: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(function () { return NgSimpleSelectComponent; }),
                            multi: true
                        }
                    ]
                },] },
    ];
    /** @nocollapse */
    NgSimpleSelectComponent.ctorParameters = function () { return [
        { type: ElementRef, },
    ]; };
    NgSimpleSelectComponent.propDecorators = {
        "displayValue": [{ type: Input },],
        "placeholder": [{ type: Input },],
        "change": [{ type: Output },],
        "options": [{ type: ContentChildren, args: [NgSimpleSelectOptionComponent,] },],
    };
    return NgSimpleSelectComponent;
}());
export { NgSimpleSelectComponent };
//# sourceMappingURL=ng-simple-select.component.js.map