{"__symbolic":"module","version":4,"metadata":{"DBMDataStoreModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":40,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵt"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":49,"character":4},{"__symbolic":"reference","module":"@angular/http","name":"HttpModule","line":50,"character":4},{"__symbolic":"reference","module":"angular2-toaster","name":"ToasterModule","line":51,"character":4},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","module":"@hilti/carina-ui","name":"CarinaUIModule","line":53,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ng-bootstrap/ng-bootstrap","name":"NgbModule","line":54,"character":4},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":55,"character":4},"member":"forChild"},"arguments":[{"__symbolic":"reference","name":"ɵcx"}]}],"providers":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵbr"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵcw"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵcy"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵcz"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵg"},{"provide":{"__symbolic":"reference","module":"ng2-cache","name":"CacheStorageAbstract","line":75,"character":15},"useClass":{"__symbolic":"reference","module":"ng2-cache","name":"CacheMemoryStorage","line":75,"character":47}},{"__symbolic":"reference","module":"ng2-cache","name":"CacheService","line":76,"character":4},{"provide":{"__symbolic":"reference","name":"ɵp"},"useValue":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ɵda"},"member":"api_url"}},{"provide":{"__symbolic":"reference","name":"ɵq"},"useValue":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ɵda"},"member":"imageUrl"}},{"provide":{"__symbolic":"reference","module":"@angular/common","name":"LocationStrategy","line":79,"character":15},"useClass":{"__symbolic":"reference","module":"@angular/common","name":"HashLocationStrategy","line":79,"character":43}}],"bootstrap":[{"__symbolic":"reference","name":"ɵa"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":82,"character":12}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["environment"],"value":{"ngModule":{"__symbolic":"reference","name":"DBMDataStoreModule"}}}}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"app-root","template":"<div id='fileLoader' style=\"display:none\"></div>\n<div *ngIf=\"showLoader\" class=\"loader-wrapper\">\n    <div class=\"bar\">\n        <div class=\"fill fill-1\"></div>\n        <div class=\"space\"></div>\n        <div class=\"fill fill-2\"></div>\n        <div class=\"space\"></div>\n        <div class=\"fill fill-3\"></div>\n        <div class=\"space\"></div>\n        <div class=\"fill fill-4\"></div>\n        <div class=\"space\"></div>\n        <div class=\"fill fill-5\"></div>\n    </div>\n</div>\n<toaster-container [toasterconfig]=\"toasterConfig\"></toaster-container>\n<nav class=\"navbar navbar-fix-top navbar-inverse bg-faded light-steel-shadow hidden-print\" style=\"padding-right: 0px; max-width: 100%; height: 46px;\">\n    <div class=\"d-flex flex-row justify-content-between hidden-lg-up\">\n        <a class=\"navbar-brand align-self-center\" (click)=\"toggleNav(true)\" [routerLink]=\"['/main']\"><img class=\"hilti-logo\" src=\"../assets/images/hilti-logo.png\" title=\"{{'home' | translate}}\"> <span class=\"logo-txt\" style=\"text-transform:uppercase;\">Data Maintenance Tool Ver 2</span></a>\n    </div>\n</nav>\n<div>\n    <router-outlet></router-outlet>\n</div>\n<div id=\"footer\" class=\"footer\">\n    <div class=\"footer-text-container\">\n        <div class=\"footer-text\">\n            &nbsp;&nbsp; {{ 'owner-company' | translate }} | {{ 'title' | translate }} | {{ 'copyright' | translate }} {{ currentDate | date:\"yyyy\" }} | {{ 'all-rights-reserved' | translate }} | {{ 'version' | translate }} {{version}}\n        </div>\n        <div class=\"footer-logo-container\">\n            <img class=\"footer-logo\" src=\"../assets/images/logo.png\" />\n        </div>\n    </div>\n</div>","styles":["nav{padding:5px 20px;background:-webkit-linear-gradient(-32deg,#d0021b 420px,#534f53 421px)}.nav-item{font-family:Roboto,sans-serif}.logo-txt{font-size:14px;font-weight:400;margin-left:8px;letter-spacing:1.5px;opacity:.8;color:#fff}.main-menu{top:40px!important;left:-173px!important}.dots{margin-left:20px;float:right}.btn{padding:0 0 0 1rem}.btn-link{text-decoration:none;cursor:pointer;box-shadow:none;-moz-appearance:none;border:none;width:100%;text-align:left}.btn-secondary.dropdown-toggle{background:0 0;border:none;width:50px;border-radius:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;box-shadow:none}.version-padding{padding-left:17px}.test-watermark{padding-left:20px;font-size:1.25rem}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.username{margin-left:10px;font-size:13px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":76,"character":32},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","module":"@angular/common","name":"Location","line":79,"character":21},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":80,"character":19},{"__symbolic":"reference","module":"@angular/http","name":"Http","line":81,"character":17},{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":82,"character":18},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":82,"character":18},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵk"}]}],"isSearchRoute":[{"__symbolic":"method"}],"goToSettings":[{"__symbolic":"method"}],"goToPrivacyPolicy":[{"__symbolic":"method"}],"goToEndUserAgreement":[{"__symbolic":"method"}],"goToLegalNotices":[{"__symbolic":"method"}],"goToRoute":[{"__symbolic":"method"}],"cancelLegal":[{"__symbolic":"method"}],"cancelPrivacy":[{"__symbolic":"method"}],"cancelEula":[{"__symbolic":"method"}],"logout":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"toggleNav":[{"__symbolic":"method"}],"navClass":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1}}],"members":{"authenticated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵc"}]}],"setAuthenticated":[{"__symbolic":"method"}],"invalidateAuthentication":[{"__symbolic":"method"}],"removeOptions":[{"__symbolic":"method"}],"authenticatedFromStorage":[{"__symbolic":"method"}],"onAuthenticated":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","members":{"get":[{"__symbolic":"method"}],"set":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","members":{"get":[{"__symbolic":"method"}],"set":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":14,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/http","name":"Http","line":28,"character":28},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":29,"character":28},{"__symbolic":"reference","name":"ɵc"}]}],"login":[{"__symbolic":"method"}],"logout":[{"__symbolic":"method"}],"getAuthorizeUrl":[{"__symbolic":"method"}],"getToken":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"angular2-toaster","name":"ToasterService","line":15,"character":38},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":16,"character":23}]}],"changeLanguage":[{"__symbolic":"method"}],"changeBreadCrumb":[{"__symbolic":"method"}],"showLoader":[{"__symbolic":"method"}],"pdfDataRready":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵh"}]}],"getOptions":[{"__symbolic":"method"}]}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":8,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/http","name":"Http","line":11,"character":28},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":11,"character":84}]}],"createAuthorizationHeader":[{"__symbolic":"method"}],"createSimpleHeader":[{"__symbolic":"method"}],"getBlob":[{"__symbolic":"method"}],"get":[{"__symbolic":"method"}],"getWithOptions":[{"__symbolic":"method"}],"post":[{"__symbolic":"method"}],"put":[{"__symbolic":"method"}],"enforceAuthorization":[{"__symbolic":"method"}],"enrichUrl":[{"__symbolic":"method"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1}}],"members":{}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"setNav":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1}}],"members":{"UseCrowdin":[{"__symbolic":"method"}],"IsUsingCrowdin":[{"__symbolic":"method"}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"template":" <h2>{{message | translate}}</h2><br/><button (click)=\"goToProjects()\">Login</button>"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":10,"character":35},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":10,"character":69},{"__symbolic":"reference","name":"ɵc"}]}],"goToProjects":[{"__symbolic":"method"}]}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"template":"<router-outlet></router-outlet>","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"app-oauthcallback","template":"<!-- <p>\n  {{'loading' | translate}}\n</p> -->","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":41,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","module":"@angular/common","name":"Location","line":44,"character":22},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":45,"character":20},{"__symbolic":"reference","module":"@angular/http","name":"Http","line":46,"character":18},{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":47,"character":19},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","module":"@angular/platform-browser","name":"Title","line":54,"character":26},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵs"}]}],"ngOnInit":[{"__symbolic":"method"}],"finishAuthentication":[{"__symbolic":"method"}],"retrieveCode":[{"__symbolic":"method"}],"setInitiazationData":[{"__symbolic":"method"}],"getReturnUrl":[{"__symbolic":"method"}],"navigateToReturnUrl":[{"__symbolic":"method"}],"onPostAuthentication":[{"__symbolic":"method"}]}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":11,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵb"}]}],"updateUserRoles":[{"__symbolic":"method"}],"canPerformCalculations":[{"__symbolic":"method"}],"getUser":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":14,"character":25},"arguments":["api_url"]},"ɵq":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":15,"character":27},"arguments":["imageUrl"]},"ɵr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":17,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":20,"character":17},"arguments":[{"__symbolic":"reference","name":"ɵp"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":21,"character":6},"arguments":[{"__symbolic":"reference","name":"ɵq"}]}],null,null],"parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","module":"ng2-cache","name":"CacheService","line":23,"character":38}]}],"createRequestOptionsArgs":[{"__symbolic":"method"}],"getApiPath":[{"__symbolic":"method"}],"getApiPathForTypicals":[{"__symbolic":"method"}],"getImageUrl":[{"__symbolic":"method"}],"handleHttpError":[{"__symbolic":"method"}],"composeCacheKey":[{"__symbolic":"method"}],"cachingGet":[{"__symbolic":"method"}]}},"ɵs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":13,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵc"}]}],"getAuthURLWithoutHistory":[{"__symbolic":"method"}],"getAuthURL":[{"__symbolic":"method"}],"canActivate":[{"__symbolic":"method"}],"generateState":[{"__symbolic":"method"}]}},"ɵt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"app-navigation","template":"<div class=\"d-flex flex-row flex-nowrap align-items-center\" *ngIf=\"showNavBar\">\n\n    <!-- <button [ngClass]=\"getNavButtonClass(navItems.length, i)\" [style.max-width]=\"i >= 1? (94/(navItems.length -1)) + '%': ''\" [style.cursor]=\"navItem.routeUrl?'pointer':'auto'\" [style.z-index]=\"navItems.length - i\"\n    *ngFor=\"let navItem of navItems; index as i\" (click)=\"navigate(navItem)\" id=\"{{getNavItemId(navItems.length, i)}}\" title=\"{{navItem.tooltip | translate}}\" >\n    <div [ngClass]=\"getNavItemClass(navItems.length, i)\">\n      <div class=\"navigation-homeitem2\" style=\"max-width: 100%;white-space:nowrap; text-overflow: ellipsis; overflow:hidden; display:inline-block; padding-left: 10px;\">\n        <i class=\"fa fa-home\" *ngIf=\"i === 0\"></i>\n        <span [ngClass]=\"{'navigationOk': parent.viewerPanelsComponent.maxGlobalUtilization() <= 100, 'navigationNotOk': parent.viewerPanelsComponent.maxGlobalUtilization() > 100 }\" *ngIf=\"i !== 0\">{{ navItem.routeName | uppercase }}</span>\n      </div>\n    </div>\n  </button> -->\n    <!-- <i *ngIf=\"parent.viewerPanelsComponent.showWarningIcon()\" class=\"material-icons\" style=\"color: #ea721d;margin-left: -7px;margin-bottom: 2px;\">warning</i> -->\n</div>","styles":[".navigation-buttonhome{border:none;background-color:#d8d8d8;width:70px;height:50px}.navigation-buttonhomeattached{border:none;height:33px;-webkit-transform:translate(-1px);transform:translate(-1px);background-color:transparent}.navigation-buttonalone{border:none;height:33px;-webkit-transform:translate(4px);transform:translate(4px);background-color:transparent}.navigation-home{font-family:Roboto,sans-serif;color:#797979;padding-left:10px;padding-right:10px;white-space:nowrap;width:auto;height:31px;margin-right:7px}.navigation-homeitem{font-family:Roboto,sans-serif;z-index:1;color:#797979;padding-left:10px;padding-right:10px;white-space:nowrap;width:auto;height:31px;font-size:18px;font-weight:700;letter-spacing:2px;line-height:24px}.navigation-homeitem:before{z-index:2;-webkit-transform:translate(-18px,54%) rotateZ(64deg) skewX(40deg);transform:translate(-18px,54%) rotateZ(64deg) skewX(40deg);border-width:2px;width:16px;height:13px;position:absolute;border-style:solid solid none none}.navigation-loneitem{font-family:Roboto,sans-serif;z-index:1;border-width:1px;color:#797979;padding-left:10px;padding-right:10px;margin-right:4px;white-space:nowrap;height:31px;font-size:18px;font-weight:700;letter-spacing:2px;line-height:24px}.navigation-loneitem:before{z-index:2;content:'';border-color:#000;border-width:2px;width:9px;height:9px;position:absolute;top:10px;left:-5px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-style:solid solid none none}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":25,"character":32},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":25,"character":98},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":25,"character":118}]}],"navigate":[{"__symbolic":"method"}],"getNavButtonClass":[{"__symbolic":"method"}],"getNavItemId":[{"__symbolic":"method"}],"getNavItemClass":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵu":{"__symbolic":"function","parameters":["http"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@ngx-translate/http-loader","name":"TranslateHttpLoader","line":68,"character":13},"arguments":[{"__symbolic":"reference","name":"http"},"assets/i18n/",".json"]}},"ɵv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":71,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@hilti/carina-ui","name":"CarinaUIModule","line":73,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":74,"character":4},{"__symbolic":"reference","module":"ng2-file-upload","name":"FileUploadModule","line":75,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":76,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":77,"character":4},{"__symbolic":"reference","module":"ng2-select","name":"SelectModule","line":78,"character":4},{"__symbolic":"reference","module":"@ng-bootstrap/ng-bootstrap","name":"NgbModule","line":79,"character":4},{"__symbolic":"reference","module":"ng-katex","name":"KatexModule","line":80,"character":4},{"__symbolic":"reference","module":"@progress/kendo-angular-grid","name":"GridModule","line":81,"character":4},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":82,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":83,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":85,"character":15},"useFactory":{"__symbolic":"reference","name":"ɵu"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":87,"character":13}]}}]}],"declarations":[{"__symbolic":"reference","name":"ɵw"},{"__symbolic":"reference","name":"ɵy"},{"__symbolic":"reference","name":"ɵz"},{"__symbolic":"reference","name":"ɵba"},{"__symbolic":"reference","name":"ɵbb"},{"__symbolic":"reference","name":"ɵbc"},{"__symbolic":"reference","name":"ɵbd"},{"__symbolic":"reference","name":"ɵbe"},{"__symbolic":"reference","name":"ɵbf"},{"__symbolic":"reference","name":"ɵbg"},{"__symbolic":"reference","name":"ɵbh"},{"__symbolic":"reference","name":"ɵbi"},{"__symbolic":"reference","name":"ɵbj"},{"__symbolic":"reference","name":"ɵbk"},{"__symbolic":"reference","name":"ɵbl"},{"__symbolic":"reference","name":"ɵbm"},{"__symbolic":"reference","name":"ɵbn"},{"__symbolic":"reference","name":"ɵbo"},{"__symbolic":"reference","name":"ɵbp"},{"__symbolic":"reference","name":"ɵbq"},{"__symbolic":"reference","name":"ɵbs"},{"__symbolic":"reference","name":"ɵbt"},{"__symbolic":"reference","name":"ɵbu"},{"__symbolic":"reference","name":"ɵbv"},{"__symbolic":"reference","name":"ɵbw"},{"__symbolic":"reference","name":"ɵbx"},{"__symbolic":"reference","name":"ɵby"},{"__symbolic":"reference","name":"ɵbz"},{"__symbolic":"reference","name":"ɵca"},{"__symbolic":"reference","name":"ɵcb"},{"__symbolic":"reference","name":"ɵcc"},{"__symbolic":"reference","name":"ɵcd"},{"__symbolic":"reference","name":"ɵce"},{"__symbolic":"reference","name":"ɵcf"},{"__symbolic":"reference","name":"ɵcg"},{"__symbolic":"reference","name":"ɵch"},{"__symbolic":"reference","name":"ɵci"},{"__symbolic":"reference","name":"ɵcj"},{"__symbolic":"reference","name":"ɵck"},{"__symbolic":"reference","name":"ɵcl"},{"__symbolic":"reference","name":"ɵcm"},{"__symbolic":"reference","name":"ɵcn"},{"__symbolic":"reference","name":"ɵco"},{"__symbolic":"reference","name":"ɵcp"},{"__symbolic":"reference","name":"ɵcq"},{"__symbolic":"reference","name":"ɵcr"},{"__symbolic":"reference","name":"ɵcs"},{"__symbolic":"reference","name":"ɵct"},{"__symbolic":"reference","name":"ɵcu"}],"exports":[{"__symbolic":"reference","name":"ɵcs"},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":144,"character":4}],"providers":[{"__symbolic":"reference","name":"ɵcv"},{"__symbolic":"reference","name":"ɵcw"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":150,"character":12}]}]}],"members":{}},"ɵw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"template":"<!-- <div>\n    Welcome to DMT2 Web services.\n</div>\n<br>\n<br>\n<br> -->\n<div *ngIf=\"isStpViewerVisible\" id=\"viewerPanelTab\" class=\"viewerPanel\">\n    <stp-configure #stpConfigure (onShowViewer)='showViewer($event)' [args]='showViewerArgs'></stp-configure>\n</div>\n<div class=\"row displayBlock\" (click)=\"hide = true\">\n    <div class=\"col-sidebar\">\n        <app-side-menu [sideBar]=\"sideBar\"></app-side-menu>\n    </div>\n    <div class=\"information flex\" [ngClass]=\"{'hidden': hide}\">\n        <div class=\"col-md-2 information-arrow flex\">\n            <div class=\"information-arrow2\"></div>\n            <div class=\"information-square\"></div>\n        </div>\n        <div class=\"col-md-7 information-text\">Welcome to your Data Mainstance Tool. You can manage all data via this left navigation menu.</div>\n        <div class=\"col-md-3 information-dismiss\" (click)=\"hide = true\">DISMISS</div>\n    </div>\n    <div class=\"col-navbar\">\n        <div class=\"navbar\">\n            <span>Home</span> \n            <i class=\"fa fa-angle-right\" *ngIf=\"menuTitle\"></i>\n            <span>{{menuTitle | translate}}</span>\n            <i class=\"fa fa-angle-right\" *ngIf=\"chooseItem\"></i>\n            <span class=\"menuItem\">{{chooseItem | translate}}</span>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'crossSections'\">\n            <div class=\"col-3\">\n                <app-cross-section-grid #sideBar [crossSectionComponent]=\"crossSectionComponent\"></app-cross-section-grid>\n            </div>\n            <div class=\"col-9\">\n                <app-cross-section-managment (onShowViewer)='showViewer($event)' #crossSectionComponent></app-cross-section-managment>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'connectors'\">\n            <div class=\"col-3\">\n                <app-connector-grid #sideBar [connectorComponent]=\"connectorComponent\"></app-connector-grid>\n            </div>\n            <div class=\"col-9\">\n                <app-connector-managment (onShowViewer)='showViewer($event)' #connectorComponent></app-connector-managment>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'bases'\">\n            <div class=\"col-3\">\n                <app-bases-grid #sideBar [basesComponent]=\"basesComponent\"></app-bases-grid>\n            </div>\n            <div class=\"col-9\">\n                <app-bases-managment (onShowViewer)='showViewer($event)' #basesComponent></app-bases-managment>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'pipeFastenings'\">\n            <div class=\"col-3\">\n                <app-pipe-fastenings-grid #sideBar [pipeFasteningComponent]=\"pipeFasteningComponent\"></app-pipe-fastenings-grid>\n            </div>\n            <div class=\"col-9\">\n                <app-pipe-fastenings-managment (onShowViewer)='showViewer($event)' #pipeFasteningComponent></app-pipe-fastenings-managment>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'accesories'\">\n            <div class=\"col-3\">\n                Accesories\n            </div>\n            <div class=\"col-9\">\n\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'pipeRings'\">\n            <div class=\"col-3\">\n                <app-pipe-rings-grid #sideBar [pipeRingsComponent]=\"pipeRingsComponent\"></app-pipe-rings-grid>\n            </div>\n            <div class=\"col-9\">\n                <app-pipe-rings-managment (onShowViewer)='showViewer($event)' #pipeRingsComponent></app-pipe-rings-managment>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'channels'\">\n            <div class=\"col-3\">\n                <app-channels-grid #sideBar [channelComponent]=\"channelComponent\"></app-channels-grid>\n            </div>\n            <div class=\"col-9\">\n                <app-channels-managment (onShowViewer)='showViewer($event)' #channelComponent></app-channels-managment>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'systems'\">\n            <div class=\"col-12\">\n                <app-systems-grid #sideBar></app-systems-grid>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'materials'\">\n            <div class=\"col-12\">\n                <app-materials-grid #sideBar></app-materials-grid>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'designBases'\">\n            <div class=\"col-12\">\n                <app-design-bases-grid #sideBar></app-design-bases-grid>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'interactionFormulas'\">\n            <div class=\"col-12\">\n                Interaction formulas\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'corosionProtection'\">\n            <div class=\"col-12\">\n                <app-corosion-protections-grid #sideBar></app-corosion-protections-grid>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'interactionEquations'\">\n            <div class=\"col-12\">\n                <app-interaction-equations-grid #sideBar></app-interaction-equations-grid>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'subcomponentsForVerification'\">\n            <div class=\"col-12\">\n                <app-subcomponents-verification-grid #sideBar></app-subcomponents-verification-grid>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'releases'\">\n            <div class=\"col-12\">\n                <app-releases-grid #sideBar></app-releases-grid>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'piperingGroups'\">\n            <div class=\"col-12\">\n                <app-pipering-groups-grid #sideBar></app-pipering-groups-grid>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'pipeFunctions'\">\n            <div class=\"col-12\">\n                <app-pipe-functions-grid #sideBar></app-pipe-functions-grid>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'pipeGroups'\">\n            <div class=\"col-12\">\n                <app-pipe-groups-grid #sideBar></app-pipe-groups-grid>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'pipeMaterialGroups'\">\n            <div class=\"col-12\">\n                <app-pipe-materials-grid #sideBar [managmentComponent]=\"pipeMaterialsManagment\"></app-pipe-materials-grid>\n                <app-pipe-material-managment #pipeMaterialsManagment ></app-pipe-material-managment>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'insulationMaterials'\">\n            <div class=\"col-12\">\n                <app-insulation-materials-grid #sideBar [managmentComponent]=\"insulationMaterialManagement\"></app-insulation-materials-grid>\n                <app-insulation-material-managment #insulationMaterialManagement ></app-insulation-material-managment>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'pipes'\">\n            <div class=\"col-12\">\n                <app-pipes-grid #sideBar [managmentComponent]=\"pipesManagment\"></app-pipes-grid>\n                <app-pipes-managment #pipesManagment ></app-pipes-managment>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'piperingBosses'\">\n            <div class=\"col-12\">\n                <app-pipering-bosses-grid #sideBar [managmentComponent]=\"piperingBossManagement\"></app-pipering-bosses-grid>\n                <app-pipering-bosses-managment #piperingBossManagement></app-pipering-bosses-managment>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'pipeFasteningGroups'\">\n            <div class=\"col-12\">\n                <app-pipe-fastening-groups-grid></app-pipe-fastening-groups-grid>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'pipeMaterialTypes'\">\n            <div class=\"col-12\">\n                <app-pipe-material-types-grid></app-pipe-material-types-grid>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'pipeToPiperings'\">\n            <div class=\"col-12\">\n                <app-pipe-to-piperings-grid #sideBar [managmentComponent]=\"pipeToPiperingsManagement\"></app-pipe-to-piperings-grid>\n                <app-pipe-to-piperings-managment #pipeToPiperingsManagement ></app-pipe-to-piperings-managment>\n            </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px;\" *ngIf=\"chooseItem === 'piperingFamilies'\">\n            <div class=\"col-12\">\n                <app-pipering-families-grid #sideBar [managmentComponent]=\"piperingFamilyManagement\"></app-pipering-families-grid>\n                <app-pipering-family-managment #piperingFamilyManagement ></app-pipering-family-managment>\n            </div>\n        </div>\n    </div>\n</div>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.viewerPanel{float:right;position:absolute;left:10%;padding:6px;z-index:10000000;width:80%;background:#fff}.col-sidebar{background-color:#2e2c2e;color:#fff;width:236px}.navbar{background-color:#f5f5f5;height:80px;justify-content:normal;font-size:19px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;color:#2e2c2e;padding:.5rem 2rem}.navbar .fa-angle-right{padding:0 10px 4px;font-weight:600;color:#797979}.col-navbar{padding-left:0;padding-right:0;width:calc(100% - 236px)}#viewerPanelTab{border:2px solid #989598}.information{width:360px;height:93px;background-color:#333;position:absolute;left:255px;top:15%;z-index:10}.information:after{content:\"\";position:absolute;width:0;height:0;border-width:10px;border-style:solid;border-color:transparent #333 transparent transparent;top:36.5px;left:-20px}.information-text{color:#fff;font-size:13px;padding:0}.information-dismiss{color:#80aa89;font-size:13px;cursor:pointer}.information-arrow{padding:0}.information-arrow2{width:0;height:0;border-top:14px solid transparent;border-right:18px solid #19af37;border-bottom:14px solid transparent;display:inline-block}.information-square{width:14px;height:15px;background:#19af37;display:inline-block}.hidden{visibility:hidden;transition:.5s;opacity:0}.displayBlock{display:-webkit-box}.menuItem{color:#797979}"]}]}],"members":{"sideBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":201,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":212,"character":20},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"logout":[{"__symbolic":"method"}],"showViewer":[{"__symbolic":"method"}],"sidemenuChoice":[{"__symbolic":"method"}]}},"ɵx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":8,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵh"}]}],"sentSTPFileForConnectors":[{"__symbolic":"method"}],"sentSTPFileForCrossSections":[{"__symbolic":"method"}],"sentSTPFileForChannels":[{"__symbolic":"method"}],"sentSTPFileForPipeRings":[{"__symbolic":"method"}],"sendPicture":[{"__symbolic":"method"}],"getPicture":[{"__symbolic":"method"}],"deleteFile":[{"__symbolic":"method"}],"checkTaskStatus":[{"__symbolic":"method"}],"loadAllConnectors":[{"__symbolic":"method"}],"loadSpecificConnectors":[{"__symbolic":"method"}],"updateUniversalConnectorInDb":[{"__symbolic":"method"}],"addNewUniversalConnectorIntoDb":[{"__symbolic":"method"}],"removeUniversalConnector":[{"__symbolic":"method"}],"loadAllCrossSections":[{"__symbolic":"method"}],"loadAllThreadedRods":[{"__symbolic":"method"}],"updateCrossSectionInDb":[{"__symbolic":"method"}],"addNewCrossSectionIntoDb":[{"__symbolic":"method"}],"removeCrossSection":[{"__symbolic":"method"}],"loadAllChannels":[{"__symbolic":"method"}],"updateChannelInDb":[{"__symbolic":"method"}],"addNewChannelIntoDb":[{"__symbolic":"method"}],"removeChannel":[{"__symbolic":"method"}],"loadAllSystems":[{"__symbolic":"method"}],"updateSystemInDb":[{"__symbolic":"method"}],"addNewSystemIntoDb":[{"__symbolic":"method"}],"removeSystem":[{"__symbolic":"method"}],"loadAllCorosionProtections":[{"__symbolic":"method"}],"updateCorosionProtectionInDb":[{"__symbolic":"method"}],"addNewCorosionProtectionIntoDb":[{"__symbolic":"method"}],"removeCorosionProtection":[{"__symbolic":"method"}],"loadAllDesignBases":[{"__symbolic":"method"}],"updateDesignBaseInDb":[{"__symbolic":"method"}],"addNewDesignBaseIntoDb":[{"__symbolic":"method"}],"removeDesignBase":[{"__symbolic":"method"}],"loadAllSubcomponentsForVerification":[{"__symbolic":"method"}],"updateSubcomponentForVerificationInDb":[{"__symbolic":"method"}],"addNewSubcomponentForVerificationIntoDb":[{"__symbolic":"method"}],"removeSubcomponentForVerification":[{"__symbolic":"method"}],"loadAllInteracionEquations":[{"__symbolic":"method"}],"updateInteractionEquationInDb":[{"__symbolic":"method"}],"addNewInteracionEquationIntoDb":[{"__symbolic":"method"}],"removeInteracionEquation":[{"__symbolic":"method"}],"loadAllReleases":[{"__symbolic":"method"}],"updateReleaseInDb":[{"__symbolic":"method"}],"addNewReleaseIntoDb":[{"__symbolic":"method"}],"removeRelease":[{"__symbolic":"method"}],"addNewConnectorVariantIntoDb":[{"__symbolic":"method"}],"loadAllConnectorVariants":[{"__symbolic":"method"}],"removeVariant":[{"__symbolic":"method"}],"updateVariantInDb":[{"__symbolic":"method"}],"addNewVariantVerificationIntoDb":[{"__symbolic":"method"}],"loadVariantVerifications":[{"__symbolic":"method"}],"removeVariantVerification":[{"__symbolic":"method"}],"updateVariantVerificationInDb":[{"__symbolic":"method"}],"duplicateVariantData":[{"__symbolic":"method"}],"addNewMaterialIntoDb":[{"__symbolic":"method"}],"loadAllMaterials":[{"__symbolic":"method"}],"removeMaterial":[{"__symbolic":"method"}],"updateMaterialInDb":[{"__symbolic":"method"}],"addNewPiperingGroupIntoDb":[{"__symbolic":"method"}],"loadAllPiperingGroups":[{"__symbolic":"method"}],"removePiperingGroup":[{"__symbolic":"method"}],"updatePiperingGroupInDb":[{"__symbolic":"method"}],"addNewPiperingIntoDb":[{"__symbolic":"method"}],"loadAllPiperings":[{"__symbolic":"method"}],"getSpecificPipering":[{"__symbolic":"method"}],"removePipering":[{"__symbolic":"method"}],"updatePiperingInDb":[{"__symbolic":"method"}],"addNewPiperingVariantIntoDb":[{"__symbolic":"method"}],"loadAllPiperingVariants":[{"__symbolic":"method"}],"removePiperingVariant":[{"__symbolic":"method"}],"updatePiperingVariantInDb":[{"__symbolic":"method"}],"postPiperingVariantConfiguration":[{"__symbolic":"method"}],"getPiperingVariantConfigurationData":[{"__symbolic":"method"}],"addNewPipeFunctionIntoDb":[{"__symbolic":"method"}],"loadAllPipeFunctions":[{"__symbolic":"method"}],"removePipeFunction":[{"__symbolic":"method"}],"updatePipeFunctionInDb":[{"__symbolic":"method"}],"addNewPipeMaterialTypeIntoDb":[{"__symbolic":"method"}],"loadAllPipeMaterialTypes":[{"__symbolic":"method"}],"removePipeMaterialType":[{"__symbolic":"method"}],"updatePipeMaterialTypeInDb":[{"__symbolic":"method"}],"addNewPipeGroupIntoDb":[{"__symbolic":"method"}],"loadAllPipeGroups":[{"__symbolic":"method"}],"removePipeGroup":[{"__symbolic":"method"}],"updatePipeGroupInDb":[{"__symbolic":"method"}],"addNewPipeFasteningGroupIntoDb":[{"__symbolic":"method"}],"loadAllPipeFasteningGroups":[{"__symbolic":"method"}],"removePipeFasteningGroup":[{"__symbolic":"method"}],"updatePipeFasteningGroupInDb":[{"__symbolic":"method"}],"addNewPipeMaterialIntoDb":[{"__symbolic":"method"}],"loadAllPipeMaterials":[{"__symbolic":"method"}],"removePipeMaterial":[{"__symbolic":"method"}],"updatePipeMaterialInDb":[{"__symbolic":"method"}],"addNewPipeMaterialConditionIntoDb":[{"__symbolic":"method"}],"loadPipeMaterialConditions":[{"__symbolic":"method"}],"removePipeMaterialCondition":[{"__symbolic":"method"}],"updatePipeMaterialConditionInDb":[{"__symbolic":"method"}],"addNewInsulationMaterialIntoDb":[{"__symbolic":"method"}],"loadAllInsulationMaterials":[{"__symbolic":"method"}],"removeInsulationMaterial":[{"__symbolic":"method"}],"updateInsulationMaterialInDb":[{"__symbolic":"method"}],"addNewInsulationMaterialSizeIntoDb":[{"__symbolic":"method"}],"loadInsulationMaterialSizes":[{"__symbolic":"method"}],"removeInsulationMaterialSize":[{"__symbolic":"method"}],"updateInsulationMaterialSizeInDb":[{"__symbolic":"method"}],"addNewPipeIntoDb":[{"__symbolic":"method"}],"loadAllPipes":[{"__symbolic":"method"}],"removePipe":[{"__symbolic":"method"}],"updatePipeInDb":[{"__symbolic":"method"}],"addNewPipeSizeIntoDb":[{"__symbolic":"method"}],"loadPipeSizes":[{"__symbolic":"method"}],"removePipeSize":[{"__symbolic":"method"}],"updatePipeSizeInDb":[{"__symbolic":"method"}],"addNewPiperingBossIntoDb":[{"__symbolic":"method"}],"loadAllPiperingBosses":[{"__symbolic":"method"}],"removePiperingBoss":[{"__symbolic":"method"}],"updatePiperingBossInDb":[{"__symbolic":"method"}],"addNewPiperingBossThreadedRodIntoDb":[{"__symbolic":"method"}],"loadPiperingBossThreadedRods":[{"__symbolic":"method"}],"removePiperingBossThreadedRod":[{"__symbolic":"method"}],"updatePiperingBossThreadedRodInDb":[{"__symbolic":"method"}],"addNewPipeToPiperingIntoDb":[{"__symbolic":"method"}],"loadAllPipeToPiperings":[{"__symbolic":"method"}],"removePipeToPipering":[{"__symbolic":"method"}],"updatePipeToPiperingInDb":[{"__symbolic":"method"}],"addNewWorkingPiperingIntoDb":[{"__symbolic":"method"}],"loadWorkingPiperings":[{"__symbolic":"method"}],"removeWorkingPipering":[{"__symbolic":"method"}],"updateWorkingPiperingInDb":[{"__symbolic":"method"}],"addNewPiperingFamilyIntoDb":[{"__symbolic":"method"}],"loadAllPiperingFamilies":[{"__symbolic":"method"}],"removePiperingFamily":[{"__symbolic":"method"}],"updatePiperingFamilyInDb":[{"__symbolic":"method"}],"getConnectorTypeArray":[{"__symbolic":"method"}],"getPipeRingGraphicalRepresentationsArray":[{"__symbolic":"method"}]}},"ɵy":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"app-side-menu","template":"<div class=\"sidemenu-panel\" id=\"sidebar\">\n    <div class=\"sidebarSystem pleft-20\">\n        <select name=\"\" id=\"droplist\">\n            <option value=\"\" disabled selected>SYSTEM NAME</option>\n            <option value=\"1\">MT</option>\n            <option value=\"2\">MI</option>\n            <option value=\"3\">MQ</option>\n        </select>\n    </div>\n    <div class=\"sidemenu-tabs-wrapper\">\n        <div>\n            <h5 class=\"nav-header pleft-20\">\n                <i class=\"fa fa-th\"></i> Master data</h5>\n            <div [class.activeMenuItem]=\"choiceName === 'crossSections'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('crossSections','masterData')\">\n                Cross sections\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'connectors'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('connectors','masterData')\">\n                Connectors\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'bases'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('bases','masterData')\">\n                Bases\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'pipeFastenings'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('pipeFastenings','masterData')\">\n                Pipe fastenings\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'accesories'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('accesories','masterData')\">\n                Accesories\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'pipeRings'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('pipeRings','masterData')\">\n                Pipe rings\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'channels'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('channels','masterData')\">\n                Channels\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'pipes'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('pipes','masterData')\">\n                Pipes\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'piperingBosses'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('piperingBosses','masterData')\">\n                Pipering Bosses\n            </div>\n        </div>\n        <br>\n        <div>\n            <h5 class=\"nav-header pleft-20\">\n                <i class=\"fa fa-th\"></i> Dictionaries</h5>\n            <div [class.activeMenuItem]=\"choiceName === 'systems'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('systems','dictionaries')\">\n                Systems\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'materials'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('materials','dictionaries')\">\n                Materials\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'designBases'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('designBases','dictionaries')\">\n                Design bases\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'interactionFormulas'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('interactionFormulas','dictionaries')\">\n                Interaction formulas\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'corosionProtection'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('corosionProtection','dictionaries')\">\n                Corosion protection\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'interactionEquations'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('interactionEquations','dictionaries')\">\n                Interaction equations\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'subcomponentsForVerification'\" class=\"justBottomBorder pleft-20 nav-element\"\n                (click)=\"setSidemenuChoice('subcomponentsForVerification','dictionaries')\">\n                Subcomponents for verification\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'releases'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('releases','dictionaries')\">\n                Releases\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'piperingGroups'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('piperingGroups','dictionaries')\">\n                Pipe-ring groups\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'pipeFunctions'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('pipeFunctions','dictionaries')\">\n                Pipe functions\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'pipeGroups'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('pipeGroups','dictionaries')\">\n                Pipe groups\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'pipeMaterialGroups'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('pipeMaterialGroups','dictionaries')\">\n                Pipe material groups\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'insulationMaterials'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('insulationMaterials','dictionaries')\">\n                Insulation materials\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'pipeFasteningGroups'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('pipeFasteningGroups','dictionaries')\">\n                Pipe Fastening Groups\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'pipeMaterialTypes'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('pipeMaterialTypes','dictionaries')\">\n                Pipe Material Types\n            </div>\n            <div [class.activeMenuItem]=\"choiceName === 'piperingFamilies'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('piperingFamilies','dictionaries')\">\n                Pipering families\n            </div>\n        </div>\n        <div>\n            <h5 class=\"nav-header pleft-20\">\n                <i class=\"fa fa-th\"></i> Settings</h5>\n            <div [class.activeMenuItem]=\"choiceName === 'pipeToPiperings'\" class=\"justBottomBorder pleft-20 nav-element\" (click)=\"setSidemenuChoice('pipeToPiperings','settings')\">\n                Pipe to Piperings\n            </div>\n        </div>\n    </div>\n</div>","styles":["#sidebar{font-size:14px;line-height:30px}#droplist{width:172px;height:22px;background-color:#2e2c2e;color:#a9a9a9;border-left:0;border-top:0;border-right:0}.regularObjectBorder{border-width:1px;border-style:solid}.justTopBorder{border-bottom:0;border-left:0;border-right:0}.justRightBorder{border-bottom:0;border-left:0;border-top:0}.justBottomBorder{border-right:0;border-left:0;border-top:0}.sidebarSystem{padding:16px 0}h5{line-height:36px}.nav-header{border-bottom:2px solid #555;text-transform:uppercase;font-size:16px}.pleft-20{padding-left:20px;padding-right:20px}.nav-element{padding-top:5px;padding-bottom:5px;border-bottom:1px solid #555}.nav-element a{color:#a9a9a9}.nav-element a:hover{text-decoration:none}.nav-element:hover{background-color:#555355;cursor:pointer}.sidemenu-panel{height:100%}.sidemenu-tabs-wrapper{overflow-y:auto;max-height:90%}"]}]}],"members":{"sideBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"showConnector":[{"__symbolic":"method"}],"setSidemenuChoice":[{"__symbolic":"method"}]}},"ɵz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"app-connector-grid","template":"<!-- <div [hidden]=\"isConnectorHidden\">\n    <hc-data-grid id=\"mainGrid\" (onAddClick)=\"addConnector()\" [data]=\"myArray\" [select]=\"false\" [headers]=\"headers\" [subheader]=\"true\" [displayedColumns]=\"displayedColumns\" (onEditClick)=\"onConnectorClick($event)\">\n    </hc-data-grid>\n</div> -->\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"addConnectorModal\">\n    <div class=\"modal-dialog\">\n            <div class=\"form\">\n                    <form class=\"form-group\" [formGroup]=\"formGroup\">\n                        <div class=\"modal-content\">\n        \n                            <!-- Modal Header -->\n                            <div class=\"modal-header\">\n                                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                            </div>\n        \n                            <!-- Modal body -->\n                            <div class=\"modal-body display-flex\">\n                                <div>\n                                    <div>\n                                        <div class=\"display-flex\">\n                                            <span class=\"modal-label\">Article no:</span>\n                                            <input type=\"number\" formControlName=\"articleNumber\" [(ngModel)]=\"templateConnector.articleNumber\">\n                                        </div>\n                                        <div class=\"display-flex\">\n                                            <span class=\"modal-label\">Name:</span>\n                                            <input type=\"text\" [(ngModel)]=\"templateConnector.name\" formControlName=\"name\">\n                                        </div>\n                                        <div class=\"display-flex\">\n                                            <span class=\"modal-label\">Description:</span>\n                                            <input type=\"text\" [(ngModel)]=\"templateConnector.description\" formControlName=\"description\">\n                                        </div>\n                                        <div class=\"display-flex\">\n                                            <span class=\"modal-label\">{{'Graphical analysis mode' | translate}}:</span>\n                                            <select name=\"connectorTypeSelect\" class=\"selectHeight\" [(ngModel)]=\"templateConnector.connectorUsageType\" formControlName=\"connectorUsageType\">\n                                                <option *ngFor=\"let connectorType of connectorTypeArray | sortByName\" [ngValue]=\"connectorType.code\">{{connectorType.code | translate}}</option>\n                                                <!-- <option *ngFor=\"let connectorType of connectorTypeArray\" [ngValue]=\"connectorType.code\">{{connectorType.value}}</option> -->\n                                            </select>\n                                        </div>\n                                        <div class=\"display-flex\">\n                                            <span class=\"modal-label\">System:</span>\n                                            <select name=\"systemSelect\" class=\"selectHeight\" [(ngModel)]=\"templateConnector.system\" formControlName=\"system\">\n                                                <option *ngFor=\"let system of systemsArray | sortByName\" [ngValue]=\"system.name\">{{system.name}}</option>\n                                            </select>\n                                        </div>\n                                        <div class=\"display-flex\">\n                                            <span class=\"modal-label\">Corrosion protection:</span>\n                                            <select name=\"corrProtSelect\" class=\"selectHeight\" formControlName=\"corrosionProtection\" [(ngModel)]=\"templateConnector.corrosionProtection\">\n                                                <option *ngFor=\"let corrosionProtection of corrosionProtectionsArray | sortByName\" [ngValue]=\"corrosionProtection.name\">{{corrosionProtection.name}}</option>\n                                            </select>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n        \n                            <!-- Modal footer -->\n                            <div class=\"modal-footer\">\n                                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"saveNewConnector()\">Save</button>\n                            </div>\n                        </div>\n                    </form>\n                </div>\n    </div>\n</div>\n\n<div class=\"input-effect\">\n    <input id=\"searchInput\" class=\"effect1 search-input\" type=\"text\" placeholder=\"\" (keyup)=\"searchInGridData()\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addConnectorModal\"  (click)=\"prepareCreate()\">Create</button>\n\n<div class=\"table-wrapper\">\n    <div class=\"table-scroll\">\n        <table>\n            <tr>\n                <th *ngFor=\"let header of headers\">{{header}}</th>\n            </tr>\n            <tr *ngFor=\"let connector of connectorGridData,let row_no = index\" (click)=\"onRowClick(row_no,connector._id)\" style=\"cursor:pointer\" [class.highlighted]=\"connector._id === selectedRowId\">\n                <td class=\"column-width\">{{connector.articleNumber}}</td>\n                <td class=\"column-width\">{{connector.name}}</td>\n            </tr>\n        </table>\n    </div>\n</div>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:168px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}.highlighted{background-color:#534f53!important;color:#fff}"]}]}],"members":{"connectorComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onConnectorClick":[{"__symbolic":"method"}],"onRowClick":[{"__symbolic":"method"}],"updateConnectorInDb":[{"__symbolic":"method"}],"saveNewConnector":[{"__symbolic":"method"}],"searchInGridData":[{"__symbolic":"method"}],"prepareCreate":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}]}},"ɵba":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"app-connector-managment","template":"<div *ngIf=\"connectorData !== undefined\">\n    <div class=\"row\" style=\"padding-left: 12px;\">\n        <b>Connector:</b> &nbsp;{{connectorData.name}}</div>\n    <div class=\"row\" style=\"margin: 10px;\">\n        <!-- <button class=\"gray-button\" (click)=\"openGraphicalTool()\" [disabled]=\"!canOpenGraphicalTool\">Open graphical tool</button> -->\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#editModal\">Edit</button>\n        <!-- <button class=\"gray-button\" >Drawing/Pictures</button> -->\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#uploadModal\">Upload file</button>\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#deleteModal\">Delete</button>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-6\" style=\"line-height: 30px; padding-top: 30px;\">\n            <div class=\"d-inline\">Article no:\n            </div>\n            <div class=\"d-inline\">{{connectorData.articleNumber}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Name:\n            </div>\n            <div class=\"d-inline\">{{connectorData.name}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Description:\n            </div>\n            <div class=\"d-inline\">{{connectorData.description}}\n                <br>\n            </div>\n            <div class=\"d-inline\">{{'Graphical analysis mode' | translate}}:\n            </div>\n            <div class=\"d-inline\">{{connectorData.connectorUsageType | translate}}\n                <br>\n            </div>\n            <div class=\"d-inline\">System:\n            </div>\n            <div class=\"d-inline\">{{connectorData.system}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Corrosion protection:\n            </div>\n            <div class=\"d-inline\">{{connectorData.corrosionProtection}}\n                <br>\n            </div>\n        </div>\n        <div class=\"col-6\">\n            <div class=\"row\">\n                <div id=\"regularPictureDiv\" [hidden]=\"!isPngVisible\">\n                    <div class=\"row\">\n                        <img height=150 width=150 [src]=\"pictureData\" id=\"regularPicture\">\n                    </div>\n                    <div class=\"row\">\n                        <label style=\"font-size:12px\">Main picture</label>\n                        <button style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"deletePicture()\">x</button>\n                    </div>\n                </div>\n                <div id=\"stpFileDiv\" [hidden]=\"!isStpVisible\">\n                    <div class=\"step-file\">STEP FILE</div>\n                    <div class=\"row\">\n                        <img height=150 width=150 src=\"https://www.freeviewer.org/img/stp/overview-stp.png\" id=\"stpPicture\">\n                    </div>\n                    <div class=\"row\" style=\"margin-top: 10px; margin-left: 10px;\">\n                        <button class=\"configure-button\" style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"openGraphicalTool()\" [disabled]=\"!canOpenGraphicalTool\">\n                            Configure\n                        </button>\n                        <button class=\"delete-button\" style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"deleteStepFile()\">x</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"variants-header\">\n        <span style=\"padding-left: 18px; font-weight: bold; align-self: flex-end; padding-bottom: 3px;\">Variants:</span>\n        <button class=\"red-button\" data-toggle=\"modal\" data-target=\"#createVariantModal\" (click)=\"prepareVariantCreate()\"> Create new variant</button>\n        <!-- <hc-button [type]=\"rectsm\" [action]=\"additional\">Additional Flat Button</hc-button> -->\n    </div>\n    <div *ngIf=\"variantsList.length > 0\" class=\"regularObjectBorder\" id=\"variantsGrid\">\n        <div class=\"row\">\n            <div class=\"regularObjectBorder justRightBorder borderGray\" *ngFor=\"let variant of variantsList;let i=index\">\n                <button [class.highlighted]=\"variant._id === currentVariantTabId\" class=\"variantBtn\" (click)=\"changeVariantTab(variant._id)\">{{variant.name}}</button>\n            </div>\n        </div>\n        <div class=\"row\" style=\"padding: 18px 6px;\">\n            <button data-toggle=\"modal\" data-target=\"#editVariantModal\" class=\"gray-button\">Edit</button>\n            <button data-toggle=\"modal\" data-target=\"#duplicateVariantModal\" class=\"gray-button\">Duplicate</button>\n            <button data-toggle=\"modal\" data-target=\"#deleteVariantModal\" class=\"gray-button\">Delete</button>\n            <button class=\"gray-button\">Utilization check</button>\n            <button class=\"gray-button\" (click)=\"openVariantGraphicalTool(variantsList[currentVariantTab]._id)\">Launch Graphical Tool</button>\n        </div>\n        <div id=\"tabContent\" class=\"regularObjectBorder justTopBorder\">\n            <div class=\"row\" style=\"margin-top: 18px;\">\n                <div class=\"col-6\">\n                    <div class=\"font-weight-bold table-label\">Name:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].name}}</div>\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Description:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].description}}\n                        <br>\n                    </div>\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Design base:\n                        <br>\n                    </div>\n                    <div>\n                        <select class=\"tableCurrentVariant\" [(ngModel)]=\"choosenDesignBase\">\n                            <option *ngFor=\"let designBase of designBasesArray\" [(value)]=\"designBase._id\">{{designBase.name}}</option>\n                        </select>\n                        <br>\n                    </div>\n                </div>\n                <div class=\"col-6\">\n                    <div class=\"font-weight-bold table-label\">System:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].system}}\n                        <br>\n                    </div>\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Corrosion protection:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].corrosionProtection}}\n                        <br>\n                    </div>\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Files:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">&nbsp;</div>\n                </div>\n\n            </div>\n            <br>\n            <div class=\"row\">\n                <!-- <hc-data-grid style=\"width:-webkit-fill-available\" [select]=\"false\" id=\"variantsTabGrid\" [data]=\"variantGridData\" [headers]=\"headersVariantGrid\"\n                    [subheader]=\"false\" [displayedColumns]=\"displayedColumns\">\n                </hc-data-grid> -->\n                <app-variant-verification-grid [DesignBaseId]=\"choosenDesignBase\" [VariantId]=\"variantsList[currentVariantTab]._id\"></app-variant-verification-grid>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"variantsList.length == 0\">\n        <span>No variants available</span>\n    </div>\n</div>\n\n<!-- Upload Modal -->\n<div class=\"modal\" id=\"uploadModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div>\n                    Select file:\n                    <br/>\n                    <input #fileUploadInput type=\"file\" accept=\".jpg,.jpeg,.png,.step,.stp\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"button\" class=\"btn btn-danger save-button\" data-dismiss=\"modal\" (click)=\"upload()\">Upload</button>\n            </div>\n\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Article no:</span>\n                                    <input type=\"number\" formControlName=\"articleNumber\" [(ngModel)]=\"editedConnector.articleNumber\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedConnector.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedConnector.description\" formControlName=\"description\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">{{'Graphical analysis mode' | translate}}:</span>\n                                    <select name=\"connectorTypeSelect\" class=\"selectHeight\" [(ngModel)]=\"editedConnector.connectorUsageType\" formControlName=\"connectorUsageType\">\n                                        <option *ngFor=\"let connectorType of connectorTypeArray | sortByName\" [ngValue]=\"connectorType.code\">{{connectorType.code | translate}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">System:</span>\n                                    <select name=\"systemSelect\" class=\"selectHeight\" [(ngModel)]=\"editedConnector.system\" formControlName=\"system\">\n                                        <option *ngFor=\"let system of systemsArray | sortByName\" [ngValue]=\"system.name\">{{system.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Corrosion protection:</span>\n                                    <select name=\"corrProtSelect\" class=\"selectHeight\" formControlName=\"corrosionProtection\" [(ngModel)]=\"editedConnector.corrosionProtection\">\n                                        <option *ngFor=\"let corrosionProtection of corrosionProtectionsArray | sortByName\" [ngValue]=\"corrosionProtection.name\">{{corrosionProtection.name}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"save()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this connector?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" (click)=\"deleteConnector()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Create Variant Modal -->\n<div class=\"modal\" id=\"createVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"variantFormGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"variantTemplateModel.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"variantTemplateModel.description\" formControlName=\"description\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">System:</span>\n                                    <select name=\"systemSelect\" class=\"selectHeight\" [(ngModel)]=\"variantTemplateModel.system\" formControlName=\"system\">\n                                        <option *ngFor=\"let system of systemsArray | sortByName\" [ngValue]=\"system.name\">{{system.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Corrosion protection:</span>\n                                    <select name=\"corrProtSelect\" class=\"selectHeight\" formControlName=\"corrosionProtection\" [(ngModel)]=\"variantTemplateModel.corrosionProtection\">\n                                        <option *ngFor=\"let corrosionProtection of corrosionProtectionsArray | sortByName\" [ngValue]=\"corrosionProtection.name\">{{corrosionProtection.name}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"variantFormGroup.invalid\" (click)=\"createNewVariant()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n\n<!-- Duplicate Variant Modal -->\n<div class=\"modal\" id=\"duplicateVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <div>Duplicate variant</div>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">New variant name:</span>\n                    <input type=\"text\" [(ngModel)]=\"variantTemplateModel.name\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"variantTemplateModel.name.length<3\"\n                    (click)=\"duplicateVariant()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Variant Modal -->\n<div class=\"modal\" id=\"deleteVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <div>Delete variant</div>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span>Are you sure, you want to delete this variant?</span>\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" (click)=\"deleteVariant()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Edit Variant Modal -->\n<div class=\"modal\" id=\"editVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Name:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedVariant.name\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Description:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedVariant.description\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">System:</span>\n                    <select name=\"systemSelect\" [(ngModel)]=\"editedVariant.system\" class=\"selectHeight\">\n                        <option *ngFor=\"let system of systemsArray | sortByName\" [ngValue]=\"system.name\">{{system.name}}</option>\n                    </select>\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Corrosion protection:</span>\n                    <select name=\"corrProtSelect\" [(ngModel)]=\"editedVariant.corrosionProtection\" class=\"selectHeight\">\n                        <option *ngFor=\"let corrosionProtection of corrosionProtectionsArray | sortByName\" [ngValue]=\"corrosionProtection.name\">{{corrosionProtection.name}}</option>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"editedVariant.name.length<3 || editedVariant.corrosionProtection.length<1 || editedVariant.system.length<1\"\n                    (click)=\"updateVariant()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>","styles":[".regularObjectBorder{border-width:1px;border-style:solid}.justTopBorder{border-bottom:0;border-left:0;border-right:0}.justRightBorder{border-bottom:0;border-left:0;border-top:0}.justBottomBorder{border-right:0;border-left:0;border-top:0}#tabContent{font-size:11px;border-color:#dddd}.modal-label{width:168px}.display-flex{display:flex;align-items:center;margin-bottom:10px}hr{margin-top:0}#variantsGrid{margin-left:17px;border-color:#dddd}.delete-button{height:23px;width:23px;margin-left:3px;background-color:#d0021b;color:#fff;font-size:12px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;border-radius:2px;cursor:pointer}.configure-button{height:23px;margin-left:3px;background-color:#4a8bb7;color:#fff;font-size:12px;padding:3px 14px;font-weight:300;letter-spacing:1.1px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;margin-bottom:6px;border-radius:2px;cursor:pointer}.configure-button:disabled{background-color:#999;cursor:default}.step-file{font-size:14px;text-align:center;margin-bottom:10px;font-weight:700}#stpFileDiv{margin-left:auto;margin-right:auto}#variantsTabGrid{border:0;margin-top:26px;border-top:1px solid #ddd}.extra-padding-top{padding-top:10px}.mat-header-cell{font-weight:700}.variantBtn{background-color:#ddd;border:none;padding:6px 18px;outline:0;color:#534f53;cursor:pointer}.variants-header{margin:28px 0 5px;display:flex;justify-content:space-between}.table-label{font-size:16px}.tableCurrentVariant{font-size:14px;border-color:#708090}.borderGray{border-color:#a9a9a9}.borderGray:last-child{border-right:none}.mat-header-row{border-color:#dddd}.highlighted{background-color:#fff!important}"]}]}],"members":{"fileInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":438,"character":3},"arguments":["fileUploadInput"]}]}],"onShowViewer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":439,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":474,"character":70}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"loadConnectorVariants":[{"__symbolic":"method"}],"showConnector":[{"__symbolic":"method"}],"upload":[{"__symbolic":"method"}],"readThis":[{"__symbolic":"method"}],"checkIfStpIsConverted":[{"__symbolic":"method"}],"sendSTPFile":[{"__symbolic":"method"}],"sendPictureFile":[{"__symbolic":"method"}],"openGraphicalTool":[{"__symbolic":"method"}],"openVariantGraphicalTool":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"changeVariantTab":[{"__symbolic":"method"}],"deletePicture":[{"__symbolic":"method"}],"deleteStepFile":[{"__symbolic":"method"}],"setFilesData":[{"__symbolic":"method"}],"deleteConnector":[{"__symbolic":"method"}],"createNewVariant":[{"__symbolic":"method"}],"sendVariantToDb":[{"__symbolic":"method"}],"duplicateVariant":[{"__symbolic":"method"}],"deleteVariant":[{"__symbolic":"method"}],"updateVariant":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}],"prepareVariantCreate":[{"__symbolic":"method"}],"createVariantForm":[{"__symbolic":"method"}]}},"ɵbb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"app-bases-grid","template":"<!-- <div [hidden]=\"isConnectorHidden\">\n    <hc-data-grid id=\"mainGrid\" (onAddClick)=\"addConnector()\" [data]=\"myArray\" [select]=\"false\" [headers]=\"headers\" [subheader]=\"true\" [displayedColumns]=\"displayedColumns\" (onEditClick)=\"onConnectorClick($event)\">\n    </hc-data-grid>\n</div> -->\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"addBaseModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Article no:</span>\n                                    <input type=\"number\" formControlName=\"articleNumber\" [(ngModel)]=\"templateBase.articleNumber\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"templateBase.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"templateBase.description\" formControlName=\"description\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">System:</span>\n                                    <select name=\"systemSelect\" class=\"selectHeight\" [(ngModel)]=\"templateBase.system\" formControlName=\"system\">\n                                        <option *ngFor=\"let system of systemsArray | sortByName\" [ngValue]=\"system.name\">{{system.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Corrosion protection:</span>\n                                    <select name=\"corrProtSelect\" class=\"selectHeight\" formControlName=\"corrosionProtection\" [(ngModel)]=\"templateBase.corrosionProtection\">\n                                        <option *ngFor=\"let corrosionProtection of corrosionProtectionsArray | sortByName\" [ngValue]=\"corrosionProtection.name\">{{corrosionProtection.name}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"saveNewBase()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<div class=\"input-effect\">\n    <input id=\"searchInput\" class=\"effect1 search-input\" type=\"text\" placeholder=\"\" (keyup)=\"searchInGridData()\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addBaseModal\" (click)=\"prepareCreate()\">Create</button>\n\n<div class=\"table-wrapper\">\n    <div class=\"table-scroll\">\n        <table>\n            <tr>\n                <th *ngFor=\"let header of headers\">{{header}}</th>\n            </tr>\n            <tr *ngFor=\"let base of basesGridData,let row_no = index\" (click)=\"onRowClick(row_no,base._id)\" style=\"cursor:pointer\" [class.highlighted]=\"base._id === selectedRowId\">\n                <td class=\"column-width\">{{base.articleNumber}}</td>\n                <td class=\"column-width\">{{base.name}}</td>\n            </tr>\n        </table>\n    </div>\n</div>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:168px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}.highlighted{background-color:#534f53!important;color:#fff}"]}]}],"members":{"basesComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onbasesClick":[{"__symbolic":"method"}],"onRowClick":[{"__symbolic":"method"}],"updatebasesInDb":[{"__symbolic":"method"}],"saveNewBase":[{"__symbolic":"method"}],"searchInGridData":[{"__symbolic":"method"}],"prepareCreate":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}]}},"ɵbc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"app-bases-managment","template":"<div *ngIf=\"baseData !== undefined\">\n    <div class=\"row\" style=\"padding-left: 12px;\">\n        <b>Base:</b> &nbsp;{{baseData.name}}</div>\n    <div class=\"row\" style=\"margin: 10px;\">\n        <!-- <button class=\"gray-button\" (click)=\"openGraphicalTool()\" [disabled]=\"!canOpenGraphicalTool\">Open graphical tool</button> -->\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#editModal\">Edit</button>\n        <!-- <button class=\"gray-button\" >Drawing/Pictures</button> -->\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#uploadModal\">Upload file</button>\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#deleteModal\">Delete</button>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-6\" style=\"line-height: 30px; padding-top: 30px;\">\n            <div class=\"d-inline\">Article no:\n            </div>\n            <div class=\"d-inline\">{{baseData.articleNumber}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Name:\n            </div>\n            <div class=\"d-inline\">{{baseData.name}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Description:\n            </div>\n            <div class=\"d-inline\">{{baseData.description}}\n                <br>\n            </div>\n            <div class=\"d-inline\">System:\n            </div>\n            <div class=\"d-inline\">{{baseData.system}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Corrosion protection:\n            </div>\n            <div class=\"d-inline\">{{baseData.corrosionProtection}}\n                <br>\n            </div>\n        </div>\n        <div class=\"col-6\">\n            <div class=\"row\">\n                <div id=\"regularPictureDiv\" [hidden]=\"!isPngVisible\">\n                    <div class=\"row\">\n                        <img height=150 width=150 [src]=\"pictureData\" id=\"regularPicture\">\n                    </div>\n                    <div class=\"row\">\n                        <label style=\"font-size:12px\">Main picture</label>\n                        <button style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"deletePicture()\">x</button>\n                    </div>\n                </div>\n                <div id=\"stpFileDiv\" [hidden]=\"!isStpVisible\">\n                    <div class=\"step-file\">STEP FILE</div>\n                    <div class=\"row\">\n                        <img height=150 width=150 src=\"https://www.freeviewer.org/img/stp/overview-stp.png\" id=\"stpPicture\">\n                    </div>\n                    <div class=\"row\" style=\"margin-top: 10px; margin-left: 10px;\">\n                        <button class=\"configure-button\" style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"openGraphicalTool()\" [disabled]=\"!canOpenGraphicalTool\">\n                            Configure\n                        </button>\n                        <button class=\"delete-button\" style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"deleteStepFile()\">x</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"variants-header\">\n        <span style=\"padding-left: 18px; font-weight: bold; align-self: flex-end; padding-bottom: 3px;\">Variants:</span>\n        <button class=\"red-button\" data-toggle=\"modal\" data-target=\"#createVariantModal\" (click)=\"prepareVariantCreate()\"> Create new variant</button>\n        <!-- <hc-button [type]=\"rectsm\" [action]=\"additional\">Additional Flat Button</hc-button> -->\n    </div>\n    <div *ngIf=\"variantsList.length > 0\" class=\"regularObjectBorder\" id=\"variantsGrid\">\n        <div class=\"row\">\n            <div class=\"regularObjectBorder justRightBorder borderGray\" *ngFor=\"let variant of variantsList;let i=index\">\n                <button [class.highlighted]=\"variant._id === currentVariantTabId\" class=\"variantBtn\" (click)=\"changeVariantTab(variant._id)\">{{variant.name}}</button>\n            </div>\n        </div>\n        <div class=\"row\" style=\"padding: 18px 6px;\">\n            <button data-toggle=\"modal\" data-target=\"#editVariantModal\" class=\"gray-button\">Edit</button>\n            <button data-toggle=\"modal\" data-target=\"#duplicateVariantModal\" class=\"gray-button\">Duplicate</button>\n            <button data-toggle=\"modal\" data-target=\"#deleteVariantModal\" class=\"gray-button\">Delete</button>\n            <button class=\"gray-button\">Utilization check</button>\n            <button class=\"gray-button\" (click)=\"openVariantGraphicalTool(variantsList[currentVariantTab]._id)\">Launch Graphical Tool</button>\n        </div>\n        <div id=\"tabContent\" class=\"regularObjectBorder justTopBorder\">\n            <div class=\"row\" style=\"margin-top: 18px;\">\n                <div class=\"col-6\">\n                    <div class=\"font-weight-bold table-label\">Name:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].name}}</div>\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Description:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].description}}\n                        <br>\n                    </div>\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Design base:\n                        <br>\n                    </div>\n                    <div>\n                        <select class=\"tableCurrentVariant\" [(ngModel)]=\"choosenDesignBase\">\n                            <option *ngFor=\"let designBase of designBasesArray | sortByName\" [(value)]=\"designBase._id\">{{designBase.name}}</option>\n                        </select>\n                        <br>\n                    </div>\n                </div>\n                <div class=\"col-6\">\n                    <div class=\"font-weight-bold table-label\">System:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].system}}\n                        <br>\n                    </div>\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Corrosion protection:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].corrosionProtection}}\n                        <br>\n                    </div>\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Files:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">&nbsp;</div>\n                </div>\n\n            </div>\n            <div class=\"row\">\n                <!-- <hc-data-grid style=\"width:-webkit-fill-available\" [select]=\"false\" id=\"variantsTabGrid\" [data]=\"variantGridData\" [headers]=\"headersVariantGrid\"\n                    [subheader]=\"false\" [displayedColumns]=\"displayedColumns\">\n                </hc-data-grid> -->\n                <br>\n                <app-variant-verification-grid [DesignBaseId]=\"choosenDesignBase\" [VariantId]=\"variantsList[currentVariantTab]._id\"></app-variant-verification-grid>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-6\" *ngIf=\"variantsList.length == 0\">\n        <span>No variants available</span>\n    </div>\n</div>\n\n<!-- Upload Modal -->\n<div class=\"modal\" id=\"uploadModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div>\n                    Select file:\n                    <br/>\n                    <input #fileUploadInput type=\"file\" accept=\".jpg,.jpeg,.png,.step,.stp\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"button\" class=\"btn btn-danger save-button\" data-dismiss=\"modal\" (click)=\"upload()\">Upload</button>\n            </div>\n\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Article no:</span>\n                                    <input type=\"number\" formControlName=\"articleNumber\" [(ngModel)]=\"editedBase.articleNumber\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedBase.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedBase.description\" formControlName=\"description\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">System:</span>\n                                    <select name=\"systemSelect\" class=\"selectHeight\" [(ngModel)]=\"editedBase.system\" formControlName=\"system\">\n                                        <option *ngFor=\"let system of systemsArray | sortByName\" [ngValue]=\"system.name\">{{system.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Corrosion protection:</span>\n                                    <select name=\"corrProtSelect\" class=\"selectHeight\" formControlName=\"corrosionProtection\" [(ngModel)]=\"editedBase.corrosionProtection\">\n                                        <option *ngFor=\"let corrosionProtection of corrosionProtectionsArray | sortByName\" [ngValue]=\"corrosionProtection.name\">{{corrosionProtection.name}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"save()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this base?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" (click)=\"deleteBase()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Create Variant Modal -->\n<div class=\"modal\" id=\"createVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"variantFormGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"variantTemplateModel.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"variantTemplateModel.description\" formControlName=\"description\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">System:</span>\n                                    <select name=\"systemSelect\" class=\"selectHeight\" [(ngModel)]=\"variantTemplateModel.system\" formControlName=\"system\">\n                                        <option *ngFor=\"let system of systemsArray | sortByName\" [ngValue]=\"system.name\">{{system.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Corrosion protection:</span>\n                                    <select name=\"corrProtSelect\" class=\"selectHeight\" formControlName=\"corrosionProtection\" [(ngModel)]=\"variantTemplateModel.corrosionProtection\">\n                                        <option *ngFor=\"let corrosionProtection of corrosionProtectionsArray | sortByName\" [ngValue]=\"corrosionProtection.name\">{{corrosionProtection.name}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"variantFormGroup.invalid\" (click)=\"saveNewVariant()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n\n<!-- Duplicate Variant Modal -->\n<div class=\"modal\" id=\"duplicateVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <div>Duplicate variant</div>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">New variant name:</span>\n                    <input type=\"text\" [(ngModel)]=\"variantTemplateModel.name\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"variantTemplateModel.name.length<3\"\n                    (click)=\"duplicateVariant()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Variant Modal -->\n<div class=\"modal\" id=\"deleteVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <div>Delete variant</div>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span>Are you sure, you want to delete this variant?</span>\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" (click)=\"deleteVariant()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Edit Variant Modal -->\n<div class=\"modal\" id=\"editVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Name:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedVariant.name\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Description:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedVariant.description\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">System:</span>\n                    <select name=\"systemSelect\" [(ngModel)]=\"editedVariant.system\" class=\"selectHeight\">\n                        <option *ngFor=\"let system of systemsArray | sortByName\" [ngValue]=\"system.name\">{{system.name}}</option>\n                    </select>\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Corrosion protection:</span>\n                    <select name=\"corrProtSelect\" [(ngModel)]=\"editedVariant.corrosionProtection\" class=\"selectHeight\">\n                        <option *ngFor=\"let corrosionProtection of corrosionProtectionsArray | sortByName\" [ngValue]=\"corrosionProtection.name\">{{corrosionProtection.name}}</option>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"editedVariant.name.length<3 || editedVariant.corrosionProtection.length<1 || editedVariant.system.length<1\"\n                    (click)=\"updateVariant()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>","styles":[".regularObjectBorder{border-width:1px;border-style:solid}.justTopBorder{border-bottom:0;border-left:0;border-right:0}.justRightBorder{border-bottom:0;border-left:0;border-top:0}.justBottomBorder{border-right:0;border-left:0;border-top:0}#tabContent{font-size:11px;border-color:#dddd}.modal-label{width:168px}.display-flex{display:flex;align-items:center;margin-bottom:10px}hr{margin-top:0}#variantsGrid{margin-left:17px;border-color:#dddd}.delete-button{height:23px;width:23px;margin-left:3px;background-color:#d0021b;color:#fff;font-size:12px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;border-radius:2px;cursor:pointer}.configure-button{height:23px;margin-left:3px;background-color:#4a8bb7;color:#fff;font-size:12px;padding:3px 14px;font-weight:300;letter-spacing:1.1px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;margin-bottom:6px;border-radius:2px;cursor:pointer}.configure-button:disabled{background-color:#999;cursor:default}.step-file{font-size:14px;text-align:center;margin-bottom:10px;font-weight:700}#stpFileDiv{margin-left:auto;margin-right:auto}#variantsTabGrid{border:0;margin-top:26px;border-top:1px solid #ddd}.extra-padding-top{padding-top:10px}.mat-header-cell{font-weight:700}.variantBtn{background-color:#ddd;border:none;padding:6px 18px;outline:0;color:#534f53;cursor:pointer}.variants-header{margin:28px 0 5px;display:flex;justify-content:space-between}.table-label{font-size:16px}.tableCurrentVariant{font-size:14px;border-color:#708090}.borderGray{border-color:#a9a9a9}.borderGray:last-child{border-right:none}.mat-header-row{border-color:#dddd}.highlighted{background-color:#fff!important}"]}]}],"members":{"fileInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":426,"character":3},"arguments":["fileUploadInput"]}]}],"onShowViewer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":427,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":460,"character":70}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"loadBaseVariants":[{"__symbolic":"method"}],"showBase":[{"__symbolic":"method"}],"upload":[{"__symbolic":"method"}],"readThis":[{"__symbolic":"method"}],"checkIfStpIsConverted":[{"__symbolic":"method"}],"sendSTPFile":[{"__symbolic":"method"}],"sendPictureFile":[{"__symbolic":"method"}],"openGraphicalTool":[{"__symbolic":"method"}],"openVariantGraphicalTool":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"changeVariantTab":[{"__symbolic":"method"}],"deletePicture":[{"__symbolic":"method"}],"deleteStepFile":[{"__symbolic":"method"}],"setFilesData":[{"__symbolic":"method"}],"deleteBase":[{"__symbolic":"method"}],"saveNewVariant":[{"__symbolic":"method"}],"sendVariantToDb":[{"__symbolic":"method"}],"duplicateVariant":[{"__symbolic":"method"}],"deleteVariant":[{"__symbolic":"method"}],"updateVariant":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}],"prepareVariantCreate":[{"__symbolic":"method"}],"createVariantForm":[{"__symbolic":"method"}]}},"ɵbd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"app-pipe-fastenings-grid","template":"<!-- <div [hidden]=\"isConnectorHidden\">\n    <hc-data-grid id=\"mainGrid\" (onAddClick)=\"addConnector()\" [data]=\"myArray\" [select]=\"false\" [headers]=\"headers\" [subheader]=\"true\" [displayedColumns]=\"displayedColumns\" (onEditClick)=\"onConnectorClick($event)\">\n    </hc-data-grid>\n</div> -->\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"addPipeFasteningModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Article no:</span>\n                                    <input type=\"number\" formControlName=\"articleNumber\" [(ngModel)]=\"templatePipeFastening.articleNumber\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"templatePipeFastening.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"templatePipeFastening.description\" formControlName=\"description\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">System:</span>\n                                    <select name=\"systemSelect\" class=\"selectHeight\" [(ngModel)]=\"templatePipeFastening.system\" formControlName=\"system\">\n                                        <option *ngFor=\"let system of systemsArray | sortByName\" [ngValue]=\"system.name\">{{system.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Corrosion protection:</span>\n                                    <select name=\"corrProtSelect\" class=\"selectHeight\" formControlName=\"corrosionProtection\" [(ngModel)]=\"templatePipeFastening.corrosionProtection\">\n                                        <option *ngFor=\"let corrosionProtection of corrosionProtectionsArray | sortByName\" [ngValue]=\"corrosionProtection.name\">{{corrosionProtection.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Group:</span>\n                                    <select name=\"fasteningGroupSelect\" class=\"selectHeight\" formControlName=\"pipeFasteningGroupId\" [(ngModel)]=\"templatePipeFastening.pipeFasteningGroupId\">\n                                        <option *ngFor=\"let fasteningGroup of pipeFasteningGroupsArray | sortByName\" [ngValue]=\"fasteningGroup.id\">{{fasteningGroup.name}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"saveNewPipeFastening()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<div class=\"input-effect\">\n    <input id=\"searchInput\" class=\"effect1 search-input\" type=\"text\" placeholder=\"\" (keyup)=\"searchInGridData()\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addPipeFasteningModal\" (click)=\"prepareCreate()\">Create</button>\n\n<div class=\"table-wrapper\">\n    <div class=\"table-scroll\">\n        <table>\n            <tr>\n                <th *ngFor=\"let header of headers\">{{header}}</th>\n            </tr>\n            <tr *ngFor=\"let pipeFastening of pipeFasteningsGridData,let row_no = index\" (click)=\"onRowClick(row_no,pipeFastening._id)\" style=\"cursor:pointer\" [class.highlighted]=\"pipeFastening._id === selectedRowId\">\n                <td class=\"column-width\">{{pipeFastening.articleNumber}}</td>\n                <td class=\"column-width\">{{pipeFastening.name}}</td>\n            </tr>\n        </table>\n    </div>\n</div>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:168px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}.highlighted{background-color:#534f53!important;color:#fff}"]}]}],"members":{"pipeFasteningComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onbasesClick":[{"__symbolic":"method"}],"onRowClick":[{"__symbolic":"method"}],"updatePipeFasteningsInDb":[{"__symbolic":"method"}],"saveNewPipeFastening":[{"__symbolic":"method"}],"searchInGridData":[{"__symbolic":"method"}],"prepareCreate":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}]}},"ɵbe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"selector":"app-pipe-fastenings-managment","template":"<div *ngIf=\"pipeFasteningData !== undefined\">\n    <div class=\"row\" style=\"padding-left: 12px;\">\n        <b>Base:</b> &nbsp;{{pipeFasteningData.name}}</div>\n    <div class=\"row\" style=\"margin: 10px;\">\n        <!-- <button class=\"gray-button\" (click)=\"openGraphicalTool()\" [disabled]=\"!canOpenGraphicalTool\">Open graphical tool</button> -->\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#editModal\">Edit</button>\n        <!-- <button class=\"gray-button\" >Drawing/Pictures</button> -->\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#uploadModal\">Upload file</button>\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#deleteModal\">Delete</button>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-6\" style=\"line-height: 30px; padding-top: 30px;\">\n            <div class=\"d-inline\">Article no:\n            </div>\n            <div class=\"d-inline\">{{pipeFasteningData.articleNumber}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Name:\n            </div>\n            <div class=\"d-inline\">{{pipeFasteningData.name}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Description:\n            </div>\n            <div class=\"d-inline\">{{pipeFasteningData.description}}\n                <br>\n            </div>\n            <div class=\"d-inline\">System:\n            </div>\n            <div class=\"d-inline\">{{pipeFasteningData.system}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Corrosion protection:\n            </div>\n            <div class=\"d-inline\">{{pipeFasteningData.corrosionProtection}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Group:\n            </div>\n            <div class=\"d-inline\">{{pipeFasteningGroupName}}\n                <br>\n            </div>\n        </div>\n        <div class=\"col-6\">\n            <div class=\"row\">\n                <div id=\"regularPictureDiv\" [hidden]=\"!isPngVisible\">\n                    <div class=\"row\">\n                        <img height=150 width=150 [src]=\"pictureData\" id=\"regularPicture\">\n                    </div>\n                    <div class=\"row\">\n                        <label style=\"font-size:12px\">Main picture</label>\n                        <button style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"deletePicture()\">x</button>\n                    </div>\n                </div>\n                <div id=\"stpFileDiv\" [hidden]=\"!isStpVisible\">\n                    <div class=\"step-file\">STEP FILE</div>\n                    <div class=\"row\">\n                        <img height=150 width=150 src=\"https://www.freeviewer.org/img/stp/overview-stp.png\" id=\"stpPicture\">\n                    </div>\n                    <div class=\"row\" style=\"margin-top: 10px; margin-left: 10px;\">\n                        <button class=\"configure-button\" style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"openGraphicalTool()\"\n                            [disabled]=\"!canOpenGraphicalTool\">\n                            Configure\n                        </button>\n                        <button class=\"delete-button\" style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"deleteStepFile()\">x</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"variants-header\">\n        <span style=\"padding-left: 18px; font-weight: bold; align-self: flex-end; padding-bottom: 3px;\">Variants:</span>\n        <button class=\"red-button\" data-toggle=\"modal\" data-target=\"#createVariantModal\" (click)=\"prepareVariantCreate()\">\n            Create new variant</button>\n        <!-- <hc-button [type]=\"rectsm\" [action]=\"additional\">Additional Flat Button</hc-button> -->\n    </div>\n    <div *ngIf=\"variantsList.length > 0\" class=\"regularObjectBorder\" id=\"variantsGrid\">\n        <div class=\"row\">\n            <div class=\"regularObjectBorder justRightBorder borderGray\" *ngFor=\"let variant of variantsList;let i=index\">\n                <button [class.highlighted]=\"variant._id === currentVariantTabId\" class=\"variantBtn\" (click)=\"changeVariantTab(variant._id)\">{{variant.name}}</button>\n            </div>\n        </div>\n        <div class=\"row\" style=\"padding: 18px 6px;\">\n            <button data-toggle=\"modal\" data-target=\"#editVariantModal\" class=\"gray-button\">Edit</button>\n            <button data-toggle=\"modal\" data-target=\"#duplicateVariantModal\" class=\"gray-button\">Duplicate</button>\n            <button data-toggle=\"modal\" data-target=\"#deleteVariantModal\" class=\"gray-button\">Delete</button>\n            <button class=\"gray-button\">Utilization check</button>\n            <button class=\"gray-button\" (click)=\"openVariantGraphicalTool(variantsList[currentVariantTab]._id)\">Launch\n                Graphical Tool</button>\n        </div>\n        <div id=\"tabContent\" class=\"regularObjectBorder justTopBorder\">\n            <div class=\"row\" style=\"margin-top: 18px;\">\n                <div class=\"col-6\">\n                    <div class=\"font-weight-bold table-label\">Name:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].name}}</div>\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Description:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].description}}\n                        <br>\n                    </div>\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Design base:\n                        <br>\n                    </div>\n                    <div>\n                        <select class=\"tableCurrentVariant\" [(ngModel)]=\"choosenDesignBase\">\n                            <option *ngFor=\"let designBase of designBasesArray | sortByName\" [(value)]=\"designBase._id\">{{designBase.name}}</option>\n                        </select>\n                        <br>\n                    </div>\n                </div>\n                <div class=\"col-6\">\n                    <div class=\"font-weight-bold table-label\">System:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].system}}\n                        <br>\n                    </div>\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Corrosion protection:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].corrosionProtection}}\n                        <br>\n                    </div>\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Files:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">&nbsp;</div>\n                </div>\n\n            </div>\n            <div class=\"row\">\n                <!-- <hc-data-grid style=\"width:-webkit-fill-available\" [select]=\"false\" id=\"variantsTabGrid\" [data]=\"variantGridData\" [headers]=\"headersVariantGrid\"\n                    [subheader]=\"false\" [displayedColumns]=\"displayedColumns\">\n                </hc-data-grid> -->\n                <br>\n                <app-variant-verification-grid [DesignBaseId]=\"choosenDesignBase\" [VariantId]=\"variantsList[currentVariantTab]._id\"></app-variant-verification-grid>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-6\" *ngIf=\"variantsList.length == 0\">\n        <span>No variants available</span>\n    </div>\n</div>\n\n<!-- Upload Modal -->\n<div class=\"modal\" id=\"uploadModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div>\n                    Select file:\n                    <br />\n                    <input #fileUploadInput type=\"file\" accept=\".jpg,.jpeg,.png,.step,.stp\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"button\" class=\"btn btn-danger save-button\" data-dismiss=\"modal\" (click)=\"upload()\">Upload</button>\n            </div>\n\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Article no:</span>\n                                    <input type=\"number\" formControlName=\"articleNumber\" [(ngModel)]=\"editedPipeFastening.articleNumber\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeFastening.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeFastening.description\" formControlName=\"description\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">System:</span>\n                                    <select name=\"systemSelect\" class=\"selectHeight\" [(ngModel)]=\"editedPipeFastening.system\"\n                                        formControlName=\"system\">\n                                        <option *ngFor=\"let system of systemsArray | sortByName\" [ngValue]=\"system.name\">{{system.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Corrosion protection:</span>\n                                    <select name=\"corrProtSelect\" class=\"selectHeight\" formControlName=\"corrosionProtection\"\n                                        [(ngModel)]=\"editedPipeFastening.corrosionProtection\">\n                                        <option *ngFor=\"let corrosionProtection of corrosionProtectionsArray | sortByName\"\n                                            [ngValue]=\"corrosionProtection.name\">{{corrosionProtection.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Group:</span>\n                                    <select name=\"fasteningGroupSelect\" class=\"selectHeight\" formControlName=\"pipeFasteningGroupId\"\n                                        [(ngModel)]=\"editedPipeFastening.pipeFasteningGroupId\">\n                                        <option *ngFor=\"let fasteningGroup of pipeFasteningGroupsArray | sortByName\"\n                                            [ngValue]=\"fasteningGroup.id\">{{fasteningGroup.name}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\"\n                            (click)=\"save()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this pipe fastening?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" (click)=\"deletePipeFastening()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Create Variant Modal -->\n<div class=\"modal\" id=\"createVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"variantFormGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"variantTemplateModel.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"variantTemplateModel.description\" formControlName=\"description\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">System:</span>\n                                    <select name=\"systemSelect\" class=\"selectHeight\" [(ngModel)]=\"variantTemplateModel.system\"\n                                        formControlName=\"system\">\n                                        <option *ngFor=\"let system of systemsArray\" [ngValue]=\"system.name\">{{system.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Corrosion protection:</span>\n                                    <select name=\"corrProtSelect\" class=\"selectHeight\" formControlName=\"corrosionProtection\"\n                                        [(ngModel)]=\"variantTemplateModel.corrosionProtection\">\n                                        <option *ngFor=\"let corrosionProtection of corrosionProtectionsArray\" [ngValue]=\"corrosionProtection.name\">{{corrosionProtection.name}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"variantFormGroup.invalid\"\n                            (click)=\"saveNewVariant()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n\n<!-- Duplicate Variant Modal -->\n<div class=\"modal\" id=\"duplicateVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <div>Duplicate variant</div>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">New variant name:</span>\n                    <input type=\"text\" [(ngModel)]=\"variantTemplateModel.name\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"variantTemplateModel.name.length<3\"\n                    (click)=\"duplicateVariant()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Variant Modal -->\n<div class=\"modal\" id=\"deleteVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <div>Delete variant</div>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span>Are you sure, you want to delete this variant?</span>\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" (click)=\"deleteVariant()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Edit Variant Modal -->\n<div class=\"modal\" id=\"editVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Name:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedVariant.name\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Description:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedVariant.description\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">System:</span>\n                    <select name=\"systemSelect\" [(ngModel)]=\"editedVariant.system\" class=\"selectHeight\">\n                        <option *ngFor=\"let system of systemsArray;\" [ngValue]=\"system.name\">{{system.name}}</option>\n                    </select>\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Corrosion protection:</span>\n                    <select name=\"corrProtSelect\" [(ngModel)]=\"editedVariant.corrosionProtection\" class=\"selectHeight\">\n                        <option *ngFor=\"let corrosionProtection of corrosionProtectionsArray\" [ngValue]=\"corrosionProtection.name\">{{corrosionProtection.name}}</option>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"editedVariant.name.length<3 || editedVariant.corrosionProtection.length<1 || editedVariant.system.length<1\"\n                    (click)=\"updateVariant()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>","styles":[".regularObjectBorder{border-width:1px;border-style:solid}.justTopBorder{border-bottom:0;border-left:0;border-right:0}.justRightBorder{border-bottom:0;border-left:0;border-top:0}.justBottomBorder{border-right:0;border-left:0;border-top:0}#tabContent{font-size:11px;border-color:#dddd}.modal-label{width:168px}.display-flex{display:flex;align-items:center;margin-bottom:10px}hr{margin-top:0}#variantsGrid{margin-left:17px;border-color:#dddd}.delete-button{height:23px;width:23px;margin-left:3px;background-color:#d0021b;color:#fff;font-size:12px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;border-radius:2px;cursor:pointer}.configure-button{height:23px;margin-left:3px;background-color:#4a8bb7;color:#fff;font-size:12px;padding:3px 14px;font-weight:300;letter-spacing:1.1px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;margin-bottom:6px;border-radius:2px;cursor:pointer}.configure-button:disabled{background-color:#999;cursor:default}.step-file{font-size:14px;text-align:center;margin-bottom:10px;font-weight:700}#stpFileDiv{margin-left:auto;margin-right:auto}#variantsTabGrid{border:0;margin-top:26px;border-top:1px solid #ddd}.extra-padding-top{padding-top:10px}.mat-header-cell{font-weight:700}.variantBtn{background-color:#ddd;border:none;padding:6px 18px;outline:0;color:#534f53;cursor:pointer}.variants-header{margin:28px 0 5px;display:flex;justify-content:space-between}.table-label{font-size:16px}.tableCurrentVariant{font-size:14px;border-color:#708090}.borderGray{border-color:#a9a9a9}.borderGray:last-child{border-right:none}.mat-header-row{border-color:#dddd}.highlighted{background-color:#fff!important}"]}]}],"members":{"fileInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":447,"character":3},"arguments":["fileUploadInput"]}]}],"onShowViewer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":448,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":479,"character":70}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"loadBaseVariants":[{"__symbolic":"method"}],"showPipeFastening":[{"__symbolic":"method"}],"upload":[{"__symbolic":"method"}],"readThis":[{"__symbolic":"method"}],"checkIfStpIsConverted":[{"__symbolic":"method"}],"sendSTPFile":[{"__symbolic":"method"}],"sendPictureFile":[{"__symbolic":"method"}],"openGraphicalTool":[{"__symbolic":"method"}],"openVariantGraphicalTool":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"changeVariantTab":[{"__symbolic":"method"}],"deletePicture":[{"__symbolic":"method"}],"deleteStepFile":[{"__symbolic":"method"}],"setFilesData":[{"__symbolic":"method"}],"deletePipeFastening":[{"__symbolic":"method"}],"saveNewVariant":[{"__symbolic":"method"}],"sendVariantToDb":[{"__symbolic":"method"}],"duplicateVariant":[{"__symbolic":"method"}],"deleteVariant":[{"__symbolic":"method"}],"updateVariant":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}],"prepareVariantCreate":[{"__symbolic":"method"}],"createVariantForm":[{"__symbolic":"method"}],"findFasteningGroupById":[{"__symbolic":"method"}]}},"ɵbf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"app-cross-section-grid","template":"<!-- <div [hidden]=\"isConnectorHidden\">\n    <hc-data-grid id=\"mainGrid\" (onAddClick)=\"addConnector()\" [data]=\"myArray\" [select]=\"false\" [headers]=\"headers\" [subheader]=\"true\" [displayedColumns]=\"displayedColumns\" (onEditClick)=\"onConnectorClick($event)\">\n    </hc-data-grid>\n</div> -->\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"addCrossSectionModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                            <span><i class=\"fa fa-plus-circle\"></i></span>\n                            <span class=\"modal-header1\">create: </span>\n                            <span class=\"modal-header2\">new product</span>\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div class=\"w100\">\n                            <div>\n                                <div class=\"display-flex modalInputBorder\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"templateCrossSection.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"modalInputBorder\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <textarea [(ngModel)]=\"templateCrossSection.description\" formControlName=\"description\">>\n                                    </textarea>\n                                </div>\n                                <div class=\"display-flex modalInputBorder\">\n                                    <span class=\"modal-label\">System:</span>\n                                    <select name=\"systemSelect\" class=\"selectHeight w-select-calc\" [(ngModel)]=\"templateCrossSection.system\" formControlName=\"system\">\n                                        <option *ngFor=\"let system of systemsArray | sortByName\" [ngValue]=\"system.name\">{{system.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex modalInputBorder\">\n                                    <span class=\"modal-label w-121\">DUENQ Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"templateCrossSection.duenqName\" formControlName=\"duenqName\" maxlength=\"50\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn cancel-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn red-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"saveNewCrossSection()\">Create</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<div class=\"input-effect\">\n    <input class=\"effect1\" type=\"text\" placeholder=\"\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addCrossSectionModal\" (click)=\"prepareCreate()\">Create</button>\n\n<table>\n    <tr>\n        <th *ngFor=\"let header of headers\">{{header}}</th>\n    </tr>\n    <tr *ngFor=\"let crossSection of crossSectionGridData, let row_no = index\" (click)=\"onRowClick(row_no, crossSection._id)\"\n        style=\"cursor:pointer\" [class.highlighted]=\"crossSection._id === selectedRowId\">\n        <td class=\"column-width\">{{crossSection.name}}</td>\n        <td class=\"column-width\">{{crossSection.description}}</td>\n    </tr>\n</table>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}.highlighted{background-color:#534f53!important;color:#fff}#addCrossSectionModal input,select{border:none;outline:0;font-size:14px}.modal-label{font-size:14px;color:#969696;font-weight:400;width:auto}.modalInputBorder{border-bottom:1px solid #969696;width:100%;padding-bottom:5px}.w100{width:100%}#addCrossSectionModal input{margin-left:8px;width:100%}.w-121{width:121px}.w-select-calc{width:calc(100% - 50px)}.selectHeight{height:21px}.modalInputBorder:not(:last-child){margin-bottom:26px}#addCrossSectionModal textarea{border:none;resize:none;display:block;width:100%;outline:0;font-size:14px}.modal-content{border-radius:0}.modal-header{background-color:#f5f5f5;height:45px;padding:12px 15px;margin-bottom:20px}.modal-header1,.modal-header2{text-transform:uppercase;font-weight:500;font-size:19px}.modal-header1{color:#2e2e2e}.modal-header2{color:#797979;margin-left:10px}#addCrossSectionModal .fa-plus-circle{color:#d0021b;margin-right:10px;font-size:19px;vertical-align:middle}.modal-footer{padding:0}.modal-footer .cancel-button,.modal-footer .red-button{margin:0;width:50%;border-radius:0;height:60px}.cancel-button{background-color:#2e2e2e;color:#fff;font-size:14px;padding:10px 20px;font-weight:400;letter-spacing:1.1px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none}#addCrossSectionModal .red-button{font-size:14px;padding:10px 20px;font-weight:400;letter-spacing:1.1px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none}.btn:disabled{opacity:.2}.red-button[disabled]:hover{background-color:#d0021b;opacity:.2;cursor:auto}"]}]}],"members":{"crossSectionComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onConnectorClick":[{"__symbolic":"method"}],"onRowClick":[{"__symbolic":"method"}],"updateCrossSectionInDb":[{"__symbolic":"method"}],"saveNewCrossSection":[{"__symbolic":"method"}],"prepareCreate":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}]}},"ɵbg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"app-cross-section-managment","template":"<div *ngIf=\"crossSectionData !== undefined\">\n    <div class=\"row\" style=\"padding-left: 12px;\">\n        <b>Cross Section:</b> &nbsp;{{crossSectionData.name}}</div>\n    <div class=\"row\" style=\"margin: 10px;\">\n        <!-- <button class=\"gray-button\" (click)=\"openGraphicalTool()\" [disabled]=\"!canOpenGraphicalTool\">Open graphical tool</button> -->\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#editModal\">Edit</button>\n        <!-- <button class=\"gray-button\" >Drawing/Pictures</button> -->\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#uploadModal\">Upload file</button>\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#deleteModal\">Delete</button>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-6\" style=\"line-height: 30px;\">\n            <div class=\"d-inline\">Name:\n            </div>\n            <div class=\"d-inline\">{{crossSectionData.name}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Description:\n            </div>\n            <div class=\"d-inline\">{{crossSectionData.description}}\n                <br>\n            </div>\n            <div class=\"d-inline\">System:\n            </div>\n            <div class=\"d-inline\">{{crossSectionData.system}}\n                <br>\n            </div>\n            <div class=\"d-inline\">DUENQ Name:\n            </div>\n            <div class=\"d-inline\">{{crossSectionData.duenqName}}\n                <br>\n            </div>\n        </div>\n        <div class=\"col-6\">\n            <div class=\"row\">\n                <div id=\"regularPictureDiv\" [hidden]=\"!isPngVisible\">\n                    <div class=\"row\">\n                        <img height=150 width=150 [src]=\"pictureData\" id=\"regularPicture\">\n                    </div>\n                    <div class=\"row\">\n                        <label style=\"font-size:12px\">Main picture</label>\n                        <button style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"deletePicture()\">x</button>\n                    </div>\n                </div>\n\n                <div id=\"stpFileDiv\" [hidden]=\"!isStpVisible\">\n                    <div class=\"step-file\">STEP FILE</div>\n                    <div class=\"row\">\n                        <img height=150 width=150 src=\"https://www.freeviewer.org/img/stp/overview-stp.png\" id=\"stpPicture\">\n                    </div>\n                    <div class=\"row\" style=\"margin-top: 10px; margin-left: 10px;\">\n                        <button class=\"configure-button\" style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"openGraphicalTool()\" [disabled]=\"!canOpenGraphicalTool\">\n                            Configure\n                        </button>\n                        <button class=\"delete-button\" style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"deleteStepFile()\">x</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Upload Modal -->\n<div class=\"modal\" id=\"uploadModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div>\n                    Select file:\n                    <br/>\n                    <input #fileUploadInput type=\"file\" accept=\".jpg,.jpeg,.png,.step,.stp\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"button\" class=\"btn btn-danger save-button\" data-dismiss=\"modal\" (click)=\"upload()\">Upload</button>\n            </div>\n\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedCrossSection.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedCrossSection.description\" formControlName=\"description\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">System:</span>\n                                    <select name=\"systemSelect\" class=\"selectHeight\" [(ngModel)]=\"editedCrossSection.system\" formControlName=\"system\">\n                                        <option *ngFor=\"let system of systemsArray | sortByName\" [ngValue]=\"system.name\">{{system.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">DUENQ Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedCrossSection.duenqName\" formControlName=\"duenqName\" maxlength=\"50\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"save()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this cross section?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deleteCrossSection()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>","styles":[".regularObjectBorder{border-width:1px;border-style:solid}.justTopBorder{border-bottom:0;border-left:0;border-right:0}.justRightBorder{border-bottom:0;border-left:0;border-top:0}.justBottomBorder{border-right:0;border-left:0;border-top:0}#tabContent{font-size:11px}.modal-label{width:168px}.display-flex{display:flex;align-items:center;margin-bottom:10px}hr{margin-top:0}#variantsGrid{margin-left:17px}.step-file{font-size:14px;text-align:center;margin-bottom:10px;font-weight:700}.configure-button{height:23px;margin-left:3px;background-color:#4a8bb7;color:#fff;font-size:12px;padding:3px 14px;font-weight:300;letter-spacing:1.1px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;margin-bottom:6px;border-radius:2px;cursor:pointer}.configure-button:disabled{background-color:#999;cursor:default}.delete-button{height:23px;width:23px;margin-left:3px;background-color:#d0021b;color:#fff;font-size:12px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;border-radius:2px;cursor:pointer}"]}]}],"members":{"fileInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":186,"character":3},"arguments":["fileUploadInput"]}]}],"onShowViewer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":187,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":202,"character":70}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"showCrossSection":[{"__symbolic":"method"}],"upload":[{"__symbolic":"method"}],"readThis":[{"__symbolic":"method"}],"checkIfStpIsConverted":[{"__symbolic":"method"}],"sendSTPFile":[{"__symbolic":"method"}],"sendPictureFile":[{"__symbolic":"method"}],"openGraphicalTool":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"deletePicture":[{"__symbolic":"method"}],"deleteStepFile":[{"__symbolic":"method"}],"setFilesData":[{"__symbolic":"method"}],"deleteCrossSection":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}]}},"ɵbh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"app-channels-grid","template":"<!-- <div [hidden]=\"isConnectorHidden\">\n    <hc-data-grid id=\"mainGrid\" (onAddClick)=\"addChannel()\" [data]=\"myArray\" [select]=\"false\" [headers]=\"headers\" [subheader]=\"true\" [displayedColumns]=\"displayedColumns\" (onEditClick)=\"onConnectorClick($event)\">\n    </hc-data-grid>\n</div> -->\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"addChannelModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Article no:</span>\n                                    <input type=\"number\" [(ngModel)]=\"templateChannel.articleNumber\" formControlName=\"articleNumber\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"templateChannel.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"templateChannel.description\" formControlName=\"description\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">System:</span>\n                                    <select name=\"systemSelect\" class=\"select-style\" [(ngModel)]=\"templateChannel.system\" class=\"selectHeight\" formControlName=\"system\" (ngModelChange)=\"filterCrossSections()\">\n                                        <option *ngFor=\"let system of systemsArray | sortByName\" [ngValue]=\"system.name\">{{system.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Corrosion protection:</span>\n                                    <select name=\"corrProtSelect\" class=\"select-style\" [(ngModel)]=\"templateChannel.corrosionProtection\" formControlName=\"corrosionProtection\">\n                                        <option *ngFor=\"let corrosionProtection of corrosionProtectionsArray | sortByName\" [ngValue]=\"corrosionProtection.name\" class=\"selectHeight\">{{corrosionProtection.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Cross section:</span>\n                                    <select name=\"crossSectionSelect\" class=\"select-style\" [(ngModel)]=\"templateChannel.crossSection\" formControlName=\"crossSection\">\n                                        <option *ngFor=\"let crossSection of availableCrossSectionsArray | sortByName\" [ngValue]=\"crossSection.name\">{{crossSection.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Material:</span>\n                                    <select name=\"material\" class=\"select-style\" [(ngModel)]=\"templateChannel.material\" formControlName=\"material\">\n                                        <option *ngFor=\"let material of materialsArray | sortByName\" [ngValue]=\"material.name\">{{material.name}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"saveNewChannel()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<div class=\"input-effect\">\n    <input class=\"effect1\" type=\"text\" placeholder=\"\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addChannelModal\" (click)=\"prepareCreate()\">Create</button>\n\n<div class=\"table-wrapper\">\n    <div class=\"table-scroll\">\n        <table>\n            <tr>\n                <th *ngFor=\"let header of headers\">{{header}}</th>\n            </tr>\n            <tr *ngFor=\"let channel of channelGridData,let row_no = index\" (click)=\"onRowClick(row_no, channel._id)\" style=\"cursor:pointer\"\n                [class.highlighted]=\"channel._id === selectedRowId\">\n                <td>{{channel.articleNumber}}</td>\n                <td>{{channel.name}}</td>\n                <td>{{channel.description}}</td>\n                <!-- <td>{{channel.description}}</td> -->\n            </tr>\n        </table>\n    </div>\n</div>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:168px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}.highlighted{background-color:#534f53!important;color:#fff}.select-style{width:100px}"]}]}],"members":{"channelComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onChannelClick":[{"__symbolic":"method"}],"onRowClick":[{"__symbolic":"method"}],"updateChannelInDb":[{"__symbolic":"method"}],"saveNewChannel":[{"__symbolic":"method"}],"prepareCreate":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}],"filterCrossSections":[{"__symbolic":"method"}]}},"ɵbi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"app-channels-managment","template":"<div *ngIf=\"channelData !== undefined\">\n    <div class=\"row\" style=\"padding-left: 12px;\">\n        <b>Channel:</b> &nbsp;{{channelData.name}}</div>\n    <div class=\"row\" style=\"margin: 10px;\">\n        <!-- <button class=\"gray-button\" (click)=\"openGraphicalTool()\" [disabled]=\"!canOpenGraphicalTool\">Open graphical tool</button> -->\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#editModal\">Edit</button>\n        <!-- <button class=\"gray-button\" >Drawing/Pictures</button> -->\n        <!-- <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#uploadModal\">Upload file</button> -->\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#deleteModal\">Delete</button>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-6\" style=\"line-height: 30px;\">\n            <div class=\"d-inline\">Article no:\n            </div>\n            <div class=\"d-inline\">{{channelData.articleNumber}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Name:\n            </div>\n            <div class=\"d-inline\">{{channelData.name}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Description:\n            </div>\n            <div class=\"d-inline\">{{channelData.description}}\n                <br>\n            </div>\n            <div class=\"d-inline\">System:\n            </div>\n            <div class=\"d-inline\">{{channelData.system}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Corrosion protection:\n            </div>\n            <div class=\"d-inline\">{{channelData.corrosionProtection}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Cross section:\n            </div>\n            <div class=\"d-inline\">{{channelData.crossSection}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Material:\n            </div>\n            <div class=\"d-inline\">{{channelData.material}}\n                <br>\n            </div>\n        </div>\n        <div class=\"col-6\">\n            <div class=\"row\">\n                <div id=\"stpFileDiv\" [hidden]=\"!isStpVisible\">\n                    <div class=\"row\">\n                        <img height=150 width=150 src=\"https://www.freeviewer.org/img/stp/overview-stp.png\" id=\"stpPicture\">\n                    </div>\n                    <div class=\"row\">\n                        <label style=\"font-size:12px\">STEP FILE</label>\n                        <button style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"deleteStepFile()\">x</button>\n                        <button style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"openGraphicalTool()\" [disabled]=\"!canOpenGraphicalTool\">\n                            Configure\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Upload Modal -->\n<div class=\"modal\" id=\"uploadModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div>\n                    Select file:\n                    <br/>\n                    <input #fileUploadInput type=\"file\" accept=\".jpg,.jpeg,.png,.step,.stp\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"button\" class=\"btn btn-danger save-button\" data-dismiss=\"modal\" (click)=\"upload()\">Upload</button>\n            </div>\n\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Article no:</span>\n                                    <input type=\"number\" [(ngModel)]=\"editedChannel.articleNumber\" formControlName=\"articleNumber\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedChannel.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedChannel.description\" formControlName=\"description\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">System:</span>\n                                    <select name=\"systemSelect\" class=\"select-style\" [(ngModel)]=\"editedChannel.system\" class=\"selectHeight\" formControlName=\"system\" (ngModelChange)=\"filterCrossSections()\">\n                                        <option *ngFor=\"let system of systemsArray | sortByName\" [ngValue]=\"system.name\">{{system.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Corrosion protection:</span>\n                                    <select name=\"corrProtSelect\" class=\"select-style\" [(ngModel)]=\"editedChannel.corrosionProtection\" formControlName=\"corrosionProtection\">\n                                        <option *ngFor=\"let corrosionProtection of corrosionProtectionsArray | sortByName\" [ngValue]=\"corrosionProtection.name\" class=\"selectHeight\">{{corrosionProtection.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Cross section:</span>\n                                    <select name=\"crossSectionSelect\" class=\"select-style\" [(ngModel)]=\"editedChannel.crossSection\" formControlName=\"crossSection\">\n                                        <option *ngFor=\"let crossSection of availableCrossSectionsArray | sortByName\" [ngValue]=\"crossSection.name\">{{crossSection.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Material:</span>\n                                    <select name=\"material\" class=\"select-style\" [(ngModel)]=\"editedChannel.material\" formControlName=\"material\">\n                                        <option *ngFor=\"let material of materialsArray | sortByName\" [ngValue]=\"material.name\">{{material.name}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"save()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this channel?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" (click)=\"deleteChannel()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>","styles":[".regularObjectBorder{border-width:1px;border-style:solid}.justTopBorder{border-bottom:0;border-left:0;border-right:0}.justRightBorder{border-bottom:0;border-left:0;border-top:0}.justBottomBorder{border-right:0;border-left:0;border-top:0}#tabContent{font-size:11px}.modal-label{width:168px}.display-flex{display:flex;align-items:center;margin-bottom:10px}hr{margin-top:0}#variantsGrid{margin-left:17px}.select-style{width:100px}"]}]}],"members":{"fileInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":210,"character":3},"arguments":["fileUploadInput"]}]}],"onShowViewer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":211,"character":3}}]}],"selectedConnectorId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":212,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":231,"character":70}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"showChannel":[{"__symbolic":"method"}],"upload":[{"__symbolic":"method"}],"readThis":[{"__symbolic":"method"}],"checkIfStpIsConverted":[{"__symbolic":"method"}],"sendSTPFile":[{"__symbolic":"method"}],"openGraphicalTool":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"deleteStepFile":[{"__symbolic":"method"}],"setFilesData":[{"__symbolic":"method"}],"deleteChannel":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}],"filterCrossSections":[{"__symbolic":"method"}]}},"ɵbj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"app-pipe-rings-grid","template":"\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"addPipeRingModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"templatePipeRing.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Item no:</span>\n                                    <input type=\"text\" [(ngModel)]=\"templatePipeRing.articleId\" formControlName=\"articleId\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Pipe-Ring group:</span>\n                                    <select name=\"piperingGroupSelect\" class=\"selectHeight\" [(ngModel)]=\"templatePipeRing.piperingGroupId\" formControlName=\"piperingGroupId\">\n                                        <option *ngFor=\"let piperingGroup of piperingGroupsData | sortByName\" [ngValue]=\"piperingGroup.id\">{{piperingGroup.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Corrosion Protection:</span>\n                                    <select name=\"corrosionProtectionSelect\" class=\"selectHeight\" [(ngModel)]=\"templatePipeRing.corrosionProtectionId\" formControlName=\"corrosionProtectionId\">\n                                        <option *ngFor=\"let corrosionProtection of corrosionProtectionData | sortByName\" [ngValue]=\"corrosionProtection.id\">{{corrosionProtection.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Pipe ring family:</span>\n                                    <select name=\"corrosionProtectionSelect\" class=\"selectHeight\" [(ngModel)]=\"templatePipeRing.piperingFamilyId\" formControlName=\"piperingFamilyId\">\n                                        <option *ngFor=\"let piperingFamily of piperingFamiliesArray\" [ngValue]=\"piperingFamily.id\">{{piperingFamily.name}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"saveNewPipeRing()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<div class=\"input-effect\">\n    <input class=\"effect1\" type=\"text\" placeholder=\"\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addPipeRingModal\" (click)=\"prepareCreate()\">Create</button>\n\n<table>\n    <tr>\n        <th *ngFor=\"let header of headers\">{{header}}</th>\n    </tr>\n    <tr *ngFor=\"let pipeRing of pipeRingsGridData, let row_no = index\" (click)=\"onRowClick(row_no, pipeRing._id)\"\n        style=\"cursor:pointer\" [class.highlighted]=\"pipeRing._id === selectedRowId\">\n        <td class=\"column-width\">{{pipeRing.articleId}}</td>\n        <td class=\"column-width\">{{pipeRing.name}}</td>\n    </tr>\n</table>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}.highlighted{background-color:#534f53!important;color:#fff}.modal-dialog{max-width:500px}"]}]}],"members":{"pipeRingsComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onPipeRingClick":[{"__symbolic":"method"}],"onRowClick":[{"__symbolic":"method"}],"updatePipeRingInDB":[{"__symbolic":"method"}],"saveNewPipeRing":[{"__symbolic":"method"}],"prepareCreate":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}]}},"ɵbk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"app-pipe-rings-managment","template":"<div *ngIf=\"pipeRingData !== undefined\">\n    <div class=\"row\" style=\"padding-left: 12px;\">\n        <b>Pipe-Ring:</b> &nbsp;{{pipeRingData.name}}</div>\n    <div class=\"row\" style=\"margin: 10px;\">\n        <!-- <button class=\"gray-button\" (click)=\"openGraphicalTool()\" [disabled]=\"!canOpenGraphicalTool\">Open graphical tool</button> -->\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#editModal\">Edit</button>\n        <!-- <button class=\"gray-button\" >Drawing/Pictures</button> -->\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#uploadModal\">Upload file</button>\n        <button class=\"gray-button\" data-toggle=\"modal\" data-target=\"#deleteModal\">Delete</button>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-6\" style=\"line-height: 30px;\">\n            <div class=\"d-inline\">Name:\n            </div>\n            <div class=\"d-inline\">{{pipeRingData.name}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Article no.:\n            </div>\n            <div class=\"d-inline\">{{pipeRingData.articleId}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Pipe-Ring group:\n            </div>\n            <div class=\"d-inline\">{{piperingGroupsData[pipeRingData.piperingGroupId].name}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Corrosion Protection:\n            </div>\n            <div class=\"d-inline\">{{corrosionProtectionData[pipeRingData.corrosionProtectionId - 1].name}}\n                <br>\n            </div>\n            <div class=\"d-inline\">Graphical representation:\n            </div>\n            <div class=\"d-inline\">{{pipeRingData.graphicalRepresentation | translate}}\n                <br>\n            </div>\n        </div>\n        <div class=\"col-6\">\n            <div class=\"row\">\n                <div id=\"regularPictureDiv\" [hidden]=\"!isPngVisible\">\n                    <div class=\"row\">\n                        <img height=150 width=150 [src]=\"pictureData\" id=\"regularPicture\">\n                    </div>\n                    <div class=\"row\">\n                        <label style=\"font-size:12px\">Main picture</label>\n                        <button style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"deletePicture()\">x</button>\n                    </div>\n                </div>\n\n                <div id=\"stpFileDiv\" [hidden]=\"!isStpVisible\">\n                    <div class=\"step-file\">STEP FILE</div>\n                    <div class=\"row\">\n                        <img height=150 width=150 src=\"https://www.freeviewer.org/img/stp/overview-stp.png\" id=\"stpPicture\">\n                    </div>\n                    <div class=\"row\" style=\"margin-top: 10px; margin-left: 10px;\">\n                        <button class=\"configure-button\" style=\"font-size:12px;height:23px;margin-left: 3px;\"  (click)=\"openGraphicalTool()\" [disabled]=\"!canOpenGraphicalTool\">\n                            Configure\n                        </button>\n                        <button class=\"delete-button\" style=\"font-size:12px;height:23px;margin-left: 3px;\" (click)=\"deleteStepFile()\">x</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"variants-header\">\n        <span style=\"padding-left: 18px; font-weight: bold; align-self: flex-end; padding-bottom: 3px;\">Variants:</span>\n        <button class=\"red-button\" data-toggle=\"modal\" data-target=\"#createVariantModal\" (click)=\"prepareVariantCreate()\"> Create new variant</button>\n    </div>\n    <div *ngIf=\"variantsList.length > 0\" class=\"regularObjectBorder\" id=\"variantsGrid\">\n        <div class=\"row\">\n            <div class=\"regularObjectBorder justRightBorder borderGray\" *ngFor=\"let variant of variantsList;let i=index\">\n                <button [class.highlighted]=\"variant._id === currentVariantTabId\" class=\"variantBtn\" (click)=\"changeVariantTab(variant._id)\">{{variant.name}}</button>\n            </div>\n        </div>\n        <div class=\"row\" style=\"padding: 18px 6px;\">\n            <button data-toggle=\"modal\" data-target=\"#editVariantModal\" class=\"gray-button\" (click)=\"prepareVariantEdit()\">Edit</button>\n            <button data-toggle=\"modal\" data-target=\"#duplicateVariantModal\" class=\"gray-button\">Duplicate</button>\n            <button data-toggle=\"modal\" data-target=\"#deleteVariantModal\" class=\"gray-button\">Delete</button>\n            <button class=\"gray-button\">Utilization check</button>\n            <button class=\"gray-button\" (click)=\"openVariantGraphicalTool(variantsList[currentVariantTab]._id)\">Configure</button>\n        </div>\n        <div id=\"tabContent\" class=\"regularObjectBorder justTopBorder\">\n            <div class=\"row\" style=\"margin-top: 18px;\">\n                <div class=\"col-6\">\n                    <div class=\"font-weight-bold table-label\">Name:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].name}}</div>\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Description:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].description}}\n                        <br>\n                    </div>\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Design base:\n                        <br>\n                    </div>\n                    <div>\n                        <select class=\"tableCurrentVariant\" [(ngModel)]=\"choosenDesignBase\">\n                            <option *ngFor=\"let designBase of designBasesArray\" [(value)]=\"designBase._id\">{{designBase.name}}</option>\n                        </select>\n                        <br>\n                    </div>\n                </div>\n                <div class=\"col-6\">\n                    <!-- <div class=\"font-weight-bold table-label\">System:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].system}}\n                        <br>\n                    </div>\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Corrosion protection:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">{{variantsList[currentVariantTab].corrosionProtection}}\n                        <br>\n                    </div> -->\n                    <div class=\"extra-padding-top font-weight-bold table-label\">Files:\n                        <br>\n                    </div>\n                    <div class=\"regularObjectBorder justBottomBorder tableCurrentVariant\">&nbsp;</div>\n                </div>\n\n            </div>\n            <div class=\"row\">\n                <br>\n                <app-variant-verification-grid [DesignBaseId]=\"choosenDesignBase\" [VariantId]=\"variantsList[currentVariantTab]._id\"></app-variant-verification-grid>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-6\" *ngIf=\"variantsList.length == 0\">\n        <span>No variants available</span>\n    </div>\n</div>\n\n<!-- Create Variant Modal -->\n<div class=\"modal\" id=\"createVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"variantFormGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeRingVariant.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeRingVariant.description\" formControlName=\"description\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"variantFormGroup.invalid\" (click)=\"saveNewVariant()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Upload Modal -->\n<div class=\"modal\" id=\"uploadModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div>\n                    Select file:\n                    <br/>\n                    <input #fileUploadInput type=\"file\" accept=\".jpg,.jpeg,.png,.step,.stp\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"button\" class=\"btn btn-danger save-button\" data-dismiss=\"modal\" (click)=\"upload()\">Upload</button>\n            </div>\n\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeRing.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Article no.:</span>\n                                    <input type=\"number\" [(ngModel)]=\"editedPipeRing.articleId\" formControlName=\"articleId\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Pipe-Ring group:</span>\n                                    <select name=\"piperingGroupSelect\" class=\"selectHeight\" [(ngModel)]=\"editedPipeRing.piperingGroupId\" formControlName=\"piperingGroupId\">\n                                        <option *ngFor=\"let piperingGroup of piperingGroupsData\" [ngValue]=\"piperingGroup.id\">{{piperingGroup.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Corrosion protection:</span>\n                                    <select name=\"corrosionProtectionSelect\" class=\"selectHeight\" [(ngModel)]=\"editedPipeRing.corrosionProtectionId\" formControlName=\"corrosionProtectionId\">\n                                        <option *ngFor=\"let corrosionProtection of corrosionProtectionData\" [ngValue]=\"corrosionProtection.id\">{{corrosionProtection.name}}</option>\n                                    </select>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Pipe ring family:</span>\n                                    <select name=\"corrosionProtectionSelect\" class=\"selectHeight\" [(ngModel)]=\"editedPipeRing.piperingFamilyId\" formControlName=\"piperingFamilyId\">\n                                        <option *ngFor=\"let piperingFamily of piperingFamiliesArray\" [ngValue]=\"piperingFamily.id\">{{piperingFamily.name}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"save()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this pipe-ring?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deletePipeRing()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Duplicate Variant Modal -->\n<div class=\"modal\" id=\"duplicateVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <div>Duplicate variant</div>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">New variant name:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedPipeRingVariant.name\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"editedPipeRingVariant.name.length<3\"\n                    (click)=\"duplicateVariant()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Variant Modal -->\n<div class=\"modal\" id=\"deleteVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <div>Delete variant</div>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span>Are you sure, you want to delete this variant?</span>\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" (click)=\"deleteVariant()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Edit Variant Modal -->\n<div class=\"modal\" id=\"editVariantModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Name:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedPipeRingVariant.name\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Description:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedPipeRingVariant.description\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"editedPipeRingVariant.name.length<3\"\n                    (click)=\"updateVariant()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>","styles":[".regularObjectBorder{border-width:1px;border-style:solid}.justTopBorder{border-bottom:0;border-left:0;border-right:0}.justRightBorder{border-bottom:0;border-left:0;border-top:0}.justBottomBorder{border-right:0;border-left:0;border-top:0}#tabContent{font-size:11px;border-color:#dddd}.modal-label{width:168px}.display-flex{display:flex;align-items:center;margin-bottom:10px}hr{margin-top:0}#variantsGrid{margin-left:17px;border-color:#dddd}.delete-button{height:23px;width:23px;margin-left:3px;background-color:#d0021b;color:#fff;font-size:12px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;border-radius:2px;cursor:pointer}.configure-button{height:23px;margin-left:3px;background-color:#4a8bb7;color:#fff;font-size:12px;padding:3px 14px;font-weight:300;letter-spacing:1.1px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;margin-bottom:6px;border-radius:2px;cursor:pointer}.configure-button:disabled{background-color:#999;cursor:default}.step-file{font-size:14px;text-align:center;margin-bottom:10px;font-weight:700}#stpFileDiv{margin-left:auto;margin-right:auto}#variantsTabGrid{border:0;margin-top:26px;border-top:1px solid #ddd}.extra-padding-top{padding-top:10px}.mat-header-cell{font-weight:700}.variantBtn{background-color:#ddd;border:none;padding:6px 18px;outline:0;color:#534f53;cursor:pointer}.variants-header{margin:28px 0 5px;display:flex;justify-content:space-between}.table-label{font-size:16px}.tableCurrentVariant{font-size:14px;border-color:#708090}.borderGray{border-color:#a9a9a9}.borderGray:last-child{border-right:none}.mat-header-row{border-color:#dddd}.highlighted{background-color:#fff!important}.modal-dialog{max-width:500px}"]}]}],"members":{"fileInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":395,"character":3},"arguments":["fileUploadInput"]}]}],"onShowViewer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":396,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":419,"character":70}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"loadPiperingVariants":[{"__symbolic":"method"}],"showPipeRing":[{"__symbolic":"method"}],"upload":[{"__symbolic":"method"}],"readThis":[{"__symbolic":"method"}],"checkIfStpIsConverted":[{"__symbolic":"method"}],"sendSTPFile":[{"__symbolic":"method"}],"sendPictureFile":[{"__symbolic":"method"}],"openGraphicalTool":[{"__symbolic":"method"}],"openVariantGraphicalTool":[{"__symbolic":"method"}],"changeVariantTab":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"deletePicture":[{"__symbolic":"method"}],"deleteStepFile":[{"__symbolic":"method"}],"setFilesData":[{"__symbolic":"method"}],"deletePipeRing":[{"__symbolic":"method"}],"prepareVariantCreate":[{"__symbolic":"method"}],"createVariantForm":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}],"saveNewVariant":[{"__symbolic":"method"}],"sendVariantToDb":[{"__symbolic":"method"}],"duplicateVariant":[{"__symbolic":"method"}],"deleteVariant":[{"__symbolic":"method"}],"updateVariant":[{"__symbolic":"method"}],"prepareVariantEdit":[{"__symbolic":"method"}]}},"ɵbl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"app-systems-grid","template":"<!-- Create Modal -->\n<div class=\"modal\" id=\"addSystemModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Name:</span>\n                    <input type=\"text\" [(ngModel)]=\"templateSystem.name\" #ctrl=\"ngModel\" required>\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Description:</span>\n                    <input type=\"text\" [(ngModel)]=\"templateSystem.description\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"ctrl.invalid\" (click)=\"saveNewSystem()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Name:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedSystem.name\" #ctrl2=\"ngModel\" required>\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Description:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedSystem.description\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"ctrl2.invalid\" (click)=\"editSystem()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this system?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deleteSystem(editedSystem)\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n<div class=\"input-effect\">\n    <input class=\"effect1\" type=\"text\" placeholder=\"\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addSystemModal\">Create</button>\n\n<table>\n    <tr>\n        <th *ngFor=\"let header of headers\">{{header}}</th>\n    </tr>\n    <tr *ngFor=\"let system of systemsGridData, let row_no = index\">\n        <td>{{system.name}}</td>\n        <td>{{system.description}}</td>\n        <td class=\"columnWithIcons\">\n            <button type=\"button\" class=\"btn editBtn\" data-toggle=\"modal\" data-target=\"#editModal\" (click)=\"setChoosenElement(system, row_no)\">\n                <i class=\"fa fa-edit\"></i>\n            </button>\n            <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(system, row_no)\">\n                <i class=\"fa fa-trash\"></i>\n            </button>\n        </td>\n    </tr>\n</table>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"saveNewSystem":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editSystem":[{"__symbolic":"method"}],"deleteSystem":[{"__symbolic":"method"}]}},"ɵbm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"app-pipering-groups-grid","template":"<!-- Create Modal -->\n<div class=\"modal\" id=\"addPiperingGroupModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPiperingGroup.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Code:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPiperingGroup.code\" formControlName=\"code\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Is cold:</span>\n                                    <input type=\"checkbox\" [(ngModel)]=\"editedPiperingGroup.isCold\" formControlName=\"isCold\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"saveNewPiperingGroup()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPiperingGroup.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Code:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPiperingGroup.code\" formControlName=\"code\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Is cold:</span>\n                                    <input type=\"checkbox\" [(ngModel)]=\"editedPiperingGroup.isCold\" formControlName=\"isCold\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"editPiperingGroup()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Pipe-ring Group?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deletePiperingGroup(editedPiperingGroup)\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n<div class=\"input-effect\">\n    <input class=\"effect1\" type=\"text\" placeholder=\"\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addPiperingGroupModal\" (click)=\"prepareCreate()\">Create</button>\n\n<table>\n    <tr>\n        <th *ngFor=\"let header of headers\">{{header}}</th>\n    </tr>\n    <tr *ngFor=\"let piperingGroup of piperingGroupsGridData, let row_no = index\">\n        <td>{{piperingGroup.id}}</td>\n        <td>{{piperingGroup.name}}</td>\n        <td>{{piperingGroup.code}}</td>\n        <td>{{piperingGroup.isCold}}</td>\n        <td class=\"columnWithIcons\">\n            <button type=\"button\" class=\"btn editBtn\" data-toggle=\"modal\" data-target=\"#editModal\" (click)=\"setChoosenElement(piperingGroup, row_no)\">\n                <i class=\"fa fa-edit\"></i>\n            </button>\n            <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(piperingGroup, row_no)\">\n                <i class=\"fa fa-trash\"></i>\n            </button>\n        </td>\n    </tr>\n</table>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"saveNewPiperingGroup":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editPiperingGroup":[{"__symbolic":"method"}],"deletePiperingGroup":[{"__symbolic":"method"}],"prepareCreate":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}]}},"ɵbn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"app-corosion-protections-grid","template":"<!-- Create Modal -->\n<div class=\"modal\" id=\"addCorosionProtectionModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Name:</span>\n                    <input type=\"text\" [(ngModel)]=\"templateCorosionProtection.name\" #ctrl=\"ngModel\" required>\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Description:</span>\n                    <input type=\"text\" [(ngModel)]=\"templateCorosionProtection.description\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" [disabled]=\"ctrl.invalid\" (click)=\"saveNewCorosionProtection()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Name:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedCorosionProtection.name\" #ctrl2=\"ngModel\" required>\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Description:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedCorosionProtection.description\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"ctrl2.invalid\" (click)=\"editCorosionProtection()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this corosion protection?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deleteCorosionProtection(editedCorosionProtection)\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"input-effect\">\n    <input class=\"effect1\" type=\"text\" placeholder=\"\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addCorosionProtectionModal\">Create</button>\n\n<table>\n    <tr>\n        <th *ngFor=\"let header of headers\">{{header}}</th>\n    </tr>\n    <tr *ngFor=\"let corosionProtection of corosionProtectionGridData, let row_no = index\">\n        <td>{{corosionProtection.name}}</td>\n        <td>{{corosionProtection.description}}</td>\n        <td class=\"columnWithIcons\">\n            <button type=\"button\" class=\"btn editBtn\" data-toggle=\"modal\" data-target=\"#editModal\" (click)=\"setChoosenElement(corosionProtection, row_no)\">\n                <i class=\"fa fa-edit\"></i>\n            </button>\n            <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(corosionProtection, row_no)\">\n                <i class=\"fa fa-trash\"></i>\n            </button>\n        </td>\n    </tr>\n</table>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"saveNewCorosionProtection":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editCorosionProtection":[{"__symbolic":"method"}],"deleteCorosionProtection":[{"__symbolic":"method"}]}},"ɵbo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"app-design-bases-grid","template":"<!-- Create Modal -->\n<div class=\"modal\" id=\"addDesignBaseModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Name:</span>\n                    <input type=\"text\" [(ngModel)]=\"templateDesignBase.name\" #ctrl=\"ngModel\" required>\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Description:</span>\n                    <input type=\"text\" [(ngModel)]=\"templateDesignBase.description\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Displacement beam:</span>\n                    <input type=\"number\" [(ngModel)]=\"templateDesignBase.displacementBeam\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Displacement bracket:</span>\n                    <input type=\"number\" [(ngModel)]=\"templateDesignBase.displacementBracket\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Safety factor:</span>\n                    <input type=\"number\" [(ngModel)]=\"templateDesignBase.safetyFactor\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Shear factor:</span>\n                    <input type=\"number\" [(ngModel)]=\"templateDesignBase.shearFactor\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Buckling lenght:</span>\n                    <input type=\"number\" [(ngModel)]=\"templateDesignBase.bucklingLenght\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Min deflection limit:</span>\n                    <input type=\"number\" [(ngModel)]=\"templateDesignBase.minDeflectionLimit\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"ctrl.invalid\" (click)=\"saveNewDesignBase()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Name:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedDesignBase.name\" #ctrl2=\"ngModel\" required>\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Description:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedDesignBase.description\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Displacement beam:</span>\n                    <input type=\"number\" [(ngModel)]=\"editedDesignBase.displacementBeam\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Displacement bracket:</span>\n                    <input type=\"number\" [(ngModel)]=\"editedDesignBase.displacementBracket\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Safety factor:</span>\n                    <input type=\"number\" [(ngModel)]=\"editedDesignBase.safetyFactor\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Shear factor:</span>\n                    <input type=\"number\" [(ngModel)]=\"editedDesignBase.shearFactor\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Buckling lenght:</span>\n                    <input type=\"number\" [(ngModel)]=\"editedDesignBase.bucklingLenght\">\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Min deflection limit:</span>\n                    <input type=\"number\" [(ngModel)]=\"editedDesignBase.minDeflectionLimit\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"ctrl2.invalid\" (click)=\"editDesignBase()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this design base?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deleteDesignBase(editedDesignBase)\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"input-effect\">\n    <input class=\"effect1\" type=\"text\" placeholder=\"\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addDesignBaseModal\">Create</button>\n\n<table>\n    <tr>\n        <th *ngFor=\"let header of headers\">{{header}}</th>\n    </tr>\n    <tr *ngFor=\"let designBase of designBasesGridData, let row_no = index\">\n        <td>{{designBase.name}}</td>\n        <td>{{designBase.description}}</td>\n        <td>{{designBase.displacementBeam}}</td>\n        <td>{{designBase.displacementBracket}}</td>\n        <td>{{designBase.safetyFactor}}</td>\n        <td>{{designBase.shearFactor}}</td>\n        <td>{{designBase.bucklingLenght}}</td>\n        <td>{{designBase.minDeflectionLimit}}</td>\n        <td class=\"columnWithIcons\">\n            <button type=\"button\" class=\"btn editBtn\" data-toggle=\"modal\" data-target=\"#editModal\" (click)=\"setChoosenElement(designBase, row_no)\">\n                <i class=\"fa fa-edit\"></i>\n            </button>\n            <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(designBase, row_no)\">\n                <i class=\"fa fa-trash\"></i>\n            </button>\n        </td>\n    </tr>\n</table>\n\n","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:168px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"saveNewDesignBase":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editDesignBase":[{"__symbolic":"method"}],"deleteDesignBase":[{"__symbolic":"method"}]}},"ɵbp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"app-subcomponents-verification-grid","template":"<!-- Create Modal -->\n<div class=\"modal\" id=\"addSubcomponentForVerificationModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Name:</span>\n                    <input type=\"text\" [(ngModel)]=\"templateSubcomponent.name\" #ctrl=\"ngModel\" required>\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Description:</span>\n                    <input type=\"text\" [(ngModel)]=\"templateSubcomponent.description\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"ctrl.invalid\" (click)=\"saveNewSubcomponentForVerification()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Name:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedSubcomponent.name\" #ctrl2=\"ngModel\" required>\n                </div>\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Description:</span>\n                    <input type=\"text\" [(ngModel)]=\"editedSubcomponent.description\">\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"ctrl2.invalid\" (click)=\"editSubcomponentForVerification()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this subcomponent for verification?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deleteSubcomponentForVerification(editedSubcomponent)\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"input-effect\">\n    <input class=\"effect1\" type=\"text\" placeholder=\"\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addSubcomponentForVerificationModal\">Create</button>\n\n<table>\n    <tr>\n        <th *ngFor=\"let header of headers\">{{header}}</th>\n    </tr>\n    <tr *ngFor=\"let subcomponent of subcomponentVerificationGridData, let row_no = index\">\n        <td>{{subcomponent.name}}</td>\n        <td>{{subcomponent.description}}</td>\n        <td class=\"columnWithIcons\">\n            <button type=\"button\" class=\"btn editBtn\" data-toggle=\"modal\" data-target=\"#editModal\" (click)=\"setChoosenElement(subcomponent, row_no)\">\n                <i class=\"fa fa-edit\"></i>\n            </button>\n            <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(subcomponent, row_no)\">\n                <i class=\"fa fa-trash\"></i>\n            </button>\n        </td>\n    </tr>\n</table>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"saveNewSubcomponentForVerification":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editSubcomponentForVerification":[{"__symbolic":"method"}],"deleteSubcomponentForVerification":[{"__symbolic":"method"}]}},"ɵbq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"orientation-positioning","template":"<table class=\"orientation-table\">\n    <thead>\n        <tr>\n            <th colspan='2' class=\"header\">Adjustment of position</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <table>\n                <thead>\n                    <tr>\n                        <th colspan='2' class=\"header\">Position</th>\n                    </tr>\n                </thead>\n                <tbody *ngIf=\"position!==undefined\">\n                    <tr>\n                        <th>X:</th>\n                        <th>\n                            <input type=\"number\" step=\"0.01\" name=\"fname\" (change)=\"changePosition()\" [(ngModel)]=\"position.x\" [disabled]=\"extensionInterface.isVariantChoosen\">[cm]</th>\n                    </tr>\n                    <tr>\n                        <th>Y:</th>\n                        <th>\n                            <input type=\"number\" step=\"0.01\" name=\"fname\" (change)=\"changePosition()\" [(ngModel)]=\"position.y\" [disabled]=\"extensionInterface.isVariantChoosen\">[cm]</th>\n                    </tr>\n                    <tr>\n                        <th>Z:</th>\n                        <th>\n                            <input type=\"number\" step=\"0.01\" name=\"fname\" (change)=\"changePosition()\" [(ngModel)]=\"position.z\" [disabled]=\"extensionInterface.isVariantChoosen\">[cm]</th>\n                    </tr>\n                </tbody>\n            </table>\n        </tr>\n        <!-- <tr>\n            <table>\n                <thead>\n                    <tr>\n                        <th colspan='2'>Rotation</th>\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr>\n                        <th>X:</th>\n                        <th style=\"text-align:right\">\n                            <input type=\"number\" step=\"0.01\" name=\"fname\" value=\"2.2\">[cm]</th>\n                    </tr>\n                    <tr>\n                        <th>Y:</th>\n                        <th style=\"text-align:right\">\n                            <input type=\"number\" step=\"0.01\" name=\"fname\" value=\"2.2\">[cm]</th>\n                    </tr>\n                    <tr>\n                        <th>Z:</th>\n                        <th style=\"text-align:right\">\n                            <input type=\"number\" step=\"0.01\" name=\"fname\" value=\"2.2\">[cm]</th>\n                    </tr>\n                </tbody>\n            </table>\n        </tr> -->\n    </tbody>\n</table>","styles":[".orientation-table{top:82px;left:10px;border:solid;color:#fff;font-size:14px;width:45%}@media only screen and (max-width:1620px){.orientation-table{width:27%}input{width:116px}}.orientation-table thead{background-color:#534f53}.orientation-table tbody{background-color:#ddd;color:#000}.orientation-table table{border:2px solid #a9a9a9;margin:3px auto;width:94%;background:#d3d3d3}.orientation-table th{font-weighT:500;padding-left:10px}.orientation-table tr{text-align:center}input{text-align:right;background:#fff;height:22px;margin-right:4px}.header{color:#fff;text-align:left}"]}]}],"members":{"ExtensionInterface":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵbr"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":83,"character":80}]}],"ngOnInit":[{"__symbolic":"method"}],"changePosition":[{"__symbolic":"method"}]}},"ɵbr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":8,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵh"}]}],"saveConnectorConfiguration":[{"__symbolic":"method"}],"saveConnectorVariantConfiguration":[{"__symbolic":"method"}],"addNewPartListConnectorIntoDb":[{"__symbolic":"method"}],"removePartListConnector":[{"__symbolic":"method"}],"loadAllPartListConnectors":[{"__symbolic":"method"}],"updatePartListConnector":[{"__symbolic":"method"}]}},"ɵbs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"app-interaction-equations-grid","template":"<!-- Create Modal -->\n<div class=\"modal\" id=\"addInteractionEquationModal\">\n    <div class=\"modal-dialog modal-lg\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body display-flex\">\n                <div>\n                    <div class=\"display-flex\">\n                        <span class=\"modal-label\">Name:</span>\n                        <input type=\"text\" [(ngModel)]=\"editedInteractionEquation.name\" #ctrl2=\"ngModel\" required>\n                    </div>\n                    <div class=\"display-flex\">\n                        <span class=\"modal-label\">Code based:</span>\n                        <input type=\"checkbox\" [(ngModel)]=\"editedInteractionEquation.codeBased\">\n                    </div>\n                    <div class=\"display-flex\">\n                        <span class=\"modal-label\">Equation:</span>\n                        <input type=\"text\" #equation1 [(ngModel)]=\"editedInteractionEquation.equation\" (keyup)=\"onChange(equation1.value)\">\n                    </div>\n                    <div class=\"display-flex\">\n                        <span class=\"modal-label\">Visual:</span>\n                        <ng-katex class=\"equation-overflow\" [equation]=\"convertedEquation\" [options]=\"options\"></ng-katex>\n                    </div>\n                    <div>\n                        <br>\n                        <b>Allowed input for the equations:</b>\n                        <ul>\n                            <li>Mathematical operators +, -. *, /, ^, min(), max(), sin(), cos(), tan</li>\n                            <li>Numbers</li>\n                            <li>Design Load/Moment Fa.ed, Fx.ed, Fy.ed, Fz.ed, Mx.ed, My.ed, Mz.ed, X</li>\n                            <li>Resistance Load/Moment Fx.ed, Fy.rd, Fz.rd, Mx.rd, My.rd, Mz.rd</li>\n                            <li>Codes\" N, V, MAX, VX, NX, N2+N5, N2+N5_MAX, F1, F2, F3, N2, N3, V2</li>\n                            <li>You can enter multiple equations if you separate them by ;</li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"ctrl2.invalid\" (click)=\"saveNewInteractionEquation()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this interaction equation?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deleteInteractionEquation(editedInteractionEquation)\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog modal-lg\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body display-flex\">\n                <div>\n                    <div class=\"display-flex\">\n                        <span class=\"modal-label\">Name:</span>\n                        <input type=\"text\" [(ngModel)]=\"editedInteractionEquation.name\" #ctrl=\"ngModel\" required>\n                    </div>\n                    <div class=\"display-flex\">\n                        <span class=\"modal-label\">Code based:</span>\n                        <input type=\"checkbox\" [(ngModel)]=\"editedInteractionEquation.codeBased\">\n                    </div>\n                    <div class=\"display-flex\">\n                        <span class=\"modal-label\">Equation:</span>\n                        <input type=\"text\" #equation2 [(ngModel)]=\"editedInteractionEquation.equation\" (keyup)=\"onChange(equation2.value)\">\n                    </div>\n                    <div class=\"display-flex\">\n                        <span class=\"modal-label\">Visual:</span>\n                        <ng-katex class=\"equation-overflow\" [equation]=\"convertedEquation\" [options]=\"options\"></ng-katex>\n                    </div>\n                    <div>\n                        <br>\n                        <b>Allowed input for the equations:</b>\n                        <ul>\n                            <li>Mathematical operators +, -. *, /, ^, min(), max(), sin(), cos(), tan</li>\n                            <li>Numbers</li>\n                            <li>Design Load/Moment Fa.ed, Fx.ed, Fy.ed, Fz.ed, Mx.ed, My.ed, Mz.ed, X</li>\n                            <li>Resistance Load/Moment Fx.ed, Fy.rd, Fz.rd, Mx.rd, My.rd, Mz.rd</li>\n                            <li>Codes\" N, V, MAX, VX, NX, N2+N5, N2+N5_MAX, F1, F2, F3, N2, N3, V2</li>\n                            <li>You can enter multiple equations if you separate them by ;</li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"ctrl.invalid\" (click)=\"editInteractionEquation()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n<div class=\"input-effect\">\n    <input class=\"effect1\" type=\"text\" placeholder=\"\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addInteractionEquationModal\" (click)=\"setChoosenElement(null, -1)\">Create</button>\n\n<table>\n    <tr>\n        <th *ngFor=\"let header of headers\">{{header}}</th>\n    </tr>\n    <tr *ngFor=\"let interactionEquation of interactionEquationsGridData, let row_no = index\">\n        <td>{{interactionEquation.name}}</td>\n        <td>\n            <input type=\"checkbox\" [ngModel]=\"interactionEquation.codeBased\" disabled>\n        </td>\n        <td>{{interactionEquation.equation}}</td>\n        <td class=\"columnWithIcons\">\n            <button type=\"button\" class=\"btn editBtn\" data-toggle=\"modal\" data-target=\"#editModal\" (click)=\"setChoosenElement(interactionEquation, row_no)\">\n                <i class=\"fa fa-edit\"></i>\n            </button>\n            <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(interactionEquation, row_no)\">\n                <i class=\"fa fa-trash\"></i>\n            </button>\n        </td>\n    </tr>\n</table>","styles":["ng-katex{font-size:1.1em}.equation-overflow{max-width:650px;overflow-x:auto}table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px;margin-right:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}.rectangle{width:200px;height:100px;border:1px solid gray}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"saveNewInteractionEquation":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editInteractionEquation":[{"__symbolic":"method"}],"deleteInteractionEquation":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}]}},"ɵbt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"app-pipe-functions-grid","template":"<!-- Create Modal -->\n<div class=\"modal\" id=\"addModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeFunction.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Code:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeFunction.code\" formControlName=\"code\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"saveNewPipeFunction()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeFunction.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Code:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeFunction.code\" formControlName=\"code\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"editPipeFunction()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Pipe function?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deletePipeFunction(editedPipeFunction)\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n<div class=\"input-effect\">\n    <input class=\"effect1\" type=\"text\" placeholder=\"\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addModal\" (click)=\"prepareCreate()\">Create</button>\n\n<table>\n    <tr>\n        <th *ngFor=\"let header of headers\">{{header}}</th>\n    </tr>\n    <tr *ngFor=\"let pipeFunction of pipeFunctionsGridData, let row_no = index\">\n        <td>{{pipeFunction.name}}</td>\n        <td>{{pipeFunction.code}}</td>\n        <td class=\"columnWithIcons\">\n            <button type=\"button\" class=\"btn editBtn\" data-toggle=\"modal\" data-target=\"#editModal\" (click)=\"setChoosenElement(pipeFunction, row_no)\">\n                <i class=\"fa fa-edit\"></i>\n            </button>\n            <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(pipeFunction, row_no)\">\n                <i class=\"fa fa-trash\"></i>\n            </button>\n        </td>\n    </tr>\n</table>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"saveNewPipeFunction":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editPipeFunction":[{"__symbolic":"method"}],"deletePipeFunction":[{"__symbolic":"method"}],"prepareCreate":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}]}},"ɵbu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"app-pipe-groups-grid","template":"<!-- Create Modal -->\n<div class=\"modal\" id=\"addModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeGroup.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Code:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeGroup.code\" formControlName=\"code\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeGroup.description\" formControlName=\"description\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"saveNewPipeGroup()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeGroup.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Code:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeGroup.code\" formControlName=\"code\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeGroup.description\" formControlName=\"description\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"editPipeGroup()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Pipe group?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deletePipeGroup(editedPipeGroup)\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n<div class=\"input-effect\">\n    <input class=\"effect1\" type=\"text\" placeholder=\"\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addModal\" (click)=\"prepareCreate()\">Create</button>\n\n<table>\n    <tr>\n        <th *ngFor=\"let header of headers\">{{header}}</th>\n    </tr>\n    <tr *ngFor=\"let pipeGroup of pipeGroupsGridData, let row_no = index\">\n        <td>{{pipeGroup.name}}</td>\n        <td>{{pipeGroup.code}}</td>\n        <td class=\"columnWithIcons\">\n            <button type=\"button\" class=\"btn editBtn\" data-toggle=\"modal\" data-target=\"#editModal\" (click)=\"setChoosenElement(pipeGroup, row_no)\">\n                <i class=\"fa fa-edit\"></i>\n            </button>\n            <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(pipeGroup, row_no)\">\n                <i class=\"fa fa-trash\"></i>\n            </button>\n        </td>\n    </tr>\n</table>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"saveNewPipeGroup":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editPipeGroup":[{"__symbolic":"method"}],"deletePipeGroup":[{"__symbolic":"method"}],"prepareCreate":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}]}},"ɵbv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"app-pipe-fastening-groups-grid","template":"<!-- Create Modal -->\n<div class=\"modal\" id=\"addModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeFasteningGroup.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Code:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeFasteningGroup.code\" formControlName=\"code\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"saveNewPipeFasteningGroup()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeFasteningGroup.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Code:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeFasteningGroup.code\" formControlName=\"code\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"editPipeFasteningGroup()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Pipe Fastening group?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deletePipeFasteningGroup(editedPipeFasteningGroup)\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n<div class=\"input-effect\">\n    <input class=\"effect1\" type=\"text\" placeholder=\"\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addModal\" (click)=\"prepareCreate()\">Create</button>\n\n<table>\n    <tr>\n        <th *ngFor=\"let header of headers\">{{header}}</th>\n    </tr>\n    <tr *ngFor=\"let pipeFasteningGroup of pipeFasteningGroupsGridData, let row_no = index\">\n        <td>{{pipeFasteningGroup.name}}</td>\n        <td>{{pipeFasteningGroup.code}}</td>\n        <td class=\"columnWithIcons\">\n            <button type=\"button\" class=\"btn editBtn\" data-toggle=\"modal\" data-target=\"#editModal\" (click)=\"setChoosenElement(pipeFasteningGroup, row_no)\">\n                <i class=\"fa fa-edit\"></i>\n            </button>\n            <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(pipeFasteningGroup, row_no)\">\n                <i class=\"fa fa-trash\"></i>\n            </button>\n        </td>\n    </tr>\n</table>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"saveNewPipeFasteningGroup":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editPipeFasteningGroup":[{"__symbolic":"method"}],"deletePipeFasteningGroup":[{"__symbolic":"method"}],"prepareCreate":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}]}},"ɵbw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"app-pipe-materials-grid","template":"<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Pipe material group?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deletePipeMaterial()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"!isPipeMaterialChoosen\">\n    <div class=\"input-effect\">\n        <input class=\"effect1\" type=\"text\" placeholder=\"\">\n        <label>Search</label>\n        <span class=\"focus-border\"></span>\n    </div>\n    <button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addModal\" (click)=\"createNewPipeMaterial()\">Create</button>\n\n    <table>\n        <tr>\n            <th *ngFor=\"let header of headers\">{{header}}</th>\n        </tr>\n        <tr *ngFor=\"let pipeMaterial of pipeMaterialsGridData, let row_no = index\">\n            <td>{{pipeMaterial.name}}</td>\n            <td>{{pipeMaterial.description}}</td>\n            <td class=\"columnWithIcons\">\n                <button type=\"button\" class=\"btn editBtn\" (click)=\"editPipeMaterial(pipeMaterial)\">\n                    <i class=\"fa fa-edit\"></i>\n                </button>\n                <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(pipeMaterial)\">\n                    <i class=\"fa fa-trash\"></i>\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"managmentComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"createNewPipeMaterial":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editPipeMaterial":[{"__symbolic":"method"}],"deletePipeMaterial":[{"__symbolic":"method"}]}},"ɵbx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"app-pipe-material-types-grid","template":"<!-- Create Modal -->\n<div class=\"modal\" id=\"addModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeMaterialType.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Code:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeMaterialType.code\" formControlName=\"code\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"saveNewPipeMaterialType()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <form class=\"form-group\" [formGroup]=\"formGroup\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeMaterialType.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Code:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedPipeMaterialType.code\" formControlName=\"code\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"formGroup.invalid\" (click)=\"editPipeMaterialType()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Pipe material type?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deletePipeMaterialType(editedPipeMaterialType)\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n<div class=\"input-effect\">\n    <input class=\"effect1\" type=\"text\" placeholder=\"\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addModal\" (click)=\"prepareCreate()\">Create</button>\n\n<table>\n    <tr>\n        <th *ngFor=\"let header of headers\">{{header}}</th>\n    </tr>\n    <tr *ngFor=\"let pipeMaterialType of pipeMaterialTypesGridData, let row_no = index\">\n        <td>{{pipeMaterialType.name}}</td>\n        <td>{{pipeMaterialType.code}}</td>\n        <td class=\"columnWithIcons\">\n            <button type=\"button\" class=\"btn editBtn\" data-toggle=\"modal\" data-target=\"#editModal\" (click)=\"setChoosenElement(pipeMaterialType, row_no)\">\n                <i class=\"fa fa-edit\"></i>\n            </button>\n            <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(pipeMaterialType, row_no)\">\n                <i class=\"fa fa-trash\"></i>\n            </button>\n        </td>\n    </tr>\n</table>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"saveNewPipeMaterialType":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editPipeMaterialType":[{"__symbolic":"method"}],"deletePipeMaterialType":[{"__symbolic":"method"}],"prepareCreate":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}]}},"ɵby":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"app-pipe-material-managment","template":"<div *ngIf=\"pipeMaterialData !== undefined && pipeMaterialData !== null\">\n    <div class=\"row\" style=\"padding-left: 12px;\">\n        <b>Pipe Material Group:</b> &nbsp;{{pipeMaterialData.name}}</div>\n        <button type=\"button\" class=\"btn btn-danger red-button\" (click)=\"returnHandler()\">Return</button>\n        <button type=\"submit\" class=\"btn btn-primary save-button\" [disabled]=\"ctrl.invalid || ctrl2.invalid\" (click)=\"save()\">Save</button>\n    <div class=\"row\">    \n\n        <div class=\"col-6\" style=\"line-height: 30px; padding-top: 30px;\">\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Name:\n                </div>\n                <input type=\"text\" class=\"col-4\"[(ngModel)]=\"pipeMaterialData.name\" #ctrl=\"ngModel\" required>\n                <br>\n            </div>\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Description:\n                </div>\n                <input type=\"text\" class=\"col-4\"[(ngModel)]=\"pipeMaterialData.description\">\n                <br>\n            </div>\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Pipe Material Type:\n                </div>\n                <select name=\"pipeMaterialTypeSelect\" class=\"selectHeight\" [(ngModel)]=\"pipeMaterialData.pipeMaterialTypeId\" #ctrl2=\"ngModel\">\n                    <option *ngFor=\"let pipeMaterialType of pipeMaterialTypesArray | sortByName\" [ngValue]=\"pipeMaterialType.id\">{{pipeMaterialType.name}}</option>\n                </select>\n            </div>\n        </div>\n    </div>\n\n\n    <kendo-grid style=\"border: none\" [data]=\"pipeMaterialConditionsGridData\" (add)=\"addHandlerForConditionData($event)\"\n    (save)=\"saveHandlerForconditionData($event)\" (cancel)=\"cancelHandlerForConditionData($event)\" (edit)=\"editHandlerForConditionData($event)\"\n    (remove)=\"removeHandler($event)\">\n    <ng-template kendoGridToolbarTemplate>\n      <div class=\"display-flex\">\n        <button kendoGridAddCommand [disabled]=\"!canAddRowToConditionGrid\" class=\"btn add-button light-steel-shadow\" style=\"position: absolute; right: 15px;\"\n          type=\"button\" title=\"add\">\n          <i class=\"fa fa-plus\" click></i> Add</button>\n      </div>\n    </ng-template>\n    <kendo-grid-column field=\"temperature\" editor=\"editNumber\" title=\"Temperature\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"expansionCoefficient\" editor=\"editNumber\" title=\"Expansion Coefficient\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"elasticityCoeficient\" editor=\"editNumber\" title=\"Elasticity Coefficient\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"maxYealdStrength\" editor=\"editNumber\" title=\"Max Yeald Strength\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"safetyFactor\" editor=\"editNumber\" title=\"Safety Factor\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"standard\" title=\"Standard\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column title=\"\" width=\"60\">\n      <ng-template kendoGridCellTemplate>\n        <div class=\"display-flex\">\n          <!--MAGIC DO NOT TOUCH DISABLE FUNCTION-->\n          <button kendoGridEditCommand [disabled]=\"!canAddRowToConditionGrid\" class=\"attributesBtn\" title=\"Edit\">\n            <i class=\"material-icons\">&#xE3C9;</i>\n          </button>\n          <button kendoGridRemoveCommand [disabled]=\"!canAddRowToConditionGrid\" class=\"attributesBtn btn-remove\" data-toggle=\"modal\"\n            data-target=\"#confirmationModal\" title=\"Remove\">\n            <i class=\"material-icons\">&#xE5CD;</i>\n          </button>\n          <button kendoGridSaveCommand class=\"attributesBtn\" title=\"Save\">\n            <i class=\"material-icons\">&#xE876;</i>\n          </button>\n          <button kendoGridCancelCommand class=\"attributesBtn\" title=\"Cancel\">\n            <i class=\"material-icons\">&#xE5C9;</i>\n          </button>\n        </div>\n      </ng-template>\n    </kendo-grid-column>\n  </kendo-grid>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"confirmationModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Pipe Material Condition?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" (click)=\"removeCondition()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>","styles":[".regularObjectBorder{border-width:1px;border-style:solid}.justTopBorder{border-bottom:0;border-left:0;border-right:0}.justRightBorder{border-bottom:0;border-left:0;border-top:0}.justBottomBorder{border-right:0;border-left:0;border-top:0}#tabContent{font-size:11px;border-color:#dddd}.modal-label{width:168px}hr{margin-top:0}#variantsGrid{margin-left:17px;border-color:#dddd}.delete-button{height:23px;width:23px;margin-left:3px;background-color:#d0021b;color:#fff;font-size:12px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;border-radius:2px;cursor:pointer}.configure-button{height:23px;margin-left:3px;background-color:#4a8bb7;color:#fff;font-size:12px;padding:3px 14px;font-weight:300;letter-spacing:1.1px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;margin-bottom:6px;border-radius:2px;cursor:pointer}.configure-button:disabled{background-color:#999;cursor:default}.step-file{font-size:14px;text-align:center;margin-bottom:10px;font-weight:700}#stpFileDiv{margin-left:auto;margin-right:auto}#variantsTabGrid{border:0;margin-top:26px;border-top:1px solid #ddd}.extra-padding-top{padding-top:10px}.mat-header-cell{font-weight:700}.variantBtn{background-color:#ddd;border:none;padding:6px 18px;outline:0;color:#534f53;cursor:pointer}.variants-header{margin:28px 0 5px;display:flex;justify-content:space-between}.table-label{font-size:16px}.tableCurrentVariant{font-size:14px;border-color:#708090}.borderGray{border-color:#a9a9a9}.borderGray:last-child{border-right:none}.mat-header-row{border-color:#dddd}.highlighted{background-color:#fff!important}.display-flex{display:flex;align-items:center;margin-bottom:10px}.save-button{margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":130,"character":77}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"showManagmentPage":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"returnHandler":[{"__symbolic":"method"}],"editHandlerForConditionData":[{"__symbolic":"method"}],"cancelHandlerForConditionData":[{"__symbolic":"method"}],"saveHandlerForconditionData":[{"__symbolic":"method"}],"addHandlerForConditionData":[{"__symbolic":"method"}],"removeHandler":[{"__symbolic":"method"}],"createFormGroupForConditionsData":[{"__symbolic":"method"}],"overwriteDataInGrid":[{"__symbolic":"method"}],"saveNewCondition":[{"__symbolic":"method"}],"saveEditedConditions":[{"__symbolic":"method"}],"removeCondition":[{"__symbolic":"method"}],"deletePipeMaterialCondition":[{"__symbolic":"method"}],"savePipeMaterialHandler":[{"__symbolic":"method"}]}},"ɵbz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"app-insulation-materials-grid","template":"<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Insulation Material?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deleteInsulationMaterial()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"!isInsulationMaterialChoosen\">\n    <div class=\"input-effect\">\n        <input class=\"effect1\" type=\"text\" placeholder=\"\">\n        <label>Search</label>\n        <span class=\"focus-border\"></span>\n    </div>\n    <button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addModal\" (click)=\"createNewInsulationMaterial()\">Create</button>\n\n    <table>\n        <tr>\n            <th *ngFor=\"let header of headers\">{{header}}</th>\n        </tr>\n        <tr *ngFor=\"let insulationMaterial of insulationMaterialsGridData, let row_no = index\">\n            <td>{{insulationMaterial.name}}</td>\n            <td>{{insulationMaterial.density}}</td>\n            <td class=\"columnWithIcons\">\n                <button type=\"button\" class=\"btn editBtn\" (click)=\"editInsulationMaterial(insulationMaterial)\">\n                    <i class=\"fa fa-edit\"></i>\n                </button>\n                <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(insulationMaterial)\">\n                    <i class=\"fa fa-trash\"></i>\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"managmentComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"createNewInsulationMaterial":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editInsulationMaterial":[{"__symbolic":"method"}],"deleteInsulationMaterial":[{"__symbolic":"method"}]}},"ɵca":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"app-insulation-material-managment","template":"<div *ngIf=\"insulationMaterialData !== undefined && insulationMaterialData !== null\">\n    <div class=\"row\" style=\"padding-left: 12px;\">\n        <b>Insulation Material:</b> &nbsp;{{insulationMaterialData.name}}</div>\n    <button type=\"button\" class=\"btn btn-danger red-button\" (click)=\"returnHandler()\">Return</button>\n    <button type=\"submit\" class=\"btn btn-primary save-button\" [disabled]=\"ctrl.invalid\" (click)=\"save()\">Save</button>\n    <div class=\"row\">\n\n        <div class=\"col-6\" style=\"line-height: 30px; padding-top: 30px;\">\n            <div class=\"display-flex\">\n                <div class=\"col-2\">Name:\n                </div>\n                <input type=\"text\" class=\"col-4\" [(ngModel)]=\"insulationMaterialData.name\" #ctrl=\"ngModel\" required>\n                <br>\n            </div>\n            <div class=\"display-flex\">\n                <div class=\"col-2\">Density:\n                </div>\n                <input type=\"text\" class=\"col-4\" [(ngModel)]=\"insulationMaterialData.density\"> <span class=\"col-1\">[mm]</span>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"col-3\">\n        <kendo-grid style=\"border: none\" [data]=\"insulationMaterialSizeGridData\" (add)=\"addHandlerForSizeData($event)\" (save)=\"saveHandlerForSizeData($event)\"\n            (cancel)=\"cancelHandlerForSizeData($event)\" (edit)=\"editHandlerForSizeData($event)\" (remove)=\"removeHandler($event)\">\n            <ng-template kendoGridToolbarTemplate>\n                <div class=\"display-flex\">\n                    <button kendoGridAddCommand [disabled]=\"!canAddRowToSizeGrid\" class=\"btn add-button light-steel-shadow\" style=\"position: absolute; right: 15px;\"\n                        type=\"button\" title=\"add\">\n                        <i class=\"fa fa-plus\" click></i> Add</button>\n                </div>\n            </ng-template>\n            <kendo-grid-column field=\"size\" editor=\"editNumber\" title=\"Size [mm]\" width=\"50\">\n            </kendo-grid-column>\n            <kendo-grid-column title=\"\" width=\"60\">\n                <ng-template kendoGridCellTemplate>\n                    <div class=\"display-flex\">\n                        <!--MAGIC DO NOT TOUCH DISABLE FUNCTION-->\n                        <button kendoGridEditCommand [disabled]=\"!canAddRowToSizeGrid\" class=\"attributesBtn\" title=\"Edit\">\n                            <i class=\"material-icons\">&#xE3C9;</i>\n                        </button>\n                        <button kendoGridRemoveCommand [disabled]=\"!canAddRowToSizeGrid\" class=\"attributesBtn btn-remove\" data-toggle=\"modal\" data-target=\"#confirmationModal\"\n                            title=\"Remove\">\n                            <i class=\"material-icons\">&#xE5CD;</i>\n                        </button>\n                        <button kendoGridSaveCommand class=\"attributesBtn\" title=\"Save\">\n                            <i class=\"material-icons\">&#xE876;</i>\n                        </button>\n                        <button kendoGridCancelCommand class=\"attributesBtn\" title=\"Cancel\">\n                            <i class=\"material-icons\">&#xE5C9;</i>\n                        </button>\n                    </div>\n                </ng-template>\n            </kendo-grid-column>\n        </kendo-grid>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"confirmationModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Insulation Material Size?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" (click)=\"removeSize()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>","styles":[".regularObjectBorder{border-width:1px;border-style:solid}.justTopBorder{border-bottom:0;border-left:0;border-right:0}.justRightBorder{border-bottom:0;border-left:0;border-top:0}.justBottomBorder{border-right:0;border-left:0;border-top:0}#tabContent{font-size:11px;border-color:#dddd}.modal-label{width:168px}hr{margin-top:0}#variantsGrid{margin-left:17px;border-color:#dddd}.delete-button{height:23px;width:23px;margin-left:3px;background-color:#d0021b;color:#fff;font-size:12px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;border-radius:2px;cursor:pointer}.configure-button{height:23px;margin-left:3px;background-color:#4a8bb7;color:#fff;font-size:12px;padding:3px 14px;font-weight:300;letter-spacing:1.1px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;margin-bottom:6px;border-radius:2px;cursor:pointer}.configure-button:disabled{background-color:#999;cursor:default}.step-file{font-size:14px;text-align:center;margin-bottom:10px;font-weight:700}#stpFileDiv{margin-left:auto;margin-right:auto}#variantsTabGrid{border:0;margin-top:26px;border-top:1px solid #ddd}.extra-padding-top{padding-top:10px}.mat-header-cell{font-weight:700}.variantBtn{background-color:#ddd;border:none;padding:6px 18px;outline:0;color:#534f53;cursor:pointer}.variants-header{margin:28px 0 5px;display:flex;justify-content:space-between}.table-label{font-size:16px}.tableCurrentVariant{font-size:14px;border-color:#708090}.borderGray{border-color:#a9a9a9}.borderGray:last-child{border-right:none}.mat-header-row{border-color:#dddd}.highlighted{background-color:#fff!important}.display-flex{display:flex;align-items:center;margin-bottom:10px}.save-button{margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":110,"character":77},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":110,"character":104}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"showManagmentPage":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"returnHandler":[{"__symbolic":"method"}],"editHandlerForSizeData":[{"__symbolic":"method"}],"cancelHandlerForSizeData":[{"__symbolic":"method"}],"saveHandlerForSizeData":[{"__symbolic":"method"}],"addHandlerForSizeData":[{"__symbolic":"method"}],"removeHandler":[{"__symbolic":"method"}],"createFormGroupForSizeData":[{"__symbolic":"method"}],"overwriteDataInGrid":[{"__symbolic":"method"}],"saveNewSize":[{"__symbolic":"method"}],"saveEditedSizes":[{"__symbolic":"method"}],"removeSize":[{"__symbolic":"method"}],"deleteInsulationMaterialSize":[{"__symbolic":"method"}]}},"ɵcb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"app-pipes-grid","template":"<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Pipe?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deletePipe()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"!isPipeChoosen\">\n    <div class=\"input-effect\">\n        <input class=\"effect1\" type=\"text\" placeholder=\"\">\n        <label>Search</label>\n        <span class=\"focus-border\"></span>\n    </div>\n    <button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addModal\" (click)=\"createNewPipe()\">Create</button>\n\n    <table>\n        <tr>\n            <th *ngFor=\"let header of headers\">{{header}}</th>\n        </tr>\n        <tr *ngFor=\"let pipe of pipesGridData, let row_no = index\">\n            <td>{{pipe.name}}</td>\n            <td>{{pipe.description}}</td>\n            <td class=\"columnWithIcons\">\n                <button type=\"button\" class=\"btn editBtn\" (click)=\"editPipe(pipe)\">\n                    <i class=\"fa fa-edit\"></i>\n                </button>\n                <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(pipe)\">\n                    <i class=\"fa fa-trash\"></i>\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"managmentComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"createNewPipe":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editPipe":[{"__symbolic":"method"}],"deletePipe":[{"__symbolic":"method"}]}},"ɵcc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"app-pipes-managment","template":"<div *ngIf=\"pipeData !== undefined && pipeData !== null\">\n    <div class=\"row\" style=\"padding-left: 12px;\">\n        <b>Pipe:</b> &nbsp;{{pipeData.name}}</div>\n    <button type=\"button\" class=\"btn btn-danger red-button\" (click)=\"returnHandler()\">Return</button>\n    <button type=\"submit\" class=\"btn btn-primary save-button\" [disabled]=\"ctrl.invalid || ctrl2.invalid || ctrl3.invalid\" (click)=\"save()\">Save</button>\n    <div class=\"row\">\n\n        <div class=\"col-6\" style=\"line-height: 30px; padding-top: 30px;\">\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Name:\n                </div>\n                <input type=\"text\" class=\"col-4\" [(ngModel)]=\"pipeData.name\" #ctrl=\"ngModel\" required>\n                <br>\n            </div>\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Description:\n                </div>\n                <input type=\"text\" class=\"col-4\" [(ngModel)]=\"pipeData.description\">\n            </div>\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Pipe group:\n                </div>\n                <select name=\"\" id=\"\" [(ngModel)]=\"pipeData.pipeGroupId\" #ctrl2=\"ngModel\" required>\n                    <option *ngFor=\"let pipeGroup of pipeGroupsData | sortByName\" [(value)]=\"pipeGroup.id\">{{pipeGroup.name}}</option>\n                </select>\n            </div>\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Pipe material group:\n                </div>\n                <select name=\"\" id=\"\" [(ngModel)]=\"pipeData.pipeMaterialGroupId\" #ctrl3=\"ngModel\" required>\n                    <option *ngFor=\"let pipeMaterial of pipeMaterialGroupsData\" [(value)]=\"pipeMaterial.id\">{{pipeMaterial.name}}</option>\n                </select>\n            </div>\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Insulation allowed:\n                </div>\n                <input type=\"checkbox\"  [(ngModel)]=\"pipeData.insulationAllowed\">\n            </div>\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Water filling allowed:\n                </div>\n                <input type=\"checkbox\"  [(ngModel)]=\"pipeData.waterFillingAllowed\">\n            </div>\n        </div>\n    </div>\n\n    <div>\n        <kendo-grid style=\"border: none\" [data]=\"pipeSizesGridData\" (add)=\"addHandlerForSizeData($event)\" (save)=\"saveHandlerForSizeData($event)\"\n            (cancel)=\"cancelHandlerForSizeData($event)\" (edit)=\"editHandlerForSizeData($event)\" (remove)=\"removeHandler($event)\">\n            <ng-template kendoGridToolbarTemplate>\n                <div class=\"display-flex\">\n                    <button kendoGridAddCommand [disabled]=\"!canAddRowToSizeGrid\" class=\"btn add-button light-steel-shadow\" style=\"position: absolute; right: 15px;\"\n                        type=\"button\" title=\"add\">\n                        <i class=\"fa fa-plus\" click></i> Add</button>\n                </div>\n            </ng-template>\n            <kendo-grid-column field=\"nominalWidth\" title=\"Width [mm]\" width=\"30\">\n            </kendo-grid-column>\n            <kendo-grid-column field=\"maxSpanWithInsulation\" editor=\"editNumber\" title=\"Max span with insulation [mm]\" width=\"70\">\n            </kendo-grid-column>\n            <kendo-grid-column field=\"maxSpanWithoutInsulation\" editor=\"editNumber\" title=\"Max span without insulation [mm]\" width=\"70\">\n            </kendo-grid-column>\n            <kendo-grid-column field=\"insulationThicknessDefault\" editor=\"editNumber\" title=\"Insulation thickness default [mm]\" width=\"70\">\n            </kendo-grid-column>\n            <kendo-grid-column field=\"outerDiameter\" editor=\"editNumber\" title=\"Outer diameter [mm]\" width=\"60\">\n            </kendo-grid-column>\n            <kendo-grid-column field=\"nominalDiameter\" editor=\"editNumber\" title=\"Nominal diameter [mm]\" width=\"60\">\n            </kendo-grid-column>\n            <kendo-grid-column field=\"wallThickness\" editor=\"editNumber\" title=\"Wall thickness [mm]\" width=\"60\">\n            </kendo-grid-column>\n            <kendo-grid-column field=\"weightPMeter\" editor=\"editNumber\" title=\"Weight per Meter [kg/m]\" width=\"60\">\n            </kendo-grid-column>\n            <kendo-grid-column title=\"\" width=\"30\">\n                <ng-template kendoGridCellTemplate>\n                    <div class=\"display-flex\">\n                        <!--MAGIC DO NOT TOUCH DISABLE FUNCTION-->\n                        <button kendoGridEditCommand [disabled]=\"!canAddRowToSizeGrid\" class=\"attributesBtn\" title=\"Edit\">\n                            <i class=\"material-icons\">&#xE3C9;</i>\n                        </button>\n                        <button kendoGridRemoveCommand [disabled]=\"!canAddRowToSizeGrid\" class=\"attributesBtn btn-remove\" data-toggle=\"modal\" data-target=\"#confirmationModal\"\n                            title=\"Remove\">\n                            <i class=\"material-icons\">&#xE5CD;</i>\n                        </button>\n                        <button kendoGridSaveCommand class=\"attributesBtn\" title=\"Save\">\n                            <i class=\"material-icons\">&#xE876;</i>\n                        </button>\n                        <button kendoGridCancelCommand class=\"attributesBtn\" title=\"Cancel\">\n                            <i class=\"material-icons\">&#xE5C9;</i>\n                        </button>\n                    </div>\n                </ng-template>\n            </kendo-grid-column>\n        </kendo-grid>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"confirmationModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Pipe Size?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" (click)=\"removeSize()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>","styles":[".regularObjectBorder{border-width:1px;border-style:solid}.justTopBorder{border-bottom:0;border-left:0;border-right:0}.justRightBorder{border-bottom:0;border-left:0;border-top:0}.justBottomBorder{border-right:0;border-left:0;border-top:0}#tabContent{font-size:11px;border-color:#dddd}.modal-label{width:168px}hr{margin-top:0}#variantsGrid{margin-left:17px;border-color:#dddd}.delete-button{height:23px;width:23px;margin-left:3px;background-color:#d0021b;color:#fff;font-size:12px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;border-radius:2px;cursor:pointer}.configure-button{height:23px;margin-left:3px;background-color:#4a8bb7;color:#fff;font-size:12px;padding:3px 14px;font-weight:300;letter-spacing:1.1px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;margin-bottom:6px;border-radius:2px;cursor:pointer}.configure-button:disabled{background-color:#999;cursor:default}.step-file{font-size:14px;text-align:center;margin-bottom:10px;font-weight:700}#stpFileDiv{margin-left:auto;margin-right:auto}#variantsTabGrid{border:0;margin-top:26px;border-top:1px solid #ddd}.extra-padding-top{padding-top:10px}.mat-header-cell{font-weight:700}.variantBtn{background-color:#ddd;border:none;padding:6px 18px;outline:0;color:#534f53;cursor:pointer}.variants-header{margin:28px 0 5px;display:flex;justify-content:space-between}.table-label{font-size:16px}.tableCurrentVariant{font-size:14px;border-color:#708090}.borderGray{border-color:#a9a9a9}.borderGray:last-child{border-right:none}.mat-header-row{border-color:#dddd}.highlighted{background-color:#fff!important}.display-flex{display:flex;align-items:center;margin-bottom:10px}.save-button{margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":155,"character":77}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"showManagmentPage":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"returnHandler":[{"__symbolic":"method"}],"editHandlerForSizeData":[{"__symbolic":"method"}],"cancelHandlerForSizeData":[{"__symbolic":"method"}],"saveHandlerForSizeData":[{"__symbolic":"method"}],"addHandlerForSizeData":[{"__symbolic":"method"}],"removeHandler":[{"__symbolic":"method"}],"createFormGroupForSizeData":[{"__symbolic":"method"}],"changeDisplayedUnits":[{"__symbolic":"method"}],"overwriteDataInGrid":[{"__symbolic":"method"}],"saveNewSize":[{"__symbolic":"method"}],"saveEditedSizes":[{"__symbolic":"method"}],"removeSize":[{"__symbolic":"method"}],"deletePipeSize":[{"__symbolic":"method"}]}},"ɵcd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"app-pipering-bosses-grid","template":"<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Pipering Boss?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deletePiperingBoss()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"!isPiperingBossChoosen\">\n    <div class=\"input-effect\">\n        <input class=\"effect1\" type=\"text\" placeholder=\"\">\n        <label>Search</label>\n        <span class=\"focus-border\"></span>\n    </div>\n    <button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addModal\" (click)=\"createNewPiperingBoss()\">Create</button>\n\n    <table>\n        <tr>\n            <th *ngFor=\"let header of headers\">{{header}}</th>\n        </tr>\n        <tr *ngFor=\"let piperingBoss of piperingBossesGridData, let row_no = index\">\n            <td>{{piperingBoss.name}}</td>\n            <td>{{piperingBoss.claw}}</td>\n            <td>{{piperingBoss.isDoubleConnected}}</td>\n            <td class=\"columnWithIcons\">\n                <button type=\"button\" class=\"btn editBtn\" (click)=\"editPiperingBoss(piperingBoss)\">\n                    <i class=\"fa fa-edit\"></i>\n                </button>\n                <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(piperingBoss)\">\n                    <i class=\"fa fa-trash\"></i>\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"managmentComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"createNewPiperingBoss":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editPiperingBoss":[{"__symbolic":"method"}],"deletePiperingBoss":[{"__symbolic":"method"}]}},"ɵce":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"app-pipering-bosses-managment","template":"<div *ngIf=\"piperingBossData !== undefined && piperingBossData !== null\">\n    <div class=\"row\" style=\"padding-left: 12px;\">\n        <b>Pipe:</b> &nbsp;{{piperingBossData.name}}</div>\n    <button type=\"button\" class=\"btn btn-danger red-button\" (click)=\"returnHandler()\">Return</button>\n    <button type=\"submit\" class=\"btn btn-primary save-button\" [disabled]=\"ctrl.invalid\" (click)=\"save()\">Save</button>\n    <div class=\"row\">\n\n        <div class=\"col-6\" style=\"line-height: 30px; padding-top: 30px;\">\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Name:\n                </div>\n                <input type=\"text\" class=\"col-4\" [(ngModel)]=\"piperingBossData.name\" #ctrl=\"ngModel\" required>\n                <br>\n            </div>\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Claw:\n                </div>\n                <input type=\"number\" class=\"col-4\" [(ngModel)]=\"piperingBossData.claw\">\n            </div>\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Id double connected:\n                </div>\n                <input type=\"checkbox\" [(ngModel)]=\"piperingBossData.isDoubleConnected\">\n            </div>\n        </div>\n    </div>\n    <div class=\"col-4\">\n        <kendo-grid style=\"border: none\" [data]=\"piperingBossThreadedRodsGridData\" (add)=\"addHandlerForThreadedRodData($event)\" (save)=\"saveHandlerForThreadedRodData($event)\"\n            (cancel)=\"cancelHandlerForThreadedRodData($event)\" (edit)=\"editHandlerForThreadedRodData($event)\" (remove)=\"removeHandler($event)\">\n            <ng-template kendoGridToolbarTemplate>\n                <div class=\"display-flex\">\n                    <button kendoGridAddCommand [disabled]=\"!canAddRowToThreadedRodsGrid\" class=\"btn add-button light-steel-shadow\" style=\"position: absolute; right: 15px;\"\n                        type=\"button\" title=\"add\">\n                        <i class=\"fa fa-plus\" click></i> Add</button>\n                </div>\n            </ng-template>\n            <kendo-grid-column field=\"threadedRodName\" title=\"Threaded rod (section)\" width=\"120\">\n                <ng-template kendoGridEditTemplate let-dataItem=\"dataItem\">\n                    <!-- <input [(ngModel)]=\"dataItem.ProductName\" kendoGridFocusable name=\"ProductName\" class=\"k-textbox\" required/> -->\n                    <select #threadedRod style=\"width:70px;\" name=\"threadedRodSelect\" [(ngModel)]=\"dataItem.threadedRodId\" required>\n                        <option *ngFor=\"let threadedRod of threadedRodsData\" [(value)]=\"threadedRod.id\">{{threadedRod.name}}</option>\n                    </select>\n                </ng-template>\n            </kendo-grid-column>\n            <kendo-grid-column field=\"depth\" editor=\"editNumber\" title=\"Depth [mm]\" width=\"70\">\n            </kendo-grid-column>\n            <kendo-grid-column title=\"\" width=\"30\">\n                <ng-template kendoGridCellTemplate>\n                    <div class=\"display-flex\">\n                        <!--MAGIC DO NOT TOUCH DISABLE FUNCTION-->\n                        <button kendoGridEditCommand [disabled]=\"!canAddRowToThreadedRodsGrid\" class=\"attributesBtn\" title=\"Edit\">\n                            <i class=\"material-icons\">&#xE3C9;</i>\n                        </button>\n                        <button kendoGridRemoveCommand [disabled]=\"!canAddRowToThreadedRodsGrid\" class=\"attributesBtn btn-remove\" data-toggle=\"modal\" data-target=\"#confirmationModal\"\n                            title=\"Remove\">\n                            <i class=\"material-icons\">&#xE5CD;</i>\n                        </button>\n                        <button kendoGridSaveCommand class=\"attributesBtn\" title=\"Save\">\n                            <i class=\"material-icons\">&#xE876;</i>\n                        </button>\n                        <button kendoGridCancelCommand class=\"attributesBtn\" title=\"Cancel\">\n                            <i class=\"material-icons\">&#xE5C9;</i>\n                        </button>\n                    </div>\n                </ng-template>\n            </kendo-grid-column>\n        </kendo-grid>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"confirmationModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Pipe Size?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" (click)=\"removeSize()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>","styles":[".regularObjectBorder{border-width:1px;border-style:solid}.justTopBorder{border-bottom:0;border-left:0;border-right:0}.justRightBorder{border-bottom:0;border-left:0;border-top:0}.justBottomBorder{border-right:0;border-left:0;border-top:0}#tabContent{font-size:11px;border-color:#dddd}.modal-label{width:168px}hr{margin-top:0}#variantsGrid{margin-left:17px;border-color:#dddd}.delete-button{height:23px;width:23px;margin-left:3px;background-color:#d0021b;color:#fff;font-size:12px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;border-radius:2px;cursor:pointer}.configure-button{height:23px;margin-left:3px;background-color:#4a8bb7;color:#fff;font-size:12px;padding:3px 14px;font-weight:300;letter-spacing:1.1px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;margin-bottom:6px;border-radius:2px;cursor:pointer}.configure-button:disabled{background-color:#999;cursor:default}.step-file{font-size:14px;text-align:center;margin-bottom:10px;font-weight:700}#stpFileDiv{margin-left:auto;margin-right:auto}#variantsTabGrid{border:0;margin-top:26px;border-top:1px solid #ddd}.extra-padding-top{padding-top:10px}.mat-header-cell{font-weight:700}.variantBtn{background-color:#ddd;border:none;padding:6px 18px;outline:0;color:#534f53;cursor:pointer}.variants-header{margin:28px 0 5px;display:flex;justify-content:space-between}.table-label{font-size:16px}.tableCurrentVariant{font-size:14px;border-color:#708090}.borderGray{border-color:#a9a9a9}.borderGray:last-child{border-right:none}.mat-header-row{border-color:#dddd}.highlighted{background-color:#fff!important}.display-flex{display:flex;align-items:center;margin-bottom:10px}.save-button{margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":123,"character":77}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"showManagmentPage":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"returnHandler":[{"__symbolic":"method"}],"editHandlerForThreadedRodData":[{"__symbolic":"method"}],"cancelHandlerForThreadedRodData":[{"__symbolic":"method"}],"saveHandlerForThreadedRodData":[{"__symbolic":"method"}],"addHandlerForThreadedRodData":[{"__symbolic":"method"}],"removeHandler":[{"__symbolic":"method"}],"createFormGroupForThreadedRodData":[{"__symbolic":"method"}],"overwriteDataInGrid":[{"__symbolic":"method"}],"saveNewThreadedRod":[{"__symbolic":"method"}],"saveEditedThreadedRod":[{"__symbolic":"method"}],"removeSize":[{"__symbolic":"method"}],"deleteThreadedRod":[{"__symbolic":"method"}]}},"ɵcf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"app-releases-grid","template":"\n<!-- Create Modal -->\n<div class=\"modal\" id=\"addReleaseModal\">\n        <div class=\"modal-dialog\">\n            <div class=\"form\">\n                <form class=\"form-group\" [formGroup]=\"releaseForm\" (ngSubmit)=\"saveNewRelease()\">\n                    <div class=\"modal-content\">\n    \n                        <!-- Modal Header -->\n                        <div class=\"modal-header\">\n                            <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                        </div>\n    \n                        <!-- Modal body -->\n                        <div class=\"modal-body display-flex\">\n                            <div>\n                                <div>\n                                    <div class=\"display-flex\">\n                                        <span class=\"modal-label\">Name:</span>\n                                        <input type=\"text\" [(ngModel)]=\"editedRelease.name\"  formControlName=\"name\">\n                                    </div>\n                                    <span>Release</span>\n                                    <span style=\"padding-left: 4em\"> Spring constant</span>\n                                    <br>\n                                    <div class=\"display-flex\">\n                                        <input type=\"checkbox\" [(ngModel)]=\"editedRelease.isUxSet\"  formControlName=\"isUxSet\">\n                                        <span class=\"modal-label\">Ux</span>\n                                        <span>Cux : &ensp;</span>\n                                        <input class=\"insert-number\" type=\"number\" [disableControl]=\"!editedRelease.isUxSet\" min=\"0\" step=\"0.001\"  formControlName=\"valueUx\"\n                                            [(ngModel)]=\"editedRelease.valueUx\">\n                                        <span>&ensp; [kN/m]</span>\n                                    </div>\n                                    <div class=\"display-flex\">\n                                        <input type=\"checkbox\" [(ngModel)]=\"editedRelease.isUySet\"  formControlName=\"isUySet\">\n                                        <span class=\"modal-label\">Uy</span>\n                                        <span>Cuy : &ensp;</span>\n                                        <input class=\"insert-number\" type=\"number\" [disableControl]=\"!editedRelease.isUySet\" min=\"0\" step=\"0.001\"  formControlName=\"valueUy\"\n                                            [(ngModel)]=\"editedRelease.valueUy\">\n                                        <span>&ensp; [kN/m]</span>\n                                    </div>\n                                    <div class=\"display-flex\">\n                                        <input type=\"checkbox\" [(ngModel)]=\"editedRelease.isUzSet\"  formControlName=\"isUzSet\">\n                                        <span class=\"modal-label\">Uz</span>\n                                        <span>Cuz : &ensp;</span>\n                                        <input class=\"insert-number\" type=\"number\" [disableControl]=\"!editedRelease.isUzSet\" min=\"0\" step=\"0.001\"  formControlName=\"valueUz\"\n                                            [(ngModel)]=\"editedRelease.valueUz\">\n                                        <span>&ensp; [kN/m]</span>\n                                    </div>\n                                    <span>Release</span>\n                                    <div class=\"display-flex\">\n                                        <input type=\"checkbox\" [(ngModel)]=\"editedRelease.isPhixSet\"  formControlName=\"isPhixSet\">\n                                        <span class=\"modal-label\">&phi;x</span>\n                                        <span>C&phi;x : &ensp;</span>\n                                        <input class=\"insert-number\" type=\"number\" [disableControl]=\"!editedRelease.isPhixSet\" min=\"0\" step=\"0.001\"  formControlName=\"valuePhix\"\n                                            [(ngModel)]=\"editedRelease.valuePhix\">\n                                        <span>&ensp; [kNm/rad]</span>\n                                    </div>\n                                    <div class=\"display-flex\">\n                                        <input type=\"checkbox\" [(ngModel)]=\"editedRelease.isPhiySet\"  formControlName=\"isPhiySet\">\n                                        <span class=\"modal-label\">&phi;y</span>\n                                        <span>C&phi;y : &ensp;</span>\n                                        <input class=\"insert-number\" type=\"number\" [disableControl]=\"!editedRelease.isPhiySet\" min=\"0\" step=\"0.001\"  formControlName=\"valuePhiy\"\n                                            [(ngModel)]=\"editedRelease.valuePhiy\">\n                                        <span>&ensp; [kNm/rad]</span>\n                                    </div>\n                                    <div class=\"display-flex\">\n                                        <input type=\"checkbox\" [(ngModel)]=\"editedRelease.isPhizSet\"  formControlName=\"isPhizSet\">\n                                        <span class=\"modal-label\">&phi;z</span>\n                                        <span>C&phi;z : &ensp;</span>\n                                        <input class=\"insert-number\" type=\"number\" [disableControl]=\"!editedRelease.isPhizSet\" min=\"0\" step=\"0.001\"  formControlName=\"valuePhiz\"\n                                            [(ngModel)]=\"editedRelease.valuePhiz\">\n                                        <span>&ensp; [kNm/rad]</span>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n    \n                        <!-- Modal footer -->\n                        <div class=\"modal-footer\">\n                            <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                            <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"releaseForm.invalid\" (click)=\"saveNewRelease()\">Save</button>\n                        </div>\n                    </div>\n                </form>\n            </div>\n        </div>\n    </div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this release?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deleteRelease(editedRelease)\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"releaseForm\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedRelease.name\"  formControlName=\"name\">\n                                </div>\n                                <span>Release</span>\n                                <span style=\"padding-left: 4em\"> Spring constant</span>\n                                <br>\n                                <div class=\"display-flex\">\n                                    <input type=\"checkbox\" [(ngModel)]=\"editedRelease.isUxSet\"  formControlName=\"isUxSet\">\n                                    <span class=\"modal-label\">Ux</span>\n                                    <span>Cux : &ensp;</span>\n                                    <input class=\"insert-number\" type=\"number\" [disableControl]=\"!editedRelease.isUxSet\" min=\"0\" step=\"0.001\"  formControlName=\"valueUx\"\n                                        [(ngModel)]=\"editedRelease.valueUx\">\n                                    <span>&ensp; [kN/m]</span>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <input type=\"checkbox\" [(ngModel)]=\"editedRelease.isUySet\"  formControlName=\"isUySet\">\n                                    <span class=\"modal-label\">Uy</span>\n                                    <span>Cuy : &ensp;</span>\n                                    <input class=\"insert-number\" type=\"number\" [disableControl]=\"!editedRelease.isUySet\" min=\"0\" step=\"0.001\"  formControlName=\"valueUy\"\n                                        [(ngModel)]=\"editedRelease.valueUy\">\n                                    <span>&ensp; [kN/m]</span>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <input type=\"checkbox\" [(ngModel)]=\"editedRelease.isUzSet\"  formControlName=\"isUzSet\">\n                                    <span class=\"modal-label\">Uz</span>\n                                    <span>Cuz : &ensp;</span>\n                                    <input class=\"insert-number\" type=\"number\" [disableControl]=\"!editedRelease.isUzSet\" min=\"0\" step=\"0.001\"  formControlName=\"valueUz\"\n                                        [(ngModel)]=\"editedRelease.valueUz\">\n                                    <span>&ensp; [kN/m]</span>\n                                </div>\n                                <span>Release</span>\n                                <div class=\"display-flex\">\n                                    <input type=\"checkbox\" [(ngModel)]=\"editedRelease.isPhixSet\"  formControlName=\"isPhixSet\">\n                                    <span class=\"modal-label\">&phi;x</span>\n                                    <span>C&phi;x : &ensp;</span>\n                                    <input class=\"insert-number\" type=\"number\" [disableControl]=\"!editedRelease.isPhixSet\" min=\"0\" step=\"0.001\"  formControlName=\"valuePhix\"\n                                        [(ngModel)]=\"editedRelease.valuePhix\">\n                                    <span>&ensp; [kNm/rad]</span>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <input type=\"checkbox\" [(ngModel)]=\"editedRelease.isPhiySet\"  formControlName=\"isPhiySet\">\n                                    <span class=\"modal-label\">&phi;y</span>\n                                    <span>C&phi;y : &ensp;</span>\n                                    <input class=\"insert-number\" type=\"number\" [disableControl]=\"!editedRelease.isPhiySet\" min=\"0\" step=\"0.001\"  formControlName=\"valuePhiy\"\n                                        [(ngModel)]=\"editedRelease.valuePhiy\">\n                                    <span>&ensp; [kNm/rad]</span>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <input type=\"checkbox\" [(ngModel)]=\"editedRelease.isPhizSet\"  formControlName=\"isPhizSet\">\n                                    <span class=\"modal-label\">&phi;z</span>\n                                    <span>C&phi;z : &ensp;</span>\n                                    <input class=\"insert-number\" type=\"number\" [disableControl]=\"!editedRelease.isPhizSet\" min=\"0\" step=\"0.001\"  formControlName=\"valuePhiz\"\n                                        [(ngModel)]=\"editedRelease.valuePhiz\">\n                                    <span>&ensp; [kNm/rad]</span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"releaseForm.invalid\" (click)=\"editRelease()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n\n<div class=\"input-effect\">\n    <input class=\"effect1\" type=\"text\" placeholder=\"\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addReleaseModal\" (click)=\"prepareCreate()\">Create</button>\n\n<table>\n    <tr>\n        <th *ngFor=\"let header of headers\">{{header}}</th>\n    </tr>\n    <tr *ngFor=\"let release of releasesGridData, let row_no = index\">\n        <td>{{release.name}}</td>\n        <td class=\"columnWithIcons\">\n            <button type=\"button\" class=\"btn editBtn\" data-toggle=\"modal\" data-target=\"#editModal\" (click)=\"setChoosenElement(release, row_no)\">\n                <i class=\"fa fa-edit\"></i>\n            </button>\n            <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(release, row_no)\">\n                <i class=\"fa fa-trash\"></i>\n            </button>\n        </td>\n    </tr>\n</table>","styles":["ng-katex{font-size:1.5em}table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px;margin-right:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}.insert-number{width:120px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"prepareCreate":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"checkRealease":[{"__symbolic":"method"}],"saveNewRelease":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editRelease":[{"__symbolic":"method"}],"deleteRelease":[{"__symbolic":"method"}]}},"ɵcg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"stp-configure","template":"<!-- <div class=\"row\">\n    <div class=\"regularObjectBorder justRightBorder\">\n        <button (click)=\"setCurrentTab('GRAPHIC')\">Graphic file</button>\n    </div>\n    <div class=\"regularObjectBorder justRightBorder\">\n        <hc-button (click)=\"setCurrentTab('POSITION')\">Orientation/Positioning</hc-button>\n    </div>\n    <div class=\"regularObjectBorder justRightBorder\">\n        <hc-button (click)=\"showArmsConfiguration(); setCurrentTab('ARMS');\">Arms confiugration</hc-button>\n    </div>\n    <div class=\"regularObjectBorder justRightBorder\">\n        <hc-button (click)=\"setCurrentTab('PROFILE')\">Profile confiugration</hc-button>\n    </div>\n    <div class=\"regularObjectBorder justRightBorder\">\n        <hc-button (click)=\"setCurrentTab('BUTTONS')\">Buttons confiugration</hc-button>\n    </div>\n    <div class=\"regularObjectBorder justRightBorder\">\n        <hc-button (click)=\"setCurrentTab('PARTLIST')\">Part list</hc-button>\n    </div>\n    <i class=\"material-icons btn-close\" (click)=\"closeViewer()\">close</i>\n</div> -->\n\n<ul class=\"steps\" *ngIf=\"args.itemType === 'CONNECTOR' || args.itemType === 'BASE' || args.itemType === 'PIPE_FASTENING'\">\n    <!-- <li class=\"step\">\n        <button class=\"btnStep\" (click)=\"setCurrentTab('GRAPHIC')\">Graphic file</button>\n    </li> -->\n    <li class=\"step\">\n        <button class=\"btnStep\" [class.currentTab]=\"'POSITION' === currentTab\" (click)=\"setCurrentTab('POSITION')\">Orientation/Positioning</button>\n    </li>\n    <li class=\"step\">\n        <button class=\"btnStep\" [class.currentTab]=\"'ARMS' === currentTab\" (click)=\"armsConfigure.showArmsConfiguration(); setCurrentTab('ARMS');\">Arms configuration</button>\n    </li>\n    <li *ngIf=\"args.variantId !== null\" class=\"step\">\n        <button class=\"btnStep\" [class.currentTab]=\"'PROFILE' === currentTab\" (click)=\"profilesConfigure.showProfilesConfiguration(); setCurrentTab('PROFILE')\">Profile configuration</button>\n    </li>\n    <li *ngIf=\"args.variantId !== null\" class=\"step\">\n        <button class=\"btnStep\" [class.currentTab]=\"'BUTTONS' === currentTab\" (click)=\"setCurrentTab('BUTTONS')\">Buttons configuration</button>\n    </li>\n    <li class=\"step\">\n        <button class=\"btnStep\" [class.currentTab]=\"'PARTLIST' === currentTab\" (click)=\"setCurrentTab('PARTLIST')\">Part list</button>\n    </li>\n</ul>\n<ul class=\"steps\" style=\"justify-content: space-around !important;\" *ngIf=\"args.itemType === 'PIPE_RING' && args.variantId !== null\">\n    <li class=\"step\">\n        <button class=\"btnStep clickable\" [class.currentTab]=\"'PIPE_CONFIGURE' === currentTab\" (click)=\"setCurrentTab('PIPE_CONFIGURE')\">Configuration</button>\n    </li>\n    <li class=\"step\">\n        <button class=\"btnStep clickable\" [class.currentTab]=\"'ROD_CONFIGURE' === currentTab\" (click)=\"setCurrentTab('ROD_CONFIGURE')\">Display configuration</button>\n    </li>\n</ul>\n<i class=\"material-icons btn-close\" (click)=\"closeViewer()\">close</i>\n<div id=\"canvasesContainer\" [style.height]=\"calculateHeight()\">\n    <part-list *ngIf=\"'PARTLIST' === currentTab\" [ExtensionInterface]=\"ExtensionInterface\" [args]=\"args\"></part-list>\n            <pipering-configure *ngIf=\"'PIPE_CONFIGURE' === currentTab\" [Args]=\"args\"></pipering-configure>\n    <div class=\"display-flex\" [style.height]=\"calculateHeight()\">\n        <div class=\"col-7\">\n            <iframe [hidden]=\"'PARTLIST' === currentTab || 'PIPE_CONFIGURE' === currentTab\" scrolling=\"no\" id=\"viewerIframe\" style=\"width: 100%; height: 100%; border:none\"></iframe>\n        </div>\n        <div class=\"col-5\">\n            <arms-configure #armsConfigure [hidden]=\"currentTab !== 'ARMS'\" [ExtensionInterface]=\"ExtensionInterface\"></arms-configure>\n            <profiles-configure *ngIf=\"args.variantId !== null\" #profilesConfigure [hidden]=\"currentTab !== 'PROFILE'\" [ExtensionInterface]=\"ExtensionInterface\"></profiles-configure>\n            <orientation-positioning [hidden]=\"currentTab !== 'POSITION'\" [ExtensionInterface]=\"ExtensionInterface\"></orientation-positioning>\n            <!-- <threaded-configure *ngIf=\"'ROD_CONFIGURE' === currentTab\" #rodConfigure [Args]=\"args\"></threaded-configure> -->\n        </div>\n    </div>\n</div>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:1px}tr:nth-child(even){background-color:#ddd}.icon-button{cursor:pointer;font-size:30px;vertical-align:middle}.icon-button .close-icon{cursor:pointer;position:absolute;right:10px}.steps{display:flex;list-style:none;align-items:center;margin:0;height:60px;padding:0;justify-content:space-between}.btnStep{color:#000;font-weight:700;font-size:14px;letter-spacing:.5px;background-color:transparent;border:0;outline:0}.btnStep:disabled{opacity:.6!important;cursor:default}.step::before{background-color:#ccc9cc;margin-left:16px;min-width:70%;height:2px}.step:nth-child(1) .btnStep::before{content:\"1\"}.step:nth-child(2) .btnStep::before{content:\"2\"}.step:nth-child(3) .btnStep::before{content:\"3\"}.step:nth-child(4) .btnStep::before{content:\"4\"}.step:nth-child(5) .btnStep::before{content:\"5\"}.step:nth-child(6) .btnStep::before{content:\"6\"}.btnStep::before{display:inline-block;width:40px;min-width:40px;height:40px;border:0;border-radius:50%;right:0;background-color:#000;margin-right:12px;text-align:center;color:#fff;line-height:40px;font-size:13px}.arms-table{bottom:41px;right:18px;height:100%;background-color:#fff}.arms-table td,.arms-table th{text-align:center}.red-button{font-family:inherit;padding:7px 14px}.currentTab::before{background-color:#d0021b!important}.display-flex{display:flex;margin-bottom:10px}"]}]}],"members":{"armsConfigure":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":82,"character":5},"arguments":["armsConfigure"]}]}],"profilesConfigure":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":84,"character":5},"arguments":["profilesConfigure"]}]}],"rodConfigure":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":85,"character":5},"arguments":["rodConfigure"]}]}],"args":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"onShowViewer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":87,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":95,"character":27},{"__symbolic":"reference","name":"ɵo"}]}],"ngOnInit":[{"__symbolic":"method"}],"initView":[{"__symbolic":"method"}],"calculateHeight":[{"__symbolic":"method"}],"closeViewer":[{"__symbolic":"method"}],"setCurrentTab":[{"__symbolic":"method"}],"fixView":[{"__symbolic":"method"}]}},"ɵch":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"arms-configure","template":"<table [ngClass]=\"{'arms-table-normal': isVariantChoosen, 'arms-table-narrow': !isVariantChoosen}\">\n    <colgroup>\n        <col span=\"1\" style=\"width: 10%;\">\n        <col span=\"1\" style=\"width: 20%;\">\n        <col span=\"1\" style=\"width: 10%;\">\n        <col span=\"1\" style=\"width: 40%;\">\n        <col span=\"1\" style=\"width: 10%;\">\n    </colgroup>\n    <thead>\n        <tr>\n            <th>Arms</th>\n            <th></th>\n            <th [hidden]=\"(extensionInterface!==null)?(!extensionInterface.isVariantChoosen):true\"></th>\n            <th [hidden]=\"(extensionInterface!==null)?(!extensionInterface.isVariantChoosen):true\"></th>\n            <th>\n                <button class=\"buttonTransparent\" [disabled]=\"(extensionInterface!==null)?extensionInterface.isVariantChoosen:false\">\n                    <i class=\"material-icons icon-button\" (click)=\"addEmptyArm()\">\n                        add_circle\n                    </i>\n                </button>\n            </th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr *ngFor=\"let arm of armData; let i = index\" style=\"cursor:pointer\">\n            <td>{{arm.name}}</td>\n            <td>\n                <ng-select [items]=\"dirOptions\" [active]=\"arm.dirObj\" (selected)=\"armDirectionChanged(arm, $event)\" [disabled]=\"(extensionInterface!==null)?extensionInterface.isVariantChoosen:false\"></ng-select>\n            </td>\n            <td  [hidden]=\"(extensionInterface!==null)?(!extensionInterface.isVariantChoosen):true\">\n                <div class=\"btn-group btn-group-toggle\">\n                    <label class=\"red-button\">\n                        <div class=\"display-flex\">\n                             <span style=\"padding-right: 5px;\">Border</span><input type=\"checkbox\" [(ngModel)]=\"profileData.armData[i].borderBeam\" (change)=\"isBorderValueChanged(i)\" >\n                        </div>\n                        \n                    </label>\n                </div>\n            </td>\n            <td [hidden]=\"(extensionInterface!==null)?(!extensionInterface.isVariantChoosen):true\">\n                <app-release-select [ReleaseArray]=\"releaseCodeOptions\" [active]=\"profileData.armData[i].releaseId\" (selected)=\"releaseCodeChanged(i, $event)\" ></app-release-select>\n            </td>\n            <td>\n                <button class=\"buttonTransparent\" [disabled]=\"(extensionInterface!==null)?extensionInterface.isVariantChoosen:false\">\n                    <i class=\"material-icons icon-button\" (click)=\"removeArm(arm)\">\n                        remove_circle\n                    </i>\n                </button>\n            </td>\n        </tr>\n    </tbody>\n</table>","styles":[".buttonTransparent{padding:0;background-color:transparent;border:none}.buttonTransparent:disabled{opacity:.2}.arms-table-normal{bottom:41px;right:18px;background-color:#fff}.arms-table-narrow{bottom:41px;right:18px;width:36%;background-color:#fff}.display-flex{display:flex;align-items:center;margin-bottom:3px!important;margin-top:3px!important}","table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:1px}tr:nth-child(even){background-color:#ddd}.icon-button{cursor:pointer;font-size:30px;vertical-align:middle}.icon-button .close-icon{cursor:pointer;position:absolute;right:10px}.steps{display:flex;list-style:none;align-items:center;margin:0;height:60px;padding:0;justify-content:space-between}.btnStep{color:#000;font-weight:700;font-size:14px;letter-spacing:.5px;background-color:transparent;border:0;outline:0}.btnStep:disabled{opacity:.6!important;cursor:default}.step::before{background-color:#ccc9cc;margin-left:16px;min-width:70%;height:2px}.step:nth-child(1) .btnStep::before{content:\"1\"}.step:nth-child(2) .btnStep::before{content:\"2\"}.step:nth-child(3) .btnStep::before{content:\"3\"}.step:nth-child(4) .btnStep::before{content:\"4\"}.step:nth-child(5) .btnStep::before{content:\"5\"}.step:nth-child(6) .btnStep::before{content:\"6\"}.btnStep::before{display:inline-block;width:40px;min-width:40px;height:40px;border:0;border-radius:50%;right:0;background-color:#000;margin-right:12px;text-align:center;color:#fff;line-height:40px;font-size:13px}.arms-table{bottom:41px;right:18px;height:100%;background-color:#fff}.arms-table td,.arms-table th{text-align:center}.red-button{font-family:inherit;padding:7px 14px}.currentTab::before{background-color:#d0021b!important}.display-flex{display:flex;margin-bottom:10px}"]}]}],"members":{"extensionInterface":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"ExtensionInterface":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵbr"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":83,"character":122}]}],"ngOnInit":[{"__symbolic":"method"}],"loadVariantData":[{"__symbolic":"method"}],"showArmsConfiguration":[{"__symbolic":"method"}],"armDirectionChanged":[{"__symbolic":"method"}],"removeArm":[{"__symbolic":"method"}],"addEmptyArm":[{"__symbolic":"method"}],"saveConfiguration":[{"__symbolic":"method"}],"saveVariantConfiguration":[{"__symbolic":"method"}],"releaseCodeChanged":[{"__symbolic":"method"}],"isBorderValueChanged":[{"__symbolic":"method"}],"checkForSiblings":[{"__symbolic":"method"}]}},"ɵci":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"profiles-configure","template":"<div class=\"arms-table\">\n    <span>Groups:</span>\n    <div class=\"display-flex\">\n        <select name=\"groupSelect\" style=\"width: 80%;\" [(ngModel)]=\"currentChoosenArmGroup\" (change)=\"onGroupChange()\">\n            <option *ngFor=\"let armGroup of profileData.armGroups\" [ngValue]=\"armGroup._id\" selected=\"armGroup._id===currentChoosenGroup\">{{armGroup.armGroupName}}</option>\n        </select>\n        <div style=\"padding-left: 20px;\">\n            <i class=\"material-icons icon-button\" data-toggle=\"modal\" data-target=\"#addModal\">\n                add_circle\n            </i>\n            <i class=\"material-icons icon-button\" data-toggle=\"modal\" data-target=\"#confirmationModal\">\n                remove_circle\n            </i>\n        </div>\n    </div>\n    <div style=\"overflow-y: auto; height: calc(100% - 65px);\">\n        <table>\n            <colgroup>\n                <col span=\"1\" style=\"width: 100%;\">\n            </colgroup>\n            <thead>\n                <tr>\n                    <th>Channels</th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr *ngFor=\"let arm of profileData.armGroups[currentChoosenArmGroup - 1].arms\">\n                    <td>\n                        <div class=\"armHeaderLabel\">\n                            {{ arm.name }}\n                            <i class=\"material-icons icon-button add-profile-btn\" (click)=\"addCrossSection(arm)\">\n                                add_circle\n                            </i>\n                        </div>\n                        <table>\n                            <colgroup>\n                                <col span=\"1\" style=\"width: 10%;\">\n                                <col span=\"1\" style=\"width: 30%;\">\n                                <col span=\"1\" style=\"width: 51%;\">\n                                <col span=\"1\" style=\"width: 20%;\">\n                            </colgroup>\n                            <thead>\n                                <tr>\n                                    <th></th>\n                                    <th>Profile name</th>\n                                    <th>Rotation</th>\n                                    <th>Action</th>\n                                </tr>\n                            </thead>\n                            <tbody>\n                                <tr *ngFor=\"let crossSection of arm.crossSections\">\n                                    <td>\n                                        <i class=\"material-icons icon-button clickable\" [hidden]=\"crossSection.isShown\" (click)=\"showCrossSection(arm, crossSection)\">\n                                            visibility_off\n                                        </i>\n                                        <i class=\"material-icons icon-button clickable\" [hidden]=\"!crossSection.isShown\">\n                                            visibility\n                                        </i>\n                                    </td>\n                                    <td>\n                                        <ng-select [items]=\"crossSectionOptions\" [active]=\"crossSection.activeCrossSection\" (selected)=\"crossSectionChanged(arm, crossSection, $event)\"></ng-select>\n                                    </td>\n                                    <td>\n                                        <div class=\"btn-group btn-group-toggle\">\n                                            <label class=\"red-button\" ngbButtonLabel>\n                                                <input type=\"checkbox\" ngbButton [(ngModel)]=\"crossSection.allow0rotation\" [disabled]=\"crossSection.allow0rotation\" (change)=\"rotationChanged(arm, crossSection, 0)\"> 0\n                                            </label>\n                                            <label class=\"red-button\" ngbButtonLabel>\n                                                <input type=\"checkbox\" ngbButton [(ngModel)]=\"crossSection.allow90rotation\" [disabled]=\"crossSection.allow90rotation\" (change)=\"rotationChanged(arm, crossSection, 90)\"> 90\n                                            </label>\n                                            <label class=\"red-button\" ngbButtonLabel>\n                                                <input type=\"checkbox\" ngbButton [(ngModel)]=\"crossSection.allow180rotation\" [disabled]=\"crossSection.allow180rotation\" (change)=\"rotationChanged(arm, crossSection, 180)\"> 180\n                                            </label>\n                                            <label class=\"red-button\" ngbButtonLabel>\n                                                <input type=\"checkbox\" ngbButton [(ngModel)]=\"crossSection.allow270rotation\" [disabled]=\"crossSection.allow270rotation\" (change)=\"rotationChanged(arm, crossSection, 270)\"> 270\n                                            </label>\n                                        </div>\n                                    </td>\n                                    <td>\n                                        <i class=\"material-icons icon-button\" (click)=\"removeCrossSection(arm, crossSection)\">\n                                            remove_circle\n                                        </i>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n</div>\n\n<!-- Confiramtion Modal -->\n<div class=\"modal\" id=\"confirmationModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div>\n                    Do you want to remove current group?\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"button\" class=\"btn btn-danger save-button\" data-dismiss=\"modal\" (click)=\"removeCurrentArmGroup()\">Remove</button>\n            </div>\n\n        </div>\n    </div>\n</div>\n\n<!-- Add Modal -->\n<div class=\"modal\" id=\"addModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Group name: &nbsp;</span>\n                    <input type=\"text\" #newGroupName>\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"button\" class=\"btn btn-danger save-button\" data-dismiss=\"modal\" (click)=\"addNewArmGroup(newGroupName.value)\">Save</button>\n            </div>\n\n        </div>\n    </div>\n</div>","styles":[".armHeaderLabel{text-align:left;margin-left:6px;font-size:16px!important;height:32px;display:flex;align-items:center;position:relative}.add-profile-btn{position:absolute;right:10px}.clickable{cursor:pointer}.buttonTransparent{padding:0;background-color:transparent;border:none}.buttonTransparent:disabled{opacity:.2}.inner-table{display:block;overflow-y:auto;overflow-x:hidden}","table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:1px}tr:nth-child(even){background-color:#ddd}.icon-button{cursor:pointer;font-size:30px;vertical-align:middle}.icon-button .close-icon{cursor:pointer;position:absolute;right:10px}.steps{display:flex;list-style:none;align-items:center;margin:0;height:60px;padding:0;justify-content:space-between}.btnStep{color:#000;font-weight:700;font-size:14px;letter-spacing:.5px;background-color:transparent;border:0;outline:0}.btnStep:disabled{opacity:.6!important;cursor:default}.step::before{background-color:#ccc9cc;margin-left:16px;min-width:70%;height:2px}.step:nth-child(1) .btnStep::before{content:\"1\"}.step:nth-child(2) .btnStep::before{content:\"2\"}.step:nth-child(3) .btnStep::before{content:\"3\"}.step:nth-child(4) .btnStep::before{content:\"4\"}.step:nth-child(5) .btnStep::before{content:\"5\"}.step:nth-child(6) .btnStep::before{content:\"6\"}.btnStep::before{display:inline-block;width:40px;min-width:40px;height:40px;border:0;border-radius:50%;right:0;background-color:#000;margin-right:12px;text-align:center;color:#fff;line-height:40px;font-size:13px}.arms-table{bottom:41px;right:18px;height:100%;background-color:#fff}.arms-table td,.arms-table th{text-align:center}.red-button{font-family:inherit;padding:7px 14px}.currentTab::before{background-color:#d0021b!important}.display-flex{display:flex;margin-bottom:10px}"]}]}],"members":{"ExtensionInterface":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":166,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵbr"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":179,"character":22}]}],"ngOnInit":[{"__symbolic":"method"}],"saveConfiguration":[{"__symbolic":"method"}],"showProfilesConfiguration":[{"__symbolic":"method"}],"addCrossSection":[{"__symbolic":"method"}],"removeCrossSection":[{"__symbolic":"method"}],"crossSectionChanged":[{"__symbolic":"method"}],"showCrossSection":[{"__symbolic":"method"}],"rotationChanged":[{"__symbolic":"method"}],"hideCrossSections":[{"__symbolic":"method"}],"addNewArmGroup":[{"__symbolic":"method"}],"removeCurrentArmGroup":[{"__symbolic":"method"}],"onGroupChange":[{"__symbolic":"method"}]}},"ɵcj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"pipering-configure","template":"<div class=\"componnent-wrapper\">\n    <div class=\"col-7\">\n        <div style=\"margin-left: 10%\">\n        <img src=\"assets/images/pipeRing.png\" width=\"60%\" height=\"55%\">\n        <br>\n        <img *ngIf=\"!configDisplay.isStandard\" src=\"assets/images/insulation-legend.png\" width=\"65%\" height=\"45%\">\n    </div>\n    </div>\n    <div class=\"col-5\">\n        <div class=\"header-text\">\n            <span class=\"title-text\">Pipe ring type:</span>\n            <span *ngIf=\"configDisplay.isStandard\"> Standard</span>\n            <span *ngIf=\"!configDisplay.isStandard\"> Cold pipe ring</span>\n        </div>\n        <div style=\"height: 60%;\">\n            <div class=\"btnStep display-flex\">\n                <span class=\"w-277\"></span>\n                <span class=\"input\">min</span>\n                <span class=\"input\">max</span>\n            </div>\n            <ul class=\"list\">\n                <li class=\"step\">\n                    <div class=\"btnStep display-flex\">\n                        <span class=\"w-200\">Clamping range</span>\n                        <input class=\"input\" type=\"number\" min=\"0\" [(ngModel)]=\"configDisplay.clampingRangeMin\"\n                            (keypress)=\"preventKeys($event)\" (keyup)=\"saveVariantChanges()\">\n                        <input class=\"input\" type=\"number\" min=\"0\" [(ngModel)]=\"configDisplay.clampingRangeMax\"\n                            (keypress)=\"preventKeys($event)\" (keyup)=\"saveVariantChanges()\">\n                        <span>[mm]</span>\n                    </div>\n                </li>\n                <li class=\"step\" [hidden]=\"configDisplay.isDouble\">\n                    <div class=\"btnStep display-flex\">\n                        <span class=\"w-200\">Center to Boss</span>\n                        <input class=\"input\" type=\"number\" min=\"0\" [(ngModel)]=\"configDisplay.centerToBoss\" (keypress)=\"preventKeys($event)\"\n                            (keyup)=\"saveVariantChanges()\">\n                        <span>[mm]</span>\n                    </div>\n                </li>\n                <li class=\"step\">\n                    <div class=\"btnStep display-flex\">\n                        <span class=\"w-200\">Width</span>\n                        <input class=\"input\" type=\"number\" [(ngModel)]=\"configDisplay.width\" (keypress)=\"preventKeys($event)\"\n                            (keyup)=\"saveVariantChanges()\">\n                        <span>[mm]</span>\n                    </div>\n                </li>\n                <li class=\"step\" [hidden]=\"!configDisplay.isDouble\">\n                    <div class=\"btnStep display-flex\">\n                        <span class=\"w-200\">Screw spacing</span>\n                        <input class=\"input\" type=\"number\" [(ngModel)]=\"configDisplay.screwSpacing\" (keypress)=\"preventKeys($event)\"\n                            (keyup)=\"saveVariantChanges()\">\n                        <span>[mm]</span>\n                    </div>\n                </li>\n                <li class=\"step\">\n                    <div class=\"btnStep display-flex\">\n                        <span class=\"w-200\">Depth</span>\n                        <input class=\"input\" type=\"number\" [(ngModel)]=\"configDisplay.depth\" (keypress)=\"preventKeys($event)\"\n                            (keyup)=\"saveVariantChanges()\">\n                        <span>[mm]</span>\n                    </div>\n                </li>\n                <li class=\"step\">\n                    <div class=\"btnStep display-flex\">\n                        <span class=\"w-200\">Min. Spacing Between</span>\n                        <input class=\"input\" type=\"number\" [(ngModel)]=\"configDisplay.spacingBetween\" (keypress)=\"preventKeys($event)\"\n                            (keyup)=\"saveVariantChanges()\">\n                        <span>[mm]</span>\n                    </div>\n                </li>\n                <li class=\"step\">\n                    <div class=\"btnStep display-flex\">\n                        <span class=\"w-200\">Min. Spacing Above</span>\n                        <input class=\"input\" type=\"number\" [(ngModel)]=\"configDisplay.spacingAbove\" (keypress)=\"preventKeys($event)\"\n                            (keyup)=\"saveVariantChanges()\">\n                        <span>[mm]</span>\n                    </div>\n                </li>\n                <li class=\"step\">\n                    <div class=\"btnStep display-flex\" [hidden]=\"configDisplay.isDouble\">\n                        <span class=\"w-200\">Min. Adjustmen Length</span>\n                        <input class=\"input\" type=\"number\" [(ngModel)]=\"configDisplay.adjustmentLength\" (keypress)=\"preventKeys($event)\"\n                            (keyup)=\"saveVariantChanges()\">\n                        <span>[mm]</span>\n                    </div>\n                </li>\n                <li class=\"step\">\n                    <div class=\"btnStep display-flex\" [hidden]=\"configDisplay.isDouble\">\n                        <span class=\"w-200\">Boss reference</span>\n                        <select [(ngModel)]=\"configDisplay.bossReference\" (ngModelChange)=\"saveVariantChanges()\">\n                            <option *ngFor=\"let piperingBoss of piperingBossData\" [ngValue]=piperingBoss.id>{{piperingBoss.name}}</option>\n                        </select>\n                    </div>\n                </li>\n                <li class=\"step\" [hidden]=\"configDisplay.isStandard\">\n                    <div class=\"btnStep display-flex\">\n                        <span class=\"w-200\">Insulation Thickness</span>\n                        <input class=\"input\" type=\"number\" [(ngModel)]=\"configDisplay.insulationThickness\" (keypress)=\"preventKeys($event)\"\n                            (keyup)=\"saveVariantChanges()\">\n                        <span>[mm]</span>\n                    </div>\n                </li>\n                <li class=\"step\" [hidden]=\"configDisplay.isStandard\">\n                    <div class=\"btnStep display-flex\">\n                        <span class=\"w-200\">External Diameter</span>\n                        <input class=\"input\" type=\"number\" [(ngModel)]=\"configDisplay.externalDiameter\" (keypress)=\"preventKeys($event)\"\n                            (keyup)=\"saveVariantChanges()\">\n                        <span>[mm]</span>\n                    </div>\n                </li>\n            </ul>\n        </div>\n        <span [hidden]=\"!configDisplay.isStandard\">Connection direction:</span>\n        <div class=\"display-flex\" [hidden]=\"!configDisplay.isStandard\">\n            <div class=\"margins\">\n                <img src=\"assets/images/ceiling-mount.png\" alt=\"\" width=\"50%\" height=\"50%\">\n                <br>\n                <input type=\"checkbox\" [(ngModel)]=\"configDisplay.isCeiling\" (change)=\"saveVariantChanges()\">\n            </div>\n            <div class=\"margins\">\n                <img src=\"assets/images/ceiling-mount.png\" alt=\"\" class=\"rotate90\" width=\"50%\" height=\"50%\">\n                <br>\n                <input type=\"checkbox\" [(ngModel)]=\"configDisplay.isWall\" (change)=\"saveVariantChanges()\">\n            </div>\n            <div class=\"margins\">\n                <img src=\"assets/images/ceiling-mount.png\" alt=\"\" class=\"rotate180\" width=\"50%\" height=\"50%\">\n                <br>\n                <input type=\"checkbox\" [(ngModel)]=\"configDisplay.isFloor\" (change)=\"saveVariantChanges()\">\n            </div>\n        </div>\n        <span>Mode:</span>\n        <div class=\"display-flex e-margins\">\n            <div class=\"margins\">\n                <img src=\"assets/images/singleMount.png\" alt=\"\" width=\"50%\" height=\"50%\">\n                <br>\n                <input type=\"radio\" [(ngModel)]=\"configDisplay.isDouble\" [value]=\"false\" (change)=\"mountingChange()\">\n            </div>\n            <div class=\"margins\">\n                <img src=\"assets/images/doubleMount.png\" alt=\"\" width=\"50%\" height=\"50%\">\n                <br>\n                <input type=\"radio\" [(ngModel)]=\"configDisplay.isDouble\" [value]=\"true\" (change)=\"mountingChange()\">\n            </div>\n        </div>\n    </div>\n</div>","styles":[".buttonTransparent{padding:0;background-color:transparent;border:none}.buttonTransparent:disabled{opacity:.2}.arms-table-normal{bottom:41px;right:18px;background-color:#fff}.arms-table-narrow{bottom:41px;right:18px;width:36%;background-color:#fff}.display-flex{display:flex;align-items:center;margin-bottom:3px!important;margin-top:3px!important}.list{display:block;list-style:none;align-items:center;margin:0;height:60px;padding:0;justify-content:space-between}.btnStep{color:#000;font-weight:700;font-size:14px;letter-spacing:.5px;background-color:transparent;border:0;outline:0}.step::before{background-color:#ccc9cc;margin-left:16px;min-width:70%;height:2px}.step:nth-child(1) .btnStep::before{content:\"1\"}.step:nth-child(2) .btnStep::before{content:\"2\"}.step:nth-child(3) .btnStep::before{content:\"3\"}.step:nth-child(4) .btnStep::before{content:\"4\"}.step:nth-child(5) .btnStep::before{content:\"5\"}.step:nth-child(6) .btnStep::before{content:\"6\"}.step:nth-child(7) .btnStep::before{content:\"7\"}.step:nth-child(8) .btnStep::before{content:\"8\"}.step:nth-child(9) .btnStep::before{content:\"9\"}.step:nth-child(10) .btnStep::before{content:\"10\"}.step:nth-child(11) .btnStep::before{content:\"11\"}.btnStep::before{display:inline-block;width:40px;min-width:40px;height:40px;border:0;border-radius:50%;right:0;background-color:#000;margin-right:12px;text-align:center;color:#fff;line-height:40px;font-size:13px}.rotate90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.margins{margin-left:30px;text-align:center}.w-200{width:200px}.input{width:80px;margin-right:20px}.w-277{width:277px}.e-margins{margin-left:21px;margin-top:36px!important}.componnent-wrapper{height:100%;display:flex;margin-bottom:3px!important;margin-top:3px!important}.header-text{font-size:20px}.title-text{font-weight:700}","table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:1px}tr:nth-child(even){background-color:#ddd}.icon-button{cursor:pointer;font-size:30px;vertical-align:middle}.icon-button .close-icon{cursor:pointer;position:absolute;right:10px}.steps{display:flex;list-style:none;align-items:center;margin:0;height:60px;padding:0;justify-content:space-between}.btnStep{color:#000;font-weight:700;font-size:14px;letter-spacing:.5px;background-color:transparent;border:0;outline:0}.btnStep:disabled{opacity:.6!important;cursor:default}.step::before{background-color:#ccc9cc;margin-left:16px;min-width:70%;height:2px}.step:nth-child(1) .btnStep::before{content:\"1\"}.step:nth-child(2) .btnStep::before{content:\"2\"}.step:nth-child(3) .btnStep::before{content:\"3\"}.step:nth-child(4) .btnStep::before{content:\"4\"}.step:nth-child(5) .btnStep::before{content:\"5\"}.step:nth-child(6) .btnStep::before{content:\"6\"}.btnStep::before{display:inline-block;width:40px;min-width:40px;height:40px;border:0;border-radius:50%;right:0;background-color:#000;margin-right:12px;text-align:center;color:#fff;line-height:40px;font-size:13px}.arms-table{bottom:41px;right:18px;height:100%;background-color:#fff}.arms-table td,.arms-table th{text-align:center}.red-button{font-family:inherit;padding:7px 14px}.currentTab::before{background-color:#d0021b!important}.display-flex{display:flex;margin-bottom:10px}"]}]}],"members":{"args":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":161,"character":5}}]}],"Args":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":169,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵbr"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":176,"character":122}]}],"ngOnInit":[{"__symbolic":"method"}],"loadVariantData":[{"__symbolic":"method"}],"createNewConfig":[{"__symbolic":"method"}],"preventKeys":[{"__symbolic":"method"}],"saveVariantChanges":[{"__symbolic":"method"}],"changeDisplayedUnits":[{"__symbolic":"method"}],"changeElementUnitsToSI":[{"__symbolic":"method"}],"mountingChange":[{"__symbolic":"method"}]}},"ɵck":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"threaded-configure","template":"<div class=\"arms-table\">\n    <span>Threaded rods:</span>\n    <div class=\"display-flex\">\n        <select name=\"groupSelect\" style=\"width: 80%;\" [(ngModel)]=\"currentChoosenThreadeRod\" (change)=\"onGroupChange($event)\">\n            <option *ngFor=\"let threadedRod of piperingVariantConfig.threadedRods\" [ngValue]=\"threadedRod.id\" selected=\"threadedRod.id===currentChoosenThreadeRod\">{{threadedRod.channelName}}</option>\n        </select>\n        <div style=\"padding-left: 20px;\">\n            <i class=\"material-icons icon-button\" data-toggle=\"modal\" data-target=\".addModal\" (click)=\"selectedOption = channelOptions[0]\">\n                add_circle\n            </i>\n            <i class=\"material-icons icon-button\" data-toggle=\"modal\" data-target=\".confirmationModal\">\n                remove_circle\n            </i>\n        </div>\n    </div>\n    <div class=\"h-auto-scroll\" *ngIf=\"piperingVariantConfig.threadedRods[0]!==undefined\">\n        <div class=\"h-100\" >\n            <table>\n                <colgroup>\n                    <col span=\"1\" style=\"width: 100%;\">\n                </colgroup>\n                <thead>\n                    <tr>\n                        <th>Connectors</th>\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr>\n                        <td>\n                            <div class=\"armHeaderLabel\">\n                                <i class=\"material-icons icon-button add-profile-btn\" (click)=\"addConnector()\">\n                                    add_circle\n                                </i>\n                            </div>\n                            <table>\n                                <colgroup>\n                                    <col span=\"1\" style=\"width: 10%;\">\n                                    <col span=\"1\" style=\"width: 30%;\">\n                                    <col span=\"1\" style=\"width: 20%;\">\n                                </colgroup>\n                                <thead>\n                                    <tr>\n                                        <th></th>\n                                        <th>Connector name</th>\n                                        <th>Action</th>\n                                    </tr>\n                                </thead>\n                                <tbody>\n                                    <tr *ngFor=\"let connector of piperingVariantConfig.threadedRods[currentChoosenThreadeRod - 1].connectors\">\n                                        <td>\n                                            <i class=\"material-icons icon-button clickable\" [hidden]=\"connector.isShown\">\n                                                visibility_off\n                                            </i>\n                                            <i class=\"material-icons icon-button clickable\" [hidden]=\"!connector.isShown\">\n                                                visibility\n                                            </i>\n                                        </td>\n                                        <td>\n                                            <ng-select [items]=\"connectorOptions\" [active]=\"activeConnector(connector)\" (selected)=\"connectorChanged(connector, $event)\"></ng-select>\n                                        </td>\n                                        <td>\n                                            <i class=\"material-icons icon-button\" (click)=\"removeConnector(connector)\">\n                                                remove_circle\n                                            </i>\n                                        </td>\n                                    </tr>\n                                </tbody>\n                            </table>\n                        </td>\n                    </tr>\n                </tbody>\n            </table>\n        </div>\n    </div>\n</div>\n<!-- Add Modal -->\n<div class=\"modal addModal\" id=\"addModal\" #addModal>\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex\">\n                    <span class=\"modal-label\">Channel: &nbsp;</span>\n                    <!-- <input type=\"text\" #newRodName> -->\n                    <select  [(ngModel)]=\"selectedOption\">\n                        <option *ngFor=\"let channel of channelOptions\" [ngValue]=\"channel\">{{channel.name}}</option>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"button\" class=\"btn btn-danger save-button\" data-dismiss=\"modal\" (click)=\"addNewThreadedRod()\">Save</button>\n            </div>\n\n        </div>\n    </div>\n</div>\n\n<!-- Confiramtion Modal -->\n<div class=\"modal confirmationModal\" id=\"confirmationModal\" #confirmationModal>\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div>\n                    Do you want to remove current rod?\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"button\" class=\"btn btn-danger save-button\" data-dismiss=\"modal\" (click)=\"removeCurrentThreadedRod()\">Remove</button>\n            </div>\n        </div>\n    </div>\n</div>","styles":[".armHeaderLabel{text-align:left;margin-left:6px;font-size:16px!important;height:32px;display:flex;align-items:center;position:relative}.add-profile-btn{position:absolute;right:10px}.clickable{cursor:pointer}.buttonTransparent{padding:0;background-color:transparent;border:none}.buttonTransparent:disabled{opacity:.2}.inner-table{display:block;overflow-y:auto;overflow-x:hidden}.h-auto-scroll{overflow-y:auto;height:calc(100% - 65px)}","table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:1px}tr:nth-child(even){background-color:#ddd}.icon-button{cursor:pointer;font-size:30px;vertical-align:middle}.icon-button .close-icon{cursor:pointer;position:absolute;right:10px}.steps{display:flex;list-style:none;align-items:center;margin:0;height:60px;padding:0;justify-content:space-between}.btnStep{color:#000;font-weight:700;font-size:14px;letter-spacing:.5px;background-color:transparent;border:0;outline:0}.btnStep:disabled{opacity:.6!important;cursor:default}.step::before{background-color:#ccc9cc;margin-left:16px;min-width:70%;height:2px}.step:nth-child(1) .btnStep::before{content:\"1\"}.step:nth-child(2) .btnStep::before{content:\"2\"}.step:nth-child(3) .btnStep::before{content:\"3\"}.step:nth-child(4) .btnStep::before{content:\"4\"}.step:nth-child(5) .btnStep::before{content:\"5\"}.step:nth-child(6) .btnStep::before{content:\"6\"}.btnStep::before{display:inline-block;width:40px;min-width:40px;height:40px;border:0;border-radius:50%;right:0;background-color:#000;margin-right:12px;text-align:center;color:#fff;line-height:40px;font-size:13px}.arms-table{bottom:41px;right:18px;height:100%;background-color:#fff}.arms-table td,.arms-table th{text-align:center}.red-button{font-family:inherit;padding:7px 14px}.currentTab::before{background-color:#d0021b!important}.display-flex{display:flex;margin-bottom:10px}"]}]}],"members":{"args":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":5}}]}],"Args":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":157,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵbr"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":166,"character":22}]}],"ngOnInit":[{"__symbolic":"method"}],"loadVariantData":[{"__symbolic":"method"}],"createNewConfig":[{"__symbolic":"method"}],"saveVariantChanges":[{"__symbolic":"method"}],"addConnector":[{"__symbolic":"method"}],"removeConnector":[{"__symbolic":"method"}],"connectorChanged":[{"__symbolic":"method"}],"addNewThreadedRod":[{"__symbolic":"method"}],"removeCurrentThreadedRod":[{"__symbolic":"method"}],"onGroupChange":[{"__symbolic":"method"}],"activeConnector":[{"__symbolic":"method"}]}},"ɵcl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"app-release-select","template":"\n<select name=\"\" style='height: 32px; font-family:Arial, FontAwesome;' [(ngModel)]=\"releaseId\" (ngModelChange)=\"setSelectedValue()\" [disabled]=\"disable\">\n    <option *ngFor=\"let option of selectOptionsArray,  let num = index\" [innerHTML]=\"option\" [ngValue]=\"releaseArray[num]._id\" ></option>\n</select>\n\n\n<!-- unchecked &#xf0c8; -->\n<!-- checked &#xf14a; -->\n<!-- equation &#xf2d7; -->","styles":[""]}]}],"members":{"ReleaseArray":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":47,"character":70}]}],"ngOnInit":[{"__symbolic":"method"}],"convertArrayToSelect":[{"__symbolic":"method"}],"setSelectedValue":[{"__symbolic":"method"}]}},"ɵcm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"app-variant-verification-grid","template":"<div style=\"margin-left: 15px;\">\n  <kendo-grid style=\"border: none\" [data]=\"variantsVerificationDisplayData\" (add)=\"addHandlerForVariantVerificationData($event)\"\n    (save)=\"saveHandlerForVariantVerificationData($event)\" (cancel)=\"cancelHandlerForVariantVerificationData($event)\" (edit)=\"editHandlerForVariantVerificationData($event)\"\n    (remove)=\"removeHandler($event)\">\n    <ng-template kendoGridToolbarTemplate>\n\n      <div class=\"display-flex\">\n\n        <form style=\"margin-left: 20px\">\n          <input type=\"radio\" name=\"unit\" (click)=\"onUnitChange($event.target.value)\" value=\"kN/kNm\" checked> kN/kNm\n          <input type=\"radio\" name=\"unit\" (click)=\"onUnitChange($event.target.value)\" value=\"kN/kNcm\"> kN/kNcm\n          <input type=\"radio\" name=\"unit\" (click)=\"onUnitChange($event.target.value)\" value=\"kip/kip-ft\"> kip/kip-ft\n        </form>\n\n\n        <button kendoGridAddCommand [disabled]=\"!canAddRowToVariantVerificationGrid\" class=\"btn add-button light-steel-shadow\" style=\"position: absolute; right: 15px;\"\n          type=\"button\" title=\"add\">\n          <i class=\"fa fa-plus\" click></i> Add</button>\n      </div>\n    </ng-template>\n    <kendo-grid-column field=\"verificationId\" title=\"Verification\" width=\"120\">\n      <ng-template kendoGridEditTemplate let-dataItem=\"dataItem\">\n        <!-- <input [(ngModel)]=\"dataItem.ProductName\" kendoGridFocusable name=\"ProductName\" class=\"k-textbox\" required/> -->\n        <select #verification style=\"width:120px;\" name=\"VerificationSelect\" [(ngModel)]=\"dataItem.verificationId\" required>\n          <option *ngFor=\"let verification of verificationData\" [(value)]=\"verification.name\">{{verification.name}}</option>\n        </select>\n      </ng-template>\n    </kendo-grid-column>\n    <kendo-grid-column field=\"methodId\" title=\"Method\" width=\"75\">\n      <ng-template kendoGridEditTemplate let-dataItem=\"dataItem\">\n        <!-- <input [(ngModel)]=\"dataItem.ProductName\" kendoGridFocusable name=\"ProductName\" class=\"k-textbox\" required/> -->\n        <select #method style=\"width:70px;\" name=\"VerificationSelect\" [(ngModel)]=\"dataItem.methodId\" required>\n          <option *ngFor=\"let method of methodsData\" [(value)]=\"method.name\">{{method.name}}</option>\n        </select>\n      </ng-template>\n    </kendo-grid-column>\n    <kendo-grid-column field=\"Fx_p\" editor=\"editNumber\" title=\"Fx+\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"Fx_m\" editor=\"editNumber\" title=\"Fx-\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"Fy_p\" editor=\"editNumber\" title=\"Fy+\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"Fy_m\" editor=\"editNumber\" title=\"Fy-\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"Fz_p\" editor=\"editNumber\" title=\"Fz+\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"Fz_m\" editor=\"editNumber\" title=\"Fz-\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"Mx_p\" editor=\"editNumber\" title=\"Mx+\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"Mx_m\" editor=\"editNumber\" title=\"Mx-\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"My_p\" editor=\"editNumber\" title=\"My+\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"My_m\" editor=\"editNumber\" title=\"My-\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"Mz_p\" editor=\"editNumber\" title=\"Mz+\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"Mz_m\" editor=\"editNumber\" title=\"Mz-\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column field=\"Vrd\" editor=\"editNumber\" title=\"Vrd\" width=\"50\">\n    </kendo-grid-column>\n    <kendo-grid-column title=\"\" width=\"60\">\n      <ng-template kendoGridCellTemplate>\n        <div class=\"display-flex\">\n          <!--MAGIC DO NOT TOUCH DISABLE FUNCTION-->\n          <button kendoGridEditCommand [disabled]=\"!canAddRowToVariantVerificationGrid\" class=\"attributesBtn\" title=\"Edit\">\n            <i class=\"material-icons\">&#xE3C9;</i>\n          </button>\n          <button kendoGridRemoveCommand [disabled]=\"!canAddRowToVariantVerificationGrid\" class=\"attributesBtn btn-remove\" data-toggle=\"modal\"\n            data-target=\"#confirmationModal\" title=\"Remove\">\n            <i class=\"material-icons\">&#xE5CD;</i>\n          </button>\n          <button kendoGridSaveCommand class=\"attributesBtn\" title=\"Save\">\n            <i class=\"material-icons\">&#xE876;</i>\n          </button>\n          <button kendoGridCancelCommand class=\"attributesBtn\" title=\"Cancel\">\n            <i class=\"material-icons\">&#xE5C9;</i>\n          </button>\n        </div>\n      </ng-template>\n    </kendo-grid-column>\n  </kendo-grid>\n</div>\n\n<script>\n  function editNumber(container, options) {\n    $('<input data-bind=\"value:' + options.field + '\"/>')\n      .appendTo(container)\n      .kendoeditNumberTextBox({\n        spinners: false\n      });\n  }\n</script>\n\n<!-- Confiramtion Modal -->\n<div class=\"modal\" id=\"confirmationModal\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n\n      <!-- Modal Header -->\n      <div class=\"modal-header\">\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n      </div>\n\n      <!-- Modal body -->\n      <div class=\"modal-body\">\n        <div>\n          Do you want to remove this element?\n        </div>\n      </div>\n\n      <!-- Modal footer -->\n      <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n        <button type=\"button\" class=\"btn btn-danger save-button\" data-dismiss=\"modal\" (click)=\"removeFromVariantVerificationData()\">Remove</button>\n      </div>\n\n    </div>\n  </div>\n</div>","styles":["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.display-flex{display:flex;align-items:center;margin-bottom:10px}"]}]}],"members":{"VariantId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":166,"character":3}}]}],"DesignBaseId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":177,"character":72},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":177,"character":94},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":178,"character":25}]}],"ngOnInit":[{"__symbolic":"method"}],"loadVerificationData":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"saveNewVariantVerification":[{"__symbolic":"method"}],"saveEditedVariantVerification":[{"__symbolic":"method"}],"deleteVariantVerification":[{"__symbolic":"method"}],"editHandlerForVariantVerificationData":[{"__symbolic":"method"}],"cancelHandlerForVariantVerificationData":[{"__symbolic":"method"}],"saveHandlerForVariantVerificationData":[{"__symbolic":"method"}],"addHandlerForVariantVerificationData":[{"__symbolic":"method"}],"removeHandler":[{"__symbolic":"method"}],"removeFromVariantVerificationData":[{"__symbolic":"method"}],"onUnitChange":[{"__symbolic":"method"}],"changeDisplayedUnits":[{"__symbolic":"method"}],"changeElementUnitsToSI":[{"__symbolic":"method"}],"overwriteDataInGrid":[{"__symbolic":"method"}],"createFormGroupForVariantVerificationData":[{"__symbolic":"method"}]}},"ɵcn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"app-materials-grid","template":"<!-- Create Modal -->\n<div class=\"modal\" id=\"addMaterialModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"materialForm\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedMaterial.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedMaterial.description\" formControlName=\"description\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">R Stab Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedMaterial.rStabName\" formControlName=\"rStabName\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">E Module:</span>\n                                    <input type=\"number\" step=\"0.01\" formControlName=\"eModule\" [(ngModel)]=\"editedMaterial.eModule\">\n                                    <span>&emsp;[N/m<sup>2</sup>]</span>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">G Module:</span>\n                                    <input type=\"number\" step=\"0.01\" formControlName=\"gModule\" [(ngModel)]=\"editedMaterial.gModule\">\n                                    <span>&emsp;[N/m<sup>2</sup>]</span>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Fu:</span>\n                                    <input type=\"number\" step=\"0.01\" formControlName=\"fu\" [(ngModel)]=\"editedMaterial.fu\">\n                                    <span>&emsp;[N/m<sup>2</sup>]</span>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Ni:</span>\n                                    <input type=\"number\" step=\"0.01\" formControlName=\"ni\" [(ngModel)]=\"editedMaterial.ni\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Density:</span>\n                                    <input type=\"number\" step=\"0.01\" formControlName=\"density\" [(ngModel)]=\"editedMaterial.density\">\n                                    <span>&emsp;[N/m<sup>3</sup>]</span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"materialForm.invalid\" (click)=\"saveNewMaterial()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Edit Modal -->\n<div class=\"modal\" id=\"editModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"form\">\n            <form class=\"form-group\" [formGroup]=\"materialForm\">\n                <div class=\"modal-content\">\n\n                    <!-- Modal Header -->\n                    <div class=\"modal-header\">\n                        <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n                    </div>\n\n                    <!-- Modal body -->\n                    <div class=\"modal-body display-flex\">\n                        <div>\n                            <div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedMaterial.name\" formControlName=\"name\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Description:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedMaterial.description\" formControlName=\"description\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">R Stab Name:</span>\n                                    <input type=\"text\" [(ngModel)]=\"editedMaterial.rStabName\" formControlName=\"rStabName\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">E Module:</span>\n                                    <input type=\"number\" step=\"0.0001\" formControlName=\"eModule\" [(ngModel)]=\"editedMaterial.eModule\">\n                                    <span>&emsp;[N/m<sup>2</sup>]</span>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">G Module:</span>\n                                    <input type=\"number\" step=\"0.0001\" formControlName=\"gModule\" [(ngModel)]=\"editedMaterial.gModule\">\n                                    <span>&emsp;[N/m<sup>2</sup>]</span>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Fu:</span>\n                                    <input type=\"number\" step=\"0.0001\" formControlName=\"fu\" [(ngModel)]=\"editedMaterial.fu\">\n                                    <span>&emsp;[N/m<sup>2</sup>]</span>\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Ni:</span>\n                                    <input type=\"number\" step=\"0.0001\" formControlName=\"ni\" [(ngModel)]=\"editedMaterial.ni\">\n                                </div>\n                                <div class=\"display-flex\">\n                                    <span class=\"modal-label\">Density:</span>\n                                    <input type=\"number\" step=\"0.0001\" formControlName=\"density\" [(ngModel)]=\"editedMaterial.density\">\n                                    <span>&emsp;[N/m<sup>3</sup>]</span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Modal footer -->\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                        <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"materialForm.invalid\" (click)=\"editMaterial()\">Save</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this material?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deleteMaterial(editedMaterial)\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"input-effect\">\n    <input class=\"effect1\" type=\"text\" placeholder=\"\">\n    <label>Search</label>\n    <span class=\"focus-border\"></span>\n</div>\n<button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addMaterialModal\" (click)=\"prepareCreate()\">Create</button>\n<table>\n    <tr>\n        <th *ngFor=\"let header of headers\">{{header}}</th>\n    </tr>\n    <tr *ngFor=\"let material of materialsGridData, let row_no = index\">\n        <td>{{material.name}}</td>\n        <td>{{material.description}}</td>\n        <td class=\"columnWithIcons\">\n            <button type=\"button\" class=\"btn editBtn\" data-toggle=\"modal\" data-target=\"#editModal\" (click)=\"setChoosenElement(material, row_no)\">\n                <i class=\"fa fa-edit\"></i>\n            </button>\n            <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(material, row_no)\">\n                <i class=\"fa fa-trash\"></i>\n            </button>\n        </td>\n    </tr>\n</table>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"saveNewMaterial":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editMaterial":[{"__symbolic":"method"}],"deleteMaterial":[{"__symbolic":"method"}],"prepareCreate":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}]}},"ɵco":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"app-pipe-to-piperings-grid","template":"<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Pipe to pipering?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deletePipeToPipering()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"!isPipeToPiperingChoosen\">\n    <div class=\"input-effect\">\n        <input class=\"effect1\" type=\"text\" placeholder=\"\">\n        <label>Search</label>\n        <span class=\"focus-border\"></span>\n    </div>\n    <button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addModal\" (click)=\"createNewPipeToPipering()\">Create</button>\n\n    <table>\n        <tr>\n            <th *ngFor=\"let header of headers\">{{header}}</th>\n        </tr>\n        <tr *ngFor=\"let pipeToPipeting of pipeToPieperingssGridData, let row_no = index\">\n            <td>{{pipeToPipeting.pipeFunctionName}}</td>\n            <td>{{pipeToPipeting.pipeMaterialTypeName}}</td>\n            <td>{{orientationsArray[pipeToPipeting.orientation]}}</td>\n            <td class=\"columnWithIcons\">\n                <button type=\"button\" class=\"btn editBtn\" (click)=\"editPipeToPipering(pipeToPipeting)\">\n                    <i class=\"fa fa-edit\"></i>\n                </button>\n                <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(pipeToPipeting)\">\n                    <i class=\"fa fa-trash\"></i>\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"managmentComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"createNewPipeToPipering":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editPipeToPipering":[{"__symbolic":"method"}],"deletePipeToPipering":[{"__symbolic":"method"}]}},"ɵcp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"app-pipe-to-piperings-managment","template":"<div *ngIf=\"pipeToPiperingData !== undefined && pipeToPiperingData !== null\">\n    <div class=\"row\" style=\"padding-left: 12px;\"></div>\n    <button type=\"button\" class=\"btn btn-danger red-button\" (click)=\"returnHandler()\">Return</button>\n    <button type=\"submit\" class=\"btn btn-primary save-button\" [disabled]=\"ctrl.invalid || ctrl2.invalid || ctrl3.invalid\"\n        (click)=\"save()\">Save</button>\n    <div class=\"row\">\n        <div class=\"col-6\" style=\"line-height: 30px; padding-top: 30px;\">\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Pipe Function:\n                </div>\n                <select name=\"\" id=\"\" [(ngModel)]=\"pipeToPiperingData.pipeFunctionId\" #ctrl=\"ngModel\" required>\n                    <option [value]=\"null\" disabled hidden></option>\n                    <option *ngFor=\"let pipeFunction of pipeFunctionsArray | sortByName\" [(value)]=\"pipeFunction.id\">{{pipeFunction.name}}</option>\n                </select>\n                <br>\n            </div>\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Pipe Material Type:\n                </div>\n                <select name=\"\" id=\"\" [(ngModel)]=\"pipeToPiperingData.pipeMaterialTypeId\" #ctrl2=\"ngModel\" required>\n                    <option [value]=\"null\" disabled hidden></option>\n                    <option *ngFor=\"let pipeMaterialType of pipeMaterialTypesArray | sortByName\" [(value)]=\"pipeMaterialType.id\">{{pipeMaterialType.name}}</option>\n                </select>\n            </div>\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Orientation:\n                </div>\n                <select name=\"\" id=\"\" [(ngModel)]=\"pipeToPiperingData.orientation\" #ctrl3=\"ngModel\" required>\n                    <option [value]=\"null\" disabled hidden></option>\n                    <option *ngFor=\"let orientation of orientationsArray\" [(value)]=\"orientation.id\">{{orientation.name}}</option>\n                </select>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-3\">\n        <kendo-grid style=\"border: none\" [data]=\"workingPiperingsArray\" (add)=\"addHandlerForPiperingData($event)\"\n            (save)=\"saveHandlerForPiperingData($event)\" (cancel)=\"cancelHandlerForPiperingData($event)\" (edit)=\"editHandlerForPiperingData($event)\"\n            (remove)=\"removeHandler($event)\">\n            <ng-template kendoGridToolbarTemplate>\n                <div class=\"display-flex\">\n                    <button kendoGridAddCommand [disabled]=\"!canAddRowToPiperingsGrid\" class=\"btn add-button light-steel-shadow\"\n                        style=\"position: absolute; right: 15px;\" type=\"button\" title=\"add\">\n                        <i class=\"fa fa-plus\" click></i> Add</button>\n                </div>\n            </ng-template>\n            <kendo-grid-column field=\"piperingName\" title=\"Pipe ring\" width=\"120\">\n                <ng-template kendoGridEditTemplate let-dataItem=\"dataItem\">\n                    <!-- <input [(ngModel)]=\"dataItem.ProductName\" kendoGridFocusable name=\"ProductName\" class=\"k-textbox\" required/> -->\n                    <select #pipering style=\"width:120px;\" name=\"PiperingSelect\" [(ngModel)]=\"dataItem._piperingId\"\n                        required>\n                        <option *ngFor=\"let pipering of piperingsArray\" [(value)]=\"pipering._id\">{{pipering.name}}</option>\n                    </select>\n                </ng-template>\n            </kendo-grid-column>\n            <kendo-grid-column title=\"\" width=\"30\">\n                <ng-template kendoGridCellTemplate>\n                    <div class=\"display-flex\">\n                        <!--MAGIC DO NOT TOUCH DISABLE FUNCTION-->\n                        <button kendoGridEditCommand [disabled]=\"!canAddRowToPiperingsGrid\" class=\"attributesBtn\" title=\"Edit\">\n                            <i class=\"material-icons\">&#xE3C9;</i>\n                        </button>\n                        <button kendoGridRemoveCommand [disabled]=\"!canAddRowToPiperingsGrid\" class=\"attributesBtn btn-remove\"\n                            data-toggle=\"modal\" data-target=\"#confirmationModal\" title=\"Remove\">\n                            <i class=\"material-icons\">&#xE5CD;</i>\n                        </button>\n                        <button kendoGridSaveCommand class=\"attributesBtn\" title=\"Save\">\n                            <i class=\"material-icons\">&#xE876;</i>\n                        </button>\n                        <button kendoGridCancelCommand class=\"attributesBtn\" title=\"Cancel\">\n                            <i class=\"material-icons\">&#xE5C9;</i>\n                        </button>\n                    </div>\n                </ng-template>\n            </kendo-grid-column>\n        </kendo-grid>\n    </div>\n</div>\n\n<!-- Delete Modal -->\n<div class=\"modal\" id=\"confirmationModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Working pipering?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" (click)=\"removePipering()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>","styles":[".regularObjectBorder{border-width:1px;border-style:solid}.justTopBorder{border-bottom:0;border-left:0;border-right:0}.justRightBorder{border-bottom:0;border-left:0;border-top:0}.justBottomBorder{border-right:0;border-left:0;border-top:0}#tabContent{font-size:11px;border-color:#dddd}.modal-label{width:168px}hr{margin-top:0}#variantsGrid{margin-left:17px;border-color:#dddd}.delete-button{height:23px;width:23px;margin-left:3px;background-color:#d0021b;color:#fff;font-size:12px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;border-radius:2px;cursor:pointer}.configure-button{height:23px;margin-left:3px;background-color:#4a8bb7;color:#fff;font-size:12px;padding:3px 14px;font-weight:300;letter-spacing:1.1px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;margin-bottom:6px;border-radius:2px;cursor:pointer}.configure-button:disabled{background-color:#999;cursor:default}.step-file{font-size:14px;text-align:center;margin-bottom:10px;font-weight:700}#stpFileDiv{margin-left:auto;margin-right:auto}#variantsTabGrid{border:0;margin-top:26px;border-top:1px solid #ddd}.extra-padding-top{padding-top:10px}.mat-header-cell{font-weight:700}.variantBtn{background-color:#ddd;border:none;padding:6px 18px;outline:0;color:#534f53;cursor:pointer}.variants-header{margin:28px 0 5px;display:flex;justify-content:space-between}.table-label{font-size:16px}.tableCurrentVariant{font-size:14px;border-color:#708090}.borderGray{border-color:#a9a9a9}.borderGray:last-child{border-right:none}.mat-header-row{border-color:#dddd}.highlighted{background-color:#fff!important}.display-flex{display:flex;align-items:center;margin-bottom:10px}.save-button{margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":136,"character":77}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"loadWorkingPiperings":[{"__symbolic":"method"}],"showManagmentPage":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"returnHandler":[{"__symbolic":"method"}],"editHandlerForPiperingData":[{"__symbolic":"method"}],"cancelHandlerForPiperingData":[{"__symbolic":"method"}],"saveHandlerForPiperingData":[{"__symbolic":"method"}],"addHandlerForPiperingData":[{"__symbolic":"method"}],"removeHandler":[{"__symbolic":"method"}],"createFormGroupForPiperingsData":[{"__symbolic":"method"}],"overwriteDataInGrid":[{"__symbolic":"method"}],"saveNewPipering":[{"__symbolic":"method"}],"saveEditedPipering":[{"__symbolic":"method"}],"removePipering":[{"__symbolic":"method"}],"deletePipePipering":[{"__symbolic":"method"}]}},"ɵcq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"app-pipering-families-grid","template":"<!-- Delete Modal -->\n<div class=\"modal\" id=\"deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <span class=\"modal-label\">Do you want to delete this Pipering family?</span>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary\" data-dismiss=\"modal\" (click)=\"deletePiperingFamily()\">Delete</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"!isPiperingFamilyChoosen\">\n    <div class=\"input-effect\">\n        <input class=\"effect1\" type=\"text\" placeholder=\"\">\n        <label>Search</label>\n        <span class=\"focus-border\"></span>\n    </div>\n    <button class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addModal\" (click)=\"createNewPiperingFamily()\">Create</button>\n\n    <table>\n        <tr>\n            <th *ngFor=\"let header of headers\">{{header}}</th>\n        </tr>\n        <tr *ngFor=\"let piperingFamily of piperingFamiliesGridData, let row_no = index\">\n            <td>{{piperingFamily.name}}</td>\n            <td>{{piperingFamily.description}}</td>\n            <td class=\"columnWithIcons\">\n                <button type=\"button\" class=\"btn editBtn\" (click)=\"editPiperingFamily(piperingFamily)\">\n                    <i class=\"fa fa-edit\"></i>\n                </button>\n                <button type=\"button\" class=\"btn deleteBtn\" data-toggle=\"modal\" data-target=\"#deleteModal\" (click)=\"setChoosenElement(piperingFamily)\">\n                    <i class=\"fa fa-trash\"></i>\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(even){background-color:#ddd}.modal-label{width:110px}.display-flex{display:flex;align-items:center;margin-bottom:10px}.search-input{border:none;border-bottom:1px solid gray;outline:0;margin-right:10px}"]}]}],"members":{"managmentComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadGridDataFromDb":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"createNewPiperingFamily":[{"__symbolic":"method"}],"setChoosenElement":[{"__symbolic":"method"}],"editPiperingFamily":[{"__symbolic":"method"}],"deletePiperingFamily":[{"__symbolic":"method"}]}},"ɵcr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"app-pipering-family-managment","template":"<div *ngIf=\"piperingFamilyData !== undefined && piperingFamilyData !== null\">\n    <div class=\"row\" style=\"padding-left: 12px;\">\n        <b>Pipe ring family:</b> &nbsp;{{piperingFamilyData.name}}</div>\n    <button type=\"button\" class=\"btn btn-danger red-button\" (click)=\"returnHandler()\">Return</button>\n    <button type=\"submit\" class=\"btn btn-primary save-button\" [disabled]=\"ctrl.invalid || ctrl2.invalid\" (click)=\"save()\">Save</button>\n    <div class=\"row\">\n\n        <div class=\"col-6\" style=\"line-height: 30px; padding-top: 30px;\">\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Name:\n                </div>\n                <input type=\"text\" class=\"col-4\" [(ngModel)]=\"piperingFamilyData.name\" #ctrl=\"ngModel\" required>\n                <br>\n            </div>\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Description:\n                </div>\n                <input type=\"text\" class=\"col-4\" [(ngModel)]=\"piperingFamilyData.description\">\n            </div>\n            <div class=\"display-flex\">\n                <div class=\"col-3\">Graphical representatation:\n                </div>\n                <select name=\"\" id=\"\" [(ngModel)]=\"piperingFamilyData.graphicalRepresentation\" #ctrl2=\"ngModel\" required>\n                    <option *ngFor=\"let graphicalRepresentation of graphicalRepresentationsArray | sortByName\" [(value)]=\"graphicalRepresentation.code\">{{graphicalRepresentation.value}}</option>\n                </select>\n            </div>\n        </div>\n    </div>\n</div>","styles":[".regularObjectBorder{border-width:1px;border-style:solid}.justTopBorder{border-bottom:0;border-left:0;border-right:0}.justRightBorder{border-bottom:0;border-left:0;border-top:0}.justBottomBorder{border-right:0;border-left:0;border-top:0}#tabContent{font-size:11px;border-color:#dddd}.modal-label{width:168px}hr{margin-top:0}#variantsGrid{margin-left:17px;border-color:#dddd}.delete-button{height:23px;width:23px;margin-left:3px;background-color:#d0021b;color:#fff;font-size:12px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;border-radius:2px;cursor:pointer}.configure-button{height:23px;margin-left:3px;background-color:#4a8bb7;color:#fff;font-size:12px;padding:3px 14px;font-weight:300;letter-spacing:1.1px;box-shadow:0 2px 10px 0 rgba(0,0,0,.06);font-family:Roboto,sans-serif;text-transform:uppercase;outline:0;border:none;margin-bottom:6px;border-radius:2px;cursor:pointer}.configure-button:disabled{background-color:#999;cursor:default}.step-file{font-size:14px;text-align:center;margin-bottom:10px;font-weight:700}#stpFileDiv{margin-left:auto;margin-right:auto}#variantsTabGrid{border:0;margin-top:26px;border-top:1px solid #ddd}.extra-padding-top{padding-top:10px}.mat-header-cell{font-weight:700}.variantBtn{background-color:#ddd;border:none;padding:6px 18px;outline:0;color:#534f53;cursor:pointer}.variants-header{margin:28px 0 5px;display:flex;justify-content:space-between}.table-label{font-size:16px}.tableCurrentVariant{font-size:14px;border-color:#708090}.borderGray{border-color:#a9a9a9}.borderGray:last-child{border-right:none}.mat-header-row{border-color:#dddd}.highlighted{background-color:#fff!important}.display-flex{display:flex;align-items:center;margin-bottom:10px}.save-button{margin-right:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":48,"character":70}]}],"ngOnInit":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"showManagmentPage":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"returnHandler":[{"__symbolic":"method"}]}},"ɵcs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[disableControl]"}]}],"members":{"disableControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"NgControl","line":14,"character":34}]}]}},"ɵct":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"sortByName"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵcu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"part-list","template":"<br>\n<button (click)=\"clearInputs()\" class=\"red-button\" type=\"button\" data-toggle=\"modal\" data-target=\"#addConnectorPartListModal\">Create</button>\n<div class=\"table-wrapper\">\n    <div class=\"table-scroll\">\n        <table>\n            <tr>\n                <th *ngFor=\"let header of headers\">{{header}}</th>\n            </tr>\n            <tr [class.highlighted]=\"checkTypeOfPartListElement(connector.variantId)\" *ngFor=\"let connector of partListGridData,let row_no = index\">\n                <td>{{row_no + 1}}</td>\n                <td>{{connector.articleNumber}}</td>\n                <td>{{connector.description}}</td>\n                <td>{{connector.unit}}</td>\n                <td>{{connector.qty}}</td>\n                <td>\n                    <div [hidden]=\"!checkTypeOfPartListElement(connector.variantId)\">\n                            <i (click)=\"deletePartListElement(row_no)\" class=\"material-icons cursor-pointer\">delete</i>\n                            <button (click)=\"setCurrentEdited(row_no)\"  type=\"button\" data-toggle=\"modal\" data-target=\"#addConnectorPartListModal\" class=\"material-icons cursor-pointer\" style=\"background-color:transparent; border:none\">edit</button>\n                    </div>\n                </td>\n            </tr>\n        </table>\n    </div>\n</div>\n\n\n<!-- Create Modal -->\n<div class=\"modal\" id=\"addConnectorPartListModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n\n            <!-- Modal Header -->\n            <div class=\"modal-header\">\n                <div>Create part-list connector</div>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>\n            </div>\n\n            <!-- Modal body -->\n            <div class=\"modal-body\">\n                <div class=\"display-flex row\">\n                    <div class=\"col-6\"><span class=\"modal-label\">Article no:</span></div>\n                    <div class=\"col-6\"><input type=\"number\" [(ngModel)]=\"templateConnector.articleNumber\"></div>\n                </div>\n                <div class=\"display-flex row\">\n                    <div class=\"col-6\"><span class=\"modal-label\">Description:</span></div>\n                    <div class=\"col-6\"><input type=\"text\" [(ngModel)]=\"templateConnector.description\"></div>\n                </div>\n                <div class=\"display-flex row\">\n                    <div class=\"col-6\"><span class=\"modal-label\">Unit:</span></div>\n                    <div class=\"col-6\">\n                        <select name=\"unitSelect\" [(ngModel)]=\"templateConnector.unit\" class=\"selectHeight\">\n                            <option *ngFor=\"let unit of unitCollection\" [ngValue]=\"unit\">{{unit}}</option>\n                        </select>\n                    </div>\n                </div>\n                <div class=\"display-flex row\">\n                        <div class=\"col-6\"><span class=\"modal-label\">Qty:</span></div>\n                        <div class=\"col-6\"><input type=\"number\" [(ngModel)]=\"templateConnector.qty\"></div>\n                </div>\n            </div>\n\n            <!-- Modal footer -->\n            <div class=\"modal-footer\">\n                <button (click)=\"currentEdited = null\" type=\"button\" class=\"btn btn-danger red-button\" data-dismiss=\"modal\">Cancel</button>\n                <button type=\"submit\" class=\"btn btn-primary save-button\" data-dismiss=\"modal\" [disabled]=\"!isPartListConnectorValidate()\" (click)=\"save()\">Save</button>\n            </div>\n        </div>\n    </div>\n</div>\n","styles":["table{font-family:arial,sans-serif;border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}.pointer{cursor:pointer}.highlighted{background-color:#636475!important;color:#fff}"]}]}],"members":{"args":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵbr"}]}],"ngOnInit":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"saveNewPartListConnector":[{"__symbolic":"method"}],"deletePartListElement":[{"__symbolic":"method"}],"isPartListConnectorValidate":[{"__symbolic":"method"}],"updatePartListElement":[{"__symbolic":"method"}],"setCurrentEdited":[{"__symbolic":"method"}],"clearInputs":[{"__symbolic":"method"}],"setViewerTypeId":[{"__symbolic":"method"}],"checkTypeOfPartListElement":[{"__symbolic":"method"}]}},"ɵcv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"canDeactivate":[{"__symbolic":"method"}]}},"ɵcw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵb"}]}],"canActivate":[{"__symbolic":"method"}]}},"ɵcx":[{"path":"","component":{"__symbolic":"reference","name":"ɵa"},"children":[{"path":"","redirectTo":"main","pathMatch":"full"},{"path":"logout","component":{"__symbolic":"reference","name":"ɵl"},"data":{"breadcrumb":"logout"}},{"path":"main","component":{"__symbolic":"reference","name":"ɵw"},"data":{"breadcrumb":"main-page"}},{"path":"stp-configure","component":{"__symbolic":"reference","name":"ɵcg"}},{"path":"**","redirectTo":"main","data":{"breadcrumb":"main-page"},"canActivate":[{"__symbolic":"reference","name":"ɵs"}]}]}],"ɵcy":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1}}],"members":{"changePanel":[{"__symbolic":"method"}],"updatePanel":[{"__symbolic":"method"}],"updateUserDefinedGrid":[{"__symbolic":"method"}],"saveBom":[{"__symbolic":"method"}],"saveBomCopy":[{"__symbolic":"method"}]}},"ɵcz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"}]}],"registerDownloadLink":[{"__symbolic":"method"}],"openDecorator":[{"__symbolic":"method"}],"findFileNameByUrl":[{"__symbolic":"method"}],"downloadViaBlob":[{"__symbolic":"method"}],"getExtensionByContentType":[{"__symbolic":"method"}]}},"ɵda":{"production":false,"development":false,"envName":"test","beta":false,"imageUrl":"http://api.hilti-typicals.auriga.ru/api/","api_url":"http://hilti-isb-api.netsoftware.pl/api/v1/","constraintsUrl":"http://hilti-constraints-api.netsoftware.pl/api/Constraints/","serviceUrl":"http://localhost:3000/api/v1/","reportsUrl":"http://hilti-isb-api.netsoftware.pl/api/reports","versionNumber":"1.0.0.1","authConfig":{"callbackUrl":"http://localhost:4200/oauth_callback","authorizeUrl":"http://localhost:4200/hc/oauth/v1/authorize?client_id=__clientId__&redirect_uri=__callbackUrl__&response_type=code&scope=HC.Request.AllScopes&lang=__lang__&state=__state__","clientId":"c43c12de2a714bf9ab78b48ff56247be","tokenUrl":"http://localhost:4200/hc/oauth/v1/tokens","logoutUrl":"http://localhost:4200/hc/oauth/v1/logout?ssotoken=invalidate&client_id=__clientId__&lang=__lang__&access_token=__accessToken__"}}},"origins":{"DBMDataStoreModule":"./dbm.data.store.module","ɵa":"./dbm.data.store.component","ɵb":"./service/common/user.service","ɵc":"./service/common/app-storage.service","ɵd":"./service/common/session-storage.service","ɵe":"./service/common/auth.service","ɵf":"./service/common/shared.service","ɵg":"./service/common/common.service","ɵh":"./common/HttpClient","ɵi":"./service/common/window.ref.service","ɵj":"./service/common/nav.service","ɵk":"./service/common/crowdin.service","ɵl":"./logout.component","ɵm":"./root/root.component","ɵn":"./oauthcallback/oauthcallback.component","ɵo":"./service/common/user-role.service","ɵp":"./service/common/helpers.service","ɵq":"./service/common/helpers.service","ɵr":"./service/common/helpers.service","ɵs":"./service/common/routeguard.service","ɵt":"./shared/navigation/navigation.component","ɵu":"./main-page/main-page.module","ɵv":"./main-page/main-page.module","ɵw":"./main-page/main-page.component","ɵx":"./main-page/main-page.service","ɵy":"./main-page/side-menu/side-menu.component","ɵz":"./main-page/master-data/connectors/connector-grid/connector-grid.component","ɵba":"./main-page/master-data/connectors/connector-managment/connector-managment.component","ɵbb":"./main-page/master-data/bases/bases-grid/bases-grid.component","ɵbc":"./main-page/master-data/bases/bases-managment/bases-managment.component","ɵbd":"./main-page/master-data/pipe-fastening/pipe-fastening-grid/pipe-fastening-grid.component","ɵbe":"./main-page/master-data/pipe-fastening/pipe-fastening-managment/pipe-fastening-managment.component","ɵbf":"./main-page/master-data/cross-sections/cross-sections-grid/cross-sections-grid.component","ɵbg":"./main-page/master-data/cross-sections/cross-sections-managment/cross-sections-managment.component","ɵbh":"./main-page/master-data/channels/channels-grid/channels-grid.component","ɵbi":"./main-page/master-data/channels/channels-managment/channels-managment.component","ɵbj":"./main-page/master-data/pipe-rings/pipe-rings-grid/pipe-rings-grid.component","ɵbk":"./main-page/master-data/pipe-rings/pipe-rings-managment/pipe-rings-managment.component","ɵbl":"./main-page/dictionaries/systems-grid/systems-grid.component","ɵbm":"./main-page/dictionaries/pipering-groups-grid/pipering-groups-grid.component","ɵbn":"./main-page/dictionaries/corosion-protections-grid/corosion-protections-grid.component","ɵbo":"./main-page/dictionaries/design-bases-grid/design-bases-grid.component","ɵbp":"./main-page/dictionaries/subcomponents-verification-grid/subcomponents-verification-grid.component","ɵbq":"./main-page/stp-configure/orientation-positioning/orientation-positioning.component","ɵbr":"./main-page/stp-configure/stp-configure.service","ɵbs":"./main-page/dictionaries/interaction-equations-grid/interaction-equations-grid.component","ɵbt":"./main-page/dictionaries/pipe-functions-grid/pipe-functions-grid.component","ɵbu":"./main-page/dictionaries/pipe-groups-grid/pipe-groups-grid.component","ɵbv":"./main-page/dictionaries/pipe-fastening-groups-grid/pipe-fastening-groups-grid.component","ɵbw":"./main-page/dictionaries/pipe-material/pipe-materials-grid/pipe-materials-grid.component","ɵbx":"./main-page/dictionaries/pipe-material-types-grid/pipe-material-types-grid.component","ɵby":"./main-page/dictionaries/pipe-material/pipe-material-managment/pipe-material-managment.component","ɵbz":"./main-page/dictionaries/insulation-material/insulation-materials-grid/insulation-materials-grid.component","ɵca":"./main-page/dictionaries/insulation-material/insulation-material-managment/insulation-material-managment.component","ɵcb":"./main-page/master-data/pipes/pipes-grid/pipes-grid.component","ɵcc":"./main-page/master-data/pipes/pipes-managment/pipes-managment.component","ɵcd":"./main-page/master-data/pipering-bosses/pipering-bosses-grid/pipering-bosses-grid.component","ɵce":"./main-page/master-data/pipering-bosses/pipering-bosses-managment/pipering-bosses-managment.component","ɵcf":"./main-page/dictionaries/releases-grid/releases-grid.component","ɵcg":"./main-page/stp-configure/stp-configure.component","ɵch":"./main-page/stp-configure/arms-configure/arms-configure.component","ɵci":"./main-page/stp-configure/profiles-configure/profiles-configure.component","ɵcj":"./main-page/stp-configure/pipering-configure/pipering-configure.component","ɵck":"./main-page/stp-configure/threaded-configure/threaded-configure.component","ɵcl":"./shared/release-select/release-select.component","ɵcm":"./shared/variant-verification-grid/variant-verification-grid.component","ɵcn":"./main-page/dictionaries/materials-grid/materials-grid.component","ɵco":"./main-page/settings/pipe-to-piperings/pipe-to-piperings-grid/pipe-to-piperings-grid.component","ɵcp":"./main-page/settings/pipe-to-piperings/pipe-to-piperings-managment/pipe-to-piperings-managment.component","ɵcq":"./main-page/dictionaries/pipering-families/pipering-families-grid/pipering-families-grid.component","ɵcr":"./main-page/dictionaries/pipering-families/pipering-family-managment/pipering-family-managment.component","ɵcs":"./shared/directives/disableFormsControl","ɵct":"./shared/pipes/sort-pipe","ɵcu":"./main-page/stp-configure/part-list/part-list.component","ɵcv":"./main-page/main-page-saveguard.service","ɵcw":"./service/common/user-agreement-acceptguard.service","ɵcx":"./dbm.data.store.routing","ɵcy":"./service/common/connection-panels-helper.service","ɵcz":"./service/common/download-helper.service","ɵda":"./environments/environment"},"importAs":"@hilti/pegasus-orion-dbm-datastore"}