ngx-bootstrap-modal - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

CHANGELOG.md

@@ -0,1 +1,6 @@
+# 1.0.8
+
+- [修] checkbox 允许多个项。
+- [优] 全局配置时 `container` 为可选项。
+
 # 1.0.7
@@ -2,0 +7,0 @@

components/built-in.dialog.js

@@ -25,21 +25,45 @@ var __extends = (this && this.__extends) || (function () {
         var _this = this;
-        if (this.opt.className)
-            this.classs[this.opt.className] = true;
-        if (this.opt.icon)
+        var options = this.opt;
+        if (options.className)
+            this.classs[options.className] = true;
+        if (options.icon)
             this.classs['has-icon'] = true;
-        if (this.opt.type === 'prompt' && !this.opt.inputRegex) {
-            switch (this.opt.input) {
-                case 'email':
-                    this.opt.inputRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-                    if (!this.opt.inputError)
-                        this.opt.inputError = '邮箱格式不正确';
-                    break;
-                case 'url':
-                    this.opt.inputRegex = /^((http[s]?|ftp):\/)?\/?([^:\/\s]+)((\/\w+)*\/)([\w\-\.]+[^#?\s]+)(.*)?(#[\w\-]+)?$/;
-                    if (!this.opt.inputError)
-                        this.opt.inputError = '网址格式不正确';
-                    break;
+        if (options.type === 'prompt') {
+            if (!options.inputRegex) {
+                switch (options.input) {
+                    case 'email':
+                        options.inputRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+                        if (!options.inputError)
+                            options.inputError = '邮箱格式不正确';
+                        break;
+                    case 'url':
+                        options.inputRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
+                        if (!options.inputError)
+                            options.inputError = '网址格式不正确';
+                        break;
+                }
             }
+            if (options.inputOptions && !Array.isArray(options.inputOptions)) {
+                var keys = [];
+                for (var key in options.inputOptions) {
+                    keys.push({ key: key, text: options.inputOptions[key] });
+                }
+                options.inputOptions = keys;
+            }
+            options.inputOptions = Object.assign([], options.inputOptions);
+            options.inputAttributes = Object.assign({
+                maxlength: null,
+                min: 0,
+                max: 100,
+                step: 1
+            }, options.inputAttributes);
         }
-        this.promptData = this.opt.inputValue;
+        // 默认值
+        var defaultValue = options.inputValue;
+        if (options.input === 'checkbox' && !Array.isArray(options.inputValue)) {
+            defaultValue = typeof defaultValue !== 'undefined' ? [defaultValue] : [];
+        }
+        options.inputValue = defaultValue || '';
+        console.log(options);
+        this.promptData = options.inputValue;
         if (this.promptData) {
@@ -53,5 +77,11 @@ this.promptCheck();
     BuiltInComponent.prototype.promptCheck = function () {
-        if (this.opt.input !== 'checkbox' && this.opt.inputRequired === true && !this.promptData) {
-            this.prompError = true;
-            return false;
+        if (this.opt.inputRequired === true) {
+            if (this.opt.input === 'checkbox' && this.promptData.length === 0) {
+                this.prompError = true;
+                return false;
+            }
+            if (!this.promptData) {
+                this.prompError = true;
+                return false;
+            }
         }
@@ -93,3 +123,12 @@ if (this.opt.inputRegex && !this.opt.inputRegex.test(this.promptData.toString())) {
                     return;
-                this.result = this.promptData;
+                var ret = this.promptData;
+                if (this.opt.input === 'checkbox') {
+                    ret = this.opt.inputOptions
+                        .filter(function (item) { return item._checked; })
+                        .map(function (item) {
+                        delete item._checked;
+                        return item;
+                    });
+                }
+                this.result = ret;
                 break;
@@ -105,3 +144,3 @@ }
                 selector: 'dialog-built-in',
-                template: "<div class=\"modal-dialog modal-{{opt.size}}\" [ngClass]=\"classs\" #container>\n                <div class=\"modal-content\" [ngClass]=\"{'text-center':opt.icon}\">\n                   <div class=\"modal-header\" *ngIf=\"opt.title\" [hidden]=\"opt.icon\">\n                     <h5 class=\"modal-title\">{{opt.title}}</h5>\n                    <button *ngIf=\"opt.showCloseButton\" type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" (click)=\"close()\">\n                        <span aria-hidden=\"true\">&times;</span>\n                    </button>\n                   </div>\n                   <div class=\"modal-body\">\n                    <div *ngIf=\"opt.icon\" [ngSwitch]=\"opt.icon\">\n                        <div class=\"modal-icon modal-error animate-error-icon\" *ngSwitchCase=\"'error'\">\n                            <span class=\"x-mark animate-x-mark\"><span class=\"x-mark-line-left\"></span><span class=\"x-mark-line-right\"></span></span>\n                        </div>\n                        <div class=\"modal-icon modal-question\" *ngSwitchCase=\"'question'\">?</div>\n                        <div class=\"modal-icon modal-warning\" *ngSwitchCase=\"'warning'\">!</div>\n                        <div class=\"modal-icon modal-info\" *ngSwitchCase=\"'info'\">i</div>\n                        <div class=\"modal-icon modal-success animate-success-icon\" *ngSwitchCase=\"'success'\">\n                            <div class=\"success-circular-line-left\" style=\"background: rgb(255, 255, 255);\"></div>\n                            <span class=\"success-line-tip animate-success-line-tip\"></span>\n                            <span class=\"success-line-long animate-success-line-long\"></span>\n                            <div class=\"success-ring\"></div>\n                            <div class=\"success-fix\" style=\"background: rgb(255, 255, 255);\"></div>\n                            <div class=\"success-circular-line-right\" style=\"background: rgb(255, 255, 255);\"></div>\n                        </div>\n                    </div>\n                     <div *ngIf=\"opt.content\" [innerHTML]=\"opt.content\"></div>\n                     <div [ngSwitch]=\"opt.input\" *ngIf=\"opt.type === 'prompt'\" class=\"modal-{{opt.type}}\" [ngClass]=\"{'has-danger has-error': prompError}\">\n                        <textarea *ngSwitchCase=\"'textarea'\" placeholder=\"{{opt.inputPlaceholder}}\" [(ngModel)]=\"promptData\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\"></textarea>\n                        <select *ngSwitchCase=\"'select'\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                            (ngModelChange)=\"onChanage()\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\">\n                            <option *ngFor=\"let si of opt.inputOptions | keys\" [ngValue]=\"si.key\">{{si.value}}</option>\n                        </select>\n                        <div *ngSwitchCase=\"'range'\" class=\"row modal-range\">\n                            <div class=\"col-{{opt.size}}-9\">\n                                <input type=\"range\" [min]=\"opt.inputAttributes.min\" [max]=\"opt.inputAttributes.max\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                                    (ngModelChange)=\"onChanage()\" class=\"form-control\">\n                            </div>\n                            <div class=\"col-{{opt.size}}-3\"><p class=\"form-control-static\">{{promptData}}</p></div>\n                        </div>\n                        <div *ngSwitchCase=\"'checkbox'\">\n                            <label class=\"checkbox-inline custom-control custom-checkbox\">\n                                <input type=\"checkbox\" [(ngModel)]=\"promptData\" class=\"custom-control-input\">\n                                <span class=\"custom-control-indicator\"></span>\n                                <span class=\"custom-control-description\"> {{opt.inputOptions}}</span>\n                            </label>\n                        </div>\n                        <div *ngSwitchCase=\"'radio'\">\n                            <label class=\"radio-inline custom-control custom-radio\" *ngFor=\"let si of opt.inputOptions | keys\">\n                                <input type=\"radio\" (click)=\"promptData=si.key\" [checked]=\"si.key===promptData\" class=\"custom-control-input\">\n                                <span class=\"custom-control-indicator\"></span>\n                                <span class=\"custom-control-description\"> {{si.value}}</span>\n                            </label>\n                        </div>\n                        <input *ngSwitchDefault type=\"{{opt.input}}\"\n                            placeholder=\"{{opt.inputPlaceholder}}\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                            (ngModelChange)=\"onChanage()\" (keyup)=\"onKeyup($event)\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\">\n                        <div class=\"form-control-feedback\" *ngIf=\"prompError\">{{opt.inputError}}</div>\n                    </div>\n                   </div>\n                   <div class=\"modal-footer\" *ngIf=\"opt.showConfirmButton || opt.showCancelButton\">\n                     <button type=\"button\" class=\"cancel btn\" tabIndex=\"2\" (click)=\"close()\" [ngClass]=\"opt.cancelButtonClass\" [hidden]=\"!opt.showCancelButton\">{{opt.cancelButtonText}}</button>\n                     <button type=\"button\" class=\"confirm btn\" tabIndex=\"1\" (click)=\"ok()\" [disabled]=\"prompError\" [ngClass]=\"opt.confirmButtonClass\" [hidden]=\"!opt.showConfirmButton\">{{opt.confirmButtonText}}</button>\n                   </div>\n                </div>\n             </div>",
+                template: "<div class=\"modal-dialog modal-{{opt.size}}\" [ngClass]=\"classs\" #container>\n                <div class=\"modal-content\" [ngClass]=\"{'text-center':opt.icon}\">\n                   <div class=\"modal-header\" *ngIf=\"opt.title\" [hidden]=\"opt.icon\">\n                     <h5 class=\"modal-title\">{{opt.title}}</h5>\n                    <button *ngIf=\"opt.showCloseButton\" type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" (click)=\"close()\">\n                        <span aria-hidden=\"true\">&times;</span>\n                    </button>\n                   </div>\n                   <div class=\"modal-body\">\n                    <div *ngIf=\"opt.icon\" [ngSwitch]=\"opt.icon\">\n                        <div class=\"modal-icon modal-error animate-error-icon\" *ngSwitchCase=\"'error'\">\n                            <span class=\"x-mark animate-x-mark\"><span class=\"x-mark-line-left\"></span><span class=\"x-mark-line-right\"></span></span>\n                        </div>\n                        <div class=\"modal-icon modal-question\" *ngSwitchCase=\"'question'\">?</div>\n                        <div class=\"modal-icon modal-warning\" *ngSwitchCase=\"'warning'\">!</div>\n                        <div class=\"modal-icon modal-info\" *ngSwitchCase=\"'info'\">i</div>\n                        <div class=\"modal-icon modal-success animate-success-icon\" *ngSwitchCase=\"'success'\">\n                            <div class=\"success-circular-line-left\" style=\"background: rgb(255, 255, 255);\"></div>\n                            <span class=\"success-line-tip animate-success-line-tip\"></span>\n                            <span class=\"success-line-long animate-success-line-long\"></span>\n                            <div class=\"success-ring\"></div>\n                            <div class=\"success-fix\" style=\"background: rgb(255, 255, 255);\"></div>\n                            <div class=\"success-circular-line-right\" style=\"background: rgb(255, 255, 255);\"></div>\n                        </div>\n                    </div>\n                     <div *ngIf=\"opt.content\" [innerHTML]=\"opt.content\"></div>\n                     <div [ngSwitch]=\"opt.input\" *ngIf=\"opt.type === 'prompt'\" class=\"modal-{{opt.type}}\" [ngClass]=\"{'has-danger has-error': prompError}\">\n                        <textarea *ngSwitchCase=\"'textarea'\" placeholder=\"{{opt.inputPlaceholder}}\" [(ngModel)]=\"promptData\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\"></textarea>\n                        <select *ngSwitchCase=\"'select'\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                            (ngModelChange)=\"onChanage()\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\">\n                            <option *ngFor=\"let i of opt.inputOptions\" [ngValue]=\"i\">{{i.text}}</option>\n                        </select>\n                        <div *ngSwitchCase=\"'range'\" class=\"row modal-range\">\n                            <div class=\"col-{{opt.size}}-9\">\n                                <input type=\"range\" [min]=\"opt.inputAttributes.min\" [max]=\"opt.inputAttributes.max\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                                    (ngModelChange)=\"onChanage()\" class=\"form-control\">\n                            </div>\n                            <div class=\"col-{{opt.size}}-3\"><p class=\"form-control-static\">{{promptData}}</p></div>\n                        </div>\n                        <div *ngSwitchCase=\"'checkbox'\">\n                            <label *ngFor=\"let i of opt.inputOptions\" class=\"checkbox-inline custom-control custom-checkbox\">\n                                <input type=\"checkbox\" [(ngModel)]=\"i._checked\" [value]=\"i\" name=\"checkbox1\"\n                                    class=\"custom-control-input\">\n                                <span class=\"custom-control-indicator\"></span>\n                                <span class=\"custom-control-description\"> {{i.text}}</span>\n                            </label>\n                        </div>\n                        <div *ngSwitchCase=\"'radio'\">\n                            <label *ngFor=\"let i of opt.inputOptions\" class=\"radio-inline custom-control custom-radio\">\n                                <input type=\"radio\" (click)=\"promptData=i\" [checked]=\"i===promptData\" class=\"custom-control-input\">\n                                <span class=\"custom-control-indicator\"></span>\n                                <span class=\"custom-control-description\"> {{i.text}}</span>\n                            </label>\n                        </div>\n                        <input *ngSwitchDefault type=\"{{opt.input}}\"\n                            placeholder=\"{{opt.inputPlaceholder}}\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                            (ngModelChange)=\"onChanage()\" (keyup)=\"onKeyup($event)\" [maxlength]=\"opt.inputAttributes.maxlength\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\">\n                        <div class=\"form-control-feedback\" *ngIf=\"prompError\">{{opt.inputError}}</div>\n                    </div>\n                   </div>\n                   <div class=\"modal-footer\" *ngIf=\"opt.showConfirmButton || opt.showCancelButton\">\n                     <button type=\"button\" class=\"cancel btn\" tabIndex=\"2\" (click)=\"close()\" [ngClass]=\"opt.cancelButtonClass\" [hidden]=\"!opt.showCancelButton\">{{opt.cancelButtonText}}</button>\n                     <button type=\"button\" class=\"confirm btn\" tabIndex=\"1\" (click)=\"ok()\" [disabled]=\"prompError\" [ngClass]=\"opt.confirmButtonClass\" [hidden]=\"!opt.showConfirmButton\">{{opt.confirmButtonText}}</button>\n                   </div>\n                </div>\n             </div>",
                 styles: ["\n.modal-dialog .modal-title{display:inline-block}.modal-range [type=\"range\"]{box-shadow:none}.modal-prompt textarea{height:108px;padding:12px}.modal-prompt .form-control-feedback{font-size:12px;position:inherit;width:inherit;text-align:left}.modal-icon{width:80px;height:80px;border:4px solid transparent;border-radius:50%;margin:20px auto 30px;padding:0;position:relative;box-sizing:content-box;cursor:default;user-select:none;-webkit-tap-highlight-color:transparent}.modal-icon.modal-error{border-color:#f27474}.modal-icon.modal-error .x-mark{position:relative;display:block}.modal-icon.modal-error [class^='x-mark-line']{position:absolute;height:5px;width:47px;background-color:#f27474;display:block;top:37px;border-radius:2px}.modal-icon.modal-error [class^='x-mark-line'][class$='left']{transform:rotate(45deg);left:17px}.modal-icon.modal-error [class^='x-mark-line'][class$='right']{transform:rotate(-45deg);right:16px}.modal-icon.modal-warning{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;color:#f8bb86;border-color:#facea8;font-size:60px;line-height:80px;text-align:center}.modal-icon.modal-info{font-family:'Open Sans', sans-serif;color:#3fc3ee;border-color:#9de0f6;font-size:60px;line-height:80px;text-align:center}.modal-icon.modal-question{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;color:#87adbd;border-color:#c9dae1;font-size:60px;line-height:80px;text-align:center}.modal-icon.modal-success{border-color:#a5dc86}.modal-icon.modal-success [class^='success-circular-line']{border-radius:50%;position:absolute;width:60px;height:120px;transform:rotate(45deg)}.modal-icon.modal-success [class^='success-circular-line'][class$='left']{border-radius:120px 0 0 120px;top:-7px;left:-33px;transform:rotate(-45deg);transform-origin:60px 60px}.modal-icon.modal-success [class^='success-circular-line'][class$='right']{border-radius:0 120px 120px 0;top:-11px;left:30px;transform:rotate(-45deg);transform-origin:0 60px}.modal-icon.modal-success .success-ring{width:80px;height:80px;border:4px solid rgba(165,220,134,0.2);border-radius:50%;box-sizing:content-box;position:absolute;left:-4px;top:-4px;z-index:2}.modal-icon.modal-success .success-fix{width:7px;height:90px;position:absolute;left:28px;top:8px;z-index:1;transform:rotate(-45deg)}.modal-icon.modal-success [class^='success-line']{height:5px;background-color:#a5dc86;display:block;border-radius:2px;position:absolute;z-index:2}.modal-icon.modal-success [class^='success-line'][class$='tip']{width:25px;left:14px;top:46px;transform:rotate(45deg)}.modal-icon.modal-success [class^='success-line'][class$='long']{width:47px;right:8px;top:38px;transform:rotate(-45deg)}@keyframes animate-success-tip{0%{width:0;left:1px;top:19px}54%{width:0;left:1px;top:19px}70%{width:50px;left:-8px;top:37px}84%{width:17px;left:21px;top:48px}100%{width:25px;left:14px;top:45px}}@keyframes animate-success-long{0%{width:0;right:46px;top:54px}65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}}@keyframes rotatePlaceholder{0%{transform:rotate(-45deg)}5%{transform:rotate(-45deg)}12%{transform:rotate(-405deg)}100%{transform:rotate(-405deg)}}.animate-success-line-tip{animation:animate-success-tip 0.75s}.animate-success-line-long{animation:animate-success-long 0.75s}.modal-success.animate-success-icon .success-circular-line-right{animation:rotatePlaceholder 4.25s ease-in}@keyframes animate-error-icon{0%{transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0deg);opacity:1}}.animate-error-icon{animation:animate-error-icon 0.5s}@keyframes animate-x-mark{0%{transform:scale(0.4);margin-top:26px;opacity:0}50%{transform:scale(0.4);margin-top:26px;opacity:0}80%{transform:scale(1.15);margin-top:-6px}100%{transform:scale(1);margin-top:0;opacity:1}}.animate-x-mark{animation:animate-x-mark 0.5s}@keyframes rotate-loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}\n    "],
@@ -108,0 +147,0 @@ encapsulation: ViewEncapsulation.None

components/built-in.dialog.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"BuiltInComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./dialog.component","name":"DialogComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dialog-built-in","template":"<div class=\"modal-dialog modal-{{opt.size}}\" [ngClass]=\"classs\" #container>\n                <div class=\"modal-content\" [ngClass]=\"{'text-center':opt.icon}\">\n                   <div class=\"modal-header\" *ngIf=\"opt.title\" [hidden]=\"opt.icon\">\n                     <h5 class=\"modal-title\">{{opt.title}}</h5>\n                    <button *ngIf=\"opt.showCloseButton\" type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" (click)=\"close()\">\n                        <span aria-hidden=\"true\">&times;</span>\n                    </button>\n                   </div>\n                   <div class=\"modal-body\">\n                    <div *ngIf=\"opt.icon\" [ngSwitch]=\"opt.icon\">\n                        <div class=\"modal-icon modal-error animate-error-icon\" *ngSwitchCase=\"'error'\">\n                            <span class=\"x-mark animate-x-mark\"><span class=\"x-mark-line-left\"></span><span class=\"x-mark-line-right\"></span></span>\n                        </div>\n                        <div class=\"modal-icon modal-question\" *ngSwitchCase=\"'question'\">?</div>\n                        <div class=\"modal-icon modal-warning\" *ngSwitchCase=\"'warning'\">!</div>\n                        <div class=\"modal-icon modal-info\" *ngSwitchCase=\"'info'\">i</div>\n                        <div class=\"modal-icon modal-success animate-success-icon\" *ngSwitchCase=\"'success'\">\n                            <div class=\"success-circular-line-left\" style=\"background: rgb(255, 255, 255);\"></div>\n                            <span class=\"success-line-tip animate-success-line-tip\"></span>\n                            <span class=\"success-line-long animate-success-line-long\"></span>\n                            <div class=\"success-ring\"></div>\n                            <div class=\"success-fix\" style=\"background: rgb(255, 255, 255);\"></div>\n                            <div class=\"success-circular-line-right\" style=\"background: rgb(255, 255, 255);\"></div>\n                        </div>\n                    </div>\n                     <div *ngIf=\"opt.content\" [innerHTML]=\"opt.content\"></div>\n                     <div [ngSwitch]=\"opt.input\" *ngIf=\"opt.type === 'prompt'\" class=\"modal-{{opt.type}}\" [ngClass]=\"{'has-danger has-error': prompError}\">\n                        <textarea *ngSwitchCase=\"'textarea'\" placeholder=\"{{opt.inputPlaceholder}}\" [(ngModel)]=\"promptData\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\"></textarea>\n                        <select *ngSwitchCase=\"'select'\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                            (ngModelChange)=\"onChanage()\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\">\n                            <option *ngFor=\"let si of opt.inputOptions | keys\" [ngValue]=\"si.key\">{{si.value}}</option>\n                        </select>\n                        <div *ngSwitchCase=\"'range'\" class=\"row modal-range\">\n                            <div class=\"col-{{opt.size}}-9\">\n                                <input type=\"range\" [min]=\"opt.inputAttributes.min\" [max]=\"opt.inputAttributes.max\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                                    (ngModelChange)=\"onChanage()\" class=\"form-control\">\n                            </div>\n                            <div class=\"col-{{opt.size}}-3\"><p class=\"form-control-static\">{{promptData}}</p></div>\n                        </div>\n                        <div *ngSwitchCase=\"'checkbox'\">\n                            <label class=\"checkbox-inline custom-control custom-checkbox\">\n                                <input type=\"checkbox\" [(ngModel)]=\"promptData\" class=\"custom-control-input\">\n                                <span class=\"custom-control-indicator\"></span>\n                                <span class=\"custom-control-description\"> {{opt.inputOptions}}</span>\n                            </label>\n                        </div>\n                        <div *ngSwitchCase=\"'radio'\">\n                            <label class=\"radio-inline custom-control custom-radio\" *ngFor=\"let si of opt.inputOptions | keys\">\n                                <input type=\"radio\" (click)=\"promptData=si.key\" [checked]=\"si.key===promptData\" class=\"custom-control-input\">\n                                <span class=\"custom-control-indicator\"></span>\n                                <span class=\"custom-control-description\"> {{si.value}}</span>\n                            </label>\n                        </div>\n                        <input *ngSwitchDefault type=\"{{opt.input}}\"\n                            placeholder=\"{{opt.inputPlaceholder}}\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                            (ngModelChange)=\"onChanage()\" (keyup)=\"onKeyup($event)\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\">\n                        <div class=\"form-control-feedback\" *ngIf=\"prompError\">{{opt.inputError}}</div>\n                    </div>\n                   </div>\n                   <div class=\"modal-footer\" *ngIf=\"opt.showConfirmButton || opt.showCancelButton\">\n                     <button type=\"button\" class=\"cancel btn\" tabIndex=\"2\" (click)=\"close()\" [ngClass]=\"opt.cancelButtonClass\" [hidden]=\"!opt.showCancelButton\">{{opt.cancelButtonText}}</button>\n                     <button type=\"button\" class=\"confirm btn\" tabIndex=\"1\" (click)=\"ok()\" [disabled]=\"prompError\" [ngClass]=\"opt.confirmButtonClass\" [hidden]=\"!opt.showConfirmButton\">{{opt.confirmButtonText}}</button>\n                   </div>\n                </div>\n             </div>","styles":["\n.modal-dialog .modal-title{display:inline-block}.modal-range [type=\"range\"]{box-shadow:none}.modal-prompt textarea{height:108px;padding:12px}.modal-prompt .form-control-feedback{font-size:12px;position:inherit;width:inherit;text-align:left}.modal-icon{width:80px;height:80px;border:4px solid transparent;border-radius:50%;margin:20px auto 30px;padding:0;position:relative;box-sizing:content-box;cursor:default;user-select:none;-webkit-tap-highlight-color:transparent}.modal-icon.modal-error{border-color:#f27474}.modal-icon.modal-error .x-mark{position:relative;display:block}.modal-icon.modal-error [class^='x-mark-line']{position:absolute;height:5px;width:47px;background-color:#f27474;display:block;top:37px;border-radius:2px}.modal-icon.modal-error [class^='x-mark-line'][class$='left']{transform:rotate(45deg);left:17px}.modal-icon.modal-error [class^='x-mark-line'][class$='right']{transform:rotate(-45deg);right:16px}.modal-icon.modal-warning{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;color:#f8bb86;border-color:#facea8;font-size:60px;line-height:80px;text-align:center}.modal-icon.modal-info{font-family:'Open Sans', sans-serif;color:#3fc3ee;border-color:#9de0f6;font-size:60px;line-height:80px;text-align:center}.modal-icon.modal-question{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;color:#87adbd;border-color:#c9dae1;font-size:60px;line-height:80px;text-align:center}.modal-icon.modal-success{border-color:#a5dc86}.modal-icon.modal-success [class^='success-circular-line']{border-radius:50%;position:absolute;width:60px;height:120px;transform:rotate(45deg)}.modal-icon.modal-success [class^='success-circular-line'][class$='left']{border-radius:120px 0 0 120px;top:-7px;left:-33px;transform:rotate(-45deg);transform-origin:60px 60px}.modal-icon.modal-success [class^='success-circular-line'][class$='right']{border-radius:0 120px 120px 0;top:-11px;left:30px;transform:rotate(-45deg);transform-origin:0 60px}.modal-icon.modal-success .success-ring{width:80px;height:80px;border:4px solid rgba(165,220,134,0.2);border-radius:50%;box-sizing:content-box;position:absolute;left:-4px;top:-4px;z-index:2}.modal-icon.modal-success .success-fix{width:7px;height:90px;position:absolute;left:28px;top:8px;z-index:1;transform:rotate(-45deg)}.modal-icon.modal-success [class^='success-line']{height:5px;background-color:#a5dc86;display:block;border-radius:2px;position:absolute;z-index:2}.modal-icon.modal-success [class^='success-line'][class$='tip']{width:25px;left:14px;top:46px;transform:rotate(45deg)}.modal-icon.modal-success [class^='success-line'][class$='long']{width:47px;right:8px;top:38px;transform:rotate(-45deg)}@keyframes animate-success-tip{0%{width:0;left:1px;top:19px}54%{width:0;left:1px;top:19px}70%{width:50px;left:-8px;top:37px}84%{width:17px;left:21px;top:48px}100%{width:25px;left:14px;top:45px}}@keyframes animate-success-long{0%{width:0;right:46px;top:54px}65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}}@keyframes rotatePlaceholder{0%{transform:rotate(-45deg)}5%{transform:rotate(-45deg)}12%{transform:rotate(-405deg)}100%{transform:rotate(-405deg)}}.animate-success-line-tip{animation:animate-success-tip 0.75s}.animate-success-line-long{animation:animate-success-long 0.75s}.modal-success.animate-success-icon .success-circular-line-right{animation:rotatePlaceholder 4.25s ease-in}@keyframes animate-error-icon{0%{transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0deg);opacity:1}}.animate-error-icon{animation:animate-error-icon 0.5s}@keyframes animate-x-mark{0%{transform:scale(0.4);margin-top:26px;opacity:0}50%{transform:scale(0.4);margin-top:26px;opacity:0}80%{transform:scale(1.15);margin-top:-6px}100%{transform:scale(1);margin-top:0;opacity:1}}.animate-x-mark{animation:animate-x-mark 0.5s}@keyframes rotate-loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}\n    "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"}]}],"ngOnInit":[{"__symbolic":"method"}],"promptCheck":[{"__symbolic":"method"}],"setFocus":[{"__symbolic":"method"}],"onChanage":[{"__symbolic":"method"}],"onKeyup":[{"__symbolic":"method"}],"ok":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"BuiltInComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./dialog.component","name":"DialogComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dialog-built-in","template":"<div class=\"modal-dialog modal-{{opt.size}}\" [ngClass]=\"classs\" #container>\n                <div class=\"modal-content\" [ngClass]=\"{'text-center':opt.icon}\">\n                   <div class=\"modal-header\" *ngIf=\"opt.title\" [hidden]=\"opt.icon\">\n                     <h5 class=\"modal-title\">{{opt.title}}</h5>\n                    <button *ngIf=\"opt.showCloseButton\" type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" (click)=\"close()\">\n                        <span aria-hidden=\"true\">&times;</span>\n                    </button>\n                   </div>\n                   <div class=\"modal-body\">\n                    <div *ngIf=\"opt.icon\" [ngSwitch]=\"opt.icon\">\n                        <div class=\"modal-icon modal-error animate-error-icon\" *ngSwitchCase=\"'error'\">\n                            <span class=\"x-mark animate-x-mark\"><span class=\"x-mark-line-left\"></span><span class=\"x-mark-line-right\"></span></span>\n                        </div>\n                        <div class=\"modal-icon modal-question\" *ngSwitchCase=\"'question'\">?</div>\n                        <div class=\"modal-icon modal-warning\" *ngSwitchCase=\"'warning'\">!</div>\n                        <div class=\"modal-icon modal-info\" *ngSwitchCase=\"'info'\">i</div>\n                        <div class=\"modal-icon modal-success animate-success-icon\" *ngSwitchCase=\"'success'\">\n                            <div class=\"success-circular-line-left\" style=\"background: rgb(255, 255, 255);\"></div>\n                            <span class=\"success-line-tip animate-success-line-tip\"></span>\n                            <span class=\"success-line-long animate-success-line-long\"></span>\n                            <div class=\"success-ring\"></div>\n                            <div class=\"success-fix\" style=\"background: rgb(255, 255, 255);\"></div>\n                            <div class=\"success-circular-line-right\" style=\"background: rgb(255, 255, 255);\"></div>\n                        </div>\n                    </div>\n                     <div *ngIf=\"opt.content\" [innerHTML]=\"opt.content\"></div>\n                     <div [ngSwitch]=\"opt.input\" *ngIf=\"opt.type === 'prompt'\" class=\"modal-{{opt.type}}\" [ngClass]=\"{'has-danger has-error': prompError}\">\n                        <textarea *ngSwitchCase=\"'textarea'\" placeholder=\"{{opt.inputPlaceholder}}\" [(ngModel)]=\"promptData\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\"></textarea>\n                        <select *ngSwitchCase=\"'select'\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                            (ngModelChange)=\"onChanage()\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\">\n                            <option *ngFor=\"let si of opt.inputOptions | keys\" [ngValue]=\"si.key\">{{si.value}}</option>\n                        </select>\n                        <div *ngSwitchCase=\"'range'\" class=\"row modal-range\">\n                            <div class=\"col-{{opt.size}}-9\">\n                                <input type=\"range\" [min]=\"opt.inputAttributes.min\" [max]=\"opt.inputAttributes.max\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                                    (ngModelChange)=\"onChanage()\" class=\"form-control\">\n                            </div>\n                            <div class=\"col-{{opt.size}}-3\"><p class=\"form-control-static\">{{promptData}}</p></div>\n                        </div>\n                        <div *ngSwitchCase=\"'checkbox'\">\n                            <label class=\"checkbox-inline custom-control custom-checkbox\">\n                                <input type=\"checkbox\" [(ngModel)]=\"promptData\" class=\"custom-control-input\">\n                                <span class=\"custom-control-indicator\"></span>\n                                <span class=\"custom-control-description\"> {{opt.inputOptions}}</span>\n                            </label>\n                        </div>\n                        <div *ngSwitchCase=\"'radio'\">\n                            <label class=\"radio-inline custom-control custom-radio\" *ngFor=\"let si of opt.inputOptions | keys\">\n                                <input type=\"radio\" (click)=\"promptData=si.key\" [checked]=\"si.key===promptData\" class=\"custom-control-input\">\n                                <span class=\"custom-control-indicator\"></span>\n                                <span class=\"custom-control-description\"> {{si.value}}</span>\n                            </label>\n                        </div>\n                        <input *ngSwitchDefault type=\"{{opt.input}}\"\n                            placeholder=\"{{opt.inputPlaceholder}}\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                            (ngModelChange)=\"onChanage()\" (keyup)=\"onKeyup($event)\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\">\n                        <div class=\"form-control-feedback\" *ngIf=\"prompError\">{{opt.inputError}}</div>\n                    </div>\n                   </div>\n                   <div class=\"modal-footer\" *ngIf=\"opt.showConfirmButton || opt.showCancelButton\">\n                     <button type=\"button\" class=\"cancel btn\" tabIndex=\"2\" (click)=\"close()\" [ngClass]=\"opt.cancelButtonClass\" [hidden]=\"!opt.showCancelButton\">{{opt.cancelButtonText}}</button>\n                     <button type=\"button\" class=\"confirm btn\" tabIndex=\"1\" (click)=\"ok()\" [disabled]=\"prompError\" [ngClass]=\"opt.confirmButtonClass\" [hidden]=\"!opt.showConfirmButton\">{{opt.confirmButtonText}}</button>\n                   </div>\n                </div>\n             </div>","styles":["\n.modal-dialog .modal-title{display:inline-block}.modal-range [type=\"range\"]{box-shadow:none}.modal-prompt textarea{height:108px;padding:12px}.modal-prompt .form-control-feedback{font-size:12px;position:inherit;width:inherit;text-align:left}.modal-icon{width:80px;height:80px;border:4px solid transparent;border-radius:50%;margin:20px auto 30px;padding:0;position:relative;box-sizing:content-box;cursor:default;user-select:none;-webkit-tap-highlight-color:transparent}.modal-icon.modal-error{border-color:#f27474}.modal-icon.modal-error .x-mark{position:relative;display:block}.modal-icon.modal-error [class^='x-mark-line']{position:absolute;height:5px;width:47px;background-color:#f27474;display:block;top:37px;border-radius:2px}.modal-icon.modal-error [class^='x-mark-line'][class$='left']{transform:rotate(45deg);left:17px}.modal-icon.modal-error [class^='x-mark-line'][class$='right']{transform:rotate(-45deg);right:16px}.modal-icon.modal-warning{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;color:#f8bb86;border-color:#facea8;font-size:60px;line-height:80px;text-align:center}.modal-icon.modal-info{font-family:'Open Sans', sans-serif;color:#3fc3ee;border-color:#9de0f6;font-size:60px;line-height:80px;text-align:center}.modal-icon.modal-question{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;color:#87adbd;border-color:#c9dae1;font-size:60px;line-height:80px;text-align:center}.modal-icon.modal-success{border-color:#a5dc86}.modal-icon.modal-success [class^='success-circular-line']{border-radius:50%;position:absolute;width:60px;height:120px;transform:rotate(45deg)}.modal-icon.modal-success [class^='success-circular-line'][class$='left']{border-radius:120px 0 0 120px;top:-7px;left:-33px;transform:rotate(-45deg);transform-origin:60px 60px}.modal-icon.modal-success [class^='success-circular-line'][class$='right']{border-radius:0 120px 120px 0;top:-11px;left:30px;transform:rotate(-45deg);transform-origin:0 60px}.modal-icon.modal-success .success-ring{width:80px;height:80px;border:4px solid rgba(165,220,134,0.2);border-radius:50%;box-sizing:content-box;position:absolute;left:-4px;top:-4px;z-index:2}.modal-icon.modal-success .success-fix{width:7px;height:90px;position:absolute;left:28px;top:8px;z-index:1;transform:rotate(-45deg)}.modal-icon.modal-success [class^='success-line']{height:5px;background-color:#a5dc86;display:block;border-radius:2px;position:absolute;z-index:2}.modal-icon.modal-success [class^='success-line'][class$='tip']{width:25px;left:14px;top:46px;transform:rotate(45deg)}.modal-icon.modal-success [class^='success-line'][class$='long']{width:47px;right:8px;top:38px;transform:rotate(-45deg)}@keyframes animate-success-tip{0%{width:0;left:1px;top:19px}54%{width:0;left:1px;top:19px}70%{width:50px;left:-8px;top:37px}84%{width:17px;left:21px;top:48px}100%{width:25px;left:14px;top:45px}}@keyframes animate-success-long{0%{width:0;right:46px;top:54px}65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}}@keyframes rotatePlaceholder{0%{transform:rotate(-45deg)}5%{transform:rotate(-45deg)}12%{transform:rotate(-405deg)}100%{transform:rotate(-405deg)}}.animate-success-line-tip{animation:animate-success-tip 0.75s}.animate-success-line-long{animation:animate-success-long 0.75s}.modal-success.animate-success-icon .success-circular-line-right{animation:rotatePlaceholder 4.25s ease-in}@keyframes animate-error-icon{0%{transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0deg);opacity:1}}.animate-error-icon{animation:animate-error-icon 0.5s}@keyframes animate-x-mark{0%{transform:scale(0.4);margin-top:26px;opacity:0}50%{transform:scale(0.4);margin-top:26px;opacity:0}80%{transform:scale(1.15);margin-top:-6px}100%{transform:scale(1);margin-top:0;opacity:1}}.animate-x-mark{animation:animate-x-mark 0.5s}@keyframes rotate-loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}\n    "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"}]}],"ngOnInit":[{"__symbolic":"method"}],"promptCheck":[{"__symbolic":"method"}],"setFocus":[{"__symbolic":"method"}],"onChanage":[{"__symbolic":"method"}],"onKeyup":[{"__symbolic":"method"}],"ok":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"BuiltInComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./dialog.component","name":"DialogComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dialog-built-in","template":"<div class=\"modal-dialog modal-{{opt.size}}\" [ngClass]=\"classs\" #container>\n                <div class=\"modal-content\" [ngClass]=\"{'text-center':opt.icon}\">\n                   <div class=\"modal-header\" *ngIf=\"opt.title\" [hidden]=\"opt.icon\">\n                     <h5 class=\"modal-title\">{{opt.title}}</h5>\n                    <button *ngIf=\"opt.showCloseButton\" type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" (click)=\"close()\">\n                        <span aria-hidden=\"true\">&times;</span>\n                    </button>\n                   </div>\n                   <div class=\"modal-body\">\n                    <div *ngIf=\"opt.icon\" [ngSwitch]=\"opt.icon\">\n                        <div class=\"modal-icon modal-error animate-error-icon\" *ngSwitchCase=\"'error'\">\n                            <span class=\"x-mark animate-x-mark\"><span class=\"x-mark-line-left\"></span><span class=\"x-mark-line-right\"></span></span>\n                        </div>\n                        <div class=\"modal-icon modal-question\" *ngSwitchCase=\"'question'\">?</div>\n                        <div class=\"modal-icon modal-warning\" *ngSwitchCase=\"'warning'\">!</div>\n                        <div class=\"modal-icon modal-info\" *ngSwitchCase=\"'info'\">i</div>\n                        <div class=\"modal-icon modal-success animate-success-icon\" *ngSwitchCase=\"'success'\">\n                            <div class=\"success-circular-line-left\" style=\"background: rgb(255, 255, 255);\"></div>\n                            <span class=\"success-line-tip animate-success-line-tip\"></span>\n                            <span class=\"success-line-long animate-success-line-long\"></span>\n                            <div class=\"success-ring\"></div>\n                            <div class=\"success-fix\" style=\"background: rgb(255, 255, 255);\"></div>\n                            <div class=\"success-circular-line-right\" style=\"background: rgb(255, 255, 255);\"></div>\n                        </div>\n                    </div>\n                     <div *ngIf=\"opt.content\" [innerHTML]=\"opt.content\"></div>\n                     <div [ngSwitch]=\"opt.input\" *ngIf=\"opt.type === 'prompt'\" class=\"modal-{{opt.type}}\" [ngClass]=\"{'has-danger has-error': prompError}\">\n                        <textarea *ngSwitchCase=\"'textarea'\" placeholder=\"{{opt.inputPlaceholder}}\" [(ngModel)]=\"promptData\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\"></textarea>\n                        <select *ngSwitchCase=\"'select'\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                            (ngModelChange)=\"onChanage()\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\">\n                            <option *ngFor=\"let i of opt.inputOptions\" [ngValue]=\"i\">{{i.text}}</option>\n                        </select>\n                        <div *ngSwitchCase=\"'range'\" class=\"row modal-range\">\n                            <div class=\"col-{{opt.size}}-9\">\n                                <input type=\"range\" [min]=\"opt.inputAttributes.min\" [max]=\"opt.inputAttributes.max\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                                    (ngModelChange)=\"onChanage()\" class=\"form-control\">\n                            </div>\n                            <div class=\"col-{{opt.size}}-3\"><p class=\"form-control-static\">{{promptData}}</p></div>\n                        </div>\n                        <div *ngSwitchCase=\"'checkbox'\">\n                            <label *ngFor=\"let i of opt.inputOptions\" class=\"checkbox-inline custom-control custom-checkbox\">\n                                <input type=\"checkbox\" [(ngModel)]=\"i._checked\" [value]=\"i\" name=\"checkbox1\"\n                                    class=\"custom-control-input\">\n                                <span class=\"custom-control-indicator\"></span>\n                                <span class=\"custom-control-description\"> {{i.text}}</span>\n                            </label>\n                        </div>\n                        <div *ngSwitchCase=\"'radio'\">\n                            <label *ngFor=\"let i of opt.inputOptions\" class=\"radio-inline custom-control custom-radio\">\n                                <input type=\"radio\" (click)=\"promptData=i\" [checked]=\"i===promptData\" class=\"custom-control-input\">\n                                <span class=\"custom-control-indicator\"></span>\n                                <span class=\"custom-control-description\"> {{i.text}}</span>\n                            </label>\n                        </div>\n                        <input *ngSwitchDefault type=\"{{opt.input}}\"\n                            placeholder=\"{{opt.inputPlaceholder}}\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                            (ngModelChange)=\"onChanage()\" (keyup)=\"onKeyup($event)\" [maxlength]=\"opt.inputAttributes.maxlength\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\">\n                        <div class=\"form-control-feedback\" *ngIf=\"prompError\">{{opt.inputError}}</div>\n                    </div>\n                   </div>\n                   <div class=\"modal-footer\" *ngIf=\"opt.showConfirmButton || opt.showCancelButton\">\n                     <button type=\"button\" class=\"cancel btn\" tabIndex=\"2\" (click)=\"close()\" [ngClass]=\"opt.cancelButtonClass\" [hidden]=\"!opt.showCancelButton\">{{opt.cancelButtonText}}</button>\n                     <button type=\"button\" class=\"confirm btn\" tabIndex=\"1\" (click)=\"ok()\" [disabled]=\"prompError\" [ngClass]=\"opt.confirmButtonClass\" [hidden]=\"!opt.showConfirmButton\">{{opt.confirmButtonText}}</button>\n                   </div>\n                </div>\n             </div>","styles":["\n.modal-dialog .modal-title{display:inline-block}.modal-range [type=\"range\"]{box-shadow:none}.modal-prompt textarea{height:108px;padding:12px}.modal-prompt .form-control-feedback{font-size:12px;position:inherit;width:inherit;text-align:left}.modal-icon{width:80px;height:80px;border:4px solid transparent;border-radius:50%;margin:20px auto 30px;padding:0;position:relative;box-sizing:content-box;cursor:default;user-select:none;-webkit-tap-highlight-color:transparent}.modal-icon.modal-error{border-color:#f27474}.modal-icon.modal-error .x-mark{position:relative;display:block}.modal-icon.modal-error [class^='x-mark-line']{position:absolute;height:5px;width:47px;background-color:#f27474;display:block;top:37px;border-radius:2px}.modal-icon.modal-error [class^='x-mark-line'][class$='left']{transform:rotate(45deg);left:17px}.modal-icon.modal-error [class^='x-mark-line'][class$='right']{transform:rotate(-45deg);right:16px}.modal-icon.modal-warning{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;color:#f8bb86;border-color:#facea8;font-size:60px;line-height:80px;text-align:center}.modal-icon.modal-info{font-family:'Open Sans', sans-serif;color:#3fc3ee;border-color:#9de0f6;font-size:60px;line-height:80px;text-align:center}.modal-icon.modal-question{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;color:#87adbd;border-color:#c9dae1;font-size:60px;line-height:80px;text-align:center}.modal-icon.modal-success{border-color:#a5dc86}.modal-icon.modal-success [class^='success-circular-line']{border-radius:50%;position:absolute;width:60px;height:120px;transform:rotate(45deg)}.modal-icon.modal-success [class^='success-circular-line'][class$='left']{border-radius:120px 0 0 120px;top:-7px;left:-33px;transform:rotate(-45deg);transform-origin:60px 60px}.modal-icon.modal-success [class^='success-circular-line'][class$='right']{border-radius:0 120px 120px 0;top:-11px;left:30px;transform:rotate(-45deg);transform-origin:0 60px}.modal-icon.modal-success .success-ring{width:80px;height:80px;border:4px solid rgba(165,220,134,0.2);border-radius:50%;box-sizing:content-box;position:absolute;left:-4px;top:-4px;z-index:2}.modal-icon.modal-success .success-fix{width:7px;height:90px;position:absolute;left:28px;top:8px;z-index:1;transform:rotate(-45deg)}.modal-icon.modal-success [class^='success-line']{height:5px;background-color:#a5dc86;display:block;border-radius:2px;position:absolute;z-index:2}.modal-icon.modal-success [class^='success-line'][class$='tip']{width:25px;left:14px;top:46px;transform:rotate(45deg)}.modal-icon.modal-success [class^='success-line'][class$='long']{width:47px;right:8px;top:38px;transform:rotate(-45deg)}@keyframes animate-success-tip{0%{width:0;left:1px;top:19px}54%{width:0;left:1px;top:19px}70%{width:50px;left:-8px;top:37px}84%{width:17px;left:21px;top:48px}100%{width:25px;left:14px;top:45px}}@keyframes animate-success-long{0%{width:0;right:46px;top:54px}65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}}@keyframes rotatePlaceholder{0%{transform:rotate(-45deg)}5%{transform:rotate(-45deg)}12%{transform:rotate(-405deg)}100%{transform:rotate(-405deg)}}.animate-success-line-tip{animation:animate-success-tip 0.75s}.animate-success-line-long{animation:animate-success-long 0.75s}.modal-success.animate-success-icon .success-circular-line-right{animation:rotatePlaceholder 4.25s ease-in}@keyframes animate-error-icon{0%{transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0deg);opacity:1}}.animate-error-icon{animation:animate-error-icon 0.5s}@keyframes animate-x-mark{0%{transform:scale(0.4);margin-top:26px;opacity:0}50%{transform:scale(0.4);margin-top:26px;opacity:0}80%{transform:scale(1.15);margin-top:-6px}100%{transform:scale(1);margin-top:0;opacity:1}}.animate-x-mark{animation:animate-x-mark 0.5s}@keyframes rotate-loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}\n    "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"}]}],"ngOnInit":[{"__symbolic":"method"}],"promptCheck":[{"__symbolic":"method"}],"setFocus":[{"__symbolic":"method"}],"onChanage":[{"__symbolic":"method"}],"onKeyup":[{"__symbolic":"method"}],"ok":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"BuiltInComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./dialog.component","name":"DialogComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dialog-built-in","template":"<div class=\"modal-dialog modal-{{opt.size}}\" [ngClass]=\"classs\" #container>\n                <div class=\"modal-content\" [ngClass]=\"{'text-center':opt.icon}\">\n                   <div class=\"modal-header\" *ngIf=\"opt.title\" [hidden]=\"opt.icon\">\n                     <h5 class=\"modal-title\">{{opt.title}}</h5>\n                    <button *ngIf=\"opt.showCloseButton\" type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" (click)=\"close()\">\n                        <span aria-hidden=\"true\">&times;</span>\n                    </button>\n                   </div>\n                   <div class=\"modal-body\">\n                    <div *ngIf=\"opt.icon\" [ngSwitch]=\"opt.icon\">\n                        <div class=\"modal-icon modal-error animate-error-icon\" *ngSwitchCase=\"'error'\">\n                            <span class=\"x-mark animate-x-mark\"><span class=\"x-mark-line-left\"></span><span class=\"x-mark-line-right\"></span></span>\n                        </div>\n                        <div class=\"modal-icon modal-question\" *ngSwitchCase=\"'question'\">?</div>\n                        <div class=\"modal-icon modal-warning\" *ngSwitchCase=\"'warning'\">!</div>\n                        <div class=\"modal-icon modal-info\" *ngSwitchCase=\"'info'\">i</div>\n                        <div class=\"modal-icon modal-success animate-success-icon\" *ngSwitchCase=\"'success'\">\n                            <div class=\"success-circular-line-left\" style=\"background: rgb(255, 255, 255);\"></div>\n                            <span class=\"success-line-tip animate-success-line-tip\"></span>\n                            <span class=\"success-line-long animate-success-line-long\"></span>\n                            <div class=\"success-ring\"></div>\n                            <div class=\"success-fix\" style=\"background: rgb(255, 255, 255);\"></div>\n                            <div class=\"success-circular-line-right\" style=\"background: rgb(255, 255, 255);\"></div>\n                        </div>\n                    </div>\n                     <div *ngIf=\"opt.content\" [innerHTML]=\"opt.content\"></div>\n                     <div [ngSwitch]=\"opt.input\" *ngIf=\"opt.type === 'prompt'\" class=\"modal-{{opt.type}}\" [ngClass]=\"{'has-danger has-error': prompError}\">\n                        <textarea *ngSwitchCase=\"'textarea'\" placeholder=\"{{opt.inputPlaceholder}}\" [(ngModel)]=\"promptData\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\"></textarea>\n                        <select *ngSwitchCase=\"'select'\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                            (ngModelChange)=\"onChanage()\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\">\n                            <option *ngFor=\"let i of opt.inputOptions\" [ngValue]=\"i\">{{i.text}}</option>\n                        </select>\n                        <div *ngSwitchCase=\"'range'\" class=\"row modal-range\">\n                            <div class=\"col-{{opt.size}}-9\">\n                                <input type=\"range\" [min]=\"opt.inputAttributes.min\" [max]=\"opt.inputAttributes.max\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                                    (ngModelChange)=\"onChanage()\" class=\"form-control\">\n                            </div>\n                            <div class=\"col-{{opt.size}}-3\"><p class=\"form-control-static\">{{promptData}}</p></div>\n                        </div>\n                        <div *ngSwitchCase=\"'checkbox'\">\n                            <label *ngFor=\"let i of opt.inputOptions\" class=\"checkbox-inline custom-control custom-checkbox\">\n                                <input type=\"checkbox\" [(ngModel)]=\"i._checked\" [value]=\"i\" name=\"checkbox1\"\n                                    class=\"custom-control-input\">\n                                <span class=\"custom-control-indicator\"></span>\n                                <span class=\"custom-control-description\"> {{i.text}}</span>\n                            </label>\n                        </div>\n                        <div *ngSwitchCase=\"'radio'\">\n                            <label *ngFor=\"let i of opt.inputOptions\" class=\"radio-inline custom-control custom-radio\">\n                                <input type=\"radio\" (click)=\"promptData=i\" [checked]=\"i===promptData\" class=\"custom-control-input\">\n                                <span class=\"custom-control-indicator\"></span>\n                                <span class=\"custom-control-description\"> {{i.text}}</span>\n                            </label>\n                        </div>\n                        <input *ngSwitchDefault type=\"{{opt.input}}\"\n                            placeholder=\"{{opt.inputPlaceholder}}\" [(ngModel)]=\"promptData\" name=\"promptData\"\n                            (ngModelChange)=\"onChanage()\" (keyup)=\"onKeyup($event)\" [maxlength]=\"opt.inputAttributes.maxlength\"\n                            class=\"form-control\" [ngClass]=\"{'form-control-danger': prompError}\">\n                        <div class=\"form-control-feedback\" *ngIf=\"prompError\">{{opt.inputError}}</div>\n                    </div>\n                   </div>\n                   <div class=\"modal-footer\" *ngIf=\"opt.showConfirmButton || opt.showCancelButton\">\n                     <button type=\"button\" class=\"cancel btn\" tabIndex=\"2\" (click)=\"close()\" [ngClass]=\"opt.cancelButtonClass\" [hidden]=\"!opt.showCancelButton\">{{opt.cancelButtonText}}</button>\n                     <button type=\"button\" class=\"confirm btn\" tabIndex=\"1\" (click)=\"ok()\" [disabled]=\"prompError\" [ngClass]=\"opt.confirmButtonClass\" [hidden]=\"!opt.showConfirmButton\">{{opt.confirmButtonText}}</button>\n                   </div>\n                </div>\n             </div>","styles":["\n.modal-dialog .modal-title{display:inline-block}.modal-range [type=\"range\"]{box-shadow:none}.modal-prompt textarea{height:108px;padding:12px}.modal-prompt .form-control-feedback{font-size:12px;position:inherit;width:inherit;text-align:left}.modal-icon{width:80px;height:80px;border:4px solid transparent;border-radius:50%;margin:20px auto 30px;padding:0;position:relative;box-sizing:content-box;cursor:default;user-select:none;-webkit-tap-highlight-color:transparent}.modal-icon.modal-error{border-color:#f27474}.modal-icon.modal-error .x-mark{position:relative;display:block}.modal-icon.modal-error [class^='x-mark-line']{position:absolute;height:5px;width:47px;background-color:#f27474;display:block;top:37px;border-radius:2px}.modal-icon.modal-error [class^='x-mark-line'][class$='left']{transform:rotate(45deg);left:17px}.modal-icon.modal-error [class^='x-mark-line'][class$='right']{transform:rotate(-45deg);right:16px}.modal-icon.modal-warning{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;color:#f8bb86;border-color:#facea8;font-size:60px;line-height:80px;text-align:center}.modal-icon.modal-info{font-family:'Open Sans', sans-serif;color:#3fc3ee;border-color:#9de0f6;font-size:60px;line-height:80px;text-align:center}.modal-icon.modal-question{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;color:#87adbd;border-color:#c9dae1;font-size:60px;line-height:80px;text-align:center}.modal-icon.modal-success{border-color:#a5dc86}.modal-icon.modal-success [class^='success-circular-line']{border-radius:50%;position:absolute;width:60px;height:120px;transform:rotate(45deg)}.modal-icon.modal-success [class^='success-circular-line'][class$='left']{border-radius:120px 0 0 120px;top:-7px;left:-33px;transform:rotate(-45deg);transform-origin:60px 60px}.modal-icon.modal-success [class^='success-circular-line'][class$='right']{border-radius:0 120px 120px 0;top:-11px;left:30px;transform:rotate(-45deg);transform-origin:0 60px}.modal-icon.modal-success .success-ring{width:80px;height:80px;border:4px solid rgba(165,220,134,0.2);border-radius:50%;box-sizing:content-box;position:absolute;left:-4px;top:-4px;z-index:2}.modal-icon.modal-success .success-fix{width:7px;height:90px;position:absolute;left:28px;top:8px;z-index:1;transform:rotate(-45deg)}.modal-icon.modal-success [class^='success-line']{height:5px;background-color:#a5dc86;display:block;border-radius:2px;position:absolute;z-index:2}.modal-icon.modal-success [class^='success-line'][class$='tip']{width:25px;left:14px;top:46px;transform:rotate(45deg)}.modal-icon.modal-success [class^='success-line'][class$='long']{width:47px;right:8px;top:38px;transform:rotate(-45deg)}@keyframes animate-success-tip{0%{width:0;left:1px;top:19px}54%{width:0;left:1px;top:19px}70%{width:50px;left:-8px;top:37px}84%{width:17px;left:21px;top:48px}100%{width:25px;left:14px;top:45px}}@keyframes animate-success-long{0%{width:0;right:46px;top:54px}65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}}@keyframes rotatePlaceholder{0%{transform:rotate(-45deg)}5%{transform:rotate(-45deg)}12%{transform:rotate(-405deg)}100%{transform:rotate(-405deg)}}.animate-success-line-tip{animation:animate-success-tip 0.75s}.animate-success-line-long{animation:animate-success-long 0.75s}.modal-success.animate-success-icon .success-circular-line-right{animation:rotatePlaceholder 4.25s ease-in}@keyframes animate-error-icon{0%{transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0deg);opacity:1}}.animate-error-icon{animation:animate-error-icon 0.5s}@keyframes animate-x-mark{0%{transform:scale(0.4);margin-top:26px;opacity:0}50%{transform:scale(0.4);margin-top:26px;opacity:0}80%{transform:scale(1.15);margin-top:-6px}100%{transform:scale(1);margin-top:0;opacity:1}}.animate-x-mark{animation:animate-x-mark 0.5s}@keyframes rotate-loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}\n    "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"}]}],"ngOnInit":[{"__symbolic":"method"}],"promptCheck":[{"__symbolic":"method"}],"setFocus":[{"__symbolic":"method"}],"onChanage":[{"__symbolic":"method"}],"onKeyup":[{"__symbolic":"method"}],"ok":[{"__symbolic":"method"}]}}}}]

components/built-in.options.d.ts

@@ -64,3 +64,3 @@ export interface BuiltInOptions {
     /**
-     * 数据键值对象，如果input值为 `select` `radio` `checkbox` 时为必填项。
+     * 数据两种数据格式：键值对象或{text:string}[]数组，如果input值为 `select` `radio` `checkbox` 时为必填项。
      * 对象键表示属性名，对象值表示属性值
@@ -70,3 +70,6 @@ *
      */
-    inputOptions?: any;
+    inputOptions?: {
+        text: string;
+        [key: string]: any;
+    }[] | any;
     /**
@@ -73,0 +76,0 @@ * HTML元素属性对象，例如 `min` `max` 等，对象键表示属性名，对象值表示属性值

components/dialog.module.js

@@ -1,2 +0,1 @@
-import { KeysPipe } from './keys.pipe';
 import { NgModule, ComponentFactoryResolver, ApplicationRef, Injector } from '@angular/core';
@@ -48,4 +47,3 @@ import { CommonModule } from "@angular/common";
                     DialogWrapperComponent,
-                    BuiltInComponent,
-                    KeysPipe
+                    BuiltInComponent
                 ],
@@ -52,0 +50,0 @@ providers: [

components/dialog.module.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"dialogServiceFactory":{"__symbolic":"function","parameters":["resolver","applicationRef","injector","options"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"},"arguments":[{"__symbolic":"reference","name":"resolver"},{"__symbolic":"reference","name":"applicationRef"},{"__symbolic":"reference","name":"injector"},{"__symbolic":"reference","name":"options"}]}},"BootstrapModalModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","module":"./dialog-holder.component","name":"DialogHolderComponent"},{"__symbolic":"reference","module":"./dialog-wrapper.component","name":"DialogWrapperComponent"},{"__symbolic":"reference","module":"./built-in.dialog","name":"BuiltInComponent"},{"__symbolic":"reference","module":"./keys.pipe","name":"KeysPipe"}],"providers":[{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"}],"entryComponents":[{"__symbolic":"reference","module":"./dialog-holder.component","name":"DialogHolderComponent"},{"__symbolic":"reference","module":"./dialog-wrapper.component","name":"DialogWrapperComponent"},{"__symbolic":"reference","module":"./built-in.dialog","name":"BuiltInComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"BootstrapModalModule"},"providers":[{"provide":{"__symbolic":"reference","module":"./dialog.service","name":"DialogServiceConfig"},"useValue":{"__symbolic":"reference","name":"config"}},{"provide":{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"},"useFactory":{"__symbolic":"reference","name":"dialogServiceFactory"},"deps":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"},{"__symbolic":"reference","module":"./dialog.service","name":"DialogServiceConfig"}]}]}}}}}},{"__symbolic":"module","version":1,"metadata":{"dialogServiceFactory":{"__symbolic":"function","parameters":["resolver","applicationRef","injector","options"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"},"arguments":[{"__symbolic":"reference","name":"resolver"},{"__symbolic":"reference","name":"applicationRef"},{"__symbolic":"reference","name":"injector"},{"__symbolic":"reference","name":"options"}]}},"BootstrapModalModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","module":"./dialog-holder.component","name":"DialogHolderComponent"},{"__symbolic":"reference","module":"./dialog-wrapper.component","name":"DialogWrapperComponent"},{"__symbolic":"reference","module":"./built-in.dialog","name":"BuiltInComponent"},{"__symbolic":"reference","module":"./keys.pipe","name":"KeysPipe"}],"providers":[{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"}],"entryComponents":[{"__symbolic":"reference","module":"./dialog-holder.component","name":"DialogHolderComponent"},{"__symbolic":"reference","module":"./dialog-wrapper.component","name":"DialogWrapperComponent"},{"__symbolic":"reference","module":"./built-in.dialog","name":"BuiltInComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"BootstrapModalModule"},"providers":[{"provide":{"__symbolic":"reference","module":"./dialog.service","name":"DialogServiceConfig"},"useValue":{"__symbolic":"reference","name":"config"}},{"provide":{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"},"useFactory":{"__symbolic":"reference","name":"dialogServiceFactory"},"deps":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"},{"__symbolic":"reference","module":"./dialog.service","name":"DialogServiceConfig"}]}]}}}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"dialogServiceFactory":{"__symbolic":"function","parameters":["resolver","applicationRef","injector","options"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"},"arguments":[{"__symbolic":"reference","name":"resolver"},{"__symbolic":"reference","name":"applicationRef"},{"__symbolic":"reference","name":"injector"},{"__symbolic":"reference","name":"options"}]}},"BootstrapModalModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","module":"./dialog-holder.component","name":"DialogHolderComponent"},{"__symbolic":"reference","module":"./dialog-wrapper.component","name":"DialogWrapperComponent"},{"__symbolic":"reference","module":"./built-in.dialog","name":"BuiltInComponent"}],"providers":[{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"}],"entryComponents":[{"__symbolic":"reference","module":"./dialog-holder.component","name":"DialogHolderComponent"},{"__symbolic":"reference","module":"./dialog-wrapper.component","name":"DialogWrapperComponent"},{"__symbolic":"reference","module":"./built-in.dialog","name":"BuiltInComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"BootstrapModalModule"},"providers":[{"provide":{"__symbolic":"reference","module":"./dialog.service","name":"DialogServiceConfig"},"useValue":{"__symbolic":"reference","name":"config"}},{"provide":{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"},"useFactory":{"__symbolic":"reference","name":"dialogServiceFactory"},"deps":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"},{"__symbolic":"reference","module":"./dialog.service","name":"DialogServiceConfig"}]}]}}}}}},{"__symbolic":"module","version":1,"metadata":{"dialogServiceFactory":{"__symbolic":"function","parameters":["resolver","applicationRef","injector","options"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"},"arguments":[{"__symbolic":"reference","name":"resolver"},{"__symbolic":"reference","name":"applicationRef"},{"__symbolic":"reference","name":"injector"},{"__symbolic":"reference","name":"options"}]}},"BootstrapModalModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","module":"./dialog-holder.component","name":"DialogHolderComponent"},{"__symbolic":"reference","module":"./dialog-wrapper.component","name":"DialogWrapperComponent"},{"__symbolic":"reference","module":"./built-in.dialog","name":"BuiltInComponent"}],"providers":[{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"}],"entryComponents":[{"__symbolic":"reference","module":"./dialog-holder.component","name":"DialogHolderComponent"},{"__symbolic":"reference","module":"./dialog-wrapper.component","name":"DialogWrapperComponent"},{"__symbolic":"reference","module":"./built-in.dialog","name":"BuiltInComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"BootstrapModalModule"},"providers":[{"provide":{"__symbolic":"reference","module":"./dialog.service","name":"DialogServiceConfig"},"useValue":{"__symbolic":"reference","name":"config"}},{"provide":{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"},"useFactory":{"__symbolic":"reference","name":"dialogServiceFactory"},"deps":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"},{"__symbolic":"reference","module":"./dialog.service","name":"DialogServiceConfig"}]}]}}}}}}]

components/dialog.service.d.ts

@@ -43,3 +43,3 @@ import { ComponentFactoryResolver, ApplicationRef, Injector, Type } from "@angular/core";
 export declare class DialogServiceConfig {
-    container: HTMLElement;
+    container?: HTMLElement;
     builtInOptions?: BuiltInOptions;
@@ -46,0 +46,0 @@ }

package.json

 {
   "main": "index.js",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "simplify the work with bootstrap modal dialogs",
@@ -5,0 +5,0 @@ "typings": "index.d.ts",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2091624

0.13%

Lines of code

21026

0.13%

Worsened metrics

Number of package files

43

-8.51%

No dependency changes