[{"__symbolic":"module","version":4,"metadata":{"VisibilitySettingComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../base/resizable-element-setting-modal","name":"ResizableElementSettingModal","line":30,"character":48},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"visibility-setting","styles":[".element-setting-base{ .inline-label { margin: 10px 0px 0px 10px; display: inline-block; } .border-group { // border: 1px solid #ddd; padding: 5px; margin-bottom: 0px; } .inline-selector { display: inline-block; margin: 5px 0px; } .inline-variable { display: inline-block; margin: 5px 0px; } .inline-input { display: inline-block; margin: 5px 0px; }     } .date-time-setting-modal { .modal-content { width: 600px; } .cursor-pointer{ cursor: pointer; } .recode-input{ width: calc(100% - 70px); border: 1px solid #d7dbe5;   padding:  5px 10px; } textarea.noResize { resize: none; } } .toggleViewSettingModal { .modal-content { width: 600px; } } .textSettingModal { .modal-content { width: 600px; } } ",".display-setting-base{ .position-and-rotate{ width: 100%; } .position,.rotate{ width: calc(50% - 5px); } .position .fe-modal-content,.rotate .fe-modal-content{ height: 90px; } .rotate .fe-modal-content{ position: relative; } .position{ float: left; } .rotate{ float: right; } .position .flexem-form-body{ height: 90px; } .width-and-height{ height: 30px; width: 100%; } .width-and-height>div{ width: 50%; display: inline-block; max-width: 137px; } .width-and-height:nth-child(1){ margin-bottom: 10px; } .inline-block{ display: inline-block; } span.inline-block{ width: 20px; } input.inline-block{ width: 80px; height: 30px; } .width-and-height:nth-child(2){ margin-bottom: 0; } .rotate-body{ width: 64px; height: 64px; margin: 2px 10px;   position: relative; top: -5px;  } .rotate-border{ width: 54px; height: 54px; position: absolute; border: 1px solid #b5c2ca; top: 11px; left: 5px; } .rotate-top,.rotate-middle,.rotate-bottom{ width: 100%; height: 10px; display: flex; justify-content: space-between; align-items: center; } .rotate-middle,.rotate-bottom{ margin-top:16px;  } .rotate-top>div,.rotate-middle>div,.rotate-bottom>div{ width: 10px; height: 10px; } .rotate-body{ height: 66px; } .rotate-body input[type=radio]{ width: 10px; height: 10px; position: relative; } .rotate-body input[type=radio]::before{ width: 10px; height: 10px; background: white; border: 1px solid #b5c2ca; border-radius: 0; position: absolute; left: 0; top:0; } .rotate-body input[type=radio]::after{ top: 1px; left: 1px; } .rotate-body input[type=radio]:checked:before{ width: 10px; height: 10px; background: #3695ff; } .rotate-body input[type=radio]:checked:after{ top: 1px; left: 1px; } .angle{ width:130px; position: absolute; right: 10px; bottom: 10px; } .angle span{ width: 45px; line-height: 30px; font-size: 14px; } .angle input{ width: 80px; height: 30px; padding: 5px 10px; } .flexem-form-body{ position: relative; input{ padding: 0 5px; } } .primeng-datatable-container{ .ui-table-thead{ tr{ border-bottom: 0!important; } } th,td{ box-sizing: border-box; background: transparent; padding: 0 10px!important; line-height: 29px; } } .primeng-datatable-container .primeng-no-data{ box-sizing: border-box; padding: 5px 10px; height: 30px; } .ui-table-scrollable-body{ margin-top: -1px; } .btns button{ margin-right: 10px; } .btns{ margin: 10px 0;  } .margin-top-5{ margin-top: 5px; } .and-or-select{ font-size: 12px; color: #666666; height: 24px; width: 80px; } } ",".checkadjust { white-space: nowrap; margin-left: 4px; margin-top: 0px; } "],"template":"<div class=\"form-group element-setting-base display-setting-base\"> <div class=\"row\"> <div class=\"col-xl-6 col-md-6\" [hidden]=\"!isFixedPositionVisible\"> <fieldset class=\"fieldset\"> <legend> {{lc('Rotation')}} </legend> <div class=\"form-group\"> <div class=\"row\"> <div class=\"col-xl-5 col-md-5\"> <div class=\"form-group rotate\"> <div class=\"row rotate-top\"> <div class=\"col-xl-4 col-md-4\"> <input type=\"radio\" position=\"TopLeft\" name=\"position\" [checked]=\"fixedPositionType == 0\" [value]=\"0\" (change)=\"fixedPositionType =0\" /> </div> <div class=\"col-xl-4 col-md-4\"> <input type=\"radio\" position=\"TopCenter\" name=\"position\" [value]=\"1\" [checked]=\"fixedPositionType == 1\" (change)=\"fixedPositionType =1\" /> </div> <div class=\"col-xl-4 col-md-4\"> <input type=\"radio\" position=\"TopRight\" name=\"position\" [value]=\"2\" [checked]=\"fixedPositionType == 2\" (change)=\"fixedPositionType =2\" /> </div> </div> <div class=\"row rotate-middle\"> <div class=\"col-xl-4 col-md-4\"> <input type=\"radio\" position=\"CenterLeft\" name=\"position\" [value]=\"3\" [checked]=\"fixedPositionType == 3\" (change)=\"fixedPositionType =3\" /> </div> <div class=\"col-xl-4 col-md-4\"> <input type=\"radio\" position=\"CenterCenter\" name=\"position\" [value]=\"4\" [checked]=\"fixedPositionType == 4\" (change)=\"fixedPositionType =4\" /> </div> <div class=\"col-xl-4 col-md-4\"> <input type=\"radio\" position=\"CenterRight\" name=\"position\" [value]=\"5\" [checked]=\"fixedPositionType == 5\" (change)=\"fixedPositionType =5\" /> </div> </div> <div class=\"row rotate-bottom\"> <div class=\"col-xl-4 col-md-4\"> <input type=\"radio\" position=\"BottomLeft\" name=\"position\" [value]=\"6\" [checked]=\"fixedPositionType == 6\" (change)=\"fixedPositionType =6\" /> </div> <div class=\"col-xl-4 col-md-4\"> <input type=\"radio\" position=\"BottomCenter\" name=\"position\" [value]=\"7\" [checked]=\"fixedPositionType == 7\" (change)=\"fixedPositionType =7\" /> </div> <div class=\"col-xl-4 col-md-4\"> <input type=\"radio\" position=\"BottomRight\" name=\"position\" [value]=\"8\" [checked]=\"fixedPositionType == 8\" (change)=\"fixedPositionType =8\" /> </div> </div> </div> </div> <div class=\"col-xl-7 col-md-7 angle\" hidden=true> <label class=\"form-inline-label\">{{lc('Angel')}}:</label> <input type=\"number\" name=\"Angle\" class=\"form-control form-inline-input fc-Form\" [(ngModel)]=\"rotationAngel\"> </div> </div> </div> </fieldset> </div> </div> <fieldset> <legend>{{lc('ShowOrHide')}}</legend> <div class=\"row\" style=\"padding-left: 20px;\"> <div class=\"m-radio-inline col-xl-12\"> <label class=\"m-radio\" *ngFor=\"let option of displayTypes\"> <input type=\"radio\" name=\"{{radioName}}\" [value]=\"option.key\" [(ngModel)]=\"selectedTypeKey\" (change)=\"onChangeDisplayOption(option)\" required /> {{option.name}} <span></span> </label> </div> </div> <div *ngIf=\"!isAwaysDisplay\"> <control-permission-setting #controlPermissionSetting [configureId]=\"configureId\" [permissionSettingResult]=\"permissionsResult\" (permissionChange)=\"onPermissionChanged($event)\"></control-permission-setting> <label class=\"m-checkbox checkadjust\"> <input type=\"checkBox\" [(ngModel)]=\"displayLogicEnabled\" (change)=\"changeDisplayLogicalControlCheck()\" />{{lc(\"LogicalEnableSetting\")}} <span></span> </label> <div *ngIf=\"displayLogicEnabled\"> <div class=\"align-items-center\"> <div class=\"primeng-datatable-container\"> <p-table #dataTable [value]=\"conditionItems\" scrollable=\"true\" scrollHeight=\"100px\" ScrollWidth=\"100%\" selectionMode=\"single\" [(selection)]=\"selectedCondition\" [responsive]=\"true\" [style]=\"{'Height':'110px'}\"> <ng-template pTemplate=\"header\"> <tr> <th style=\"width:105px\">{{lc('Logic')}}</th> <th>{{lc('Condition')}}</th> </tr> </ng-template> <ng-template pTemplate=\"body\" let-rowData let-record=\"$implicit\"> <tr [pSelectableRow]=\"rowData\" (dblclick)=\"onRowDbSelect(record)\" class=\"cursor-pointer\"> <td style=\"width: 105px\"> <div *ngIf=\"record.relationType==1 || record.relationType==2\"> <select class=\"form-control inline-selector fc-Form\" style=\"height:25px;margin:0px\" name=\"relation\" [(ngModel)]=\"record.relationType\"> <option *ngFor=\"let option of logicTypes \" [value]=\"option.key \">{{option.name}}</option> </select> </div> </td> <td> <div *ngIf=\"getConditionType(record)==0\"> <span>{{record.condition.variableName}}</span> <span>=</span> <span>{{bitConditionTypeOptionService.getOptionNameByKey(record.condition.bitConditionLogic)}}</span> </div> <div *ngIf=\"getConditionType(record)==1\"> <span>{{record.condition.variableName}}</span> <span>{{comparatorTypeOptionService.getOptionNameByKey(record.condition.baseVariableValue.operator)}}</span> <span *ngIf=\"record.condition.baseVariableValue.valueType==1\">{{record.condition.baseVariableValue.variableName}}</span> <span *ngIf=\"record.condition.baseVariableValue.valueType==0\">{{record.condition.baseVariableValue.constValue}}</span> <span *ngIf=\"record.condition.realtionVariableValue\">{{relationTypeOptionService.getOptionNameByKey(record.condition.relationType)}}</span> <span *ngIf=\"record.condition.realtionVariableValue\">{{record.condition.variableName}}</span> <span *ngIf=\"record.condition.realtionVariableValue\">{{comparatorTypeOptionService.getOptionNameByKey(record.condition.realtionVariableValue?.operator)}}</span> <span *ngIf=\"record.condition.realtionVariableValue?.valueType==1\">{{record.condition.realtionVariableValue?.variableName}}</span> <span *ngIf=\"record.condition.realtionVariableValue?.valueType==0\">{{record.condition.realtionVariableValue?.constValue}}</span> </div> </td> </tr> </ng-template> </p-table> <div class=\"primeng-no-data\" *ngIf=\"!conditionItems.length\"> {{l('NoData')}} </div> </div> </div> <div class=\"row\"> <div class=\"btns\"> <button (click)=\"onAdd()\" type=\"button\" class=\"btn fc-btn\">{{lc('AddNew')}}</button> <button (click)=\"onModify()\" type=\"button\" class=\"btn fc-btn\">{{lc('Modify')}}</button> <button (click)=\"onDelete()\" type=\"button\" class=\"btn fc-btn\">{{lc('Delete')}}</button> </div> </div> </div> </div> </fieldset> </div> "}]}],"members":{"dataTable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":5},"arguments":["dataTable",{"static":true}]}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":33,"character":5},"arguments":["paginator",{"static":false}]}]}],"showConditonModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":34,"character":5}}]}],"isFixedPositionVisible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":54,"character":26},{"__symbolic":"reference","module":"./display-type-option.service","name":"DisplayTypeOptionService","line":55,"character":43},{"__symbolic":"reference","module":"../condition/bit/bit-condition-type-option.service","name":"BitConditionTypeOptionService","line":56,"character":48},{"__symbolic":"reference","module":"../condition/comm/relational-operator-option.service","name":"RelationalOperatorOptionService","line":57,"character":46},{"__symbolic":"reference","module":"../condition/comm/relation-type-option.service","name":"RelationTypeOptionService","line":58,"character":44},{"__symbolic":"reference","module":"../condition/comm/logic-type-option.service","name":"LogicTypeOptionService","line":59,"character":41}]}],"init":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"onChangeDisplayOption":[{"__symbolic":"method"}],"checkVariablesName":[{"__symbolic":"method"}],"saveDisplayInfo":[{"__symbolic":"method"}],"onAdd":[{"__symbolic":"method"}],"onModify":[{"__symbolic":"method"}],"onDelete":[{"__symbolic":"method"}],"onRowDbSelect":[{"__symbolic":"method"}],"setConditionsType":[{"__symbolic":"method"}],"setConditionItem":[{"__symbolic":"method"}],"onPermissionChanged":[{"__symbolic":"method"}],"changeDisplayLogicalControlCheck":[{"__symbolic":"method"}]}}}}]