ng2-materialize/dist/select/select-container/select-container.component.js

An Angular 2+ wrap around Materialize library

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var forms_1 = require("@angular/forms");
var validation_component_1 = require("../../validation/validation.component");
var select_directive_1 = require("../select.directive");
var MzSelectContainerComponent = (function () {
    function MzSelectContainerComponent() {
    }
    MzSelectContainerComponent.prototype.ngAfterViewInit = function () {
        this.initControlSubscription();
        this.initSelectSubscription();
    };
    MzSelectContainerComponent.prototype.ngOnDestroy = function () {
        this.removeControlSubscription();
        this.removeSelectSubscription();
    };
    MzSelectContainerComponent.prototype.initControlSubscription = function () {
        var _this = this;
        if (this.ngControl) {
            this.mzSelectDirective.disabled = this.ngControl.control.disabled;
            this.statusChangesSubscription = this.ngControl.control.statusChanges.subscribe(function (status) {
                // to handle enabling/disabling formControl
                var disabled = status === 'DISABLED';
                if (disabled !== _this.mzSelectDirective.disabled) {
                    _this.mzSelectDirective.disabled = disabled;
                    _this.mzSelectDirective.handleDisabled();
                }
            });
            this.selectValueSubscription = this.ngControl.valueChanges.subscribe(function (value) {
                // to synchronize input and select when value changes programmatically
                var isDropdownOpen = _this.mzSelectDirective.inputElement.hasClass('active');
                var inputValue = _this.mzSelectDirective.inputElement.val();
                var options = _this.mzSelectDirective.selectElement.children('option');
                var selectedOptions = options.filter('option:selected').toArray();
                var disabledOptions = options.filter(':disabled').toArray();
                var selectedOptionText = selectedOptions.length === 0
                    ? disabledOptions.map(function (option) { return option.textContent; })[0]
                    : selectedOptions.map(function (option) { return option.textContent; }).join(', ');
                if (inputValue !== selectedOptionText && !isDropdownOpen) {
                    _this.mzSelectDirective.updateMaterialSelect();
                }
            });
        }
    };
    MzSelectContainerComponent.prototype.initSelectSubscription = function () {
        var _this = this;
        if (this.mzSelectDirective) {
            this.mzSelectDirective.onUpdate
                .subscribe(function () { return _this.registerOnBlur(); })
                .next();
        }
    };
    MzSelectContainerComponent.prototype.registerOnBlur = function () {
        var _this = this;
        this.mzSelectDirective.inputElement.on('blur', function () {
            if (_this.ngControl) {
                _this.ngControl.control.markAsTouched();
            }
            if (_this.mzValidationComponent) {
                _this.mzValidationComponent.setValidationState();
            }
        });
    };
    MzSelectContainerComponent.prototype.removeControlSubscription = function () {
        if (this.mzSelectDirective) {
            this.mzSelectDirective.onUpdate.unsubscribe();
            this.mzSelectDirective.inputElement.off();
        }
    };
    MzSelectContainerComponent.prototype.removeSelectSubscription = function () {
        if (this.statusChangesSubscription) {
            this.statusChangesSubscription.unsubscribe();
        }
        if (this.selectValueSubscription) {
            this.selectValueSubscription.unsubscribe();
        }
    };
    return MzSelectContainerComponent;
}());
MzSelectContainerComponent.decorators = [
    { type: core_1.Component, args: [{
                selector: 'mz-select-container',
                template: "<div class=\"input-field\" [class.inline]=\"inline\"><ng-content></ng-content></div>",
                styles: [".input-field:not(.inline){display:block}/deep/ .input-field .dropdown-content [type=checkbox]+label{top:-11px}"],
            },] },
];
/** @nocollapse */
MzSelectContainerComponent.ctorParameters = function () { return []; };
MzSelectContainerComponent.propDecorators = {
    'inline': [{ type: core_1.Input },],
    'mzSelectDirective': [{ type: core_1.ContentChild, args: [select_directive_1.MzSelectDirective,] },],
    'mzValidationComponent': [{ type: core_1.ContentChild, args: [validation_component_1.MzValidationComponent,] },],
    'ngControl': [{ type: core_1.ContentChild, args: [forms_1.NgControl,] },],
};
exports.MzSelectContainerComponent = MzSelectContainerComponent;