@flexem/fc-gui 3.0.0-alpha.19 → 3.0.0-alpha.190

package/gui/gui.component.js

@@ -18,6 +18,7 @@ import { Size } from '../model';
 import { DisplayMode, GlobalSettings, ViewResizeMode } from '../settings';
 import { GuiHost } from './gui-host';
 import { Guid } from '../utils/guid';
+import { ViewService } from '../view/view.service';
 let GuiComponent = class GuiComponent {
     constructor(el, localization, injector, bsModalService) {
         this.el = el;
@@ -29,6 +30,7 @@ let GuiComponent = class GuiComponent {
         this.lastScale = 1;
         this.isMobileMode = false;
         this.globalSettings = this.injector.get(GlobalSettings);
+        this.viewService = injector.get(ViewService);
     }
     get viewResizeMode() {
         switch (this.resizeMode) {
@@ -131,11 +133,11 @@ let GuiComponent = class GuiComponent {
             this.$svg = $(this.el.nativeElement).find('div.svgView').first();
             this.$svg.empty();
             const svgRootClass = 'S' + Guid.newGuid().toString('n');
-            const hostContainerId = 'H' + Guid.newGuid().toString('n');
+            this.hostContainerId = 'H' + Guid.newGuid().toString('n');
             this.$svg.addClass(svgRootClass);
             const guiOptions = {
                 svgRootClass: svgRootClass,
-                hostContainerId: hostContainerId,
+                hostContainerId: this.hostContainerId,
                 el: this.el
             };
             const host = new GuiHost(this.injector, this.bsModalService, newValue, guiOptions, this.el);
@@ -190,6 +192,17 @@ let GuiComponent = class GuiComponent {
         this.isMobileMode = this.displayMode === 'Mobile';
         this.globalSettings.displayMode = this.isMobileMode ? DisplayMode.Mobile : DisplayMode.Web;
     }
+    refreshCurrentPage() {
+        if (this.host.currentViewIndex === undefined) {
+            return false;
+        }
+        const toggleView = this.viewService.toggleViews.get(this.el);
+        if (!toggleView) {
+            return false;
+        }
+        toggleView(this.host.currentViewIndex, this.hostContainerId, this.el).subscribe();
+        return true;
+    }
 };
 __decorate([
     Input(),

package/gui/gui.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GuiComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"fc-gui","template":"<div> <div class='svgView' style=\"position: relative;display: flex;justify-content: center;align-items: center;\"></div> </div> "}]}],"members":{"context":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"resizeMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"displayMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"loadFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":5}}]}],"loaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":46,"character":9},"arguments":[{"__symbolic":"reference","module":"../localization","name":"LOCALIZATION","line":46,"character":16}]}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":45,"character":37},{"__symbolic":"reference","module":"../localization","name":"Localization","line":46,"character":61},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":47,"character":35},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":48,"character":41}]}],"ngOnChanges":[{"__symbolic":"method"}],"doubleFingerZooming":[{"__symbolic":"method"}],"getDistance":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onProviderChanged":[{"__symbolic":"method"}],"onSizeChanged":[{"__symbolic":"method"}],"onResizeModeChanged":[{"__symbolic":"method"}],"onDisplayModeChanged":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GuiComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"fc-gui","template":"<div> <div class='svgView' style=\"position: relative;display: flex;justify-content: center;align-items: center;\"></div> </div> "}]}],"members":{"context":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"resizeMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"displayMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"loadFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"loaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":50,"character":9},"arguments":[{"__symbolic":"reference","module":"../localization","name":"LOCALIZATION","line":50,"character":16}]}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":49,"character":37},{"__symbolic":"reference","module":"../localization","name":"Localization","line":50,"character":61},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":51,"character":35},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":52,"character":41}]}],"ngOnChanges":[{"__symbolic":"method"}],"doubleFingerZooming":[{"__symbolic":"method"}],"getDistance":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onProviderChanged":[{"__symbolic":"method"}],"onSizeChanged":[{"__symbolic":"method"}],"onResizeModeChanged":[{"__symbolic":"method"}],"onDisplayModeChanged":[{"__symbolic":"method"}],"refreshCurrentPage":[{"__symbolic":"method"}]}}}}]

package/localization/localization.service.d.ts

@@ -3,9 +3,12 @@ export declare const LOCALIZATION: InjectionToken<Localization>;
 export interface Localization {
     loadFailed: any;
     setting: any;
+    save: any;
     submit: any;
+    submitting: any;
     numericalValueRequired: any;
     invalidNumericalValue: any;
+    writeValueTimeout: any;
     binaryType: any;
     decimalType: any;
     hexadecimalType: any;
@@ -27,14 +30,22 @@ export interface Localization {
     offline: any;
     abnormal: any;
     disable: any;
+    invalidMonitor: any;
+    variableChanged: any;
     permissiontip: any;
     conditionIsNotMetTip: any;
     chartNoData: any;
+    lastThirtyMinutes: any;
     lastOneHour: any;
+    lastEightHour: any;
     lastTwentyFourHours: any;
     lastSevenDays: any;
     lastThirtyDays: any;
     lastOneYear: any;
+    customTimeRange: any;
+    timeRange: any;
+    startTime: any;
+    endTime: any;
     grouped: any;
     stacked: any;
     passwordVerify: any;

package/localization/localization.service.js

@@ -2,10 +2,13 @@ import { InjectionToken } from '@angular/core';
 export const LOCALIZATION = new InjectionToken('fc.gui.loc');
 export const DefaultLocalization = {
     loadFailed: 'Load failed.',
-    setting: 'Setting',
+    setting: 'Setting ',
+    save: 'Save',
     submit: 'Submit',
+    submitting: 'Submitting···',
     numericalValueRequired: 'Numerical value can\'t be emtpy',
     invalidNumericalValue: 'Numerical value is not valid',
+    writeValueTimeout: 'Write value error: Timeout',
     binaryType: 'Binary',
     decimalType: 'Decimal',
     hexadecimalType: 'Hexadecimal',
@@ -15,7 +18,7 @@ export const DefaultLocalization = {
     canNotBeNegative: 'Can not be negative',
     valueOutOfRange: 'Numerical value is out of range',
     timeout: 'timeout',
-    confirmOperationPrompt: 'Sure to do this operation?',
+    confirmOperationPrompt: 'Confirm action?',
     confirm: 'Yes',
     cancel: 'Cancel',
     characterInputRequired: 'Character input can\'t be empty',
@@ -27,17 +30,25 @@ export const DefaultLocalization = {
     offline: 'Offline',
     abnormal: 'Data abnormal',
     disable: 'Disable',
+    invalidMonitor: 'Element binding monitor point is invalid',
+    variableChanged: 'Variable changed, please re-import the device template',
     permissiontip: 'You have no permission to operate.',
-    conditionIsNotMetTip: 'Unsatisfied operating conditions or variable abnorma.',
+    conditionIsNotMetTip: 'Operation conditions not met or variable anomalies.',
     chartNoData: 'No Data Available',
+    lastThirtyMinutes: 'Last thirty minutes',
     lastOneHour: 'Last one hour',
+    lastEightHour: 'Last eight hours',
     lastTwentyFourHours: 'Last 24 hours',
     lastSevenDays: 'Last 7 days',
     lastThirtyDays: 'Last 30 days',
-    lastOneYear: 'Last 1 year',
+    lastOneYear: 'Last 6 months',
+    customTimeRange: 'Custom',
+    timeRange: 'Time Range',
+    startTime: 'Start Time',
+    endTime: 'End Time',
     grouped: 'Grouped',
     stacked: 'Stacked',
-    passwordVerify: 'Password verifiers',
+    passwordVerify: 'Password Verification',
     passwordError: 'Password error',
     password: 'Password',
     passwordToolTip: 'Password error, please re-enter',

package/localization/localization.service.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"LOCALIZATION":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":2,"character":32},"arguments":["fc.gui.loc"]},"Localization":{"__symbolic":"interface"},"DefaultLocalization":{"loadFailed":"Load failed.","setting":"Setting","submit":"Submit","numericalValueRequired":"Numerical value can't be emtpy","invalidNumericalValue":"Numerical value is not valid","binaryType":"Binary","decimalType":"Decimal","hexadecimalType":"Hexadecimal","stringType":"String","numericalValueTooLong":"Numerical value too long","fractionDigitsMustLessThan":"Fraction digits must be less than ","canNotBeNegative":"Can not be negative","valueOutOfRange":"Numerical value is out of range","timeout":"timeout","confirmOperationPrompt":"Sure to do this operation?","confirm":"Yes","cancel":"Cancel","characterInputRequired":"Character input can't be empty","character":"(Character)","characterOutofRange":"Character length is out of range","writeValueRange":"Write value range","loading":"Loading","unbind":"Unbind","offline":"Offline","abnormal":"Data abnormal","disable":"Disable","permissiontip":"You have no permission to operate.","conditionIsNotMetTip":"Unsatisfied operating conditions or variable abnorma.","chartNoData":"No Data Available","lastOneHour":"Last one hour","lastTwentyFourHours":"Last 24 hours","lastSevenDays":"Last 7 days","lastThirtyDays":"Last 30 days","lastOneYear":"Last 1 year","grouped":"Grouped","stacked":"Stacked","passwordVerify":"Password verifiers","passwordError":"Password error","password":"Password","passwordToolTip":"Password error, please re-enter","passwordRequired":"Password can't be empty","invalidVideoAddress":"Invalid video address","unconfiguredVideoAddress":"Unconfigured Video Address","weatherNotSupport":"Location not supported","weatherNotAddress":"Address not configured","weatherNotAvailable":"Address not yet available","airQualityNotSupport":"Location not supported","airQualityNotAddress":"Address not configured","airQualityNotAvailable":"Address not yet available"}}}]
+[{"__symbolic":"module","version":4,"metadata":{"LOCALIZATION":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":2,"character":32},"arguments":["fc.gui.loc"]},"Localization":{"__symbolic":"interface"},"DefaultLocalization":{"loadFailed":"Load failed.","setting":"Setting ","save":"Save","submit":"Submit","submitting":"Submitting···","numericalValueRequired":"Numerical value can't be emtpy","invalidNumericalValue":"Numerical value is not valid","writeValueTimeout":"Write value error: Timeout","binaryType":"Binary","decimalType":"Decimal","hexadecimalType":"Hexadecimal","stringType":"String","numericalValueTooLong":"Numerical value too long","fractionDigitsMustLessThan":"Fraction digits must be less than ","canNotBeNegative":"Can not be negative","valueOutOfRange":"Numerical value is out of range","timeout":"timeout","confirmOperationPrompt":"Confirm action?","confirm":"Yes","cancel":"Cancel","characterInputRequired":"Character input can't be empty","character":"(Character)","characterOutofRange":"Character length is out of range","writeValueRange":"Write value range","loading":"Loading","unbind":"Unbind","offline":"Offline","abnormal":"Data abnormal","disable":"Disable","invalidMonitor":"Element binding monitor point is invalid","variableChanged":"Variable changed, please re-import the device template","permissiontip":"You have no permission to operate.","conditionIsNotMetTip":"Operation conditions not met or variable anomalies.","chartNoData":"No Data Available","lastThirtyMinutes":"Last thirty minutes","lastOneHour":"Last one hour","lastEightHour":"Last eight hours","lastTwentyFourHours":"Last 24 hours","lastSevenDays":"Last 7 days","lastThirtyDays":"Last 30 days","lastOneYear":"Last 6 months","customTimeRange":"Custom","timeRange":"Time Range","startTime":"Start Time","endTime":"End Time","grouped":"Grouped","stacked":"Stacked","passwordVerify":"Password Verification","passwordError":"Password error","password":"Password","passwordToolTip":"Password error, please re-enter","passwordRequired":"Password can't be empty","invalidVideoAddress":"Invalid video address","unconfiguredVideoAddress":"Unconfigured Video Address","weatherNotSupport":"Location not supported","weatherNotAddress":"Address not configured","weatherNotAvailable":"Address not yet available","airQualityNotSupport":"Location not supported","airQualityNotAddress":"Address not configured","airQualityNotAvailable":"Address not yet available"}}}]

package/localization/localization.service.zh_CN.js

@@ -2,8 +2,11 @@ export const Localization_zh_CN = {
     loadFailed: '加载失败.',
     setting: '设置',
     submit: '提交',
+    save: '保存',
+    submitting: '提交中···',
     numericalValueRequired: '数值不能为空',
     invalidNumericalValue: '数值格式不正确',
+    writeValueTimeout: '写值错误：超时',
     binaryType: '二进制',
     decimalType: '十进制',
     hexadecimalType: '十六进制',
@@ -25,14 +28,22 @@ export const Localization_zh_CN = {
     offline: '离线',
     abnormal: '数据异常',
     disable: '禁用',
+    invalidMonitor: '元件绑定的监控点无效',
+    variableChanged: '变量已变更，请重新导入设备模板',
     permissiontip: '您无权限执行此操作',
     conditionIsNotMetTip: '操作条件不满足或逻辑控制变量异常',
     chartNoData: '无数据',
+    lastThirtyMinutes: '最近30分钟',
     lastOneHour: '最近1小时',
+    lastEightHour: '最近8小时',
     lastTwentyFourHours: '最近24小时',
     lastSevenDays: '最近7天',
     lastThirtyDays: '最近30天',
-    lastOneYear: '最近1年',
+    lastOneYear: '最近半年',
+    customTimeRange: '自定义',
+    timeRange: '时间范围',
+    startTime: '开始时间',
+    endTime: '结束时间',
     grouped: '分组',
     stacked: '叠加',
     passwordVerify: '密码校验',

package/localization/localization.service.zh_CN.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"Localization_zh_CN":{"loadFailed":"加载失败.","setting":"设置","submit":"提交","numericalValueRequired":"数值不能为空","invalidNumericalValue":"数值格式不正确","binaryType":"二进制","decimalType":"十进制","hexadecimalType":"十六进制","stringType":"字符串","numericalValueTooLong":"数值超长","fractionDigitsMustLessThan":"小数位不能超过","canNotBeNegative":"不能为负数","valueOutOfRange":"数值超出范围","timeout":"超时","confirmOperationPrompt":"是否确认要执行此操作？","confirm":"确定","cancel":"取消","characterInputRequired":"请输入至少一个字符","character":"(字符串)","characterOutofRange":"字符长度超限","writeValueRange":"写值范围","loading":"加载中","unbind":"未绑定","offline":"离线","abnormal":"数据异常","disable":"禁用","permissiontip":"您无权限执行此操作","conditionIsNotMetTip":"操作条件不满足或逻辑控制变量异常","chartNoData":"无数据","lastOneHour":"最近1小时","lastTwentyFourHours":"最近24小时","lastSevenDays":"最近7天","lastThirtyDays":"最近30天","lastOneYear":"最近1年","grouped":"分组","stacked":"叠加","passwordVerify":"密码校验","passwordError":"密码错误","password":"密码","passwordToolTip":"密码错误，请重新输入","passwordRequired":"密码不能为空","invalidVideoAddress":"无效的视频地址","unconfiguredVideoAddress":"未配置视频地址","weatherNotSupport":"当前位置暂不支持","weatherNotAddress":"当前设备未设置地址","weatherNotAvailable":"暂未获取设备地址","airQualityNotSupport":"当前位置暂不支持","airQualityNotAddress":"当前设备未设置地址","airQualityNotAvailable":"暂未获取设备地址"}}}]
+[{"__symbolic":"module","version":4,"metadata":{"Localization_zh_CN":{"loadFailed":"加载失败.","setting":"设置","submit":"提交","save":"保存","submitting":"提交中···","numericalValueRequired":"数值不能为空","invalidNumericalValue":"数值格式不正确","writeValueTimeout":"写值错误：超时","binaryType":"二进制","decimalType":"十进制","hexadecimalType":"十六进制","stringType":"字符串","numericalValueTooLong":"数值超长","fractionDigitsMustLessThan":"小数位不能超过","canNotBeNegative":"不能为负数","valueOutOfRange":"数值超出范围","timeout":"超时","confirmOperationPrompt":"是否确认要执行此操作？","confirm":"确定","cancel":"取消","characterInputRequired":"请输入至少一个字符","character":"(字符串)","characterOutofRange":"字符长度超限","writeValueRange":"写值范围","loading":"加载中","unbind":"未绑定","offline":"离线","abnormal":"数据异常","disable":"禁用","invalidMonitor":"元件绑定的监控点无效","variableChanged":"变量已变更，请重新导入设备模板","permissiontip":"您无权限执行此操作","conditionIsNotMetTip":"操作条件不满足或逻辑控制变量异常","chartNoData":"无数据","lastThirtyMinutes":"最近30分钟","lastOneHour":"最近1小时","lastEightHour":"最近8小时","lastTwentyFourHours":"最近24小时","lastSevenDays":"最近7天","lastThirtyDays":"最近30天","lastOneYear":"最近半年","customTimeRange":"自定义","timeRange":"时间范围","startTime":"开始时间","endTime":"结束时间","grouped":"分组","stacked":"叠加","passwordVerify":"密码校验","passwordError":"密码错误","password":"密码","passwordToolTip":"密码错误，请重新输入","passwordRequired":"密码不能为空","invalidVideoAddress":"无效的视频地址","unconfiguredVideoAddress":"未配置视频地址","weatherNotSupport":"当前位置暂不支持","weatherNotAddress":"当前设备未设置地址","weatherNotAvailable":"暂未获取设备地址","airQualityNotSupport":"当前位置暂不支持","airQualityNotAddress":"当前设备未设置地址","airQualityNotAvailable":"暂未获取设备地址"}}}]

package/modal/alert/alert-modal.component.js

@@ -30,7 +30,7 @@ AlertModalComponent = __decorate([
     Component({
         selector: 'alertModal',
         template: "<div class=\"modal-body\"> <div style=\"text-align:center\"> <div class=\"alertIcon\"></div> <h3 class=\"alert-h3\">{{alermMessage}}</h3> </div> </div> <div class=\"modal-footer form-group confirm-btn\"> <button type=\"button\" class=\"sweet-alert-btn\" (click)=\"close()\"> {{localization.confirm}} </button> </div> ",
-        styles: [".modal-header { padding: 17px; border-color: transparent; } .modal-body { padding: 17px; position: relative; text-align: center; } .modal-footer { padding: 10px 5px; text-align: center; border-color: transparent; } .alert-modal { max-width: 478px; } .alert-modal>.modal-content { padding: 17px; } h3.alert-h3 { font-size: 20px; font-weight: bold; } .alert-btn { padding: 0; margin-bottom: 0; } .alert-btn button { display: inline-block; } .alertIcon { background: url(assets/img/alert.svg); width: 88px; height: 88px; display: inline-block; } .sweet-alert-btn { color: #fff; border: none; background: #ddd; font-size: 17px; font-weight: 500; border-radius: 5px; padding: 10px 32px; margin: 26px 5px 0; cursor: point; background-color: rgb(221, 107, 85); box-shadow: rgba(221, 107, 85, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; } "]
+        styles: [".modal-header { padding: 17px; border-color: transparent; } .modal-body { padding: 17px; position: relative; text-align: center; } .modal-footer { padding: 10px 5px; text-align: center; border-color: transparent; } .alert-modal { max-width: 478px; } .alert-modal>.modal-content { padding: 17px; } h3.alert-h3 { font-size: 20px; font-weight: bold; margin-top: 10px; } .alert-btn { padding: 0; margin-bottom: 0; } .alert-btn button { display: inline-block; } .alertIcon { background: url(assets/img/alert.svg); width: 44px; height: 44px; display: inline-block; } .sweet-alert-btn { color: #fff; border: none; background: #ddd; font-size: 17px; font-weight: 500; border-radius: 5px; padding: 10px 0; width: 100px; margin: 0 5px 0; cursor: pointer; background-color: rgb(221, 107, 85); box-shadow: rgba(221, 107, 85, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; } .form-group { padding: 0 !important; justify-content: center; margin-bottom: 28px; } "]
     }),
     __param(0, Inject(LOCALIZATION)),
     __metadata("design:paramtypes", [Object])

package/modal/alert/alert-modal.component.less

@@ -26,6 +26,7 @@
 h3.alert-h3 {
   font-size: 20px;
   font-weight: bold;
+  margin-top: 10px;
 }
 
 .alert-btn {
@@ -39,8 +40,8 @@ h3.alert-h3 {
 
 .alertIcon {
   background: url(assets/img/alert.svg);
-  width: 88px;
-  height: 88px;
+  width: 44px;
+  height: 44px;
   display: inline-block;
 }
 
@@ -51,9 +52,16 @@ h3.alert-h3 {
   font-size: 17px;
   font-weight: 500;
   border-radius: 5px;
-  padding: 10px 32px;
-  margin: 26px 5px 0;
-  cursor: point;
+  padding: 10px 0;
+  width: 100px;
+  margin: 0 5px 0;
+  cursor: pointer;
   background-color: rgb(221, 107, 85);
   box-shadow: rgba(221, 107, 85, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
 }
+
+.form-group {
+  padding: 0 !important;
+  justify-content: center;
+  margin-bottom: 28px;
+}

package/modal/alert/alert-modal.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"AlertModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"alertModal","template":"<div class=\"modal-body\"> <div style=\"text-align:center\"> <div class=\"alertIcon\"></div> <h3 class=\"alert-h3\">{{alermMessage}}</h3> </div> </div> <div class=\"modal-footer form-group confirm-btn\"> <button type=\"button\" class=\"sweet-alert-btn\" (click)=\"close()\"> {{localization.confirm}} </button> </div> ","styles":[".modal-header { padding: 17px; border-color: transparent; } .modal-body { padding: 17px; position: relative; text-align: center; } .modal-footer { padding: 10px 5px; text-align: center; border-color: transparent; } .alert-modal { max-width: 478px; } .alert-modal>.modal-content { padding: 17px; } h3.alert-h3 { font-size: 20px; font-weight: bold; } .alert-btn { padding: 0; margin-bottom: 0; } .alert-btn button { display: inline-block; } .alertIcon { background: url(assets/img/alert.svg); width: 88px; height: 88px; display: inline-block; } .sweet-alert-btn { color: #fff; border: none; background: #ddd; font-size: 17px; font-weight: 500; border-radius: 5px; padding: 10px 32px; margin: 26px 5px 0; cursor: point; background-color: rgb(221, 107, 85); box-shadow: rgba(221, 107, 85, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; } "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":18,"character":17},"arguments":[{"__symbolic":"reference","module":"../../localization/localization.service","name":"LOCALIZATION","line":18,"character":24}]}]],"parameters":[{"__symbolic":"reference","module":"../../localization/localization.service","name":"Localization","line":18,"character":59}]}],"close":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"AlertModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"alertModal","template":"<div class=\"modal-body\"> <div style=\"text-align:center\"> <div class=\"alertIcon\"></div> <h3 class=\"alert-h3\">{{alermMessage}}</h3> </div> </div> <div class=\"modal-footer form-group confirm-btn\"> <button type=\"button\" class=\"sweet-alert-btn\" (click)=\"close()\"> {{localization.confirm}} </button> </div> ","styles":[".modal-header { padding: 17px; border-color: transparent; } .modal-body { padding: 17px; position: relative; text-align: center; } .modal-footer { padding: 10px 5px; text-align: center; border-color: transparent; } .alert-modal { max-width: 478px; } .alert-modal>.modal-content { padding: 17px; } h3.alert-h3 { font-size: 20px; font-weight: bold; margin-top: 10px; } .alert-btn { padding: 0; margin-bottom: 0; } .alert-btn button { display: inline-block; } .alertIcon { background: url(assets/img/alert.svg); width: 44px; height: 44px; display: inline-block; } .sweet-alert-btn { color: #fff; border: none; background: #ddd; font-size: 17px; font-weight: 500; border-radius: 5px; padding: 10px 0; width: 100px; margin: 0 5px 0; cursor: pointer; background-color: rgb(221, 107, 85); box-shadow: rgba(221, 107, 85, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; } .form-group { padding: 0 !important; justify-content: center; margin-bottom: 28px; } "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":18,"character":17},"arguments":[{"__symbolic":"reference","module":"../../localization/localization.service","name":"LOCALIZATION","line":18,"character":24}]}]],"parameters":[{"__symbolic":"reference","module":"../../localization/localization.service","name":"Localization","line":18,"character":59}]}],"close":[{"__symbolic":"method"}]}}}}]

package/modal/confirm-operation/confirm-operation-modal.component.html

@@ -1,6 +1,6 @@
-<form novalidate (ngSubmit)="confirm()" bs-modal-drag>
+<form novalidate (ngSubmit)="confirm()" bs-modal-drag class="confirm-modal">
   <div class="modal-body">
-    <div style="text-align:center;margin-top:20px;">
+    <div style="text-align:center;">
       <div class="alertIcon"></div>
       <h3 class="confirm-h3">{{localization.confirmOperationPrompt}}</h3>
     </div>

package/modal/confirm-operation/confirm-operation-modal.component.js

@@ -32,8 +32,8 @@ let ConfirmOperationModalComponent = class ConfirmOperationModalComponent {
 ConfirmOperationModalComponent = __decorate([
     Component({
         selector: 'confirmOperationModal',
-        template: "<form novalidate (ngSubmit)=\"confirm()\" bs-modal-drag> <div class=\"modal-body\"> <div style=\"text-align:center;margin-top:20px;\"> <div class=\"alertIcon\"></div> <h3 class=\"confirm-h3\">{{localization.confirmOperationPrompt}}</h3> </div> </div> <div class=\"modal-footer form-group confirm-btn-group\"> <button type=\"button\" class=\"sweet-alert-btn\" (click)=\"close()\"> {{localization.cancel}} </button> <button type=\"submit\" class=\"sweet-alert-btn\"> {{localization.confirm}} </button> </div> </form> ",
-        styles: [".modal-body { padding: 17px; position: relative; text-align: center; } .modal-footer { padding: 10px 5px; text-align: center; border-color: transparent; } .confirm-modal { max-width: 478px; } .confirm-modal>.modal-content { padding: 17px; } h3.confirm-h3 { font-size: 20px; font-weight: bold; } .confirm-btn-group { padding: 0; margin-bottom: 28px; margin-right: 50px; } .confirm-btn-group button { display: inline-block; } .confirm-btn-group button:last-child { background-color: rgb(221, 107, 85); box-shadow: rgba(221, 107, 85, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; } .alertIcon { background: url(assets/img/alert.svg); width: 88px; height: 88px; display: inline-block; } .sweet-alert-btn { color: #fff; border: none; background: #ddd; font-size: 17px; font-weight: 500; border-radius: 5px; padding: 10px 32px; margin: 26px 5px 0; cursor: pointer } "]
+        template: "<form novalidate (ngSubmit)=\"confirm()\" bs-modal-drag class=\"confirm-modal\"> <div class=\"modal-body\"> <div style=\"text-align:center;\"> <div class=\"alertIcon\"></div> <h3 class=\"confirm-h3\">{{localization.confirmOperationPrompt}}</h3> </div> </div> <div class=\"modal-footer form-group confirm-btn-group\"> <button type=\"button\" class=\"sweet-alert-btn\" (click)=\"close()\"> {{localization.cancel}} </button> <button type=\"submit\" class=\"sweet-alert-btn\"> {{localization.confirm}} </button> </div> </form> ",
+        styles: [".modal-body { padding: 17px; position: relative; text-align: center; } .modal-footer { padding: 10px 5px; text-align: center; border-color: transparent; } .confirm-modal { max-width: 478px; } .confirm-modal>.modal-content { padding: 17px; } h3.confirm-h3 { font-size: 20px; font-weight: bold; margin-top: 10px; } .confirm-modal .confirm-btn-group { padding: 0 !important; margin-bottom: 28px; justify-content: center; margin-right: 0; } .confirm-btn-group button { display: inline-block; } .confirm-btn-group button:last-child { background-color: rgb(221, 107, 85); box-shadow: rgba(221, 107, 85, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; } .alertIcon { background: url(assets/img/alert.svg); width: 44px; height: 44px; display: inline-block; } .sweet-alert-btn { color: #fff; border: none; background: #ddd; font-size: 17px; font-weight: 500; border-radius: 5px; padding: 10px 0; width: 100px; margin: 0 5px 0; cursor: pointer } "]
     }),
     __param(0, Inject(LOCALIZATION)),
     __metadata("design:paramtypes", [Object])

package/modal/confirm-operation/confirm-operation-modal.component.less

@@ -21,12 +21,14 @@
 h3.confirm-h3 {
     font-size: 20px;
     font-weight: bold;
+    margin-top: 10px;
 }
 
-.confirm-btn-group {
-    padding: 0;
+.confirm-modal .confirm-btn-group {
+    padding: 0 !important;
     margin-bottom: 28px;
-    margin-right: 50px;
+    justify-content: center;
+    margin-right: 0;
 }
 
 .confirm-btn-group button {
@@ -40,8 +42,8 @@ h3.confirm-h3 {
 
 .alertIcon {
     background: url(assets/img/alert.svg);
-    width: 88px;
-    height: 88px;
+    width: 44px;
+    height: 44px;
     display: inline-block;
 }
 
@@ -52,7 +54,8 @@ h3.confirm-h3 {
     font-size: 17px;
     font-weight: 500;
     border-radius: 5px;
-    padding: 10px 32px;
-    margin: 26px 5px 0;
+    padding: 10px 0;
+    width: 100px;
+    margin: 0 5px 0;
     cursor: pointer
 }

package/modal/confirm-operation/confirm-operation-modal.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ConfirmOperationModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"confirmOperationModal","template":"<form novalidate (ngSubmit)=\"confirm()\" bs-modal-drag> <div class=\"modal-body\"> <div style=\"text-align:center;margin-top:20px;\"> <div class=\"alertIcon\"></div> <h3 class=\"confirm-h3\">{{localization.confirmOperationPrompt}}</h3> </div> </div> <div class=\"modal-footer form-group confirm-btn-group\"> <button type=\"button\" class=\"sweet-alert-btn\" (click)=\"close()\"> {{localization.cancel}} </button> <button type=\"submit\" class=\"sweet-alert-btn\"> {{localization.confirm}} </button> </div> </form> ","styles":[".modal-body { padding: 17px; position: relative; text-align: center; } .modal-footer { padding: 10px 5px; text-align: center; border-color: transparent; } .confirm-modal { max-width: 478px; } .confirm-modal>.modal-content { padding: 17px; } h3.confirm-h3 { font-size: 20px; font-weight: bold; } .confirm-btn-group { padding: 0; margin-bottom: 28px; margin-right: 50px; } .confirm-btn-group button { display: inline-block; } .confirm-btn-group button:last-child { background-color: rgb(221, 107, 85); box-shadow: rgba(221, 107, 85, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; } .alertIcon { background: url(assets/img/alert.svg); width: 88px; height: 88px; display: inline-block; } .sweet-alert-btn { color: #fff; border: none; background: #ddd; font-size: 17px; font-weight: 500; border-radius: 5px; padding: 10px 32px; margin: 26px 5px 0; cursor: pointer } "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":16,"character":17},"arguments":[{"__symbolic":"reference","module":"../../localization/localization.service","name":"LOCALIZATION","line":16,"character":24}]}]],"parameters":[{"__symbolic":"reference","module":"../../localization/localization.service","name":"Localization","line":16,"character":59}]}],"close":[{"__symbolic":"method"}],"confirm":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ConfirmOperationModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"confirmOperationModal","template":"<form novalidate (ngSubmit)=\"confirm()\" bs-modal-drag class=\"confirm-modal\"> <div class=\"modal-body\"> <div style=\"text-align:center;\"> <div class=\"alertIcon\"></div> <h3 class=\"confirm-h3\">{{localization.confirmOperationPrompt}}</h3> </div> </div> <div class=\"modal-footer form-group confirm-btn-group\"> <button type=\"button\" class=\"sweet-alert-btn\" (click)=\"close()\"> {{localization.cancel}} </button> <button type=\"submit\" class=\"sweet-alert-btn\"> {{localization.confirm}} </button> </div> </form> ","styles":[".modal-body { padding: 17px; position: relative; text-align: center; } .modal-footer { padding: 10px 5px; text-align: center; border-color: transparent; } .confirm-modal { max-width: 478px; } .confirm-modal>.modal-content { padding: 17px; } h3.confirm-h3 { font-size: 20px; font-weight: bold; margin-top: 10px; } .confirm-modal .confirm-btn-group { padding: 0 !important; margin-bottom: 28px; justify-content: center; margin-right: 0; } .confirm-btn-group button { display: inline-block; } .confirm-btn-group button:last-child { background-color: rgb(221, 107, 85); box-shadow: rgba(221, 107, 85, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; } .alertIcon { background: url(assets/img/alert.svg); width: 44px; height: 44px; display: inline-block; } .sweet-alert-btn { color: #fff; border: none; background: #ddd; font-size: 17px; font-weight: 500; border-radius: 5px; padding: 10px 0; width: 100px; margin: 0 5px 0; cursor: pointer } "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":16,"character":17},"arguments":[{"__symbolic":"reference","module":"../../localization/localization.service","name":"LOCALIZATION","line":16,"character":24}]}]],"parameters":[{"__symbolic":"reference","module":"../../localization/localization.service","name":"Localization","line":16,"character":59}]}],"close":[{"__symbolic":"method"}],"confirm":[{"__symbolic":"method"}]}}}}]

package/modal/verify-password/verify-password-modal.component.d.ts

@@ -1,7 +1,8 @@
-import { OnInit } from '@angular/core';
+import { Injector, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Localization } from '../../localization';
 import { SecurityChecker } from '../../security';
+import { ReleasedVariableService } from '../../service';
 export declare class VerifyPasswordModalComponent implements OnInit {
     localization: Localization;
     private _onClosed;
@@ -9,8 +10,11 @@ export declare class VerifyPasswordModalComponent implements OnInit {
     passwordError: boolean;
     password: string;
     securityChecker: SecurityChecker;
+    releasedVariableService?: ReleasedVariableService;
     validationErrorText: string;
-    constructor(localization: Localization);
+    isMobileMode: boolean;
+    private readonly isDisplayModeMobile;
+    constructor(localization: Localization, injector: Injector);
     ngOnInit(): void;
     validate(): void;
     checkSecurity(): void;

package/modal/verify-password/verify-password-modal.component.html

@@ -10,11 +10,11 @@
   <div class="modal-body">
     <span class="password-span">{{localization.password}}：
     </span>
-    <input type="password" name="password" autoFocus class="form-control element-password" [(ngModel)]="password" (keyup)="validate()"
+    <input type="password" name="password" autoFocus [class.verify-password-input]="!isMobileMode" class="form-control element-password" [(ngModel)]="password" (keyup)="validate()"
       autocomplete="off">
     <span class="help-block text-danger" [hidden]="!passwordError">{{validationErrorText}}</span>
   </div>
-  <div class="modal-footer">
+  <div class="modal-footer" [class.verify-password-footer]="!isMobileMode">
     <button type="button" class="btn md-skip btn-cancel" (click)="close()">{{localization.cancel}}
     </button>
     <button type="submit" class="btn md-skip btn-primary" [disabled]="passwordError">{{localization.submit}}</button>

package/modal/verify-password/verify-password-modal.component.js

@@ -10,20 +10,26 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 var __param = (this && this.__param) || function (paramIndex, decorator) {
     return function (target, key) { decorator(target, key, paramIndex); }
 };
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, Injector } from '@angular/core';
 import { Subject } from 'rxjs';
 import { isNil } from 'lodash';
 import { LOCALIZATION } from '../../localization';
+import { DisplayMode, GlobalSettings } from '../../settings';
 let VerifyPasswordModalComponent = class VerifyPasswordModalComponent {
-    constructor(localization) {
+    constructor(localization, injector) {
         this.localization = localization;
         this._onClosed = new Subject();
         this.passwordError = false;
+        this.isMobileMode = false;
+        this.isDisplayModeMobile = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
     }
     get onClosed() {
         return this._onClosed;
     }
     ngOnInit() {
+        // 画面模拟（SimulateRemoteGuiContext）下 releasedVariableService 恒为空，
+        // 借此和真实移动端区分开，避免在 PC 浏览器模拟移动端时套用移动端专属样式
+        this.isMobileMode = this.isDisplayModeMobile && !!this.releasedVariableService;
         this.validate();
     }
     validate() {
@@ -57,10 +63,10 @@ let VerifyPasswordModalComponent = class VerifyPasswordModalComponent {
 VerifyPasswordModalComponent = __decorate([
     Component({
         selector: 'verify-password',
-        template: "<form #verifyPasswordForm=\"ngForm\" novalidate (ngSubmit)=\"checkSecurity()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.passwordVerify}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"password-span\">{{localization.password}}： </span> <input type=\"password\" name=\"password\" autoFocus class=\"form-control element-password\" [(ngModel)]=\"password\" (keyup)=\"validate()\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!passwordError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\"> <button type=\"button\" class=\"btn md-skip btn-cancel\" (click)=\"close()\">{{localization.cancel}} </button> <button type=\"submit\" class=\"btn md-skip btn-primary\" [disabled]=\"passwordError\">{{localization.submit}}</button> </div> </form> ",
-        styles: [".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; color: #fff; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { color: #fff; height: 32px; margin-right: 10px; line-height: 0px } .password-span { color: #7f939e; font-size: 14px; margin-left: 15px; } .btn-cancel { color: #fff; height: 32px; min-width: 71px; margin-right: 6px; background-color: #dddddd; line-height: 0px } .element-password { padding-left: 8px; height: 32px; min-width: 71px; margin-left: 16px; } "]
+        template: "<form #verifyPasswordForm=\"ngForm\" novalidate (ngSubmit)=\"checkSecurity()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.passwordVerify}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"password-span\">{{localization.password}}： </span> <input type=\"password\" name=\"password\" autoFocus [class.verify-password-input]=\"!isMobileMode\" class=\"form-control element-password\" [(ngModel)]=\"password\" (keyup)=\"validate()\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!passwordError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\" [class.verify-password-footer]=\"!isMobileMode\"> <button type=\"button\" class=\"btn md-skip btn-cancel\" (click)=\"close()\">{{localization.cancel}} </button> <button type=\"submit\" class=\"btn md-skip btn-primary\" [disabled]=\"passwordError\">{{localization.submit}}</button> </div> </form> ",
+        styles: [".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; color: #fff; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { color: #fff; height: 32px; min-width: 71px; margin-right: 10px; line-height: 0px } .password-span { color: #7f939e; font-size: 14px; margin-left: 15px; } .btn-cancel { color: #fff; height: 32px; min-width: 71px; margin-right: 6px; background-color: #dddddd; line-height: 0px } .element-password { padding-left: 8px; height: 32px; min-width: 71px; margin-left: 16px; } .verify-password-input { width: 600px; } .verify-password-footer { padding-right: 18px !important; } "]
     }),
     __param(0, Inject(LOCALIZATION)),
-    __metadata("design:paramtypes", [Object])
+    __metadata("design:paramtypes", [Object, Injector])
 ], VerifyPasswordModalComponent);
 export { VerifyPasswordModalComponent };

package/modal/verify-password/verify-password-modal.component.less

@@ -38,6 +38,7 @@
 .btn-primary {
   color: #fff;
   height: 32px;
+  min-width: 71px;
   margin-right: 10px;
   line-height: 0px
 }
@@ -63,3 +64,11 @@
   min-width: 71px;
   margin-left: 16px;
 }
+
+.verify-password-input {
+  width: 600px;
+}
+
+.verify-password-footer {
+  padding-right: 18px !important;
+}

package/modal/verify-password/verify-password-modal.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"VerifyPasswordModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"verify-password","template":"<form #verifyPasswordForm=\"ngForm\" novalidate (ngSubmit)=\"checkSecurity()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.passwordVerify}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"password-span\">{{localization.password}}： </span> <input type=\"password\" name=\"password\" autoFocus class=\"form-control element-password\" [(ngModel)]=\"password\" (keyup)=\"validate()\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!passwordError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\"> <button type=\"button\" class=\"btn md-skip btn-cancel\" (click)=\"close()\">{{localization.cancel}} </button> <button type=\"submit\" class=\"btn md-skip btn-primary\" [disabled]=\"passwordError\">{{localization.submit}}</button> </div> </form> ","styles":[".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; color: #fff; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { color: #fff; height: 32px; margin-right: 10px; line-height: 0px } .password-span { color: #7f939e; font-size: 14px; margin-left: 15px; } .btn-cancel { color: #fff; height: 32px; min-width: 71px; margin-right: 6px; background-color: #dddddd; line-height: 0px } .element-password { padding-left: 8px; height: 32px; min-width: 71px; margin-left: 16px; } "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":24,"character":17},"arguments":[{"__symbolic":"reference","module":"../../localization","name":"LOCALIZATION","line":24,"character":24}]}]],"parameters":[{"__symbolic":"reference","module":"../../localization","name":"Localization","line":24,"character":59}]}],"ngOnInit":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"checkSecurity":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"VerifyPasswordModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"verify-password","template":"<form #verifyPasswordForm=\"ngForm\" novalidate (ngSubmit)=\"checkSecurity()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.passwordVerify}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"password-span\">{{localization.password}}： </span> <input type=\"password\" name=\"password\" autoFocus [class.verify-password-input]=\"!isMobileMode\" class=\"form-control element-password\" [(ngModel)]=\"password\" (keyup)=\"validate()\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!passwordError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\" [class.verify-password-footer]=\"!isMobileMode\"> <button type=\"button\" class=\"btn md-skip btn-cancel\" (click)=\"close()\">{{localization.cancel}} </button> <button type=\"submit\" class=\"btn md-skip btn-primary\" [disabled]=\"passwordError\">{{localization.submit}}</button> </div> </form> ","styles":[".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; color: #fff; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { color: #fff; height: 32px; min-width: 71px; margin-right: 10px; line-height: 0px } .password-span { color: #7f939e; font-size: 14px; margin-left: 15px; } .btn-cancel { color: #fff; height: 32px; min-width: 71px; margin-right: 6px; background-color: #dddddd; line-height: 0px } .element-password { padding-left: 8px; height: 32px; min-width: 71px; margin-left: 16px; } .verify-password-input { width: 600px; } .verify-password-footer { padding-right: 18px !important; } "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":29,"character":17},"arguments":[{"__symbolic":"reference","module":"../../localization","name":"LOCALIZATION","line":29,"character":24}]}],null],"parameters":[{"__symbolic":"reference","module":"../../localization","name":"Localization","line":29,"character":59},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":29,"character":83}]}],"ngOnInit":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"checkSecurity":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}}}}]

package/modal/write-character/write-character-modal-args.d.ts

@@ -1,7 +1,9 @@
+import { ReleasedVariableService } from '../../service';
 export declare class WriteCharacterModalArgs {
     variableName: string;
     isPassword: boolean;
     charCount: number;
     originValue: any;
-    constructor(variableName: string, isPassword: boolean, charCount: number, originValue: any);
+    releasedVariableService?: ReleasedVariableService;
+    constructor(variableName: string, isPassword: boolean, charCount: number, originValue: any, releasedVariableService?: ReleasedVariableService);
 }

package/modal/write-character/write-character-modal-args.js

@@ -1,8 +1,9 @@
 export class WriteCharacterModalArgs {
-    constructor(variableName, isPassword, charCount, originValue) {
+    constructor(variableName, isPassword, charCount, originValue, releasedVariableService) {
         this.variableName = variableName;
         this.isPassword = isPassword;
         this.charCount = charCount;
         this.originValue = originValue;
+        this.releasedVariableService = releasedVariableService;
     }
 }

package/modal/write-character/write-character-modal-args.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"WriteCharacterModalArgs":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"any"}]}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"WriteCharacterModalArgs":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"../../service","name":"ReleasedVariableService","line":8,"character":41}]}]}}}}]

package/modal/write-character/write-character-modal.component.d.ts

@@ -1,4 +1,4 @@
-import { OnInit } from '@angular/core';
+import { Injector, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Localization } from '../../localization';
 import { WriteValueModelResult } from '../write-value/write-value-model-result';
@@ -8,6 +8,8 @@ export declare class WriteCharacterModalComponent implements OnInit {
     private _onClosed;
     get onClosed(): Observable<WriteValueModelResult>;
     args: WriteCharacterModalArgs;
+    isMobileMode: boolean;
+    private readonly isDisplayModeMobile;
     value: string;
     variableName: string;
     isPassword: boolean;
@@ -15,7 +17,7 @@ export declare class WriteCharacterModalComponent implements OnInit {
     validationError: boolean;
     validationErrorText: string;
     get invalidErrorText(): string;
-    constructor(localization: Localization);
+    constructor(localization: Localization, injector: Injector);
     ngOnInit(): void;
     validate(): void;
     private showValidationErrorInfo;

package/modal/write-character/write-character-modal.component.html

@@ -9,13 +9,13 @@
     </button>
   </div>
   <div class="modal-body">
-    <input type="text" name="characterInput" autoFocus class="form-control write-character-value" [(ngModel)]="value" (keyup)="validate()" *ngIf="!isPassword"
+    <input type="text" name="characterInput" autoFocus [class.form-control-write]="!isMobileMode" class="form-control write-character-value" [(ngModel)]="value" (keyup)="validate()" *ngIf="!isPassword"
       autocomplete="off">
-    <input type="password" name="passwordInput" autoFocus class="form-control write-character-value" [(ngModel)]="value" (keyup)="validate()"
+    <input type="password" name="passwordInput" autoFocus [class.form-control-write]="!isMobileMode" class="form-control write-character-value" [(ngModel)]="value" (keyup)="validate()"
       *ngIf="isPassword" autocomplete="off">
     <span class="help-block text-danger" [hidden]="!validationError">{{validationErrorText}}</span>
   </div>
-  <div class="modal-footer">
-    <button type="submit" class="btn md-skip btn-primary btn-block" [disabled]="validationError">{{localization.submit}}</button>
+  <div class="modal-footer" [class.modal-footer-write]="!isMobileMode">
+    <button type="submit" [class.btn-primary-write]="!isMobileMode" class="btn md-skip btn-primary btn-block" [disabled]="validationError">{{localization.submit}}</button>
   </div>
 </form>