[{"__symbolic":"module","version":4,"metadata":{"ConfigureViewTabComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../../../shared/configure-component-base","name":"ConfigureComponentBase","line":70,"character":47},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":64,"character":1},"arguments":[{"selector":"configure-view-tab","template":"<div class=\"design-view-tab\"> <nav class=\"diagram\"> <div class=\"diagram-div\"> <div class=\"view-tab-title\" #configureViewTitleWindow> <ul class=\"title-ul\" #configureViewTitleList [style.left.px]=\"configureViewTitleMoveDistance\"> <li *ngFor=\"let view of views\" (click)=\"selectView(view.id, view.type)\" [ngClass]=\"{'active': view.id === selectedViewId}\"> <i class=\"tabsIcon\" [ngClass]=\"getIconClass(view)\"></i> {{view.name}}{{view.modified?'*':''}} <button (click)=\"tryRemoveTabHandler(view)\" class=\"removeTabBtn\"></button> </li> </ul> </div> <div *ngFor=\"let view of views\" class=\"view-tab-content\" [style.height]=\"view.id === selectedViewId ? 'auto': '0'\"> <configure-view [commandHandler]='commandHandler' [args]=\"getConfigureViewArg(view)\" (modifiedChange)=\"view.modified = $event ;\" (elementDoubleClicked)='elementDoubleClicked($event)' (responseViewTabActive)=\"responseViewTabActive()\"> </configure-view> </div> <div class=\"more-button\"> <button class=\"more\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"> <i class=\"fcloud-left\"></i> </button> <ul class=\"dropdown-menu\"> <li> <a href=\"javascript:;\" (click)=\"closeCurrentView()\">{{lc('CloseCurrentView')}}</a> </li> <li> <a href=\"javascript:;\" (click)=\"closeOtherViews()\">{{lc('CloseOtherViews')}}</a> </li> <li> <a href=\"javascript:;\" (click)=\"closeAllViews()\">{{lc('CloseAllViews')}}</a> </li> <li> <hr> </li> <li class=\"view-list\"> <div class=\"view-list-title\" *ngFor=\"let view of views\" (click)=\"selectView(view.id, view.type)\"> {{view.name}} </div> </li> </ul> </div> </div> </nav> </div> <numerical-display-setting-modal #numericalDisplaySettingModal [viewWidth]=\"selectViewWidth\" [viewHeight]=\"selectViewHeight\"></numerical-display-setting-modal> <image-setting-modal #imageSettingModal [viewWidth]=\"selectViewWidth\" [viewHeight]=\"selectViewHeight\"> </image-setting-modal> <text-setting-modal #textSettingModalComponent></text-setting-modal> <hyperlink-modal #hyperlinkModalComponent></hyperlink-modal> <switch-indicator-light-setting-modal #switchIndicatorLightSettingModal [viewWidth]=\"selectViewWidth\" [viewHeight]=\"selectViewHeight\"></switch-indicator-light-setting-modal> <pipe-setting-modal #pipeSettingModalComponent></pipe-setting-modal> <meter-setting-modal #meterSettingModalComponent [viewWidth]=\"selectViewWidth\" [viewHeight]=\"selectViewHeight\"> </meter-setting-modal> <bar-graph-setting-modal #barGraphSettingModal></bar-graph-setting-modal> <toggle-view-setting-modal #toggleViewSettingModal [currentConfigureViewId]=\"selectedViewId\" [viewWidth]=\"selectViewWidth\" [viewHeight]=\"selectViewHeight\"></toggle-view-setting-modal> <character-setting-modal #characterDisplaySettingModal [viewWidth]=\"selectViewWidth\" [viewHeight]=\"selectViewHeight\"> </character-setting-modal> <rectangle-setting-modal #rectangleSettingModal [viewWidth]=\"selectViewWidth\" [viewHeight]=\"selectViewHeight\"> </rectangle-setting-modal> <ellipse-setting-modal #ellipseSettingModal [viewWidth]=\"selectViewWidth\" [viewHeight]=\"selectViewHeight\"> </ellipse-setting-modal> <sector-setting-modal #sectorSettingModal></sector-setting-modal> <date-time-setting-modal #dateTimeSettingModal></date-time-setting-modal> <weather-modal #weatherModalComponent></weather-modal> <app-leave-workshop-warning #leaveWorkshopWarningModal [name]=\"name\" [customWaringName]=\"customWaringName\" (onSave)=\"saveEvent()\" (onUnSave)=\"unSaveEvent()\"></app-leave-workshop-warning> ","styles":[".design-designer{ @titleBackground: #f4f4f4; @titleHeight: 28px; @titlePadding: 0 10px; ul.windowUl { padding: 0; list-style: none; } .screenTitle a { text-decoration: none; display: inline-block; height: 20px; cursor: pointer; width: 20px; background-image: url(\"/assets/common/images/configure/toolbar.png\"); } .levelSpacing { background-position: -40px -60px; } .levelSpacing:hover { background-position: 0px -60px; } .verticalSpacing { background-position: -100px -60px; } .verticalSpacing:hover { background-position: -60px -60px; } .aequilatus { background-position: -160px -60px; } .aequilatus:hover { background-position: -120px -60px; } .accordant { background-position: -220px -60px; } .accordant:hover { background-position: -180px -60px; } .large { background-position: -40px -80px; } .large:hover { background-position: 0px -80px; } .homochromy { background-position: -100px -80px; } .homochromy:hover { background-position: -60px -80px; } .topFloor { background-position: -160px -80px; } .topFloor:hover { background-position: -120px -80px; } .bottomFloor { background-position: -220px -80px; } .bottomFloor:hover { background-position: -180px -80px; } .upperFloor { background-position: -40px -100px; } .upperFloor:hover { background-position: 0px -100px; } .nextFloor { background-position: -100px -100px; } .nextFloor:hover { background-position: -60px -100px; } .top { background-position: 80px -80px; } .top:hover { background-position: 120px -80px; } .bottom { background-position: 20px -80px; } .bottom:hover { background-position: 60px -80px; } .prev { background-position: -40px -100px; } .prev:hover { background-position: 0px -100px; } .next { background-position: -100px -100px; } .next:hover { background-position: -60px -100px; } .contentBox { position: relative; overflow: hidden; width: 100%; } .windowsList { float: left; width: 220px; min-height: 500px; background: #f4f4f4; } .windowBox { border: solid 1px gray; } .padding { padding: 10px 0; } .floatRight { position: absolute; right: 0; display: inline-block; } .span { cursor: pointer; display: inline-block; height: 28px; width: 28px; } .itemList { position: relative; line-height: 24px; padding: 0 10px; } .itemList:hover { cursor: pointer; color: #000; background: #dae8ff; } .selected { background: #3695ff; color: #fff; } .configTitle { height: @titleHeight; padding: @titlePadding; background-color: @titleBackground; line-height: @titleHeight; color: #666; } @media (max-width:886px){ .diagram { top: 119px !important; } } @media (max-width:527px){ .diagram { top: 185px !important; } } .diagram { position: absolute; right: 0; top: 82px; left: 220px; bottom: 0; background-color: #bbb; .tab-content{ overflow: auto; } } .diagramContainer{ position: relative; } .contextMenu { z-index: 10001; position: absolute; left: 5px; background-color: #ffffff; display: none; font-size: 12px; font-family: sans-serif; font-weight: bold; box-shadow: 0 0 5px #666; } .contextMenu ul { list-style: none; top: 0; left: 0; margin: 0; padding: 0; } .contextMenu li a { position: relative; min-width: 60px; display: inline-block; padding: 6px; text-decoration: none; cursor: pointer; font-size: 12px; color: #666; font-weight: initial; } .contextMenu li:hover { background: #dae8ff; } .contextMenu li ul li { display: none; } .contextMenu li ul li a { position: relative; min-width: 60px; padding: 6px; text-decoration: none; cursor: pointer; } .contextMenu li:hover ul li { display: block; margin-left: 0px; margin-top: 0px; } } ",".design-view-tab{.diagram-div { position: relative; width: 100%; height: 100%; overflow: hidden; .view-tab-title { width: 100%; overflow: hidden; background: #f4f4f4; height: 28px; position: relative; ul, li { margin: 0; padding: 0; list-style: none; } ul.title-ul, .title-ul li { height: 100%; } ul.title-ul { white-space: nowrap; position: absolute; left: 0; transition: left 0.5s ease-in-out; } .title-ul li { display: inline-block; cursor: pointer; line-height: 28px; padding: 0 5px } .removeTabBtn { width: 14px; height: 14px; border: none; top: 5px; right: 0; background: url(\"/assets/common/images/configure/toolbar.png\") -150px -158px; color: transparent; } .tabsIcon { display: inline-block; width: 14px; height: 16px; position: relative; top: 2px; background: url(\"/assets/common/images/configure/toolbar.png\") -123px -158px; } .pageTabs-default-web-icon { background-position: -94px -158px; } .pageTabs-default-app-icon { background-position: -122px -158px; } .pageTabs-startup-web-icon { background-position: -80px -158px; } .pageTabs-startup-app-icon { background-position: -108px -158px; } .pageTabs-thumbnail-icon { background-position: -136px -158px; } .title-ul li:hover .removeTabBtn { background-position: -150px -158px; } .title-ul .title-ul li:hover .removeTabBtn:hover { background-position: -164px -158px; } .title-ul li:hover { background: #eee; } .title-ul li.active { background: #ddd; } } .view-tab-content { overflow: hidden; } } .popview-thumbnail-icon.tabsIcon { background: url('/assets/common/images/configure/toolbar.png'); background-position: -80px -174px; } .more-button { position: absolute; right: 0; top: 0; z-index: 999; button { background: #f4f4f4; border: 0; width: 28px; height: 28px; cursor: pointer; } .dropdown-menu { right: 0; border-radius: 0; padding: 0; hr { margin: 5px 0; } } .dropdown-menu>li>a { font-size: 12px; padding: 2px 5px; color: #666; line-height: 24px; } .dropdown-menu>li>a:hover { background: #dae8ff; } .view-list-title { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 5px; cursor: pointer; font-size: 12px; line-height: 24px; color: #666; } .view-list-title:hover { background: #dae8ff; } .more { transform: rotateZ(-90deg); .fcloud-left { margin-top: 0; } .fcloud-left:before { color: #A0A2AD; } } .view-list { max-height: 200px; overflow: hidden auto; } } }"]}]}],"members":{"numericalDisplaySettingModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":72,"character":5},"arguments":["numericalDisplaySettingModal",{"static":false}]}]}],"imageSettingModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":73,"character":5},"arguments":["imageSettingModal",{"static":false}]}]}],"textModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":74,"character":5},"arguments":["textSettingModalComponent",{"static":false}]}]}],"hyperlinkModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":75,"character":5},"arguments":["hyperlinkModalComponent",{"static":false}]}]}],"pipeModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":76,"character":5},"arguments":["pipeSettingModalComponent",{"static":false}]}]}],"meterSettingModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":77,"character":5},"arguments":["meterSettingModalComponent",{"static":false}]}]}],"switchIndicatorLightSettingModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":78,"character":5},"arguments":["switchIndicatorLightSettingModal",{"static":false}]}]}],"barGraphSettingModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":80,"character":5},"arguments":["barGraphSettingModal",{"static":false}]}]}],"toggleViewSettingModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":81,"character":5},"arguments":["toggleViewSettingModal",{"static":false}]}]}],"characterDisplaySettingModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":82,"character":5},"arguments":["characterDisplaySettingModal",{"static":false}]}]}],"rectangleSettingModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":83,"character":5},"arguments":["rectangleSettingModal",{"static":false}]}]}],"ellipseSettingModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":84,"character":5},"arguments":["ellipseSettingModal",{"static":false}]}]}],"sectorSettingModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":85,"character":5},"arguments":["sectorSettingModal",{"static":false}]}]}],"dateTimeSettingModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":86,"character":5},"arguments":["dateTimeSettingModal",{"static":false}]}]}],"weatherModalComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":87,"character":5},"arguments":["weatherModalComponent",{"static":false}]}]}],"leaveWorkshopWarningModal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":88,"character":5},"arguments":["leaveWorkshopWarningModal",{"static":false}]}]}],"configureViewTitleList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":89,"character":5},"arguments":["configureViewTitleList",{"static":false}]}]}],"configureViewTitleWindow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":90,"character":5},"arguments":["configureViewTitleWindow",{"static":false}]}]}],"configureId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":5}}]}],"viewChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":108,"character":5}}]}],"responseContentView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":109,"character":5}}]}],"commandHandler":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"getConfigureViewArg":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":140,"character":26},{"__symbolic":"reference","module":"../../../../shared/service-proxies/service-proxies","name":"ConfigureServiceProxy","line":141,"character":43},{"__symbolic":"reference","module":"../../../../shared/service-proxies/service-proxies","name":"ConfigureViewServiceProxy","line":142,"character":47},{"__symbolic":"reference","module":"ngx-bootstrap","name":"BsModalService","line":143,"character":39},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":144,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"responseViewTabActive":[{"__symbolic":"method"}],"saveDataProperty":[{"__symbolic":"method"}],"elementDoubleClicked":[{"__symbolic":"method"}],"openVideoModal":[{"__symbolic":"method"}],"openHistoryCurveModal":[{"__symbolic":"method"}],"openRingGraphModal":[{"__symbolic":"method"}],"openStraightLineModal":[{"__symbolic":"method"}],"openPolyLineModal":[{"__symbolic":"method"}],"openPolygonModal":[{"__symbolic":"method"}],"openTableModal":[{"__symbolic":"method"}],"selectView":[{"__symbolic":"method"}],"tryRemoveTabHandler":[{"__symbolic":"method"}],"getIconClass":[{"__symbolic":"method"}],"getDiagram":[{"__symbolic":"method"}],"openView":[{"__symbolic":"method"}],"refreshConfigureView":[{"__symbolic":"method"}],"deleteView":[{"__symbolic":"method"}],"removeView":[{"__symbolic":"method"}],"saveAll":[{"__symbolic":"method"}],"getDiagramJsonForViews":[{"__symbolic":"method"}],"getConfigureById":[{"__symbolic":"method"}],"getClosestTabIndex":[{"__symbolic":"method"}],"hasAvailableTabs":[{"__symbolic":"method"}],"updateConfigureViewConfigure":[{"__symbolic":"method"}],"closeCurrentView":[{"__symbolic":"method"}],"closeOtherViews":[{"__symbolic":"method"}],"closeAllViews":[{"__symbolic":"method"}],"hasModified":[{"__symbolic":"method"}],"unSaveEvent":[{"__symbolic":"method"}],"saveEvent":[{"__symbolic":"method"}],"saveOtherViews":[{"__symbolic":"method"}],"getOtherViews":[{"__symbolic":"method"}],"moveConfigureViewTitleList":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":821,"character":5},"arguments":["window:resize",[]]}]}]}}}}]