[{"__symbolic":"module","version":4,"metadata":{"GraphSettingComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../../../../shared/configure-component-base","name":"ConfigureComponentBase","line":23,"character":43},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"graph-setting","styles":[".designer-graph-setting{ .graphSettingBox { height: 250px; background: #f2f3f8; overflow-x: auto; display: inline-block; .font12Size { font-size: 12px; } } .graphSvg, .graphPng { padding: 5px; border: 1px solid transparent; } .graphSvg.selectedGallery, .graphPng.selectedGallery { border-color: #2d89ef; } .stateBox { display: inline-block; width: 168px; width: 168px; margin-left: 3px; position: absolute; .graphSettingBox{ width: 100%; } } .graphBox { display: inline-block; width: 390px; .graphSettingBox{ width: 100%; } } .colorPick { width: 50px; } .span-inline-block { display: inline-block; width: 100%; } .backgroundBorder { background: #f2f3f8; padding:15px 10px; } .graphBtns{ margin-top: 5px; button{ height: 26px; line-height: 22px; margin-right:10px;  } } .editedState{ label.control-label{ display: block; width: 85px; height: 24px; line-height: 24px; margin-bottom: 0!important; } input.stroke{ width: 50px; } } .form-group{ margin-bottom: 15px; } .colorPicker{ width: 80px; height: 24px; border: 0; float: left; } .color-picker-content{ overflow: hidden; } .marginTop-10{ margin-top: 10px; } }"],"template":"<div class='designer-graph-setting'> <div *ngIf=\"!hiddenUseGraph\" class=\"fe-form-title\"> <label for=\"useGraph\"> <input type=\"checkBox\" id=\"useGraph\" #changeUseGraphCheckBox [checked]=\"useGraph\" (change)=\"changeUseGraph(changeUseGraphCheckBox.checked)\"/>  <span>{{lc('UseGallery')}}</span> </label>         </div> <div class=\"form-group border-group\" *ngIf=\"useGraph\"> <div> <div class=\"graphBox\"> <div class=\"graphSettingBox\"> <graph-list [graphList]=\"graphList\" (graphSelected)=\"selectGraph($event)\" [selectedGraphId]=\"selectedGraph?.id\"></graph-list> </div> <div class=\"graphBtns\"> <button type=\"button\" class=\"fe-btn-small fe-btn-operate\" (click)=\"importGraph()\">{{lc(\"Import\")}}</button> <button type=\"button\" class=\"fe-btn-small fe-btn-operate\" (click)=\"createOrEditGraph()\">{{lc('CreateGraph')}}</button> <button type=\"button\" *ngIf=\"selectedGraph\" class=\"fe-btn-small fe-btn-operate\" (click)=\"onAddToUserGallery()\">{{lc(\"AddUserGallery\")}}</button> </div> </div> <div class=\"stateBox\"> <div class=\"graphSettingBox \"> <graph-states [states]=\"currentGraphStates\" [(selectedState)]=\"currentGraphState\"></graph-states> </div> <div class=\"graphBtns\"> <button type=\"button\" *ngIf=\"selectedGraph\" class=\"fe-btn-small fe-btn-operate\" (click)=\"createOrEditGraph(selectedGraph.id)\">{{lc('EditGraph')}}</button> </div> </div> </div> </div> <div class=\"padding-top-10\" *ngIf=\"useGraph&&currentGraphState&&(currentGraphState.graphState.canChangeFill || currentGraphState.graphState.canChangeBorder)\"> <div class=\"fe-form-title\"> <label for=\"useCustom\"> <input type=\"checkBox\" id=\"useCustom\" #currentCustomStyleCheckBox [checked]=\"currentCustomStyle\" (change)=\"changeUseCustomStyle(currentCustomStyleCheckBox.checked)\"/> <span>{{lc('ChangeStateStyle')}}</span> </label> </div> <div class=\"form-group backgroundBorder editedState\" *ngIf=\"currentCustomStyle\"> <div class=\"color-picker-content\"> <div *ngIf=\"currentGraphState&&currentGraphState.graphState.canChangeFill\" class=\"clearfix\"> <div style=\"float:left;\"> <label class=\"control-label\">{{lc('FillColor')}}</label> </div> <div class=\"colorPicker\"> <color-picker [color]=\"fill\" (sentColor)=\"setFillColor($event)\"></color-picker> </div> </div> <div *ngIf=\"currentGraphState&&currentGraphState.graphState.canChangeBorder\" class=\"marginTop-10 clearfix\"> <div style=\"float:left;\"> <label class=\"control-label\">{{lc('StrokeColor')}}</label> </div> <div class=\"colorPicker\"> <color-picker [color]=\"stroke\" (sentColor)=\"setStrokeColor($event)\"></color-picker> </div> </div> </div> </div> </div> </div> "}]}],"members":{"configureId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"useGraph":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"useGraphChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":51,"character":5}}]}],"showModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":52,"character":5}}]}],"graphSetting":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"loadOnInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"hiddenUseGraph":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":91,"character":26},{"__symbolic":"reference","module":"abp-ng2-module/src/session/abp-session.service","name":"AbpSessionService","line":92,"character":35},{"__symbolic":"reference","module":"../../../../../shared/gallery/graph.service","name":"GraphService","line":93,"character":39},{"__symbolic":"reference","module":"../../../../../shared/service-proxies/service-proxies","name":"ConfigureGalleryServiceProxy","line":94,"character":41},{"__symbolic":"reference","module":"ngx-bootstrap","name":"BsModalService","line":95,"character":39}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"loadGalleryConfig":[{"__symbolic":"method"}],"selectGraph":[{"__symbolic":"method"}],"changeUseGraph":[{"__symbolic":"method"}],"changeUseCustomStyle":[{"__symbolic":"method"}],"createOrEditGraph":[{"__symbolic":"method"}],"importGraph":[{"__symbolic":"method"}],"onAddToUserGallery":[{"__symbolic":"method"}],"changeStrokeColor":[{"__symbolic":"method"}],"changeFillColor":[{"__symbolic":"method"}],"refreshCustomCurrentStateUrl":[{"__symbolic":"method"}],"setStrokeColor":[{"__symbolic":"method"}],"setFillColor":[{"__symbolic":"method"}]}}}}]