ng-zorro-antd/bundles/ng-zorro-antd-input.umd.js

An enterprise-class UI components based on Ant Design and Angular

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/forms'), require('ng-zorro-antd/core'), require('ng-zorro-antd/icon'), require('@angular/cdk/platform'), require('@angular/core'), require('rxjs'), require('rxjs/operators')) :
    typeof define === 'function' && define.amd ? define('ng-zorro-antd/input', ['exports', '@angular/common', '@angular/forms', 'ng-zorro-antd/core', 'ng-zorro-antd/icon', '@angular/cdk/platform', '@angular/core', 'rxjs', 'rxjs/operators'], factory) :
    (factory((global['ng-zorro-antd'] = global['ng-zorro-antd'] || {}, global['ng-zorro-antd'].input = {}),global.ng.common,global.ng.forms,global['ng-zorro-antd'].core,global['ng-zorro-antd'].icon,global.ng.cdk.platform,global.ng.core,global.rxjs,global.rxjs.operators));
}(this, (function (exports,common,forms,core,icon,platform,core$1,rxjs,operators) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    function __decorate(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;
    }
    function __metadata(metadataKey, metadataValue) {
        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
            return Reflect.metadata(metadataKey, metadataValue);
    }

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var NzInputDirective = /** @class */ (function () {
        function NzInputDirective(ngControl, renderer, elementRef) {
            this.ngControl = ngControl;
            this._disabled = false;
            this.nzSize = 'default';
            renderer.addClass(elementRef.nativeElement, 'ant-input');
        }
        Object.defineProperty(NzInputDirective.prototype, "disabled", {
            get: /**
             * @return {?}
             */ function () {
                if (this.ngControl && this.ngControl.disabled !== null) {
                    return this.ngControl.disabled;
                }
                return this._disabled;
            },
            set: /**
             * @param {?} value
             * @return {?}
             */ function (value) {
                this._disabled = core.toBoolean(value);
            },
            enumerable: true,
            configurable: true
        });
        NzInputDirective.decorators = [
            { type: core$1.Directive, args: [{
                        selector: '[nz-input]',
                        exportAs: 'nzInput',
                        host: {
                            '[class.ant-input-disabled]': 'disabled',
                            '[class.ant-input-lg]': "nzSize === 'large'",
                            '[class.ant-input-sm]': "nzSize === 'small'"
                        }
                    },] }
        ];
        /** @nocollapse */
        NzInputDirective.ctorParameters = function () {
            return [
                { type: forms.NgControl, decorators: [{ type: core$1.Optional }, { type: core$1.Self }] },
                { type: core$1.Renderer2 },
                { type: core$1.ElementRef }
            ];
        };
        NzInputDirective.propDecorators = {
            nzSize: [{ type: core$1.Input }],
            disabled: [{ type: core$1.Input }]
        };
        return NzInputDirective;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var NzInputGroupComponent = /** @class */ (function () {
        function NzInputGroupComponent() {
            this._size = 'default';
            this.nzSearch = false;
            this.nzCompact = false;
        }
        Object.defineProperty(NzInputGroupComponent.prototype, "nzSize", {
            get: /**
             * @return {?}
             */ function () {
                return this._size;
            },
            set: /**
             * @param {?} value
             * @return {?}
             */ function (value) {
                this._size = value;
                this.updateChildrenInputSize();
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NzInputGroupComponent.prototype, "isLarge", {
            get: /**
             * @return {?}
             */ function () {
                return this.nzSize === 'large';
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NzInputGroupComponent.prototype, "isSmall", {
            get: /**
             * @return {?}
             */ function () {
                return this.nzSize === 'small';
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NzInputGroupComponent.prototype, "isAffix", {
            get: /**
             * @return {?}
             */ function () {
                return !!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon);
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NzInputGroupComponent.prototype, "isAddOn", {
            get: /**
             * @return {?}
             */ function () {
                return !!(this.nzAddOnAfter || this.nzAddOnBefore || this.nzAddOnAfterIcon || this.nzAddOnBeforeIcon);
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NzInputGroupComponent.prototype, "isAffixWrapper", {
            get: /**
             * @return {?}
             */ function () {
                return this.isAffix && !this.isAddOn;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NzInputGroupComponent.prototype, "isGroup", {
            get: /**
             * @return {?}
             */ function () {
                return !this.isAffix && !this.isAddOn;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NzInputGroupComponent.prototype, "isLargeGroup", {
            get: /**
             * @return {?}
             */ function () {
                return this.isGroup && this.isLarge;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NzInputGroupComponent.prototype, "isLargeGroupWrapper", {
            get: /**
             * @return {?}
             */ function () {
                return this.isAddOn && this.isLarge;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NzInputGroupComponent.prototype, "isLargeAffix", {
            get: /**
             * @return {?}
             */ function () {
                return this.isAffixWrapper && this.isLarge;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NzInputGroupComponent.prototype, "isLargeSearch", {
            get: /**
             * @return {?}
             */ function () {
                return this.nzSearch && this.isLarge;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NzInputGroupComponent.prototype, "isSmallGroup", {
            get: /**
             * @return {?}
             */ function () {
                return this.isGroup && this.isSmall;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NzInputGroupComponent.prototype, "isSmallAffix", {
            get: /**
             * @return {?}
             */ function () {
                return this.isAffixWrapper && this.isSmall;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NzInputGroupComponent.prototype, "isSmallGroupWrapper", {
            get: /**
             * @return {?}
             */ function () {
                return this.isAddOn && this.isSmall;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NzInputGroupComponent.prototype, "isSmallSearch", {
            get: /**
             * @return {?}
             */ function () {
                return this.nzSearch && this.isSmall;
            },
            enumerable: true,
            configurable: true
        });
        /**
         * @return {?}
         */
        NzInputGroupComponent.prototype.updateChildrenInputSize = /**
         * @return {?}
         */
            function () {
                var _this = this;
                if (this.listOfNzInputDirective) {
                    this.listOfNzInputDirective.forEach(( /**
                     * @param {?} item
                     * @return {?}
                     */function (item) { return (item.nzSize = _this.nzSize); }));
                }
            };
        /**
         * @return {?}
         */
        NzInputGroupComponent.prototype.ngAfterContentInit = /**
         * @return {?}
         */
            function () {
                this.updateChildrenInputSize();
            };
        NzInputGroupComponent.decorators = [
            { type: core$1.Component, args: [{
                        selector: 'nz-input-group',
                        exportAs: 'nzInputGroup',
                        preserveWhitespaces: false,
                        encapsulation: core$1.ViewEncapsulation.None,
                        changeDetection: core$1.ChangeDetectionStrategy.OnPush,
                        template: "<span class=\"ant-input-wrapper ant-input-group\" *ngIf=\"isAddOn\">\n  <span class=\"ant-input-group-addon\" *ngIf=\"nzAddOnBefore || nzAddOnBeforeIcon\">\n    <i nz-icon [type]=\"nzAddOnBeforeIcon\" *ngIf=\"nzAddOnBeforeIcon\"></i>\n    <ng-container *nzStringTemplateOutlet=\"nzAddOnBefore\">{{ nzAddOnBefore }}</ng-container>\n  </span>\n  <ng-template [ngIf]=\"!isAffix\" *ngTemplateOutlet=\"contentTemplate\"></ng-template>\n  <span class=\"ant-input-affix-wrapper\" [class.ant-input-affix-wrapper-sm]=\"isSmall\" [class.ant-input-affix-wrapper-lg]=\"isLarge\" *ngIf=\"isAffix\">\n    <ng-template *ngTemplateOutlet=\"affixTemplate\"></ng-template>\n  </span>\n  <span class=\"ant-input-group-addon\" *ngIf=\"nzAddOnAfter || nzAddOnAfterIcon\">\n    <i nz-icon [type]=\"nzAddOnAfterIcon\" *ngIf=\"nzAddOnAfterIcon\"></i>\n    <ng-container *nzStringTemplateOutlet=\"nzAddOnAfter\">{{ nzAddOnAfter }}</ng-container>\n  </span>\n</span>\n<ng-container *ngIf=\"isAffix && !isAddOn\">\n  <ng-template *ngTemplateOutlet=\"affixTemplate\"></ng-template>\n</ng-container>\n<ng-template #affixTemplate>\n  <span class=\"ant-input-prefix\" *ngIf=\"nzPrefix || nzPrefixIcon\">\n    <!-- TODO: should have a class to set its color, cc: antd-->\n    <i nz-icon [type]=\"nzPrefixIcon\" *ngIf=\"nzPrefixIcon\" style=\"color: rgba(0, 0, 0, 0.25)\"></i>\n    <ng-container *nzStringTemplateOutlet=\"nzPrefix\">{{ nzPrefix }}</ng-container>\n  </span>\n  <ng-template *ngTemplateOutlet=\"contentTemplate\"></ng-template>\n  <span class=\"ant-input-suffix\" *ngIf=\"nzSuffix || nzSuffixIcon\">\n    <i nz-icon [type]=\"nzSuffixIcon\" *ngIf=\"nzSuffixIcon\"></i>\n    <ng-container *nzStringTemplateOutlet=\"nzSuffix\">{{ nzSuffix }}</ng-container>\n  </span>\n</ng-template>\n<ng-template [ngIf]=\"isGroup\" *ngTemplateOutlet=\"contentTemplate\"></ng-template>\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>",
                        host: {
                            '[class.ant-input-group-compact]': 'nzCompact',
                            '[class.ant-input-search-enter-button]': 'nzSearch',
                            '[class.ant-input-search]': 'nzSearch',
                            '[class.ant-input-search-sm]': 'isSmallSearch',
                            '[class.ant-input-affix-wrapper]': 'isAffixWrapper',
                            '[class.ant-input-group-wrapper]': 'isAddOn',
                            '[class.ant-input-group]': 'isGroup',
                            '[class.ant-input-group-lg]': 'isLargeGroup',
                            '[class.ant-input-group-wrapper-lg]': 'isLargeGroupWrapper',
                            '[class.ant-input-affix-wrapper-lg]': 'isLargeAffix',
                            '[class.ant-input-search-lg]': 'isLargeSearch',
                            '[class.ant-input-group-sm]': 'isSmallGroup',
                            '[class.ant-input-affix-wrapper-sm]': 'isSmallAffix',
                            '[class.ant-input-group-wrapper-sm]': 'isSmallGroupWrapper'
                        }
                    }] }
        ];
        NzInputGroupComponent.propDecorators = {
            listOfNzInputDirective: [{ type: core$1.ContentChildren, args: [NzInputDirective,] }],
            nzAddOnBeforeIcon: [{ type: core$1.Input }],
            nzAddOnAfterIcon: [{ type: core$1.Input }],
            nzPrefixIcon: [{ type: core$1.Input }],
            nzSuffixIcon: [{ type: core$1.Input }],
            nzAddOnBefore: [{ type: core$1.Input }],
            nzAddOnAfter: [{ type: core$1.Input }],
            nzPrefix: [{ type: core$1.Input }],
            nzSuffix: [{ type: core$1.Input }],
            nzSearch: [{ type: core$1.Input }],
            nzCompact: [{ type: core$1.Input }],
            nzSize: [{ type: core$1.Input }]
        };
        __decorate([
            core.InputBoolean(),
            __metadata("design:type", Object)
        ], NzInputGroupComponent.prototype, "nzSearch", void 0);
        __decorate([
            core.InputBoolean(),
            __metadata("design:type", Object)
        ], NzInputGroupComponent.prototype, "nzCompact", void 0);
        return NzInputGroupComponent;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /**
     * @param {?} value
     * @return {?}
     */
    function isAutoSizeType(value) {
        return typeof value !== 'string' && typeof value !== 'boolean' && (!!value.maxRows || !!value.minRows);
    }
    var NzAutosizeDirective = /** @class */ (function () {
        function NzAutosizeDirective(elementRef, ngZone, platform$$1) {
            this.elementRef = elementRef;
            this.ngZone = ngZone;
            this.platform = platform$$1;
            this.autosize = false;
            this.el = this.elementRef.nativeElement;
            this.destroy$ = new rxjs.Subject();
            this.inputGap = 10;
        }
        Object.defineProperty(NzAutosizeDirective.prototype, "nzAutosize", {
            get: /**
             * @return {?}
             */ function () {
                return this.autosize;
            },
            set: /**
             * @param {?} value
             * @return {?}
             */ function (value) {
                if (typeof value === 'string') {
                    this.autosize = true;
                }
                else if (isAutoSizeType(value)) {
                    this.autosize = value;
                    this.minRows = value.minRows;
                    this.maxRows = value.maxRows;
                    this.setMaxHeight();
                    this.setMinHeight();
                }
            },
            enumerable: true,
            configurable: true
        });
        /**
         * @param {?=} force
         * @return {?}
         */
        NzAutosizeDirective.prototype.resizeToFitContent = /**
         * @param {?=} force
         * @return {?}
         */
            function (force) {
                var _this = this;
                if (force === void 0) {
                    force = false;
                }
                this.cacheTextareaLineHeight();
                // If we haven't determined the line-height yet, we know we're still hidden and there's no point
                // in checking the height of the textarea.
                if (!this.cachedLineHeight) {
                    return;
                }
                /** @type {?} */
                var textarea = ( /** @type {?} */(this.el));
                /** @type {?} */
                var value = textarea.value;
                // Only resize if the value or minRows have changed since these calculations can be expensive.
                if (!force && this.minRows === this.previousMinRows && value === this.previousValue) {
                    return;
                }
                /** @type {?} */
                var placeholderText = textarea.placeholder;
                // Reset the textarea height to auto in order to shrink back to its default size.
                // Also temporarily force overflow:hidden, so scroll bars do not interfere with calculations.
                // Long placeholders that are wider than the textarea width may lead to a bigger scrollHeight
                // value. To ensure that the scrollHeight is not bigger than the content, the placeholders
                // need to be removed temporarily.
                textarea.classList.add('cdk-textarea-autosize-measuring');
                textarea.placeholder = '';
                /** @type {?} */
                var height = Math.round((textarea.scrollHeight - this.inputGap) / this.cachedLineHeight) * this.cachedLineHeight +
                    this.inputGap;
                // Use the scrollHeight to know how large the textarea *would* be if fit its entire value.
                textarea.style.height = height + "px";
                textarea.classList.remove('cdk-textarea-autosize-measuring');
                textarea.placeholder = placeholderText;
                // On Firefox resizing the textarea will prevent it from scrolling to the caret position.
                // We need to re-set the selection in order for it to scroll to the proper position.
                if (typeof requestAnimationFrame !== 'undefined') {
                    this.ngZone.runOutsideAngular(( /**
                     * @return {?}
                     */function () {
                        return requestAnimationFrame(( /**
                         * @return {?}
                         */function () {
                            var selectionStart = textarea.selectionStart, selectionEnd = textarea.selectionEnd;
                            // IE will throw an "Unspecified error" if we try to set the selection range after the
                            // element has been removed from the DOM. Assert that the directive hasn't been destroyed
                            // between the time we requested the animation frame and when it was executed.
                            // Also note that we have to assert that the textarea is focused before we set the
                            // selection range. Setting the selection range on a non-focused textarea will cause
                            // it to receive focus on IE and Edge.
                            if (!_this.destroy$.isStopped && document.activeElement === textarea) {
                                textarea.setSelectionRange(selectionStart, selectionEnd);
                            }
                        }));
                    }));
                }
                this.previousValue = value;
                this.previousMinRows = this.minRows;
            };
        /**
         * @private
         * @return {?}
         */
        NzAutosizeDirective.prototype.cacheTextareaLineHeight = /**
         * @private
         * @return {?}
         */
            function () {
                if (this.cachedLineHeight >= 0 || !this.el.parentNode) {
                    return;
                }
                // Use a clone element because we have to override some styles.
                /** @type {?} */
                var textareaClone = ( /** @type {?} */(this.el.cloneNode(false)));
                textareaClone.rows = 1;
                // Use `position: absolute` so that this doesn't cause a browser layout and use
                // `visibility: hidden` so that nothing is rendered. Clear any other styles that
                // would affect the height.
                textareaClone.style.position = 'absolute';
                textareaClone.style.visibility = 'hidden';
                textareaClone.style.border = 'none';
                textareaClone.style.padding = '0';
                textareaClone.style.height = '';
                textareaClone.style.minHeight = '';
                textareaClone.style.maxHeight = '';
                // In Firefox it happens that textarea elements are always bigger than the specified amount
                // of rows. This is because Firefox tries to add extra space for the horizontal scrollbar.
                // As a workaround that removes the extra space for the scrollbar, we can just set overflow
                // to hidden. This ensures that there is no invalid calculation of the line height.
                // See Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=33654
                textareaClone.style.overflow = 'hidden';
                ( /** @type {?} */(this.el.parentNode)).appendChild(textareaClone);
                this.cachedLineHeight = textareaClone.clientHeight - this.inputGap - 1;
                ( /** @type {?} */(this.el.parentNode)).removeChild(textareaClone);
                // Min and max heights have to be re-calculated if the cached line height changes
                this.setMinHeight();
                this.setMaxHeight();
            };
        /**
         * @return {?}
         */
        NzAutosizeDirective.prototype.setMinHeight = /**
         * @return {?}
         */
            function () {
                /** @type {?} */
                var minHeight = this.minRows && this.cachedLineHeight ? this.minRows * this.cachedLineHeight + this.inputGap + "px" : null;
                if (minHeight) {
                    this.el.style.minHeight = minHeight;
                }
            };
        /**
         * @return {?}
         */
        NzAutosizeDirective.prototype.setMaxHeight = /**
         * @return {?}
         */
            function () {
                /** @type {?} */
                var maxHeight = this.maxRows && this.cachedLineHeight ? this.maxRows * this.cachedLineHeight + this.inputGap + "px" : null;
                if (maxHeight) {
                    this.el.style.maxHeight = maxHeight;
                }
            };
        /**
         * @return {?}
         */
        NzAutosizeDirective.prototype.noopInputHandler = /**
         * @return {?}
         */
            function () {
                // no-op handler that ensures we're running change detection on input events.
            };
        /**
         * @return {?}
         */
        NzAutosizeDirective.prototype.ngAfterViewInit = /**
         * @return {?}
         */
            function () {
                var _this = this;
                if (this.nzAutosize && this.platform.isBrowser) {
                    this.resizeToFitContent();
                    this.ngZone.runOutsideAngular(( /**
                     * @return {?}
                     */function () {
                        rxjs.fromEvent(window, 'resize')
                            .pipe(operators.auditTime(16), operators.takeUntil(_this.destroy$))
                            .subscribe(( /**
                     * @return {?}
                     */function () { return _this.resizeToFitContent(true); }));
                    }));
                }
            };
        /**
         * @return {?}
         */
        NzAutosizeDirective.prototype.ngOnDestroy = /**
         * @return {?}
         */
            function () {
                this.destroy$.next();
                this.destroy$.complete();
            };
        /**
         * @return {?}
         */
        NzAutosizeDirective.prototype.ngDoCheck = /**
         * @return {?}
         */
            function () {
                if (this.nzAutosize && this.platform.isBrowser) {
                    this.resizeToFitContent();
                }
            };
        NzAutosizeDirective.decorators = [
            { type: core$1.Directive, args: [{
                        selector: 'textarea[nzAutosize]',
                        exportAs: 'nzAutosize',
                        host: {
                            // Textarea elements that have the directive applied should have a single row by default.
                            // Browsers normally show two rows by default and therefore this limits the minRows binding.
                            rows: '1',
                            '(input)': 'noopInputHandler()'
                        }
                    },] }
        ];
        /** @nocollapse */
        NzAutosizeDirective.ctorParameters = function () {
            return [
                { type: core$1.ElementRef },
                { type: core$1.NgZone },
                { type: platform.Platform }
            ];
        };
        NzAutosizeDirective.propDecorators = {
            nzAutosize: [{ type: core$1.Input }]
        };
        return NzAutosizeDirective;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var NzInputModule = /** @class */ (function () {
        function NzInputModule() {
        }
        NzInputModule.decorators = [
            { type: core$1.NgModule, args: [{
                        declarations: [NzInputDirective, NzInputGroupComponent, NzAutosizeDirective],
                        exports: [NzInputDirective, NzInputGroupComponent, NzAutosizeDirective],
                        imports: [common.CommonModule, forms.FormsModule, icon.NzIconModule, platform.PlatformModule, core.NzAddOnModule]
                    },] }
        ];
        return NzInputModule;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */

    exports.NzInputGroupComponent = NzInputGroupComponent;
    exports.NzInputModule = NzInputModule;
    exports.NzInputDirective = NzInputDirective;
    exports.isAutoSizeType = isAutoSizeType;
    exports.NzAutosizeDirective = NzAutosizeDirective;

    Object.defineProperty(exports, '__esModule', { value: true });

})));

//# sourceMappingURL=ng-zorro-antd-input.umd.js.map