\\r\\n \\r\\n
\\r\\n \\r\\n
\"","import { Component, OnDestroy, OnInit } from \"@angular/core\";\r\nimport { ActivatedRoute } from \"@angular/router\";\r\nimport { GalleryService } from \"../gallery.service\";\r\nimport { DataShareService } from \"src/app/shared/data-share.service\";\r\n\r\n@Component({\r\n selector: \"app-story-telling-page\",\r\n templateUrl: \"./story-telling-page.component.html\",\r\n styleUrls: [\"./story-telling-page.component.css\"],\r\n})\r\nexport class StoryTellingPageComponent implements OnInit, OnDestroy {\r\n isDataLoading: boolean;\r\n paramsData: any;\r\n storyData: any;\r\n selectedSection: any;\r\n classVal: any;\r\n constructor(\r\n private _route: ActivatedRoute,\r\n private dataShareService: DataShareService,\r\n private galleryService: GalleryService\r\n ) {}\r\n\r\n ngOnInit() {\r\n this.isDataLoading = false;\r\n this.paramsData = this._route.snapshot.params;\r\n\r\n this.storyData = this.galleryService.getStoryListById({\r\n url: this.paramsData.url,\r\n });\r\n\r\n if (!this.storyData) {\r\n this.galleryService.storiesChanged.subscribe(() => {\r\n this.storyData = this.galleryService.getStoryListById({\r\n url: this.paramsData.url,\r\n });\r\n\r\n //! Hardcoded, will be removed later\r\n if (this.paramsData.url == \"atlas-intelligence-kraft\") {\r\n this.storyData = {\r\n id: \"26\",\r\n type: \"story\",\r\n categoryId: \"3\",\r\n sequenceOrder: 18,\r\n endpoint: null,\r\n title: \"Clinical Trial Enrollment Modeling and Predictions\",\r\n description:\r\n \"Finding right sites to create enrolment plans for clinical trials by Historical Benchmarking, Distribution Parameters, Probabilistic Measurements, Tracking and Reforecasting\",\r\n url: \"atlas-intelligence-kraft\",\r\n isNew: true,\r\n isInteractive: false,\r\n isVisible: true,\r\n groupId: null,\r\n createdAt: null,\r\n createdBy: \"1\",\r\n updatedAt: \"1634716239000\",\r\n updatedBy: \"1\",\r\n isHorizontalView: true,\r\n tags: [\"#pharma\", \"#AI\", \"#gnome\", \"#nlp\", \"#Segmentation\"],\r\n displayTitle: {\r\n line1: \"Clinical Trial\",\r\n line2: \"Enrollment Modeling and Predictions\",\r\n },\r\n viewType: \"business\",\r\n isHidden: false,\r\n isGrouped: false,\r\n category: \"AI in Personalization \",\r\n categoryClass: \"category_1\",\r\n isHorizonalView: true,\r\n };\r\n }\r\n this.getStoryDetails(this.storyData);\r\n });\r\n } else {\r\n this.getStoryDetails(this.storyData);\r\n }\r\n }\r\n\r\n private getStoryDetails(data) {\r\n // TODO:SPM add property to json for horizontal view\r\n // TODO:RM Rename the url\r\n if (\r\n data.url === \"field_coaching\" || data.url === 'virtual_rep_trainer' ||\r\n data.url === \"ctemp\" ||\r\n //! Hardcoded, will be removed later\r\n data.url === \"atlas-intelligence-kraft\"\r\n ) {\r\n data.isHorizonalView = true;\r\n }\r\n // TODO: PB to add class to body story-wise\r\n this.classVal = this.dataShareService.getBodyStoryClass(data.url, \"stp\");\r\n this.dataShareService.updateCustomEvent({\r\n event: \"addClassToBody\",\r\n data: this.classVal,\r\n });\r\n // END\r\n this.dataShareService.dataChange(data);\r\n const navData = {\r\n sections: [\r\n {\r\n name: \"Problem\",\r\n },\r\n {\r\n name: \"Data\",\r\n },\r\n {\r\n name: \"Solution\",\r\n },\r\n {\r\n name: \"Outcomes\",\r\n },\r\n ],\r\n disableClick: true,\r\n };\r\n this.dataShareService.changeNavigation(navData);\r\n }\r\n\r\n visibleSectionChagne(e) {\r\n this.dataShareService.navigationSectionChange(e.value);\r\n this.selectedSection = e.value;\r\n }\r\n\r\n onChildLoad($event) {\r\n this.dataShareService.changeNavigation({ ...$event, disableClick: true });\r\n }\r\n\r\n ngOnDestroy() {\r\n this.dataShareService.updateCustomEvent({\r\n event: \"removeClassToBody\",\r\n data: this.classVal,\r\n });\r\n this.dataShareService.onCustomEvent.next({ event: 'removeClassToElement', data: {selector: '#header', class: 'humburger-header'}});\r\n }\r\n}\r\n","module.exports = \".drag-list {\\r\\n width: 500px;\\r\\n max-width: 100%;\\r\\n max-height: 400px;\\r\\n overflow-y: auto;\\r\\n /* border: solid 1px #ccc; */\\r\\n /* min-height: 60px; */\\r\\n display: block;\\r\\n /* background: white; */\\r\\n /* border-radius: 4px; */\\r\\n /* overflow: hidden; */\\r\\n }\\r\\n \\r\\n .drag-box {\\r\\n padding: 4px 10px;\\r\\n border: solid 1px #ccc;\\r\\n color: rgba(0, 0, 0, 0.87);\\r\\n display: flex;\\r\\n flex-direction: row;\\r\\n align-items: center;\\r\\n justify-content: space-between;\\r\\n box-sizing: border-box;\\r\\n cursor: move;\\r\\n background: white;\\r\\n font-size: 14px;\\r\\n border-left: 10px solid;\\r\\n border-radius: 12px;\\r\\n margin-bottom: 10px;\\r\\n min-height: 45px;\\r\\n }\\r\\n \\r\\n .drag-box input {\\r\\n width: 100%;\\r\\n }\\r\\n \\r\\n .cdk-drag-preview {\\r\\n display: none;\\r\\n /* box-sizing: border-box;\\r\\n border-radius: 4px;\\r\\n box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),\\r\\n 0 8px 10px 1px rgba(0, 0, 0, 0.14),\\r\\n 0 3px 14px 2px rgba(0, 0, 0, 0.12); */\\r\\n }\\r\\n \\r\\n .cdk-drag-placeholder {\\r\\n opacity: 1;\\r\\n /* z-index: 10000; */\\r\\n /* background-color: salmon; */\\r\\n /* box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),\\r\\n 0 8px 10px 1px rgba(0, 0, 0, 0.14),\\r\\n 0 3px 14px 2px rgba(0, 0, 0, 0.12); */\\r\\n border: solid 1px #016199 !important;\\r\\n }\\r\\n \\r\\n .cdk-drag-animating {\\r\\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\\r\\n }\\r\\n \\r\\n /*.drag-box:last-child {\\r\\n border: none;\\r\\n } */\\r\\n \\r\\n .drag-list.cdk-drop-list-dragging.drag-box:not(.cdk-drag-placeholder) {\\r\\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\\r\\n }\\r\\n \\r\\n .available-color {\\r\\n cursor: pointer;\\r\\n }\\r\\n \\r\\n .available-color:hover {\\r\\n cursor: pointer;\\r\\n border: 3px solid grey;\\r\\n }\\r\\n \\r\\n .available-color.disabled-color {\\r\\n cursor: not-allowed;\\r\\n opacity: 0.7;\\r\\n border: 1px solid transparent;\\r\\n}\\r\\n \\r\\n .available-color.disabled-color:hover {\\r\\n cursor: not-allowed;\\r\\n opacity: 0.7;\\r\\n}\\r\\n \\r\\n .available-color.selected-color {\\r\\n border: 3px solid black;\\r\\n}\\r\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9hcHAvZ2FsbGVyeS90YWItc2V0dGluZ3Mtb3ZlcmxheS90YWItc2V0dGluZ3Mtb3ZlcmxheS5jb21wb25lbnQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0lBQ0ksYUFBYTtJQUNiLGdCQUFnQjtJQUNoQixrQkFBa0I7SUFDbEIsaUJBQWlCO0lBQ2pCLDZCQUE2QjtJQUM3Qix1QkFBdUI7SUFDdkIsZUFBZTtJQUNmLHdCQUF3QjtJQUN4Qix5QkFBeUI7SUFDekIsdUJBQXVCO0dBQ3hCOztDQUVGO0lBQ0csa0JBQWtCO0lBQ2xCLHVCQUF1QjtJQUN2QiwyQkFBMkI7SUFDM0IsY0FBYztJQUNkLG9CQUFvQjtJQUNwQixvQkFBb0I7SUFDcEIsK0JBQStCO0lBQy9CLHVCQUF1QjtJQUN2QixhQUFhO0lBQ2Isa0JBQWtCO0lBQ2xCLGdCQUFnQjtJQUNoQix3QkFBd0I7SUFDeEIsb0JBQW9CO0lBQ3BCLG9CQUFvQjtJQUNwQixpQkFBaUI7R0FDbEI7O0NBRUY7SUFDRyxZQUFZO0dBQ2I7O0NBRUQ7SUFDRSxjQUFjO0lBQ2Q7Ozs7c0RBSWtEO0dBQ25EOztDQUVEO0lBQ0UsV0FBVztJQUNYLHFCQUFxQjtJQUNyQiwrQkFBK0I7SUFDL0I7O3NEQUVrRDtJQUNsRCxxQ0FBcUM7R0FDdEM7O0NBRUQ7SUFDRSx1REFBdUQ7R0FDeEQ7O0NBRUQ7O01BRUk7O0NBRUo7SUFDRSx1REFBdUQ7R0FDeEQ7O0NBRUQ7SUFDRSxnQkFBZ0I7R0FDakI7O0NBRUQ7SUFDRSxnQkFBZ0I7SUFDaEIsdUJBQXVCO0dBQ3hCOztDQUVIO0VBQ0Usb0JBQW9CO0VBQ3BCLGFBQWE7RUFDYiw4QkFBOEI7Q0FDL0I7O0NBRUQ7RUFDRSxvQkFBb0I7RUFDcEIsYUFBYTtDQUNkOztDQUVEO0VBQ0Usd0JBQXdCO0NBQ3pCIiwiZmlsZSI6InNyYy9hcHAvZ2FsbGVyeS90YWItc2V0dGluZ3Mtb3ZlcmxheS90YWItc2V0dGluZ3Mtb3ZlcmxheS5jb21wb25lbnQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmRyYWctbGlzdCB7XHJcbiAgICB3aWR0aDogNTAwcHg7XHJcbiAgICBtYXgtd2lkdGg6IDEwMCU7XHJcbiAgICBtYXgtaGVpZ2h0OiA0MDBweDtcclxuICAgIG92ZXJmbG93LXk6IGF1dG87XHJcbiAgICAvKiBib3JkZXI6IHNvbGlkIDFweCAjY2NjOyAqL1xyXG4gICAgLyogbWluLWhlaWdodDogNjBweDsgKi9cclxuICAgIGRpc3BsYXk6IGJsb2NrO1xyXG4gICAgLyogYmFja2dyb3VuZDogd2hpdGU7ICovXHJcbiAgICAvKiBib3JkZXItcmFkaXVzOiA0cHg7ICovXHJcbiAgICAvKiBvdmVyZmxvdzogaGlkZGVuOyAqL1xyXG4gIH1cclxuICBcclxuIC5kcmFnLWJveCB7XHJcbiAgICBwYWRkaW5nOiA0cHggMTBweDtcclxuICAgIGJvcmRlcjogc29saWQgMXB4ICNjY2M7XHJcbiAgICBjb2xvcjogcmdiYSgwLCAwLCAwLCAwLjg3KTtcclxuICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xyXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcclxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XHJcbiAgICBjdXJzb3I6IG1vdmU7XHJcbiAgICBiYWNrZ3JvdW5kOiB3aGl0ZTtcclxuICAgIGZvbnQtc2l6ZTogMTRweDtcclxuICAgIGJvcmRlci1sZWZ0OiAxMHB4IHNvbGlkO1xyXG4gICAgYm9yZGVyLXJhZGl1czogMTJweDtcclxuICAgIG1hcmdpbi1ib3R0b206IDEwcHg7XHJcbiAgICBtaW4taGVpZ2h0OiA0NXB4O1xyXG4gIH1cclxuXHJcbiAuZHJhZy1ib3ggaW5wdXQge1xyXG4gICAgd2lkdGg6IDEwMCU7XHJcbiAgfVxyXG4gIFxyXG4gIC5jZGstZHJhZy1wcmV2aWV3IHtcclxuICAgIGRpc3BsYXk6IG5vbmU7XHJcbiAgICAvKiBib3gtc2l6aW5nOiBib3JkZXItYm94O1xyXG4gICAgYm9yZGVyLXJhZGl1czogNHB4O1xyXG4gICAgYm94LXNoYWRvdzogMCA1cHggNXB4IC0zcHggcmdiYSgwLCAwLCAwLCAwLjIpLFxyXG4gICAgICAgICAgICAgICAgMCA4cHggMTBweCAxcHggcmdiYSgwLCAwLCAwLCAwLjE0KSxcclxuICAgICAgICAgICAgICAgIDAgM3B4IDE0cHggMnB4IHJnYmEoMCwgMCwgMCwgMC4xMik7ICovXHJcbiAgfVxyXG4gIFxyXG4gIC5jZGstZHJhZy1wbGFjZWhvbGRlciB7XHJcbiAgICBvcGFjaXR5OiAxO1xyXG4gICAgLyogei1pbmRleDogMTAwMDA7ICovXHJcbiAgICAvKiBiYWNrZ3JvdW5kLWNvbG9yOiBzYWxtb247ICovXHJcbiAgICAvKiBib3gtc2hhZG93OiAwIDVweCA1cHggLTNweCByZ2JhKDAsIDAsIDAsIDAuMiksXHJcbiAgICAgICAgICAgICAgICAwIDhweCAxMHB4IDFweCByZ2JhKDAsIDAsIDAsIDAuMTQpLFxyXG4gICAgICAgICAgICAgICAgMCAzcHggMTRweCAycHggcmdiYSgwLCAwLCAwLCAwLjEyKTsgKi9cclxuICAgIGJvcmRlcjogc29saWQgMXB4ICMwMTYxOTkgIWltcG9ydGFudDtcclxuICB9XHJcbiAgXHJcbiAgLmNkay1kcmFnLWFuaW1hdGluZyB7XHJcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMjUwbXMgY3ViaWMtYmV6aWVyKDAsIDAsIDAuMiwgMSk7XHJcbiAgfVxyXG4gIFxyXG4gIC8qLmRyYWctYm94Omxhc3QtY2hpbGQge1xyXG4gICAgYm9yZGVyOiBub25lO1xyXG4gIH0gKi9cclxuICBcclxuICAuZHJhZy1saXN0LmNkay1kcm9wLWxpc3QtZHJhZ2dpbmcuZHJhZy1ib3g6bm90KC5jZGstZHJhZy1wbGFjZWhvbGRlcikge1xyXG4gICAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDI1MG1zIGN1YmljLWJlemllcigwLCAwLCAwLjIsIDEpO1xyXG4gIH1cclxuXHJcbiAgLmF2YWlsYWJsZS1jb2xvciB7XHJcbiAgICBjdXJzb3I6IHBvaW50ZXI7XHJcbiAgfVxyXG4gIFxyXG4gIC5hdmFpbGFibGUtY29sb3I6aG92ZXIge1xyXG4gICAgY3Vyc29yOiBwb2ludGVyO1xyXG4gICAgYm9yZGVyOiAzcHggc29saWQgZ3JleTtcclxuICB9XHJcblxyXG4uYXZhaWxhYmxlLWNvbG9yLmRpc2FibGVkLWNvbG9yIHtcclxuICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xyXG4gIG9wYWNpdHk6IDAuNztcclxuICBib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcclxufVxyXG5cclxuLmF2YWlsYWJsZS1jb2xvci5kaXNhYmxlZC1jb2xvcjpob3ZlciB7XHJcbiAgY3Vyc29yOiBub3QtYWxsb3dlZDtcclxuICBvcGFjaXR5OiAwLjc7XHJcbn1cclxuXHJcbi5hdmFpbGFibGUtY29sb3Iuc2VsZWN0ZWQtY29sb3Ige1xyXG4gIGJvcmRlcjogM3B4IHNvbGlkIGJsYWNrO1xyXG59Il19 */\"","module.exports = \"
\\r\\n
\\r\\n
{{data.isEdit ? 'Edit' : 'New'}} Category \\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n\\r\\n
\\r\\n
\\r\\n
\\r\\n Name \\r\\n Please enter the Category Name \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
0\\\">\\r\\n
\\r\\n
\\r\\n Story \\r\\n
\\r\\n
\\r\\n Category \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n {{ story.title }} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\"","import { Component, Inject, OnInit } from '@angular/core';\r\nimport { MAT_DIALOG_DATA, MatDialogRef, MatSnackBar } from '@angular/material';\r\nimport { GalleryService } from '../gallery.service';\r\nimport { CdkDragDrop, CdkDragMove, CdkDragStart, moveItemInArray } from '@angular/cdk/drag-drop';\r\n\r\n@Component({\r\n selector: 'app-tab-settings-overlay',\r\n templateUrl: './tab-settings-overlay.component.html',\r\n styleUrls: ['./tab-settings-overlay.component.css'],\r\n providers: [GalleryService]\r\n})\r\nexport class TabSettingsOverlayComponent {\r\n\r\n public isUpdated = false;\r\n public categoryList = [];\r\n public selectedCategory = null;\r\n public isDuplicate = false;\r\n public oldName = '';\r\n public oldColor = '';\r\n public isStoryUpdated = false;\r\n\r\n public validateKeys = {\r\n 'name': false,\r\n 'color': false,\r\n }\r\n\r\n public validateEmpty = {\r\n color: false,\r\n name: false,\r\n }\r\n\r\n colors = [];\r\n\r\n constructor(\r\n private _snackBar: MatSnackBar,\r\n @Inject(MAT_DIALOG_DATA) public data: any,\r\n public dialogRef: MatDialogRef
,\r\n public gallaryService: GalleryService,\r\n ) {\r\n dialogRef.disableClose;\r\n this.selectedCategory = JSON.parse(JSON.stringify(data.selected));\r\n this.oldName = this.selectedCategory.name;\r\n this.oldColor = this.selectedCategory.color;\r\n data.stories && data.stories.forEach(e => {\r\n e.oldCategoryId = e.categoryId;\r\n });\r\n this.categoryList = data.list;\r\n this.colors = JSON.parse(JSON.stringify(gallaryService.getColors()));\r\n this.updateColorAvailability();\r\n this.updateName();\r\n this.validateSave();\r\n }\r\n\r\n updateColorAvailability() {\r\n this.colors.forEach(e => {\r\n const color = this.categoryList.find(c => e.color !== this.selectedCategory.color && c.color === e.color)\r\n if (color) {\r\n e.available = false;\r\n } else {\r\n e.available = true;\r\n }\r\n });\r\n this.colors = [...this.colors.filter(e => e.available), ...this.colors.filter(e => !e.available)];\r\n if (this.oldColor.trim() !== '') {\r\n const colorIndex = this.colors.findIndex(e => e.color === this.oldColor);\r\n if (colorIndex > -1) {\r\n const selectedColor = this.colors[colorIndex];\r\n this.colors.splice(colorIndex, 1);\r\n this.colors.splice(0, 0, selectedColor);\r\n }\r\n } else {\r\n this.updateColor(this.colors[0]);\r\n }\r\n }\r\n\r\n updateColor(color) {\r\n if (color.available) {\r\n this.selectedCategory.color = color.color;\r\n this.selectedCategory.categoryClass = 'category_' + color.id;\r\n if (this.selectedCategory.color.trim() === '') {\r\n this.validateEmpty.color = true;\r\n } else {\r\n this.validateEmpty.color = false;\r\n this.validateKeys.color = this.oldColor !== this.selectedCategory.color;\r\n }\r\n this.validateSave();\r\n }\r\n }\r\n\r\n updateName() {\r\n if (this.selectedCategory.name.trim() === '') {\r\n this.validateEmpty.name = true;\r\n } else {\r\n this.validateEmpty.name = false;\r\n this.validateKeys.name = this.oldName !== this.selectedCategory.name;\r\n }\r\n this.validateSave();\r\n }\r\n\r\n updateValue($e, story) {\r\n story.categoryId = $e.target.value;\r\n this.validateChange();\r\n }\r\n\r\n onCancel() {\r\n this.dialogRef.close(false);\r\n }\r\n\r\n public isDataLoading = false;\r\n\r\n onSave() {\r\n if (!this.isUpdated && !this.isStoryUpdated) {\r\n return\r\n }\r\n if (!this.data.isEdit) {\r\n const obj = {\r\n \"name\": this.selectedCategory.name,\r\n \"color\": this.selectedCategory.color,\r\n };\r\n this.isDataLoading = true;\r\n this.gallaryService.createCategory(obj).subscribe((res : any) => {\r\n this.showToastMessage(res.message, false);\r\n const data = {\r\n isEdit: false,\r\n category: {\r\n name: this.selectedCategory.name,\r\n color: this.selectedCategory.color,\r\n categoryId: res.data.categoryId,\r\n categoryClass: 'category_' + this.colors.find(e => this.selectedCategory.color === e.color).id\r\n }\r\n }\r\n this.isDataLoading = false;\r\n this.dialogRef.close(data);\r\n }, (err) => {\r\n this.showToastMessage(err.error.message);\r\n this.isDataLoading = false;\r\n })\r\n } else {\r\n const obj = {\r\n \"name\": this.selectedCategory.name,\r\n \"color\": this.selectedCategory.color,\r\n \"categoryId\": this.selectedCategory.categoryId,\r\n \"stories\": this.data.stories.map(e => {\r\n return {\r\n storyId: e.storyId,\r\n categoryId: e.categoryId,\r\n }\r\n }),\r\n };\r\n this.isDataLoading = true;\r\n this.gallaryService.updateCategory(obj).subscribe((res: any) => {\r\n this.showToastMessage(res.message, false);\r\n const data = {\r\n isEdit: this.data.isEdit,\r\n isColorChanged: this.oldColor !== this.selectedCategory.color,\r\n stories: this.data.stories,\r\n category: this.selectedCategory,\r\n }\r\n this.isDataLoading = false;\r\n this.dialogRef.close(data);\r\n }, (err) => {\r\n this.showToastMessage(err.error.message);\r\n this.isDataLoading = false;\r\n })\r\n }\r\n }\r\n\r\n validateSave() {\r\n this.isUpdated = false;\r\n let isEmpty = false;\r\n for (const key in this.validateEmpty) {\r\n if (Object.prototype.hasOwnProperty.call(this.validateEmpty, key)) {\r\n if (this.validateEmpty[key] === true) {\r\n isEmpty = true;\r\n }\r\n }\r\n }\r\n\r\n if (isEmpty) { return false }\r\n\r\n for (const key in this.validateKeys) {\r\n if (Object.prototype.hasOwnProperty.call(this.validateKeys, key)) {\r\n if (this.validateKeys[key] === true) {\r\n this.isUpdated = true;\r\n }\r\n }\r\n }\r\n\r\n return this.isUpdated;\r\n }\r\n\r\n validateChange() {\r\n this.isStoryUpdated = false;\r\n for (let i = 0; i < this.data.stories.length; i++) {\r\n const story = this.data.stories[i];\r\n if (story.oldCategoryId !== story.categoryId) {\r\n this.isStoryUpdated = true;\r\n i += this.data.stories.length;\r\n }\r\n }\r\n }\r\n\r\n showToastMessage(message, isError = true, duration= 3000) {\r\n this._snackBar.open(message, '', {\r\n\t\t\tduration,\r\n\t\t\tpanelClass: isError ? 'error' : 'success',\r\n\t\t\tverticalPosition: 'top',\r\n\t\t\thorizontalPosition: 'right'\r\n\t\t})\r\n }\r\n\r\n}\r\n","module.exports = \"\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcmMvYXBwL2dhbGxlcnkvdGlsZS1zZXR0aW5ncy1vdmVybGF5L3RpbGUtc2V0dGluZ3Mtb3ZlcmxheS5jb21wb25lbnQuY3NzIn0= */\"","module.exports = \"\\r\\n\\r\\n
\\r\\n
Story Settings {{ data.story.title }} \\r\\n \\r\\n
\\r\\n \\r\\n touch_app \\r\\n \\r\\n \\r\\n visibility_off \\r\\n \\r\\n \\r\\n star_rate \\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n
\\r\\n
General \\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n Description \\r\\n \\r\\n Please enter the description \\r\\n
\\r\\n
\\r\\n
\\r\\n
0\\\">\\r\\n
Group \\r\\n \\r\\n
\\r\\n
\\r\\n\"","import { Component, Inject, OnInit } from '@angular/core';\r\nimport { FormGroup, FormBuilder, Validators } from '@angular/forms';\r\nimport { MAT_DIALOG_DATA, MatDialogRef, MatSnackBar } from '@angular/material';\r\nimport { GalleryService } from '../gallery.service';\r\nimport { GoogleAnalyticsService } from 'src/app/services/google-analytics.service';\r\nimport { GAIndex } from 'src/app/shared/enum/enum';\r\n\r\n@Component({\r\n selector: 'app-tile-settings-overlay',\r\n templateUrl: './tile-settings-overlay.component.html',\r\n styleUrls: ['./tile-settings-overlay.component.css'],\r\n providers: [GalleryService]\r\n})\r\nexport class TileSettingsOverlayComponent implements OnInit {\r\n\r\n public isLoading = false;\r\n public oldStory;\r\n public isUpdated = false;\r\n\r\n public validateKeys = {\r\n 'groupId': false,\r\n 'category': false,\r\n 'isInteractive': false,\r\n 'isNew': false,\r\n 'isHidden': false,\r\n 'description': false,\r\n 'boldTitle': false,\r\n 'title': false,\r\n }\r\n\r\n public validateEmpty = {\r\n title: false,\r\n description: false,\r\n }\r\n\r\n constructor(\r\n private _snackBar: MatSnackBar,\r\n @Inject(MAT_DIALOG_DATA) public data: any,\r\n public dialogRef: MatDialogRef,\r\n public gallaryService: GalleryService) {\r\n dialogRef.disableClose = true;\r\n this.isLoading = true;\r\n this.oldStory = { ...data.story, displayTitle: { ...data.story.displayTitle } }\r\n }\r\n\r\n ngOnInit() {\r\n\r\n }\r\n\r\n updateDescription() {\r\n if (this.data.story.description.trim() === '') {\r\n this.validateEmpty.description = true;\r\n } else {\r\n this.validateEmpty.description = false;\r\n this.validateKeys.description = this.oldStory.description !== this.data.story.description;\r\n }\r\n this.validateSave();\r\n }\r\n\r\n updateCategory() {\r\n this.validateKeys.category = this.oldStory.categoryId !== this.data.story.categoryId;\r\n this.validateSave()\r\n }\r\n\r\n updateGroup() {\r\n this.validateKeys.groupId = this.oldStory.groupId !== this.data.story.groupId;\r\n this.validateSave()\r\n }\r\n\r\n updateLine1() {\r\n if (this.data.story.displayTitle.line1.trim() === '') {\r\n this.validateEmpty.title = true;\r\n } else {\r\n this.validateEmpty.title = false;\r\n this.validateKeys.title = this.oldStory.displayTitle.line1 !== this.data.story.displayTitle.line1;\r\n }\r\n this.validateSave();\r\n }\r\n\r\n updateLine2() {\r\n this.validateKeys.boldTitle = this.oldStory.displayTitle.line2 !== this.data.story.displayTitle.line2;\r\n this.validateSave();\r\n }\r\n\r\n updateQuickToggles(key) {\r\n this.data.story[key] = !this.data.story[key];\r\n this.validateKeys[key] = this.oldStory[key] !== this.data.story[key];\r\n this.validateSave();\r\n }\r\n\r\n validateSave() {\r\n this.isUpdated = false;\r\n let isEmpty = false;\r\n for (const key in this.validateEmpty) {\r\n if (Object.prototype.hasOwnProperty.call(this.validateEmpty, key)) {\r\n if (this.validateEmpty[key] === true) {\r\n isEmpty = true;\r\n }\r\n }\r\n }\r\n\r\n if (isEmpty) { return false }\r\n\r\n for (const key in this.validateKeys) {\r\n if (Object.prototype.hasOwnProperty.call(this.validateKeys, key)) {\r\n if (this.validateKeys[key] === true) {\r\n this.isUpdated = true;\r\n }\r\n }\r\n }\r\n\r\n return this.isUpdated;\r\n }\r\n\r\n public isDataLoading = false;\r\n\r\n onSubmit() {\r\n if (this.validateSave()) {\r\n this.isDataLoading = true;\r\n const tempTitle = `${this.data.story.displayTitle.line1.trim()} ${this.data.story.displayTitle.line2.trim()}`\r\n const payload = {\r\n \"storyId\": this.data.story.id, \r\n \"title\": tempTitle,\r\n \"displayTitle\": {\r\n line1: this.data.story.displayTitle.line1,\r\n line2: this.data.story.displayTitle.line2,\r\n },\r\n \"categoryId\": this.data.story.categoryId, \r\n \"description\": this.data.story.description,\r\n \"configurationId\": null, \r\n \"groupId\": this.data.story.groupId, \r\n \"isVisible\": !this.data.story.isHidden, \r\n \"isNew\": this.data.story.isNew, \r\n \"isInteractive\": this.data.story.isInteractive, \r\n }\r\n\r\n this.gallaryService.updateStory(payload).subscribe((res: any) => {\r\n this.showToastMessage(res.message, false);\r\n this.isDataLoading = false;\r\n if (this.validateKeys.category) {\r\n const index = this.data.categories.findIndex(e => e.categoryId === this.data.story.categoryId);\r\n if (index > -1) {\r\n this.data.story.category = this.data.categories[index].name;\r\n this.data.story.categoryClass = this.data.categories[index].categoryClass;\r\n }\r\n }\r\n this.dialogRef.close(this.data.story);\r\n }, (err) => {\r\n this.isDataLoading = false;\r\n this.showToastMessage(err.error.message);\r\n });\r\n }\r\n }\r\n\r\n onCancel() {\r\n this.dialogRef.close(false);\r\n }\r\n\r\n showToastMessage(message, isError = true, duration= 3000) {\r\n this._snackBar.open(message, '', {\r\n\t\t\tduration,\r\n\t\t\tpanelClass: isError ? 'error' : 'success',\r\n\t\t\tverticalPosition: 'top',\r\n\t\t\thorizontalPosition: 'right'\r\n\t\t})\r\n }\r\n}\r\n","module.exports = \"\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcmMvYXBwL2dhbGxlcnkvdmlzaXQtcmVhc29uLW92ZXJsYXkvdmlzaXQtcmVhc29uLW92ZXJsYXkuY29tcG9uZW50LmNzcyJ9 */\"","module.exports = \"\"","import { Component, Inject, OnInit } from '@angular/core';\r\nimport { FormGroup, FormBuilder, Validators } from '@angular/forms';\r\nimport { MAT_DIALOG_DATA, MatDialogRef, MatSnackBar } from '@angular/material';\r\nimport { ContactComponent } from 'src/app/core/contact/contact.component';\r\nimport { GalleryService } from '../gallery.service';\r\nimport { GoogleAnalyticsService } from 'src/app/services/google-analytics.service';\r\nimport { GAIndex } from 'src/app/shared/enum/enum';\r\n\r\n@Component({\r\n selector: 'app-visit-reason-overlay',\r\n templateUrl: './visit-reason-overlay.component.html',\r\n styleUrls: ['./visit-reason-overlay.component.css'],\r\n providers: [GalleryService]\r\n})\r\nexport class VisitReasonOverlayComponent {\r\n visitReasonForm: FormGroup;\r\n isFormSubmitted = false;\r\n isSubmitting = false;\r\n userInfo = null;\r\n public purposeList = [{\r\n name: 'Campus Presentation',\r\n slug: 'campus_presentation'\r\n }, {\r\n name: 'Client Demo',\r\n slug: 'client_demo'\r\n }, {\r\n name: 'Conference',\r\n slug: 'conference'\r\n }, {\r\n name: 'Internal Demo',\r\n slug: 'internal_demo'\r\n }, {\r\n name: 'RFP',\r\n slug: 'rfp'\r\n }\r\n /* , {\r\n name: 'Testing',\r\n slug: 'testing'\r\n } */\r\n , {\r\n name: 'Other',\r\n slug: 'other'\r\n }];\r\n constructor(\r\n private formBuilder: FormBuilder,\r\n @Inject(MAT_DIALOG_DATA) public data: any,\r\n public dialogRef: MatDialogRef,\r\n public gallaryService: GalleryService,\r\n private _gaService: GoogleAnalyticsService,\r\n private _snackBar: MatSnackBar) {\r\n this.userInfo = data.userInfo;\r\n this.visitReasonForm = formBuilder.group({\r\n purpose: [null, Validators.required],\r\n reason: ['', Validators.required],\r\n });\r\n }\r\n\r\n onSubmit() {\r\n this.isFormSubmitted = true;\r\n if (this.visitReasonForm.invalid) {\r\n return false;\r\n }\r\n const requestObj = { ...this.visitReasonForm.value, userId: this.userInfo.id };\r\n requestObj.purpose = this.purposeList.find(p => p.slug === requestObj.purpose);\r\n this.isSubmitting = true;\r\n // console.log(requestObj);\r\n this.gallaryService.setPurposeData(requestObj).subscribe((res: any) => {\r\n const GA_config = {};\r\n GA_config[GAIndex.CLIENT_NAME_OR_PURPOSE] = requestObj.reason;\r\n this._gaService.triggerEvent('Visit', 'Purpose', requestObj.purpose.name, GA_config);\r\n this.isSubmitting = false;\r\n this._snackBar.open(res.message, '', {\r\n duration: 3000,\r\n panelClass: 'success',\r\n verticalPosition: 'top',\r\n horizontalPosition: 'right'\r\n });\r\n this.dialogRef.close(requestObj);\r\n }, (err: any) => {\r\n this.dialogRef.close();\r\n this._snackBar.open(err.error.message, '', {\r\n duration: 3000,\r\n panelClass: 'error',\r\n verticalPosition: 'top',\r\n horizontalPosition: 'right'\r\n });\r\n });\r\n }\r\n}\r\n","import { DragDropModule, CDK_DRAG_CONFIG } from '@angular/cdk/drag-drop';\r\nimport { NgModule } from '@angular/core';\r\n\r\nimport {\r\n MatButtonModule,\r\n MatMenuModule,\r\n MatToolbarModule,\r\n MatIconModule,\r\n MatCardModule,\r\n MatTableModule,\r\n MatDialogModule,\r\n MatSortModule,\r\n MatPaginatorModule,\r\n MatDatepickerModule,\r\n MatNativeDateModule,\r\n MatSnackBarModule,\r\n MatTooltipModule,\r\n MatExpansionModule,\r\n MatSelectModule,\r\n MatGridListModule\r\n} from '@angular/material';\r\n\r\n// const DragConfig = {\r\n// dragStartThreshold: 0,\r\n// pointerDirectionChangeThreshold: 5,\r\n// zIndex: 100000\r\n// };\r\n\r\n@NgModule({\r\n imports: [\r\n MatButtonModule,\r\n MatMenuModule,\r\n MatToolbarModule,\r\n MatIconModule,\r\n MatCardModule,\r\n MatTableModule,\r\n MatDialogModule,\r\n MatSortModule,\r\n MatPaginatorModule,\r\n MatDatepickerModule,\r\n MatNativeDateModule,\r\n MatSnackBarModule,\r\n MatTooltipModule,\r\n MatExpansionModule,\r\n MatSelectModule,\r\n MatGridListModule,\r\n DragDropModule\r\n ],\r\n exports: [\r\n MatButtonModule,\r\n MatMenuModule,\r\n MatToolbarModule,\r\n MatIconModule,\r\n MatCardModule,\r\n MatTableModule,\r\n MatDialogModule,\r\n MatSortModule,\r\n MatPaginatorModule,\r\n MatDatepickerModule,\r\n MatNativeDateModule,\r\n MatSnackBarModule,\r\n MatTooltipModule,\r\n MatExpansionModule,\r\n MatSelectModule,\r\n MatGridListModule,\r\n DragDropModule\r\n ],\r\n // providers: [{ provide: CDK_DRAG_CONFIG, useValue: DragConfig }],\r\n})\r\nexport class MaterialModule {}","import { Pipe, PipeTransform } from '@angular/core';\r\n\r\n@Pipe({ name: 'filter' })\r\nexport class FilterPipe implements PipeTransform {\r\n transform(items: [], filterOn: string = \"\", isQuickSettingsActive = true) {\r\n // if (!items || !filterOn) {\r\n // return items;\r\n // }\r\n // return items;\r\n var filteredItem = items.filter((item) => this.applyFilter(item, filterOn, isQuickSettingsActive));\r\n if (filteredItem.length == 0) {\r\n return [-1];\r\n }\r\n return filteredItem;\r\n }\r\n\r\n getUpdatedDim(v, visibleStories, isQuickSettingsActive) {\r\n if (v.isGroup) {\r\n v.cols = 6;\r\n if (visibleStories.length != 0) {\r\n v.cols = visibleStories.length > 1 ? 6 : 3;\r\n if (visibleStories && visibleStories.length !== 0) {\r\n visibleStories.forEach((e: any, i, arr) => {\r\n e.rows = 10;\r\n e.cols = visibleStories.length > 1 ? (i === arr.length - 1 && i % 2 == 0 ? 12 : 6) : 12;\r\n return e;\r\n });\r\n }\r\n const paddingTop = 2\r\n const paddingBottom = 1\r\n v.rows = Math.ceil(visibleStories.length / 2) * 10 + paddingTop + paddingBottom + (isQuickSettingsActive ? 1 : 0);\r\n if (visibleStories.length === 0) {\r\n v.rows = 0;\r\n v.cols = 0;\r\n v.noStories = true;\r\n } else {\r\n v.noStories = false;\r\n }\r\n } else {\r\n v.rows = 0;\r\n v.cols = 0;\r\n v.noStories = true;\r\n }\r\n }\r\n }\r\n\r\n applyFilter(item, filter, isQuickSettingsActive): boolean {\r\n var foundItemInTitle = true;\r\n var foundItemInTags = true;\r\n var foundByCategory = true;\r\n\r\n // var foundByGroupName = true;\r\n var foundInGroupStoryList = true;\r\n\r\n if (item.type === 'story' && (isQuickSettingsActive || !item.isHidden)) {\r\n if ((item.title.toLowerCase().indexOf(filter.toLowerCase()) < 0)) {\r\n foundItemInTitle = false;\r\n }\r\n\r\n if ((item.category.toLowerCase().indexOf(filter.toLowerCase()) < 0)) {\r\n foundByCategory = false;\r\n }\r\n\r\n if (item.tags && item.tags.length) {\r\n var foundTags = item.tags.filter((tag) => ((tag.toLowerCase().indexOf(filter.toLowerCase()) < 0 ? false : true)));\r\n if (!foundTags || !foundTags.length) {\r\n foundItemInTags = false;\r\n }\r\n }\r\n return foundItemInTitle || foundItemInTags || foundByCategory;\r\n } else if (item.type === 'group' && (isQuickSettingsActive || !item.isHidden)) {\r\n // if ((item.name.toLowerCase().indexOf(filter.toLowerCase()) < 0) || item.stories.length == 0) {\r\n // foundByGroupName = false;\r\n // }\r\n\r\n const isTagPresent = (obj) => {\r\n if (obj.tags && obj.tags.length) {\r\n var foundTags = obj.tags.filter((tag) => ((tag.toLowerCase().indexOf(filter.toLowerCase()) < 0 ? false : true)));\r\n return (!foundTags || !foundTags.length) ? false : true;\r\n }\r\n }\r\n\r\n let storyList = item.stories.filter(obj => {\r\n return (isQuickSettingsActive || !obj.isHidden) &&\r\n (\r\n ((obj.title.toLowerCase().indexOf(filter.toLowerCase()) > -1) ? true : false) ||\r\n ((obj.category.toLowerCase().indexOf(filter.toLowerCase()) > -1) ? true : false) ||\r\n (isTagPresent(obj))\r\n )\r\n // || ((obj.tags.filter((tag) => ((tag.toLowerCase().indexOf(filter.toLowerCase()) > -1 ? true : false))).length > 0) ? true : false)\r\n });\r\n\r\n this.getUpdatedDim(item, storyList, isQuickSettingsActive);\r\n\r\n foundInGroupStoryList = storyList.length ? true : false;\r\n\r\n return foundInGroupStoryList;\r\n }\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\n\r\n@Pipe({name: 'replaceSpace'})\r\nexport class ReplacePipe implements PipeTransform {\r\n transform(value: string, strToReplace: string, replacementStr: string): string {\r\n if(!value || ! strToReplace || ! replacementStr)\r\n {\r\n return value;\r\n }\r\n return value.replace(new RegExp(strToReplace, 'g'), replacementStr);\r\n }\r\n}","import { Pipe, PipeTransform } from '@angular/core';\r\nimport { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';\r\n\r\n@Pipe({ name: 'sanitizeHtml' })\r\n\r\nexport class SanitizeHtmlPipe implements PipeTransform {\r\n\r\n constructor(private _sanitizer: DomSanitizer) { }\r\n\r\n public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {\r\n switch (type) {\r\n case 'html': return this._sanitizer.bypassSecurityTrustHtml(value);\r\n case 'style': return this._sanitizer.bypassSecurityTrustStyle(value);\r\n case 'script': return this._sanitizer.bypassSecurityTrustScript(value);\r\n case 'url': return this._sanitizer.bypassSecurityTrustUrl(value);\r\n case 'resourceUrl': return this._sanitizer.bypassSecurityTrustResourceUrl(value);\r\n default: throw new Error(`Invalid safe type specified: ${type}`);\r\n }\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\n\r\n@Pipe({ name: 'sparatorsplit' })\r\nexport class SparatorSplitPipe implements PipeTransform {\r\n transform(value: string, sparator: string, element: string, isJoin: boolean) {\r\n \tvar newValue = value.split(sparator)[(+element-1)];\r\n \tvar allWords;\r\n \tif (isJoin) {\r\n \t\tallWords = value.split(sparator);\r\n \t\tallWords.shift();\r\n \t\tnewValue = allWords.join(\" \");\r\n \t}\r\n \treturn newValue;\r\n }\r\n}\r\n","export class D3EventTimelineService {\r\n private timelineData: Array = [];\r\n private shapePosition: Array = [];\r\n years = ['1/1/2006', '1/1/2007', '1/1/2008', '1/1/2009', '1/1/2010', '1/1/2011', '1/1/2012', '1/1/2013', '1/1/2014', '1/1/2015', '1/1/2016', '1/1/2017'];\r\n getYear(index) {\r\n return this.years[index].split(\"/\")[2]\r\n }\r\n\r\n setData(timelineData, index) {\r\n this.timelineData[index] = { \"userActivities\": timelineData.userActivities };\r\n }\r\n\r\n getData(index) {\r\n return this.timelineData[index];\r\n }\r\n\r\n createData(index, shapes, shapesColor, timelineDetails) {\r\n const { shapeTextMessage, toolTipMessage, displayeMessageAt, timelineIndex, shapeSize, shapeTextColor } = timelineDetails;\r\n let userActivities = [];\r\n for (let activityIndex = 1; activityIndex < (this.years.length - 1); activityIndex++) {\r\n // var randomNumber = getRndInteger(7, 16);\r\n let shapePosition = Math.floor(Math.random() * shapes.length);\r\n userActivities.push({\r\n date: (Math.floor(Math.random() * 12) + 1) + '/1/' + this.getYear(activityIndex), //month/day/year years[activityIndex]\r\n shapeType: shapes[shapePosition],\r\n colorId: shapes.length == 1 ? Math.floor(Math.random() * this.getRandom(0, shapesColor.length)) : shapePosition,\r\n shapeText: shapeTextMessage ? shapeTextMessage[activityIndex % shapeTextMessage.length] : null,\r\n shapeTextColor: shapeTextColor ? shapeTextColor : null,\r\n shapeSize,\r\n showTooltip: ((displayeMessageAt.find((element) => { return element === activityIndex }) === activityIndex) &&\r\n (timelineIndex === index)) ? toolTipMessage[activityIndex % toolTipMessage.length] : null,\r\n })\r\n }\r\n this.timelineData[index] = { \"userActivities\": userActivities.slice() };\r\n }\r\n\r\n getRandom(min, max) {\r\n return Math.floor(Math.random() * (max - min + 1) + min);\r\n }\r\n\r\n setShapePosition(value) {\r\n this.shapePosition = value;\r\n }\r\n\r\n getShapePosition() {\r\n return this.shapePosition.slice();\r\n }\r\n}\r\n","import { Injectable, Inject } from '@angular/core';\r\nimport { environment } from 'src/environments/environment';\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { AuthService } from '../shared/auth.service';\r\nimport { GAIndex, UserType, GAUserType } from 'src/app/shared/enum/enum';\r\n\r\n// Learn More: https://developers.google.com/analytics/devguides/collection/analyticsjs/command-queue-reference\r\n// https://developers.google.com/analytics/devguides/collection/gtagjs/events\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class GoogleAnalyticsService {\r\n\r\n private _ga = null;\r\n\r\n constructor(\r\n @Inject(DOCUMENT) private document: Document,\r\n private _authService: AuthService\r\n ) {\r\n const script = document.createElement('script');\r\n script.async = true;\r\n script.src = 'https://www.googletagmanager.com/gtag/js?id=' + environment.google_analytics_ID;\r\n this.document.head.prepend(script);\r\n\r\n window['dataLayer'] = window['dataLayer'] || [];\r\n this._ga = function () {\r\n window['dataLayer'].push(arguments);\r\n };\r\n // this._ga('config', environment.google_analytics_ID);\r\n this._ga('js', new Date());\r\n }\r\n\r\n public notifyPageView(route) {\r\n const config = {\r\n 'page_title': `${this.document.title} | ${route.slice(route.lastIndexOf('/') + 1)}`,\r\n 'page_path': route\r\n };\r\n this._ga('config', environment.google_analytics_ID, config);\r\n }\r\n\r\n public triggerEvent(action, category = 'default', label = 'default', data = null) {\r\n const userData: any = this._authService.getUser();\r\n const config: any = {\r\n 'event_category': category,\r\n 'event_label': label,\r\n };\r\n if (userData) {\r\n if (userData.type === UserType.ZS) {\r\n config[GAIndex.EMAIL_ID] = userData.emailId;\r\n config[GAIndex.CAPABILITY_GROUP] = userData.capabilityGroup;\r\n config[GAIndex.DEPARTMENT] = userData.department;\r\n }\r\n config[GAIndex.NAME] = userData.name;\r\n // tslint:disable-next-line: max-line-length\r\n config[GAIndex.USER_TYPE] = (userData.type === UserType.ADMIN) ? GAUserType.ADMIN : ((userData.type === UserType.ZS) ? GAUserType.ZS : GAUserType.NON_ZS);\r\n }\r\n // console.log('event', action, {...config, ...data}, userData);\r\n this._ga('event', action, {...config, ...data});\r\n }\r\n}\r\n","export class D3CustomShapesService {\r\n mathPI = Math.PI;\r\n tau$4 = 2 * this.mathPI;\r\n ka = 0.89081309152928522810;\r\n kr = Math.sin(this.mathPI / 10) / Math.sin(7 * this.mathPI / 10);\r\n kx = Math.sin(this.tau$4 / 10) * this.kr;\r\n ky = -Math.cos(this.tau$4 / 10) * this.kr;\r\n sqrt3 = Math.sqrt(3);\r\n circumradiusCoeff = 1 / 10 * Math.sqrt(50 + 10 * Math.sqrt(5)); \r\n\r\n flowShapes = null;\r\n pathActions = null;\r\n\r\n constructor() {\r\n this.initPathsActions();\r\n this.initShapes();\r\n }\r\n\r\n initPathsActions() {\r\n this.pathActions = {\r\n moveTo: (x, y) => {\r\n return \"M\" + x + \", \" + y;\r\n },\r\n lineTo: (x, y) => {\r\n return \"L\" + x + \", \" + y;\r\n },\r\n closePath: () => {\r\n return \"Z\";\r\n }\r\n }\r\n }\r\n\r\n initShapes() {\r\n this.flowShapes = {\r\n square: (size) => {\r\n let r = Math.sqrt(size) / 2;\r\n return \"M\" + -r + \",\" + -r + \"L\" + r + \",\" + -r + \" \" + r + \",\" + r + \" \" + -r + \",\" + r + \"Z\";\r\n },\r\n circle: (size) => {\r\n let r = Math.sqrt(size / Math.PI);\r\n return \"M0,\" + r + \"A\" + r + \",\" + r + \" 0 1,1 0,\" + -r + \"A\" + r + \",\" + r + \" 0 1,1 0,\" + r + \"Z\";\r\n },\r\n cross: (size) => {\r\n let r = Math.sqrt(size / 5) / 2;\r\n return \"M\" + -3 * r + \",\" + -r + \"H\" + -r + \"V\" + -3 * r + \"H\" + r + \"V\" + -r + \"H\" + 3 * r + \"V\" + r + \"H\" + r + \"V\" + 3 * r + \"H\" + -r + \"V\" + r + \"H\" + -3 * r + \"Z\";\r\n },\r\n hexagoan: (size) => {\r\n let t = this.tau$4 / 12;\r\n let num = 2 * size;\r\n let denom = 3 * Math.sqrt(3);\r\n let s = Math.sqrt(num / denom);\r\n let R = s;\r\n let points = this.rotatePoint(R, 0, t);\r\n let path = this.pathActions.moveTo(points[0], points[1]);\r\n\r\n for (let i = 0; i < 6; ++i) {\r\n let a = this.tau$4 * i / 6;\r\n let x = Math.cos(a) * R;\r\n let y = Math.sin(a) * R;\r\n points = this.rotatePoint(x, y, t);\r\n path += this.pathActions.lineTo(points[0], points[1]);\r\n\r\n }\r\n\r\n path += this.pathActions.closePath();\r\n return path;\r\n\r\n },\r\n star: (size)=> {\r\n let r = Math.sqrt(size * this.ka),\r\n x = this.kx * r,\r\n y = this.ky * r;\r\n // context.moveTo(0, -r);\r\n let path = \"M0,\" + -r;\r\n path += \"L\" + x + \", \" + y;\r\n // context.lineTo(x, y);\r\n for (let i = 1; i < 5; ++i) {\r\n let a = this.tau$4 * i / 5,\r\n c = Math.cos(a),\r\n s = Math.sin(a);\r\n path += \"L\" + (s * r) + \", \" + (-c * r);\r\n path += \"L\" + (c * x - s * y) + \", \" + (s * x + c * y);\r\n }\r\n path += \"Z\";\r\n return path;\r\n },\r\n pentagon: (size) => {\r\n\r\n let s = this.sideLength(size);\r\n let R = this.circumradius(s);\r\n let theta = -this.tau$4 / 4; // Rotate 1/4 turn back so the shape is oriented with a point upward.\r\n\r\n let points = this.rotatePoint(R, 0, theta);\r\n let path = \"M\" + points[0] + \", \" + points[1];\r\n\r\n for (let i = 0; i < 5; ++i) {\r\n let a = this.tau$4 * i / 5;\r\n let x = Math.cos(a) * R;\r\n let y = Math.sin(a) * R;\r\n points = this.rotatePoint(x, y, theta);\r\n path += \"L\" + points[0] + \", \" + points[1];\r\n\r\n }\r\n path += \"Z\";\r\n return path;\r\n },\r\n triangleDown: (size) => {\r\n let y = -Math.sqrt(size / (this.sqrt3 * 3));\r\n let path = this.pathActions.moveTo(0, -y * 2);\r\n path += this.pathActions.lineTo(-this.sqrt3 * y, y);\r\n path += this.pathActions.lineTo(this.sqrt3 * y, y);\r\n path += this.pathActions.closePath();\r\n return path;\r\n },\r\n triangleLeft: (size) => {\r\n let x = -Math.sqrt(size / (this.sqrt3 * 3));\r\n let path = this.pathActions.moveTo(x * 2, 0);\r\n path += this.pathActions.lineTo(-x, -this.sqrt3 * x);\r\n path += this.pathActions.lineTo(-x, this.sqrt3 * x);\r\n path += this.pathActions.closePath()\r\n return path;\r\n\r\n },\r\n triangleRight: (size) => {\r\n let x = -Math.sqrt(size / (this.sqrt3 * 3));\r\n let path = this.pathActions.moveTo(-x * 2, 0);\r\n path += this.pathActions.lineTo(x, -this.sqrt3 * x);\r\n path += this.pathActions.lineTo(x, this.sqrt3 * x);\r\n path += this.pathActions.closePath()\r\n return path;\r\n }\r\n\r\n }\r\n }\r\n\r\n circumradius(side) {\r\n return side * this.circumradiusCoeff;\r\n }\r\n\r\n sideLength(area) {\r\n let num = 4 * area;\r\n let denom = Math.sqrt(5 * (5 + 2 * Math.sqrt(5)));\r\n return Math.sqrt(num / denom);\r\n }\r\n\r\n rotatePoint(x, y, theta) {\r\n return [\r\n Math.cos(theta) * x + -Math.sin(theta) * y,\r\n Math.sin(theta) * x + Math.cos(theta) * y\r\n ];\r\n }\r\n\r\n getShapeCoordinates(shapeType, size) {\r\n return this.flowShapes[shapeType](size);\r\n }\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { Observable } from 'rxjs';\r\nimport { HttpClient, HttpHeaders } from '@angular/common/http';\r\nimport { AuthService } from '../shared/auth.service';\r\nimport { Router } from '@angular/router';\r\nimport { MatSnackBar } from '@angular/material';\r\nimport { environment } from 'src/environments/environment';\r\nimport { delay } from 'rxjs/operators';\r\n\r\n@Injectable()\r\nexport class HttpWrapperService {\r\n constructor(\r\n private http: HttpClient,\r\n private _authService: AuthService,\r\n private _router: Router,\r\n private _snackBar: MatSnackBar\r\n ) { }\r\n\r\n get(url: string, options?: any): Observable {\r\n return this.request('GET', url, options);\r\n }\r\n\r\n post(url: string, data: any, options: any = {}): Observable {\r\n options = { ...options, body: data };\r\n return this.request('POST', url, options);\r\n }\r\n\r\n put(url: string, data: any, options?: any): Observable {\r\n let reqBody = { body: data };\r\n if (options) {\r\n reqBody = { ...options };\r\n }\r\n return this.request('PUT', url, reqBody);\r\n }\r\n\r\n delete(url: string, data: any, options?: any): Observable {\r\n let reqBody = { body: data };\r\n if (options) {\r\n reqBody = { ...options };\r\n }\r\n options = { ...options, body: data };\r\n return this.request('DELETE', url, reqBody);\r\n }\r\n\r\n private request(method: string, url: string, options: any = {}) {\r\n // TODO:SPM Mock Data\r\n /*if (!environment.production) {\r\n let res = null;\r\n console.log(url);\r\n\r\n if (url.endsWith('refresh-token')) {\r\n // tslint:disable-next-line: max-line-length\r\n res = { data: { userDetails: { userId: '1', type: 'custom', role: 'admin', name: 'admin' }, token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9c&peyJ1c2VySWQiOiIxIiwidHlwZSI6ImN1c3RvbSIsInJvbGUiOiJhZG1pbiIsIm5hbWUiOiJhZG1pbiIsImlhdCI6MTYwMDkzMzIwMywiZXhwIjoxNjAwOTQ3NjAzfQG@C11XIexyQUr-U7k3_wvoeM7ZuyKlaMttQ6e05r0pesXI', _s: { 'CloudFront-Policy': 'eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cCo6Ly9kMXo0b2Q4cXN5MnZ0Zy5jbG91ZGZyb250Lm5ldC8qIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNjAxMDIxMDQzMDQxfX19XX0_;path=/;', 'CloudFront-Key-Pair-Id': 'APKAJVB2VOTEGBAF6F4A;path=/;', 'CloudFront-Signature': 'sUA81C7eqMzcn3FW8wuIAYGwQdZjrSUrfxK0dDHs8cHcsgXAu8wmAfgD8KtxHlKfbjvJqgR2CoLXj3Hg8S93g2~~dyYGiibxuhHJe-8WrWGlwMGd1H-B434QXuo1GXTrrky76XdD7CM1MwicSeSWQxVwc0~ssrdS28~r~C1ZFBmhEgTi5eykcB6UHtpdYNyp4si2FG8soj9Hy4R0myTaAAO0bCidzwDlw2QwC62oNB6N9DFy~41KK~BH18H0bAT8bCFyj7-l9gOb4Xpjh0ClY2wmdfG5PO2Xc7bQR85rMK6SgTXgKs0QwkT1civRUk5jxSeI8ncPH0K63N7SIb5xUQ__;path=/;' } }, message: 'Refresh completed' };\r\n }\r\n else if(url.endsWith('metadata-details')){\r\n res = {\"data\":{\"promoVideoUrl\":\"https://aigallery.demo.zsservices.com/stories/public/videos/ai-gallery-video.mp4\"},\"message\":\"Metadata details fetched successfully\"}\r\n }\r\n else if(url.endsWith('categories')){\r\n res = {\"data\":[{\"categoryId\":\"4\",\"name\":\"AI in Cross-enterprise solutions\",\"color\":\"#D4F8E7\",\"sequenceOrder\":4,\"createdAt\":null,\"createdBy\":null,\"updatedAt\":\"1634714898000\",\"updatedBy\":\"1\"},{\"categoryId\":\"3\",\"name\":\"AI in Personalization\",\"color\":\"#FFEAD5\",\"sequenceOrder\":3,\"createdAt\":null,\"createdBy\":null,\"updatedAt\":\"1655800314000\",\"updatedBy\":\"1\"},{\"categoryId\":\"1\",\"name\":\"AI in Commercial Planning\",\"color\":\"#DDEAFF\",\"sequenceOrder\":1,\"createdAt\":null,\"createdBy\":null,\"updatedAt\":\"1655816735000\",\"updatedBy\":\"1\"},{\"categoryId\":\"2\",\"name\":\"AI in Trial design and operations \",\"color\":\"#FFE5E5\",\"sequenceOrder\":2,\"createdAt\":null,\"createdBy\":null,\"updatedAt\":\"1655817451000\",\"updatedBy\":\"1\"}],\"message\":\"All categories fetched successfully\"}\r\n }\r\n else if(url.endsWith('tiles')){\r\n res = {\"data\":[{\"id\":\"21\",\"type\":\"story\",\"categoryId\":\"3\",\"sequenceOrder\":21,\"endpoint\":null,\"title\":\"Atlas Intelligence Innovation\",\"description\":\"A package of proprietary machine learning models specifically trained to decompose consumer decision -making and provide the \\\"why\\\" behind the \\\"what\\\"\",\"url\":\"atlas-intelligence-kraft\",\"isNew\":true,\"isInteractive\":true,\"isVisible\":true,\"groupId\":null,\"createdAt\":\"1655796748446\",\"createdBy\":\"1\",\"updatedAt\":\"1655800314000\",\"updatedBy\":\"1\",\"isHorizontalView\":true,\"tags\":[\"#test\"],\"displayTitle\":{\"line1\":\"Atlas Intelligence\",\"line2\":\"Innovation\"},\"viewType\":\"business\",\"categoryName\":\"AI in Personalization\"},{\"id\":\"20\",\"type\":\"story\",\"categoryId\":\"2\",\"sequenceOrder\":20,\"endpoint\":\"https://5n6obeli61.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"Advanced Market Intelligence\",\"description\":\"Tool to analyses category based opportunities, trending topics, brand performances and its comparisons, also analyses hierarchy of brands from least to most granular level\",\"url\":\"advanced_market_intelligence\",\"isNew\":true,\"isInteractive\":false,\"isVisible\":false,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655827844000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\",\"#mattress\"],\"displayTitle\":{\"line1\":\"Advanced Market \",\"line2\":\"Intelligence\"},\"viewType\":\"data_science\",\"categoryName\":\"AI in Cross-enterprise solutions\"},{\"id\":\"19\",\"type\":\"story\",\"categoryId\":\"3\",\"sequenceOrder\":19,\"endpoint\":\"https://oft3hw5rqi.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"Personalize.AI \",\"description\":\"AI-powered SaaS solution in the area of personalization, used to help companies drive revenue growth from personalized, member level product offer recommendations\",\"url\":\"personalize_ai\",\"isNew\":true,\"isInteractive\":true,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655827844000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\"],\"displayTitle\":{\"line1\":\"Personalize.AI \",\"line2\":\"\"},\"viewType\":\"data_science\",\"categoryName\":\"AI in Cross-enterprise solutions\"},{\"id\":\"22\",\"type\":\"story\",\"categoryId\":\"1\",\"sequenceOrder\":22,\"endpoint\":\"patient-radar\",\"title\":\"Patient Radar \",\"description\":\"An Enterprise grade application to help develop Machine Learning models which help clients predict events in patient journey using Real World Data\",\"url\":\"patient_radar\",\"isNew\":true,\"isInteractive\":true,\"isVisible\":false,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655827844000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\"],\"displayTitle\":{\"line1\":\"Patient Radar\",\"line2\":\"\"},\"viewType\":\"data_science\",\"categoryName\":\"AI in Commercial Planning\"},{\"id\":\"18\",\"type\":\"story\",\"categoryId\":\"3\",\"sequenceOrder\":18,\"endpoint\":null,\"title\":\"Clinical Trial Enrollment Modeling and Predictions\",\"description\":\"Finding right sites to create enrolment plans for clinical trials by Historical Benchmarking, Distribution Parameters, Probabilistic Measurements, Tracking and Reforecasting\",\"url\":\"ctemp\",\"isNew\":true,\"isInteractive\":false,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655827844000\",\"updatedBy\":\"1\",\"isHorizontalView\":true,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\"],\"displayTitle\":{\"line1\":\"Clinical Trial\",\"line2\":\"Enrollment Modeling and Predictions\"},\"viewType\":\"business\",\"categoryName\":\"AI in Cross-enterprise solutions\"},{\"id\":\"17\",\"type\":\"story\",\"categoryId\":\"1\",\"sequenceOrder\":17,\"endpoint\":\"https://ybujwuzuh3.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"Adaptive Attribute-basedOffers\",\"description\":\"Personalizing hotel recommendation and marketing offers by utilizing customer attribute level willingness-to-pay through multi-step Bayesian modeling\",\"url\":\"adaptive_attribute_based_offers\",\"isNew\":false,\"isInteractive\":false,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655817804000\",\"updatedBy\":\"1\",\"isHorizontalView\":true,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\",\"#Segmentation\"],\"displayTitle\":{\"line1\":\"Adaptive \",\"line2\":\"Attribute-basedOffers\"},\"viewType\":\"business\",\"categoryName\":\"AI in Personalization\"},{\"id\":\"16\",\"type\":\"story\",\"categoryId\":\"3\",\"sequenceOrder\":16,\"endpoint\":\"https://7ampyulxtg.execute-api.us-east-1.amazonaws.com/prod/\",\"title\":\"Field Coaching\",\"description\":\"Extract meaningful insights by uncovering patterns from unstructured text using NLP\",\"url\":\"field_coaching\",\"isNew\":false,\"isInteractive\":true,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655816735000\",\"updatedBy\":\"1\",\"isHorizontalView\":true,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\"],\"displayTitle\":{\"line1\":\"Field \",\"line2\":\"Coaching\"},\"viewType\":\"data_science\",\"categoryName\":\"AI in Commercial Planning\"},{\"id\":\"15\",\"type\":\"story\",\"categoryId\":\"4\",\"sequenceOrder\":15,\"endpoint\":\"https://ks3i1fsdud.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"AI QNA\",\"description\":\"ML-powered segmentation using millions of secondary data points vs. pure-play primary MR\",\"url\":\"aiqna\",\"isNew\":false,\"isInteractive\":true,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655827844000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\",\"#Segmentation\"],\"displayTitle\":{\"line1\":\"AI \",\"line2\":\"Q&A\"},\"viewType\":\"data_science\",\"categoryName\":\"AI in Commercial Planning\"},{\"id\":\"14\",\"type\":\"story\",\"categoryId\":\"4\",\"sequenceOrder\":14,\"endpoint\":\"https://u2bewys4kj.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"Plug-N-Predict Telecom\",\"description\":\"An evolutionary algorithm-based high-throughput feature discovery pipeline for customer event prediction (telecom)\",\"url\":\"plug_n_predict_telecom\",\"isNew\":false,\"isInteractive\":false,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655817512000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\",\"#Evolutionary learning\"],\"displayTitle\":{\"line1\":\"Plug-N-Predict \",\"line2\":\"Telecom\"},\"viewType\":\"business\",\"categoryName\":\"AI in Cross-enterprise solutions\"},{\"id\":\"13\",\"type\":\"story\",\"categoryId\":\"4\",\"sequenceOrder\":13,\"endpoint\":\"https://wf1wz28u36.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"Plug-N-Predict RWD\",\"description\":\"An evolutionary algorithm-based high-throughput feature discovery pipeline for customer event prediction (life science)\",\"url\":\"plug_n_predict_rwd\",\"isNew\":false,\"isInteractive\":false,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655817519000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\",\"#Evolutionary learning\"],\"displayTitle\":{\"line1\":\"Plug-N-Predict \",\"line2\":\"RWD\"},\"viewType\":\"business\",\"categoryName\":\"AI in Cross-enterprise solutions\"},{\"id\":\"12\",\"type\":\"story\",\"categoryId\":\"2\",\"sequenceOrder\":12,\"endpoint\":\"https://s1kok1cvn7.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"AI-powered Lead Qualification (High Tech)\",\"description\":\"Enhancing sales effectiveness through embedded ML models for intelligent lead qualification\",\"url\":\"leakage_prediction\",\"isNew\":false,\"isInteractive\":false,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655827844000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\"],\"displayTitle\":{\"line1\":\"AI-powered \",\"line2\":\"Lead Qualification (High Tech)\"},\"viewType\":\"business\",\"categoryName\":\"AI in Commercial Planning\"},{\"id\":\"11\",\"type\":\"story\",\"categoryId\":\"1\",\"sequenceOrder\":11,\"endpoint\":\"https://ir45b19jq0.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"Text Analytics\",\"description\":\"Extract meaningful insights by uncovering patterns from unstructured text using NLP\",\"url\":\"text_analytics\",\"isNew\":false,\"isInteractive\":false,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655816857000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\",\"#NLP\",\"#DQM\"],\"displayTitle\":{\"line1\":\"Text \",\"line2\":\"Analytics\"},\"viewType\":\"business\",\"categoryName\":\"AI in Cross-enterprise solutions\"},{\"id\":\"10\",\"type\":\"story\",\"categoryId\":\"3\",\"sequenceOrder\":10,\"endpoint\":\"https://573xwufuq7.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"Design Intelligence\",\"description\":\"NLP toolkit to efficiently uncover trial design insights from large-scale unstructured text (e.g. CT.gov, PubMed)\",\"url\":\"design_intelligence\",\"isNew\":false,\"isInteractive\":false,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655817638000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\"],\"displayTitle\":{\"line1\":\"Design \",\"line2\":\"Intelligence\"},\"viewType\":\"data_science\",\"categoryName\":\"AI in Trial design and operations\"},{\"id\":\"9\",\"type\":\"story\",\"categoryId\":\"1\",\"sequenceOrder\":9,\"endpoint\":\"https://teo8hq9zx8.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"Driverless Forecasting\",\"description\":\"A suite of statistical and machine learning algorithms to increase short-term SKU forecasting agility and accuracy\",\"url\":\"driverless_forecasting\",\"isNew\":false,\"isInteractive\":true,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655816735000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#nlp\",\"#Deep Learning\",\"#Forecasting\"],\"displayTitle\":{\"line1\":\"Driverless \",\"line2\":\"Forecasting\"},\"viewType\":\"data_science\",\"categoryName\":\"AI in Commercial Planning\"},{\"id\":\"8\",\"type\":\"story\",\"categoryId\":\"1\",\"sequenceOrder\":8,\"endpoint\":\"https://j8mnlpigv1.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"Dynamic targeting\",\"description\":\"A mobile application to assist field personnel to precisely target key customers leveraging ensemble ML models\",\"url\":\"dynamic_targeting\",\"isNew\":false,\"isInteractive\":false,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655816843000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\",\"#Deep Learning\",\"#Optimization\"],\"displayTitle\":{\"line1\":\"Dynamic \",\"line2\":\"targeting\"},\"viewType\":\"data_science\",\"categoryName\":\"AI in Personalization\"},{\"id\":\"7\",\"type\":\"story\",\"categoryId\":\"3\",\"sequenceOrder\":7,\"endpoint\":\"https://th96b4tell.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"Personalized Analytics\",\"description\":\"Intelligent assistant to provide personalized insights for field personnel and brand teams; Leverages conversational UIs – NLU & NLG, Recommender systems, and pattern recognition modules in high dimensional datasets\",\"url\":\"personalized_analytics\",\"isNew\":false,\"isInteractive\":true,\"isVisible\":false,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655800314000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\"],\"displayTitle\":{\"line1\":\"Personalized \",\"line2\":\"Analytics\"},\"viewType\":\"data_science\",\"categoryName\":\"AI in Personalization\"},{\"id\":\"6\",\"type\":\"story\",\"categoryId\":\"3\",\"sequenceOrder\":6,\"endpoint\":\"https://2wibgu9hu5.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"Computer Vision for Game-Play Analytics\",\"description\":\"A novel masked CNN-based computer vision module to enable real-time blackjack game-play insights\",\"url\":\"computer_vision_for_gaming\",\"isNew\":false,\"isInteractive\":false,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655827844000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\",\"#Deep Learning\",\"#Vision\"],\"displayTitle\":{\"line1\":\"Computer Vision \",\"line2\":\"for Game-Play Analytics\"},\"viewType\":\"data_science\",\"categoryName\":\"AI in Personalization\"},{\"id\":\"5\",\"type\":\"story\",\"categoryId\":\"3\",\"sequenceOrder\":5,\"endpoint\":\"https://tmh2erm2gg.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"Next Best Action Platform\",\"description\":\"A system that personalizes channel, content, and cadence to enhance individual customer engagement - powered by a hybrid architecture of convolutional neural networks and genetic algorithm\",\"url\":\"next_best_action_platform\",\"isNew\":false,\"isInteractive\":false,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655800314000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\"],\"displayTitle\":{\"line1\":\"Next Best Action \",\"line2\":\"Platform\"},\"viewType\":\"data_science\",\"categoryName\":\"AI in Personalization\"},{\"id\":\"4\",\"type\":\"story\",\"categoryId\":\"1\",\"sequenceOrder\":4,\"endpoint\":\"https://wm20nlti5d.execute-api.us-east-1.amazonaws.com/prod/\",\"title\":\"Audio Analytics\",\"description\":\"Finding Insights by analyzing and understanding audio based conversations\",\"url\":\"audio_analytics\",\"isNew\":false,\"isInteractive\":true,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655817850000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\"],\"displayTitle\":{\"line1\":\"Audio \",\"line2\":\"Analytics\"},\"viewType\":\"data_science\",\"categoryName\":\"AI in Cross-enterprise solutions\"},{\"id\":\"3\",\"type\":\"story\",\"categoryId\":\"2\",\"sequenceOrder\":3,\"endpoint\":\"https://bz4ygv7iob.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"Launch Prediction using unstructured data analysis\",\"description\":\"Markov models to predict clinical trial phase transition probabilities for pipeline molecules\",\"url\":\"launch_prediction_using_unstructured_data_analysis\",\"isNew\":false,\"isInteractive\":true,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655817451000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\",\"#State-space modelling\"],\"displayTitle\":{\"line1\":\"Launch Prediction \",\"line2\":\"using unstructureddata analysis\"},\"viewType\":\"data_science\",\"categoryName\":\"AI in Commercial Planning\"},{\"id\":\"2\",\"type\":\"story\",\"categoryId\":\"2\",\"sequenceOrder\":2,\"endpoint\":\"https://aymgbwcvbl.execute-api.us-east-1.amazonaws.com/prod\",\"title\":\"Agile Launch Analytics\",\"description\":\"Agile key driver analytics platform to maximize launch performance (Hierarchical Bayesian models)\",\"url\":\"agile_launch_analytics\",\"isNew\":false,\"isInteractive\":false,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655817451000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\",\"#Driver Analysis\"],\"displayTitle\":{\"line1\":\"Agile \",\"line2\":\"Launch Analytics\"},\"viewType\":\"data_science\",\"categoryName\":\"AI in Commercial Planning\"},{\"id\":\"1\",\"type\":\"story\",\"categoryId\":\"3\",\"sequenceOrder\":1,\"endpoint\":\"https://69upkoo9q4.execute-api.us-east-1.amazonaws.com/prod/\",\"title\":\"Video Analytics\",\"description\":\"Finding Insights by analyzing and understanding video based conversations\",\"url\":\"video_analytics\",\"isNew\":false,\"isInteractive\":false,\"isVisible\":true,\"groupId\":null,\"createdAt\":null,\"createdBy\":\"1\",\"updatedAt\":\"1655817566000\",\"updatedBy\":\"1\",\"isHorizontalView\":false,\"tags\":[\"#machine-learning\",\"#AI\",\"#gnome\",\"#nlp\"],\"displayTitle\":{\"line1\":\"Video \",\"line2\":\"Analytics\"},\"viewType\":\"data_science\",\"categoryName\":\"AI in Cross-enterprise solutions\"}],\"message\":\"All stories and groups fetched successfully\"}\r\n }\r\n else if(url.endsWith('login')){\r\n res = {\"data\":{\"userDetails\":{\"userId\":\"1\",\"type\":\"custom\",\"role\":\"admin\",\"name\":\"admin\"},\"token\":\"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9J&OeyJ1c2VySWQiOiIxIiwidHlwZSI6ImN1c3RvbSIsInJvbGUiOiJhZG1pbiIsIm5hbWUiOiJhZG1pbiIsImlhdCI6MTY2NjA3NjU0MywiZXhwIjoxNjY2MTYyOTQzfQs@Vu7XoINsgaVoq5_gNmvzRTXwYloMpeEWdUyZXr7_ysnQ\",\"_s\":{\"CloudFront-Policy\":\"eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cCo6Ly9haWdhbGxlcnkuZGVtby56c3NlcnZpY2VzLmNvbS8qIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNjY2MTY0MzgyOTk4fX19XX0_;path=/;\",\"CloudFront-Key-Pair-Id\":\"APKAI2YTWPSKCL37U7TQ;path=/;\",\"CloudFront-Signature\":\"ZdtI9xy~rBTA4hROQTQitzKi5uDXcGUg2Bo~CuGyQ8242YE~sLfycvIO22JpiKUh4jJs2kAf2LiZSplBBXwoeucQjPNf0XLvroK9k~ccD6oXKvtAkjNnaf5NVtMm25bdoFYKG7d9DOfGLMOgpVC32tJJhkBjgaO0jfAXFSA8-Boix-jPjDB0TBlrplNxB4raRwtuLjauhiNHCRABk-iC0QM3fBihzevwcIYbZW-sqPy2b~VpZWzeXCf-An073ZCCKhx9Q8jgTZ0HSOLwyp6wNG6XpER1Pddl1LoGDl4LdRGp0iUgEalCxmrlINmY6NIjYV779z9GUhCkQJGm5pEe1w__;path=/;\"}},\"message\":\"User is valid\"}\r\n }\r\n // else if(url.endsWith('patient-radar')){\r\n // res = {\"statusCode\": 200, \"data\": {\"story-url\": \"patient_radar\", \"title\": \"Patient Radar\", \"sections\": [{\"id\": \"section-1\", \"name\": \"App Demo\", \"hideSectionName\": true, \"data\": {\"visulizations\": [{\"id\": \"visualization-1\", \"title\": \"\", \"showVisulizationActions\": true, \"showWhiteBackground\": true, \"description\": null, \"interaction\": false, \"interactionData\": null, \"data-load-from-api\": false, \"widget\": [{\"id\": \"widget-1\", \"name\": \"guid-book\", \"type\": \"zs-guide-book\", \"alignCenter\": true, \"fullView\": true, \"data\": {\"htmlString\": \"
Patient Radar An enterprise grade online platform powered by advanced data science and years of deep domain knowledge
Steps - To Explore Patient Radar 1 Copy Username & password 2 Click here to explore button 3 Paste Username & Password Click here to copy username Click here to copy password \"}, \"data-load-url\": null, \"credentials\": [{\"dataLoadFromApi\": false, \"value\": \"Personalize02\", \"label\": \"Passcode\", \"slug\": \"password\"}]}]}]}}]}}\r\n // }\r\n else if(url.endsWith('patient-radar')){\r\n res = {\"statusCode\": 200,\r\n \"data\": {\"story-url\": \"patient_radar\", \"title\": \"Patient Radar\",\r\n \"sections\": [{\"id\": \"section-1\", \"name\": \"App Demo\", \"hideSectionName\": true,\r\n \"data\": {\"visulizations\": [{\"id\": \"visualization-1\", \"title\": \"\", \"showVisulizationActions\": true, \"showWhiteBackground\": true, \"description\": null, \"interaction\": false, \"interactionData\": null, \"data-load-from-api\": false,\r\n \"widget\": [{\"id\": \"widget-1\", \"name\": \"guid-book\", \"type\": \"zs-guide-book\", \"alignCenter\": true, \"fullView\": true,\r\n \"data\": {\"htmlString\": \"
Patient Radar An enterprise grade online platform powered by advanced data science and
Steps - To Explore Patient Radar 1 Copy Username & Password 2 Click here to explore button 3 Paste Username & Password Click here to copy username Click here to copy password Click here to explore
\"}, \"data-load-url\": null, \"credentials\": [{\r\n \"dataLoadFromApi\": false,\r\n \"value\": \"john.doe@zs.com\",\r\n \"label\": \"Username\",\r\n \"slug\": \"username\"\r\n },\r\n {\r\n \"dataLoadFromApi\": false,\r\n \"value\": \"p@s5w0rd\",\r\n \"label\": \"Password\",\r\n \"slug\": \"password\"\r\n }\r\n]}]}]}}]}}\r\n }\r\n else if(url.endsWith('https://oft3hw5rqi.execute-api.us-east-1.amazonaws.com/prod')){\r\n res = {\"statusCode\": 200, \"data\": {\"story-url\": \"personalize_ai\", \"title\": \"Personalized AI\", \"sections\": [{\"id\": \"section-1\", \"name\": \"App Demo\", \"hideSectionName\": true, \"data\": {\"visulizations\": [{\"id\": \"visualization-1\", \"title\": \"P.AI Tool\", \"showVisulizationActions\": true, \"showWhiteBackground\": true, \"description\": null, \"interaction\": false, \"interactionData\": null, \"data-load-from-api\": false, \"widget\": [{\"id\": \"widget-1\", \"name\": \"guid-book\", \"type\": \"zs-guide-book\", \"alignCenter\": true, \"fullView\": true, \"data\": {\"htmlString\": \"
ML & AI WORLD SMARTER, FASTER MODULAR AI AI IS RESHAPING THE WORLD Enterprise decision making is rapidly changing to exponentially faster and competitive solutions driven by modular AI
Steps - To Explore Personalize.AI 1 Copy passcode 2 Click here to explore button 3 Paste passcode Copy passcode \"}, \"data-load-url\": null, \"credentials\": [{\"dataLoadFromApi\": false, \"value\": \"Personalize02\", \"label\": \"Passcode\", \"slug\": \"password\"}]}]}]}}]}}\r\n }\r\n if (res) {\r\n return (Observable.create((observer) => {\r\n observer.next(res);\r\n observer.complete();\r\n })).pipe(delay(1000));\r\n }\r\n }*/\r\n // TODO: Mock Data END.\r\n\r\n const _token = this._authService.getToken();\r\n const _headers = new HttpHeaders().set('Authorization', _token);\r\n options = { ...options, headers: _headers };\r\n return Observable.create((observer: any) => {\r\n this.http.request(method, url, options)\r\n .subscribe(\r\n (response) => {\r\n observer.next(response);\r\n observer.complete();\r\n },\r\n (error) => {\r\n console.log('Error Resone : ', error);\r\n switch (error.status) {\r\n case 400:\r\n // TODO: handel common error.\r\n observer.error(error);\r\n observer.complete();\r\n break;\r\n case 401:\r\n // TODO: handel common error.\r\n observer.error(error);\r\n observer.complete();\r\n break;\r\n case 403:\r\n // TODO: handel common error.\r\n observer.complete();\r\n const baseRedirectURL = '/login';\r\n this._authService.removeUser();\r\n if (error.error && error.error.customMessage) {\r\n this.displayMessage(error.error.customMessage);\r\n }\r\n observer.complete();\r\n this._router.navigate([baseRedirectURL]);\r\n break;\r\n case 500:\r\n // TODO: handel common error.\r\n observer.error(error);\r\n observer.complete();\r\n break;\r\n default:\r\n // TODO: handel common error.\r\n observer.error(error);\r\n break;\r\n }\r\n });\r\n });\r\n }\r\n\r\n displayMessage(message) {\r\n this._snackBar.open(message, '', {\r\n duration: 3000,\r\n panelClass: 'error',\r\n verticalPosition: 'top',\r\n horizontalPosition: 'right'\r\n });\r\n }\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { Subject } from 'rxjs';\r\n// import { any } from './loader';\r\n@Injectable()\r\nexport class LoaderService {\r\n private loaderSubject = new Subject
();\r\n loaderState = this.loaderSubject.asObservable();\r\n constructor() { }\r\n show() {\r\n this.loaderSubject.next({ loaded: true });\r\n }\r\n hide() {\r\n this.loaderSubject.next({ loaded: false });\r\n }\r\n}\r\n","export class ShapesConfigService {\r\n flowShapes = null;\r\n constructor() {\r\n var pi$4 = Math.PI;\r\n var tau$4 = 2 * pi$4;\r\n var ka = 0.89081309152928522810,\r\n kr = Math.sin(pi$4 / 10) / Math.sin(7 * pi$4 / 10),\r\n kx = Math.sin(tau$4 / 10) * kr,\r\n ky = -Math.cos(tau$4 / 10) * kr;\r\n var sqrt3 = Math.sqrt(3);\r\n\r\n var flow_shapes = {\r\n square: function (size) {\r\n var r = Math.sqrt(size) / 2;\r\n // console.log(\"M\" + -r + \",\" + -r + \"L\" + r + \",\" + -r + \" \" + r + \",\" + r + \" \" + -r + \",\" + r + \"Z\")\r\n return \"M\" + -r + \",\" + -r + \"L\" + r + \",\" + -r + \" \" + r + \",\" + r + \" \" + -r + \",\" + r + \"Z\";\r\n },\r\n circle: function(size){\r\n var r = Math.sqrt(size / Math.PI);\r\n return \"M0,\" + r + \"A\" + r + \",\" + r + \" 0 1,1 0,\" + -r + \"A\" + r + \",\" + r + \" 0 1,1 0,\" + r + \"Z\";\r\n },\r\n cross: function (size) {\r\n var r = Math.sqrt(size / 5) / 2;\r\n return \"M\" + -3 * r + \",\" + -r + \"H\" + -r + \"V\" + -3 * r + \"H\" + r + \"V\" + -r + \"H\" + 3 * r + \"V\" + r + \"H\" + r + \"V\" + 3 * r + \"H\" + -r + \"V\" + r + \"H\" + -3 * r + \"Z\";\r\n },\r\n hexagoan: function (size) {\r\n var t = tau$4 / 12;\r\n var num = 2 * size;\r\n var denom = 3 * Math.sqrt(3);\r\n var s = Math.sqrt(num / denom);\r\n var R = s;\r\n var points = rotatePoint(R, 0, t);\r\n var path = this.moveTo(points[0], points[1]);\r\n\r\n for (var i = 0; i < 6; ++i) {\r\n var a = tau$4 * i / 6;\r\n var x = Math.cos(a) * R;\r\n var y = Math.sin(a) * R;\r\n points = rotatePoint(x, y, t);\r\n path += this.lineTo(points[0], points[1]);\r\n\r\n }\r\n\r\n path += this.closePath();\r\n return path;\r\n\r\n },\r\n star: function (size) {\r\n var r = Math.sqrt(size * ka),\r\n x = kx * r,\r\n y = ky * r;\r\n // context.moveTo(0, -r);\r\n var path = \"M0,\" + -r;\r\n path += \"L\" + x + \", \" + y;\r\n // context.lineTo(x, y);\r\n for (var i = 1; i < 5; ++i) {\r\n var a = tau$4 * i / 5,\r\n c = Math.cos(a),\r\n s = Math.sin(a);\r\n path += \"L\" + (s * r) + \", \" + (-c * r);\r\n path += \"L\" + (c * x - s * y) + \", \" + (s * x + c * y);\r\n }\r\n path += \"Z\";\r\n return path;\r\n },\r\n pentagon: function (size) {\r\n\r\n var s = sideLength(size);\r\n var R = circumradius(s);\r\n var theta = -tau$4 / 4; // Rotate 1/4 turn back so the shape is oriented with a point upward.\r\n\r\n var points = rotatePoint(R, 0, theta);\r\n var path = \"M\" + points[0] + \", \" + points[1];\r\n\r\n for (var i = 0; i < 5; ++i) {\r\n var a = tau$4 * i / 5;\r\n var x = Math.cos(a) * R;\r\n var y = Math.sin(a) * R;\r\n points = rotatePoint(x, y, theta);\r\n path += \"L\" + points[0] + \", \" + points[1];\r\n\r\n }\r\n path += \"Z\";\r\n return path;\r\n },\r\n triangleDown: function (size) {\r\n var y = -Math.sqrt(size / (sqrt3 * 3));\r\n var path = this.moveTo(0, -y * 2);\r\n path += this.lineTo(-sqrt3 * y, y);\r\n path += this.lineTo(sqrt3 * y, y);\r\n path += this.closePath();\r\n return path;\r\n },\r\n triangleLeft: function (size) {\r\n var x = -Math.sqrt(size / (sqrt3 * 3));\r\n var path = this.moveTo(x * 2, 0);\r\n path += this.lineTo(-x, -sqrt3 * x);\r\n path += this.lineTo(-x, sqrt3 * x);\r\n path += this.closePath()\r\n return path;\r\n\r\n },\r\n triangleRight: function (size) {\r\n var x = -Math.sqrt(size / (sqrt3 * 3));\r\n var path = this.moveTo(-x * 2, 0);\r\n path += this.lineTo(x, -sqrt3 * x);\r\n path += this.lineTo(x, sqrt3 * x);\r\n path += this.closePath()\r\n return path;\r\n },\r\n moveTo: function (x, y) {\r\n return \"M\" + x + \", \" + y;\r\n },\r\n lineTo: function (x, y) {\r\n return \"L\" + x + \", \" + y;\r\n },\r\n closePath: function () {\r\n return \"Z\";\r\n }\r\n\r\n }\r\n\r\n var circumradiusCoeff = 1 / 10 * Math.sqrt(50 + 10 * Math.sqrt(5)); // ~ 0.85065080835204\r\n function circumradius(side) {\r\n return side * circumradiusCoeff;\r\n }\r\n\r\n function sideLength(area) {\r\n var num = 4 * area;\r\n var denom = Math.sqrt(5 * (5 + 2 * Math.sqrt(5))); // ~ 6.881909602355868\r\n\r\n return Math.sqrt(num / denom);\r\n }\r\n\r\n function rotatePoint(x, y, theta) {\r\n return [\r\n Math.cos(theta) * x + -Math.sin(theta) * y, // x\r\n Math.sin(theta) * x + Math.cos(theta) * y, // y\r\n ];\r\n }\r\n\r\n this.flowShapes = flow_shapes;\r\n }\r\n\r\n getShapeCoordinates(shapeType, size) {\r\n return this.flowShapes[shapeType](size);\r\n }\r\n}\r\n","export class SmallClusterService {\r\n private clusterData: Array = [];\r\n\r\n createData(index, settings, count) {\r\n const { categories, width, height } = settings;\r\n this.clusterData[index] = { \"nodes\": [] };\r\n for (let subIndex = 1; subIndex < count; subIndex++) {\r\n let tempObject = {\r\n id: subIndex,\r\n type: categories\r\n };\r\n this.clusterData[index].nodes.push(tempObject);\r\n }\r\n let i = 0;\r\n let initialCircleAxis = {\r\n \"fixed\": true,\r\n id: i,\r\n x: width,\r\n y: height / 2,\r\n type: categories\r\n }\r\n this.clusterData[index].nodes.unshift(initialCircleAxis);\r\n }\r\n\r\n setData(nodeData, index) {\r\n this.clusterData[index].nodes = nodeData.nodes;\r\n }\r\n\r\n getData(index) {\r\n return this.clusterData[index];\r\n }\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { CanActivate, Router, UrlTree } from '@angular/router';\r\nimport { AuthService } from './auth.service';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class AdminAuthGuardService implements CanActivate {\r\n\r\n constructor(private _authService: AuthService, private _router: Router) { }\r\n\r\n canActivate(): boolean | UrlTree {\r\n const user = this._authService.getUser();\r\n if (user && user.isAdmin) {\r\n return true;\r\n }\r\n // return this._router.parseUrl('/gallery');\r\n return false;\r\n }\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { CanActivate, Router, UrlTree, CanActivateChild } from '@angular/router';\r\nimport { Observable } from 'rxjs';\r\nimport { AuthService } from './auth.service';\r\nimport { CookieService } from './cookie-wrapper.service';\r\nimport { DataShareService } from './data-share.service';\r\nimport { LoginService } from '../core/login/service/login.service';\r\nimport { GoogleAnalyticsService } from '../services/google-analytics.service';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class AuthGuardService implements CanActivate, CanActivateChild {\r\n\r\n constructor(\r\n private _authService: AuthService,\r\n private _router: Router,\r\n private _dataShareService: DataShareService,\r\n private _cookieService: CookieService,\r\n private _loginService: LoginService,\r\n private _gaService: GoogleAnalyticsService,\r\n ) { }\r\n\r\n canActivate(): boolean | UrlTree | Observable {\r\n // return true;\r\n const clientDetails = this._authService.getUser();\r\n if (this._cookieService.verifyCloudFrontCookie()) {\r\n if ((clientDetails && clientDetails.isAdmin) && !this._authService.getUserFromLocalStorage()) {\r\n this._loginService.logout(clientDetails.id).subscribe((d) => { });\r\n this._gaService.triggerEvent('Logout', 'Logout', 'Session Expired');\r\n const cookieExpiredMessage = 'Your session has been expired. Please login again';\r\n this._dataShareService.onCustomEvent.next({ event: 'cookiesExpired', data: cookieExpiredMessage });\r\n this._authService.removeUser();\r\n this._cookieService.clearCloudfrontCookies();\r\n return this._router.parseUrl('/login');\r\n } else {\r\n if (clientDetails) {\r\n return true;\r\n }\r\n return this._router.parseUrl('/login');\r\n }\r\n } else {\r\n if (clientDetails && clientDetails.id) {\r\n this._gaService.triggerEvent('Logout', 'Logout', 'Session Expired');\r\n const cookieExpiredMessage = 'Your session has been expired. Please login again';\r\n this._dataShareService.onCustomEvent.next({ event: 'cookiesExpired', data: cookieExpiredMessage });\r\n this._loginService.logout(clientDetails.id).subscribe((d) => { });\r\n }\r\n this._authService.removeUser();\r\n this._cookieService.clearCloudfrontCookies();\r\n // if (clientDetails && clientDetails.isAdmin) {\r\n // \treturn this._router.parseUrl('/login');\r\n // } else {\r\n return this._router.parseUrl('/login');\r\n // }\r\n }\r\n\r\n // if (this._authService.getUser()) {\r\n // \treturn true;\r\n // }\r\n // return this._router.parseUrl('/login');\r\n }\r\n\r\n canActivateChild() {\r\n return this.canActivate();\r\n }\r\n}\r\n","import { Injectable, EventEmitter, Output } from '@angular/core';\r\nimport { Subject, BehaviorSubject, Observable, timer } from 'rxjs';\r\nimport { Router } from '@angular/router';\r\nimport { UserType } from './enum/enum';\r\nimport { HttpWrapperService } from '../services/http-wrapper.service';\r\nimport { environment } from 'src/environments/environment';\r\nimport { CookieService } from './cookie-wrapper.service';\r\nimport { DataShareService } from './data-share.service';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class AuthService {\r\n\r\n private _user: any = null;\r\n private _isStoredUser = false;\r\n public onUserInfoUpate = null;\r\n private onUserInfoUpateSub: BehaviorSubject = new BehaviorSubject(this.getUser());\r\n private _tokenTimer = null;\r\n\r\n constructor(\r\n private _router: Router,\r\n private _cookieService: CookieService,\r\n private _dataShareService: DataShareService) {\r\n const _user = localStorage.getItem('user');\r\n if (_user) {\r\n this.setUser(JSON.parse(window.atob(_user)));\r\n // this._token = JSON.parse(window.atob(_user)).token;\r\n this._isStoredUser = true;\r\n }\r\n this.onUserInfoUpate = this.onUserInfoUpateSub.asObservable();\r\n }\r\n\r\n public isStoredUser() {\r\n return this._isStoredUser;\r\n }\r\n\r\n public setUser(user) {\r\n this._user = {\r\n id: user.id,\r\n emailId: user.emailId,\r\n name: user.name,\r\n type: user.type,\r\n userType: user.userType,\r\n isAdmin: user.isAdmin || false,\r\n token: user.token,\r\n capabilityGroup: (user.data && user.data.capabilityGroup) || null,\r\n department: (user.data && user.data.department) || null\r\n };\r\n if (user._s) {\r\n this._cookieService.setCloudFrontCookie(user._s);\r\n }\r\n if (user.isAdmin || (user.type === UserType.ZS)) {\r\n localStorage.setItem('user', window.btoa(JSON.stringify(this._user)));\r\n }\r\n this._tokenTimer = timer(environment.token_refresh_time).subscribe(val => {\r\n this._dataShareService.updateCustomEvent({'event': 'refresh_token', data: true});\r\n });\r\n this.onUserInfoUpateSub.next({ ...this._user });\r\n }\r\n\r\n public getUser() {\r\n if (this._user) {\r\n return { ...this._user };\r\n } else {\r\n return null;\r\n }\r\n }\r\n\r\n public getUserId() {\r\n if (this._user) {\r\n return this._user.id;\r\n } else {\r\n return null;\r\n }\r\n }\r\n\r\n public getToken() {\r\n if (this._user) {\r\n return this._user.token;\r\n } else {\r\n return '';\r\n }\r\n }\r\n\r\n public removeUser() {\r\n let isAdmin = false;\r\n if (this._user) {\r\n isAdmin = this._user.isAdmin;\r\n }\r\n this._user = null;\r\n this._isStoredUser = false;\r\n localStorage.removeItem('user');\r\n localStorage.removeItem('purpose');\r\n if (this._tokenTimer) {\r\n this._tokenTimer.unsubscribe();\r\n }\r\n this._cookieService.clearCloudfrontCookies();\r\n this.onUserInfoUpateSub.next(null);\r\n if (isAdmin) {\r\n this._router.navigate(['login', 'admin']);\r\n } else {\r\n this._router.navigate(['login']);\r\n }\r\n }\r\n\r\n public getUserFromLocalStorage() {\r\n return localStorage.getItem('user');\r\n }\r\n}\r\n","import { Directive, Output, EventEmitter, ElementRef, Input, AfterViewInit, Renderer2, OnDestroy, Inject } from '@angular/core';\r\nimport { DOCUMENT } from '@angular/common';\r\n\r\n@Directive({\r\n selector: '[appContainerScrollSpy]'\r\n})\r\nexport class ContainerScrollSpyDirective implements AfterViewInit, OnDestroy {\r\n // tslint:disable-next-line: no-output-on-prefix\r\n @Output() public onSectionChange = new EventEmitter();\r\n @Input() public spyIds = [];\r\n @Input() public scrollContainerId = '';\r\n\r\n private currentSection: string;\r\n private initPosition: any = [];\r\n private unsubscribeScroll = null;\r\n constructor(\r\n private _el: ElementRef,\r\n private renderer: Renderer2,\r\n @Inject(DOCUMENT) private document: Document) { }\r\n\r\n // ngDoCheck() {\r\n // const height = document.getElementById(this.scrollContainerId).getBoundingClientRect().height;\r\n // if (this._lastHeight !== height) {\r\n // this._lastHeight = height;\r\n // setTimeout(() => {\r\n // const offsetTop = document.getElementById(this.scrollContainerId).offsetTop;\r\n // this.initPosition.forEach(v => {\r\n // // v.position.top = scrollTop + v.element.getBoundingClientRect().top - offsetTop;\r\n // v.position.top = v.element.offsetTop - offsetTop;\r\n // });\r\n // }, 500);\r\n // }\r\n // }\r\n ngAfterViewInit() {\r\n // setTimeout(() => {\r\n this.initPosition = this.calculatePosition();\r\n // }, 0);\r\n this.unsubscribeScroll = this.renderer.listen(document.getElementById( this.scrollContainerId), 'scroll', ($e) => {\r\n const scrollTop = $e.target.scrollTop;\r\n // Add class to body on 100px scroll\r\n if (scrollTop >= 100 && !this.document.body.classList.contains('tiny-header')) {\r\n this.renderer.addClass(this.document.body, 'tiny-header');\r\n } else if (scrollTop < 100) {\r\n this.renderer.removeClass(this.document.body, 'tiny-header');\r\n }\r\n const OffsetTop = $e.target.offsetTop;\r\n let currentSection: string = this.currentSection;\r\n const scrollWindowHeight = $e.target.offsetHeight;\r\n const result = this.initPosition.filter(v => {\r\n return ((scrollTop + scrollWindowHeight) > (v.element.offsetTop - OffsetTop))\r\n && (scrollTop < ((v.element.offsetHeight + (v.element.offsetTop - OffsetTop))));\r\n // 3 return ((scrollTop + scrollWindowHeight) > (v.position.top))\r\n // && (scrollTop < ((v.element.offsetHeight + v.position.top)));\r\n // 2 return ((scrollTop + scrollWindowHeight) > (v.position.top - OffsetTop))\r\n // && (scrollTop < ((v.element.offsetHeight + v.position.top) - OffsetTop));\r\n\r\n // 1 return ((scrollTop + scrollWindowHeight) > (v.position.top - OffsetTop)) && (scrollTop < (v.position.bottom - OffsetTop));\r\n });\r\n if (result.length === 1) {\r\n currentSection = result[0].id;\r\n } else if (result.length > 1) {\r\n const topVal = ((result[0].element.offsetHeight + (result[0].element.offsetTop - OffsetTop))) - scrollTop;\r\n // 3 const topVal = ((result[0].element.offsetHeight + result[0].position.top)) - scrollTop;\r\n // 2 const topVal = ((result[0].element.offsetHeight + result[0].position.top)) - scrollTop - OffsetTop;\r\n // 1 const topVal = result[0].position.bottom - scrollTop - OffsetTop;\r\n // currentSection = (topVal > (scrollWindowHeight / 2)) ? result[0].id : result[1].id;\r\n const r = (topVal > (scrollWindowHeight / 2)) ? result[0] : result[1];\r\n currentSection = r.id;\r\n }\r\n if (currentSection !== this.currentSection) {\r\n this.currentSection = currentSection;\r\n this.onSectionChange.emit({value: this.currentSection});\r\n }\r\n });\r\n }\r\n\r\n private calculatePosition() {\r\n return this.spyIds.map(v => {\r\n const element = this._el.nativeElement.querySelector('#' + v);\r\n return {\r\n id: v,\r\n // position: {top: element.offsetTop - offsetTop}, // {top: boundRect.top - offsetTop},\r\n element\r\n };\r\n });\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.renderer.removeClass(this.document.body, 'tiny-header');\r\n if (this.unsubscribeScroll) {\r\n this.unsubscribeScroll();\r\n }\r\n }\r\n}\r\n","import { Injectable } from '@angular/core';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class CookieService {\r\n constructor() { }\r\n\r\n setCloudFrontCookie(cookies) {\r\n let cookiePrefix = ['CloudFront-Policy', 'CloudFront-Key-Pair-Id', 'CloudFront-Signature'];\r\n cookiePrefix.forEach((prefix) => {\r\n this.setCookie(prefix + '=' + cookies[prefix]);\r\n });\r\n }\r\n\r\n verifyCloudFrontCookie() {\r\n let cookiePrefix = ['CloudFront-Policy', 'CloudFront-Key-Pair-Id', 'CloudFront-Signature']\r\n , prefixFlagIndex = ['unchecked', 'unchecked', 'unchecked']\r\n , cookies = this.getCookie();\r\n\r\n cookies.forEach((cookie) => {\r\n if (prefixFlagIndex.indexOf('unchecked') > -1) {\r\n cookiePrefix.forEach((prefix, key) => {\r\n if (cookie.trim().includes(prefix + '=') && prefixFlagIndex[key] == 'unchecked') {\r\n prefixFlagIndex[key] = 'checked';\r\n }\r\n });\r\n }\r\n });\r\n return prefixFlagIndex.indexOf('unchecked') > -1 ? false : true\r\n }\r\n\r\n clearCloudfrontCookies(){\r\n let cookiePrefix = ['CloudFront-Policy', 'CloudFront-Key-Pair-Id', 'CloudFront-Signature']\r\n , prefixFlagIndex = ['unchecked', 'unchecked', 'unchecked']\r\n , cookies = this.getCookie();\r\n \r\n cookies.forEach((cookie) => {\r\n if (prefixFlagIndex.indexOf('unchecked') > -1) {\r\n cookiePrefix.forEach((prefix, key) => {\r\n if (cookie.trim().includes(prefix + '=') && prefixFlagIndex[key] == 'unchecked') {\r\n this.setCookie(cookie + ';path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;');\r\n prefixFlagIndex[key] = 'checked';\r\n }\r\n });\r\n }\r\n });\r\n }\r\n\r\n getCookie() {\r\n return [...document.cookie.split(\";\")];\r\n }\r\n\r\n setCookie(cookie) {\r\n document.cookie = cookie;\r\n }\r\n}","import { Injectable, Output, EventEmitter } from '@angular/core';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class DataShareService {\r\n\r\n // isOpen = false;\r\n\r\n @Output() updateBanerData: EventEmitter = new EventEmitter();\r\n @Output() updateNavigationData: EventEmitter = new EventEmitter();\r\n @Output() onNavigationSelect: EventEmitter = new EventEmitter();\r\n @Output() onNavigationSectionChange: EventEmitter = new EventEmitter();\r\n // @Output() onUserLogout: EventEmitter = new EventEmitter();\r\n @Output() onLoginFormLink: EventEmitter = new EventEmitter();\r\n @Output() onGalleryDataLoad: EventEmitter = new EventEmitter();\r\n @Output() onCustomEvent: EventEmitter = new EventEmitter();\r\n\r\n @Output() onCustomDashboardEvent: EventEmitter = new EventEmitter();\r\n\r\n dataChange(udpatedDataInfo) {\r\n // alert(\"Called naa\")\r\n this.updateBanerData.emit(udpatedDataInfo);\r\n }\r\n\r\n changeNavigation(navData) {\r\n this.updateNavigationData.emit(navData);\r\n }\r\n\r\n navigationClick(data) {\r\n this.onNavigationSelect.emit(data);\r\n }\r\n\r\n navigationSectionChange(data) {\r\n this.onNavigationSectionChange.emit(data);\r\n }\r\n\r\n // triggerLogout(userId) {\r\n // this.onUserLogout.emit(userId);\r\n // }\r\n\r\n showLoginForm(type: string) {\r\n this.onLoginFormLink.emit(type);\r\n }\r\n\r\n galleryDataLoad(data: any) {\r\n this.onGalleryDataLoad.emit(data);\r\n }\r\n\r\n updateCustomEvent(obj) {\r\n this.onCustomEvent.next(obj);\r\n }\r\n\r\n getBodyStoryClass(url, prefix) {\r\n let className = '';\r\n // console.log(\"url\", url);\r\n console.log(url,prefix);\r\n \r\n switch (url) {\r\n case 'plug_n_predict_telecom':\r\n className = `pnp-telecom-${prefix}-active`;\r\n break;\r\n case 'plug_n_predict_rwd':\r\n className = `pnp-rwd-${prefix}-active`;\r\n break;\r\n case 'leakage_prediction':\r\n className = `leakage-prediction-${prefix}-active`;\r\n break;\r\n case 'nlp':\r\n case 'text_analytics':\r\n className = `nlp-${prefix}-active`;\r\n break;\r\n case 'design_intelligence':\r\n className = `design-intelligence-${prefix}-active`;\r\n break;\r\n case 'driverless_forecasting':\r\n className = `driverless-forecasting-${prefix}-active`;\r\n break;\r\n case 'dynamic_targeting':\r\n className = `dynamic-targeting-${prefix}-active`;\r\n break;\r\n case 'personalized_analytics':\r\n className = `personalized-analytics-${prefix}-active`;\r\n break;\r\n case 'computer_vision_for_gaming':\r\n className = `computer-vision-${prefix}-active`;\r\n break;\r\n case 'contextual_engine':\r\n case 'next_best_action_platform':\r\n className = `contextual-engine-${prefix}-active`;\r\n break;\r\n case 'performance_analytics':\r\n case 'agile_launch_analytics':\r\n className = `performance-analytics-${prefix}-active`;\r\n break;\r\n case 'Competitive_intelligence':\r\n case 'launch_prediction_using_unstructured_data_analysis':\r\n className = `competitive-intelligence-${prefix}-active`;\r\n break;\r\n case 'audio_analytics':\r\n className = `audio-analytics-${prefix}-active`;\r\n break;\r\n case 'video_analytics':\r\n className = `video-analytics-${prefix}-active`;\r\n break;\r\n case 'field_coaching':\r\n className = `field-coaching-${prefix}-active`;\r\n break;\r\n case 'virtual_rep_trainer':\r\n className = `virtual-rep-trainer-${prefix}-active`;\r\n break;\r\n case 'aiqna':\r\n className = `aiqna-${prefix}-active`;\r\n break;\r\n case 'adaptive_attribute_based_offers':\r\n className = `adaptive-pricing-${prefix}-active`;\r\n break;\r\n // TODO:RM Rename the url\r\n case 'ctemp':\r\n className = `ctemp-${prefix}-active`;\r\n break;\r\n case 'advanced_market_intelligence':\r\n className = `advanced_market_intelligence-${prefix}-active`;\r\n break;\r\n case 'personalize_ai':\r\n className = `personalize_ai-${prefix}-active`;\r\n break;\r\n case 'patient_radar':\r\n className = `patient_radar-${prefix}-active`;\r\n break;\r\n default:\r\n className = `default-${prefix}-active`;\r\n break;\r\n }\r\n return className;\r\n }\r\n}\r\n","import { Directive, HostListener, HostBinding } from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[appDropdown]'\r\n})\r\nexport class DropdownDirective {\r\n @HostBinding('class.open') isOpen = false;\r\n\r\n @HostListener('click') toggleOpen() {\r\n this.isOpen = !this.isOpen;\r\n }\r\n}\r\n","export enum UserStatus {\r\n ACTIVE = 'Active',\r\n INACTIVE = 'Inactive',\r\n ACTIVE_BLOCK = 'Active (Blocked)'\r\n}\r\n\r\nexport enum UserType {\r\n ADMIN = 'Admin',\r\n NON_ZS = 'Non ZS',\r\n ZS = 'ZS',\r\n CUSTOM = 'custom',\r\n SSO = 'zser'\r\n}\r\nexport enum GAIndex {\r\n NAME = 'dimension1',\r\n EMAIL_ID = 'dimension2',\r\n CAPABILITY_GROUP = 'dimension3',\r\n CLIENT_NAME = 'dimension4',\r\n REQUESTER_NAME = 'dimension5',\r\n USER_TYPE = 'dimension6',\r\n ERROR_REASON = 'dimension7',\r\n DEPARTMENT = 'dimension8',\r\n CLIENT_NAME_OR_PURPOSE = 'dimension9'\r\n}\r\n\r\nexport enum GAUserType {\r\n ADMIN = 'Admin',\r\n NON_ZS = 'Non-SSO',\r\n ZS = 'SSO'\r\n}\r\n\r\n// export enum GAEvents {\r\n// PLAY = 'Play',\r\n// SEARCH = 'Search',\r\n// CLICK = 'Click',\r\n// VIEW = 'View',\r\n// DS_VIEW = 'DS View',\r\n// CREATE = 'Create',\r\n// UPDATE = 'Update'\r\n// }\r\n\r\n// export enum GACategory {\r\n// VIDEO = 'Video',\r\n// FILTER = 'Filter',\r\n// USECASE = 'Usecase',\r\n// USER_MANAGEMENT = 'User Management'\r\n// }\r\n\r\n// export enum GALabel {\r\n// KNOW_MORE = 'Know More',\r\n// TAB_FILTER = 'Tab Filter',\r\n// WILDCARD_SEARCH = 'Wildcard Search'\r\n// }\r\n","import {\r\n Directive, AfterViewInit, Input, ElementRef, Renderer2, Inject,\r\n OnDestroy, HostListener, Output, EventEmitter, OnInit\r\n} from '@angular/core';\r\nimport { DOCUMENT } from '@angular/common';\r\n\r\n@Directive({\r\n selector: '[appFullpagescroll]',\r\n exportAs: 'fullPageScroll'\r\n})\r\nexport class FullpagescrollDirective implements OnInit, AfterViewInit, OnDestroy {\r\n @Input() public wheelContainerId = '';\r\n @Input() public allowDelay = false;\r\n @Input() public time = 1000;\r\n @Input() public delayTime = 1000;\r\n // tslint:disable-next-line: no-output-on-prefix\r\n @Output() public onSlideStart = new EventEmitter();\r\n // tslint:disable-next-line: no-output-on-prefix\r\n @Output() public onSlideComplete = new EventEmitter();\r\n\r\n private _scrollSection;\r\n private _scrollingSectionList = [];\r\n private _lastScrolledSection = 0;\r\n private unsubscribeMouseWheel = null;\r\n private unsubscribeTouchStart = null;\r\n private unsubscribeTouchMove = null;\r\n private isAnnimating = false;\r\n private onMouseWheel = null;\r\n private _previousTime = 0;\r\n\r\n constructor(\r\n private _el: ElementRef,\r\n private renderer: Renderer2,\r\n @Inject(DOCUMENT) private document: Document\r\n ) { }\r\n\r\n @HostListener('window:keyup', ['$event'])\r\n onKeyup(e) {\r\n e.preventDefault();\r\n if (this.isAnnimating) {\r\n return;\r\n }\r\n\r\n if (e.which === 38) {\r\n // Going up\r\n const validity = this.checkNavigationValidity('up');\r\n if (validity.valid) {\r\n this.navigateTo(validity.value);\r\n }\r\n } else if (e.which === 40) {\r\n // Going Down\r\n const validity = this.checkNavigationValidity('down');\r\n if (validity.valid) {\r\n this.navigateTo(validity.value);\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n @HostListener('window:resize', ['$event'])\r\n onResize() {\r\n this._scrollSection.scrollTo({ top: this._scrollingSectionList[this._lastScrolledSection].e.offsetTop });\r\n }\r\n\r\n private throttle(fn, wait) {\r\n let time = Date.now();\r\n return ($e) => {\r\n if ((time + wait - Date.now()) < 0) {\r\n fn($e);\r\n time = Date.now();\r\n }\r\n };\r\n }\r\n\r\n public navigateTo(elementId) {\r\n this.isAnnimating = true;\r\n this.document.body.classList.remove(this._scrollingSectionList[this._lastScrolledSection].id);\r\n const commingChild = this._scrollingSectionList.find((v, i) => {\r\n if (v.id === elementId) {\r\n this._lastScrolledSection = i;\r\n return true;\r\n }\r\n });\r\n if (commingChild) {\r\n // this.isAnnimating = true;\r\n this.onSlideStart.next(commingChild.id);\r\n // console.log('start', (new Date()), this.time + 1000);\r\n // setTimeout(() => {\r\n // this.isAnnimating = false;\r\n // console.log('end', (new Date()));\r\n // }, this.time + 10);\r\n\r\n // let allowDelay = false;\r\n // if (this.delayItems.length > 0) {\r\n // this.delayItems.forEach(element => {\r\n // // console.log(element.findIndex((item) => item === elementId));\r\n // // console.log(element.findIndex((item) => item === commingChild.id));\r\n // if (allowDelay === false && element.length === 2 && element[0] !== element[1] &&\r\n // (element.findIndex((item) => item === elementId) !== -1 && element.findIndex((item) => item === commingChild.id) !== -1)) {\r\n // allowDelay = true;\r\n // return;\r\n // }\r\n // });\r\n // }\r\n\r\n if (this.allowDelay) {\r\n setTimeout(() => {\r\n this.scrollIt(\r\n this._scrollSection,\r\n commingChild.e.offsetTop,\r\n this.time,\r\n 'easeOutQuint',\r\n () => {\r\n // console.log('Animation End in callback')\r\n // this.document.addEventListener('mousewheel', this.onMouseWheel);\r\n // //setTimeout(() => {\r\n this.isAnnimating = false;\r\n // //}, 1000);\r\n this._previousTime = new Date().getTime();\r\n this.onSlideComplete.next(commingChild.id);\r\n this.document.body.classList.add(this._scrollingSectionList[this._lastScrolledSection].id);\r\n }\r\n );\r\n }, this.delayTime);\r\n } else {\r\n this.scrollIt(\r\n this._scrollSection,\r\n commingChild.e.offsetTop,\r\n this.time,\r\n 'easeOutQuint',\r\n () => {\r\n // console.log('Animation End in callback')\r\n // this.document.addEventListener('mousewheel', this.onMouseWheel);\r\n // //setTimeout(() => {\r\n this.isAnnimating = false;\r\n // //}, 1000);\r\n this._previousTime = new Date().getTime();\r\n this.onSlideComplete.next(commingChild.id);\r\n this.document.body.classList.add(this._scrollingSectionList[this._lastScrolledSection].id);\r\n }\r\n );\r\n }\r\n } else {\r\n this.isAnnimating = false;\r\n }\r\n }\r\n\r\n public setEventState(state: boolean) {\r\n this.isAnnimating = !state;\r\n // console.log(\"ANIMATING VALUE: \", this.isAnnimating);\r\n }\r\n\r\n ngOnInit() {\r\n this.document.body.classList.add('parallax');\r\n }\r\n\r\n ngAfterViewInit() {\r\n setTimeout(() => {\r\n this.document.body.classList.add(this._scrollingSectionList[this._lastScrolledSection].id);\r\n }, 100);\r\n this._scrollSection = document.getElementById(this.wheelContainerId);\r\n // this._page = document.getElementById(this.pageId);\r\n const children = this._el.nativeElement.children;\r\n this._scrollingSectionList = [];\r\n // tslint:disable-next-line: prefer-for-of\r\n for (let i = 0; i < children.length; i++) {\r\n const e = children[i];\r\n this._scrollingSectionList.push({\r\n id: e.id,\r\n e\r\n });\r\n }\r\n\r\n this.onMouseWheel = ($e) => {\r\n // $e.preventDefault();\r\n const curTime = new Date().getTime();\r\n // console.log($e, $e.deltaY, this.isAnnimating, curTime);\r\n if (this.isAnnimating) {\r\n return;\r\n }\r\n // if ((curTime - this._previousTime) < 2500) {\r\n // console.log('returned');\r\n // return;\r\n // } else {\r\n // console.log(curTime - this._previousTime);\r\n // }\r\n // this.document.removeEventListener('mousewheel', this.onMouseWheel);\r\n if ($e.deltaY > 0) {\r\n // Going Down\r\n const validity = this.checkNavigationValidity('down');\r\n if (validity.valid) {\r\n this.navigateTo(validity.value);\r\n } else {\r\n // this.document.addEventListener('mousewheel', this.onMouseWheel);\r\n }\r\n } else {\r\n // Going up\r\n const validity = this.checkNavigationValidity('up');\r\n if (validity.valid) {\r\n this.navigateTo(validity.value);\r\n } else {\r\n // this.document.addEventListener('mousewheel', this.onMouseWheel);\r\n }\r\n }\r\n };\r\n\r\n this.unsubscribeMouseWheel = this.renderer.listen(this._scrollSection, 'wheel', this.throttle(this.onMouseWheel, 1800));\r\n\r\n let yDown = null;\r\n this.unsubscribeTouchStart = this.renderer.listen(this._scrollSection, 'touchstart', this.throttle((e) => {\r\n if (this.isAnnimating) {\r\n return;\r\n }\r\n const firstTouch = e.touches[0];\r\n yDown = firstTouch.clientY;\r\n }, 1800));\r\n\r\n this.unsubscribeTouchMove = this.renderer.listen(this._scrollSection, 'touchmove', this.throttle((e) => {\r\n if (!yDown) {\r\n return;\r\n }\r\n const yUp = e.touches[0].clientY;\r\n const yDiff = yDown - yUp;\r\n\r\n let direction = '';\r\n if (yDiff > 0) {\r\n /* up swipe means go down */\r\n direction = 'down';\r\n } else {\r\n /* down swipe meand go up*/\r\n direction = 'up';\r\n }\r\n const validity = this.checkNavigationValidity(direction);\r\n if (validity.valid) {\r\n this.navigateTo(validity.value);\r\n }\r\n yDown = null;\r\n }, 1800));\r\n // this.renderer.listen(this._scrollSection, 'touchend', this.throttle((e) => {\r\n // console.log('End', e);\r\n // }, 500));\r\n // this.document.addEventListener('mousewheel', this.throttle(this.onMouseWheel, 500));\r\n\r\n // this.unsubscribeMouseWheel = this.renderer.listen(this.document, 'mousewheel', ($e) => {\r\n // // $e.preventDefault();\r\n // if (this.isAnnimating) {\r\n // return;\r\n // }\r\n // console.log($e, $e.deltaY, this.isAnnimating);\r\n\r\n // if ($e.deltaY > 0) {\r\n // // Going Down\r\n // const validity = this.checkNavigationValidity('down');\r\n // if (validity.valid) {\r\n // // (this._lastScrolledSection !== this._scrollingSectionList.length - 1) {\r\n // // this.navigateTo(this._scrollingSectionList[this._lastScrolledSection + 1].id);\r\n // this.navigateTo(validity.value);\r\n // }\r\n // } else {\r\n // const validity = this.checkNavigationValidity('up');\r\n // if (validity.valid) {\r\n // // (this._lastScrolledSection !== 0) {\r\n // // Going up\r\n // this.navigateTo(validity.value);\r\n // }\r\n // }\r\n // });\r\n }\r\n\r\n checkNavigationValidity(direction: string): { valid: boolean, value: string } {\r\n let _result = false;\r\n if (direction === 'down') {\r\n _result = (this._lastScrolledSection !== this._scrollingSectionList.length - 1);\r\n } else if (direction === 'up') {\r\n _result = (this._lastScrolledSection !== 0);\r\n }\r\n return {\r\n valid: _result,\r\n value: _result && (this._scrollingSectionList[this._lastScrolledSection + ((direction === 'down') ? 1 : -1)].id)\r\n };\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.document.body.classList.remove('parallax');\r\n this.document.body.classList.remove(this._scrollingSectionList[this._lastScrolledSection].id);\r\n if (this.unsubscribeMouseWheel) {\r\n this.unsubscribeMouseWheel();\r\n }\r\n if (this.unsubscribeTouchStart) {\r\n this.unsubscribeTouchStart();\r\n }\r\n if (this.unsubscribeTouchMove) {\r\n this.unsubscribeTouchMove();\r\n }\r\n\r\n // if (this.onMouseWheel) {\r\n // this.document.removeEventListener('wheel', this.onMouseWheel);\r\n // }\r\n }\r\n\r\n private scrollIt(scrollContainer, destination, duration = 200, easing = 'linear', callback) {\r\n\r\n // Predefine list of available timing functions\r\n // If you need more, tween js is full of great examples\r\n // https://github.com/tweenjs/tween.js/blob/master/src/Tween.js#L421-L737\r\n const easings = {\r\n linear(t) {\r\n return t;\r\n },\r\n easeInQuad(t) {\r\n return t * t;\r\n },\r\n easeOutQuad(t) {\r\n return t * (2 - t);\r\n },\r\n easeInOutQuad(t) {\r\n return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\r\n },\r\n easeInCubic(t) {\r\n return t * t * t;\r\n },\r\n easeOutCubic(t) {\r\n return (--t) * t * t + 1;\r\n },\r\n easeInOutCubic(t) {\r\n return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;\r\n },\r\n easeInQuart(t) {\r\n return t * t * t * t;\r\n },\r\n easeOutQuart(t) {\r\n return 1 - (--t) * t * t * t;\r\n },\r\n easeInOutQuart(t) {\r\n return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;\r\n },\r\n easeInQuint(t) {\r\n return t * t * t * t * t;\r\n },\r\n easeOutQuint(t) {\r\n return 1 + (--t) * t * t * t * t;\r\n },\r\n easeInOutQuint(t) {\r\n return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;\r\n }\r\n };\r\n\r\n\r\n // Store initial position of a window and time\r\n // If performance is not available in your browser\r\n // It will fallback to new Date().getTime() - thanks IE < 10\r\n const start = scrollContainer.scrollTop; /* window.pageYOffset; */\r\n const startTime = 'now' in window.performance ? performance.now() : new Date().getTime();\r\n // const startTime = typeof(window.performance['now']) == 'function' ? performance.now() : new Date().getTime();\r\n\r\n\r\n // Take height of window and document to sesolve max scrollable value\r\n // Prevent requestAnimationFrame() from scrolling below maximum scollable value\r\n // Resolve destination type (node or number)\r\n // const documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);\r\n // const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;\r\n // const destinationOffset = typeof destination === 'number' ? destination : destination.offsetTop;\r\n // const destinationOffsetToScroll = Math.round(documentHeight - destinationOffset < windowHeight ? documentHeight - windowHeight : destinationOffset);\r\n\r\n const containerScrollHeight = Math.max(scrollContainer.scrollHeight, scrollContainer.offsetHeight, scrollContainer.clientHeight);\r\n const containerHeight = scrollContainer.innerHeight || scrollContainer.clientHeight || scrollContainer.offsetHeight;\r\n const destinationOffset = typeof destination === 'number' ? destination : destination.offsetTop;\r\n const destinationOffsetToScroll = Math.round(containerScrollHeight - destinationOffset < containerHeight ? containerScrollHeight - containerHeight : destinationOffset);\r\n\r\n // If requestAnimationFrame is not supported\r\n // Move window to destination position and trigger callback function\r\n if ('requestAnimationFrame' in window === false) {\r\n // window.scroll(0, destinationOffsetToScroll);\r\n scrollContainer.scroll(0, destinationOffsetToScroll);\r\n if (callback) {\r\n callback();\r\n }\r\n return;\r\n }\r\n\r\n\r\n // function resolves position of a window and moves to exact amount of pixels\r\n // Resolved by calculating delta and timing function choosen by user\r\n function scroll() {\r\n const now = 'now' in window.performance ? performance.now() : new Date().getTime();\r\n const time = Math.min(1, ((now - startTime) / duration));\r\n const timeFunction = easings[easing](time);\r\n // window.scroll(0, Math.ceil((timeFunction * (destinationOffsetToScroll - start)) + start));\r\n scrollContainer.scroll(0, Math.ceil((timeFunction * (destinationOffsetToScroll - start)) + start));\r\n // Stop requesting animation when window reached its destination\r\n // And run a callback function\r\n // SPM Updated Here for smooth scroll\r\n // (window.pageYOffset === destinationOffsetToScroll);\r\n if (Math.ceil(scrollContainer.scrollTop/* window.pageYOffset */) === destinationOffsetToScroll) {\r\n if (callback) {\r\n callback();\r\n }\r\n return;\r\n }\r\n\r\n // If window still needs to scroll to reach destination\r\n // Request another scroll invokation\r\n requestAnimationFrame(scroll);\r\n }\r\n\r\n\r\n // Invoke scroll and sequential requestAnimationFrame\r\n scroll();\r\n }\r\n}\r\n","import { Directive, Input, Output, EventEmitter, ElementRef,\r\n Renderer2, AfterViewInit, AfterViewChecked, OnDestroy, Inject } from '@angular/core';\r\nimport { DOCUMENT } from '@angular/common';\r\n\r\n@Directive({\r\n selector: '[appScrollSpy]'\r\n})\r\nexport class ScrollSpyDirective implements AfterViewInit, AfterViewChecked, OnDestroy {\r\n\r\n @Input() public spiedTags = [];\r\n @Input() private parentRef = null;\r\n @Output() public sectionChange = new EventEmitter();\r\n @Input() public scrollContainerId = '';\r\n private currentSection: string;\r\n private _lastHeight = 0;\r\n private _scrollSection;\r\n private unsubscribeScroll = null;\r\n initPosition;\r\n constructor(\r\n private _el: ElementRef,\r\n private renderer: Renderer2,\r\n @Inject(DOCUMENT) private document: Document) { }\r\n private calculatePosition() {\r\n const children = this._el.nativeElement.children;\r\n const result = [];\r\n for (let i = 0 ; i < children.length; i++) {\r\n const e = children[i];\r\n result.push({\r\n id: e.id,\r\n // position: (element.getBoundingClientRect()),\r\n // e\r\n });\r\n }\r\n return result;\r\n }\r\n ngAfterViewChecked(): void {\r\n if (this._lastHeight !== this._scrollSection.offsetHeight) {\r\n this.initPosition = this.calculatePosition();\r\n }\r\n }\r\n ngAfterViewInit(): void {\r\n this._scrollSection = document.getElementById(this.scrollContainerId);\r\n this._lastHeight = this._scrollSection.offsetHeight;\r\n this.initPosition = this.calculatePosition();\r\n this.unsubscribeScroll = this.renderer.listen(this._scrollSection, 'scroll', ($e) => {\r\n const scrollTop = $e.target.scrollTop;\r\n // Add class to body on 100px scroll\r\n if (scrollTop >= 100 && !this.document.body.classList.contains('tiny-header')) {\r\n this.renderer.addClass(this.document.body, 'tiny-header');\r\n } else if (scrollTop < 100) {\r\n this.renderer.removeClass(this.document.body, 'tiny-header');\r\n }\r\n const OffsetTop = $e.target.offsetTop;\r\n let currentSection: string = this.currentSection;\r\n const scrollWindowHeight = $e.target.offsetHeight;\r\n const result = this.initPosition.filter(v => {\r\n v.element = document.getElementById(v.id);\r\n return ((scrollTop + scrollWindowHeight) > (v.element.offsetTop - OffsetTop))\r\n && (scrollTop < ((v.element.offsetHeight + v.element.offsetTop) - OffsetTop));\r\n });\r\n const emitValue = {};\r\n if (result.length === 1) {\r\n currentSection = result[0].id;\r\n for (const x of result[0].element.attributes) {\r\n emitValue[x.localName] = x.value;\r\n }\r\n } else if (result.length > 1) {\r\n const topVal = ((result[0].element.offsetHeight + result[0].element.offsetTop)) - scrollTop - OffsetTop;\r\n const r = (topVal > (scrollWindowHeight / 2)) ? result[0] : result[1];\r\n currentSection = r.id;\r\n for (const x of r.element.attributes) {\r\n emitValue[x.localName] = x.value;\r\n }\r\n }\r\n if (currentSection !== this.currentSection) {\r\n this.currentSection = currentSection;\r\n this.sectionChange.emit({id: this.currentSection, value: {...emitValue}});\r\n }\r\n });\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.renderer.removeClass(this.document.body, 'tiny-header');\r\n if (this.unsubscribeScroll) {\r\n this.unsubscribeScroll();\r\n }\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { DropdownDirective } from './dropdown.directive';\r\nimport { DataShareService } from './data-share.service';\r\nimport { AuthGuardService } from './auth-guard.service';\r\nimport { AuthService } from './auth.service';\r\nimport { AdminAuthGuardService } from './admin-auth-guard.service';\r\n\r\n\r\n@NgModule({\r\n declarations: [\r\n DropdownDirective,\r\n // ScrollSpyDirective\r\n ],\r\n exports: [\r\n CommonModule,\r\n DropdownDirective,\r\n // ScrollSpyDirective\r\n ],\r\n providers: [\r\n DataShareService,\r\n AuthGuardService,\r\n AuthService,\r\n AdminAuthGuardService\r\n ]\r\n})\r\nexport class SharedModule { }\r\n","module.exports = \".login-admin-container.admin-section-active .container{\\r\\n max-width: 100%;\\r\\n padding: 0 30px;\\r\\n}\\r\\n.login-admin-container.admin-section-active .container.inner-page-container{\\r\\n padding: 0;\\r\\n}\\r\\n.login-admin-container .cdk-overlay-pane .admin-container {\\r\\n padding: 0;\\r\\n}\\r\\n.login-admin-container .admin-container{\\r\\n padding: 0 30px;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .title-section{\\r\\n justify-content: space-between!important;\\r\\n display: flex;\\r\\n height: auto;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .title-section .filter-section {\\r\\n display: flex;\\r\\n border: none;\\r\\n justify-content: space-between;\\r\\n width: 100%;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .title-section .filter-section .input-group {\\r\\n width: auto;\\r\\n padding-right: 30px;\\r\\n border: #D6DFE4 1px solid;\\r\\n /* background:url(../../../assets/images/search-icon.png) no-repeat 20px center; */\\r\\n background:#fff url('icon-search-red.png') no-repeat calc(100% - 10px) center;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .title-section .filter-section .input-group:not(:last-child) {\\r\\n margin-right: 30px;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .title-section .filter-section .input-group .form-control {\\r\\n height: 38px;\\r\\n padding-bottom: 8px;\\r\\n border: none;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .title-section .filter-section .input-group .form-control:focus {\\r\\n box-shadow: none;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .title-section .filter-section .input-group .clear-search {\\r\\n width: 30px;\\r\\n height: 100%;\\r\\n padding: 0;\\r\\n font-size: 28px;\\r\\n color: #999;\\r\\n border: 0;\\r\\n cursor: pointer;\\r\\n background: #fff;\\r\\n position: absolute;\\r\\n right: 0;\\r\\n line-height: 16px;\\r\\n padding-bottom: 4px;\\r\\n}\\r\\n.highlight {\\r\\n background: #ccedff !important;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .title-section .filter-section .input-group .clear-search:focus {\\r\\n box-shadow: none;\\r\\n outline: none;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .title-section .filter-section .input-group .clear-search:hover {\\r\\n box-shadow: none;\\r\\n outline: none;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .title-section h4{\\r\\n padding-top: 5px;\\r\\n font-size: calc(22px + (26 - 22) * (100vw - 320px) / (1920 - 320));\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .title-section .btn{\\r\\n height: 40px;\\r\\n padding-left: 60px;\\r\\n background: #06659B url('add-icon.png') no-repeat 20px center;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .title-section .btn.lockout-btn{\\r\\n background: #06659B url('lock-white.png') no-repeat 20px center;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .row .col:first-child{\\r\\n width: 60px; \\r\\n flex-grow: inherit; \\r\\n flex-basis: auto;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .actions{\\r\\n width:100px;\\r\\n height: 24px;\\r\\n display: flex;\\r\\n margin: 0 auto;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .actions span{\\r\\n width:24px;\\r\\n height: 24px;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .actions span:not(.disable){\\r\\n cursor: pointer;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .actions .edit{\\r\\n background: url('edit.png') no-repeat center center;\\r\\n background-size: 100%;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .actions .copy{\\r\\n background: url('copy-clipboard.png') no-repeat center center;\\r\\n background-size: 100%;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .actions .delete{\\r\\n background: url('delete.png') no-repeat center center;\\r\\n background-size: 100%;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .actions .logs{\\r\\n background: url('logs.png') no-repeat center center;\\r\\n background-size: 100%;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .actions .logs.disable{\\r\\n background-image:url('logs-disabled.png');\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .actions .info{\\r\\n background: url('info-icon.png') no-repeat center center;\\r\\n background-size: 100%;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .list-table {\\r\\n max-height: calc(100vh - 350px);\\r\\n overflow: auto;\\r\\n border: #E4E4E4 1px solid;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .list-table .mat-paginator.sticky-pagination {\\r\\n position: sticky;\\r\\n bottom: 0px;\\r\\n z-index: 10;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .mat-table{\\r\\n box-shadow: none;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .mat-table tbody tr:nth-child(even) {\\r\\n background-color: #F5F5F5;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .mat-table .mat-column-more{\\r\\n text-align: center;\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .mat-table th.mat-header-cell{\\r\\n padding-left: 10px;\\r\\n padding-right: 10px;\\r\\n}\\r\\n@media (max-width: 1443px){\\r\\n .login-admin-container .admin-container .user-list .admin-user-list .mat-table th.mat-header-cell,\\r\\n .login-admin-container .admin-container .user-list .admin-user-list .mat-table tbody td{\\r\\n padding-left: 5px;\\r\\n padding-right: 5px;\\r\\n }\\r\\n}\\r\\n.login-admin-container .admin-container .user-list .mat-table th.mat-header-cell:first-of-type{\\r\\n padding-left: 24px;\\r\\n}\\r\\n@media (max-width: 1443px){\\r\\n .login-admin-container .admin-container .user-list .admin-user-list .mat-table th.mat-header-cell:first-of-type{\\r\\n padding-left: 5px;\\r\\n }\\r\\n}\\r\\n.user-dialog-container .mat-dialog-container{\\r\\n color: #000000;\\r\\n}\\r\\n.user-status.active,\\r\\n.user-status.inactive{\\r\\n position: relative;\\r\\n padding-left: 16px;\\r\\n text-transform: capitalize;\\r\\n white-space: nowrap;\\r\\n}\\r\\n.user-status.active:before,\\r\\n.user-status.inactive:before{\\r\\n content: '';\\r\\n height: 8px;\\r\\n width: 8px;\\r\\n border-radius: 16px;\\r\\n background: #ccc;\\r\\n position: absolute;\\r\\n left: 0;\\r\\n top:0;\\r\\n bottom:0;\\r\\n margin:auto;\\r\\n}\\r\\n.user-status.active:before{\\r\\n background: #17AC2E;\\r\\n}\\r\\n.user-status.inactive:before{\\r\\n background: #F45757;\\r\\n}\\r\\n.user-status.inactive{\\r\\n color: #F45757;\\r\\n}\\r\\n.user-status.active{\\r\\n color: #17AC2E;\\r\\n \\r\\n}\\r\\n.hide{\\r\\n display: none\\r\\n}\\r\\n.mat-sort-header-container .mat-sort-header-arrow{\\r\\n opacity:1 !important;\\r\\n transform:translateY(0%) !important;\\r\\n width:12px;\\r\\n height:24px;\\r\\n position:relative;\\r\\n}\\r\\n.mat-sort-header-container .mat-sort-header-arrow .mat-sort-header-stem,\\r\\n.mat-sort-header-container .mat-sort-header-arrow .mat-sort-header-indicator{\\r\\n display:none;\\r\\n}\\r\\n.mat-sort-header-container .mat-sort-header-arrow:before,\\r\\n.mat-sort-header-container .mat-sort-header-arrow:after{\\r\\n content:\\\"\\\";\\r\\n border-color:transparent;\\r\\n border-style:solid;\\r\\n height:11px;\\r\\n width:12px;\\r\\n position:absolute;\\r\\n left:0;\\r\\n}\\r\\n.mat-sort-header-container .mat-sort-header-arrow:before{\\r\\n border-bottom-color:#BDBDBD;\\r\\n border-width:0 6px 6px 6px;\\r\\n top:0;\\r\\n}\\r\\n.mat-sort-header-container .mat-sort-header-arrow:after{\\r\\n border-top-color:#BDBDBD;\\r\\n border-width:6px 6px 0 6px;\\r\\n bottom:0;\\r\\n}\\r\\n.mat-header-row th[aria-sort=\\\"ascending\\\"] .mat-sort-header-container .mat-sort-header-arrow:before{\\r\\n border-bottom-color:#06659B;\\r\\n}\\r\\n.mat-header-row th[aria-sort=\\\"descending\\\"] .mat-sort-header-container .mat-sort-header-arrow:after{\\r\\n border-top-color:#06659B;\\r\\n}\\r\\n.mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow{\\r\\n opacity:1 !important;\\r\\n}\\r\\n.mat-footer-row mat-footer-cell{\\r\\n justify-content: center;\\r\\n font-style: italic;\\r\\n}\\r\\napp-history-dialog-box{\\r\\n display:flex;\\r\\n flex-direction:column;\\r\\n height:100%;\\r\\n}\\r\\n/* app-history-dialog-box > div{\\r\\n flex:0;\\r\\n} */\\r\\napp-history-dialog-box > mat-dialog-content.mat-dialog-content{\\r\\n flex:1 1 auto;\\r\\n margin:0;\\r\\n padding:0;\\r\\n}\\r\\napp-history-dialog-box > mat-dialog-content.mat-dialog-content th.mat-header-cell{\\r\\n padding-left:10px;\\r\\n}\\r\\n.admin-container .user-list .title-section button {\\r\\n height: 100%;\\r\\n padding: 0 30px;\\r\\n font-size: 16px;\\r\\n text-transform: uppercase;\\r\\n}\\r\\n.admin-container .user-list .title-section button:focus {\\r\\n outline: none;\\r\\n}\\r\\n.login-admin-container .cdk-overlay-pane{\\r\\n height: auto!important;\\r\\n max-height: 90%;\\r\\n}\\r\\n.login-admin-container .cdk-overlay-pane .mat-dialog-container{\\r\\n padding: 30px!important;\\r\\n box-shadow: 0 0 12px rgba(0,0,0,.16);\\r\\n border-radius: 20px;\\r\\n}\\r\\n.login-admin-container .cdk-overlay-pane .mat-dialog-content{\\r\\n max-height: inherit;\\r\\n}\\r\\n.login-admin-container .cdk-overlay-pane .mat-dialog-container .mat-dialog-content{\\r\\n max-height: 65vh;\\r\\n}\\r\\n/* .login-admin-container .cdk-overlay-pane .mat-dialog-content .user-list .list-table{\\r\\n max-height:calc(100vh - 260px);\\r\\n min-height: 336px;\\r\\n} */\\r\\n.login-admin-container .right-nav{\\r\\n width: 160px;\\r\\n background: #8c9fab;\\r\\n padding: 0 15px;\\r\\n height: calc(100vh - 214px);\\r\\n box-shadow: -4px 0px 12px #0000001f;\\r\\n border-left: 1px solid #fff;\\r\\n}\\r\\n.login-admin-container .right-nav h6{\\r\\n font-size: 18px;\\r\\n color:#fff;\\r\\n font-family: 'DINProMedium', sans-serif;\\r\\n background: url('configuration.png') left center no-repeat;\\r\\n background-size: 22px;\\r\\n padding-left: 28px;\\r\\n}\\r\\n.login-admin-container .right-nav .configurations-list{\\r\\n padding: 25px 0;\\r\\n}\\r\\n.login-admin-container .right-nav .thumbs{\\r\\n width: 100%;\\r\\n display: block;\\r\\n padding: 50px 10px 10px;\\r\\n text-align: center;\\r\\n color: #fff;\\r\\n font-family: 'DINProMedium', sans-serif;\\r\\n font-size: 15px; \\r\\n background-color: #9fb2bf;\\r\\n background-repeat: no-repeat;\\r\\n background-position: center 10px;\\r\\n background-size: 30px;\\r\\n margin-bottom: 20px;\\r\\n box-shadow: 0 0 10px #00000024;\\r\\n cursor: pointer;\\r\\n transition: all 300ms ease-in-out;\\r\\n line-height: 18px;\\r\\n}\\r\\n.login-admin-container .right-nav .thumbs:hover{\\r\\n transform: scale(.97);\\r\\n transition: all 200ms ease-in-out;\\r\\n}\\r\\n.login-admin-container .right-nav .lock-ip{\\r\\n background-image: url('lock-ip.png');\\r\\n}\\r\\n.login-admin-container .right-nav .manage-cred{\\r\\n background-image: url('manage-cred.png');\\r\\n background-size: 34px;\\r\\n background-position: center 12px;\\r\\n}\\r\\n.stories-credentials-dialog-container .story-list{\\r\\n width: 600px;\\r\\n max-height: 500px;\\r\\n overflow-y: auto;\\r\\n}\\r\\n.stories-credentials-dialog-container .mat-expansion-panel{\\r\\n background: transparent;\\r\\n box-shadow: none;\\r\\n color: #333;\\r\\n}\\r\\n.stories-credentials-dialog-container .mat-expansion-panel-header{\\r\\n padding: 0 20px;\\r\\n height: 50px!important;\\r\\n}\\r\\n.stories-credentials-dialog-container .mat-expansion-indicator::after{\\r\\n color: #3c88b5;\\r\\n margin-right: 4px;\\r\\n padding: 4px;\\r\\n position: relative;\\r\\n top: -3px;\\r\\n}\\r\\n.stories-credentials-dialog-container .mat-expansion-panel .mat-expansion-panel-body {\\r\\n padding: 0 20px 16px;\\r\\n}\\r\\n.stories-credentials-dialog-container .story-list > div:nth-child(odd) .mat-expansion-panel {\\r\\n background-color: #F5F5F5;\\r\\n}\\r\\n.stories-credentials-dialog-container .mat-expansion-panel.mat-expanded,\\r\\n.stories-credentials-dialog-container .story-list > div:nth-child(odd) .mat-expansion-panel.mat-expanded {\\r\\n background-color: #e6e6e6;\\r\\n}\\r\\n.cred-form{\\r\\n display: flex;\\r\\n padding-top: 7px;\\r\\n border-top: 1px solid #fff;\\r\\n margin-top: 5px;\\r\\n}\\r\\n.cred-form:first-child{\\r\\n margin-top: 0;\\r\\n border-top: none;\\r\\n padding-top: 0;\\r\\n}\\r\\n.cred-form label{\\r\\n font-weight: 500;\\r\\n text-transform: uppercase;\\r\\n font-size: 13px;\\r\\n}\\r\\n.cred-form form > div label{\\r\\n font-size: 14px;\\r\\n font-family: 'DINProRegular', sans-serif;\\r\\n}\\r\\n.cred-form form > div img{\\r\\n top: -9px;\\r\\n bottom: 0;\\r\\n margin: auto;\\r\\n left: 8px;\\r\\n width: 13px;\\r\\n}\\r\\n.cred-form form > div .form-control{\\r\\n height: 36px;\\r\\n font-size: 15px !important;\\r\\n margin-bottom: 8px;\\r\\n width: 226px;\\r\\n padding: 0px 0 3px 30px;\\r\\n}\\r\\n.cred-form form > div .form-control:focus{\\r\\n box-shadow: none;\\r\\n}\\r\\n.cred-form form > div p{\\r\\n bottom: -10px;\\r\\n margin: 0;\\r\\n left: 0;\\r\\n right: 0;\\r\\n font-size: 12px;\\r\\n color: red;\\r\\n letter-spacing: 1px;\\r\\n}\\r\\n.cred-form button{\\r\\n height: 36px;\\r\\n color: #fff;\\r\\n background-color: #06659B;\\r\\n border: none;\\r\\n width: 90px;\\r\\n}\\r\\n.app-wrapper{\\r\\n margin-bottom: 2px;\\r\\n}\\r\\n.cred-form .lds-ring{\\r\\n left: 30px;\\r\\n transform: none;\\r\\n right: 0;\\r\\n margin: auto;\\r\\n}\\r\\n\\r\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9hcHAvdXNlci1tYW5hZ2VtZW50L2FkbWluL2FkbWluLmNvbXBvbmVudC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSSxnQkFBZ0I7SUFDaEIsZ0JBQWdCO0NBQ25CO0FBQ0Q7SUFDSSxXQUFXO0NBQ2Q7QUFDRDtJQUNJLFdBQVc7Q0FDZDtBQUNEO0lBQ0ksZ0JBQWdCO0NBQ25CO0FBQ0Q7SUFDSSx5Q0FBeUM7SUFDekMsY0FBYztJQUNkLGFBQWE7Q0FDaEI7QUFFRDtJQUNJLGNBQWM7SUFDZCxhQUFhO0lBQ2IsK0JBQStCO0lBQy9CLFlBQVk7Q0FDZjtBQUVEO0lBQ0ksWUFBWTtJQUNaLG9CQUFvQjtJQUNwQiwwQkFBMEI7SUFDMUIsbUZBQW1GO0lBQ25GLDhFQUFtRztDQUN0RztBQUVEO0lBQ0ksbUJBQW1CO0NBQ3RCO0FBRUQ7SUFDSSxhQUFhO0lBQ2Isb0JBQW9CO0lBQ3BCLGFBQWE7Q0FDaEI7QUFFRDtJQUNJLGlCQUFpQjtDQUNwQjtBQUVEO0lBQ0ksWUFBWTtJQUNaLGFBQWE7SUFDYixXQUFXO0lBQ1gsZ0JBQWdCO0lBQ2hCLFlBQVk7SUFDWixVQUFVO0lBQ1YsZ0JBQWdCO0lBQ2hCLGlCQUFpQjtJQUNqQixtQkFBbUI7SUFDbkIsU0FBUztJQUNULGtCQUFrQjtJQUNsQixvQkFBb0I7Q0FDdkI7QUFFRDtJQUNJLCtCQUErQjtDQUNsQztBQUVEO0lBQ0ksaUJBQWlCO0lBQ2pCLGNBQWM7Q0FDakI7QUFFRDtJQUNJLGlCQUFpQjtJQUNqQixjQUFjO0NBQ2pCO0FBR0Q7SUFDSSxpQkFBaUI7SUFDakIsbUVBQW1FO0NBQ3RFO0FBQ0Q7SUFDSSxhQUFhO0lBQ2IsbUJBQW1CO0lBQ25CLDhEQUFtRjtDQUN0RjtBQUNEO0lBQ0ksZ0VBQXFGO0NBQ3hGO0FBQ0Q7SUFDSSxZQUFZO0lBQ1osbUJBQW1CO0lBQ25CLGlCQUFpQjtDQUNwQjtBQUNEO0lBQ0ksWUFBWTtJQUNaLGFBQWE7SUFDYixjQUFjO0lBQ2QsZUFBZTtDQUNsQjtBQUNEO0lBQ0ksV0FBVztJQUNYLGFBQWE7Q0FDaEI7QUFDRDtJQUNJLGdCQUFnQjtDQUNuQjtBQUNEO0lBQ0ksb0RBQXlFO0lBQ3pFLHNCQUFzQjtDQUN6QjtBQUNEO0lBQ0ksOERBQW1GO0lBQ25GLHNCQUFzQjtDQUN6QjtBQUNEO0lBQ0ksc0RBQTJFO0lBQzNFLHNCQUFzQjtDQUN6QjtBQUNEO0lBQ0ksb0RBQXlFO0lBQ3pFLHNCQUFzQjtDQUN6QjtBQUNEO0lBQ0ksMENBQStEO0NBQ2xFO0FBQ0Q7SUFDSSx5REFBOEU7SUFDOUUsc0JBQXNCO0NBQ3pCO0FBRUQ7SUFDSSxnQ0FBZ0M7SUFDaEMsZUFBZTtJQUNmLDBCQUEwQjtDQUM3QjtBQUVEO0lBQ0ksaUJBQWlCO0lBQ2pCLFlBQVk7SUFDWixZQUFZO0NBQ2Y7QUFFRDtJQUNJLGlCQUFpQjtDQUNwQjtBQUNEO0lBQ0ksMEJBQTBCO0NBQzdCO0FBQ0Q7SUFDSSxtQkFBbUI7Q0FDdEI7QUFDRDtJQUNJLG1CQUFtQjtJQUNuQixvQkFBb0I7Q0FDdkI7QUFDRDtJQUNJOztRQUVJLGtCQUFrQjtRQUNsQixtQkFBbUI7S0FDdEI7Q0FDSjtBQUNEO0lBQ0ksbUJBQW1CO0NBQ3RCO0FBQ0Q7SUFDSTtRQUNJLGtCQUFrQjtLQUNyQjtDQUNKO0FBQ0Q7SUFDSSxlQUFlO0NBQ2xCO0FBRUQ7O0lBRUksbUJBQW1CO0lBQ25CLG1CQUFtQjtJQUNuQiwyQkFBMkI7SUFDM0Isb0JBQW9CO0NBQ3ZCO0FBQ0Q7O0lBRUksWUFBWTtJQUNaLFlBQVk7SUFDWixXQUFXO0lBQ1gsb0JBQW9CO0lBQ3BCLGlCQUFpQjtJQUNqQixtQkFBbUI7SUFDbkIsUUFBUTtJQUNSLE1BQU07SUFDTixTQUFTO0lBQ1QsWUFBWTtDQUNmO0FBQ0Q7SUFDSSxvQkFBb0I7Q0FDdkI7QUFDRDtJQUNJLG9CQUFvQjtDQUN2QjtBQUNEO0lBQ0ksZUFBZTtDQUNsQjtBQUNEO0lBQ0ksZUFBZTs7Q0FFbEI7QUFDRDtJQUNJLGFBQWE7Q0FDaEI7QUFDRDtJQUNJLHFCQUFxQjtJQUNyQixvQ0FBb0M7SUFDcEMsV0FBVztJQUNYLFlBQVk7SUFDWixrQkFBa0I7Q0FDckI7QUFDRDs7SUFFSSxhQUFhO0NBQ2hCO0FBQ0Q7O0lBRUksV0FBVztJQUNYLHlCQUF5QjtJQUN6QixtQkFBbUI7SUFDbkIsWUFBWTtJQUNaLFdBQVc7SUFDWCxrQkFBa0I7SUFDbEIsT0FBTztDQUNWO0FBQ0Q7SUFDSSw0QkFBNEI7SUFDNUIsMkJBQTJCO0lBQzNCLE1BQU07Q0FDVDtBQUNEO0lBQ0kseUJBQXlCO0lBQ3pCLDJCQUEyQjtJQUMzQixTQUFTO0NBQ1o7QUFDRDtJQUNJLDRCQUE0QjtDQUMvQjtBQUNEO0lBQ0kseUJBQXlCO0NBQzVCO0FBQ0Q7SUFDSSxxQkFBcUI7Q0FDeEI7QUFDRDtJQUNJLHdCQUF3QjtJQUN4QixtQkFBbUI7Q0FDdEI7QUFDRDtJQUNJLGFBQWE7SUFDYixzQkFBc0I7SUFDdEIsWUFBWTtDQUNmO0FBQ0Q7O0lBRUk7QUFDSjtJQUNJLGNBQWM7SUFDZCxTQUFTO0lBQ1QsVUFBVTtDQUNiO0FBQ0Q7SUFDSSxrQkFBa0I7Q0FDckI7QUFDRDtJQUNJLGFBQWE7SUFDYixnQkFBZ0I7SUFDaEIsZ0JBQWdCO0lBQ2hCLDBCQUEwQjtDQUM3QjtBQUNEO0lBQ0ksY0FBYztDQUNqQjtBQUNEO0lBQ0ksdUJBQXVCO0lBQ3ZCLGdCQUFnQjtDQUNuQjtBQUNEO0lBQ0ksd0JBQXdCO0lBQ3hCLHFDQUFxQztJQUNyQyxvQkFBb0I7Q0FDdkI7QUFDRDtJQUNJLG9CQUFvQjtDQUN2QjtBQUNEO0lBQ0ksaUJBQWlCO0NBQ3BCO0FBQ0Q7OztJQUdJO0FBSUo7SUFDSSxhQUFhO0lBQ2Isb0JBQW9CO0lBQ3BCLGdCQUFnQjtJQUNoQiw0QkFBNEI7SUFDNUIsb0NBQW9DO0lBQ3BDLDRCQUE0QjtDQUMvQjtBQUNEO0lBQ0ksZ0JBQWdCO0lBQ2hCLFdBQVc7SUFDWCx3Q0FBd0M7SUFDeEMsMkRBQXNGO0lBQ3RGLHNCQUFzQjtJQUN0QixtQkFBbUI7Q0FDdEI7QUFDRDtJQUNJLGdCQUFnQjtDQUNuQjtBQUNEO0lBQ0ksWUFBWTtJQUNaLGVBQWU7SUFDZix3QkFBd0I7SUFDeEIsbUJBQW1CO0lBQ25CLFlBQVk7SUFDWix3Q0FBd0M7SUFDeEMsZ0JBQWdCO0lBQ2hCLDBCQUEwQjtJQUMxQiw2QkFBNkI7SUFDN0IsaUNBQWlDO0lBQ2pDLHNCQUFzQjtJQUN0QixvQkFBb0I7SUFDcEIsK0JBQStCO0lBQy9CLGdCQUFnQjtJQUNoQixrQ0FBa0M7SUFDbEMsa0JBQWtCO0NBQ3JCO0FBQ0Q7SUFDSSxzQkFBc0I7SUFDdEIsa0NBQWtDO0NBQ3JDO0FBQ0Q7SUFDSSxxQ0FBZ0U7Q0FDbkU7QUFFRDtJQUNJLHlDQUFvRTtJQUNwRSxzQkFBc0I7SUFDdEIsaUNBQWlDO0NBQ3BDO0FBSUQ7SUFDSSxhQUFhO0lBQ2Isa0JBQWtCO0lBQ2xCLGlCQUFpQjtDQUNwQjtBQUNEO0lBQ0ksd0JBQXdCO0lBQ3hCLGlCQUFpQjtJQUNqQixZQUFZO0NBQ2Y7QUFFRDtJQUNJLGdCQUFnQjtJQUNoQix1QkFBdUI7Q0FDMUI7QUFDRDtJQUNJLGVBQWU7SUFDZixrQkFBa0I7SUFDbEIsYUFBYTtJQUNiLG1CQUFtQjtJQUNuQixVQUFVO0NBQ2I7QUFDRDtJQUNJLHFCQUFxQjtDQUN4QjtBQUNEO0lBQ0ksMEJBQTBCO0NBQzdCO0FBQ0Q7O0lBRUksMEJBQTBCO0NBQzdCO0FBQ0Q7SUFDSSxjQUFjO0lBQ2QsaUJBQWlCO0lBQ2pCLDJCQUEyQjtJQUMzQixnQkFBZ0I7Q0FDbkI7QUFDRDtJQUNJLGNBQWM7SUFDZCxpQkFBaUI7SUFDakIsZUFBZTtDQUNsQjtBQUNEO0lBQ0ksaUJBQWlCO0lBQ2pCLDBCQUEwQjtJQUMxQixnQkFBZ0I7Q0FDbkI7QUFDRDtJQUNJLGdCQUFnQjtJQUNoQix5Q0FBeUM7Q0FDNUM7QUFDRDtJQUNJLFVBQVU7SUFDVixVQUFVO0lBQ1YsYUFBYTtJQUNiLFVBQVU7SUFDVixZQUFZO0NBQ2Y7QUFDRDtJQUNJLGFBQWE7SUFDYiwyQkFBMkI7SUFDM0IsbUJBQW1CO0lBQ25CLGFBQWE7SUFDYix3QkFBd0I7Q0FDM0I7QUFDRDtJQUNJLGlCQUFpQjtDQUNwQjtBQUNEO0lBQ0ksY0FBYztJQUNkLFVBQVU7SUFDVixRQUFRO0lBQ1IsU0FBUztJQUNULGdCQUFnQjtJQUNoQixXQUFXO0lBQ1gsb0JBQW9CO0NBQ3ZCO0FBQ0Q7SUFDSSxhQUFhO0lBQ2IsWUFBWTtJQUNaLDBCQUEwQjtJQUMxQixhQUFhO0lBQ2IsWUFBWTtDQUNmO0FBQ0Q7SUFDSSxtQkFBbUI7Q0FDdEI7QUFDRDtJQUNJLFdBQVc7SUFDWCxnQkFBZ0I7SUFDaEIsU0FBUztJQUNULGFBQWE7Q0FDaEIiLCJmaWxlIjoic3JjL2FwcC91c2VyLW1hbmFnZW1lbnQvYWRtaW4vYWRtaW4uY29tcG9uZW50LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5sb2dpbi1hZG1pbi1jb250YWluZXIuYWRtaW4tc2VjdGlvbi1hY3RpdmUgLmNvbnRhaW5lcntcclxuICAgIG1heC13aWR0aDogMTAwJTtcclxuICAgIHBhZGRpbmc6IDAgMzBweDtcclxufVxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyLmFkbWluLXNlY3Rpb24tYWN0aXZlIC5jb250YWluZXIuaW5uZXItcGFnZS1jb250YWluZXJ7XHJcbiAgICBwYWRkaW5nOiAwO1xyXG59XHJcbi5sb2dpbi1hZG1pbi1jb250YWluZXIgLmNkay1vdmVybGF5LXBhbmUgLmFkbWluLWNvbnRhaW5lciB7XHJcbiAgICBwYWRkaW5nOiAwO1xyXG59XHJcbi5sb2dpbi1hZG1pbi1jb250YWluZXIgLmFkbWluLWNvbnRhaW5lcntcclxuICAgIHBhZGRpbmc6IDAgMzBweDtcclxufVxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAudGl0bGUtc2VjdGlvbntcclxuICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbiFpbXBvcnRhbnQ7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgaGVpZ2h0OiBhdXRvO1xyXG59XHJcblxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAudGl0bGUtc2VjdGlvbiAuZmlsdGVyLXNlY3Rpb24ge1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIGJvcmRlcjogbm9uZTtcclxuICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcclxuICAgIHdpZHRoOiAxMDAlO1xyXG59XHJcblxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAudGl0bGUtc2VjdGlvbiAuZmlsdGVyLXNlY3Rpb24gLmlucHV0LWdyb3VwIHtcclxuICAgIHdpZHRoOiBhdXRvO1xyXG4gICAgcGFkZGluZy1yaWdodDogMzBweDtcclxuICAgIGJvcmRlcjogI0Q2REZFNCAxcHggc29saWQ7XHJcbiAgICAvKiBiYWNrZ3JvdW5kOnVybCguLi8uLi8uLi9hc3NldHMvaW1hZ2VzL3NlYXJjaC1pY29uLnBuZykgbm8tcmVwZWF0IDIwcHggY2VudGVyOyAqL1xyXG4gICAgYmFja2dyb3VuZDojZmZmIHVybCguLi8uLi8uLi9hc3NldHMvaW1hZ2VzL2ljb24tc2VhcmNoLXJlZC5wbmcpIG5vLXJlcGVhdCBjYWxjKDEwMCUgLSAxMHB4KSBjZW50ZXI7XHJcbn1cclxuXHJcbi5sb2dpbi1hZG1pbi1jb250YWluZXIgLmFkbWluLWNvbnRhaW5lciAudXNlci1saXN0IC50aXRsZS1zZWN0aW9uIC5maWx0ZXItc2VjdGlvbiAuaW5wdXQtZ3JvdXA6bm90KDpsYXN0LWNoaWxkKSB7XHJcbiAgICBtYXJnaW4tcmlnaHQ6IDMwcHg7XHJcbn1cclxuXHJcbi5sb2dpbi1hZG1pbi1jb250YWluZXIgLmFkbWluLWNvbnRhaW5lciAudXNlci1saXN0IC50aXRsZS1zZWN0aW9uIC5maWx0ZXItc2VjdGlvbiAuaW5wdXQtZ3JvdXAgLmZvcm0tY29udHJvbCB7XHJcbiAgICBoZWlnaHQ6IDM4cHg7XHJcbiAgICBwYWRkaW5nLWJvdHRvbTogOHB4O1xyXG4gICAgYm9yZGVyOiBub25lO1xyXG59XHJcblxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAudGl0bGUtc2VjdGlvbiAuZmlsdGVyLXNlY3Rpb24gLmlucHV0LWdyb3VwIC5mb3JtLWNvbnRyb2w6Zm9jdXMge1xyXG4gICAgYm94LXNoYWRvdzogbm9uZTtcclxufVxyXG5cclxuLmxvZ2luLWFkbWluLWNvbnRhaW5lciAuYWRtaW4tY29udGFpbmVyIC51c2VyLWxpc3QgLnRpdGxlLXNlY3Rpb24gLmZpbHRlci1zZWN0aW9uIC5pbnB1dC1ncm91cCAuY2xlYXItc2VhcmNoIHtcclxuICAgIHdpZHRoOiAzMHB4O1xyXG4gICAgaGVpZ2h0OiAxMDAlO1xyXG4gICAgcGFkZGluZzogMDtcclxuICAgIGZvbnQtc2l6ZTogMjhweDtcclxuICAgIGNvbG9yOiAjOTk5O1xyXG4gICAgYm9yZGVyOiAwO1xyXG4gICAgY3Vyc29yOiBwb2ludGVyO1xyXG4gICAgYmFja2dyb3VuZDogI2ZmZjtcclxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgIHJpZ2h0OiAwO1xyXG4gICAgbGluZS1oZWlnaHQ6IDE2cHg7XHJcbiAgICBwYWRkaW5nLWJvdHRvbTogNHB4O1xyXG59XHJcblxyXG4uaGlnaGxpZ2h0IHtcclxuICAgIGJhY2tncm91bmQ6ICNjY2VkZmYgIWltcG9ydGFudDtcclxufVxyXG5cclxuLmxvZ2luLWFkbWluLWNvbnRhaW5lciAuYWRtaW4tY29udGFpbmVyIC51c2VyLWxpc3QgLnRpdGxlLXNlY3Rpb24gLmZpbHRlci1zZWN0aW9uIC5pbnB1dC1ncm91cCAuY2xlYXItc2VhcmNoOmZvY3VzIHtcclxuICAgIGJveC1zaGFkb3c6IG5vbmU7XHJcbiAgICBvdXRsaW5lOiBub25lO1xyXG59XHJcblxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAudGl0bGUtc2VjdGlvbiAuZmlsdGVyLXNlY3Rpb24gLmlucHV0LWdyb3VwIC5jbGVhci1zZWFyY2g6aG92ZXIge1xyXG4gICAgYm94LXNoYWRvdzogbm9uZTtcclxuICAgIG91dGxpbmU6IG5vbmU7XHJcbn1cclxuXHJcblxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAudGl0bGUtc2VjdGlvbiBoNHtcclxuICAgIHBhZGRpbmctdG9wOiA1cHg7XHJcbiAgICBmb250LXNpemU6IGNhbGMoMjJweCArICgyNiAtIDIyKSAqICgxMDB2dyAtIDMyMHB4KSAvICgxOTIwIC0gMzIwKSk7XHJcbn1cclxuLmxvZ2luLWFkbWluLWNvbnRhaW5lciAuYWRtaW4tY29udGFpbmVyIC51c2VyLWxpc3QgLnRpdGxlLXNlY3Rpb24gLmJ0bntcclxuICAgIGhlaWdodDogNDBweDtcclxuICAgIHBhZGRpbmctbGVmdDogNjBweDtcclxuICAgIGJhY2tncm91bmQ6ICMwNjY1OUIgdXJsKC4uLy4uLy4uL2Fzc2V0cy9pbWFnZXMvYWRkLWljb24ucG5nKSBuby1yZXBlYXQgMjBweCBjZW50ZXI7XHJcbn1cclxuLmxvZ2luLWFkbWluLWNvbnRhaW5lciAuYWRtaW4tY29udGFpbmVyIC51c2VyLWxpc3QgLnRpdGxlLXNlY3Rpb24gLmJ0bi5sb2Nrb3V0LWJ0bntcclxuICAgIGJhY2tncm91bmQ6ICMwNjY1OUIgdXJsKC4uLy4uLy4uL2Fzc2V0cy9pbWFnZXMvbG9jay13aGl0ZS5wbmcpIG5vLXJlcGVhdCAyMHB4IGNlbnRlcjtcclxufVxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAucm93IC5jb2w6Zmlyc3QtY2hpbGR7XHJcbiAgICB3aWR0aDogNjBweDsgXHJcbiAgICBmbGV4LWdyb3c6IGluaGVyaXQ7IFxyXG4gICAgZmxleC1iYXNpczogYXV0bztcclxufVxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAuYWN0aW9uc3tcclxuICAgIHdpZHRoOjEwMHB4O1xyXG4gICAgaGVpZ2h0OiAyNHB4O1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIG1hcmdpbjogMCBhdXRvO1xyXG59XHJcbi5sb2dpbi1hZG1pbi1jb250YWluZXIgLmFkbWluLWNvbnRhaW5lciAudXNlci1saXN0IC5hY3Rpb25zIHNwYW57XHJcbiAgICB3aWR0aDoyNHB4O1xyXG4gICAgaGVpZ2h0OiAyNHB4O1xyXG59XHJcbi5sb2dpbi1hZG1pbi1jb250YWluZXIgLmFkbWluLWNvbnRhaW5lciAudXNlci1saXN0IC5hY3Rpb25zIHNwYW46bm90KC5kaXNhYmxlKXtcclxuICAgIGN1cnNvcjogcG9pbnRlcjtcclxufVxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAuYWN0aW9ucyAuZWRpdHtcclxuICAgIGJhY2tncm91bmQ6IHVybCguLi8uLi8uLi9hc3NldHMvaW1hZ2VzL2VkaXQucG5nKSBuby1yZXBlYXQgY2VudGVyIGNlbnRlcjtcclxuICAgIGJhY2tncm91bmQtc2l6ZTogMTAwJTtcclxufVxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAuYWN0aW9ucyAuY29weXtcclxuICAgIGJhY2tncm91bmQ6IHVybCguLi8uLi8uLi9hc3NldHMvaW1hZ2VzL2NvcHktY2xpcGJvYXJkLnBuZykgbm8tcmVwZWF0IGNlbnRlciBjZW50ZXI7XHJcbiAgICBiYWNrZ3JvdW5kLXNpemU6IDEwMCU7XHJcbn1cclxuLmxvZ2luLWFkbWluLWNvbnRhaW5lciAuYWRtaW4tY29udGFpbmVyIC51c2VyLWxpc3QgLmFjdGlvbnMgLmRlbGV0ZXtcclxuICAgIGJhY2tncm91bmQ6IHVybCguLi8uLi8uLi9hc3NldHMvaW1hZ2VzL2RlbGV0ZS5wbmcpIG5vLXJlcGVhdCBjZW50ZXIgY2VudGVyO1xyXG4gICAgYmFja2dyb3VuZC1zaXplOiAxMDAlO1xyXG59XHJcbi5sb2dpbi1hZG1pbi1jb250YWluZXIgLmFkbWluLWNvbnRhaW5lciAudXNlci1saXN0IC5hY3Rpb25zIC5sb2dze1xyXG4gICAgYmFja2dyb3VuZDogdXJsKC4uLy4uLy4uL2Fzc2V0cy9pbWFnZXMvbG9ncy5wbmcpIG5vLXJlcGVhdCBjZW50ZXIgY2VudGVyO1xyXG4gICAgYmFja2dyb3VuZC1zaXplOiAxMDAlO1xyXG59XHJcbi5sb2dpbi1hZG1pbi1jb250YWluZXIgLmFkbWluLWNvbnRhaW5lciAudXNlci1saXN0IC5hY3Rpb25zIC5sb2dzLmRpc2FibGV7XHJcbiAgICBiYWNrZ3JvdW5kLWltYWdlOnVybCguLi8uLi8uLi9hc3NldHMvaW1hZ2VzL2xvZ3MtZGlzYWJsZWQucG5nKTtcclxufVxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAuYWN0aW9ucyAuaW5mb3tcclxuICAgIGJhY2tncm91bmQ6IHVybCguLi8uLi8uLi9hc3NldHMvaW1hZ2VzL2luZm8taWNvbi5wbmcpIG5vLXJlcGVhdCBjZW50ZXIgY2VudGVyO1xyXG4gICAgYmFja2dyb3VuZC1zaXplOiAxMDAlO1xyXG59XHJcblxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAubGlzdC10YWJsZSB7XHJcbiAgICBtYXgtaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMzUwcHgpO1xyXG4gICAgb3ZlcmZsb3c6IGF1dG87XHJcbiAgICBib3JkZXI6ICNFNEU0RTQgMXB4IHNvbGlkO1xyXG59XHJcblxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAubGlzdC10YWJsZSAubWF0LXBhZ2luYXRvci5zdGlja3ktcGFnaW5hdGlvbiB7XHJcbiAgICBwb3NpdGlvbjogc3RpY2t5O1xyXG4gICAgYm90dG9tOiAwcHg7XHJcbiAgICB6LWluZGV4OiAxMDtcclxufVxyXG5cclxuLmxvZ2luLWFkbWluLWNvbnRhaW5lciAuYWRtaW4tY29udGFpbmVyIC51c2VyLWxpc3QgLm1hdC10YWJsZXtcclxuICAgIGJveC1zaGFkb3c6IG5vbmU7XHJcbn1cclxuLmxvZ2luLWFkbWluLWNvbnRhaW5lciAuYWRtaW4tY29udGFpbmVyIC51c2VyLWxpc3QgLm1hdC10YWJsZSB0Ym9keSB0cjpudGgtY2hpbGQoZXZlbikge1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogI0Y1RjVGNTtcclxufVxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAubWF0LXRhYmxlICAubWF0LWNvbHVtbi1tb3Jle1xyXG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xyXG59XHJcbi5sb2dpbi1hZG1pbi1jb250YWluZXIgLmFkbWluLWNvbnRhaW5lciAudXNlci1saXN0IC5tYXQtdGFibGUgdGgubWF0LWhlYWRlci1jZWxse1xyXG4gICAgcGFkZGluZy1sZWZ0OiAxMHB4O1xyXG4gICAgcGFkZGluZy1yaWdodDogMTBweDtcclxufVxyXG5AbWVkaWEgKG1heC13aWR0aDogMTQ0M3B4KXtcclxuICAgIC5sb2dpbi1hZG1pbi1jb250YWluZXIgLmFkbWluLWNvbnRhaW5lciAudXNlci1saXN0IC5hZG1pbi11c2VyLWxpc3QgLm1hdC10YWJsZSB0aC5tYXQtaGVhZGVyLWNlbGwsXHJcbiAgICAubG9naW4tYWRtaW4tY29udGFpbmVyIC5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAuYWRtaW4tdXNlci1saXN0IC5tYXQtdGFibGUgdGJvZHkgdGR7XHJcbiAgICAgICAgcGFkZGluZy1sZWZ0OiA1cHg7XHJcbiAgICAgICAgcGFkZGluZy1yaWdodDogNXB4O1xyXG4gICAgfVxyXG59XHJcbi5sb2dpbi1hZG1pbi1jb250YWluZXIgLmFkbWluLWNvbnRhaW5lciAudXNlci1saXN0IC5tYXQtdGFibGUgIHRoLm1hdC1oZWFkZXItY2VsbDpmaXJzdC1vZi10eXBle1xyXG4gICAgcGFkZGluZy1sZWZ0OiAyNHB4O1xyXG59XHJcbkBtZWRpYSAobWF4LXdpZHRoOiAxNDQzcHgpe1xyXG4gICAgLmxvZ2luLWFkbWluLWNvbnRhaW5lciAuYWRtaW4tY29udGFpbmVyIC51c2VyLWxpc3QgLmFkbWluLXVzZXItbGlzdCAubWF0LXRhYmxlICB0aC5tYXQtaGVhZGVyLWNlbGw6Zmlyc3Qtb2YtdHlwZXtcclxuICAgICAgICBwYWRkaW5nLWxlZnQ6IDVweDtcclxuICAgIH1cclxufVxyXG4udXNlci1kaWFsb2ctY29udGFpbmVyIC5tYXQtZGlhbG9nLWNvbnRhaW5lcntcclxuICAgIGNvbG9yOiAjMDAwMDAwO1xyXG59XHJcblxyXG4udXNlci1zdGF0dXMuYWN0aXZlLFxyXG4udXNlci1zdGF0dXMuaW5hY3RpdmV7XHJcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XHJcbiAgICBwYWRkaW5nLWxlZnQ6IDE2cHg7XHJcbiAgICB0ZXh0LXRyYW5zZm9ybTogY2FwaXRhbGl6ZTtcclxuICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7XHJcbn1cclxuLnVzZXItc3RhdHVzLmFjdGl2ZTpiZWZvcmUsXHJcbi51c2VyLXN0YXR1cy5pbmFjdGl2ZTpiZWZvcmV7XHJcbiAgICBjb250ZW50OiAnJztcclxuICAgIGhlaWdodDogOHB4O1xyXG4gICAgd2lkdGg6IDhweDtcclxuICAgIGJvcmRlci1yYWRpdXM6IDE2cHg7XHJcbiAgICBiYWNrZ3JvdW5kOiAjY2NjO1xyXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgbGVmdDogMDtcclxuICAgIHRvcDowO1xyXG4gICAgYm90dG9tOjA7XHJcbiAgICBtYXJnaW46YXV0bztcclxufVxyXG4udXNlci1zdGF0dXMuYWN0aXZlOmJlZm9yZXtcclxuICAgIGJhY2tncm91bmQ6ICMxN0FDMkU7XHJcbn1cclxuLnVzZXItc3RhdHVzLmluYWN0aXZlOmJlZm9yZXtcclxuICAgIGJhY2tncm91bmQ6ICNGNDU3NTc7XHJcbn1cclxuLnVzZXItc3RhdHVzLmluYWN0aXZle1xyXG4gICAgY29sb3I6ICNGNDU3NTc7XHJcbn1cclxuLnVzZXItc3RhdHVzLmFjdGl2ZXtcclxuICAgIGNvbG9yOiAjMTdBQzJFO1xyXG4gICAgXHJcbn1cclxuLmhpZGV7XHJcbiAgICBkaXNwbGF5OiBub25lXHJcbn1cclxuLm1hdC1zb3J0LWhlYWRlci1jb250YWluZXIgLm1hdC1zb3J0LWhlYWRlci1hcnJvd3tcclxuICAgIG9wYWNpdHk6MSAhaW1wb3J0YW50O1xyXG4gICAgdHJhbnNmb3JtOnRyYW5zbGF0ZVkoMCUpICFpbXBvcnRhbnQ7XHJcbiAgICB3aWR0aDoxMnB4O1xyXG4gICAgaGVpZ2h0OjI0cHg7XHJcbiAgICBwb3NpdGlvbjpyZWxhdGl2ZTtcclxufVxyXG4ubWF0LXNvcnQtaGVhZGVyLWNvbnRhaW5lciAubWF0LXNvcnQtaGVhZGVyLWFycm93IC5tYXQtc29ydC1oZWFkZXItc3RlbSxcclxuLm1hdC1zb3J0LWhlYWRlci1jb250YWluZXIgLm1hdC1zb3J0LWhlYWRlci1hcnJvdyAubWF0LXNvcnQtaGVhZGVyLWluZGljYXRvcntcclxuICAgIGRpc3BsYXk6bm9uZTtcclxufVxyXG4ubWF0LXNvcnQtaGVhZGVyLWNvbnRhaW5lciAubWF0LXNvcnQtaGVhZGVyLWFycm93OmJlZm9yZSxcclxuLm1hdC1zb3J0LWhlYWRlci1jb250YWluZXIgLm1hdC1zb3J0LWhlYWRlci1hcnJvdzphZnRlcntcclxuICAgIGNvbnRlbnQ6XCJcIjtcclxuICAgIGJvcmRlci1jb2xvcjp0cmFuc3BhcmVudDtcclxuICAgIGJvcmRlci1zdHlsZTpzb2xpZDtcclxuICAgIGhlaWdodDoxMXB4O1xyXG4gICAgd2lkdGg6MTJweDtcclxuICAgIHBvc2l0aW9uOmFic29sdXRlO1xyXG4gICAgbGVmdDowO1xyXG59XHJcbi5tYXQtc29ydC1oZWFkZXItY29udGFpbmVyIC5tYXQtc29ydC1oZWFkZXItYXJyb3c6YmVmb3Jle1xyXG4gICAgYm9yZGVyLWJvdHRvbS1jb2xvcjojQkRCREJEO1xyXG4gICAgYm9yZGVyLXdpZHRoOjAgNnB4IDZweCA2cHg7XHJcbiAgICB0b3A6MDtcclxufVxyXG4ubWF0LXNvcnQtaGVhZGVyLWNvbnRhaW5lciAubWF0LXNvcnQtaGVhZGVyLWFycm93OmFmdGVye1xyXG4gICAgYm9yZGVyLXRvcC1jb2xvcjojQkRCREJEO1xyXG4gICAgYm9yZGVyLXdpZHRoOjZweCA2cHggMCA2cHg7XHJcbiAgICBib3R0b206MDtcclxufVxyXG4ubWF0LWhlYWRlci1yb3cgdGhbYXJpYS1zb3J0PVwiYXNjZW5kaW5nXCJdIC5tYXQtc29ydC1oZWFkZXItY29udGFpbmVyIC5tYXQtc29ydC1oZWFkZXItYXJyb3c6YmVmb3Jle1xyXG4gICAgYm9yZGVyLWJvdHRvbS1jb2xvcjojMDY2NTlCO1xyXG59XHJcbi5tYXQtaGVhZGVyLXJvdyB0aFthcmlhLXNvcnQ9XCJkZXNjZW5kaW5nXCJdIC5tYXQtc29ydC1oZWFkZXItY29udGFpbmVyIC5tYXQtc29ydC1oZWFkZXItYXJyb3c6YWZ0ZXJ7XHJcbiAgICBib3JkZXItdG9wLWNvbG9yOiMwNjY1OUI7XHJcbn1cclxuLm1hdC1zb3J0LWhlYWRlci1jb250YWluZXIubWF0LXNvcnQtaGVhZGVyLXNvcnRlZCAubWF0LXNvcnQtaGVhZGVyLWFycm93e1xyXG4gICAgb3BhY2l0eToxICFpbXBvcnRhbnQ7XHJcbn1cclxuLm1hdC1mb290ZXItcm93IG1hdC1mb290ZXItY2VsbHtcclxuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG4gICAgZm9udC1zdHlsZTogaXRhbGljO1xyXG59XHJcbmFwcC1oaXN0b3J5LWRpYWxvZy1ib3h7XHJcbiAgICBkaXNwbGF5OmZsZXg7XHJcbiAgICBmbGV4LWRpcmVjdGlvbjpjb2x1bW47XHJcbiAgICBoZWlnaHQ6MTAwJTtcclxufVxyXG4vKiBhcHAtaGlzdG9yeS1kaWFsb2ctYm94ID4gZGl2e1xyXG4gICAgZmxleDowO1xyXG59ICovXHJcbmFwcC1oaXN0b3J5LWRpYWxvZy1ib3ggPiBtYXQtZGlhbG9nLWNvbnRlbnQubWF0LWRpYWxvZy1jb250ZW50e1xyXG4gICAgZmxleDoxIDEgYXV0bztcclxuICAgIG1hcmdpbjowO1xyXG4gICAgcGFkZGluZzowO1xyXG59XHJcbmFwcC1oaXN0b3J5LWRpYWxvZy1ib3ggPiBtYXQtZGlhbG9nLWNvbnRlbnQubWF0LWRpYWxvZy1jb250ZW50IHRoLm1hdC1oZWFkZXItY2VsbHtcclxuICAgIHBhZGRpbmctbGVmdDoxMHB4O1xyXG59XHJcbi5hZG1pbi1jb250YWluZXIgLnVzZXItbGlzdCAudGl0bGUtc2VjdGlvbiBidXR0b24ge1xyXG4gICAgaGVpZ2h0OiAxMDAlO1xyXG4gICAgcGFkZGluZzogMCAzMHB4O1xyXG4gICAgZm9udC1zaXplOiAxNnB4O1xyXG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcclxufVxyXG4uYWRtaW4tY29udGFpbmVyIC51c2VyLWxpc3QgLnRpdGxlLXNlY3Rpb24gYnV0dG9uOmZvY3VzIHtcclxuICAgIG91dGxpbmU6IG5vbmU7XHJcbn1cclxuLmxvZ2luLWFkbWluLWNvbnRhaW5lciAuY2RrLW92ZXJsYXktcGFuZXtcclxuICAgIGhlaWdodDogYXV0byFpbXBvcnRhbnQ7XHJcbiAgICBtYXgtaGVpZ2h0OiA5MCU7XHJcbn1cclxuLmxvZ2luLWFkbWluLWNvbnRhaW5lciAuY2RrLW92ZXJsYXktcGFuZSAubWF0LWRpYWxvZy1jb250YWluZXJ7XHJcbiAgICBwYWRkaW5nOiAzMHB4IWltcG9ydGFudDtcclxuICAgIGJveC1zaGFkb3c6IDAgMCAxMnB4IHJnYmEoMCwwLDAsLjE2KTtcclxuICAgIGJvcmRlci1yYWRpdXM6IDIwcHg7XHJcbn1cclxuLmxvZ2luLWFkbWluLWNvbnRhaW5lciAuY2RrLW92ZXJsYXktcGFuZSAubWF0LWRpYWxvZy1jb250ZW50e1xyXG4gICAgbWF4LWhlaWdodDogaW5oZXJpdDtcclxufVxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5jZGstb3ZlcmxheS1wYW5lIC5tYXQtZGlhbG9nLWNvbnRhaW5lciAubWF0LWRpYWxvZy1jb250ZW50e1xyXG4gICAgbWF4LWhlaWdodDogNjV2aDtcclxufVxyXG4vKiAubG9naW4tYWRtaW4tY29udGFpbmVyIC5jZGstb3ZlcmxheS1wYW5lIC5tYXQtZGlhbG9nLWNvbnRlbnQgLnVzZXItbGlzdCAubGlzdC10YWJsZXtcclxuICAgIG1heC1oZWlnaHQ6Y2FsYygxMDB2aCAtIDI2MHB4KTtcclxuICAgIG1pbi1oZWlnaHQ6IDMzNnB4O1xyXG59ICovXHJcblxyXG5cclxuXHJcbi5sb2dpbi1hZG1pbi1jb250YWluZXIgLnJpZ2h0LW5hdntcclxuICAgIHdpZHRoOiAxNjBweDtcclxuICAgIGJhY2tncm91bmQ6ICM4YzlmYWI7XHJcbiAgICBwYWRkaW5nOiAwIDE1cHg7XHJcbiAgICBoZWlnaHQ6IGNhbGMoMTAwdmggLSAyMTRweCk7XHJcbiAgICBib3gtc2hhZG93OiAtNHB4IDBweCAxMnB4ICMwMDAwMDAxZjtcclxuICAgIGJvcmRlci1sZWZ0OiAxcHggc29saWQgI2ZmZjtcclxufVxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5yaWdodC1uYXYgaDZ7XHJcbiAgICBmb250LXNpemU6IDE4cHg7XHJcbiAgICBjb2xvcjojZmZmO1xyXG4gICAgZm9udC1mYW1pbHk6ICdESU5Qcm9NZWRpdW0nLCBzYW5zLXNlcmlmO1xyXG4gICAgYmFja2dyb3VuZDogdXJsKC4uLy4uLy4uL2Fzc2V0cy9pbWFnZXMvYWRtaW4vY29uZmlndXJhdGlvbi5wbmcpIGxlZnQgY2VudGVyIG5vLXJlcGVhdDtcclxuICAgIGJhY2tncm91bmQtc2l6ZTogMjJweDtcclxuICAgIHBhZGRpbmctbGVmdDogMjhweDtcclxufVxyXG4ubG9naW4tYWRtaW4tY29udGFpbmVyIC5yaWdodC1uYXYgLmNvbmZpZ3VyYXRpb25zLWxpc3R7XHJcbiAgICBwYWRkaW5nOiAyNXB4IDA7XHJcbn1cclxuLmxvZ2luLWFkbWluLWNvbnRhaW5lciAucmlnaHQtbmF2IC50aHVtYnN7XHJcbiAgICB3aWR0aDogMTAwJTtcclxuICAgIGRpc3BsYXk6IGJsb2NrO1xyXG4gICAgcGFkZGluZzogNTBweCAxMHB4IDEwcHg7XHJcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XHJcbiAgICBjb2xvcjogI2ZmZjtcclxuICAgIGZvbnQtZmFtaWx5OiAnRElOUHJvTWVkaXVtJywgc2Fucy1zZXJpZjtcclxuICAgIGZvbnQtc2l6ZTogMTVweDsgICAgXHJcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjOWZiMmJmO1xyXG4gICAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDtcclxuICAgIGJhY2tncm91bmQtcG9zaXRpb246IGNlbnRlciAxMHB4O1xyXG4gICAgYmFja2dyb3VuZC1zaXplOiAzMHB4O1xyXG4gICAgbWFyZ2luLWJvdHRvbTogMjBweDtcclxuICAgIGJveC1zaGFkb3c6IDAgMCAxMHB4ICMwMDAwMDAyNDtcclxuICAgIGN1cnNvcjogcG9pbnRlcjtcclxuICAgIHRyYW5zaXRpb246IGFsbCAzMDBtcyBlYXNlLWluLW91dDtcclxuICAgIGxpbmUtaGVpZ2h0OiAxOHB4O1xyXG59XHJcbi5sb2dpbi1hZG1pbi1jb250YWluZXIgLnJpZ2h0LW5hdiAudGh1bWJzOmhvdmVye1xyXG4gICAgdHJhbnNmb3JtOiBzY2FsZSguOTcpO1xyXG4gICAgdHJhbnNpdGlvbjogYWxsIDIwMG1zIGVhc2UtaW4tb3V0O1xyXG59XHJcbi5sb2dpbi1hZG1pbi1jb250YWluZXIgLnJpZ2h0LW5hdiAubG9jay1pcHtcclxuICAgIGJhY2tncm91bmQtaW1hZ2U6IHVybCguLi8uLi8uLi9hc3NldHMvaW1hZ2VzL2FkbWluL2xvY2staXAucG5nKTtcclxufVxyXG5cclxuLmxvZ2luLWFkbWluLWNvbnRhaW5lciAucmlnaHQtbmF2IC5tYW5hZ2UtY3JlZHtcclxuICAgIGJhY2tncm91bmQtaW1hZ2U6IHVybCguLi8uLi8uLi9hc3NldHMvaW1hZ2VzL2FkbWluL21hbmFnZS1jcmVkLnBuZyk7XHJcbiAgICBiYWNrZ3JvdW5kLXNpemU6IDM0cHg7XHJcbiAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiBjZW50ZXIgMTJweDtcclxufVxyXG5cclxuXHJcblxyXG4uc3Rvcmllcy1jcmVkZW50aWFscy1kaWFsb2ctY29udGFpbmVyIC5zdG9yeS1saXN0e1xyXG4gICAgd2lkdGg6IDYwMHB4O1xyXG4gICAgbWF4LWhlaWdodDogNTAwcHg7XHJcbiAgICBvdmVyZmxvdy15OiBhdXRvO1xyXG59XHJcbi5zdG9yaWVzLWNyZWRlbnRpYWxzLWRpYWxvZy1jb250YWluZXIgLm1hdC1leHBhbnNpb24tcGFuZWx7XHJcbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcclxuICAgIGJveC1zaGFkb3c6IG5vbmU7XHJcbiAgICBjb2xvcjogIzMzMztcclxufVxyXG5cclxuLnN0b3JpZXMtY3JlZGVudGlhbHMtZGlhbG9nLWNvbnRhaW5lciAubWF0LWV4cGFuc2lvbi1wYW5lbC1oZWFkZXJ7XHJcbiAgICBwYWRkaW5nOiAwIDIwcHg7XHJcbiAgICBoZWlnaHQ6IDUwcHghaW1wb3J0YW50O1xyXG59XHJcbi5zdG9yaWVzLWNyZWRlbnRpYWxzLWRpYWxvZy1jb250YWluZXIgLm1hdC1leHBhbnNpb24taW5kaWNhdG9yOjphZnRlcntcclxuICAgIGNvbG9yOiAjM2M4OGI1O1xyXG4gICAgbWFyZ2luLXJpZ2h0OiA0cHg7XHJcbiAgICBwYWRkaW5nOiA0cHg7XHJcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XHJcbiAgICB0b3A6IC0zcHg7XHJcbn1cclxuLnN0b3JpZXMtY3JlZGVudGlhbHMtZGlhbG9nLWNvbnRhaW5lciAubWF0LWV4cGFuc2lvbi1wYW5lbCAubWF0LWV4cGFuc2lvbi1wYW5lbC1ib2R5IHtcclxuICAgIHBhZGRpbmc6IDAgMjBweCAxNnB4O1xyXG59XHJcbi5zdG9yaWVzLWNyZWRlbnRpYWxzLWRpYWxvZy1jb250YWluZXIgLnN0b3J5LWxpc3QgPiBkaXY6bnRoLWNoaWxkKG9kZCkgLm1hdC1leHBhbnNpb24tcGFuZWwge1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogI0Y1RjVGNTtcclxufVxyXG4uc3Rvcmllcy1jcmVkZW50aWFscy1kaWFsb2ctY29udGFpbmVyIC5tYXQtZXhwYW5zaW9uLXBhbmVsLm1hdC1leHBhbmRlZCxcclxuLnN0b3JpZXMtY3JlZGVudGlhbHMtZGlhbG9nLWNvbnRhaW5lciAuc3RvcnktbGlzdCA+IGRpdjpudGgtY2hpbGQob2RkKSAubWF0LWV4cGFuc2lvbi1wYW5lbC5tYXQtZXhwYW5kZWQge1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2U2ZTZlNjtcclxufVxyXG4uY3JlZC1mb3Jte1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIHBhZGRpbmctdG9wOiA3cHg7XHJcbiAgICBib3JkZXItdG9wOiAxcHggc29saWQgI2ZmZjtcclxuICAgIG1hcmdpbi10b3A6IDVweDtcclxufVxyXG4uY3JlZC1mb3JtOmZpcnN0LWNoaWxke1xyXG4gICAgbWFyZ2luLXRvcDogMDtcclxuICAgIGJvcmRlci10b3A6IG5vbmU7XHJcbiAgICBwYWRkaW5nLXRvcDogMDtcclxufVxyXG4uY3JlZC1mb3JtIGxhYmVse1xyXG4gICAgZm9udC13ZWlnaHQ6IDUwMDtcclxuICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XHJcbiAgICBmb250LXNpemU6IDEzcHg7XHJcbn1cclxuLmNyZWQtZm9ybSBmb3JtID4gZGl2IGxhYmVse1xyXG4gICAgZm9udC1zaXplOiAxNHB4O1xyXG4gICAgZm9udC1mYW1pbHk6ICdESU5Qcm9SZWd1bGFyJywgc2Fucy1zZXJpZjtcclxufVxyXG4uY3JlZC1mb3JtIGZvcm0gPiBkaXYgaW1ne1xyXG4gICAgdG9wOiAtOXB4O1xyXG4gICAgYm90dG9tOiAwO1xyXG4gICAgbWFyZ2luOiBhdXRvO1xyXG4gICAgbGVmdDogOHB4O1xyXG4gICAgd2lkdGg6IDEzcHg7XHJcbn1cclxuLmNyZWQtZm9ybSBmb3JtID4gZGl2IC5mb3JtLWNvbnRyb2x7XHJcbiAgICBoZWlnaHQ6IDM2cHg7XHJcbiAgICBmb250LXNpemU6IDE1cHggIWltcG9ydGFudDtcclxuICAgIG1hcmdpbi1ib3R0b206IDhweDtcclxuICAgIHdpZHRoOiAyMjZweDtcclxuICAgIHBhZGRpbmc6IDBweCAwIDNweCAzMHB4O1xyXG59XHJcbi5jcmVkLWZvcm0gZm9ybSA+IGRpdiAuZm9ybS1jb250cm9sOmZvY3Vze1xyXG4gICAgYm94LXNoYWRvdzogbm9uZTtcclxufVxyXG4uY3JlZC1mb3JtIGZvcm0gPiBkaXYgcHtcclxuICAgIGJvdHRvbTogLTEwcHg7XHJcbiAgICBtYXJnaW46IDA7XHJcbiAgICBsZWZ0OiAwO1xyXG4gICAgcmlnaHQ6IDA7XHJcbiAgICBmb250LXNpemU6IDEycHg7XHJcbiAgICBjb2xvcjogcmVkO1xyXG4gICAgbGV0dGVyLXNwYWNpbmc6IDFweDtcclxufVxyXG4uY3JlZC1mb3JtIGJ1dHRvbntcclxuICAgIGhlaWdodDogMzZweDtcclxuICAgIGNvbG9yOiAjZmZmO1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogIzA2NjU5QjtcclxuICAgIGJvcmRlcjogbm9uZTtcclxuICAgIHdpZHRoOiA5MHB4O1xyXG59XHJcbi5hcHAtd3JhcHBlcntcclxuICAgIG1hcmdpbi1ib3R0b206IDJweDtcclxufVxyXG4uY3JlZC1mb3JtIC5sZHMtcmluZ3tcclxuICAgIGxlZnQ6IDMwcHg7XHJcbiAgICB0cmFuc2Zvcm06IG5vbmU7XHJcbiAgICByaWdodDogMDtcclxuICAgIG1hcmdpbjogYXV0bztcclxufVxyXG4iXX0= */\"","module.exports = \"\\r\\n \\r\\n\\r\\n
\\r\\n
\\r\\n
Request List \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
No data found
\\r\\n
\\r\\n
\\r\\n \\r\\n Client Name \\r\\n {{row.clientName}} \\r\\n \\r\\n\\r\\n \\r\\n ZS Requestor \\r\\n {{row.requesterName}} \\r\\n \\r\\n\\r\\n \\r\\n Access Code \\r\\n {{row.accessCode}} \\r\\n \\r\\n\\r\\n \\r\\n Active Period \\r\\n \\r\\n {{ row.accessStartDate | date: 'dd MMM yyyy' }} -\\r\\n {{row.accessEndDate | date: 'dd MMM yyyy' }} \\r\\n \\r\\n \\r\\n\\r\\n \\r\\n Last Logged In \\r\\n \\r\\n {{row.lastLoggedIn? (row.lastLoggedIn | date: 'dd MMM yyyy , HH:mm:ss') : 'Not yet accessed'}} \\r\\n {{row.userMetaInfo?.ipAddress ? 'IP:'+row.userMetaInfo?.ipAddress : ''}} \\r\\n \\r\\n \\r\\n\\r\\n \\r\\n Status \\r\\n \\r\\n {{row.status}} \\r\\n \\r\\n \\r\\n\\r\\n \\r\\n Actions \\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n\\r\\n
\\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
Settings \\r\\n
\\r\\n \\r\\n
Locked IP(s)
\\r\\n
Manage Credentials
\\r\\n
\\r\\n
\"","import { Component, ViewEncapsulation, OnInit, ViewChild, OnDestroy } from '@angular/core';\r\nimport { FormGroup, FormBuilder, Validators } from '@angular/forms';\r\nimport { Router } from '@angular/router';\r\nimport { MatTableDataSource } from '@angular/material/table';\r\nimport { MatSort, MatPaginator, MatSnackBar } from '@angular/material';\r\n\r\nimport { AuthService } from '../../shared/auth.service';\r\nimport { AdminService } from './service/admin.service';\r\nimport { MatDialog } from '@angular/material';\r\nimport { UserDialogBoxComponent } from './user-dialog-box/user-dialog-box.component';\r\nimport { HistoryDialogBoxComponent } from './history-dialog-box/history-dialog-box.component';\r\nimport { UserStatus } from 'src/app/shared/enum/enum';\r\nimport { ViewUserDialogBoxComponent } from './view-user-dialog-box/view-user-dialog-box.component';\r\nimport { LockoutDialogBoxComponent } from './lockout-dialog-box/lockout-dialog-box.component';\r\nimport { StoriesCredentialsDialogBoxComponent } from './stories-credentials-dialog-box/stories-credentials-dialog-box.component';\r\nimport { DataShareService } from 'src/app/shared/data-share.service';\r\n\r\n@Component({\r\n selector: 'app-admin',\r\n templateUrl: './admin.component.html',\r\n styleUrls: ['./admin.component.css'],\r\n encapsulation: ViewEncapsulation.None\r\n})\r\nexport class AdminComponent implements OnInit, OnDestroy {\r\n public displayedColumns = ['clientName', 'requesterName', 'accessCode', 'accessStartDate', 'status', 'lastLoggedIn', 'more'];\r\n public currentDate = new Date();\r\n @ViewChild(MatSort) sort: MatSort;\r\n @ViewChild(MatPaginator) pageinator: MatPaginator;\r\n\r\n public adminForm: FormGroup;\r\n public userList: MatTableDataSource;\r\n public UserStatus = UserStatus;\r\n public filterText = '';\r\n public displayNoRecords = false;\r\n public selectedRowIndex = -1;\r\n public classVal = '';\r\n constructor(\r\n private _router: Router,\r\n private dialog: MatDialog,\r\n private _snackBar: MatSnackBar,\r\n private _authService: AuthService,\r\n private _adminService: AdminService,\r\n private dataShareService: DataShareService) { }\r\n\r\n ngOnInit() {\r\n this.getUsersList();\r\n this.classVal = 'admin-section-active';\r\n this.dataShareService.updateCustomEvent({ event: 'addClassToBody', data: this.classVal });\r\n }\r\n\r\n private getUsersList() {\r\n const timeZoneOffset = (new Date()).getTimezoneOffset();\r\n this._adminService.getUsersList().subscribe((res: any) => {\r\n res.data.forEach(v => {\r\n v = this._adminService.parseUserObj(v, true, timeZoneOffset);\r\n });\r\n\r\n this.userList = new MatTableDataSource(res.data);\r\n this.userList.sort = this.sort;\r\n this.userList.paginator = this.pageinator;\r\n\r\n this.userList.sortData = (item, sort) => {\r\n if (sort.active === 'accessStartDate') {\r\n return item.sort((a, b) => {\r\n let x = 0;\r\n if (a.accessStartDate > b.accessStartDate) {\r\n x = 1;\r\n } else if (a.accessStartDate.getTime() === b.accessStartDate.getTime()) {\r\n x = (a.accessEndDate > b.accessEndDate) ? 1 : ((a.accessEndDate < b.accessEndDate) ? -1 : x);\r\n } else {\r\n x = -1;\r\n }\r\n return x * (sort.direction === 'asc' ? 1 : sort.direction === 'desc' ? -1 : 0);\r\n });\r\n }\r\n\r\n return item.sort((a, b) => {\r\n const x = (a[sort.active] > b[sort.active] ? 1 : a[sort.active] < b[sort.active] ? -1 : 0);\r\n return x * (sort.direction === 'asc' ? 1 : sort.direction === 'desc' ? -1 : 0);\r\n });\r\n\r\n };\r\n\r\n this.userList.filterPredicate = (data, filter: string): boolean => {\r\n filter = filter.toLowerCase();\r\n return data.clientName.toLowerCase().includes(filter) || data.accessCode.toLowerCase().includes(filter) ||\r\n data.requesterName.toLowerCase().includes(filter) || data.status.toLowerCase().includes(filter);\r\n\r\n };\r\n this.applyFilter(this.filterText);\r\n });\r\n\r\n }\r\n\r\n\r\n private openDialog(isUpdate: boolean = false, user: any = null, errorMsg: string = '') {\r\n const dialogRef = this.dialog.open(UserDialogBoxComponent, {\r\n data: {\r\n isUpdate,\r\n user\r\n },\r\n panelClass: 'user-dialog-container',\r\n disableClose: true\r\n });\r\n\r\n dialogRef.afterClosed().subscribe(result => {\r\n // console.log(`Dialog result:`, result);\r\n if (result) {\r\n // Close on click of save or update user button.\r\n this._snackBar.open(result.message, '', {\r\n duration: 3000,\r\n panelClass: 'success',\r\n verticalPosition: 'top',\r\n horizontalPosition: 'right'\r\n });\r\n this.highlightSelectedRecord(isUpdate ? user : result.data);\r\n }\r\n this.getUsersList();\r\n\r\n });\r\n }\r\n\r\n openHistoryDialog(user) {\r\n const dialogRef = this.dialog.open(HistoryDialogBoxComponent, {\r\n width: '500px',\r\n height: '500px',\r\n data: {...user}\r\n });\r\n dialogRef.afterClosed().subscribe(result => {\r\n this.highlightSelectedRecord(user);\r\n });\r\n\r\n }\r\n\r\n openLockoutDialog() {\r\n this.dialog.open(LockoutDialogBoxComponent, {\r\n width: '800px',\r\n });\r\n }\r\n\r\n openStoriesCredentialsDialog() {\r\n // console.log(\"Inside openStoriesCredentialsDialog function\");\r\n this.dialog.open(StoriesCredentialsDialogBoxComponent, {\r\n panelClass: 'stories-credentials-dialog-container',\r\n // disableClose: true,\r\n // width: '800px',\r\n });\r\n }\r\n\r\n public applyFilter(filterValue: string) {\r\n this.filterText = filterValue.trim();\r\n this.userList.filter = filterValue.trim().toLowerCase();\r\n\r\n if (this.userList.filteredData.length === 0) {\r\n this.displayNoRecords = true;\r\n } else {\r\n this.displayNoRecords = false;\r\n }\r\n }\r\n\r\n onUserGenerate() {\r\n this.openDialog();\r\n }\r\n\r\n onUserEditClick(user) {\r\n this.openDialog(true, user);\r\n }\r\n\r\n onUserViewClick(user) {\r\n const dialogRef = this.dialog.open(ViewUserDialogBoxComponent, {\r\n data: user\r\n });\r\n\r\n dialogRef.afterClosed().subscribe(result => {\r\n this.highlightSelectedRecord(user);\r\n });\r\n }\r\n\r\n highlightSelectedRecord(user) {\r\n this.selectedRowIndex = user.accessCode;\r\n setTimeout(() => {\r\n this.selectedRowIndex = -1;\r\n }, 1000);\r\n }\r\n\r\n ngOnDestroy(){\r\n this.dataShareService.updateCustomEvent({ event: 'removeClassToBody', data: this.classVal });\r\n }\r\n}\r\n","module.exports = \"\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcmMvYXBwL3VzZXItbWFuYWdlbWVudC9hZG1pbi9oaXN0b3J5LWRpYWxvZy1ib3gvaGlzdG9yeS1kaWFsb2ctYm94LmNvbXBvbmVudC5jc3MifQ== */\"","module.exports = \"\\r\\n\\r\\n
\\r\\n \\r\\n Logs of {{ data.clientName}} \\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n Last Login \\r\\n {{row.createdAt | date: 'dd MMM yyyy HH:mm:ss'}} \\r\\n \\r\\n\\r\\n \\r\\n IP Address \\r\\n {{row.userMetaInfo?.ipAddress}} \\r\\n \\r\\n\\r\\n
\\r\\n \\r\\n
\"","import { Component, OnInit, Inject, Optional, ViewChild } from '@angular/core';\r\nimport { MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatTableDataSource, MatTable } from '@angular/material';\r\nimport { AdminService } from '../service/admin.service';\r\n\r\n@Component({\r\n selector: 'app-history-dialog-box',\r\n templateUrl: './history-dialog-box.component.html',\r\n styleUrls: ['./history-dialog-box.component.css']\r\n})\r\nexport class HistoryDialogBoxComponent implements OnInit {\r\n @ViewChild(MatTable) table: MatTable;\r\n public userHistoryData: MatTableDataSource;\r\n local_data: any;\r\n\r\n\r\n\r\n public displayedColumns = ['createdAt', 'ipAddress'];\r\n constructor(public dialogRef: MatDialogRef,\r\n @Optional() @Inject(MAT_DIALOG_DATA) public data: any,\r\n private _adminService: AdminService) { }\r\n\r\n ngOnInit() {\r\n this._adminService.getUserHistory(this.data.userId).subscribe((res: any) => {\r\n this.userHistoryData = new MatTableDataSource(res.data);\r\n });\r\n }\r\n}\r\n","module.exports = \".clear-search {\\r\\n width: 30px;\\r\\n height: 100%;\\r\\n padding: 0;\\r\\n font-size: 26px;\\r\\n color: #999;\\r\\n border: 0;\\r\\n cursor: pointer;\\r\\n background: transparent;\\r\\n position: absolute;\\r\\n right: 0;\\r\\n}\\r\\n\\r\\n.active{\\r\\n color: green;\\r\\n}\\r\\n\\r\\n@keyframes lds-ring {\\r\\n 0% {\\r\\n transform: rotate(0deg);\\r\\n }\\r\\n 100% {\\r\\n transform: rotate(360deg);\\r\\n }\\r\\n}\\r\\n\\r\\n.switch-toggle .knobs.lock:after {\\r\\n content: 'Lock';\\r\\n}\\r\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9hcHAvdXNlci1tYW5hZ2VtZW50L2FkbWluL2xvY2tvdXQtZGlhbG9nLWJveC9sb2Nrb3V0LWRpYWxvZy1ib3guY29tcG9uZW50LmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtJQUNJLFlBQVk7SUFDWixhQUFhO0lBQ2IsV0FBVztJQUNYLGdCQUFnQjtJQUNoQixZQUFZO0lBQ1osVUFBVTtJQUNWLGdCQUFnQjtJQUNoQix3QkFBd0I7SUFDeEIsbUJBQW1CO0lBQ25CLFNBQVM7Q0FDWjs7QUFFRDtFQUNFLGFBQWE7Q0FDZDs7QUFFRDtFQUNFO0lBQ0Usd0JBQXdCO0dBQ3pCO0VBQ0Q7SUFDRSwwQkFBMEI7R0FDM0I7Q0FDRjs7QUFFRDtFQUNFLGdCQUFnQjtDQUNqQiIsImZpbGUiOiJzcmMvYXBwL3VzZXItbWFuYWdlbWVudC9hZG1pbi9sb2Nrb3V0LWRpYWxvZy1ib3gvbG9ja291dC1kaWFsb2ctYm94LmNvbXBvbmVudC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuY2xlYXItc2VhcmNoIHtcclxuICAgIHdpZHRoOiAzMHB4O1xyXG4gICAgaGVpZ2h0OiAxMDAlO1xyXG4gICAgcGFkZGluZzogMDtcclxuICAgIGZvbnQtc2l6ZTogMjZweDtcclxuICAgIGNvbG9yOiAjOTk5O1xyXG4gICAgYm9yZGVyOiAwO1xyXG4gICAgY3Vyc29yOiBwb2ludGVyO1xyXG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XHJcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XHJcbiAgICByaWdodDogMDtcclxufVxyXG5cclxuLmFjdGl2ZXtcclxuICBjb2xvcjogZ3JlZW47XHJcbn1cclxuXHJcbkBrZXlmcmFtZXMgbGRzLXJpbmcge1xyXG4gIDAlIHtcclxuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xyXG4gIH1cclxuICAxMDAlIHtcclxuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XHJcbiAgfVxyXG59XHJcblxyXG4uc3dpdGNoLXRvZ2dsZSAua25vYnMubG9jazphZnRlciB7XHJcbiAgY29udGVudDogJ0xvY2snO1xyXG59Il19 */\"","module.exports = \"\\r\\n
\\r\\n Locked IP List \\r\\n \\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{ noRecordsFound }}
\\r\\n
No matching result
\\r\\n
\\r\\n
\\r\\n \\r\\n Username \\r\\n {{row.username ? row.username : '-'}} \\r\\n \\r\\n \\r\\n IP Address \\r\\n \\r\\n {{row.ipAddress}} \\r\\n \\r\\n \\r\\n \\r\\n Status \\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n Unlock \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n \"","import { Component, OnInit, ViewChild} from '@angular/core';\r\nimport { MatTableDataSource, MatDialogRef, MatPaginator } from '@angular/material';\r\nimport { AdminService } from '../service/admin.service';\r\nimport { AuthService } from 'src/app/shared/auth.service';\r\n\r\n@Component({\r\n selector: 'app-lockout-dialog-box',\r\n templateUrl: './lockout-dialog-box.component.html',\r\n styleUrls: ['./lockout-dialog-box.component.css']\r\n})\r\nexport class LockoutDialogBoxComponent implements OnInit {\r\n @ViewChild(MatPaginator) pageinator: MatPaginator;\r\n public userList: MatTableDataSource;\r\n public filterText = '';\r\n public displayedColumns = ['ipAddress', 'userName', 'action'];\r\n noRecordsFound = '';\r\n constructor(\r\n public dialogRef: MatDialogRef,\r\n private _adminService: AdminService,\r\n private _authService: AuthService) { }\r\n\r\n ngOnInit() {\r\n this._adminService.getIpList(this._authService.getUserId()).subscribe((res: any) => {\r\n if (res.data.length > 0) {\r\n res.data.forEach((v) => {\r\n v.isLoading = false;\r\n });\r\n this.userList = new MatTableDataSource(res.data);\r\n this.userList.paginator = this.pageinator;\r\n this.userList.filterPredicate = (data, filter: string): boolean => {\r\n return (data.username && data.username.toLowerCase().includes(filter)) || data.ipAddress.toLowerCase().includes(filter);\r\n };\r\n } else {\r\n this.noRecordsFound = 'Data is not available';\r\n }\r\n }, () => {\r\n this.noRecordsFound = 'Something went wrong. Please try again later.';\r\n })\r\n }\r\n\r\n applyFilter() {\r\n this.userList.filter = this.filterText.trim().toLowerCase();\r\n }\r\n \r\n toggleStatus(input, row) {\r\n input.checked = !input.checked;\r\n this.resetToggle(input, row, true);\r\n const obj = {\r\n userId: this._authService.getUserId(),\r\n accessedId: row.accessedId,\r\n isLocked: !row.isLocked\r\n };\r\n this._adminService.toggleUserLockedStatus(obj).subscribe(() => {\r\n this.resetToggle(input, row, false);\r\n input.checked = !input.checked;\r\n row.isLocked = !row.isLocked;\r\n this.applyFilter();\r\n }, err => {\r\n this.resetToggle(input, row, false);\r\n console.log('failed', err);\r\n })\r\n }\r\n \r\n resetToggle(input, row, status) {\r\n row.isLoading = status;\r\n input.disabled = status;\r\n }\r\n\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { Observable } from 'rxjs';\r\nimport moment from 'moment';\r\n\r\nimport { HttpWrapperService } from '../../../services/http-wrapper.service';\r\nimport { environment } from '../../../../environments/environment';\r\nimport { UserStatus } from '../../../shared/enum/enum';\r\n\r\n@Injectable()\r\nexport class AdminService {\r\n\r\n public currentDate = new Date();\r\n constructor(private _http: HttpWrapperService) { }\r\n\r\n parseUserObj(result, isResponse: boolean, timeZoneOffset) {\r\n let accessStatus = result.accessStatus;\r\n let startDate = result.accessStartDate;\r\n let endDate = result.accessEndDate;\r\n if (isResponse) {\r\n accessStatus = (result.accessStatus === 'unblock') ? true : false;\r\n startDate = new Date(+result.accessStartDate); // - (timeZoneOffset * 60 * 1000)\r\n endDate = new Date(+result.accessEndDate); // - (timeZoneOffset * 60 * 1000)\r\n } else {\r\n accessStatus = (result.accessStatus) ? 'unblock' : 'block';\r\n // startDate = result.accessStartDate.getTime(); // + (timeZoneOffset * 60 * 1000);\r\n // endDate = result.accessEndDate.getTime();// + (timeZoneOffset * 60 * 1000);\r\n let time = moment(result.accessStartDate).format('YYYY/MM/DD');\r\n startDate = moment(time).format('x');\r\n time = (moment(result.accessEndDate).format('YYYY/MM/DD')) + ' 23:59:59';\r\n endDate = moment(time).format('x');\r\n }\r\n\r\n result.accessStatus = accessStatus;\r\n result.accessStartDate = startDate;\r\n result.accessEndDate = endDate;\r\n result.status = result.accessStatus === true &&\r\n (this.currentDate >= result.accessStartDate && this.currentDate <= result.accessEndDate) ? UserStatus.ACTIVE :\r\n result.accessStatus === false && (this.currentDate >= result.accessStartDate &&\r\n this.currentDate <= result.accessEndDate) ? UserStatus.ACTIVE_BLOCK : UserStatus.INACTIVE;\r\n return result;\r\n }\r\n\r\n getUsersList(): Observable {\r\n return this._http.get(environment.api_url + '/users');\r\n }\r\n\r\n updateUser(user): Observable {\r\n return this._http.put(environment.api_url + '/user', user);\r\n }\r\n\r\n addUser(user): Observable {\r\n return this._http.post(environment.api_url + '/user', user);\r\n }\r\n\r\n getUserHistory(userid): Observable {\r\n return this._http.get(environment.api_url + '/user/session-history/' + userid);\r\n }\r\n\r\n getIpList(userid): Observable {\r\n return this._http.get(environment.api_url + '/users/application-accessed?userId=' + userid);\r\n }\r\n\r\n toggleUserLockedStatus(data): Observable {\r\n return this._http.post(environment.api_url + '/users/application-accessed', data);\r\n }\r\n\r\n getStoriesCredentialsList(): Observable {\r\n return this._http.get(environment.api_url + '/stories/meta-details');\r\n }\r\n\r\n updateStoryCredentials(data): Observable {\r\n return this._http.post(environment.api_url + '/story', data);\r\n }\r\n}\r\n","module.exports = \".cred-form .username{\\r\\n display: block;\\r\\n}\\r\\n.cred-form form > div{\\r\\n position: relative;\\r\\n margin-bottom: 8px;\\r\\n}\\r\\n.cred-form form > div.username:before{\\r\\n content: '';\\r\\n width:24px;\\r\\n height:18px;\\r\\n background: url('user.png')no-repeat center center;\\r\\n background-size: 14px;\\r\\n z-index: 10;\\r\\n position: absolute;\\r\\n left: 3px;\\r\\n top: 0;\\r\\n bottom: 0;\\r\\n margin: auto;\\r\\n}\\r\\n.cred-form form > div.password:before{\\r\\n content: '';\\r\\n width:24px;\\r\\n height:18px;\\r\\n background: url('password.png')no-repeat center center;\\r\\n background-size: 14px;\\r\\n z-index: 10;\\r\\n position: absolute;\\r\\n left: 3px;\\r\\n top: 0;\\r\\n bottom: 0;\\r\\n margin: auto;\\r\\n}\\r\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9hcHAvdXNlci1tYW5hZ2VtZW50L2FkbWluL3N0b3JpZXMtY3JlZGVudGlhbHMtZGlhbG9nLWJveC9zdG9yaWVzLWNyZWRlbnRpYWxzLWRpYWxvZy1ib3guY29tcG9uZW50LmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtJQUNJLGVBQWU7Q0FDbEI7QUFDRDtJQUNJLG1CQUFtQjtJQUNuQixtQkFBbUI7Q0FDdEI7QUFDRDtJQUNJLFlBQVk7SUFDWixXQUFXO0lBQ1gsWUFBWTtJQUNaLG1EQUEyRTtJQUMzRSxzQkFBc0I7SUFDdEIsWUFBWTtJQUNaLG1CQUFtQjtJQUNuQixVQUFVO0lBQ1YsT0FBTztJQUNQLFVBQVU7SUFDVixhQUFhO0NBQ2hCO0FBQ0Q7SUFDSSxZQUFZO0lBQ1osV0FBVztJQUNYLFlBQVk7SUFDWix1REFBK0U7SUFDL0Usc0JBQXNCO0lBQ3RCLFlBQVk7SUFDWixtQkFBbUI7SUFDbkIsVUFBVTtJQUNWLE9BQU87SUFDUCxVQUFVO0lBQ1YsYUFBYTtDQUNoQiIsImZpbGUiOiJzcmMvYXBwL3VzZXItbWFuYWdlbWVudC9hZG1pbi9zdG9yaWVzLWNyZWRlbnRpYWxzLWRpYWxvZy1ib3gvc3Rvcmllcy1jcmVkZW50aWFscy1kaWFsb2ctYm94LmNvbXBvbmVudC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuY3JlZC1mb3JtIC51c2VybmFtZXtcclxuICAgIGRpc3BsYXk6IGJsb2NrO1xyXG59XHJcbi5jcmVkLWZvcm0gZm9ybSA+IGRpdntcclxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcclxuICAgIG1hcmdpbi1ib3R0b206IDhweDtcclxufVxyXG4uY3JlZC1mb3JtIGZvcm0gPiBkaXYudXNlcm5hbWU6YmVmb3Jle1xyXG4gICAgY29udGVudDogJyc7XHJcbiAgICB3aWR0aDoyNHB4O1xyXG4gICAgaGVpZ2h0OjE4cHg7XHJcbiAgICBiYWNrZ3JvdW5kOiB1cmwoLi4vLi4vLi4vLi4vYXNzZXRzL2ltYWdlcy91c2VyLnBuZyluby1yZXBlYXQgY2VudGVyIGNlbnRlcjtcclxuICAgIGJhY2tncm91bmQtc2l6ZTogMTRweDtcclxuICAgIHotaW5kZXg6IDEwO1xyXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgbGVmdDogM3B4O1xyXG4gICAgdG9wOiAwO1xyXG4gICAgYm90dG9tOiAwO1xyXG4gICAgbWFyZ2luOiBhdXRvO1xyXG59XHJcbi5jcmVkLWZvcm0gZm9ybSA+IGRpdi5wYXNzd29yZDpiZWZvcmV7XHJcbiAgICBjb250ZW50OiAnJztcclxuICAgIHdpZHRoOjI0cHg7XHJcbiAgICBoZWlnaHQ6MThweDtcclxuICAgIGJhY2tncm91bmQ6IHVybCguLi8uLi8uLi8uLi9hc3NldHMvaW1hZ2VzL3Bhc3N3b3JkLnBuZyluby1yZXBlYXQgY2VudGVyIGNlbnRlcjtcclxuICAgIGJhY2tncm91bmQtc2l6ZTogMTRweDtcclxuICAgIHotaW5kZXg6IDEwO1xyXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgbGVmdDogM3B4O1xyXG4gICAgdG9wOiAwO1xyXG4gICAgYm90dG9tOiAwO1xyXG4gICAgbWFyZ2luOiBhdXRvO1xyXG59Il19 */\"","module.exports = \"\\r\\n
\\r\\n Manage Credentials \\r\\n \\r\\n \\r\\n
\\r\\n 0; else dataSection\\\">\\r\\n \\r\\n
\\r\\n \\r\\n {{story.title}}\\r\\n \\r\\n \\r\\n \\r\\n
{{application.widgetTitle}} \\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n Data is not available\\r\\n
\\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n Create Request Update Details \\r\\n \\r\\n ,\r\n private _adminService: AdminService,\r\n private _gaService: GoogleAnalyticsService,\r\n ) {\r\n const user = { ...(data.user || {}) };\r\n const today = new Date();\r\n const currentDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());\r\n this.errorMsg = data.errorMsg;\r\n this.minStartDate = currentDate;\r\n if (data.isUpdate) {\r\n if (currentDate > user.accessStartDate) {\r\n this.minStartDate = user.accessStartDate;\r\n }\r\n }\r\n this.userForm = formBuilder.group({\r\n clientName: [user.clientName || '', Validators.required],\r\n requesterName: [user.requesterName || '', Validators.required],\r\n accessStartDate: [user.accessStartDate || currentDate, Validators.required],\r\n accessEndDate: [user.accessEndDate, Validators.required],\r\n accessReason: [user.accessReason || '', Validators.required],\r\n accessStatus: [(user.accessStatus !== void 0) ? user.accessStatus : true, Validators.nullValidator]\r\n });\r\n }\r\n\r\n ngOnInit() {\r\n }\r\n\r\n onUserSave() {\r\n this.isUserFormSubmitted = true;\r\n if (this.userForm.invalid) {\r\n return false;\r\n }\r\n const timeZoneOffset = (new Date()).getTimezoneOffset();\r\n const user = { ...this.data.user, ...this.userForm.value };\r\n const requestUser = this._adminService.parseUserObj(user, false, timeZoneOffset);\r\n const GA_config = {};\r\n GA_config[GAIndex.REQUESTER_NAME] = requestUser.requesterName;\r\n GA_config[GAIndex.CLIENT_NAME] = requestUser.clientName;\r\n\r\n if (this.data.isUpdate) {\r\n this._adminService.updateUser(requestUser).subscribe((data: any) => {\r\n if (data.errorMessage) {\r\n GA_config[GAIndex.ERROR_REASON] = data.errorMessage\r\n }\r\n this._gaService.triggerEvent('Update', 'User Management', 'Update User', GA_config );\r\n // console.log('Response of the updateUser', data);\r\n // if (data.statusCode === 200) {\r\n if (data) {\r\n this.dialogRef.close(data);\r\n } else {\r\n this.errorMsg = data.errorMessage;\r\n }\r\n });\r\n } else {\r\n requestUser.role = 'guest';\r\n requestUser.accessStatus = 'unblock';\r\n this._adminService.addUser(requestUser).subscribe((data: any) => {\r\n if (data.errorMessage) {\r\n GA_config[GAIndex.ERROR_REASON] = data.errorMessage\r\n }\r\n this._gaService.triggerEvent('Create', 'User Management', 'Create User', GA_config );\r\n // console.log('Response of the addUser', data);\r\n // if (data.statusCode === 200) {\r\n if (data) {\r\n // this.dialogRef.close(data);\r\n this.showSubmitButton = false;\r\n this.generatedAccessCode = data.data.accessCode;\r\n this.generateResponse = data;\r\n } else {\r\n this.errorMsg = data.errorMessage;\r\n }\r\n });\r\n }\r\n }\r\n\r\n onClose() {\r\n this.dialogRef.close(this.generateResponse);\r\n }\r\n}\r\n","module.exports = \"dl.user-details{\\r\\n font-size:16px;\\r\\n}\\r\\ndl.user-details dt{\\r\\n float:left;\\r\\n}\\r\\ndl.user-details dd{\\r\\n margin-bottom:1rem;\\r\\n margin-left:150px;\\r\\n max-width:400px;\\r\\n}\\r\\n\\r\\n\\r\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9hcHAvdXNlci1tYW5hZ2VtZW50L2FkbWluL3ZpZXctdXNlci1kaWFsb2ctYm94L3ZpZXctdXNlci1kaWFsb2ctYm94LmNvbXBvbmVudC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSSxlQUFlO0NBQ2xCO0FBQ0Q7SUFDSSxXQUFXO0NBQ2Q7QUFDRDtJQUNJLG1CQUFtQjtJQUNuQixrQkFBa0I7SUFDbEIsZ0JBQWdCO0NBQ25CIiwiZmlsZSI6InNyYy9hcHAvdXNlci1tYW5hZ2VtZW50L2FkbWluL3ZpZXctdXNlci1kaWFsb2ctYm94L3ZpZXctdXNlci1kaWFsb2ctYm94LmNvbXBvbmVudC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJkbC51c2VyLWRldGFpbHN7XHJcbiAgICBmb250LXNpemU6MTZweDtcclxufVxyXG5kbC51c2VyLWRldGFpbHMgZHR7XHJcbiAgICBmbG9hdDpsZWZ0O1xyXG59XHJcbmRsLnVzZXItZGV0YWlscyBkZHtcclxuICAgIG1hcmdpbi1ib3R0b206MXJlbTtcclxuICAgIG1hcmdpbi1sZWZ0OjE1MHB4O1xyXG4gICAgbWF4LXdpZHRoOjQwMHB4O1xyXG59XHJcblxyXG4iXX0= */\"","module.exports = \"\\r\\n
\\r\\n Details of {{data.clientName}} \\r\\n \\r\\n \\r\\n \\r\\n Client Name : \\r\\n {{data.clientName}} \\r\\n Requester Name : \\r\\n {{data.requesterName}} \\r\\n Access Code : \\r\\n {{data.accessCode}} \\r\\n Access Reason : \\r\\n {{data.accessReason}} \\r\\n Active Period : \\r\\n {{data.accessStartDate | date: 'dd MMM yyyy'}} - {{data.accessEndDate | date: 'dd MMM yyyy'}} \\r\\n Status : \\r\\n {{data.status}} Last Logged In : \\r\\n {{data.lastLoggedIn? (data.lastLoggedIn | date: 'dd MMM yyyy , HH:mm:ss') : 'Not yet accessed'}} \\r\\n IP : \\r\\n {{data.userMetaInfo?.ipAddress || ''}} \\r\\n Created On : \\r\\n {{data.createdAt | date: 'dd MMM yyyy, HH:mm:ss'}} \\r\\n Updated On : \\r\\n {{data.updatedAt | date: 'dd MMM yyyy, HH:mm:ss'}} \\r\\n \\r\\n \\r\\n \"","import { Component, OnInit, Inject } from '@angular/core';\r\nimport { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';\r\nimport { UserStatus } from 'src/app/shared/enum/enum';\r\n\r\n\r\n@Component({\r\n selector: 'app-view-user-dialog-box',\r\n templateUrl: './view-user-dialog-box.component.html',\r\n styleUrls: ['./view-user-dialog-box.component.css']\r\n})\r\nexport class ViewUserDialogBoxComponent implements OnInit {\r\n\r\n public UserStatus = UserStatus;\r\n constructor(\r\n public dialogRef: MatDialogRef,\r\n @Inject(MAT_DIALOG_DATA) public data: any,\r\n ) {\r\n }\r\n\r\n ngOnInit() {\r\n }\r\n\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { Routes, RouterModule } from '@angular/router';\r\nimport { UserManagementComponent } from './user-management.component';\r\nimport { AdminComponent } from './admin/admin.component';\r\nimport { AuthGuardService } from '../shared/auth-guard.service';\r\nimport { AdminAuthGuardService } from '../shared/admin-auth-guard.service';\r\n\r\n\r\nconst routes: Routes = [{\r\n path: 'admin',\r\n component: UserManagementComponent,\r\n children: [\r\n { path: '', component: AdminComponent},\r\n { path: '**', redirectTo: '' }\r\n ],\r\n canActivate: [AuthGuardService, AdminAuthGuardService]\r\n}];\r\n\r\n@NgModule({\r\n imports: [RouterModule.forChild(routes)],\r\n exports: [RouterModule]\r\n})\r\nexport class UserManagementRoutingModule { }\r\n","module.exports = \"\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcmMvYXBwL3VzZXItbWFuYWdlbWVudC91c2VyLW1hbmFnZW1lbnQuY29tcG9uZW50LmNzcyJ9 */\"","module.exports = \"\\r\\n\\t
\"","import { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-user-management',\r\n templateUrl: './user-management.component.html',\r\n styleUrls: ['./user-management.component.css']\r\n})\r\nexport class UserManagementComponent implements OnInit {\r\n\r\n constructor() { }\r\n\r\n ngOnInit() {\r\n }\r\n\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { UserManagementRoutingModule } from './user-management-routing.module';\r\nimport { UserManagementComponent } from './user-management.component';\r\nimport { SharedModule } from '../shared/shared.module';\r\nimport { AdminComponent } from './admin/admin.component';\r\nimport { ReactiveFormsModule, FormsModule } from '@angular/forms';\r\nimport { MaterialModule } from '../material/material.module';\r\nimport { UserDialogBoxComponent } from './admin/user-dialog-box/user-dialog-box.component';\r\nimport { AdminService } from './admin/service/admin.service';\r\nimport { HistoryDialogBoxComponent } from './admin/history-dialog-box/history-dialog-box.component';\r\nimport { ViewUserDialogBoxComponent } from './admin/view-user-dialog-box/view-user-dialog-box.component';\r\nimport { LockoutDialogBoxComponent } from './admin/lockout-dialog-box/lockout-dialog-box.component';\r\nimport { StoriesCredentialsDialogBoxComponent } from './admin/stories-credentials-dialog-box/stories-credentials-dialog-box.component';\r\n\r\n@NgModule({\r\n declarations: [\r\n UserManagementComponent,\r\n AdminComponent,\r\n UserDialogBoxComponent,\r\n HistoryDialogBoxComponent,\r\n ViewUserDialogBoxComponent,\r\n LockoutDialogBoxComponent,\r\n StoriesCredentialsDialogBoxComponent\r\n ],\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n SharedModule,\r\n UserManagementRoutingModule,\r\n MaterialModule\r\n ],\r\n exports: [],\r\n providers: [AdminService],\r\n entryComponents: [\r\n UserDialogBoxComponent,\r\n HistoryDialogBoxComponent,\r\n ViewUserDialogBoxComponent,\r\n LockoutDialogBoxComponent,\r\n StoriesCredentialsDialogBoxComponent\r\n ]\r\n})\r\nexport class UserManagementModule { }\r\n","module.exports = \"/* Common */\\r\\n.adaptive-pricing{\\r\\n font-family: 'Roboto', sans-serif !important;\\r\\n font-weight: 300;\\r\\n color: #433E37;\\r\\n}\\r\\n.adaptive-pricing svg{\\r\\n font-family: 'Roboto', sans-serif !important;\\r\\n}\\r\\n.adaptive-pricing.screen-1 header .navbar-brand img.zs-logo-b{\\r\\n opacity: 1;\\r\\n}\\r\\n.adaptive-pricing .bullets.header-bullets{\\r\\n bottom: auto;\\r\\n left: auto;\\r\\n top: 26px;\\r\\n right: 100px;\\r\\n position: fixed;\\r\\n cursor: pointer;\\r\\n}\\r\\n.adaptive-pricing .bullets.header-bullets span{\\r\\n color: #C94573;\\r\\n font-size: 13px;\\r\\n font-weight: 400;\\r\\n cursor: auto;\\r\\n}\\r\\n.adaptive-pricing .bullets.header-bullets p{\\r\\n background-color: #E78B7D;\\r\\n width: 12px;\\r\\n height: 12px;\\r\\n margin-right: 8px;\\r\\n}\\r\\n.adaptive-pricing .bullets.header-bullets p.active{\\r\\n background-color: #C94573;\\r\\n}\\r\\n.inner-page-wrapper.adaptive-pricing #scroll-container,\\r\\n.adaptive-pricing .adaptive-pricing-svg-wrapper #svg-wrapper{\\r\\n max-height: 100vh;\\r\\n min-height: 100vh;\\r\\n width: 100vw;\\r\\n overflow: hidden;\\r\\n position: relative;\\r\\n}\\r\\n.adaptive-pricing .adaptive-pricing-svg-wrapper #svg-wrapper{\\r\\n position: absolute;\\r\\n top: 0;\\r\\n bottom: 0;\\r\\n left: 0;\\r\\n right: 0;\\r\\n z-index: 1;\\r\\n}\\r\\n.adaptive-pricing-svg-wrapper{\\r\\n height: 100vh;\\r\\n position: fixed;\\r\\n z-index: 0;\\r\\n left: 0;\\r\\n right: 0;\\r\\n top: 0;\\r\\n bottom: 0;\\r\\n}\\r\\n.adaptive-pricing h2.adaptive-title{\\r\\n font-size:calc(12px + (20 - 12) * (100vw - 1200px) / (1920 - 1200));\\r\\n padding: 24px 140px 0;\\r\\n color: #8D8D8D;\\r\\n}\\r\\n.adaptive-pricing h2.adaptive-title span{\\r\\n color: #8D8D8D;\\r\\n}\\r\\n.adaptive-pricing .content-wrapper{\\r\\n position: absolute;\\r\\n top: 70px;\\r\\n left: 0;\\r\\n right: 0;\\r\\n}\\r\\n@media screen and (max-width: 1536px){\\r\\n .adaptive-pricing .content-wrapper{\\r\\n top: 55px;\\r\\n }\\r\\n}\\r\\n@media screen and (max-width: 1550px){\\r\\n .adaptive-pricing h2.adaptive-title{\\r\\n padding: 26px 120px 0;\\r\\n }\\r\\n}\\r\\n.adaptive-pricing .content-wrapper p{\\r\\n width: calc(100% - 740px);\\r\\n padding-right: 20px;\\r\\n}\\r\\n.adaptive-pricing .content-wrapper p:last-child span{\\r\\n font-size:calc(20px + (26 - 20) * (100vw - 1200px) / (1920 - 1200));\\r\\n font-weight: 500;\\r\\n margin-right: 10px;\\r\\n}\\r\\n.adaptive-pricing .story-content-wrapper > div{\\r\\n display: flex;\\r\\n align-items: center;\\r\\n justify-content: flex-end;\\r\\n height: 100vh;\\r\\n width: 100vw;\\r\\n position: absolute;\\r\\n top: 0;\\r\\n left: 0;\\r\\n}\\r\\n.adaptive-pricing h2{\\r\\n font-family: 'Roboto', sans-serif;\\r\\n font-weight: 400;\\r\\n color: #C94573;\\r\\n margin-bottom: 4px;\\r\\n font-size:calc(18px + (32 - 18) * (100vw - 1200px) / (1920 - 1200));\\r\\n}\\r\\n.adaptive-pricing h2 span{\\r\\n color: #E78B7D;\\r\\n font-weight: 300;\\r\\n}\\r\\n.adaptive-pricing p{\\r\\n font-size:calc(14px + (16 - 14) * (100vw - 1200px) / (1920 - 1200));\\r\\n margin: 0;\\r\\n}\\r\\n.adaptive-pricing em{\\r\\n font-weight: 500;\\r\\n font-style: normal;\\r\\n}\\r\\n.adaptive-pricing .card-wrapper{\\r\\n display: flex;\\r\\n height: calc(100vh - 150px);\\r\\n align-items: center;\\r\\n position: absolute;\\r\\n top: 0;\\r\\n right: 34px;\\r\\n bottom: 0;\\r\\n margin: auto;\\r\\n}\\r\\n.adaptive-pricing .card-wrapper .card{\\r\\n width: 90%;\\r\\n background: transparent linear-gradient(290deg, #FFFFFF 0%, #FFF3EB 48%, #FFE7D8 100%);\\r\\n box-shadow: -8px -8px 24px #00000012;\\r\\n border: 0;\\r\\n position: absolute;\\r\\n right: 0;\\r\\n bottom: 0;\\r\\n top: -120px;\\r\\n margin: auto;\\r\\n z-index: 5;\\r\\n opacity: 0;\\r\\n transform: translateY(-20px);\\r\\n transition: all 500ms ease-in-out;\\r\\n height: calc(100% - 140px);\\r\\n}\\r\\n.adaptive-pricing .slide-1 .card-wrapper{\\r\\n width: 600px;\\r\\n}\\r\\n.adaptive-pricing .slide-3 .card-wrapper .card .card-title{\\r\\n padding: 15px 20px 10px;\\r\\n}\\r\\n.adaptive-pricing .card-wrapper.card-active .card{\\r\\n opacity: 1;\\r\\n transition: all 400ms ease-in-out;\\r\\n transform: translateY(0px);\\r\\n}\\r\\n.adaptive-pricing .card-wrapper .card:first-child{\\r\\n transition-delay: 400ms;\\r\\n}\\r\\n.adaptive-pricing .card-wrapper .card:nth-child(2){\\r\\n transition-delay: 300ms;\\r\\n}\\r\\n.adaptive-pricing .card-wrapper .card:nth-child(3){\\r\\n transition-delay: 200ms;\\r\\n}\\r\\n.adaptive-pricing .card-wrapper.card-active .card:first-child{\\r\\n transition-delay: 200ms;\\r\\n}\\r\\n.adaptive-pricing .card-wrapper.card-active .card:nth-child(2){\\r\\n transition-delay: 350ms;\\r\\n}\\r\\n.adaptive-pricing .card-wrapper.card-active .card:nth-child(3){\\r\\n transition-delay: 500ms;\\r\\n}\\r\\n.adaptive-pricing .card-wrapper .card:nth-child(1) .card-title,\\r\\n.adaptive-pricing .card-wrapper .card:nth-child(2) .card-title,\\r\\n.adaptive-pricing .card-wrapper .card:nth-child(1) .card-body,\\r\\n.adaptive-pricing .card-wrapper .card:nth-child(2) .card-body{\\r\\n opacity: 0;\\r\\n transition-delay: 500ms;\\r\\n}\\r\\n.adaptive-pricing .card:nth-child(2){\\r\\n right: 36px;\\r\\n top: -50px;\\r\\n}\\r\\n.adaptive-pricing .card:nth-child(3){\\r\\n right: 69px;\\r\\n top: 20px;\\r\\n}\\r\\n.adaptive-pricing .card:after{\\r\\n content: '';\\r\\n height: 100px;\\r\\n position: absolute;\\r\\n bottom: -50px;\\r\\n background: transparent linear-gradient(290deg, #fffefe 0%, #fff8f3 48%, #ffede2 100%);\\r\\n box-shadow: -8px 14px 20px #00000012;\\r\\n right: 0;\\r\\n left: 0;\\r\\n transform: skew(0deg, 10deg);\\r\\n z-index: 0;\\r\\n}\\r\\n.adaptive-pricing .card .card-header{\\r\\n color: #3F3D56;\\r\\n font-size:calc(16px + (18 - 16) * (100vw - 1200px) / (1920 - 1200));\\r\\n font-size: 18px;\\r\\n font-weight: 500;\\r\\n background: transparent;\\r\\n border-bottom: 2px solid #E3C6B5;\\r\\n margin: 0 10px 0;\\r\\n text-align: center;\\r\\n padding: 20px;\\r\\n position: absolute;\\r\\n top: 6px;\\r\\n right: 0;\\r\\n left: 0;\\r\\n z-index: 2;\\r\\n}\\r\\n.adaptive-pricing .card .card-title{\\r\\n text-align: center;\\r\\n color: #433E37;\\r\\n padding: 45px 20px 10px;\\r\\n}\\r\\n.adaptive-pricing .card-wrapper .card .card-title p{\\r\\n font-size: calc(14px + (24 - 14) * (100vw - 1200px) / (1920 - 1200));\\r\\n font-weight: 300;\\r\\n}\\r\\n.adaptive-pricing .slide-6 .card-wrapper .card .card-title p{\\r\\n font-size: calc(14px + (18 - 14) * (100vw - 1200px) / (1920 - 1200));\\r\\n}\\r\\n.adaptive-pricing .card-wrapper .card .card-title p em{\\r\\n font-weight: 400;\\r\\n}\\r\\n.adaptive-pricing .card .card-body{\\r\\n overflow: hidden;\\r\\n background: transparent linear-gradient(290deg, #FFFFFF 0%, #FFF3EB 48%, #FFE7D8 100%);\\r\\n z-index: 1;\\r\\n padding: 0 0 10px 0;\\r\\n border-radius: 10px;\\r\\n}\\r\\n.adaptive-pricing .card:nth-child(3) .card-body{\\r\\n overflow: auto;\\r\\n margin: 0 20px;\\r\\n}\\r\\n.adaptive-pricing .slide-2 .card .card-body,\\r\\n.adaptive-pricing .slide-5 .card .card-body,\\r\\n.adaptive-pricing .slide-6 .card .card-body{\\r\\n margin: 0 20px;\\r\\n}\\r\\n.adaptive-pricing .card .card-body .list-row{\\r\\n color: #404D4D;\\r\\n font-weight: 400;\\r\\n background: #fff;\\r\\n padding: 0;\\r\\n margin: 0 20px 20px;\\r\\n height: 100px;\\r\\n border-radius: 10px;\\r\\n box-shadow: 0 0 20px rgb(0 0 0 / 5%);\\r\\n z-index: 1;\\r\\n position: relative;\\r\\n}\\r\\n.adaptive-pricing .card .card-body .list-row .col{\\r\\n height: 100%;\\r\\n}\\r\\n.adaptive-pricing .card .card-body .list-row .col > div{\\r\\n height: 100%;\\r\\n align-content: center;\\r\\n}\\r\\n.adaptive-pricing .card .card-body > .card-info{\\r\\n color: #65617D;\\r\\n font-size: 18px;\\r\\n margin-bottom: 20px;\\r\\n}\\r\\n.adaptive-pricing .card .card-body .card-info label{\\r\\n color: #65617D;\\r\\n margin: 0;\\r\\n font-weight: 400;\\r\\n}\\r\\n.adaptive-pricing .card .card-body .card-info span{\\r\\n color: #3F3D56;\\r\\n font-weight: 500;\\r\\n}\\r\\n.adaptive-pricing .card .card-body .profile{\\r\\n background-color: #fff;\\r\\n border-radius: 16px;\\r\\n margin: 0 auto;\\r\\n padding: 15px 20px 5px;\\r\\n}\\r\\n.adaptive-pricing .card .card-body .card-name{\\r\\n font-size:calc(10px + (22 - 10) * (100vw - 1200px) / (1920 - 1200));\\r\\n color: #BC5D7D;\\r\\n}\\r\\n.adaptive-pricing .card-text p {\\r\\n width: 100%;\\r\\n height: 7px;\\r\\n background: #F7E8E4;\\r\\n margin-bottom: 6px;\\r\\n border-radius: 10px;\\r\\n}\\r\\n.adaptive-pricing .card-text p:nth-child(2){\\r\\n width: 80%;\\r\\n}\\r\\n.adaptive-pricing .card-text p:nth-child(3){\\r\\n width: 60%;\\r\\n}\\r\\n.adaptive-pricing .bullets{\\r\\n top: 0;\\r\\n bottom: 0;\\r\\n margin: 0 auto;\\r\\n left: 0;\\r\\n z-index: 6;\\r\\n}\\r\\n.adaptive-pricing .bullets span{\\r\\n font-size:calc(10px + (14 - 10) * (100vw - 1200px) / (1920 - 1200));\\r\\n}\\r\\n.adaptive-pricing .bullets p{\\r\\n width: 10px;\\r\\n height: 10px;\\r\\n background: #C9C9C9;\\r\\n margin: auto;\\r\\n border-radius: 10px;\\r\\n margin-right: 5px;\\r\\n}\\r\\n.adaptive-pricing .bullets p.active{\\r\\n background: #E6818B;\\r\\n}\\r\\n.adaptive-pricing .card .card-body .detail p{\\r\\n font-size: calc(10px + (14 - 10) * (100vw - 1200px) / (1920 - 1200));\\r\\n}\\r\\n.adaptive-pricing .card .card-body .detail .location{\\r\\n background: url(/assets/images/adaptive-pricing/location.svg) no-repeat left 52% center;\\r\\n}\\r\\n.adaptive-pricing .card .card-body .detail .bullets p.active{\\r\\n background: #E6818B !important;\\r\\n}\\r\\n.adaptive-pricing .card .card-body .price{\\r\\n width: 78px;\\r\\n display: flex;\\r\\n flex-direction: column;\\r\\n justify-content: center;\\r\\n align-items: center;\\r\\n background-color: #FFEBE5;\\r\\n border-radius: 0 10px 10px 0;\\r\\n}\\r\\n.adaptive-pricing .card .card-body .price h2{\\r\\n line-height: 14px;\\r\\n margin-bottom: 4px;\\r\\n}\\r\\n.adaptive-pricing .card .card-body .price h2 strong{\\r\\n font-size:calc(15px + (20 - 15) * (100vw - 1200px) / (1920 - 1200));\\r\\n color: #C94573;\\r\\n}\\r\\n.adaptive-pricing .card .card-body .price p{\\r\\n font-size:calc(10px + (12 - 10) * (100vw - 1200px) / (1920 - 1200));\\r\\n font-weight: 400;\\r\\n}\\r\\n.adaptive-pricing .sub-wrapper{\\r\\n width: 100%;\\r\\n height: 100vh;\\r\\n}\\r\\n/* Screen-1 */\\r\\n.adaptive-pricing .slide-1 .sub-wrapper .left-section{\\r\\n min-width: 100%;\\r\\n opacity: 1;\\r\\n background: url('/assets/images/adaptive-pricing/adaptive-bg1.png');\\r\\n background-size: cover;\\r\\n position: relative;\\r\\n transition: all 900ms ease-in-out;\\r\\n}\\r\\n.adaptive-pricing .slide-1 .card .card-header{\\r\\n padding: 12px;\\r\\n top: 0;\\r\\n}\\r\\n.adaptive-pricing .slide-1.animate-in .sub-wrapper .left-section{\\r\\n min-width: 62%;\\r\\n opacity: 1;\\r\\n transition: all 900ms ease-in-out;\\r\\n transition-delay: 1s;\\r\\n}\\r\\n.adaptive-pricing .slide-1.first-time-load.animate-in.animate-out .sub-wrapper .left-section{\\r\\n min-width: 0%;\\r\\n opacity: 0;\\r\\n transition-delay: 0s;\\r\\n transition: all 1000ms ease-in-out;\\r\\n}\\r\\n.adaptive-pricing .slide-1.first-time-load .sub-wrapper .left-section{\\r\\n min-width: 62%;\\r\\n opacity: 0;\\r\\n transition: all 800ms ease-in-out;\\r\\n}\\r\\n.adaptive-pricing .slide-1.first-time-load.animate-in .sub-wrapper .left-section{\\r\\n min-width: 62%;\\r\\n opacity: 1;\\r\\n transition: all 800ms ease-in-out;\\r\\n}\\r\\n.adaptive-pricing .slide-1.first-time-load.animate-in .sub-wrapper .left-section h2{\\r\\n transition-delay: 200ms;\\r\\n}\\r\\n.adaptive-pricing .slide-1.first-time-load.animate-in .sub-wrapper .left-section p{\\r\\n transition-delay: 300ms;\\r\\n}\\r\\n.adaptive-pricing .slide-1.first-time-load.animate-in .content-wrapper h2{\\r\\n transition-delay: 0.5s;\\r\\n}\\r\\n.adaptive-pricing .slide-1.first-time-load.animate-in .content-wrapper p{\\r\\n transition-delay: 0.7s;\\r\\n}\\r\\n.adaptive-pricing .slide-1 .sub-wrapper .right-section{\\r\\n width: 38%;\\r\\n background: #F4F6F9;\\r\\n}\\r\\n.adaptive-pricing .slide-1.first-time-load.animate-out .sub-wrapper .right-section{\\r\\n width: 0%;\\r\\n}\\r\\n.adaptive-pricing .slide-1 .sub-wrapper .right-section .content-wrapper h2{\\r\\n font-size:calc(24px + (36 - 24) * (100vw - 1200px) / (1920 - 1200));\\r\\n margin-bottom: 25px;\\r\\n}\\r\\n.adaptive-pricing .slide-1 .sub-wrapper .right-section p{\\r\\n font-size:calc(18px + (26 - 18) * (100vw - 1200px) / (1920 - 1200));\\r\\n}\\r\\n.adaptive-pricing .slide-1 .content-wrapper {\\r\\n top: 50%;\\r\\n transform: translateY(-50%);\\r\\n padding: 0 55px;\\r\\n left: auto;\\r\\n right: auto;\\r\\n}\\r\\n.adaptive-pricing .slide-1 .content-wrapper p{\\r\\n width: 100%;\\r\\n}\\r\\n.adaptive-pricing .adaptive-pricing-story-wrapper section{\\r\\n height: 100vh;\\r\\n}\\r\\n.adaptive-pricing .slide-1 .card:after{\\r\\n transform: skew(0deg, -10deg);\\r\\n}\\r\\n.adaptive-pricing .slide-1 .card .card-body{\\r\\n margin-top: 20px;\\r\\n}\\r\\n.adaptive-pricing .slide-1 .card:first-child{\\r\\n right: 64px;\\r\\n}\\r\\n.adaptive-pricing .slide-1 .card:nth-child(2){\\r\\n top: -16px;\\r\\n}\\r\\n.adaptive-pricing .slide-1 .card-wrapper .card:nth-child(3){\\r\\n right: 4px;\\r\\n top: 90px;\\r\\n}\\r\\n.adaptive-pricing p.customer-data{\\r\\n color: #BC5D7D;\\r\\n font-weight: 500;\\r\\n font-size: calc(12px + (18 - 12) * (100vw - 1200px) / (1920 - 1200));\\r\\n}\\r\\n/* Animation */\\r\\n.adaptive-pricing .slide-1, \\r\\n.adaptive-pricing .slide-2, \\r\\n.adaptive-pricing .slide-3, \\r\\n.adaptive-pricing .slide-4,\\r\\n.adaptive-pricing .slide-5, \\r\\n.adaptive-pricing .slide-6, \\r\\n.adaptive-pricing .slide-7{\\r\\n opacity: 0;\\r\\n}\\r\\n.adaptive-pricing .slide-1.animate-in, \\r\\n.adaptive-pricing .slide-2.animate-in, \\r\\n.adaptive-pricing .slide-3.animate-in, \\r\\n.adaptive-pricing .slide-4.animate-in,\\r\\n.adaptive-pricing .slide-5.animate-in, \\r\\n.adaptive-pricing .slide-6.animate-in, \\r\\n.adaptive-pricing .slide-7.animate-in{\\r\\n opacity: 1;\\r\\n}\\r\\n.adaptive-pricing .slide-1 .content-wrapper h2, \\r\\n.adaptive-pricing .slide-2 .content-wrapper h2, \\r\\n.adaptive-pricing .slide-3 .content-wrapper h2,\\r\\n.adaptive-pricing .slide-5 .content-wrapper h2,\\r\\n.adaptive-pricing .slide-6 .content-wrapper h2, \\r\\n.adaptive-pricing .slide-7 .content-wrapper h2,\\r\\n.adaptive-pricing .slide-1.first-time-load.animate-out .content-wrapper h2,\\r\\n.adaptive-pricing .slide-2.animate-in.animate-out .content-wrapper h2,\\r\\n.adaptive-pricing .slide-3.animate-in.animate-out .content-wrapper h2, \\r\\n.adaptive-pricing .slide-5.animate-in.animate-out .content-wrapper h2, \\r\\n.adaptive-pricing .slide-6.animate-in.animate-out .content-wrapper h2, \\r\\n.adaptive-pricing .slide-7.animate-in.animate-out .content-wrapper h2{\\r\\n opacity: 0;\\r\\n}\\r\\n.adaptive-pricing .slide-1 .content-wrapper p, \\r\\n.adaptive-pricing .slide-2 .content-wrapper p, \\r\\n.adaptive-pricing .slide-3 .content-wrapper p,\\r\\n.adaptive-pricing .slide-5 .content-wrapper p,\\r\\n.adaptive-pricing .slide-6 .content-wrapper p, \\r\\n.adaptive-pricing .slide-7 .content-wrapper p,\\r\\n.adaptive-pricing .slide-1.animate-in.animate-out .content-wrapper p, \\r\\n.adaptive-pricing .slide-2.animate-in.animate-out .content-wrapper p, \\r\\n.adaptive-pricing .slide-3.animate-in.animate-out .content-wrapper p, \\r\\n.adaptive-pricing .slide-5.animate-in.animate-out .content-wrapper p, \\r\\n.adaptive-pricing .slide-6.animate-in.animate-out .content-wrapper p, \\r\\n.adaptive-pricing .slide-7.animate-in.animate-out .content-wrapper p{\\r\\n transform: translateY(-20px);\\r\\n opacity: 0;\\r\\n transition: all 200ms linear;\\r\\n}\\r\\n.adaptive-pricing .slide-2.animate-in .content-wrapper h2, \\r\\n.adaptive-pricing .slide-3.animate-in .content-wrapper h2,\\r\\n.adaptive-pricing .slide-5.animate-in .content-wrapper h2,\\r\\n.adaptive-pricing .slide-6.animate-in .content-wrapper h2{\\r\\n opacity: 1;\\r\\n animation: titleAnim 2s ease-in-out forwards;\\r\\n transform-origin: center;\\r\\n}\\r\\n.adaptive-pricing .slide-7.animate-in .content-wrapper h2{\\r\\n opacity: 1;\\r\\n transition: all 1s ease-in-out;\\r\\n}\\r\\n.adaptive-pricing .slide-1.animate-in .content-wrapper p, \\r\\n.adaptive-pricing .slide-2.animate-in .content-wrapper p, \\r\\n.adaptive-pricing .slide-3.animate-in .content-wrapper p,\\r\\n.adaptive-pricing .slide-5.animate-in .content-wrapper p, \\r\\n.adaptive-pricing .slide-6.animate-in .content-wrapper p, \\r\\n.adaptive-pricing .slide-7.animate-in .content-wrapper p{\\r\\n transform: translateY(0);\\r\\n opacity: 1;\\r\\n transition: all 500ms ease-in-out;\\r\\n transition-delay: 1.8s;\\r\\n}\\r\\n.adaptive-pricing .slide-1.animate-in .content-wrapper h2{\\r\\n opacity: 1;\\r\\n transition: all 500ms ease-in-out;\\r\\n transition-delay: 2s;\\r\\n}\\r\\n.adaptive-pricing .slide-1.animate-in .content-wrapper p{\\r\\n opacity: 1;\\r\\n transition-delay: 2.5s;\\r\\n}\\r\\n.adaptive-pricing .slide-3.animate-in.step .content-wrapper h2,\\r\\n.adaptive-pricing .slide-3.animate-in.animate-out.step .content-wrapper h2,\\r\\n.adaptive-pricing .slide-4.animate-in.animate-out.step .content-wrapper h2,\\r\\n.adaptive-pricing .slide-5.animate-in.animate-out.step .content-wrapper h2,\\r\\n.adaptive-pricing .slide-5.animate-in.step .content-wrapper h2{\\r\\n transform: translateX(0);\\r\\n opacity: 1;\\r\\n transition: none;\\r\\n animation: none;\\r\\n font-size:calc(18px + (32 - 18) * (100vw - 1200px) / (1920 - 1200));\\r\\n}\\r\\n.adaptive-pricing .slide-3.animate-in.step .content-wrapper p,\\r\\n.adaptive-pricing .slide-3.animate-in.animate-out.step .content-wrapper p,\\r\\n.adaptive-pricing .slide-4.animate-in.animate-out.step .content-wrapper p,\\r\\n.adaptive-pricing .slide-5.animate-in.step .content-wrapper p{\\r\\n transform: translateX(0);\\r\\n opacity: 1;\\r\\n transition: none;\\r\\n}\\r\\n.adaptive-pricing .animate-in.slide-1{\\r\\n z-index: 5;\\r\\n}\\r\\n/* Screen 2 */\\r\\n.adaptive-pricing .oval-wrapper{\\r\\n cursor: default;\\r\\n}\\r\\n.adaptive-pricing .oval-space {\\r\\n width: 180px;\\r\\n height: 130px;\\r\\n background: #fff;\\r\\n border-radius: 100px;\\r\\n position: relative;\\r\\n background: linear-gradient(145deg, #efeeee, #ffffff);\\r\\n box-shadow: 6px 5px 10px #f3f2f1, inset 0px 0px 1px #eaeaea, inset 2px 2px 6px #eaeaea;\\r\\n border: 1px solid #ffffff;\\r\\n}\\r\\n.adaptive-pricing .oval-space.active{\\r\\n background: #FFEAE3;\\r\\n}\\r\\n.adaptive-pricing .oval-space .inner-image{\\r\\n display: flex;\\r\\n align-items: center;\\r\\n justify-content: center;\\r\\n cursor: pointer;\\r\\n}\\r\\n.adaptive-pricing .oval-space.expand .inner-image{\\r\\n justify-content: flex-start;\\r\\n padding-left: 70px;\\r\\n}\\r\\n.adaptive-pricing .oval-space .inner-image::after{\\r\\n content: '';\\r\\n position: absolute;\\r\\n margin: auto;\\r\\n top: 0;\\r\\n bottom: 0;\\r\\n left:50px;\\r\\n display: flex;\\r\\n justify-content: center;\\r\\n align-items: center;\\r\\n}\\r\\n.adaptive-pricing .oval-space .inner-image:before {\\r\\n content: '';\\r\\n width: 100px;\\r\\n height: 10px;\\r\\n background: #E6E6E6;\\r\\n border-radius: 400px 400px 400px 400px / 150px 150px 150px 150px;\\r\\n position: absolute;\\r\\n bottom: 10px;\\r\\n /* transform: rotate3d(50, 1, 1, 65deg); */\\r\\n}\\r\\n.adaptive-pricing .oval-space.active .inner-image:before{\\r\\n width: 100px;\\r\\n background: #fff;\\r\\n}\\r\\n.adaptive-pricing .oval-space.group .inner-image:before{\\r\\n width: 120px;\\r\\n height: 45px;\\r\\n}\\r\\n.adaptive-pricing .oval-space.expand .inner-image:before{\\r\\n left: 40px;\\r\\n}\\r\\n.adaptive-pricing .oval-space.group.expand .inner-image:before{\\r\\n left: 30px;\\r\\n}\\r\\n.adaptive-pricing .oval-space.solo .inner-image::after{\\r\\n background: url(/assets/images/adaptive-pricing/solo.svg) no-repeat;\\r\\n width: 41px;\\r\\n height: 97px;\\r\\n left:70px;\\r\\n}\\r\\n.adaptive-pricing .oval-space.business .inner-image::after{\\r\\n background: url(/assets/images/adaptive-pricing/bussiness.svg) no-repeat;\\r\\n width: 104px;\\r\\n height: 100px;\\r\\n}\\r\\n.adaptive-pricing .oval-space.couple .inner-image::after{\\r\\n background: url(/assets/images/adaptive-pricing/couple.svg) no-repeat;\\r\\n width: 93px;\\r\\n height: 98px;\\r\\n}\\r\\n.adaptive-pricing .oval-space.group .inner-image::after{\\r\\n background: url(/assets/images/adaptive-pricing/group.svg) no-repeat;\\r\\n width: 117px;\\r\\n height: 86px;\\r\\n left: 35px;\\r\\n}\\r\\n.adaptive-pricing .oval-space.expand{\\r\\n width: 280px;\\r\\n transition:all 300ms ease-in-out;\\r\\n}\\r\\n.adaptive-pricing .oval-space .info{\\r\\n width: 70px;\\r\\n height: 70px;\\r\\n position: absolute;\\r\\n top: 0;\\r\\n bottom: 0;\\r\\n display: flex;\\r\\n flex-direction: column;\\r\\n justify-content: center;\\r\\n align-items: flex-end;\\r\\n white-space: nowrap;\\r\\n transition: all 100ms ease-in-out;\\r\\n left: 80px;\\r\\n color: #D4D9F2;\\r\\n opacity: 0;\\r\\n text-align: left;\\r\\n font-size: calc(14px + (16 - 14) * (100vw - 1200px) / (1920 - 1200));\\r\\n font-weight: 500;\\r\\n cursor: pointer;\\r\\n}\\r\\n.adaptive-pricing .oval-space.expand .info{\\r\\n opacity: 1;\\r\\n transition: all 100ms ease-in-out;\\r\\n transition-delay: 200ms;\\r\\n top: 0;\\r\\n bottom: 0;\\r\\n margin: auto;\\r\\n right: 46px;\\r\\n width: auto;\\r\\n}\\r\\n.adaptive-pricing .oval-wrapper h2, .oval-wrapper h3, .oval-wrapper p{\\r\\n margin: 0;\\r\\n}\\r\\n.adaptive-pricing .oval-wrapper h2{\\r\\n font-size: 26px;\\r\\n font-weight: 500;\\r\\n}\\r\\n.oval-wrapper h3{\\r\\n font-size: 30px;\\r\\n font-weight: 500;\\r\\n color: #3F3D56;\\r\\n}\\r\\n.adaptive-pricing .oval-wrapper p{\\r\\n font-size: 14px;\\r\\n color: #3F3D56;\\r\\n}\\r\\n/* Slide-3 */\\r\\n.adaptive-pricing .slide-3 .card{\\r\\n width: 85%;\\r\\n}\\r\\n.adaptive-pricing .slide-3 .card .card-body{\\r\\n padding: 0 10px;\\r\\n overflow-y: hidden;\\r\\n}\\r\\n.adaptive-pricing .slide-3 .card .card-body .image-wrapper{\\r\\n background: #F7E8E4;\\r\\n min-width: 62px;\\r\\n height: 62px;\\r\\n border-radius: 10px;\\r\\n}\\r\\n.adaptive-pricing .slide-3 .card .card-body .card-text p{\\r\\n height: 10px;\\r\\n margin-bottom: 15px;\\r\\n width: 100%;\\r\\n}\\r\\n.adaptive-pricing .slide-3 .card .card-body .card-info-wrapper{\\r\\n overflow: auto;\\r\\n z-index: 5;\\r\\n max-height: calc(100vh - 580px);\\r\\n padding: 0 10px;\\r\\n}\\r\\n.adaptive-pricing .slide-3 .card .card-body .card-info-wrapper > div{\\r\\n padding: 0 0 10px;\\r\\n font-size: calc(10px + (18 - 10) * (100vw - 1200px) / (1920 - 1200));\\r\\n}\\r\\n/* Slide-7 */\\r\\n/* .adaptive-pricing .wrapper p{\\r\\n width: 90%;\\r\\n} */\\r\\n.adaptive-pricing .slide-7 .wrapper .col-6{\\r\\n padding-top: 80px;\\r\\n}\\r\\n.adaptive-pricing .slide-7 .wrapper .right-section{\\r\\n box-shadow: -8px -8px 20px #FFFFFF59;\\r\\n background: url(/assets/images/adaptive-pricing/guest.svg) no-repeat bottom center;\\r\\n background-size: 100%;\\r\\n position: relative;\\r\\n}\\r\\n.adaptive-pricing .slide-7 .wrapper .right-section .content-wrapper{\\r\\n opacity: 0;\\r\\n}\\r\\n.adaptive-pricing .slide-7 .wrapper .right-section.benefit-active .content-wrapper{\\r\\n opacity: 1;\\r\\n /* transition: 0.5s ease-in-out; */\\r\\n transition-delay: 0.5s;\\r\\n}\\r\\n.adaptive-pricing .slide-7 .wrapper .right-section.benefit-active::before{\\r\\n content: '';\\r\\n background: transparent linear-gradient(316deg, #FFFFFF 0%, #FFF3EB 79%, #FFE7D853 100%) 0% 0% no-repeat padding-box;\\r\\n position: absolute;\\r\\n top: 0;\\r\\n bottom: 0;\\r\\n right: 0;\\r\\n left: 0;\\r\\n z-index: -1;\\r\\n transition: 0.5s ease-in-out;\\r\\n}\\r\\n.adaptive-pricing .slide-7 .wrapper .left-section{\\r\\n background: url(/assets/images/adaptive-pricing/case-study.svg) no-repeat bottom center;\\r\\n}\\r\\n.adaptive-pricing::after{\\r\\n content: '';\\r\\n background: url('/assets/images/adaptive-pricing/adaptive-bg@2x.png');\\r\\n position: absolute;\\r\\n top: 0;\\r\\n bottom: 0;\\r\\n left: 0;\\r\\n right: 0;\\r\\n z-index: -1;\\r\\n background-size: cover;\\r\\n}\\r\\n.adaptive-pricing.screen-7::after{\\r\\n content: none;\\r\\n}\\r\\n/* Slide-5 */\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:first-child .col,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(2) .col,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(3) .col{\\r\\n background-color: #65617D;\\r\\n color: #FFFFFF;\\r\\n border-radius: 10px 0 0 10px;\\r\\n}\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:first-child .col .card-name,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(2) .col .card-name,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(3) .col .card-name{\\r\\n color: #FFFFFF;\\r\\n}\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:first-child .col .bullets p,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(2) .col .bullets p,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(3) .col .bullets p{\\r\\n background: #fff;\\r\\n}\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:first-child .card-text p,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(2) .card-text p,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(3) .card-text p{\\r\\n background-color: #8C899D;\\r\\n}\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:first-child .detail .location,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(2) .detail .location,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(3) .detail .location{\\r\\n background: url(/assets/images/adaptive-pricing/location-wt.svg) no-repeat left 52% center;\\r\\n}\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:first-child .price,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(2) .price,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(3) .price{\\r\\n background-color: #3E3958;\\r\\n color: #FFC193;\\r\\n padding-top: 34px;\\r\\n position: relative;\\r\\n}\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:first-child .price h2,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(2) .price h2,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(3) .price h2{\\r\\n line-height: 9px;\\r\\n margin-bottom: 7px;\\r\\n}\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:first-child .price strong,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(2) .price strong,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(3) .price strong{\\r\\n color: #FFC193;\\r\\n}\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:first-child .price::after,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(2) .price::after,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(3) .price::after{\\r\\n content: '';\\r\\n background: url(/assets/images/adaptive-pricing/badge.svg) no-repeat center center;\\r\\n position: absolute;\\r\\n top: 13px;\\r\\n width: 16px;\\r\\n height: 21px;\\r\\n left: 0;\\r\\n right: 0;\\r\\n margin: auto;\\r\\n}\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:first-child .price::before,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(2) .price::before,\\r\\n.adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(3) .price::before{\\r\\n content: '';\\r\\n width: 31px;\\r\\n height: 31px;\\r\\n background: white;\\r\\n border-radius: 100px;\\r\\n position: absolute;\\r\\n top: 7px;\\r\\n left: 0;\\r\\n right: 0;\\r\\n margin: auto;\\r\\n background-color: #2A2840;\\r\\n box-shadow: 0 0 6px #ffffff21;\\r\\n}\\r\\n/* Slide-5 */\\r\\n.adaptive-pricing .slide-5 .card .card-body.list-active .list-row:first-child .col{\\r\\n background-color: #65617D;\\r\\n color: #FFFFFF;\\r\\n border-radius: 10px 0 0 10px;\\r\\n}\\r\\n.adaptive-pricing .slide-5 .card .card-body.list-active .list-row:first-child .col .card-name{\\r\\n color: #FFFFFF;\\r\\n}\\r\\n.adaptive-pricing .slide-5 .card .card-body.list-active .list-row:first-child .col .bullets p{\\r\\n background: #fff;\\r\\n}\\r\\n.adaptive-pricing .slide-5 .card .card-body.list-active .list-row:first-child .card-text p{\\r\\n background-color: #8C899D;\\r\\n}\\r\\n.adaptive-pricing .slide-5 .card .card-body.list-active .list-row:first-child .detail .location{\\r\\n background: url(/assets/images/adaptive-pricing/location-wt.svg) no-repeat left 52% center;\\r\\n}\\r\\n.adaptive-pricing .slide-5 .card .card-body.list-active .list-row:first-child .price{\\r\\n background-color: #3E3958;\\r\\n color: #FFC193;\\r\\n}\\r\\n.adaptive-pricing .slide-5 .card .card-body.list-active .list-row:first-child .price strong{\\r\\n color: #FFC193;\\r\\n}\\r\\n.adaptive-pricing .bar-close{\\r\\n position: absolute;\\r\\n width: 20px;\\r\\n right: 30px;\\r\\n top: 30px;\\r\\n cursor: pointer;\\r\\n}\\r\\n.adaptive-pricing .animated-background{\\r\\n position: absolute;\\r\\n top: -1px;\\r\\n bottom: -1px;\\r\\n right: -1px;\\r\\n left: -1px;\\r\\n z-index: 9;\\r\\n opacity: 0;\\r\\n transition: all 0.5s ease-in-out;\\r\\n border-radius: 10px;\\r\\n background: linear-gradient(to right, #fffcf9 8%, #fff3eb 22%, #fffefd 40%);\\r\\n}\\r\\n.adaptive-pricing .card-loader .list-row .animated-background{\\r\\n opacity: 1;\\r\\n}\\r\\n@media (max-width: 1650px){\\r\\n .adaptive-pricing .slide-1 .card-wrapper .card:first-child{\\r\\n right: 44px;\\r\\n }\\r\\n .adaptive-pricing .card-wrapper{\\r\\n right: 20px;\\r\\n }\\r\\n .adaptive-pricing .card-wrapper .card .card-body{\\r\\n padding: 10px 0;\\r\\n }\\r\\n .adaptive-pricing .card-wrapper .card .card-body .list-row{\\r\\n margin: 0 7px 20px;\\r\\n height: 80px;\\r\\n }\\r\\n .adaptive-pricing .card-wrapper .card:nth-child(2){\\r\\n right: 26px;\\r\\n }\\r\\n .adaptive-pricing .card-wrapper .card:nth-child(3){\\r\\n right: 49px;\\r\\n }\\r\\n .adaptive-pricing .slide-3 .card-wrapper .card .card-title{\\r\\n padding: 15px 20px 5px;\\r\\n margin-bottom: 0;\\r\\n }\\r\\n .adaptive-pricing .slide-6 .card .card-body.list-active .list-row:first-child .price{\\r\\n padding-top: 27px;\\r\\n }\\r\\n .adaptive-pricing .slide-6 .card .card-body.list-active .list-row:first-child .price::after,\\r\\n .adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(2) .price::after,\\r\\n .adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(3) .price::after{\\r\\n top: 11px;\\r\\n width: 14px;\\r\\n height: 17px;\\r\\n background-size: 86%;\\r\\n }\\r\\n .adaptive-pricing .slide-6 .card .card-body.list-active .list-row:first-child .price::before,\\r\\n .adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(2) .price::before,\\r\\n .adaptive-pricing .slide-6 .card .card-body.list-active .list-row:nth-child(3) .price::before{\\r\\n width: 24px;\\r\\n height: 24px;\\r\\n top: 7px;\\r\\n }\\r\\n .adaptive-pricing .card .card-body .price h2{\\r\\n margin-bottom: 3px !important;\\r\\n }\\r\\n}\\r\\n@media (max-width: 1600px){\\r\\n .adaptive-pricing .content-wrapper p{\\r\\n width: calc(100% - 550px);\\r\\n }\\r\\n}\\r\\n@media (min-width: 1280px) and (max-width: 1450px){\\r\\n .adaptive-pricing .slide-1 .card-wrapper .card{\\r\\n width: 430px;\\r\\n }\\r\\n .adaptive-pricing .bullets p{\\r\\n width: 8px;\\r\\n height: 8px;\\r\\n }\\r\\n .adaptive-pricing .card .card-body .card-name{\\r\\n margin-bottom: 5px !important;\\r\\n }\\r\\n .adaptive-pricing .card-text p{\\r\\n margin-bottom: 3px;\\r\\n }\\r\\n}\\r\\n@media (max-height: 750px){\\r\\n /* .adaptive-pricing .content-wrapper{\\r\\n top: 60px;\\r\\n }\\r\\n .adaptive-pricing h2{\\r\\n margin-bottom: 10px;\\r\\n } */\\r\\n}\\r\\n@media (max-height: 700px){\\r\\n .adaptive-pricing .slide-3 .card-wrapper .card .card-title{\\r\\n margin-bottom: 0;\\r\\n }\\r\\n .adaptive-pricing .slide-3 .card .card-body .image-wrapper{\\r\\n min-width: 42px;\\r\\n height: 42px;\\r\\n }\\r\\n .adaptive-pricing .slide-3 .card .card-body .image-wrapper img{\\r\\n width: 60%;\\r\\n }\\r\\n .adaptive-pricing .slide-3 .card .card-body .card-text p{\\r\\n height: 8px;\\r\\n margin-bottom: 10px;\\r\\n }\\r\\n .adaptive-pricing .slide-1 .card .card-header{\\r\\n padding: 7px;\\r\\n }\\r\\n .adaptive-pricing .slide-1 .card .card-body{\\r\\n margin-top: 10px;\\r\\n }\\r\\n .adaptive-pricing .slide-1 .card:nth-child(2){\\r\\n top: -36px;\\r\\n }\\r\\n .adaptive-pricing .slide-1 .card-wrapper .card:nth-child(3){\\r\\n top: 50px;\\r\\n }\\r\\n .adaptive-pricing .slide-3 .card{\\r\\n top: -60px;\\r\\n }\\r\\n .adaptive-pricing .card:nth-child(3){\\r\\n top: 0px;\\r\\n }\\r\\n .adaptive-pricing .slide-3 .card-wrapper .card .card-title{\\r\\n padding: 5px 20px 0px;\\r\\n margin-bottom: 0px;\\r\\n }\\r\\n .adaptive-pricing .card:nth-child(3) .card-body{\\r\\n margin: 0 15px;\\r\\n }\\r\\n .adaptive-pricing .card .card-header{\\r\\n padding: 14px;\\r\\n }\\r\\n .adaptive-pricing .card .card-title{\\r\\n padding: 40px 20px 10px;\\r\\n }\\r\\n .adaptive-pricing .card-wrapper .card .card-body .list-row{\\r\\n margin: 0 7px 10px\\r\\n }\\r\\n}\\r\\n.adaptive-pricing .axis path, .adaptive-pricing .axis line {\\r\\n stroke: #A19FB5;\\r\\n}\\r\\n.adaptive-pricing .axis text,\\r\\n.adaptive-pricing .line-y-value-currency {\\r\\n fill: #65617D;\\r\\n}\\r\\n@keyframes titleAnim{\\r\\n 0%{\\r\\n transform: translateX(37%);\\r\\n font-size: calc(16px + (20 - 16) * (100vw - 1200px) / (1920 - 1200));\\r\\n }\\r\\n 20%{\\r\\n transform: translateX(37%);\\r\\n font-size: calc(30px + (40 - 30) * (100vw - 1200px) / (1920 - 1200));\\r\\n }\\r\\n 50%{\\r\\n transform: translateX(37%);\\r\\n font-size: calc(30px + (40 - 30) * (100vw - 1200px) / (1920 - 1200));\\r\\n }\\r\\n 75%{\\r\\n transform: translateX(0);\\r\\n font-size: calc(20px + (32 - 20) * (100vw - 1200px) / (1920 - 1200));\\r\\n }\\r\\n 100%{\\r\\n transform: translateX(0);\\r\\n font-size: calc(20px + (32 - 20) * (100vw - 1200px) / (1920 - 1200));\\r\\n }\\r\\n}\\r\\n\\r\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9hcHAvd2lkZ2V0cy9hZGFwdGl2ZS1wcmljaW5nL2FkYXB0aXZlLXByaWNpbmcuY29tcG9uZW50LmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxZQUFZO0FBQ1o7SUFDSSw2Q0FBNkM7SUFDN0MsaUJBQWlCO0lBQ2pCLGVBQWU7Q0FDbEI7QUFDRDtJQUNJLDZDQUE2QztDQUNoRDtBQUNEO0lBQ0ksV0FBVztDQUNkO0FBQ0Q7SUFDSSxhQUFhO0lBQ2IsV0FBVztJQUNYLFVBQVU7SUFDVixhQUFhO0lBQ2IsZ0JBQWdCO0lBQ2hCLGdCQUFnQjtDQUNuQjtBQUNEO0lBQ0ksZUFBZTtJQUNmLGdCQUFnQjtJQUNoQixpQkFBaUI7SUFDakIsYUFBYTtDQUNoQjtBQUNEO0lBQ0ksMEJBQTBCO0lBQzFCLFlBQVk7SUFDWixhQUFhO0lBQ2Isa0JBQWtCO0NBQ3JCO0FBQ0Q7SUFDSSwwQkFBMEI7Q0FDN0I7QUFDRDs7SUFFSSxrQkFBa0I7SUFDbEIsa0JBQWtCO0lBQ2xCLGFBQWE7SUFDYixpQkFBaUI7SUFDakIsbUJBQW1CO0NBQ3RCO0FBQ0Q7SUFDSSxtQkFBbUI7SUFDbkIsT0FBTztJQUNQLFVBQVU7SUFDVixRQUFRO0lBQ1IsU0FBUztJQUNULFdBQVc7Q0FDZDtBQUNEO0lBQ0ksY0FBYztJQUNkLGdCQUFnQjtJQUNoQixXQUFXO0lBQ1gsUUFBUTtJQUNSLFNBQVM7SUFDVCxPQUFPO0lBQ1AsVUFBVTtDQUNiO0FBQ0Q7SUFDSSxvRUFBb0U7SUFDcEUsc0JBQXNCO0lBQ3RCLGVBQWU7Q0FDbEI7QUFDRDtJQUNJLGVBQWU7Q0FDbEI7QUFDRDtJQUNJLG1CQUFtQjtJQUNuQixVQUFVO0lBQ1YsUUFBUTtJQUNSLFNBQVM7Q0FDWjtBQUNEO0lBQ0k7UUFDSSxVQUFVO0tBQ2I7Q0FDSjtBQUNEO0lBQ0k7UUFDSSxzQkFBc0I7S0FDekI7Q0FDSjtBQUVEO0lBQ0ksMEJBQTBCO0lBQzFCLG9CQUFvQjtDQUN2QjtBQUNEO0lBQ0ksb0VBQW9FO0lBQ3BFLGlCQUFpQjtJQUNqQixtQkFBbUI7Q0FDdEI7QUFDRDtJQUNJLGNBQWM7SUFDZCxvQkFBb0I7SUFDcEIsMEJBQTBCO0lBQzFCLGNBQWM7SUFDZCxhQUFhO0lBQ2IsbUJBQW1CO0lBQ25CLE9BQU87SUFDUCxRQUFRO0NBQ1g7QUFDRDtJQUNJLGtDQUFrQztJQUNsQyxpQkFBaUI7SUFDakIsZUFBZTtJQUNmLG1CQUFtQjtJQUNuQixvRUFBb0U7Q0FDdkU7QUFDRDtJQUNJLGVBQWU7SUFDZixpQkFBaUI7Q0FDcEI7QUFDRDtJQUNJLG9FQUFvRTtJQUNwRSxVQUFVO0NBQ2I7QUFDRDtJQUNJLGlCQUFpQjtJQUNqQixtQkFBbUI7Q0FDdEI7QUFDRDtJQUNJLGNBQWM7SUFDZCw0QkFBNEI7SUFDNUIsb0JBQW9CO0lBQ3BCLG1CQUFtQjtJQUNuQixPQUFPO0lBQ1AsWUFBWTtJQUNaLFVBQVU7SUFDVixhQUFhO0NBQ2hCO0FBQ0Q7SUFDSSxXQUFXO0lBQ1gsdUZBQXVGO0lBQ3ZGLHFDQUFxQztJQUNyQyxVQUFVO0lBQ1YsbUJBQW1CO0lBQ25CLFNBQVM7SUFDVCxVQUFVO0lBQ1YsWUFBWTtJQUNaLGFBQWE7SUFDYixXQUFXO0lBQ1gsV0FBVztJQUNYLDZCQUE2QjtJQUM3QixrQ0FBa0M7SUFDbEMsMkJBQTJCO0NBQzlCO0FBQ0Q7SUFDSSxhQUFhO0NBQ2hCO0FBQ0Q7SUFDSSx3QkFBd0I7Q0FDM0I7QUFDRDtJQUNJLFdBQVc7SUFDWCxrQ0FBa0M7SUFDbEMsMkJBQTJCO0NBQzlCO0FBQ0Q7SUFDSSx3QkFBd0I7Q0FDM0I7QUFDRDtJQUNJLHdCQUF3QjtDQUMzQjtBQUNEO0lBQ0ksd0JBQXdCO0NBQzNCO0FBQ0Q7SUFDSSx3QkFBd0I7Q0FDM0I7QUFDRDtJQUNJLHdCQUF3QjtDQUMzQjtBQUNEO0lBQ0ksd0JBQXdCO0NBQzNCO0FBQ0Q7Ozs7SUFJSSxXQUFXO0lBQ1gsd0JBQXdCO0NBQzNCO0FBQ0Q7SUFDSSxZQUFZO0lBQ1osV0FBVztDQUNkO0FBQ0Q7SUFDSSxZQUFZO0lBQ1osVUFBVTtDQUNiO0FBQ0Q7SUFDSSxZQUFZO0lBQ1osY0FBYztJQUNkLG1CQUFtQjtJQUNuQixjQUFjO0lBQ2QsdUZBQXVGO0lBQ3ZGLHFDQUFxQztJQUNyQyxTQUFTO0lBQ1QsUUFBUTtJQUNSLDZCQUE2QjtJQUM3QixXQUFXO0NBQ2Q7QUFDRDtJQUNJLGVBQWU7SUFDZixvRUFBb0U7SUFDcEUsZ0JBQWdCO0lBQ2hCLGlCQUFpQjtJQUNqQix3QkFBd0I7SUFDeEIsaUNBQWlDO0lBQ2pDLGlCQUFpQjtJQUNqQixtQkFBbUI7SUFDbkIsY0FBYztJQUNkLG1CQUFtQjtJQUNuQixTQUFTO0lBQ1QsU0FBUztJQUNULFFBQVE7SUFDUixXQUFXO0NBQ2Q7QUFDRDtJQUNJLG1CQUFtQjtJQUNuQixlQUFlO0lBQ2Ysd0JBQXdCO0NBQzNCO0FBQ0Q7SUFDSSxxRUFBcUU7SUFDckUsaUJBQWlCO0NBQ3BCO0FBQ0Q7SUFDSSxxRUFBcUU7Q0FDeEU7QUFDRDtJQUNJLGlCQUFpQjtDQUNwQjtBQUNEO0lBQ0ksaUJBQWlCO0lBQ2pCLHVGQUF1RjtJQUN2RixXQUFXO0lBQ1gsb0JBQW9CO0lBQ3BCLG9CQUFvQjtDQUN2QjtBQUNEO0lBQ0ksZUFBZTtJQUNmLGVBQWU7Q0FDbEI7QUFDRDs7O0lBR0ksZUFBZTtDQUNsQjtBQUNEO0lBQ0ksZUFBZTtJQUNmLGlCQUFpQjtJQUNqQixpQkFBaUI7SUFDakIsV0FBVztJQUNYLG9CQUFvQjtJQUNwQixjQUFjO0lBQ2Qsb0JBQW9CO0lBQ3BCLHFDQUFxQztJQUNyQyxXQUFXO0lBQ1gsbUJBQW1CO0NBQ3RCO0FBQ0Q7SUFDSSxhQUFhO0NBQ2hCO0FBQ0Q7SUFDSSxhQUFhO0lBQ2Isc0JBQXNCO0NBQ3pCO0FBQ0Q7SUFDSSxlQUFlO0lBQ2YsZ0JBQWdCO0lBQ2hCLG9CQUFvQjtDQUN2QjtBQUNEO0lBQ0ksZUFBZTtJQUNmLFVBQVU7SUFDVixpQkFBaUI7Q0FDcEI7QUFDRDtJQUNJLGVBQWU7SUFDZixpQkFBaUI7Q0FDcEI7QUFDRDtJQUNJLHVCQUF1QjtJQUN2QixvQkFBb0I7SUFDcEIsZUFBZTtJQUNmLHVCQUF1QjtDQUMxQjtBQUNEO0lBQ0ksb0VBQW9FO0lBQ3BFLGVBQWU7Q0FDbEI7QUFDRDtJQUNJLFlBQVk7SUFDWixZQUFZO0lBQ1osb0JBQW9CO0lBQ3BCLG1CQUFtQjtJQUNuQixvQkFBb0I7Q0FDdkI7QUFDRDtJQUNJLFdBQVc7Q0FDZDtBQUNEO0lBQ0ksV0FBVztDQUNkO0FBQ0Q7SUFDSSxPQUFPO0lBQ1AsVUFBVTtJQUNWLGVBQWU7SUFDZixRQUFRO0lBQ1IsV0FBVztDQUNkO0FBQ0Q7SUFDSSxvRUFBb0U7Q0FDdkU7QUFDRDtJQUNJLFlBQVk7SUFDWixhQUFhO0lBQ2Isb0JBQW9CO0lBQ3BCLGFBQWE7SUFDYixvQkFBb0I7SUFDcEIsa0JBQWtCO0NBQ3JCO0FBQ0Q7SUFDSSxvQkFBb0I7Q0FDdkI7QUFDRDtJQUNJLHFFQUFxRTtDQUN4RTtBQUNEO0lBQ0ksd0ZBQXdGO0NBQzNGO0FBQ0Q7SUFDSSwrQkFBK0I7Q0FDbEM7QUFDRDtJQUNJLFlBQVk7SUFDWixjQUFjO0lBQ2QsdUJBQXVCO0lBQ3ZCLHdCQUF3QjtJQUN4QixvQkFBb0I7SUFDcEIsMEJBQTBCO0lBQzFCLDZCQUE2QjtDQUNoQztBQUNEO0lBQ0ksa0JBQWtCO0lBQ2xCLG1CQUFtQjtDQUN0QjtBQUNEO0lBQ0ksb0VBQW9FO0lBQ3BFLGVBQWU7Q0FDbEI7QUFDRDtJQUNJLG9FQUFvRTtJQUNwRSxpQkFBaUI7Q0FDcEI7QUFDRDtJQUNJLFlBQVk7SUFDWixjQUFjO0NBQ2pCO0FBRUQsY0FBYztBQUNkO0lBQ0ksZ0JBQWdCO0lBQ2hCLFdBQVc7SUFDWCxvRUFBb0U7SUFDcEUsdUJBQXVCO0lBQ3ZCLG1CQUFtQjtJQUNuQixrQ0FBa0M7Q0FDckM7QUFDRDtJQUNJLGNBQWM7SUFDZCxPQUFPO0NBQ1Y7QUFDRDtJQUNJLGVBQWU7SUFDZixXQUFXO0lBQ1gsa0NBQWtDO0lBQ2xDLHFCQUFxQjtDQUN4QjtBQUNEO0lBQ0ksY0FBYztJQUNkLFdBQVc7SUFDWCxxQkFBcUI7SUFDckIsbUNBQW1DO0NBQ3RDO0FBQ0Q7SUFDSSxlQUFlO0lBQ2YsV0FBVztJQUNYLGtDQUFrQztDQUNyQztBQUNEO0lBQ0ksZUFBZTtJQUNmLFdBQVc7SUFDWCxrQ0FBa0M7Q0FDckM7QUFDRDtJQUNJLHdCQUF3QjtDQUMzQjtBQUNEO0lBQ0ksd0JBQXdCO0NBQzNCO0FBQ0Q7SUFDSSx1QkFBdUI7Q0FDMUI7QUFDRDtJQUNJLHVCQUF1QjtDQUMxQjtBQUNEO0lBQ0ksV0FBVztJQUNYLG9CQUFvQjtDQUN2QjtBQUNEO0lBQ0ksVUFBVTtDQUNiO0FBQ0Q7SUFDSSxvRUFBb0U7SUFDcEUsb0JBQW9CO0NBQ3ZCO0FBQ0Q7SUFDSSxvRUFBb0U7Q0FDdkU7QUFDRDtJQUNJLFNBQVM7SUFDVCw0QkFBNEI7SUFDNUIsZ0JBQWdCO0lBQ2hCLFdBQVc7SUFDWCxZQUFZO0NBQ2Y7QUFDRDtJQUNJLFlBQVk7Q0FDZjtBQUNEO0lBQ0ksY0FBYztDQUNqQjtBQUVEO0lBQ0ksOEJBQThCO0NBQ2pDO0FBQ0Q7SUFDSSxpQkFBaUI7Q0FDcEI7QUFDRDtJQUNJLFlBQVk7Q0FDZjtBQUNEO0lBQ0ksV0FBVztDQUNkO0FBQ0Q7SUFDSSxXQUFXO0lBQ1gsVUFBVTtDQUNiO0FBQ0Q7SUFDSSxlQUFlO0lBQ2YsaUJBQWlCO0lBQ2pCLHFFQUFxRTtDQUN4RTtBQUNELGVBQWU7QUFDZjs7Ozs7OztJQU9JLFdBQVc7Q0FDZDtBQUNEOzs7Ozs7O0lBT0ksV0FBVztDQUNkO0FBQ0Q7Ozs7Ozs7Ozs7OztJQVlJLFdBQVc7Q0FDZDtBQUVEOzs7Ozs7Ozs7Ozs7SUFZSSw2QkFBNkI7SUFDN0IsV0FBVztJQUNYLDZCQUE2QjtDQUNoQztBQUVEOzs7O0lBSUksV0FBVztJQUNYLDZDQUE2QztJQUM3Qyx5QkFBeUI7Q0FDNUI7QUFFRDtJQUNJLFdBQVc7SUFDWCwrQkFBK0I7Q0FDbEM7QUFFRDs7Ozs7O0lBTUkseUJBQXlCO0lBQ3pCLFdBQVc7SUFDWCxrQ0FBa0M7SUFDbEMsdUJBQXVCO0NBQzFCO0FBRUQ7SUFDSSxXQUFXO0lBQ1gsa0NBQWtDO0lBQ2xDLHFCQUFxQjtDQUN4QjtBQUNEO0lBQ0ksV0FBVztJQUNYLHVCQUF1QjtDQUMxQjtBQUNEOzs7OztJQUtJLHlCQUF5QjtJQUN6QixXQUFXO0lBQ1gsaUJBQWlCO0lBQ2pCLGdCQUFnQjtJQUNoQixvRUFBb0U7Q0FDdkU7QUFFRDs7OztJQUlJLHlCQUF5QjtJQUN6QixXQUFXO0lBQ1gsaUJBQWlCO0NBQ3BCO0FBQ0Q7SUFDSSxXQUFXO0NBQ2Q7QUFDRCxjQUFjO0FBQ2Q7SUFDSSxnQkFBZ0I7Q0FDbkI7QUFDRDtJQUNJLGFBQWE7SUFDYixjQUFjO0lBQ2QsaUJBQWlCO0lBQ2pCLHFCQUFxQjtJQUNyQixtQkFBbUI7SUFDbkIsc0RBQXNEO0lBQ3RELHVGQUF1RjtJQUN2RiwwQkFBMEI7Q0FDN0I7QUFDRDtJQUNJLG9CQUFvQjtDQUN2QjtBQUVEO0lBQ0ksY0FBYztJQUNkLG9CQUFvQjtJQUNwQix3QkFBd0I7SUFDeEIsZ0JBQWdCO0NBQ25CO0FBQ0Q7SUFDSSw0QkFBNEI7SUFDNUIsbUJBQW1CO0NBQ3RCO0FBQ0Q7SUFDSSxZQUFZO0lBQ1osbUJBQW1CO0lBQ25CLGFBQWE7SUFDYixPQUFPO0lBQ1AsVUFBVTtJQUNWLFVBQVU7SUFDVixjQUFjO0lBQ2Qsd0JBQXdCO0lBQ3hCLG9CQUFvQjtDQUN2QjtBQUNEO0lBQ0ksWUFBWTtJQUNaLGFBQWE7SUFDYixhQUFhO0lBQ2Isb0JBQW9CO0lBQ3BCLGlFQUFpRTtJQUNqRSxtQkFBbUI7SUFDbkIsYUFBYTtJQUNiLDJDQUEyQztDQUM5QztBQUNEO0lBQ0ksYUFBYTtJQUNiLGlCQUFpQjtDQUNwQjtBQUNEO0lBQ0ksYUFBYTtJQUNiLGFBQWE7Q0FDaEI7QUFDRDtJQUNJLFdBQVc7Q0FDZDtBQUNEO0lBQ0ksV0FBVztDQUNkO0FBQ0Q7SUFDSSxvRUFBb0U7SUFDcEUsWUFBWTtJQUNaLGFBQWE7SUFDYixVQUFVO0NBQ2I7QUFDRDtJQUNJLHlFQUF5RTtJQUN6RSxhQUFhO0lBQ2IsY0FBYztDQUNqQjtBQUNEO0lBQ0ksc0VBQXNFO0lBQ3RFLFlBQVk7SUFDWixhQUFhO0NBQ2hCO0FBQ0Q7SUFDSSxxRUFBcUU7SUFDckUsYUFBYTtJQUNiLGFBQWE7SUFDYixXQUFXO0NBQ2Q7QUFDRDtJQUNJLGFBQWE7SUFDYixpQ0FBaUM7Q0FDcEM7QUFDRDtJQUNJLFlBQVk7SUFDWixhQUFhO0lBQ2IsbUJBQW1CO0lBQ25CLE9BQU87SUFDUCxVQUFVO0lBQ1YsY0FBYztJQUNkLHVCQUF1QjtJQUN2Qix3QkFBd0I7SUFDeEIsc0JBQXNCO0lBQ3RCLG9CQUFvQjtJQUNwQixrQ0FBa0M7SUFDbEMsV0FBVztJQUNYLGVBQWU7SUFDZixXQUFXO0lBQ1gsaUJBQWlCO0lBQ2pCLHFFQUFxRTtJQUNyRSxpQkFBaUI7SUFDakIsZ0JBQWdCO0NBQ25CO0FBQ0Q7SUFDSSxXQUFXO0lBQ1gsa0NBQWtDO0lBQ2xDLHdCQUF3QjtJQUN4QixPQUFPO0lBQ1AsVUFBVTtJQUNWLGFBQWE7SUFDYixZQUFZO0lBQ1osWUFBWTtDQUNmO0FBQ0Q7SUFDSSxVQUFVO0NBQ2I7QUFDRDtJQUNJLGdCQUFnQjtJQUNoQixpQkFBaUI7Q0FDcEI7QUFDRDtJQUNJLGdCQUFnQjtJQUNoQixpQkFBaUI7SUFDakIsZUFBZTtDQUNsQjtBQUNEO0lBQ0ksZ0JBQWdCO0lBQ2hCLGVBQWU7Q0FDbEI7QUFDRCxhQUFhO0FBQ2I7SUFDSSxXQUFXO0NBQ2Q7QUFDRDtJQUNJLGdCQUFnQjtJQUNoQixtQkFBbUI7Q0FDdEI7QUFDRDtJQUNJLG9CQUFvQjtJQUNwQixnQkFBZ0I7SUFDaEIsYUFBYTtJQUNiLG9CQUFvQjtDQUN2QjtBQUNEO0lBQ0ksYUFBYTtJQUNiLG9CQUFvQjtJQUNwQixZQUFZO0NBQ2Y7QUFDRDtJQUNJLGVBQWU7SUFDZixXQUFXO0lBQ1gsZ0NBQWdDO0lBQ2hDLGdCQUFnQjtDQUNuQjtBQUNEO0lBQ0ksa0JBQWtCO0lBQ2xCLHFFQUFxRTtDQUN4RTtBQUNELGFBQWE7QUFDYjs7SUFFSTtBQUNKO0lBQ0ksa0JBQWtCO0NBQ3JCO0FBQ0Q7SUFDSSxxQ0FBcUM7SUFDckMsbUZBQW1GO0lBQ25GLHNCQUFzQjtJQUN0QixtQkFBbUI7Q0FDdEI7QUFDRDtJQUNJLFdBQVc7Q0FDZDtBQUNEO0lBQ0ksV0FBVztJQUNYLG1DQUFtQztJQUNuQyx1QkFBdUI7Q0FDMUI7QUFDRDtJQUNJLFlBQVk7SUFDWixxSEFBcUg7SUFDckgsbUJBQW1CO0lBQ25CLE9BQU87SUFDUCxVQUFVO0lBQ1YsU0FBUztJQUNULFFBQVE7SUFDUixZQUFZO0lBQ1osNkJBQTZCO0NBQ2hDO0FBQ0Q7SUFDSSx3RkFBd0Y7Q0FDM0Y7QUFDRDtJQUNJLFlBQVk7SUFDWixzRUFBc0U7SUFDdEUsbUJBQW1CO0lBQ25CLE9BQU87SUFDUCxVQUFVO0lBQ1YsUUFBUTtJQUNSLFNBQVM7SUFDVCxZQUFZO0lBQ1osdUJBQXVCO0NBQzFCO0FBQ0Q7SUFDSSxjQUFjO0NBQ2pCO0FBQ0QsYUFBYTtBQUNiOzs7SUFHSSwwQkFBMEI7SUFDMUIsZUFBZTtJQUNmLDZCQUE2QjtDQUNoQztBQUNEOzs7SUFHSSxlQUFlO0NBQ2xCO0FBQ0Q7OztJQUdJLGlCQUFpQjtDQUNwQjtBQUNEOzs7SUFHSSwwQkFBMEI7Q0FDN0I7QUFDRDs7O0lBR0ksMkZBQTJGO0NBQzlGO0FBQ0Q7OztJQUdJLDBCQUEwQjtJQUMxQixlQUFlO0lBQ2Ysa0JBQWtCO0lBQ2xCLG1CQUFtQjtDQUN0QjtBQUNEOzs7SUFHSSxpQkFBaUI7SUFDakIsbUJBQW1CO0NBQ3RCO0FBQ0Q7OztJQUdJLGVBQWU7Q0FDbEI7QUFDRDs7O0lBR0ksWUFBWTtJQUNaLG1GQUFtRjtJQUNuRixtQkFBbUI7SUFDbkIsVUFBVTtJQUNWLFlBQVk7SUFDWixhQUFhO0lBQ2IsUUFBUTtJQUNSLFNBQVM7SUFDVCxhQUFhO0NBQ2hCO0FBQ0Q7OztJQUdJLFlBQVk7SUFDWixZQUFZO0lBQ1osYUFBYTtJQUNiLGtCQUFrQjtJQUNsQixxQkFBcUI7SUFDckIsbUJBQW1CO0lBQ25CLFNBQVM7SUFDVCxRQUFRO0lBQ1IsU0FBUztJQUNULGFBQWE7SUFDYiwwQkFBMEI7SUFDMUIsOEJBQThCO0NBQ2pDO0FBRUQsYUFBYTtBQUNiO0lBQ0ksMEJBQTBCO0lBQzFCLGVBQWU7SUFDZiw2QkFBNkI7Q0FDaEM7QUFDRDtJQUNJLGVBQWU7Q0FDbEI7QUFDRDtJQUNJLGlCQUFpQjtDQUNwQjtBQUNEO0lBQ0ksMEJBQTBCO0NBQzdCO0FBQ0Q7SUFDSSwyRkFBMkY7Q0FDOUY7QUFDRDtJQUNJLDBCQUEwQjtJQUMxQixlQUFlO0NBQ2xCO0FBQ0Q7SUFDSSxlQUFlO0NBQ2xCO0FBQ0Q7SUFDSSxtQkFBbUI7SUFDbkIsWUFBWTtJQUNaLFlBQVk7SUFDWixVQUFVO0lBQ1YsZ0JBQWdCO0NBQ25CO0FBQ0Q7SUFDSSxtQkFBbUI7SUFDbkIsVUFBVTtJQUNWLGFBQWE7SUFDYixZQUFZO0lBQ1osV0FBVztJQUNYLFdBQVc7SUFDWCxXQUFXO0lBQ1gsaUNBQWlDO0lBQ2pDLG9CQUFvQjtJQUNwQiw0RUFBNEU7Q0FDL0U7QUFDRDtJQUNJLFdBQVc7Q0FDZDtBQUNEO0lBQ0k7UUFDSSxZQUFZO0tBQ2Y7SUFDRDtRQUNJLFlBQVk7S0FDZjtJQUNEO1FBQ0ksZ0JBQWdCO0tBQ25CO0lBQ0Q7UUFDSSxtQkFBbUI7UUFDbkIsYUFBYTtLQUNoQjtJQUNEO1FBQ0ksWUFBWTtLQUNmO0lBQ0Q7UUFDSSxZQUFZO0tBQ2Y7SUFDRDtRQUNJLHVCQUF1QjtRQUN2QixpQkFBaUI7S0FDcEI7SUFDRDtRQUNJLGtCQUFrQjtLQUNyQjtJQUNEOzs7UUFHSSxVQUFVO1FBQ1YsWUFBWTtRQUNaLGFBQWE7UUFDYixxQkFBcUI7S0FDeEI7SUFDRDs7O1FBR0ksWUFBWTtRQUNaLGFBQWE7UUFDYixTQUFTO0tBQ1o7SUFDRDtRQUNJLDhCQUE4QjtLQUNqQztDQUNKO0FBQ0Q7SUFDSTtRQUNJLDBCQUEwQjtLQUM3QjtDQUNKO0FBQ0Q7SUFDSTtRQUNJLGFBQWE7S0FDaEI7SUFDRDtRQUNJLFdBQVc7UUFDWCxZQUFZO0tBQ2Y7SUFDRDtRQUNJLDhCQUE4QjtLQUNqQztJQUNEO1FBQ0ksbUJBQW1CO0tBQ3RCO0NBQ0o7QUFDRDtJQUNJOzs7OztRQUtJO0NBQ1A7QUFDRDtJQUNJO1FBQ0ksaUJBQWlCO0tBQ3BCO0lBQ0Q7UUFDSSxnQkFBZ0I7UUFDaEIsYUFBYTtLQUNoQjtJQUNEO1FBQ0ksV0FBVztLQUNkO0lBQ0Q7UUFDSSxZQUFZO1FBQ1osb0JBQW9CO0tBQ3ZCO0lBQ0Q7UUFDSSxhQUFhO0tBQ2hCO0lBQ0Q7UUFDSSxpQkFBaUI7S0FDcEI7SUFDRDtRQUNJLFdBQVc7S0FDZDtJQUNEO1FBQ0ksVUFBVTtLQUNiO0lBQ0Q7UUFDSSxXQUFXO0tBQ2Q7SUFDRDtRQUNJLFNBQVM7S0FDWjtJQUNEO1FBQ0ksc0JBQXNCO1FBQ3RCLG1CQUFtQjtLQUN0QjtJQUNEO1FBQ0ksZUFBZTtLQUNsQjtJQUNEO1FBQ0ksY0FBYztLQUNqQjtJQUNEO1FBQ0ksd0JBQXdCO0tBQzNCO0lBQ0Q7UUFDSSxrQkFBa0I7S0FDckI7Q0FDSjtBQUNEO0lBQ0ksZ0JBQWdCO0NBQ25CO0FBQ0Q7O0lBRUksY0FBYztDQUNqQjtBQUVEO0lBQ0k7UUFDSSwyQkFBMkI7UUFDM0IscUVBQXFFO0tBQ3hFO0lBQ0Q7UUFDSSwyQkFBMkI7UUFDM0IscUVBQXFFO0tBQ3hFO0lBQ0Q7UUFDSSwyQkFBMkI7UUFDM0IscUVBQXFFO0tBQ3hFO0lBQ0Q7UUFDSSx5QkFBeUI7UUFDekIscUVBQXFFO0tBQ3hFO0lBQ0Q7UUFDSSx5QkFBeUI7UUFDekIscUVBQXFFO0tBQ3hFO0NBQ0oiLCJmaWxlIjoic3JjL2FwcC93aWRnZXRzL2FkYXB0aXZlLXByaWNpbmcvYWRhcHRpdmUtcHJpY2luZy5jb21wb25lbnQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyogQ29tbW9uICovXHJcbi5hZGFwdGl2ZS1wcmljaW5ne1xyXG4gICAgZm9udC1mYW1pbHk6ICdSb2JvdG8nLCBzYW5zLXNlcmlmICFpbXBvcnRhbnQ7XHJcbiAgICBmb250LXdlaWdodDogMzAwO1xyXG4gICAgY29sb3I6ICM0MzNFMzc7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgc3Zne1xyXG4gICAgZm9udC1mYW1pbHk6ICdSb2JvdG8nLCBzYW5zLXNlcmlmICFpbXBvcnRhbnQ7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcuc2NyZWVuLTEgaGVhZGVyIC5uYXZiYXItYnJhbmQgaW1nLnpzLWxvZ28tYntcclxuICAgIG9wYWNpdHk6IDE7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmJ1bGxldHMuaGVhZGVyLWJ1bGxldHN7XHJcbiAgICBib3R0b206IGF1dG87XHJcbiAgICBsZWZ0OiBhdXRvO1xyXG4gICAgdG9wOiAyNnB4O1xyXG4gICAgcmlnaHQ6IDEwMHB4O1xyXG4gICAgcG9zaXRpb246IGZpeGVkO1xyXG4gICAgY3Vyc29yOiBwb2ludGVyO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5idWxsZXRzLmhlYWRlci1idWxsZXRzIHNwYW57XHJcbiAgICBjb2xvcjogI0M5NDU3MztcclxuICAgIGZvbnQtc2l6ZTogMTNweDtcclxuICAgIGZvbnQtd2VpZ2h0OiA0MDA7XHJcbiAgICBjdXJzb3I6IGF1dG87XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmJ1bGxldHMuaGVhZGVyLWJ1bGxldHMgcHtcclxuICAgIGJhY2tncm91bmQtY29sb3I6ICNFNzhCN0Q7XHJcbiAgICB3aWR0aDogMTJweDtcclxuICAgIGhlaWdodDogMTJweDtcclxuICAgIG1hcmdpbi1yaWdodDogOHB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5idWxsZXRzLmhlYWRlci1idWxsZXRzIHAuYWN0aXZle1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogI0M5NDU3MztcclxufVxyXG4uaW5uZXItcGFnZS13cmFwcGVyLmFkYXB0aXZlLXByaWNpbmcgI3Njcm9sbC1jb250YWluZXIsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5hZGFwdGl2ZS1wcmljaW5nLXN2Zy13cmFwcGVyICNzdmctd3JhcHBlcntcclxuICAgIG1heC1oZWlnaHQ6IDEwMHZoO1xyXG4gICAgbWluLWhlaWdodDogMTAwdmg7XHJcbiAgICB3aWR0aDogMTAwdnc7XHJcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xyXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5hZGFwdGl2ZS1wcmljaW5nLXN2Zy13cmFwcGVyICNzdmctd3JhcHBlcntcclxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgIHRvcDogMDtcclxuICAgIGJvdHRvbTogMDtcclxuICAgIGxlZnQ6IDA7XHJcbiAgICByaWdodDogMDtcclxuICAgIHotaW5kZXg6IDE7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmctc3ZnLXdyYXBwZXJ7XHJcbiAgICBoZWlnaHQ6IDEwMHZoO1xyXG4gICAgcG9zaXRpb246IGZpeGVkO1xyXG4gICAgei1pbmRleDogMDtcclxuICAgIGxlZnQ6IDA7XHJcbiAgICByaWdodDogMDtcclxuICAgIHRvcDogMDtcclxuICAgIGJvdHRvbTogMDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyBoMi5hZGFwdGl2ZS10aXRsZXtcclxuICAgIGZvbnQtc2l6ZTpjYWxjKDEycHggKyAoMjAgLSAxMikgKiAoMTAwdncgLSAxMjAwcHgpIC8gKDE5MjAgLSAxMjAwKSk7XHJcbiAgICBwYWRkaW5nOiAyNHB4IDE0MHB4IDA7XHJcbiAgICBjb2xvcjogIzhEOEQ4RDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyBoMi5hZGFwdGl2ZS10aXRsZSBzcGFue1xyXG4gICAgY29sb3I6ICM4RDhEOEQ7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNvbnRlbnQtd3JhcHBlcntcclxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgIHRvcDogNzBweDtcclxuICAgIGxlZnQ6IDA7XHJcbiAgICByaWdodDogMDtcclxufVxyXG5AbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAxNTM2cHgpe1xyXG4gICAgLmFkYXB0aXZlLXByaWNpbmcgLmNvbnRlbnQtd3JhcHBlcntcclxuICAgICAgICB0b3A6IDU1cHg7XHJcbiAgICB9XHJcbn1cclxuQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogMTU1MHB4KXtcclxuICAgIC5hZGFwdGl2ZS1wcmljaW5nIGgyLmFkYXB0aXZlLXRpdGxle1xyXG4gICAgICAgIHBhZGRpbmc6IDI2cHggMTIwcHggMDtcclxuICAgIH1cclxufVxyXG5cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNvbnRlbnQtd3JhcHBlciBwe1xyXG4gICAgd2lkdGg6IGNhbGMoMTAwJSAtIDc0MHB4KTtcclxuICAgIHBhZGRpbmctcmlnaHQ6IDIwcHg7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNvbnRlbnQtd3JhcHBlciBwOmxhc3QtY2hpbGQgc3BhbntcclxuICAgIGZvbnQtc2l6ZTpjYWxjKDIwcHggKyAoMjYgLSAyMCkgKiAoMTAwdncgLSAxMjAwcHgpIC8gKDE5MjAgLSAxMjAwKSk7XHJcbiAgICBmb250LXdlaWdodDogNTAwO1xyXG4gICAgbWFyZ2luLXJpZ2h0OiAxMHB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zdG9yeS1jb250ZW50LXdyYXBwZXIgPiBkaXZ7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICAgIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XHJcbiAgICBoZWlnaHQ6IDEwMHZoO1xyXG4gICAgd2lkdGg6IDEwMHZ3O1xyXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgdG9wOiAwO1xyXG4gICAgbGVmdDogMDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyBoMntcclxuICAgIGZvbnQtZmFtaWx5OiAnUm9ib3RvJywgc2Fucy1zZXJpZjtcclxuICAgIGZvbnQtd2VpZ2h0OiA0MDA7XHJcbiAgICBjb2xvcjogI0M5NDU3MztcclxuICAgIG1hcmdpbi1ib3R0b206IDRweDtcclxuICAgIGZvbnQtc2l6ZTpjYWxjKDE4cHggKyAoMzIgLSAxOCkgKiAoMTAwdncgLSAxMjAwcHgpIC8gKDE5MjAgLSAxMjAwKSk7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgaDIgc3BhbntcclxuICAgIGNvbG9yOiAjRTc4QjdEO1xyXG4gICAgZm9udC13ZWlnaHQ6IDMwMDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyBwe1xyXG4gICAgZm9udC1zaXplOmNhbGMoMTRweCArICgxNiAtIDE0KSAqICgxMDB2dyAtIDEyMDBweCkgLyAoMTkyMCAtIDEyMDApKTtcclxuICAgIG1hcmdpbjogMDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyBlbXtcclxuICAgIGZvbnQtd2VpZ2h0OiA1MDA7XHJcbiAgICBmb250LXN0eWxlOiBub3JtYWw7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQtd3JhcHBlcntcclxuICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICBoZWlnaHQ6IGNhbGMoMTAwdmggLSAxNTBweCk7XHJcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgdG9wOiAwO1xyXG4gICAgcmlnaHQ6IDM0cHg7XHJcbiAgICBib3R0b206IDA7XHJcbiAgICBtYXJnaW46IGF1dG87XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQtd3JhcHBlciAuY2FyZHtcclxuICAgIHdpZHRoOiA5MCU7XHJcbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudCBsaW5lYXItZ3JhZGllbnQoMjkwZGVnLCAjRkZGRkZGIDAlLCAjRkZGM0VCIDQ4JSwgI0ZGRTdEOCAxMDAlKTtcclxuICAgIGJveC1zaGFkb3c6IC04cHggLThweCAyNHB4ICMwMDAwMDAxMjtcclxuICAgIGJvcmRlcjogMDtcclxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgIHJpZ2h0OiAwO1xyXG4gICAgYm90dG9tOiAwO1xyXG4gICAgdG9wOiAtMTIwcHg7XHJcbiAgICBtYXJnaW46IGF1dG87XHJcbiAgICB6LWluZGV4OiA1O1xyXG4gICAgb3BhY2l0eTogMDtcclxuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtMjBweCk7XHJcbiAgICB0cmFuc2l0aW9uOiBhbGwgNTAwbXMgZWFzZS1pbi1vdXQ7XHJcbiAgICBoZWlnaHQ6IGNhbGMoMTAwJSAtIDE0MHB4KTtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMSAuY2FyZC13cmFwcGVye1xyXG4gICAgd2lkdGg6IDYwMHB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0zIC5jYXJkLXdyYXBwZXIgLmNhcmQgLmNhcmQtdGl0bGV7XHJcbiAgICBwYWRkaW5nOiAxNXB4IDIwcHggMTBweDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuY2FyZC13cmFwcGVyLmNhcmQtYWN0aXZlIC5jYXJke1xyXG4gICAgb3BhY2l0eTogMTtcclxuICAgIHRyYW5zaXRpb246IGFsbCA0MDBtcyBlYXNlLWluLW91dDtcclxuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwcHgpO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkLXdyYXBwZXIgLmNhcmQ6Zmlyc3QtY2hpbGR7XHJcbiAgICB0cmFuc2l0aW9uLWRlbGF5OiA0MDBtcztcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuY2FyZC13cmFwcGVyIC5jYXJkOm50aC1jaGlsZCgyKXtcclxuICAgIHRyYW5zaXRpb24tZGVsYXk6IDMwMG1zO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkLXdyYXBwZXIgLmNhcmQ6bnRoLWNoaWxkKDMpe1xyXG4gICAgdHJhbnNpdGlvbi1kZWxheTogMjAwbXM7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQtd3JhcHBlci5jYXJkLWFjdGl2ZSAuY2FyZDpmaXJzdC1jaGlsZHtcclxuICAgIHRyYW5zaXRpb24tZGVsYXk6IDIwMG1zO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkLXdyYXBwZXIuY2FyZC1hY3RpdmUgLmNhcmQ6bnRoLWNoaWxkKDIpe1xyXG4gICAgdHJhbnNpdGlvbi1kZWxheTogMzUwbXM7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQtd3JhcHBlci5jYXJkLWFjdGl2ZSAuY2FyZDpudGgtY2hpbGQoMyl7XHJcbiAgICB0cmFuc2l0aW9uLWRlbGF5OiA1MDBtcztcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuY2FyZC13cmFwcGVyIC5jYXJkOm50aC1jaGlsZCgxKSAuY2FyZC10aXRsZSxcclxuLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQtd3JhcHBlciAuY2FyZDpudGgtY2hpbGQoMikgLmNhcmQtdGl0bGUsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkLXdyYXBwZXIgLmNhcmQ6bnRoLWNoaWxkKDEpIC5jYXJkLWJvZHksXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkLXdyYXBwZXIgLmNhcmQ6bnRoLWNoaWxkKDIpIC5jYXJkLWJvZHl7XHJcbiAgICBvcGFjaXR5OiAwO1xyXG4gICAgdHJhbnNpdGlvbi1kZWxheTogNTAwbXM7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQ6bnRoLWNoaWxkKDIpe1xyXG4gICAgcmlnaHQ6IDM2cHg7XHJcbiAgICB0b3A6IC01MHB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkOm50aC1jaGlsZCgzKXtcclxuICAgIHJpZ2h0OiA2OXB4O1xyXG4gICAgdG9wOiAyMHB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkOmFmdGVye1xyXG4gICAgY29udGVudDogJyc7XHJcbiAgICBoZWlnaHQ6IDEwMHB4O1xyXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgYm90dG9tOiAtNTBweDtcclxuICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50IGxpbmVhci1ncmFkaWVudCgyOTBkZWcsICNmZmZlZmUgMCUsICNmZmY4ZjMgNDglLCAjZmZlZGUyIDEwMCUpO1xyXG4gICAgYm94LXNoYWRvdzogLThweCAxNHB4IDIwcHggIzAwMDAwMDEyO1xyXG4gICAgcmlnaHQ6IDA7XHJcbiAgICBsZWZ0OiAwO1xyXG4gICAgdHJhbnNmb3JtOiBza2V3KDBkZWcsIDEwZGVnKTtcclxuICAgIHotaW5kZXg6IDA7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQgLmNhcmQtaGVhZGVye1xyXG4gICAgY29sb3I6ICMzRjNENTY7XHJcbiAgICBmb250LXNpemU6Y2FsYygxNnB4ICsgKDE4IC0gMTYpICogKDEwMHZ3IC0gMTIwMHB4KSAvICgxOTIwIC0gMTIwMCkpO1xyXG4gICAgZm9udC1zaXplOiAxOHB4O1xyXG4gICAgZm9udC13ZWlnaHQ6IDUwMDtcclxuICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xyXG4gICAgYm9yZGVyLWJvdHRvbTogMnB4IHNvbGlkICNFM0M2QjU7XHJcbiAgICBtYXJnaW46IDAgMTBweCAwO1xyXG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xyXG4gICAgcGFkZGluZzogMjBweDtcclxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgIHRvcDogNnB4O1xyXG4gICAgcmlnaHQ6IDA7XHJcbiAgICBsZWZ0OiAwO1xyXG4gICAgei1pbmRleDogMjtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuY2FyZCAuY2FyZC10aXRsZXtcclxuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcclxuICAgIGNvbG9yOiAjNDMzRTM3O1xyXG4gICAgcGFkZGluZzogNDVweCAyMHB4IDEwcHg7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQtd3JhcHBlciAuY2FyZCAuY2FyZC10aXRsZSBwe1xyXG4gICAgZm9udC1zaXplOiBjYWxjKDE0cHggKyAoMjQgLSAxNCkgKiAoMTAwdncgLSAxMjAwcHgpIC8gKDE5MjAgLSAxMjAwKSk7XHJcbiAgICBmb250LXdlaWdodDogMzAwO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS02IC5jYXJkLXdyYXBwZXIgLmNhcmQgLmNhcmQtdGl0bGUgcHtcclxuICAgIGZvbnQtc2l6ZTogY2FsYygxNHB4ICsgKDE4IC0gMTQpICogKDEwMHZ3IC0gMTIwMHB4KSAvICgxOTIwIC0gMTIwMCkpO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkLXdyYXBwZXIgLmNhcmQgLmNhcmQtdGl0bGUgcCBlbXtcclxuICAgIGZvbnQtd2VpZ2h0OiA0MDA7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQgLmNhcmQtYm9keXtcclxuICAgIG92ZXJmbG93OiBoaWRkZW47XHJcbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudCBsaW5lYXItZ3JhZGllbnQoMjkwZGVnLCAjRkZGRkZGIDAlLCAjRkZGM0VCIDQ4JSwgI0ZGRTdEOCAxMDAlKTtcclxuICAgIHotaW5kZXg6IDE7XHJcbiAgICBwYWRkaW5nOiAwIDAgMTBweCAwO1xyXG4gICAgYm9yZGVyLXJhZGl1czogMTBweDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuY2FyZDpudGgtY2hpbGQoMykgLmNhcmQtYm9keXtcclxuICAgIG92ZXJmbG93OiBhdXRvO1xyXG4gICAgbWFyZ2luOiAwIDIwcHg7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTIgLmNhcmQgLmNhcmQtYm9keSxcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTUgLmNhcmQgLmNhcmQtYm9keSxcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTYgLmNhcmQgLmNhcmQtYm9keXtcclxuICAgIG1hcmdpbjogMCAyMHB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkIC5jYXJkLWJvZHkgLmxpc3Qtcm93e1xyXG4gICAgY29sb3I6ICM0MDRENEQ7XHJcbiAgICBmb250LXdlaWdodDogNDAwO1xyXG4gICAgYmFja2dyb3VuZDogI2ZmZjtcclxuICAgIHBhZGRpbmc6IDA7XHJcbiAgICBtYXJnaW46IDAgMjBweCAyMHB4O1xyXG4gICAgaGVpZ2h0OiAxMDBweDtcclxuICAgIGJvcmRlci1yYWRpdXM6IDEwcHg7XHJcbiAgICBib3gtc2hhZG93OiAwIDAgMjBweCByZ2IoMCAwIDAgLyA1JSk7XHJcbiAgICB6LWluZGV4OiAxO1xyXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkIC5jYXJkLWJvZHkgLmxpc3Qtcm93IC5jb2x7XHJcbiAgICBoZWlnaHQ6IDEwMCU7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQgLmNhcmQtYm9keSAubGlzdC1yb3cgLmNvbCA+IGRpdntcclxuICAgIGhlaWdodDogMTAwJTtcclxuICAgIGFsaWduLWNvbnRlbnQ6IGNlbnRlcjtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuY2FyZCAuY2FyZC1ib2R5ID4gLmNhcmQtaW5mb3tcclxuICAgIGNvbG9yOiAjNjU2MTdEO1xyXG4gICAgZm9udC1zaXplOiAxOHB4O1xyXG4gICAgbWFyZ2luLWJvdHRvbTogMjBweDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuY2FyZCAuY2FyZC1ib2R5IC5jYXJkLWluZm8gbGFiZWx7XHJcbiAgICBjb2xvcjogIzY1NjE3RDtcclxuICAgIG1hcmdpbjogMDtcclxuICAgIGZvbnQtd2VpZ2h0OiA0MDA7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQgLmNhcmQtYm9keSAuY2FyZC1pbmZvIHNwYW57XHJcbiAgICBjb2xvcjogIzNGM0Q1NjtcclxuICAgIGZvbnQtd2VpZ2h0OiA1MDA7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQgLmNhcmQtYm9keSAucHJvZmlsZXtcclxuICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XHJcbiAgICBib3JkZXItcmFkaXVzOiAxNnB4O1xyXG4gICAgbWFyZ2luOiAwIGF1dG87XHJcbiAgICBwYWRkaW5nOiAxNXB4IDIwcHggNXB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkIC5jYXJkLWJvZHkgLmNhcmQtbmFtZXtcclxuICAgIGZvbnQtc2l6ZTpjYWxjKDEwcHggKyAoMjIgLSAxMCkgKiAoMTAwdncgLSAxMjAwcHgpIC8gKDE5MjAgLSAxMjAwKSk7XHJcbiAgICBjb2xvcjogI0JDNUQ3RDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuY2FyZC10ZXh0IHAge1xyXG4gICAgd2lkdGg6IDEwMCU7XHJcbiAgICBoZWlnaHQ6IDdweDtcclxuICAgIGJhY2tncm91bmQ6ICNGN0U4RTQ7XHJcbiAgICBtYXJnaW4tYm90dG9tOiA2cHg7XHJcbiAgICBib3JkZXItcmFkaXVzOiAxMHB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkLXRleHQgcDpudGgtY2hpbGQoMil7XHJcbiAgICB3aWR0aDogODAlO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkLXRleHQgcDpudGgtY2hpbGQoMyl7XHJcbiAgICB3aWR0aDogNjAlO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5idWxsZXRze1xyXG4gICAgdG9wOiAwO1xyXG4gICAgYm90dG9tOiAwO1xyXG4gICAgbWFyZ2luOiAwIGF1dG87XHJcbiAgICBsZWZ0OiAwO1xyXG4gICAgei1pbmRleDogNjtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuYnVsbGV0cyBzcGFue1xyXG4gICAgZm9udC1zaXplOmNhbGMoMTBweCArICgxNCAtIDEwKSAqICgxMDB2dyAtIDEyMDBweCkgLyAoMTkyMCAtIDEyMDApKTtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuYnVsbGV0cyBwe1xyXG4gICAgd2lkdGg6IDEwcHg7XHJcbiAgICBoZWlnaHQ6IDEwcHg7XHJcbiAgICBiYWNrZ3JvdW5kOiAjQzlDOUM5O1xyXG4gICAgbWFyZ2luOiBhdXRvO1xyXG4gICAgYm9yZGVyLXJhZGl1czogMTBweDtcclxuICAgIG1hcmdpbi1yaWdodDogNXB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5idWxsZXRzIHAuYWN0aXZle1xyXG4gICAgYmFja2dyb3VuZDogI0U2ODE4QjtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuY2FyZCAuY2FyZC1ib2R5IC5kZXRhaWwgcHtcclxuICAgIGZvbnQtc2l6ZTogY2FsYygxMHB4ICsgKDE0IC0gMTApICogKDEwMHZ3IC0gMTIwMHB4KSAvICgxOTIwIC0gMTIwMCkpO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkIC5jYXJkLWJvZHkgLmRldGFpbCAubG9jYXRpb257XHJcbiAgICBiYWNrZ3JvdW5kOiB1cmwoL2Fzc2V0cy9pbWFnZXMvYWRhcHRpdmUtcHJpY2luZy9sb2NhdGlvbi5zdmcpIG5vLXJlcGVhdCBsZWZ0IDUyJSBjZW50ZXI7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQgLmNhcmQtYm9keSAuZGV0YWlsIC5idWxsZXRzIHAuYWN0aXZle1xyXG4gICAgYmFja2dyb3VuZDogI0U2ODE4QiAhaW1wb3J0YW50O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkIC5jYXJkLWJvZHkgLnByaWNle1xyXG4gICAgd2lkdGg6IDc4cHg7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcclxuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICAgIGJhY2tncm91bmQtY29sb3I6ICNGRkVCRTU7XHJcbiAgICBib3JkZXItcmFkaXVzOiAwIDEwcHggMTBweCAwO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkIC5jYXJkLWJvZHkgLnByaWNlIGgye1xyXG4gICAgbGluZS1oZWlnaHQ6IDE0cHg7XHJcbiAgICBtYXJnaW4tYm90dG9tOiA0cHg7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQgLmNhcmQtYm9keSAucHJpY2UgaDIgc3Ryb25ne1xyXG4gICAgZm9udC1zaXplOmNhbGMoMTVweCArICgyMCAtIDE1KSAqICgxMDB2dyAtIDEyMDBweCkgLyAoMTkyMCAtIDEyMDApKTtcclxuICAgIGNvbG9yOiAjQzk0NTczO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkIC5jYXJkLWJvZHkgLnByaWNlIHB7XHJcbiAgICBmb250LXNpemU6Y2FsYygxMHB4ICsgKDEyIC0gMTApICogKDEwMHZ3IC0gMTIwMHB4KSAvICgxOTIwIC0gMTIwMCkpO1xyXG4gICAgZm9udC13ZWlnaHQ6IDQwMDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc3ViLXdyYXBwZXJ7XHJcbiAgICB3aWR0aDogMTAwJTtcclxuICAgIGhlaWdodDogMTAwdmg7XHJcbn1cclxuXHJcbi8qIFNjcmVlbi0xICovXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0xIC5zdWItd3JhcHBlciAubGVmdC1zZWN0aW9ue1xyXG4gICAgbWluLXdpZHRoOiAxMDAlO1xyXG4gICAgb3BhY2l0eTogMTtcclxuICAgIGJhY2tncm91bmQ6IHVybCgnL2Fzc2V0cy9pbWFnZXMvYWRhcHRpdmUtcHJpY2luZy9hZGFwdGl2ZS1iZzEucG5nJyk7XHJcbiAgICBiYWNrZ3JvdW5kLXNpemU6IGNvdmVyO1xyXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG4gICAgdHJhbnNpdGlvbjogYWxsIDkwMG1zIGVhc2UtaW4tb3V0O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0xIC5jYXJkIC5jYXJkLWhlYWRlcntcclxuICAgIHBhZGRpbmc6IDEycHg7XHJcbiAgICB0b3A6IDA7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTEuYW5pbWF0ZS1pbiAuc3ViLXdyYXBwZXIgLmxlZnQtc2VjdGlvbntcclxuICAgIG1pbi13aWR0aDogNjIlO1xyXG4gICAgb3BhY2l0eTogMTtcclxuICAgIHRyYW5zaXRpb246IGFsbCA5MDBtcyBlYXNlLWluLW91dDtcclxuICAgIHRyYW5zaXRpb24tZGVsYXk6IDFzO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0xLmZpcnN0LXRpbWUtbG9hZC5hbmltYXRlLWluLmFuaW1hdGUtb3V0IC5zdWItd3JhcHBlciAubGVmdC1zZWN0aW9ue1xyXG4gICAgbWluLXdpZHRoOiAwJTtcclxuICAgIG9wYWNpdHk6IDA7XHJcbiAgICB0cmFuc2l0aW9uLWRlbGF5OiAwcztcclxuICAgIHRyYW5zaXRpb246IGFsbCAxMDAwbXMgZWFzZS1pbi1vdXQ7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTEuZmlyc3QtdGltZS1sb2FkIC5zdWItd3JhcHBlciAubGVmdC1zZWN0aW9ue1xyXG4gICAgbWluLXdpZHRoOiA2MiU7XHJcbiAgICBvcGFjaXR5OiAwO1xyXG4gICAgdHJhbnNpdGlvbjogYWxsIDgwMG1zIGVhc2UtaW4tb3V0O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0xLmZpcnN0LXRpbWUtbG9hZC5hbmltYXRlLWluIC5zdWItd3JhcHBlciAubGVmdC1zZWN0aW9ue1xyXG4gICAgbWluLXdpZHRoOiA2MiU7XHJcbiAgICBvcGFjaXR5OiAxO1xyXG4gICAgdHJhbnNpdGlvbjogYWxsIDgwMG1zIGVhc2UtaW4tb3V0O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0xLmZpcnN0LXRpbWUtbG9hZC5hbmltYXRlLWluIC5zdWItd3JhcHBlciAubGVmdC1zZWN0aW9uIGgye1xyXG4gICAgdHJhbnNpdGlvbi1kZWxheTogMjAwbXM7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTEuZmlyc3QtdGltZS1sb2FkLmFuaW1hdGUtaW4gLnN1Yi13cmFwcGVyIC5sZWZ0LXNlY3Rpb24gcHtcclxuICAgIHRyYW5zaXRpb24tZGVsYXk6IDMwMG1zO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0xLmZpcnN0LXRpbWUtbG9hZC5hbmltYXRlLWluIC5jb250ZW50LXdyYXBwZXIgaDJ7XHJcbiAgICB0cmFuc2l0aW9uLWRlbGF5OiAwLjVzO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0xLmZpcnN0LXRpbWUtbG9hZC5hbmltYXRlLWluIC5jb250ZW50LXdyYXBwZXIgcHtcclxuICAgIHRyYW5zaXRpb24tZGVsYXk6IDAuN3M7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTEgLnN1Yi13cmFwcGVyIC5yaWdodC1zZWN0aW9ue1xyXG4gICAgd2lkdGg6IDM4JTtcclxuICAgIGJhY2tncm91bmQ6ICNGNEY2Rjk7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTEuZmlyc3QtdGltZS1sb2FkLmFuaW1hdGUtb3V0IC5zdWItd3JhcHBlciAucmlnaHQtc2VjdGlvbntcclxuICAgIHdpZHRoOiAwJTtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMSAuc3ViLXdyYXBwZXIgLnJpZ2h0LXNlY3Rpb24gLmNvbnRlbnQtd3JhcHBlciBoMntcclxuICAgIGZvbnQtc2l6ZTpjYWxjKDI0cHggKyAoMzYgLSAyNCkgKiAoMTAwdncgLSAxMjAwcHgpIC8gKDE5MjAgLSAxMjAwKSk7XHJcbiAgICBtYXJnaW4tYm90dG9tOiAyNXB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0xIC5zdWItd3JhcHBlciAucmlnaHQtc2VjdGlvbiBwe1xyXG4gICAgZm9udC1zaXplOmNhbGMoMThweCArICgyNiAtIDE4KSAqICgxMDB2dyAtIDEyMDBweCkgLyAoMTkyMCAtIDEyMDApKTtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMSAuY29udGVudC13cmFwcGVyIHtcclxuICAgIHRvcDogNTAlO1xyXG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC01MCUpO1xyXG4gICAgcGFkZGluZzogMCA1NXB4O1xyXG4gICAgbGVmdDogYXV0bztcclxuICAgIHJpZ2h0OiBhdXRvO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0xIC5jb250ZW50LXdyYXBwZXIgcHtcclxuICAgIHdpZHRoOiAxMDAlO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5hZGFwdGl2ZS1wcmljaW5nLXN0b3J5LXdyYXBwZXIgc2VjdGlvbntcclxuICAgIGhlaWdodDogMTAwdmg7XHJcbn1cclxuXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0xIC5jYXJkOmFmdGVye1xyXG4gICAgdHJhbnNmb3JtOiBza2V3KDBkZWcsIC0xMGRlZyk7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTEgLmNhcmQgLmNhcmQtYm9keXtcclxuICAgIG1hcmdpbi10b3A6IDIwcHg7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTEgLmNhcmQ6Zmlyc3QtY2hpbGR7XHJcbiAgICByaWdodDogNjRweDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMSAuY2FyZDpudGgtY2hpbGQoMil7XHJcbiAgICB0b3A6IC0xNnB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0xIC5jYXJkLXdyYXBwZXIgLmNhcmQ6bnRoLWNoaWxkKDMpe1xyXG4gICAgcmlnaHQ6IDRweDtcclxuICAgIHRvcDogOTBweDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyBwLmN1c3RvbWVyLWRhdGF7XHJcbiAgICBjb2xvcjogI0JDNUQ3RDtcclxuICAgIGZvbnQtd2VpZ2h0OiA1MDA7XHJcbiAgICBmb250LXNpemU6IGNhbGMoMTJweCArICgxOCAtIDEyKSAqICgxMDB2dyAtIDEyMDBweCkgLyAoMTkyMCAtIDEyMDApKTtcclxufVxyXG4vKiBBbmltYXRpb24gKi9cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTEsIFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMiwgXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0zLCBcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTQsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS01LCBcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTYsIFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtN3tcclxuICAgIG9wYWNpdHk6IDA7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTEuYW5pbWF0ZS1pbiwgXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0yLmFuaW1hdGUtaW4sIFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMy5hbmltYXRlLWluLCBcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTQuYW5pbWF0ZS1pbixcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTUuYW5pbWF0ZS1pbiwgXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS02LmFuaW1hdGUtaW4sIFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNy5hbmltYXRlLWlue1xyXG4gICAgb3BhY2l0eTogMTtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMSAuY29udGVudC13cmFwcGVyIGgyLCBcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTIgLmNvbnRlbnQtd3JhcHBlciBoMiwgXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0zIC5jb250ZW50LXdyYXBwZXIgaDIsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS01IC5jb250ZW50LXdyYXBwZXIgaDIsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS02IC5jb250ZW50LXdyYXBwZXIgaDIsIFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNyAuY29udGVudC13cmFwcGVyIGgyLFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMS5maXJzdC10aW1lLWxvYWQuYW5pbWF0ZS1vdXQgLmNvbnRlbnQtd3JhcHBlciBoMixcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTIuYW5pbWF0ZS1pbi5hbmltYXRlLW91dCAuY29udGVudC13cmFwcGVyIGgyLFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMy5hbmltYXRlLWluLmFuaW1hdGUtb3V0IC5jb250ZW50LXdyYXBwZXIgaDIsIFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNS5hbmltYXRlLWluLmFuaW1hdGUtb3V0IC5jb250ZW50LXdyYXBwZXIgaDIsIFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNi5hbmltYXRlLWluLmFuaW1hdGUtb3V0IC5jb250ZW50LXdyYXBwZXIgaDIsIFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNy5hbmltYXRlLWluLmFuaW1hdGUtb3V0IC5jb250ZW50LXdyYXBwZXIgaDJ7XHJcbiAgICBvcGFjaXR5OiAwO1xyXG59XHJcblxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMSAuY29udGVudC13cmFwcGVyIHAsIFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMiAuY29udGVudC13cmFwcGVyIHAsIFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMyAuY29udGVudC13cmFwcGVyIHAsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS01IC5jb250ZW50LXdyYXBwZXIgcCxcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTYgLmNvbnRlbnQtd3JhcHBlciBwLCBcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTcgLmNvbnRlbnQtd3JhcHBlciBwLFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMS5hbmltYXRlLWluLmFuaW1hdGUtb3V0IC5jb250ZW50LXdyYXBwZXIgcCwgXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0yLmFuaW1hdGUtaW4uYW5pbWF0ZS1vdXQgLmNvbnRlbnQtd3JhcHBlciBwLCBcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTMuYW5pbWF0ZS1pbi5hbmltYXRlLW91dCAuY29udGVudC13cmFwcGVyIHAsIFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNS5hbmltYXRlLWluLmFuaW1hdGUtb3V0IC5jb250ZW50LXdyYXBwZXIgcCwgXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS02LmFuaW1hdGUtaW4uYW5pbWF0ZS1vdXQgLmNvbnRlbnQtd3JhcHBlciBwLCBcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTcuYW5pbWF0ZS1pbi5hbmltYXRlLW91dCAuY29udGVudC13cmFwcGVyIHB7XHJcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTIwcHgpO1xyXG4gICAgb3BhY2l0eTogMDtcclxuICAgIHRyYW5zaXRpb246IGFsbCAyMDBtcyBsaW5lYXI7XHJcbn1cclxuIFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMi5hbmltYXRlLWluIC5jb250ZW50LXdyYXBwZXIgaDIsIFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMy5hbmltYXRlLWluIC5jb250ZW50LXdyYXBwZXIgaDIsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS01LmFuaW1hdGUtaW4gLmNvbnRlbnQtd3JhcHBlciBoMixcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTYuYW5pbWF0ZS1pbiAuY29udGVudC13cmFwcGVyIGgye1xyXG4gICAgb3BhY2l0eTogMTtcclxuICAgIGFuaW1hdGlvbjogdGl0bGVBbmltIDJzIGVhc2UtaW4tb3V0IGZvcndhcmRzO1xyXG4gICAgdHJhbnNmb3JtLW9yaWdpbjogY2VudGVyO1xyXG59XHJcblxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNy5hbmltYXRlLWluIC5jb250ZW50LXdyYXBwZXIgaDJ7XHJcbiAgICBvcGFjaXR5OiAxO1xyXG4gICAgdHJhbnNpdGlvbjogYWxsIDFzIGVhc2UtaW4tb3V0O1xyXG59XHJcblxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMS5hbmltYXRlLWluIC5jb250ZW50LXdyYXBwZXIgcCwgXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0yLmFuaW1hdGUtaW4gLmNvbnRlbnQtd3JhcHBlciBwLCBcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTMuYW5pbWF0ZS1pbiAuY29udGVudC13cmFwcGVyIHAsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS01LmFuaW1hdGUtaW4gLmNvbnRlbnQtd3JhcHBlciBwLCBcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTYuYW5pbWF0ZS1pbiAuY29udGVudC13cmFwcGVyIHAsIFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNy5hbmltYXRlLWluIC5jb250ZW50LXdyYXBwZXIgcHtcclxuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwKTtcclxuICAgIG9wYWNpdHk6IDE7XHJcbiAgICB0cmFuc2l0aW9uOiBhbGwgNTAwbXMgZWFzZS1pbi1vdXQ7XHJcbiAgICB0cmFuc2l0aW9uLWRlbGF5OiAxLjhzO1xyXG59XHJcblxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMS5hbmltYXRlLWluIC5jb250ZW50LXdyYXBwZXIgaDJ7XHJcbiAgICBvcGFjaXR5OiAxO1xyXG4gICAgdHJhbnNpdGlvbjogYWxsIDUwMG1zIGVhc2UtaW4tb3V0O1xyXG4gICAgdHJhbnNpdGlvbi1kZWxheTogMnM7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTEuYW5pbWF0ZS1pbiAuY29udGVudC13cmFwcGVyIHB7XHJcbiAgICBvcGFjaXR5OiAxO1xyXG4gICAgdHJhbnNpdGlvbi1kZWxheTogMi41cztcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMy5hbmltYXRlLWluLnN0ZXAgLmNvbnRlbnQtd3JhcHBlciBoMixcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTMuYW5pbWF0ZS1pbi5hbmltYXRlLW91dC5zdGVwIC5jb250ZW50LXdyYXBwZXIgaDIsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS00LmFuaW1hdGUtaW4uYW5pbWF0ZS1vdXQuc3RlcCAuY29udGVudC13cmFwcGVyIGgyLFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNS5hbmltYXRlLWluLmFuaW1hdGUtb3V0LnN0ZXAgLmNvbnRlbnQtd3JhcHBlciBoMixcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTUuYW5pbWF0ZS1pbi5zdGVwIC5jb250ZW50LXdyYXBwZXIgaDJ7XHJcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7XHJcbiAgICBvcGFjaXR5OiAxO1xyXG4gICAgdHJhbnNpdGlvbjogbm9uZTtcclxuICAgIGFuaW1hdGlvbjogbm9uZTtcclxuICAgIGZvbnQtc2l6ZTpjYWxjKDE4cHggKyAoMzIgLSAxOCkgKiAoMTAwdncgLSAxMjAwcHgpIC8gKDE5MjAgLSAxMjAwKSk7XHJcbn1cclxuXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0zLmFuaW1hdGUtaW4uc3RlcCAuY29udGVudC13cmFwcGVyIHAsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0zLmFuaW1hdGUtaW4uYW5pbWF0ZS1vdXQuc3RlcCAuY29udGVudC13cmFwcGVyIHAsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS00LmFuaW1hdGUtaW4uYW5pbWF0ZS1vdXQuc3RlcCAuY29udGVudC13cmFwcGVyIHAsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS01LmFuaW1hdGUtaW4uc3RlcCAuY29udGVudC13cmFwcGVyIHB7XHJcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7XHJcbiAgICBvcGFjaXR5OiAxO1xyXG4gICAgdHJhbnNpdGlvbjogbm9uZTtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuYW5pbWF0ZS1pbi5zbGlkZS0xe1xyXG4gICAgei1pbmRleDogNTtcclxufVxyXG4vKiBTY3JlZW4gMiAqL1xyXG4uYWRhcHRpdmUtcHJpY2luZyAub3ZhbC13cmFwcGVye1xyXG4gICAgY3Vyc29yOiBkZWZhdWx0O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5vdmFsLXNwYWNlIHtcclxuICAgIHdpZHRoOiAxODBweDtcclxuICAgIGhlaWdodDogMTMwcHg7XHJcbiAgICBiYWNrZ3JvdW5kOiAjZmZmO1xyXG4gICAgYm9yZGVyLXJhZGl1czogMTAwcHg7XHJcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XHJcbiAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoMTQ1ZGVnLCAjZWZlZWVlLCAjZmZmZmZmKTtcclxuICAgIGJveC1zaGFkb3c6IDZweCA1cHggMTBweCAjZjNmMmYxLCBpbnNldCAwcHggMHB4IDFweCAjZWFlYWVhLCBpbnNldCAycHggMnB4IDZweCAjZWFlYWVhO1xyXG4gICAgYm9yZGVyOiAxcHggc29saWQgI2ZmZmZmZjtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAub3ZhbC1zcGFjZS5hY3RpdmV7XHJcbiAgICBiYWNrZ3JvdW5kOiAjRkZFQUUzO1xyXG59XHJcblxyXG4uYWRhcHRpdmUtcHJpY2luZyAub3ZhbC1zcGFjZSAuaW5uZXItaW1hZ2V7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG4gICAgY3Vyc29yOiBwb2ludGVyO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5vdmFsLXNwYWNlLmV4cGFuZCAuaW5uZXItaW1hZ2V7XHJcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XHJcbiAgICBwYWRkaW5nLWxlZnQ6IDcwcHg7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLm92YWwtc3BhY2UgLmlubmVyLWltYWdlOjphZnRlcntcclxuICAgIGNvbnRlbnQ6ICcnO1xyXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgbWFyZ2luOiBhdXRvO1xyXG4gICAgdG9wOiAwO1xyXG4gICAgYm90dG9tOiAwO1xyXG4gICAgbGVmdDo1MHB4O1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAub3ZhbC1zcGFjZSAuaW5uZXItaW1hZ2U6YmVmb3JlIHtcclxuICAgIGNvbnRlbnQ6ICcnO1xyXG4gICAgd2lkdGg6IDEwMHB4O1xyXG4gICAgaGVpZ2h0OiAxMHB4O1xyXG4gICAgYmFja2dyb3VuZDogI0U2RTZFNjtcclxuICAgIGJvcmRlci1yYWRpdXM6IDQwMHB4IDQwMHB4IDQwMHB4IDQwMHB4IC8gMTUwcHggMTUwcHggMTUwcHggMTUwcHg7XHJcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XHJcbiAgICBib3R0b206IDEwcHg7XHJcbiAgICAvKiB0cmFuc2Zvcm06IHJvdGF0ZTNkKDUwLCAxLCAxLCA2NWRlZyk7ICovXHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLm92YWwtc3BhY2UuYWN0aXZlIC5pbm5lci1pbWFnZTpiZWZvcmV7XHJcbiAgICB3aWR0aDogMTAwcHg7XHJcbiAgICBiYWNrZ3JvdW5kOiAjZmZmO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5vdmFsLXNwYWNlLmdyb3VwIC5pbm5lci1pbWFnZTpiZWZvcmV7XHJcbiAgICB3aWR0aDogMTIwcHg7XHJcbiAgICBoZWlnaHQ6IDQ1cHg7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLm92YWwtc3BhY2UuZXhwYW5kIC5pbm5lci1pbWFnZTpiZWZvcmV7XHJcbiAgICBsZWZ0OiA0MHB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5vdmFsLXNwYWNlLmdyb3VwLmV4cGFuZCAuaW5uZXItaW1hZ2U6YmVmb3Jle1xyXG4gICAgbGVmdDogMzBweDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAub3ZhbC1zcGFjZS5zb2xvIC5pbm5lci1pbWFnZTo6YWZ0ZXJ7XHJcbiAgICBiYWNrZ3JvdW5kOiB1cmwoL2Fzc2V0cy9pbWFnZXMvYWRhcHRpdmUtcHJpY2luZy9zb2xvLnN2Zykgbm8tcmVwZWF0O1xyXG4gICAgd2lkdGg6IDQxcHg7XHJcbiAgICBoZWlnaHQ6IDk3cHg7XHJcbiAgICBsZWZ0OjcwcHg7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLm92YWwtc3BhY2UuYnVzaW5lc3MgLmlubmVyLWltYWdlOjphZnRlcntcclxuICAgIGJhY2tncm91bmQ6IHVybCgvYXNzZXRzL2ltYWdlcy9hZGFwdGl2ZS1wcmljaW5nL2J1c3NpbmVzcy5zdmcpIG5vLXJlcGVhdDtcclxuICAgIHdpZHRoOiAxMDRweDtcclxuICAgIGhlaWdodDogMTAwcHg7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLm92YWwtc3BhY2UuY291cGxlIC5pbm5lci1pbWFnZTo6YWZ0ZXJ7XHJcbiAgICBiYWNrZ3JvdW5kOiB1cmwoL2Fzc2V0cy9pbWFnZXMvYWRhcHRpdmUtcHJpY2luZy9jb3VwbGUuc3ZnKSBuby1yZXBlYXQ7XHJcbiAgICB3aWR0aDogOTNweDtcclxuICAgIGhlaWdodDogOThweDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAub3ZhbC1zcGFjZS5ncm91cCAuaW5uZXItaW1hZ2U6OmFmdGVye1xyXG4gICAgYmFja2dyb3VuZDogdXJsKC9hc3NldHMvaW1hZ2VzL2FkYXB0aXZlLXByaWNpbmcvZ3JvdXAuc3ZnKSBuby1yZXBlYXQ7XHJcbiAgICB3aWR0aDogMTE3cHg7XHJcbiAgICBoZWlnaHQ6IDg2cHg7XHJcbiAgICBsZWZ0OiAzNXB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5vdmFsLXNwYWNlLmV4cGFuZHtcclxuICAgIHdpZHRoOiAyODBweDtcclxuICAgIHRyYW5zaXRpb246YWxsIDMwMG1zIGVhc2UtaW4tb3V0O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5vdmFsLXNwYWNlIC5pbmZve1xyXG4gICAgd2lkdGg6IDcwcHg7XHJcbiAgICBoZWlnaHQ6IDcwcHg7XHJcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XHJcbiAgICB0b3A6IDA7XHJcbiAgICBib3R0b206IDA7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcclxuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG4gICAgYWxpZ24taXRlbXM6IGZsZXgtZW5kO1xyXG4gICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcclxuICAgIHRyYW5zaXRpb246IGFsbCAxMDBtcyBlYXNlLWluLW91dDtcclxuICAgIGxlZnQ6IDgwcHg7XHJcbiAgICBjb2xvcjogI0Q0RDlGMjtcclxuICAgIG9wYWNpdHk6IDA7XHJcbiAgICB0ZXh0LWFsaWduOiBsZWZ0O1xyXG4gICAgZm9udC1zaXplOiBjYWxjKDE0cHggKyAoMTYgLSAxNCkgKiAoMTAwdncgLSAxMjAwcHgpIC8gKDE5MjAgLSAxMjAwKSk7XHJcbiAgICBmb250LXdlaWdodDogNTAwO1xyXG4gICAgY3Vyc29yOiBwb2ludGVyO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5vdmFsLXNwYWNlLmV4cGFuZCAuaW5mb3tcclxuICAgIG9wYWNpdHk6IDE7XHJcbiAgICB0cmFuc2l0aW9uOiBhbGwgMTAwbXMgZWFzZS1pbi1vdXQ7XHJcbiAgICB0cmFuc2l0aW9uLWRlbGF5OiAyMDBtcztcclxuICAgIHRvcDogMDtcclxuICAgIGJvdHRvbTogMDtcclxuICAgIG1hcmdpbjogYXV0bztcclxuICAgIHJpZ2h0OiA0NnB4O1xyXG4gICAgd2lkdGg6IGF1dG87XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLm92YWwtd3JhcHBlciBoMiwgLm92YWwtd3JhcHBlciBoMywgLm92YWwtd3JhcHBlciBwe1xyXG4gICAgbWFyZ2luOiAwO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5vdmFsLXdyYXBwZXIgaDJ7XHJcbiAgICBmb250LXNpemU6IDI2cHg7XHJcbiAgICBmb250LXdlaWdodDogNTAwO1xyXG59XHJcbi5vdmFsLXdyYXBwZXIgaDN7XHJcbiAgICBmb250LXNpemU6IDMwcHg7XHJcbiAgICBmb250LXdlaWdodDogNTAwO1xyXG4gICAgY29sb3I6ICMzRjNENTY7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLm92YWwtd3JhcHBlciBwe1xyXG4gICAgZm9udC1zaXplOiAxNHB4O1xyXG4gICAgY29sb3I6ICMzRjNENTY7XHJcbn1cclxuLyogU2xpZGUtMyAqL1xyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMyAuY2FyZHtcclxuICAgIHdpZHRoOiA4NSU7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTMgLmNhcmQgLmNhcmQtYm9keXtcclxuICAgIHBhZGRpbmc6IDAgMTBweDtcclxuICAgIG92ZXJmbG93LXk6IGhpZGRlbjtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMyAuY2FyZCAuY2FyZC1ib2R5IC5pbWFnZS13cmFwcGVye1xyXG4gICAgYmFja2dyb3VuZDogI0Y3RThFNDtcclxuICAgIG1pbi13aWR0aDogNjJweDtcclxuICAgIGhlaWdodDogNjJweDtcclxuICAgIGJvcmRlci1yYWRpdXM6IDEwcHg7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTMgLmNhcmQgLmNhcmQtYm9keSAuY2FyZC10ZXh0IHB7XHJcbiAgICBoZWlnaHQ6IDEwcHg7XHJcbiAgICBtYXJnaW4tYm90dG9tOiAxNXB4O1xyXG4gICAgd2lkdGg6IDEwMCU7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTMgLmNhcmQgLmNhcmQtYm9keSAuY2FyZC1pbmZvLXdyYXBwZXJ7XHJcbiAgICBvdmVyZmxvdzogYXV0bztcclxuICAgIHotaW5kZXg6IDU7XHJcbiAgICBtYXgtaGVpZ2h0OiBjYWxjKDEwMHZoIC0gNTgwcHgpO1xyXG4gICAgcGFkZGluZzogMCAxMHB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0zIC5jYXJkIC5jYXJkLWJvZHkgLmNhcmQtaW5mby13cmFwcGVyID4gZGl2e1xyXG4gICAgcGFkZGluZzogMCAwIDEwcHg7XHJcbiAgICBmb250LXNpemU6IGNhbGMoMTBweCArICgxOCAtIDEwKSAqICgxMDB2dyAtIDEyMDBweCkgLyAoMTkyMCAtIDEyMDApKTtcclxufVxyXG4vKiBTbGlkZS03ICovXHJcbi8qIC5hZGFwdGl2ZS1wcmljaW5nIC53cmFwcGVyIHB7XHJcbiAgICB3aWR0aDogOTAlO1xyXG59ICovXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS03IC53cmFwcGVyIC5jb2wtNntcclxuICAgIHBhZGRpbmctdG9wOiA4MHB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS03IC53cmFwcGVyIC5yaWdodC1zZWN0aW9ue1xyXG4gICAgYm94LXNoYWRvdzogLThweCAtOHB4IDIwcHggI0ZGRkZGRjU5O1xyXG4gICAgYmFja2dyb3VuZDogdXJsKC9hc3NldHMvaW1hZ2VzL2FkYXB0aXZlLXByaWNpbmcvZ3Vlc3Quc3ZnKSBuby1yZXBlYXQgYm90dG9tIGNlbnRlcjtcclxuICAgIGJhY2tncm91bmQtc2l6ZTogMTAwJTtcclxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNyAud3JhcHBlciAucmlnaHQtc2VjdGlvbiAuY29udGVudC13cmFwcGVye1xyXG4gICAgb3BhY2l0eTogMDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNyAud3JhcHBlciAucmlnaHQtc2VjdGlvbi5iZW5lZml0LWFjdGl2ZSAuY29udGVudC13cmFwcGVye1xyXG4gICAgb3BhY2l0eTogMTtcclxuICAgIC8qIHRyYW5zaXRpb246IDAuNXMgZWFzZS1pbi1vdXQ7ICovXHJcbiAgICB0cmFuc2l0aW9uLWRlbGF5OiAwLjVzO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS03IC53cmFwcGVyIC5yaWdodC1zZWN0aW9uLmJlbmVmaXQtYWN0aXZlOjpiZWZvcmV7XHJcbiAgICBjb250ZW50OiAnJztcclxuICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50IGxpbmVhci1ncmFkaWVudCgzMTZkZWcsICNGRkZGRkYgMCUsICNGRkYzRUIgNzklLCAjRkZFN0Q4NTMgMTAwJSkgMCUgMCUgbm8tcmVwZWF0IHBhZGRpbmctYm94O1xyXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgdG9wOiAwO1xyXG4gICAgYm90dG9tOiAwO1xyXG4gICAgcmlnaHQ6IDA7XHJcbiAgICBsZWZ0OiAwO1xyXG4gICAgei1pbmRleDogLTE7XHJcbiAgICB0cmFuc2l0aW9uOiAwLjVzIGVhc2UtaW4tb3V0O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS03IC53cmFwcGVyIC5sZWZ0LXNlY3Rpb257XHJcbiAgICBiYWNrZ3JvdW5kOiB1cmwoL2Fzc2V0cy9pbWFnZXMvYWRhcHRpdmUtcHJpY2luZy9jYXNlLXN0dWR5LnN2Zykgbm8tcmVwZWF0IGJvdHRvbSBjZW50ZXI7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmc6OmFmdGVye1xyXG4gICAgY29udGVudDogJyc7XHJcbiAgICBiYWNrZ3JvdW5kOiB1cmwoJy9hc3NldHMvaW1hZ2VzL2FkYXB0aXZlLXByaWNpbmcvYWRhcHRpdmUtYmdAMngucG5nJyk7XHJcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XHJcbiAgICB0b3A6IDA7XHJcbiAgICBib3R0b206IDA7XHJcbiAgICBsZWZ0OiAwO1xyXG4gICAgcmlnaHQ6IDA7XHJcbiAgICB6LWluZGV4OiAtMTtcclxuICAgIGJhY2tncm91bmQtc2l6ZTogY292ZXI7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcuc2NyZWVuLTc6OmFmdGVye1xyXG4gICAgY29udGVudDogbm9uZTtcclxufVxyXG4vKiBTbGlkZS01ICovXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS02IC5jYXJkIC5jYXJkLWJvZHkubGlzdC1hY3RpdmUgLmxpc3Qtcm93OmZpcnN0LWNoaWxkIC5jb2wsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS02IC5jYXJkIC5jYXJkLWJvZHkubGlzdC1hY3RpdmUgLmxpc3Qtcm93Om50aC1jaGlsZCgyKSAuY29sLFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpudGgtY2hpbGQoMykgLmNvbHtcclxuICAgIGJhY2tncm91bmQtY29sb3I6ICM2NTYxN0Q7XHJcbiAgICBjb2xvcjogI0ZGRkZGRjtcclxuICAgIGJvcmRlci1yYWRpdXM6IDEwcHggMCAwIDEwcHg7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTYgLmNhcmQgLmNhcmQtYm9keS5saXN0LWFjdGl2ZSAubGlzdC1yb3c6Zmlyc3QtY2hpbGQgLmNvbCAuY2FyZC1uYW1lLFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpudGgtY2hpbGQoMikgLmNvbCAuY2FyZC1uYW1lLFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpudGgtY2hpbGQoMykgLmNvbCAuY2FyZC1uYW1le1xyXG4gICAgY29sb3I6ICNGRkZGRkY7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTYgLmNhcmQgLmNhcmQtYm9keS5saXN0LWFjdGl2ZSAubGlzdC1yb3c6Zmlyc3QtY2hpbGQgLmNvbCAuYnVsbGV0cyBwLFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpudGgtY2hpbGQoMikgLmNvbCAuYnVsbGV0cyBwLFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpudGgtY2hpbGQoMykgLmNvbCAuYnVsbGV0cyBwe1xyXG4gICAgYmFja2dyb3VuZDogI2ZmZjtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpmaXJzdC1jaGlsZCAuY2FyZC10ZXh0IHAsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS02IC5jYXJkIC5jYXJkLWJvZHkubGlzdC1hY3RpdmUgLmxpc3Qtcm93Om50aC1jaGlsZCgyKSAuY2FyZC10ZXh0IHAsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS02IC5jYXJkIC5jYXJkLWJvZHkubGlzdC1hY3RpdmUgLmxpc3Qtcm93Om50aC1jaGlsZCgzKSAuY2FyZC10ZXh0IHB7XHJcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjOEM4OTlEO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS02IC5jYXJkIC5jYXJkLWJvZHkubGlzdC1hY3RpdmUgLmxpc3Qtcm93OmZpcnN0LWNoaWxkIC5kZXRhaWwgLmxvY2F0aW9uLFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpudGgtY2hpbGQoMikgLmRldGFpbCAubG9jYXRpb24sXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS02IC5jYXJkIC5jYXJkLWJvZHkubGlzdC1hY3RpdmUgLmxpc3Qtcm93Om50aC1jaGlsZCgzKSAuZGV0YWlsIC5sb2NhdGlvbntcclxuICAgIGJhY2tncm91bmQ6IHVybCgvYXNzZXRzL2ltYWdlcy9hZGFwdGl2ZS1wcmljaW5nL2xvY2F0aW9uLXd0LnN2Zykgbm8tcmVwZWF0IGxlZnQgNTIlIGNlbnRlcjtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpmaXJzdC1jaGlsZCAucHJpY2UsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS02IC5jYXJkIC5jYXJkLWJvZHkubGlzdC1hY3RpdmUgLmxpc3Qtcm93Om50aC1jaGlsZCgyKSAucHJpY2UsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS02IC5jYXJkIC5jYXJkLWJvZHkubGlzdC1hY3RpdmUgLmxpc3Qtcm93Om50aC1jaGlsZCgzKSAucHJpY2V7XHJcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjM0UzOTU4O1xyXG4gICAgY29sb3I6ICNGRkMxOTM7XHJcbiAgICBwYWRkaW5nLXRvcDogMzRweDtcclxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpmaXJzdC1jaGlsZCAucHJpY2UgaDIsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS02IC5jYXJkIC5jYXJkLWJvZHkubGlzdC1hY3RpdmUgLmxpc3Qtcm93Om50aC1jaGlsZCgyKSAucHJpY2UgaDIsXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS02IC5jYXJkIC5jYXJkLWJvZHkubGlzdC1hY3RpdmUgLmxpc3Qtcm93Om50aC1jaGlsZCgzKSAucHJpY2UgIGgye1xyXG4gICAgbGluZS1oZWlnaHQ6IDlweDtcclxuICAgIG1hcmdpbi1ib3R0b206IDdweDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpmaXJzdC1jaGlsZCAucHJpY2Ugc3Ryb25nLFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpudGgtY2hpbGQoMikgLnByaWNlIHN0cm9uZyxcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTYgLmNhcmQgLmNhcmQtYm9keS5saXN0LWFjdGl2ZSAubGlzdC1yb3c6bnRoLWNoaWxkKDMpIC5wcmljZSBzdHJvbmd7XHJcbiAgICBjb2xvcjogI0ZGQzE5MztcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpmaXJzdC1jaGlsZCAucHJpY2U6OmFmdGVyLFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpudGgtY2hpbGQoMikgLnByaWNlOjphZnRlcixcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTYgLmNhcmQgLmNhcmQtYm9keS5saXN0LWFjdGl2ZSAubGlzdC1yb3c6bnRoLWNoaWxkKDMpIC5wcmljZTo6YWZ0ZXJ7XHJcbiAgICBjb250ZW50OiAnJztcclxuICAgIGJhY2tncm91bmQ6IHVybCgvYXNzZXRzL2ltYWdlcy9hZGFwdGl2ZS1wcmljaW5nL2JhZGdlLnN2Zykgbm8tcmVwZWF0IGNlbnRlciBjZW50ZXI7XHJcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XHJcbiAgICB0b3A6IDEzcHg7XHJcbiAgICB3aWR0aDogMTZweDtcclxuICAgIGhlaWdodDogMjFweDtcclxuICAgIGxlZnQ6IDA7XHJcbiAgICByaWdodDogMDtcclxuICAgIG1hcmdpbjogYXV0bztcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpmaXJzdC1jaGlsZCAucHJpY2U6OmJlZm9yZSxcclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTYgLmNhcmQgLmNhcmQtYm9keS5saXN0LWFjdGl2ZSAubGlzdC1yb3c6bnRoLWNoaWxkKDIpIC5wcmljZTo6YmVmb3JlLFxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpudGgtY2hpbGQoMykgLnByaWNlOjpiZWZvcmV7XHJcbiAgICBjb250ZW50OiAnJztcclxuICAgIHdpZHRoOiAzMXB4O1xyXG4gICAgaGVpZ2h0OiAzMXB4O1xyXG4gICAgYmFja2dyb3VuZDogd2hpdGU7XHJcbiAgICBib3JkZXItcmFkaXVzOiAxMDBweDtcclxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgIHRvcDogN3B4O1xyXG4gICAgbGVmdDogMDtcclxuICAgIHJpZ2h0OiAwO1xyXG4gICAgbWFyZ2luOiBhdXRvO1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogIzJBMjg0MDtcclxuICAgIGJveC1zaGFkb3c6IDAgMCA2cHggI2ZmZmZmZjIxO1xyXG59XHJcblxyXG4vKiBTbGlkZS01ICovXHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS01IC5jYXJkIC5jYXJkLWJvZHkubGlzdC1hY3RpdmUgLmxpc3Qtcm93OmZpcnN0LWNoaWxkIC5jb2x7XHJcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjNjU2MTdEO1xyXG4gICAgY29sb3I6ICNGRkZGRkY7XHJcbiAgICBib3JkZXItcmFkaXVzOiAxMHB4IDAgMCAxMHB4O1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS01IC5jYXJkIC5jYXJkLWJvZHkubGlzdC1hY3RpdmUgLmxpc3Qtcm93OmZpcnN0LWNoaWxkIC5jb2wgLmNhcmQtbmFtZXtcclxuICAgIGNvbG9yOiAjRkZGRkZGO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS01IC5jYXJkIC5jYXJkLWJvZHkubGlzdC1hY3RpdmUgLmxpc3Qtcm93OmZpcnN0LWNoaWxkIC5jb2wgLmJ1bGxldHMgcHtcclxuICAgIGJhY2tncm91bmQ6ICNmZmY7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTUgLmNhcmQgLmNhcmQtYm9keS5saXN0LWFjdGl2ZSAubGlzdC1yb3c6Zmlyc3QtY2hpbGQgLmNhcmQtdGV4dCBwe1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogIzhDODk5RDtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNSAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpmaXJzdC1jaGlsZCAuZGV0YWlsIC5sb2NhdGlvbntcclxuICAgIGJhY2tncm91bmQ6IHVybCgvYXNzZXRzL2ltYWdlcy9hZGFwdGl2ZS1wcmljaW5nL2xvY2F0aW9uLXd0LnN2Zykgbm8tcmVwZWF0IGxlZnQgNTIlIGNlbnRlcjtcclxufVxyXG4uYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNSAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpmaXJzdC1jaGlsZCAucHJpY2V7XHJcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjM0UzOTU4O1xyXG4gICAgY29sb3I6ICNGRkMxOTM7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTUgLmNhcmQgLmNhcmQtYm9keS5saXN0LWFjdGl2ZSAubGlzdC1yb3c6Zmlyc3QtY2hpbGQgLnByaWNlIHN0cm9uZ3tcclxuICAgIGNvbG9yOiAjRkZDMTkzO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5iYXItY2xvc2V7XHJcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XHJcbiAgICB3aWR0aDogMjBweDtcclxuICAgIHJpZ2h0OiAzMHB4O1xyXG4gICAgdG9wOiAzMHB4O1xyXG4gICAgY3Vyc29yOiBwb2ludGVyO1xyXG59XHJcbi5hZGFwdGl2ZS1wcmljaW5nIC5hbmltYXRlZC1iYWNrZ3JvdW5ke1xyXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgdG9wOiAtMXB4O1xyXG4gICAgYm90dG9tOiAtMXB4O1xyXG4gICAgcmlnaHQ6IC0xcHg7XHJcbiAgICBsZWZ0OiAtMXB4O1xyXG4gICAgei1pbmRleDogOTtcclxuICAgIG9wYWNpdHk6IDA7XHJcbiAgICB0cmFuc2l0aW9uOiBhbGwgMC41cyBlYXNlLWluLW91dDtcclxuICAgIGJvcmRlci1yYWRpdXM6IDEwcHg7XHJcbiAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQsICNmZmZjZjkgOCUsICNmZmYzZWIgMjIlLCAjZmZmZWZkIDQwJSk7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQtbG9hZGVyIC5saXN0LXJvdyAuYW5pbWF0ZWQtYmFja2dyb3VuZHtcclxuICAgIG9wYWNpdHk6IDE7XHJcbn1cclxuQG1lZGlhIChtYXgtd2lkdGg6IDE2NTBweCl7XHJcbiAgICAuYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMSAuY2FyZC13cmFwcGVyIC5jYXJkOmZpcnN0LWNoaWxke1xyXG4gICAgICAgIHJpZ2h0OiA0NHB4O1xyXG4gICAgfVxyXG4gICAgLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQtd3JhcHBlcntcclxuICAgICAgICByaWdodDogMjBweDtcclxuICAgIH1cclxuICAgIC5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkLXdyYXBwZXIgLmNhcmQgLmNhcmQtYm9keXtcclxuICAgICAgICBwYWRkaW5nOiAxMHB4IDA7XHJcbiAgICB9XHJcbiAgICAuYWRhcHRpdmUtcHJpY2luZyAuY2FyZC13cmFwcGVyIC5jYXJkIC5jYXJkLWJvZHkgLmxpc3Qtcm93e1xyXG4gICAgICAgIG1hcmdpbjogMCA3cHggMjBweDtcclxuICAgICAgICBoZWlnaHQ6IDgwcHg7XHJcbiAgICB9XHJcbiAgICAuYWRhcHRpdmUtcHJpY2luZyAuY2FyZC13cmFwcGVyIC5jYXJkOm50aC1jaGlsZCgyKXtcclxuICAgICAgICByaWdodDogMjZweDtcclxuICAgIH1cclxuICAgIC5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkLXdyYXBwZXIgLmNhcmQ6bnRoLWNoaWxkKDMpe1xyXG4gICAgICAgIHJpZ2h0OiA0OXB4O1xyXG4gICAgfVxyXG4gICAgLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTMgLmNhcmQtd3JhcHBlciAuY2FyZCAuY2FyZC10aXRsZXtcclxuICAgICAgICBwYWRkaW5nOiAxNXB4IDIwcHggNXB4O1xyXG4gICAgICAgIG1hcmdpbi1ib3R0b206IDA7XHJcbiAgICB9XHJcbiAgICAuYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpmaXJzdC1jaGlsZCAucHJpY2V7XHJcbiAgICAgICAgcGFkZGluZy10b3A6IDI3cHg7XHJcbiAgICB9XHJcbiAgICAuYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpmaXJzdC1jaGlsZCAucHJpY2U6OmFmdGVyLFxyXG4gICAgLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTYgLmNhcmQgLmNhcmQtYm9keS5saXN0LWFjdGl2ZSAubGlzdC1yb3c6bnRoLWNoaWxkKDIpIC5wcmljZTo6YWZ0ZXIsXHJcbiAgICAuYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpudGgtY2hpbGQoMykgLnByaWNlOjphZnRlcntcclxuICAgICAgICB0b3A6IDExcHg7XHJcbiAgICAgICAgd2lkdGg6IDE0cHg7XHJcbiAgICAgICAgaGVpZ2h0OiAxN3B4O1xyXG4gICAgICAgIGJhY2tncm91bmQtc2l6ZTogODYlO1xyXG4gICAgfVxyXG4gICAgLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTYgLmNhcmQgLmNhcmQtYm9keS5saXN0LWFjdGl2ZSAubGlzdC1yb3c6Zmlyc3QtY2hpbGQgLnByaWNlOjpiZWZvcmUsXHJcbiAgICAuYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpudGgtY2hpbGQoMikgLnByaWNlOjpiZWZvcmUsXHJcbiAgICAuYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtNiAuY2FyZCAuY2FyZC1ib2R5Lmxpc3QtYWN0aXZlIC5saXN0LXJvdzpudGgtY2hpbGQoMykgLnByaWNlOjpiZWZvcmV7XHJcbiAgICAgICAgd2lkdGg6IDI0cHg7XHJcbiAgICAgICAgaGVpZ2h0OiAyNHB4O1xyXG4gICAgICAgIHRvcDogN3B4O1xyXG4gICAgfVxyXG4gICAgLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQgLmNhcmQtYm9keSAucHJpY2UgaDJ7XHJcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogM3B4ICFpbXBvcnRhbnQ7XHJcbiAgICB9XHJcbn1cclxuQG1lZGlhIChtYXgtd2lkdGg6IDE2MDBweCl7XHJcbiAgICAuYWRhcHRpdmUtcHJpY2luZyAuY29udGVudC13cmFwcGVyIHB7XHJcbiAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtIDU1MHB4KTtcclxuICAgIH1cclxufVxyXG5AbWVkaWEgKG1pbi13aWR0aDogMTI4MHB4KSBhbmQgKG1heC13aWR0aDogMTQ1MHB4KXtcclxuICAgIC5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0xIC5jYXJkLXdyYXBwZXIgLmNhcmR7XHJcbiAgICAgICAgd2lkdGg6IDQzMHB4O1xyXG4gICAgfVxyXG4gICAgLmFkYXB0aXZlLXByaWNpbmcgLmJ1bGxldHMgcHtcclxuICAgICAgICB3aWR0aDogOHB4O1xyXG4gICAgICAgIGhlaWdodDogOHB4O1xyXG4gICAgfVxyXG4gICAgLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQgLmNhcmQtYm9keSAuY2FyZC1uYW1le1xyXG4gICAgICAgIG1hcmdpbi1ib3R0b206IDVweCAhaW1wb3J0YW50O1xyXG4gICAgfVxyXG4gICAgLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQtdGV4dCBwe1xyXG4gICAgICAgIG1hcmdpbi1ib3R0b206IDNweDtcclxuICAgIH1cclxufVxyXG5AbWVkaWEgKG1heC1oZWlnaHQ6IDc1MHB4KXtcclxuICAgIC8qIC5hZGFwdGl2ZS1wcmljaW5nIC5jb250ZW50LXdyYXBwZXJ7XHJcbiAgICAgICAgdG9wOiA2MHB4O1xyXG4gICAgfVxyXG4gICAgLmFkYXB0aXZlLXByaWNpbmcgaDJ7XHJcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMTBweDtcclxuICAgIH0gKi9cclxufVxyXG5AbWVkaWEgKG1heC1oZWlnaHQ6IDcwMHB4KXtcclxuICAgIC5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0zIC5jYXJkLXdyYXBwZXIgLmNhcmQgLmNhcmQtdGl0bGV7XHJcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMDtcclxuICAgIH1cclxuICAgIC5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0zIC5jYXJkIC5jYXJkLWJvZHkgLmltYWdlLXdyYXBwZXJ7XHJcbiAgICAgICAgbWluLXdpZHRoOiA0MnB4O1xyXG4gICAgICAgIGhlaWdodDogNDJweDtcclxuICAgIH1cclxuICAgIC5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0zIC5jYXJkIC5jYXJkLWJvZHkgLmltYWdlLXdyYXBwZXIgaW1ne1xyXG4gICAgICAgIHdpZHRoOiA2MCU7XHJcbiAgICB9XHJcbiAgICAuYWRhcHRpdmUtcHJpY2luZyAuc2xpZGUtMyAuY2FyZCAuY2FyZC1ib2R5IC5jYXJkLXRleHQgcHtcclxuICAgICAgICBoZWlnaHQ6IDhweDtcclxuICAgICAgICBtYXJnaW4tYm90dG9tOiAxMHB4O1xyXG4gICAgfVxyXG4gICAgLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTEgLmNhcmQgLmNhcmQtaGVhZGVye1xyXG4gICAgICAgIHBhZGRpbmc6IDdweDtcclxuICAgIH1cclxuICAgIC5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0xIC5jYXJkIC5jYXJkLWJvZHl7XHJcbiAgICAgICAgbWFyZ2luLXRvcDogMTBweDtcclxuICAgIH1cclxuICAgIC5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0xIC5jYXJkOm50aC1jaGlsZCgyKXtcclxuICAgICAgICB0b3A6IC0zNnB4O1xyXG4gICAgfVxyXG4gICAgLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTEgLmNhcmQtd3JhcHBlciAuY2FyZDpudGgtY2hpbGQoMyl7XHJcbiAgICAgICAgdG9wOiA1MHB4O1xyXG4gICAgfVxyXG4gICAgLmFkYXB0aXZlLXByaWNpbmcgLnNsaWRlLTMgLmNhcmR7XHJcbiAgICAgICAgdG9wOiAtNjBweDtcclxuICAgIH1cclxuICAgIC5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkOm50aC1jaGlsZCgzKXtcclxuICAgICAgICB0b3A6IDBweDtcclxuICAgIH1cclxuICAgIC5hZGFwdGl2ZS1wcmljaW5nIC5zbGlkZS0zIC5jYXJkLXdyYXBwZXIgLmNhcmQgLmNhcmQtdGl0bGV7XHJcbiAgICAgICAgcGFkZGluZzogNXB4IDIwcHggMHB4O1xyXG4gICAgICAgIG1hcmdpbi1ib3R0b206IDBweDtcclxuICAgIH1cclxuICAgIC5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkOm50aC1jaGlsZCgzKSAuY2FyZC1ib2R5e1xyXG4gICAgICAgIG1hcmdpbjogMCAxNXB4O1xyXG4gICAgfVxyXG4gICAgLmFkYXB0aXZlLXByaWNpbmcgLmNhcmQgLmNhcmQtaGVhZGVye1xyXG4gICAgICAgIHBhZGRpbmc6IDE0cHg7XHJcbiAgICB9XHJcbiAgICAuYWRhcHRpdmUtcHJpY2luZyAuY2FyZCAuY2FyZC10aXRsZXtcclxuICAgICAgICBwYWRkaW5nOiA0MHB4IDIwcHggMTBweDtcclxuICAgIH1cclxuICAgIC5hZGFwdGl2ZS1wcmljaW5nIC5jYXJkLXdyYXBwZXIgLmNhcmQgLmNhcmQtYm9keSAubGlzdC1yb3d7XHJcbiAgICAgICAgbWFyZ2luOiAwIDdweCAxMHB4XHJcbiAgICB9XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmF4aXMgcGF0aCwgLmFkYXB0aXZlLXByaWNpbmcgLmF4aXMgbGluZSB7XHJcbiAgICBzdHJva2U6ICNBMTlGQjU7XHJcbn1cclxuLmFkYXB0aXZlLXByaWNpbmcgLmF4aXMgdGV4dCxcclxuLmFkYXB0aXZlLXByaWNpbmcgLmxpbmUteS12YWx1ZS1jdXJyZW5jeSB7XHJcbiAgICBmaWxsOiAjNjU2MTdEO1xyXG59XHJcblxyXG5Aa2V5ZnJhbWVzIHRpdGxlQW5pbXtcclxuICAgIDAle1xyXG4gICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgzNyUpO1xyXG4gICAgICAgIGZvbnQtc2l6ZTogY2FsYygxNnB4ICsgKDIwIC0gMTYpICogKDEwMHZ3IC0gMTIwMHB4KSAvICgxOTIwIC0gMTIwMCkpO1xyXG4gICAgfVxyXG4gICAgMjAle1xyXG4gICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgzNyUpO1xyXG4gICAgICAgIGZvbnQtc2l6ZTogY2FsYygzMHB4ICsgKDQwIC0gMzApICogKDEwMHZ3IC0gMTIwMHB4KSAvICgxOTIwIC0gMTIwMCkpO1xyXG4gICAgfVxyXG4gICAgNTAle1xyXG4gICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgzNyUpO1xyXG4gICAgICAgIGZvbnQtc2l6ZTogY2FsYygzMHB4ICsgKDQwIC0gMzApICogKDEwMHZ3IC0gMTIwMHB4KSAvICgxOTIwIC0gMTIwMCkpO1xyXG4gICAgfVxyXG4gICAgNzUle1xyXG4gICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgwKTtcclxuICAgICAgICBmb250LXNpemU6IGNhbGMoMjBweCArICgzMiAtIDIwKSAqICgxMDB2dyAtIDEyMDBweCkgLyAoMTkyMCAtIDEyMDApKTtcclxuICAgIH1cclxuICAgIDEwMCV7XHJcbiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDApO1xyXG4gICAgICAgIGZvbnQtc2l6ZTogY2FsYygyMHB4ICsgKDMyIC0gMjApICogKDEwMHZ3IC0gMTIwMHB4KSAvICgxOTIwIC0gMTIwMCkpO1xyXG4gICAgfVxyXG59XHJcbiJdfQ== */\"","module.exports = \"\\r\\n\\r\\n
Introduction \\r\\n
Current Situation \\r\\n
Proposed\\r\\n Solution \\r\\n
Outcome Situation \\r\\n
Benefits \\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n Adaptive Attribute - based Offers \\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{hotel.name}} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Location
\\r\\n
{{hotel.rating}} star property
\\r\\n
\\r\\n
\\r\\n
Reviews \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
From
\\r\\n
{{pricingData.currencyUnit}}{{hotel.pricePerDay}} \\r\\n
/night
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{hotel.name}} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Location
\\r\\n
{{hotel.rating}} star property
\\r\\n
\\r\\n
\\r\\n
Reviews \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
From
\\r\\n
{{pricingData.currencyUnit}}{{hotel.pricePerDay}} \\r\\n
/night
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{hotel.name}} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Location
\\r\\n
{{hotel.rating}} star property
\\r\\n
\\r\\n
\\r\\n
Reviews \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
From
\\r\\n
{{pricingData.currencyUnit}}{{hotel.pricePerDay}} \\r\\n
/night
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Adaptive Attribute - based Offers \\r\\n
Personalize search ranking and marketing offers by\\r\\n utilizing guest attribute level\\r\\n willingness-to-pay \\r\\n using heterogeneous choice data
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Current Situation \\r\\n
Offers and Recommendations are generated fairly uniformly for all guests
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n
Customer Agnostic and Non-Personalized Listing
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{hotel.name}} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Location
\\r\\n
{{hotel.rating}} star property
\\r\\n
\\r\\n
\\r\\n
Reviews \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
From
\\r\\n
{{pricingData.currencyUnit}}{{hotel.pricePerDay}} \\r\\n
/night
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n
Customer Agnostic and Non-Personalized Listing
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{hotel.name}} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Location
\\r\\n
{{hotel.rating}} star property
\\r\\n
\\r\\n
\\r\\n
Reviews \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
From
\\r\\n
{{pricingData.currencyUnit}}{{hotel.pricePerDay}} \\r\\n
/night
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n
Customer Agnostic and Non-Personalized Listing
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{hotel.name}} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Location
\\r\\n
{{hotel.rating}} star property
\\r\\n
\\r\\n
\\r\\n
Reviews \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
From
\\r\\n
{{pricingData.currencyUnit}}{{hotel.pricePerDay}} \\r\\n
/night
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Proposed Solution \\r\\n
Attribute-based recommendation via three-step WTP assessment
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Segment Profile
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
* Previous 6 months customer data
\\r\\n
\\r\\n
\\r\\n Traveller type \\r\\n Business traveller \\r\\n
\\r\\n
\\r\\n Travel type \\r\\n Domestic \\r\\n
\\r\\n
\\r\\n Cust. type \\r\\n Late planner \\r\\n
\\r\\n
\\r\\n Check-in days \\r\\n Weekdays \\r\\n
\\r\\n
\\r\\n Total nights \\r\\n 21 nights \\r\\n
\\r\\n
\\r\\n Avg.length of stay \\r\\n 3 nights \\r\\n
\\r\\n
\\r\\n Avg. price/night \\r\\n $109 \\r\\n
\\r\\n
\\r\\n Avg. review score \\r\\n 3.5 \\r\\n
\\r\\n
\\r\\n Avg. dollars saved \\r\\n $130 \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Segment Profile
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
* Previous 6 months customer data
\\r\\n
\\r\\n
\\r\\n Traveller type \\r\\n Business traveller \\r\\n
\\r\\n
\\r\\n Travel type \\r\\n Domestic \\r\\n
\\r\\n
\\r\\n Cust. type \\r\\n Late planner \\r\\n
\\r\\n
\\r\\n Check-in days \\r\\n Weekdays \\r\\n
\\r\\n
\\r\\n Total nights \\r\\n 21 nights \\r\\n
\\r\\n
\\r\\n Avg.length of stay \\r\\n 3 nights \\r\\n
\\r\\n
\\r\\n Avg. price/night \\r\\n $109 \\r\\n
\\r\\n
\\r\\n Avg. review score \\r\\n 3.5 \\r\\n
\\r\\n
\\r\\n Avg. dollars saved \\r\\n $130 \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Segment Profile
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
* Previous 6 months customer data
\\r\\n
\\r\\n
\\r\\n Traveller type \\r\\n {{selectedTravellerData?.historyData.travellerType}} \\r\\n
\\r\\n
\\r\\n Travel type \\r\\n {{selectedTravellerData?.historyData.travelType}} \\r\\n
\\r\\n
\\r\\n Cust. type \\r\\n {{selectedTravellerData?.historyData.customerType}} \\r\\n
\\r\\n
\\r\\n Check-in days \\r\\n {{selectedTravellerData?.historyData.checkInDays}} \\r\\n
\\r\\n
\\r\\n Total nights \\r\\n {{selectedTravellerData?.historyData.totalNights}} \\r\\n
\\r\\n
\\r\\n Avg.length of stay \\r\\n {{selectedTravellerData?.historyData.averageLengthOfStay}} \\r\\n
\\r\\n
\\r\\n Avg. price/night \\r\\n {{pricingData.currencyUnit}}{{selectedTravellerData?.historyData.averagePricePerNight}} \\r\\n
\\r\\n
\\r\\n Avg. review score \\r\\n {{selectedTravellerData?.historyData.averageReviewScore}} \\r\\n
\\r\\n
\\r\\n Avg. dollars saved \\r\\n {{pricingData.currencyUnit}}{{selectedTravellerData?.historyData.averageDollarSaved}} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Proposed Solution \\r\\n
Attribute-based recommendation via three-step WTP assessment
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Proposed Solution \\r\\n
Attribute-based recommendation via three-step WTP assessment
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n
Pricing Tailored Individually
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{hotel.name}} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Location
\\r\\n
{{hotel.rating}} star property
\\r\\n
\\r\\n
\\r\\n
Reviews \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
From
\\r\\n
{{pricingData.currencyUnit}}{{hotel.pricePerDay}} \\r\\n
/night
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n
Pricing Tailored Individually
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{hotel.name}} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Location
\\r\\n
{{hotel.rating}} star property
\\r\\n
\\r\\n
\\r\\n
Reviews \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
From
\\r\\n
{{pricingData.currencyUnit}}{{hotel.pricePerDay}} \\r\\n
/night
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n
Pricing Tailored Individually
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{hotel.name}} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Location
\\r\\n
{{hotel.rating}} star property
\\r\\n
\\r\\n
\\r\\n
Reviews \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
From
\\r\\n
{{pricingData.currencyUnit}}{{hotel.pricePerDay}} \\r\\n
/night
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Outcome Situation \\r\\n
Personalize search ranking and marketing offers by utilizing guest-attribute levelwillingness-to-pay using heterogeneous booking choice data
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n
Pricing and Property/Room recommendations are tailored to guest’s preferences and\\r\\n WTP \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{hotel.name}} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Location
\\r\\n
{{hotel.rating}} star property
\\r\\n
\\r\\n
\\r\\n
Reviews \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
From
\\r\\n
{{pricingData.currencyUnit}}{{hotel.pricePerDay}} \\r\\n
/night
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n
Pricing and Property/Room recommendations are tailored to guest’s preferences and\\r\\n WTP \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{hotel.name}} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Location
\\r\\n
{{hotel.rating}} star property
\\r\\n
\\r\\n
\\r\\n
Reviews \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
From
\\r\\n
{{pricingData.currencyUnit}}{{hotel.pricePerDay}} \\r\\n
/night
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n
Pricing and Property/Room recommendations are tailored to guest’s preferences and\\r\\n WTP \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{hotel.name}} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Location
\\r\\n
{{hotel.rating}} star property
\\r\\n
\\r\\n
\\r\\n
Reviews \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
From
\\r\\n
{{pricingData.currencyUnit}}{{hotel.pricePerDay}} \\r\\n
/night
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
Case Study \\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n
\\r\\n
Benefits \\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n \\r\\n \\r\\n \\r\\n \\r\\n \\r\\n \"","import { Component, OnInit, ViewEncapsulation, ViewChild, AfterContentInit, AfterViewInit } from '@angular/core';\r\nimport { fromEvent } from 'rxjs';\r\nimport { debounceTime } from 'rxjs/operators';\r\nimport { GalleryService } from 'src/app/gallery/gallery.service';\r\nimport { FullpagescrollDirective } from 'src/app/shared/fullpagescroll.directive';\r\nimport data from './data.json';\r\nimport { DataShareService } from 'src/app/shared/data-share.service';\r\ndeclare const d3: any;\r\n\r\n@Component({\r\n selector: 'app-adaptive-pricing',\r\n templateUrl: './adaptive-pricing.component.html',\r\n styleUrls: ['./adaptive-pricing.component.css'],\r\n encapsulation: ViewEncapsulation.None\r\n})\r\nexport class AdaptivePricingComponent implements OnInit, AfterContentInit, AfterViewInit {\r\n\r\n @ViewChild('fullPageScroll') fpScroll: FullpagescrollDirective;\r\n\r\n public activeStartSlide = '';\r\n public activeSlide = '';\r\n public pricingData = null;\r\n public previousActiveSlide = [];\r\n public previousTraversedSlide = '';\r\n public addStep = false;\r\n public lastActiveSlide = 'screen-1';\r\n public nextActiveSlide = 'screen-2';\r\n private screens = ['screen-1', 'screen-2', 'screen-3', 'screen-4', 'screen-5', 'screen-6', 'screen-7'];\r\n public isLoading = false;\r\n private _unsubscribeResize = null;\r\n private _svgSection = null;\r\n private isMenuOpen: boolean = true;\r\n private animationStarted = {\r\n screen1: false,\r\n screen2: false,\r\n screen3: false,\r\n screen4: false,\r\n screen5: false,\r\n screen6: false,\r\n screen7: false,\r\n };\r\n public selectedTraveller = null;\r\n public selectedTravellerData = null;\r\n public selectedTravellerHotelData = null;\r\n public isAnimation = false;\r\n public guestSegmentWTP = 0;\r\n public scaleXValue = 1;\r\n public scaleYValue = 1;\r\n public isMouseEnter = false;\r\n public rightSectionCardWidth = 0;\r\n public rightSectionCardAspect = {\r\n width: 0,\r\n left: 0\r\n };\r\n public travellerSectionAspect = {\r\n left: 0,\r\n bottom: 0\r\n };\r\n public htmlClassVariable = {\r\n card: 'card-active',\r\n hotelListLoader: 'card-loader',\r\n hotelList: 'list-active'\r\n };\r\n public svgResize = null;\r\n public indicatorSettings = [\r\n {\r\n id: 1,\r\n label: 'Introduction'\r\n },\r\n {\r\n id: 2,\r\n label: 'Current Situation'\r\n },\r\n {\r\n id: 3,\r\n label: 'Proposed Situation'\r\n },\r\n {\r\n id: 6,\r\n label: 'Outcome Situation'\r\n },\r\n {\r\n id: 7,\r\n label: 'Benefits'\r\n }\r\n ];\r\n public clickActionScreensIndex = [1, 2, 3, 3, 3, 6, 7];\r\n public currentScreenIndex = 1;\r\n public screenWiseSection = {\r\n screen7: {\r\n left: 0\r\n }\r\n }\r\n public currentScrollDirection = 'forward';\r\n\r\n constructor(\r\n private dataShareService: DataShareService\r\n ) {\r\n\r\n }\r\n\r\n ngAfterContentInit(): void {\r\n this._unsubscribeResize = fromEvent(window, 'resize').pipe(debounceTime(700)).subscribe(x => {\r\n // console.log(x, this._svgSection);\r\n if (this._svgSection) {\r\n this.svgResize = this._svgSection.resize();\r\n }\r\n });\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n\r\n }\r\n checkEventLogs(event) {\r\n // console.log('Event Trigger: ', event.type, event);\r\n }\r\n\r\n onDownArrowClick(sectionId) {\r\n // console.log(\"sectionId: \", sectionId);\r\n if (+this.currentScreenIndex != +sectionId)\r\n this.fpScroll.navigateTo(`screen-${sectionId}`);\r\n }\r\n\r\n changeScrollEvent(event, state: boolean, screenId) {\r\n // event.stopPropagation();\r\n // let el = event.target.closest('.event-wrapper');\r\n // let scrollEl = event.target.closest('.scroll-wrapper');\r\n // let elStyle = window.getComputedStyle(el);\r\n // console.log('event', screenId, elStyle.opacity);\r\n // console.log('changeScrollEvent triggered', screenId, this.activeStartSlide, event.type);\r\n if (this.activeStartSlide == screenId) {\r\n // if (+elStyle.opacity == 1) {\r\n // console.log(\"Card has appeared totally\");\r\n if (event.type === 'mouseenter') {\r\n if (event.srcElement.scrollHeight > event.srcElement.clientHeight) {\r\n this.isMouseEnter = true;\r\n this.fpScroll.setEventState(state);\r\n } else if (this.isMenuOpen && !this.isAnimation) {\r\n // console.log(\"no scroll encountered\");\r\n this.fpScroll.setEventState(!state);\r\n }\r\n } else if (event.type === 'mouseleave') {\r\n this.isMouseEnter = false;\r\n if (this.isMenuOpen && !this.isAnimation) {\r\n this.fpScroll.setEventState(state);\r\n }\r\n }\r\n // }\r\n }\r\n }\r\n\r\n changeDirectiveScrollEvent(state: boolean) {\r\n // console.log('menuState ::', state);\r\n this.isMenuOpen = state;\r\n this.fpScroll.setEventState(state);\r\n this.onAnimationEnd();\r\n }\r\n\r\n restrictScrollAndClick() {\r\n // console.log(\"Inside restrictScrollAndClick function\");\r\n // console.log('restrictScrollAndClick ::', this.isMenuOpen);\r\n if (this.isMenuOpen) {\r\n this.isAnimation = true;\r\n // this.fpScroll.setEventState(!this.isAnimation);\r\n }\r\n }\r\n\r\n onAnimationEnd() {\r\n // console.log('animationEnd :: this.isMenuOpen: ', this.isMenuOpen, '\\t this.isMouseEnter : ', this.isMouseEnter);\r\n if (this.isMenuOpen) {\r\n this.isAnimation = false;\r\n if (!this.isMouseEnter) {\r\n // this.fpScroll.setEventState(!this.isAnimation);\r\n }\r\n }\r\n }\r\n\r\n addClassToDom(selector, className, type = 'id') {\r\n // console.log(\"Inside addClassToDom\");\r\n if (type == 'id')\r\n d3.select(`#${selector}`).classed(className, true)\r\n else\r\n d3.select(`.${selector}`).classed(className, true)\r\n }\r\n\r\n removeClassFromDom(selector, className, type = 'id') {\r\n // console.log(\"Inside removeClassFromDom\");\r\n if (type == 'id')\r\n d3.select(`#${selector}`).classed(className, false);\r\n else\r\n d3.select(`.${selector}`).classed(className, false);\r\n }\r\n\r\n scrollTo(selector, type, x = 0, y = 0) {\r\n if (type == 'id')\r\n document.querySelector(`#${selector}`).scrollTo(x, y);\r\n else\r\n document.querySelectorAll(`.${selector}`).forEach((scrollEl, index) => scrollEl.scrollTo(x, y));\r\n }\r\n\r\n ngOnInit() {\r\n // console.log(\"d3: \", d3);\r\n this.dataShareService.onCustomEvent.next({ event: 'addClassToElement', data: { selector: '#header', class: 'humburger-header' } });\r\n this.pricingData = data;\r\n this.selectedTravellerHotelData = this.pricingData.hotelList['default'];\r\n this.renderStory();\r\n }\r\n\r\n private renderStory() {\r\n this._svgSection = this._initSvgSection('svg-wrapper');\r\n this.activeStartSlide = 'screen-1';\r\n this.activeSlide = 'screen-1';\r\n // this.addClassToDom('slider-1', 'first-time-load', 'id');\r\n // console.log('activeSlide: ', this.activeSlide);\r\n setTimeout(() => {\r\n this.addClassToDom('slider-1', 'first-time-load', 'id');\r\n }, 3000);\r\n this.svgResize = this._svgSection.resize();\r\n setTimeout(() => {\r\n this._svgSection.screenOne.startAnimation(!this.animationStarted.screen1);\r\n this.animationStarted.screen1 = true;\r\n }, 100);\r\n }\r\n\r\n public setTravellerData() {\r\n this.selectedTravellerData = this.pricingData.travellerDetails[this.selectedTraveller];\r\n this.selectedTravellerHotelData = this.pricingData.hotelList[this.selectedTraveller];\r\n }\r\n\r\n public onFullPageSlideChangeStart(event) {\r\n this.previousTraversedSlide = this.activeStartSlide;\r\n if (this.previousActiveSlide.indexOf(event) < 0) {\r\n this.previousActiveSlide.push(this.activeStartSlide);\r\n } else {\r\n this.previousActiveSlide.splice(this.previousActiveSlide.indexOf(this.activeStartSlide), 1);\r\n }\r\n this.activeStartSlide = event;\r\n if ((this.screens.indexOf(this.previousTraversedSlide) - this.screens.indexOf(this.activeStartSlide)) < 0) {\r\n this.currentScrollDirection = 'forward';\r\n } else {\r\n this.currentScrollDirection = 'backward';\r\n }\r\n this.currentScreenIndex = this.clickActionScreensIndex[this.screens.indexOf(this.activeStartSlide)];\r\n this.lastActiveSlide = this.screens[this.screens.indexOf(event) - 1];\r\n const nextSlideIndex = ((this.screens.indexOf(event) + 1) > (this.screens.length - 1)) ? this.screens.indexOf(event) : (this.screens.indexOf(event) + 1);\r\n this.nextActiveSlide = this.screens[nextSlideIndex];\r\n // this._svgSection.changeScreen();\r\n // console.log('previousTraversedSlide: ', this.previousTraversedSlide);\r\n // console.log('activeStartSlide: ', this.activeStartSlide);\r\n if (!(['screen-1', 'screen-2'].includes(this.activeStartSlide))) {\r\n this._svgSection.commonLeftSection.checkAndSetDefaultTraveller();\r\n }\r\n\r\n if (this.activeStartSlide === 'screen-2') {\r\n this._svgSection.screenTwo.resetElements();\r\n } else if (this.activeStartSlide === 'screen-3') {\r\n this._svgSection.screenThree.resetElements();\r\n } else if (this.activeStartSlide === 'screen-4') {\r\n this._svgSection.screenFour.resetElements();\r\n } else if (this.activeStartSlide === 'screen-5') {\r\n this._svgSection.screenFive.resetElements();\r\n } else if (this.activeStartSlide === 'screen-6') {\r\n this._svgSection.screenSix.resetElements();\r\n } else if (this.activeStartSlide === 'screen-7') {\r\n this._svgSection.screenSeven.resetElements();\r\n }\r\n\r\n if (this.previousTraversedSlide === 'screen-2') {\r\n this._svgSection.screenTwo.climaxAnimation();\r\n } else if (this.previousTraversedSlide === 'screen-3') {\r\n this._svgSection.screenThree.climaxAnimation();\r\n } else if (this.previousTraversedSlide === 'screen-4') {\r\n this._svgSection.screenFour.climaxAnimation();\r\n } else if (this.previousTraversedSlide === 'screen-5') {\r\n this._svgSection.screenFive.climaxAnimation();\r\n } else if (this.previousTraversedSlide === 'screen-6') {\r\n this._svgSection.screenSix.climaxAnimation();\r\n } else if (this.previousTraversedSlide === 'screen-7') {\r\n this._svgSection.screenSeven.climaxAnimation();\r\n }\r\n\r\n if (['screen-1', 'screen-2', 'screen-6', 'screen-7'].includes(this.activeStartSlide)) {\r\n this.addStep = false;\r\n }\r\n }\r\n\r\n public onFullPageSlideChangeComplete(event) {\r\n // console.log('onFullPageSlideChangeComplete');\r\n this.activeSlide = event;\r\n\r\n this.scrollTo('scroll-wrapper', 'class', 0, 0);\r\n this._svgSection.screenOne.stopAnimation();\r\n this._svgSection.screenTwo.stopAnimation();\r\n this._svgSection.screenThree.stopAnimation();\r\n this._svgSection.screenFour.stopAnimation();\r\n this._svgSection.screenFive.stopAnimation();\r\n this._svgSection.screenSix.stopAnimation();\r\n this._svgSection.screenSeven.stopAnimation();\r\n\r\n\r\n if (['screen-3', 'screen-4', 'screen-5'].includes(this.activeSlide)) {\r\n setTimeout(() => {\r\n this.addStep = true;\r\n }, 2500);\r\n } else {\r\n this.addStep = false;\r\n }\r\n\r\n if (['screen-1', 'screen-7'].includes(this.activeSlide)) {\r\n this._svgSection.commonLeftSection.manageTravellersGroup();\r\n } else {\r\n this._svgSection.commonLeftSection.manageTravellersGroup(1);\r\n }\r\n // this._svgSection.manageScreenwiseAnimation.changeAnimation();\r\n\r\n switch (event) {\r\n case 'screen-1':\r\n this._svgSection.screenOne.startAnimation(!this.animationStarted.screen1);\r\n this.animationStarted.screen1 = true;\r\n break;\r\n case 'screen-2':\r\n this._svgSection.screenTwo.startAnimation(!this.animationStarted.screen2);\r\n this.animationStarted.screen2 = true;\r\n break;\r\n case 'screen-3':\r\n this._svgSection.screenThree.startAnimation(!this.animationStarted.screen3);\r\n this.animationStarted.screen3 = true;\r\n break;\r\n case 'screen-4':\r\n this._svgSection.screenFour.startAnimation(!this.animationStarted.screen4);\r\n this.animationStarted.screen4 = true;\r\n break;\r\n case 'screen-5':\r\n this._svgSection.screenFive.startAnimation(!this.animationStarted.screen5);\r\n this.animationStarted.screen5 = true;\r\n break;\r\n case 'screen-6':\r\n this._svgSection.screenSix.startAnimation(!this.animationStarted.screen6);\r\n this.animationStarted.screen6 = true;\r\n break;\r\n case 'screen-7':\r\n this._svgSection.screenSeven.startAnimation(!this.animationStarted.screen7);\r\n this.animationStarted.screen1 = true;\r\n break;\r\n }\r\n }\r\n\r\n private _initSvgSection(containerId) {\r\n const that = this;\r\n const container = d3.select('#' + containerId);\r\n const WIDTH = 1920;\r\n const HEIGHT = 969;\r\n // const HEIGHT_OFFSET = 969 / 1920;\r\n const svg = container.append('svg')\r\n .attr('width', WIDTH)\r\n .attr('height', HEIGHT)\r\n // .style('background', 'aliceblue')\r\n .on('click', function () {\r\n // console.log(d3.mouse(this));\r\n });\r\n\r\n const { resize, heightAspect, widthAspect } = this._responsivefy(svg, true);\r\n\r\n const defs = svg.append('defs')\r\n .html(` \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n `);\r\n\r\n const line = d3.svg.line()\r\n .x((d) => d[0])\r\n .y((d) => d[1]);\r\n\r\n const addDashedLine = (group, lineData, className, strokeColor = '#000000', strokeDash = '8, 5', strokeWidth = 1, alreadyDraw = true) => {\r\n return group.append('path')\r\n .datum(lineData)\r\n .attr('d', line)\r\n .attr('stroke', strokeColor)\r\n .attr('class', `animate ${className}`)\r\n .attr('stroke-width', strokeWidth)\r\n .attr('stroke-dasharray', function (d: any) {\r\n d.pathLength = d3.select(this).node().getTotalLength();\r\n const dashing = strokeDash;\r\n const dashLength =\r\n dashing\r\n .split(/[\\s,]/)\r\n .map(function (a) { return parseFloat(a) || 0 })\r\n .reduce(function (a, b) { return a + b; });\r\n\r\n const dashCount = Math.ceil(d.pathLength / dashLength);\r\n // console.log('dashLength', dashLength);\r\n // console.log('dashCount', dashCount);\r\n const newDashes = new Array(dashCount).join(dashing + ' ');\r\n const dashArray = newDashes + ' 1 , ' + (d.pathLength + 5);\r\n return dashArray;\r\n })\r\n .attr('stroke-dashoffset', function (d: any) {\r\n return (alreadyDraw ? 0 : d.pathLength);\r\n })\r\n // .attr('stroke-dashoffset', (d: any) => 0)\r\n .attr('fill', 'none');\r\n };\r\n\r\n const addLine = (group, pathData, selector, key, strokeColor = '#000000', strokeWidth = 1, alreadyDraw = true) => {\r\n return group.append('path')\r\n .datum(pathData)\r\n .attr('d', line)\r\n .attr('class', `animate ${selector}`)\r\n .attr('id', `${selector}-${key}`)\r\n .attr('stroke', strokeColor)\r\n .attr('stroke-width', strokeWidth)\r\n // .attr('stroke-dasharray', function (d: any) {\r\n // d.pathLength = d3.select(this).node().getTotalLength();\r\n // return d.pathLength;\r\n // })\r\n // .attr('stroke-dashoffset', function (d: any) {\r\n // return (alreadyDraw ? 0 : d.pathLength);\r\n // })\r\n .attr('fill', 'none');\r\n };\r\n\r\n const addRect = (group, data) => {\r\n return group.append('rect')\r\n .datum(data)\r\n .attr('class', 'class' in data ? data.class : '')\r\n .attr('id', 'id' in data ? data.id : '')\r\n .attr('x', data.x)\r\n .attr('y', data.y)\r\n .attr('width', data.width)\r\n .attr('height', data.height)\r\n .attr('fill', data.fill)\r\n .attr('rx', 'rx' in data ? data.rx : 0)\r\n .style('opacity', 'o' in data ? data.o : 1);\r\n };\r\n\r\n const createImageUsingData = (group, data: { id: string, src: string, height: number, width: number, x: number, y: number, s?: number, o?: number, class?: string, [k: string]: any, finalX?: number, finalY?: number, textStyle?: any }) => {\r\n return group\r\n .append('image')\r\n .datum(data)\r\n .attr('id', (d) => d.id)\r\n .attr('xlink:href', (d) => d.src)\r\n .attr('class', (d) => `${(d.class || d.id)} animate`)\r\n .attr('height', (d) => d.height)\r\n .attr('width', (d) => d.width)\r\n .attr('transform', (d) => `translate(${d.x}, ${d.y}) scale(${(data.s !== void 0) ? data.s : 1})`)\r\n .style('opacity', (d) => (d.o !== void (0)) ? d.o : 1)\r\n .style('textStyle' in data ? data.textStyle : {});\r\n };\r\n\r\n const createTextUsingData = (group, data: { wholeText: any, id: string, x: number, y: number, dy: string, s?: number, o?: number, class?: string, textStyle?: object, finalX?: number, finalY?: number }) => {\r\n const text = group.append('text');\r\n text\r\n .datum(data)\r\n .style('textStyle' in data ? data.textStyle : {})\r\n .attr({\r\n 'class': (d) => d.class !== void (0) ? d.class : '',\r\n 'id': (d) => d.id,\r\n 'transform': (d) => `translate(${d.x},${d.y})`,\r\n })\r\n .style({\r\n 'opacity': 'o' in data ? data.o : 1\r\n });\r\n\r\n data.wholeText.forEach((textPart, index) => {\r\n text.append('tspan')\r\n .attr({\r\n 'dy': 'dy' in textPart ? textPart.dy : data.dy,\r\n 'x': 'x' in textPart ? textPart.x : '',\r\n 'y': 'y' in textPart ? textPart.y : ''\r\n })\r\n .style('textStyle' in textPart ? textPart.textStyle : {})\r\n .text(textPart.text)\r\n });\r\n\r\n return text;\r\n }\r\n\r\n const createCenterBox = (group, data) => {\r\n const centerWraperGroup = group.append('g')\r\n const svgText = createTextUsingData(centerWraperGroup, data.titleText);\r\n\r\n data.imageData.forEach(el => {\r\n createImageUsingData(centerWraperGroup, {\r\n id: el.id,\r\n height: el.height,\r\n width: el.width,\r\n class: el.class,\r\n src: el.src,\r\n x: el.x,\r\n y: el.y,\r\n o: 'o' in el ? el.o : 1,\r\n s: 's' in el ? el.s : 1,\r\n finalX: 'finalX' in el ? el.finalX : 0,\r\n finalY: 'finalY' in el ? el.finalY : 0\r\n })\r\n });\r\n\r\n\r\n return centerWraperGroup;\r\n }\r\n\r\n const dataGroup = svg.append('g')\r\n .attr('id', 'svg-data')\r\n .attr('class', 'svg-data');\r\n\r\n const updateIcons = (group, attributeName = 'hotel', cb = function () { }) => {\r\n // console.log();\r\n const attributes = { ...that.pricingData.travellerDetails[that.selectedTraveller] };\r\n // console.log(attributes);\r\n const totalPreferrence = attributes.attributes[attributeName].reduce((total, obj) => {\r\n const isPreferredCount = obj.isPreffered && obj.isConsidered ? 1 : 0;\r\n return total + isPreferredCount\r\n }, 0);\r\n let count = 0, tempCount = 0;\r\n attributes.attributes[attributeName].map((v, index, arr) => {\r\n // console.log(v)\r\n group.selectAll(`.${v.id}`)\r\n .each(function () {\r\n const selected = d3.select(this)\r\n // selected.attr('xlink:href', `assets/images/adaptive-pricing/${v.id}_grey.svg`);\r\n if (v.isPreffered) {\r\n selected\r\n .transition()\r\n .delay(80 * tempCount)\r\n .duration(100)\r\n .style('opacity', 1)\r\n .attr('xlink:href', `assets/images/adaptive-pricing/${v.id}_red.svg`)\r\n .call(endAll, function () {\r\n count++;\r\n if (count === totalPreferrence) {\r\n // console.log(\"Last icon updated\");\r\n cb();\r\n }\r\n });\r\n tempCount++;\r\n }\r\n });\r\n });\r\n }\r\n\r\n function endAll(tran, callback) {\r\n if ((typeof callback) !== 'function') { throw new Error('Wrong callback in endall'); }\r\n if (tran.size() === 0) { callback(); }\r\n let n = 0;\r\n tran.each(() => { ++n; })\r\n .each('end', function (e) {\r\n if (--n === 0) { callback.apply(this, arguments); }\r\n });\r\n }\r\n\r\n const showText = (group, className, delay = 0, duration = 1000, cb = function () { }) => {\r\n group.selectAll(`.${className}`)\r\n .transition()\r\n .delay(d => 'delay' in d ? d.delay : delay)\r\n .duration(duration)\r\n .style('opacity', 1)\r\n .attr('transform', (d) => `translate(${d.finalX}, ${d.finalY})`)\r\n .call(endAll, cb)\r\n }\r\n\r\n const hideText = (group, className, delay = 0, duration = 1000, cb = function () { }) => {\r\n group.selectAll(`.${className}`)\r\n .transition()\r\n .delay(d => 'delay' in d ? d.delay : delay)\r\n .duration(d => 'duration' in d ? d.duration : duration)\r\n .style('opacity', 0)\r\n .attr('transform', (d) => `translate(${d.x}, ${d.y})`)\r\n .call(endAll, cb)\r\n }\r\n\r\n const operateLine = (group, className, operation: 'draw' | 'hide', delay = 0, duration = 1000, cb = function () { }) => {\r\n group.selectAll(`.${className}`)\r\n .style('opacity', operation === 'hide' ? 0 : 1)\r\n .transition()\r\n .delay(d => 'delay' in d ? d.delay : delay)\r\n .duration(d => 'duration' in d ? d.duration : duration)\r\n .attr('stroke-dashoffset', d => operation === 'hide' ? d.pathLength : 0)\r\n .call(endAll, cb)\r\n }\r\n\r\n const showImage = (group, className, delay = 0, duration = 1000, cb = function () { }) => {\r\n group.selectAll(`.${className}`)\r\n .transition()\r\n .delay(d => 'delay' in d ? d.delay : delay)\r\n .duration(d => 'duration' in d ? d.duration : duration)\r\n .attr('transform', (d: any) => `translate(${d.finalX}, ${d.finalY}) scale(1)`)\r\n .call(endAll, cb)\r\n }\r\n\r\n const hideImage = (group, className, delay = 0, duration = 1000, cb = function () { }) => {\r\n group.selectAll(`.${className}`)\r\n .transition()\r\n .delay(d => 'delay' in d ? d.delay : delay)\r\n .duration(d => 'duration' in d ? d.duration : duration)\r\n .attr('transform', (d: any) => `translate(${d.x}, ${d.y}) scale(0)`)\r\n .call(endAll, cb)\r\n }\r\n\r\n const showGroup = (group, className, delay = 0, duration = 1000, cb = function () { }) => {\r\n group.selectAll(`.${className}`)\r\n .transition()\r\n .delay(d => 'delay' in d ? d.delay : delay)\r\n .duration(d => 'duration' in d ? d.duration : duration)\r\n .attr('transform', (d: any) => `translate(${d.finalX}, ${d.finalY}) scale(1)`)\r\n .style('opacity', 1)\r\n .call(endAll, cb)\r\n }\r\n\r\n let baseImage = '';\r\n\r\n const image = dataGroup.append('image')\r\n .attr('xlink:href', baseImage)\r\n .attr('class', 'base-image-group')\r\n .attr('height', 969)\r\n .attr('width', 1920)\r\n .attr('id', 'img');\r\n\r\n const screenSeven = (() => {\r\n const currentProcess = dataGroup.append('g')\r\n .attr('id', 'screen-7-group')\r\n .attr('class', 'screen-7-group')\r\n .style('opacity', 1);\r\n\r\n const caseStudyGroup = currentProcess.append('g')\r\n .attr('id', 'case-study-group')\r\n .attr('class', 'case-study-group');\r\n\r\n const benefitsGroup = currentProcess.append('g')\r\n .attr('id', 'benefits-group')\r\n .attr('class', 'benefits-group')\r\n .attr('transform', 'translate(-50,0)');\r\n\r\n // TODO LEFT SECTION\r\n const dataSummaryData = {\r\n titleContent: {\r\n background: {\r\n id: 'data-summary-background-screen-7',\r\n width: 244,\r\n height: 165,\r\n src: 'assets/images/adaptive-pricing/text_box_4.svg',\r\n x: 125,\r\n y: 530.5,\r\n finalX: 3,\r\n finalY: 448,\r\n class: 'screen-7 data-summary-bg background animate screen-7-images',\r\n s: 0,\r\n o: 1\r\n },\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Data',\r\n dy: '0em',\r\n x: 0\r\n }, {\r\n text: 'Summary',\r\n dy: '1.2em',\r\n x: 0\r\n }],\r\n id: 'screen-data-summary-title-text-screen-7',\r\n class: 'screen-data-summary-title-text-screen-7 screen-7-text',\r\n x: 126,\r\n y: 526,\r\n dy: '0em',\r\n finalX: 126,\r\n finalY: 526,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 24,\r\n 'fill': '#3f3d56',\r\n 'font-weight': 400,\r\n },\r\n }\r\n },\r\n dataContent: [\r\n {\r\n background: {\r\n id: 'pie-bg-1',\r\n width: 277,\r\n height: 256,\r\n src: 'assets/images/adaptive-pricing/pie_bg_1.svg',\r\n x: 142,\r\n y: 236,\r\n finalX: 142,\r\n finalY: 236,\r\n class: 'screen-7 pie background pie-background animate screen-7-images',\r\n s: 1,\r\n o: 1\r\n },\r\n text: {\r\n wholeText: [\r\n {\r\n text: '169K',\r\n dy: '0em',\r\n x: 0,\r\n y: 0,\r\n textStyle: {\r\n 'font-size': 40,\r\n }\r\n },\r\n {\r\n text: 'Guest',\r\n dy: '0em',\r\n x: 0,\r\n y: 25,\r\n textStyle: {\r\n 'font-size': 16,\r\n }\r\n },\r\n {\r\n text: 'bookings',\r\n dy: '0em',\r\n x: 0,\r\n y: 44,\r\n textStyle: {\r\n 'font-size': 16,\r\n }\r\n }\r\n ],\r\n id: 'pie-1-text',\r\n class: 'pie-1-text screen-7-text',\r\n x: 223,\r\n y: 350,\r\n dy: '0em',\r\n finalX: 223,\r\n finalY: 350,\r\n o: 1,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'fill': '#FFFFFF',\r\n 'font-weight': 400,\r\n },\r\n }\r\n },\r\n {\r\n background: {\r\n id: 'pie-bg-2',\r\n width: 255,\r\n height: 278,\r\n src: 'assets/images/adaptive-pricing/pie_bg_2.svg',\r\n x: 218,\r\n y: 375,\r\n finalX: 218,\r\n finalY: 375,\r\n class: 'screen-7 pie background pie-background animate screen-7-images',\r\n s: 1,\r\n o: 1\r\n },\r\n text: {\r\n wholeText: [\r\n {\r\n text: '39K',\r\n dy: '0em',\r\n x: 0,\r\n y: 0,\r\n textStyle: {\r\n 'font-size': 40,\r\n }\r\n },\r\n {\r\n text: 'Unique hotels',\r\n dy: '0em',\r\n x: 0,\r\n y: 25,\r\n textStyle: {\r\n 'font-size': 16,\r\n }\r\n },\r\n {\r\n text: 'listed',\r\n dy: '0em',\r\n x: 0,\r\n y: 44,\r\n textStyle: {\r\n 'font-size': 16,\r\n }\r\n }\r\n ],\r\n id: 'pie-2-text',\r\n class: 'pie-2-text screen-7-text',\r\n x: 305,\r\n y: 529,\r\n dy: '0em',\r\n finalX: 305,\r\n finalY: 529,\r\n o: 1,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'fill': '#FFFFFF',\r\n 'font-weight': 400,\r\n },\r\n }\r\n },\r\n {\r\n background: {\r\n id: 'pie-bg-3',\r\n width: 255,\r\n height: 275,\r\n src: 'assets/images/adaptive-pricing/pie_bg_3.svg',\r\n x: 135,\r\n y: 592,\r\n finalX: 135,\r\n finalY: 592,\r\n class: 'screen-7 pie background pie-background animate screen-7-images',\r\n s: 1,\r\n o: 1\r\n },\r\n text: {\r\n wholeText: [\r\n {\r\n text: '26',\r\n dy: '0em',\r\n x: 0,\r\n y: 0,\r\n textStyle: {\r\n 'font-size': 40,\r\n }\r\n },\r\n {\r\n text: 'Hotels',\r\n dy: '0em',\r\n x: 0,\r\n y: 25,\r\n textStyle: {\r\n 'font-size': 16,\r\n }\r\n },\r\n {\r\n text: 'alternatives',\r\n dy: '0em',\r\n x: 0,\r\n y: 44,\r\n textStyle: {\r\n 'font-size': 16,\r\n }\r\n }\r\n ],\r\n id: 'pie-3-text',\r\n class: 'pie-3-text screen-7-text',\r\n x: 242,\r\n y: 699,\r\n dy: '0em',\r\n finalX: 242,\r\n finalY: 699,\r\n o: 1,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'fill': '#FFFFFF',\r\n 'font-weight': 400,\r\n },\r\n }\r\n },\r\n ]\r\n };\r\n\r\n const impactData = {\r\n titleContent: {\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Impact'\r\n }],\r\n id: 'screen-impact-title-text-screen-7',\r\n class: 'screen-impact-title-text-screen-7 screen-7-text',\r\n x: 521,\r\n y: 250,\r\n dy: '0em',\r\n finalX: 521,\r\n finalY: 260,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 24,\r\n 'fill': '#3f3d56',\r\n 'font-weight': 400,\r\n },\r\n }\r\n },\r\n dataContent: [\r\n {\r\n background: {\r\n id: 'impact-list-bg-1',\r\n width: 500,\r\n height: 223,\r\n src: 'assets/images/adaptive-pricing/impact_list_bg_box.svg',\r\n x: 438,\r\n y: 300,\r\n finalX: 438,\r\n finalY: 300,\r\n class: 'screen-7 impact-list background impact-list-background animate screen-7-images',\r\n s: 1,\r\n o: 1\r\n },\r\n text: [\r\n {\r\n wholeText: [\r\n {\r\n text: '14%',\r\n dy: '0em',\r\n x: 0,\r\n y: 0,\r\n }\r\n ],\r\n id: 'impact-list-value-1-text',\r\n class: 'impact-list-value-1-text screen-7-text',\r\n x: 509,\r\n y: 420.5,\r\n dy: '0em',\r\n finalX: 509,\r\n finalY: 420.5,\r\n o: 1,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'fill': '#D6781E',\r\n 'font-weight': 400,\r\n 'font-size': 32,\r\n },\r\n },\r\n {\r\n wholeText: [\r\n {\r\n text: 'Increased in booking conversion',\r\n dy: '0em',\r\n x: 0,\r\n y: 0,\r\n },\r\n {\r\n text: 'rate in top 10 recommended',\r\n dy: '0em',\r\n x: 0,\r\n y: 25,\r\n },\r\n {\r\n text: 'properties from the incumbent',\r\n dy: '0em',\r\n x: 0,\r\n y: 50,\r\n },\r\n {\r\n text: 'ranking algorithm',\r\n dy: '0em',\r\n x: 0,\r\n y: 75,\r\n }\r\n ],\r\n id: 'impact-list-label-1-text',\r\n class: 'impact-list-label-1-text screen-7-text',\r\n x: 601,\r\n y: 379,\r\n dy: '0em',\r\n finalX: 601,\r\n finalY: 379,\r\n o: 1,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'fill': '#000000',\r\n 'font-weight': 400,\r\n 'font-size': 16,\r\n },\r\n }\r\n ]\r\n },\r\n {\r\n background: {\r\n id: 'impact-list-bg-2',\r\n width: 500,\r\n height: 223,\r\n src: 'assets/images/adaptive-pricing/impact_list_bg_box.svg',\r\n x: 438,\r\n y: 312,\r\n finalX: 438,\r\n finalY: 312,\r\n class: 'screen-7 impact-list background impact-list-background animate screen-7-images',\r\n s: 1,\r\n o: 1\r\n },\r\n text: [\r\n {\r\n wholeText: [\r\n {\r\n text: '19%',\r\n dy: '0em',\r\n x: 0,\r\n y: 0,\r\n }\r\n ],\r\n id: 'impact-list-value-2-text',\r\n class: 'impact-list-value-2-text screen-7-text',\r\n x: 509,\r\n y: 434,\r\n dy: '0em',\r\n finalX: 509,\r\n finalY: 434,\r\n o: 1,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'fill': '#D6781E',\r\n 'font-weight': 400,\r\n 'font-size': 32,\r\n },\r\n },\r\n {\r\n wholeText: [\r\n {\r\n // text: 'uplift in NDCG value from',\r\n text: 'Uplift in engagement via booked/',\r\n dy: '0em',\r\n x: 0,\r\n y: 0,\r\n },\r\n {\r\n // text: 'the incumbent ranking',\r\n text: 'clicked properties, as measured using',\r\n dy: '0em',\r\n x: 0,\r\n y: 25,\r\n },\r\n {\r\n // text: 'algorithm',\r\n text: 'NDCG (Normalized Discounted',\r\n dy: '0em',\r\n x: 0,\r\n y: 50,\r\n },\r\n {\r\n // text: 'algorithm',\r\n text: 'Cumulative Gain) a metric measuring',\r\n dy: '0em',\r\n x: 0,\r\n y: 75,\r\n },\r\n {\r\n // text: 'algorithm',\r\n text: 'goodness of recommendations',\r\n dy: '0em',\r\n x: 0,\r\n y: 100,\r\n }\r\n ],\r\n id: 'impact-list-label-2-text',\r\n class: 'impact-list-label-2-text screen-7-text',\r\n x: 601,\r\n y: 379,\r\n dy: '0em',\r\n finalX: 601,\r\n finalY: 379,\r\n o: 1,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'fill': '#000000',\r\n 'font-weight': 400,\r\n 'font-size': 16,\r\n },\r\n }\r\n ]\r\n },\r\n {\r\n background: {\r\n id: 'impact-list-bg-3',\r\n width: 500,\r\n height: 223,\r\n src: 'assets/images/adaptive-pricing/impact_list_bg_box.svg',\r\n x: 438,\r\n y: 320,\r\n finalX: 438,\r\n finalY: 320,\r\n class: 'screen-7 impact-list background impact-list-background animate screen-7-images',\r\n s: 1,\r\n o: 1\r\n },\r\n text: [\r\n {\r\n wholeText: [\r\n {\r\n text: '$54K',\r\n dy: '0em',\r\n x: 0,\r\n y: 0,\r\n }\r\n ],\r\n id: 'impact-list-value-3-text',\r\n class: 'impact-list-value-3-text screen-7-text',\r\n x: 509,\r\n y: 444,\r\n dy: '0em',\r\n finalX: 509,\r\n finalY: 444,\r\n o: 1,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'fill': '#D6781E',\r\n 'font-weight': 400,\r\n 'font-size': 32,\r\n },\r\n },\r\n {\r\n wholeText: [\r\n {\r\n text: 'Average excess potential for the',\r\n dy: '0em',\r\n x: 0,\r\n y: 0,\r\n },\r\n {\r\n text: 'business bookings (difference of',\r\n dy: '0em',\r\n x: 0,\r\n y: 25,\r\n },\r\n {\r\n text: 'Guest’s assessed WTP and the',\r\n dy: '0em',\r\n x: 0,\r\n y: 50,\r\n },\r\n {\r\n text: 'booked property price) for engaging in',\r\n dy: '0em',\r\n x: 0,\r\n y: 75,\r\n },\r\n {\r\n text: 'better cross-sell/up-sell',\r\n dy: '0em',\r\n x: 0,\r\n y: 100,\r\n }\r\n ],\r\n id: 'impact-list-label-3-text',\r\n class: 'impact-list-label-3-text screen-7-text',\r\n x: 601,\r\n y: 389,\r\n dy: '0em',\r\n finalX: 601,\r\n finalY: 389,\r\n o: 1,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'fill': '#000000',\r\n 'font-weight': 400,\r\n 'font-size': 16,\r\n },\r\n }\r\n ]\r\n },\r\n ],\r\n dataGroupContent: [\r\n {\r\n x: 0,\r\n y: -100,\r\n finalX: 0,\r\n finalY: -50,\r\n s: 1,\r\n o: 0\r\n },\r\n {\r\n x: 0,\r\n y: 0,\r\n finalX: 0,\r\n finalY: 120,\r\n s: 1,\r\n o: 0\r\n },\r\n {\r\n x: 0,\r\n y: 132,\r\n finalX: 0,\r\n finalY: 295,\r\n s: 1,\r\n o: 0\r\n },\r\n ]\r\n }\r\n const dataSummarySection = caseStudyGroup.append('g')\r\n .attr({\r\n 'class': 'data-summary-group',\r\n 'id': 'data-summary-group',\r\n });\r\n\r\n // Data-Summary SECTION\r\n dataSummaryData.dataContent.forEach((content, index) => {\r\n const group = dataSummarySection\r\n .append('g')\r\n .datum({\r\n x: 126,\r\n y: 526,\r\n finalX: 0,\r\n finalY: 0,\r\n s: 0,\r\n o: 0\r\n })\r\n .attr({\r\n 'class': `pie-group pie-group-${index}`,\r\n 'id': `pie-group-${index}`,\r\n 'transform': (d: any) => `translate(${d.x}, ${d.y}) scale(${d.s})`\r\n })\r\n .style('opacity', (d: any) => d.o);\r\n createImageUsingData(group, content.background);\r\n createTextUsingData(group, content.text);\r\n });\r\n\r\n createImageUsingData(dataSummarySection, dataSummaryData.titleContent.background);\r\n createTextUsingData(dataSummarySection, dataSummaryData.titleContent.text);\r\n\r\n const impactSection = caseStudyGroup.append('g')\r\n .attr({\r\n 'class': 'impact-group',\r\n 'id': 'impact-group',\r\n });\r\n\r\n // Impact SECTION\r\n createTextUsingData(impactSection, impactData.titleContent.text);\r\n impactData.dataContent.reverse().forEach((content, index, arr) => {\r\n const key = arr.length - 1 - index;\r\n const group = impactSection\r\n .append('g')\r\n .datum(impactData.dataGroupContent[key])\r\n .attr({\r\n 'class': `impact-list-group impact-list-group-${key}`,\r\n 'id': `impact-list-group-${key}`,\r\n 'transform': (d: any) => `translate(${d.x}, ${d.y}) scale(${d.s})`\r\n })\r\n .style('opacity', (d: any) => d.o);\r\n createImageUsingData(group, content.background);\r\n createTextUsingData(group, content.text[0]);\r\n createTextUsingData(group, content.text[1]);\r\n });\r\n\r\n\r\n // TODO RIGHT SECTION\r\n const benefitListGroup = benefitsGroup.append('g')\r\n .attr('id', 'benefit-list-group')\r\n .attr('class', 'benefit-list-group');\r\n\r\n const benefitsListData = {\r\n lines: [\r\n [[1083, 492.5], [1083, 242]],\r\n [[1083, 492.5], [1083, 741]],\r\n // [[1029, 246], [1051, 246]],\r\n [[1083, 242], [1143, 242]],\r\n [[1083, 407], [1143, 407]],\r\n [[1083, 571], [1143, 571]],\r\n [[1083, 741], [1143, 741]],\r\n ],\r\n listData: {\r\n background: {\r\n id: 'benefit-list-background-rect-screen-7',\r\n width: 0,\r\n height: 506,\r\n finalWidth: 777,\r\n fill: 'url(#linear-gradient-white)',\r\n x: 1098,\r\n y: 194,\r\n // finalX: 1244,\r\n // finalY: 156,\r\n rx: 30,\r\n class: 'screen-7 benefit-list benefit-list-background animate',\r\n s: 1,\r\n o: 1\r\n },\r\n textData: [\r\n {\r\n wholeText: [\r\n {\r\n text: 'Pre-check in: Ability to bundle marketing offers and engage in',\r\n // textStyle: {\r\n // 'font-weight': 500,\r\n // }\r\n },\r\n {\r\n text: ' ancillary or room based cross-sell/up-sell',\r\n x: -5,\r\n dy: '1.3em',\r\n }\r\n ],\r\n id: 'benefit-list-text-1-screen-7',\r\n class: 'benefit-list-text-1-screen-7 screen-7-text',\r\n x: 1145,\r\n y: 193,\r\n dy: '0em',\r\n finalX: 1245,\r\n finalY: 193,\r\n o: 0,\r\n textStyle: {\r\n // 'text-anchor': 'middle',\r\n 'font-size': 20,\r\n 'font-weight': 400,\r\n 'fill': '#3f3d56'\r\n }\r\n },\r\n {\r\n wholeText: [\r\n {\r\n text: 'Post-check in: Targeting curated ancillaries and concierge services',\r\n // textStyle: {\r\n // 'font-weight': 500,\r\n // }\r\n },\r\n // {\r\n // text: ' creative cross-sell/up-sell',\r\n // x: -5,\r\n // dy: '1.3em',\r\n // }\r\n ],\r\n id: 'benefit-list-text-2-screen-7',\r\n class: 'benefit-list-text-2-screen-7 screen-7-text',\r\n x: 1145,\r\n y: 354,\r\n dy: '0em',\r\n finalX: 1245,\r\n finalY: 354,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'left',\r\n 'font-size': 20,\r\n 'font-weight': 400,\r\n 'fill': '#3f3d56'\r\n }\r\n },\r\n {\r\n wholeText: [\r\n {\r\n text: 'Framework for evolving marketing and pricing strategy towards',\r\n // textStyle: {\r\n // 'font-weight': 500,\r\n // }\r\n },\r\n {\r\n text: ' Attribute-Based Selling model',\r\n x: -5,\r\n dy: '1.3em',\r\n }\r\n ],\r\n id: 'benefit-list-text-3-screen-7',\r\n class: 'benefit-list-text-3-screen-7 screen-7-text',\r\n x: 1145,\r\n y: 524,\r\n dy: '0em',\r\n finalX: 1245,\r\n finalY: 524,\r\n o: 0,\r\n textStyle: {\r\n // 'text-anchor': 'middle',\r\n 'font-size': 20,\r\n 'font-weight': 400,\r\n 'fill': '#3f3d56'\r\n }\r\n },\r\n {\r\n wholeText: [\r\n {\r\n text: 'More personalized offerings and better digital brand engagement,',\r\n // textStyle: {\r\n // 'font-weight': 500,\r\n // }\r\n },\r\n {\r\n text: ' thus an enhanced customer experience',\r\n x: -5,\r\n dy: '1.3em',\r\n }\r\n ],\r\n id: 'benefit-list-text-4-screen-7',\r\n class: 'benefit-list-text-4-screen-7 screen-7-text',\r\n x: 1145,\r\n y: 690,\r\n dy: '0em',\r\n finalX: 1245,\r\n finalY: 690,\r\n o: 0,\r\n textStyle: {\r\n // 'text-anchor': 'middle',\r\n 'font-size': 20,\r\n 'font-weight': 400,\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n ]\r\n }\r\n };\r\n\r\n // createImageUsingData(benefitListGroup, { ...benefitsListData.titleBackgroundData.imageData[0] });\r\n // createTextUsingData(benefitListGroup, { ...benefitsListData.titleBackgroundData.titleText });\r\n // addRect(benefitListGroup, { ...benefitsListData.listData.background });\r\n benefitsListData.lines.forEach((el, i) => {\r\n let index = i;\r\n if (index === 0 || index === 1) {\r\n index = 0;\r\n } else {\r\n index = index - 1;\r\n }\r\n addDashedLine(benefitListGroup, el, 'list-line benefit-list-line-' + index, '#C94573', '4, 3', 1, false);\r\n // addLine(benefitListGroup, el, 'list-line benefit-list-line-', index);\r\n });\r\n\r\n benefitsListData.listData.textData.forEach((el, i) => {\r\n const textGroup = benefitListGroup.append('g')\r\n\r\n textGroup\r\n .datum({ ...el })\r\n .attr('class', 'benefit-list-text-group-' + (i + 1) + '-screen-7');\r\n\r\n const backgroundData = { ...benefitsListData.listData.background };\r\n\r\n backgroundData.id = `benefit-list-text-background-${(i + 1)}-screen-7`;\r\n backgroundData.x = el.x;\r\n backgroundData.y = el.y;\r\n backgroundData.height = 100;\r\n backgroundData.class += ` benefit-list-text-background-${(i + 1)}-screen-7`;\r\n\r\n addRect(textGroup, { ...backgroundData });\r\n const text = createTextUsingData(textGroup, { ...el, finalX: (el.finalX - 43) });\r\n text.datum({ ...el, finalX: (el.finalX - 43), y: el.y + ((100 - text.node().getBBox().height) / 2), finalY: el.y + ((100 - text.node().getBBox().height) / 2) });\r\n text.style('dominant-baseline', 'text-before-edge');\r\n text.attr('transform', (d: any) => `translate(${d.x} , ${(el.y + ((100 - text.node().getBBox().height) / 2))})`);\r\n });\r\n\r\n const screen7LeftSection = currentProcess.append('circle')\r\n .attr({\r\n 'cx': 1030,\r\n 'cy': 320,\r\n 'r': 5,\r\n // 'fill': 'black',\r\n 'fill': 'none',\r\n });\r\n\r\n function showList(group, className, startIndex, endIndex, cb) {\r\n operateLine(group, className + '-list-line-' + startIndex, 'draw', 0, 100, function () {\r\n group.select('.' + className + '-list-text-background-' + startIndex + '-screen-7')\r\n .transition()\r\n .delay(0)\r\n .duration(250)\r\n .attr('width', (d: any) => d.finalWidth)\r\n .call(endAll, function () {\r\n showText(group, className + '-list-text-' + startIndex + '-screen-7', 0, 200, function () {\r\n if (startIndex <= endIndex) {\r\n startIndex++;\r\n showList(group, className, startIndex, endIndex, cb);\r\n } else {\r\n cb();\r\n }\r\n })\r\n })\r\n\r\n })\r\n }\r\n\r\n function benefitAnimation(group, className, endIndex, cb = function () { }) {\r\n // showImage(group, 'benefits-background-' + className + '-title-bg', 0, 300, function () {\r\n // showText(group, 'benefits-' + className + '-title-screen-7', 0, 100, function () {\r\n operateLine(group, className + '-list-line-0', 'draw', 0, 300, function () {\r\n showList(group, className, 1, endIndex, cb);\r\n })\r\n // })\r\n // })\r\n }\r\n\r\n function initiateAnimation() {\r\n const htmlDelayValue = 500;\r\n showImage(dataSummarySection, 'data-summary-bg', htmlDelayValue, 300, function () {\r\n showText(dataSummarySection, 'screen-data-summary-title-text-screen-7', 0, 100, function () {\r\n showGroup(dataSummarySection, 'pie-group-0', 50, 250, function () {\r\n showGroup(dataSummarySection, 'pie-group-1', 50, 250, function () {\r\n showGroup(dataSummarySection, 'pie-group-2', 50, 250, function () {\r\n showText(impactSection, 'screen-impact-title-text-screen-7', 100, 100, function () {\r\n showGroup(impactSection, 'impact-list-group-0', 50, 250, function () {\r\n showGroup(impactSection, 'impact-list-group-1', 50, 250, function () {\r\n showGroup(impactSection, 'impact-list-group-2', 50, 250, function () {\r\n // // TODO class add remaining\r\n that.addClassToDom('benefit-right-section', 'benefit-active');\r\n benefitListGroup\r\n .transition()\r\n .delay(htmlDelayValue)\r\n .duration(0)\r\n .call(endAll, function () {\r\n benefitAnimation(benefitListGroup, 'benefit', benefitsListData.listData.textData.length + 1, function () {\r\n });\r\n });\r\n });\r\n });\r\n });\r\n });\r\n });\r\n });\r\n });\r\n });\r\n });\r\n }\r\n\r\n return {\r\n startAnimation(isFirst = false) {\r\n // // console.log('screen-7 startAnimation');\r\n // baseImage = '/assets/images/adaptive-pricing/7.png';\r\n // image.attr('xlink:href', baseImage);\r\n currentProcess.style('opacity', 1);\r\n if (isFirst) {\r\n initiateAnimation();\r\n }\r\n that.onAnimationEnd();\r\n },\r\n climaxAnimation() {\r\n currentProcess\r\n .transition()\r\n .duration(300)\r\n .style('opacity', 0);\r\n },\r\n resetElements() {\r\n\r\n },\r\n stopAnimation() {\r\n // currentProcess.interrupt();\r\n currentProcess.style('opacity', 0);\r\n },\r\n groups: {\r\n screen7LeftSection\r\n }\r\n }\r\n })();\r\n\r\n const screenOne = (() => {\r\n const currentProcess = dataGroup.append('g')\r\n .attr('id', 'screen-1-group')\r\n .attr('class', 'screen-1-group')\r\n .style('opacity', 1);\r\n\r\n return {\r\n startAnimation(isFirst = false) {\r\n // console.log('screen-1 startAnimation');\r\n // baseImage = '';\r\n // baseImage = '/assets/images/adaptive-pricing/1.png';\r\n // image.attr('xlink:href', baseImage);\r\n that.onAnimationEnd();\r\n commonLeftSection.manageTravellersGroup();\r\n },\r\n stopAnimation() {\r\n // currentProcess.interrupt();\r\n currentProcess.style('opacity', 0);\r\n }\r\n }\r\n })();\r\n\r\n const screenTwo = (() => {\r\n const currentProcess = dataGroup.append('g')\r\n .attr('id', 'screen-2-group')\r\n .attr('class', 'screen-2-group')\r\n .style('opacity', 0);\r\n\r\n const travelLeftLineGroup = currentProcess.append('g')\r\n .attr('class', 'travel-lines-screen-2');\r\n\r\n const travelLeftLines = [{\r\n line: [[293, 318], [378, 320], [426, 542], [472, 542]],\r\n type: 'solo'\r\n }, {\r\n line: [[292, 498], [378, 498], [426, 542], [472, 542]],\r\n type: 'business'\r\n }, {\r\n line: [[291, 673], [377, 673], [426, 542], [472, 542]],\r\n type: 'couple'\r\n }, {\r\n line: [[291, 845], [378, 845], [426, 542], [472, 542]],\r\n type: 'group'\r\n }];\r\n\r\n travelLeftLines.forEach((data, index) => {\r\n // console.log(data);\r\n const line = addDashedLine(travelLeftLineGroup, data.line, `screen-2 travel-line ${data.type}`, '#65617d', '5,4');\r\n line.attr('stroke-dashoffset', d => d.pathLength);\r\n });\r\n\r\n const centerLeftLineGroup = currentProcess.append('g')\r\n .attr('class', 'center-left-lines-screen-2');\r\n\r\n const centerLeftLines = [{\r\n line: [[472, 542], [472, 476], [505, 447]],\r\n type: 'top'\r\n }, {\r\n line: [[472, 542], [472, 612], [506, 648]],\r\n type: 'bottom'\r\n }];\r\n\r\n centerLeftLines.forEach((data, index) => {\r\n const line = addDashedLine(centerLeftLineGroup, data.line, `screen-2 screen-2-lines center-left-line ${data.type}`, '#65617d', '5,4');\r\n line.attr('stroke-dashoffset', (d) => d.pathLength);\r\n });\r\n\r\n const middleSection = currentProcess.append('g')\r\n .attr('transform', 'translate(488, 360)');\r\n\r\n const screenTwoCenterData = {\r\n titleText: {\r\n wholeText: [{\r\n text: 'Hotel',\r\n textStyle: {\r\n 'font-weight': 500,\r\n }\r\n }, {\r\n text: ' Attributes',\r\n textStyle: {\r\n }\r\n }],\r\n id: 'screen-title-text-screen-2',\r\n class: 'screen-title-text-screen-2 screen-2-text',\r\n x: 336,\r\n y: 0,\r\n finalX: 336,\r\n finalY: 10,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 19,\r\n 'fill': '#3f3d56'\r\n }\r\n },\r\n imageData: [\r\n {\r\n id: 'center-image-background-screen-2',\r\n height: 172,\r\n width: 672,\r\n src: 'assets/images/adaptive-pricing/box.svg',\r\n x: 0,\r\n y: 86,\r\n finalX: 0,\r\n finalY: 0,\r\n class: 'screen-2 center background animate screen-2-images',\r\n s: 0\r\n }, {\r\n id: 'center-brand-screen-2',\r\n height: 65,\r\n width: 44,\r\n src: 'assets/images/adaptive-pricing/brand_grey.svg',\r\n finalX: 98,\r\n finalY: 55,\r\n x: 98,\r\n y: 45,\r\n class: 'screen-2 center icon brand animate screen-2-images',\r\n o: 0\r\n }, {\r\n id: 'center-location-screen-2',\r\n height: 65,\r\n width: 56,\r\n src: 'assets/images/adaptive-pricing/location_grey.svg',\r\n finalX: 200,\r\n finalY: 55,\r\n x: 200,\r\n y: 45,\r\n class: 'screen-2 center icon location animate screen-2-images',\r\n o: 0\r\n }, {\r\n id: 'center-star-screen-2',\r\n height: 64,\r\n width: 37,\r\n src: 'assets/images/adaptive-pricing/star_grey.svg',\r\n finalX: 318,\r\n finalY: 55,\r\n x: 318,\r\n y: 45,\r\n class: 'screen-2 center icon star animate screen-2-images',\r\n o: 0\r\n }, {\r\n id: 'center-review-screen-2',\r\n height: 62,\r\n width: 52,\r\n src: 'assets/images/adaptive-pricing/review_grey.svg',\r\n finalX: 418,\r\n finalY: 58,\r\n x: 418,\r\n y: 48,\r\n class: 'screen-2 center icon review animate screen-2-images',\r\n o: 0\r\n }, {\r\n id: 'center-discount-screen-2',\r\n height: 64,\r\n width: 56,\r\n src: 'assets/images/adaptive-pricing/discount_grey.svg',\r\n finalX: 530,\r\n finalY: 56,\r\n x: 530,\r\n y: 46,\r\n class: 'screen-2 center icon discount animate screen-2-images',\r\n o: 0\r\n }]\r\n };\r\n\r\n createTextUsingData(currentProcess, {\r\n wholeText: [{\r\n text: 'Attribute Unique to Each Guest',\r\n textStyle: {\r\n 'font-weight': 500,\r\n }\r\n }],\r\n id: 'screen-other-title-text-screen-2',\r\n class: 'screen-other-title-text-screen-2 screen-2-text',\r\n x: 824,\r\n y: 299,\r\n dy: '0em',\r\n finalX: 824,\r\n finalY: 309,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 19,\r\n 'fill': '#3f3d56'\r\n }\r\n });\r\n\r\n createCenterBox(middleSection, screenTwoCenterData);\r\n\r\n const middleBottomSection = currentProcess.append('g')\r\n .attr('transform', 'translate(488, 572)');\r\n\r\n const screenTwoBottomData = {\r\n titleText: {\r\n wholeText: [{\r\n text: 'In-room',\r\n textStyle: {\r\n 'font-weight': 500,\r\n }\r\n }, {\r\n text: ' Attributes',\r\n textStyle: {\r\n }\r\n }],\r\n id: 'screen-title-bottom-text-screen-2',\r\n class: 'screen-title-bottom-text-screen-2 screen-2-text',\r\n x: 336,\r\n y: 0,\r\n finalX: 336,\r\n finalY: 10,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 18,\r\n 'fill': '#3f3d56'\r\n }\r\n },\r\n imageData: [\r\n {\r\n id: 'center-image-background-bottom-screen-2',\r\n width: 672,\r\n height: 172,\r\n src: 'assets/images/adaptive-pricing/box.svg',\r\n x: 0,\r\n y: 86,\r\n finalX: 0,\r\n finalY: 0,\r\n class: 'screen-2 center background animate screen-2-images',\r\n s: 0\r\n },\r\n {\r\n id: 'center-bed-screen-2',\r\n height: 60,\r\n width: 66,\r\n src: 'assets/images/adaptive-pricing/bed_grey.svg',\r\n x: 84,\r\n y: 50,\r\n finalX: 84,\r\n finalY: 60,\r\n class: 'screen-2 center icon bed animate screen-2-images',\r\n o: 0\r\n },\r\n {\r\n id: 'center-wifi-screen-2',\r\n height: 62,\r\n width: 96,\r\n src: 'assets/images/adaptive-pricing/wifi_grey.svg',\r\n x: 191,\r\n y: 48,\r\n finalX: 191,\r\n finalY: 58,\r\n class: 'screen-2 center icon wifi animate screen-2-images',\r\n o: 0\r\n },\r\n {\r\n id: 'center-bar-screen-2',\r\n height: 60,\r\n width: 63,\r\n src: 'assets/images/adaptive-pricing/bar_grey.svg',\r\n x: 328,\r\n y: 46,\r\n finalX: 328,\r\n finalY: 56,\r\n class: 'screen-2 center icon bar animate screen-2-images',\r\n o: 0\r\n },\r\n {\r\n id: 'center-balcony-screen-2',\r\n height: 62,\r\n width: 48,\r\n src: 'assets/images/adaptive-pricing/balcony_grey.svg',\r\n x: 431,\r\n y: 48,\r\n finalX: 431,\r\n finalY: 58,\r\n class: 'screen-2 center icon balcony animate screen-2-images',\r\n o: 0\r\n },\r\n {\r\n id: 'center-kitchen-screen-2',\r\n height: 62,\r\n width: 48,\r\n src: 'assets/images/adaptive-pricing/kitchen_grey.svg',\r\n x: 524,\r\n y: 47,\r\n finalX: 524,\r\n finalY: 57,\r\n class: 'screen-2 center icon kitchen animate screen-2-images',\r\n o: 0\r\n },\r\n ]\r\n };\r\n\r\n createCenterBox(middleBottomSection, screenTwoBottomData);\r\n\r\n function updateCenterIcons(delay) {\r\n // console.log('end');\r\n that.addClassToDom('screen-two-right-section', that.htmlClassVariable.card);\r\n setTimeout(function () {\r\n initialAnimationEnd();\r\n }, delay)\r\n }\r\n\r\n function startMiddleSectionAnimation(group, className, attribute, cb = function () { }) {\r\n showText(group, className, 0, 500);\r\n showImage(group, 'center'\r\n , 0, 500, function () {\r\n group.selectAll('.icon')\r\n .transition()\r\n .delay((d, i) => i * 10)\r\n .duration(200)\r\n .style('opacity', 1)\r\n .attr({\r\n 'transform': (d: any) => `translate(${d.finalX}, ${d.finalY})`,\r\n 'xlink:href': (d: any) => d.src\r\n })\r\n .transition()\r\n .delay(500)\r\n .call(endAll, function (d, i) {\r\n // console.log('All attributes have been visible');\r\n updateIcons(group, attribute, function () {\r\n //add class(card-active) to right section\r\n cb();\r\n });\r\n })\r\n }\r\n )\r\n }\r\n\r\n function endAnimation() {\r\n // console.log('Inside endAnimation');\r\n const selection = middleSection.selectAll('.icon')\r\n selection[0].reverse();\r\n const bottomSelection = middleBottomSection.selectAll('.icon')\r\n bottomSelection[0].reverse();\r\n //remove class(card-active) from right section\r\n that.removeClassFromDom('screen-two-right-section', that.htmlClassVariable.card);\r\n\r\n bottomSelection\r\n .transition()\r\n .delay((d, i) => i * 10)\r\n .duration(10)\r\n .style('opacity', 0)\r\n .attr('transform', (d: any) => `translate(${d.x}, ${d.y})`)\r\n\r\n selection\r\n .transition()\r\n .delay((d, i) => i * 10)\r\n .duration(10)\r\n .style('opacity', 0)\r\n .attr('transform', (d: any) => `translate(${d.x}, ${d.y})`)\r\n .call(endAll, function () {\r\n // console.log('On ENALL endAnimation');\r\n hideText(currentProcess, 'screen-other-title-text-screen-2', 0, 0);\r\n operateLine(centerLeftLineGroup, 'center-left-line', 'hide', 0, 0);\r\n operateLine(travelLeftLineGroup, 'travel-line', 'hide', 0, 10);\r\n hideImage(middleSection, 'center', 0, 10);\r\n hideImage(middleBottomSection, 'center', 0, 10);\r\n hideText(middleSection, 'screen-title-text-screen-2', 0, 10);\r\n hideText(middleBottomSection, 'screen-title-bottom-text-screen-2', 0, 10);\r\n })\r\n }\r\n\r\n function updateTravellerPreference() {\r\n middleBottomSection.selectAll('.icon')\r\n .transition()\r\n .duration(5)\r\n .attr({\r\n 'xlink:href': (d: any) => d.src\r\n })\r\n\r\n middleSection.selectAll('.icon')\r\n .transition()\r\n .duration(5)\r\n .attr({\r\n 'xlink:href': (d: any) => d.src\r\n })\r\n .call(endAll, function (d, i) {\r\n operateLine(centerLeftLineGroup, 'center-left-line', 'hide', 0, 100, function () {\r\n operateLine(travelLeftLineGroup, 'travel-line', 'hide', 0, 100, function () {\r\n operateLine(travelLeftLineGroup, that.selectedTraveller, 'draw', 0, 400, function () {\r\n operateLine(centerLeftLineGroup, 'top', 'draw', 0, 400, function () {\r\n updateIcons(middleSection, 'hotel', function () { initialAnimationEnd() });\r\n })\r\n operateLine(centerLeftLineGroup, 'bottom', 'draw', 0, 400, function () {\r\n updateIcons(middleBottomSection, 'inRoom');\r\n })\r\n })\r\n }\r\n );\r\n })\r\n\r\n });\r\n }\r\n\r\n function startLeftToMiddleAnimation() {\r\n // console.log('Screen 2 animation start');\r\n operateLine(travelLeftLineGroup, 'travel-line', 'hide', 0, 0, function () {\r\n operateLine(travelLeftLineGroup, that.selectedTraveller, 'draw', 0, 400, function () {\r\n operateLine(centerLeftLineGroup, 'center-left-line', 'hide', 0, 0, function () {\r\n showText(currentProcess, 'screen-other-title-text-screen-2', 0, 400, function () { })\r\n operateLine(centerLeftLineGroup, 'bottom', 'draw', 0, 400)\r\n operateLine(centerLeftLineGroup, 'top', 'draw', 0, 400, function () {\r\n startMiddleSectionAnimation(middleSection, 'screen-title-text-screen-2', 'hotel', function () { updateCenterIcons(500) })\r\n startMiddleSectionAnimation(middleBottomSection, 'screen-title-bottom-text-screen-2', 'inRoom', function () { });\r\n })\r\n\r\n })\r\n\r\n })\r\n });\r\n }\r\n\r\n function resetElements() {\r\n // console.log('=================Inside screen2 hideElements function');\r\n operateLine(travelLeftLineGroup, 'travel-line', 'hide', 0, 0);\r\n operateLine(centerLeftLineGroup, 'center-left-line', 'hide', 0, 0);\r\n hideImage(middleSection, 'screen-2-images', 0, 0);\r\n hideImage(middleSection, 'screen-2-text', 0, 0);\r\n hideImage(middleBottomSection, 'screen-2-images', 0, 0);\r\n hideImage(middleBottomSection, 'screen-2-text', 0, 0);\r\n }\r\n\r\n function initialAnimationEnd() {\r\n that.onAnimationEnd();\r\n }\r\n\r\n return {\r\n startAnimation(isFirst = false) {\r\n // console.log('screen-2 startAnimation');\r\n // baseImage = '';\r\n // baseImage = '/assets/images/adaptive-pricing/2.png';\r\n // image.attr('xlink:href', baseImage);\r\n // that.isAnimation = true;\r\n that.restrictScrollAndClick();\r\n currentProcess\r\n .transition()\r\n .delay(2000)\r\n .style('opacity', 1)\r\n .call(endAll, function () {\r\n commonLeftSection.animateTravellers();\r\n });\r\n },\r\n climaxAnimation() {\r\n // console.log('Screen 2 climaxAnimation Triggered');\r\n // that.isAnimation = true;\r\n currentProcess.transition();\r\n that.restrictScrollAndClick();\r\n endAnimation();\r\n },\r\n stopAnimation() {\r\n // console.log('Screen 2 stop animation');\r\n // currentProcess.interrupt();\r\n currentProcess.style('opacity', 0);\r\n },\r\n updateTravellerPreference,\r\n startLeftToMiddleAnimation,\r\n resetElements() {\r\n that.restrictScrollAndClick();\r\n resetElements();\r\n }\r\n }\r\n })();\r\n\r\n const screenThree = (() => {\r\n const currentProcess = dataGroup.append('g')\r\n .attr('id', 'screen-3-group')\r\n .attr('class', 'screen-3-group')\r\n .style('opacity', 0);\r\n\r\n const stepData = {\r\n bottomText: {\r\n wholeText: [\r\n {\r\n text: 'Segmentation to create',\r\n dy: '0em',\r\n y: 0,\r\n // x: -58,\r\n x: 0,\r\n },\r\n // {\r\n // text: ' & ',\r\n // dy: '0em',\r\n // y: 0,\r\n // x: 83\r\n // },\r\n {\r\n text: ' homogenized behavioral cohorts',\r\n dy: '1.2em',\r\n y: 0,\r\n x: 0\r\n }\r\n ],\r\n id: 'screen-3-step-bottom-text',\r\n class: 'screen-3 first-step-bottom-text screen-3-text',\r\n x: 833,\r\n y: 243,\r\n dy: '0em',\r\n finalX: 833,\r\n finalY: 253,\r\n o: 0,\r\n textStyle: {\r\n 'font-weight': 400,\r\n 'text-anchor': 'middle',\r\n 'font-size': 18,\r\n 'fill': '#C94573'\r\n // 'font-weight': 500,\r\n // 'fill': '#3f3d56'\r\n }\r\n },\r\n mainData: {\r\n id: 'screen-3-step-1',\r\n class: 'first-step-image step-background screen-3-images',\r\n x: 832,\r\n y: 196,\r\n finalX: 622,\r\n finalY: 116,\r\n width: 420,\r\n height: 160,\r\n src: '/assets/images/adaptive-pricing/step-bg.svg',\r\n o: 1,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Step 1:',\r\n dy: '0em',\r\n y: 0,\r\n x: 0,\r\n textStyle: {\r\n // 'font-weight': 500,\r\n 'fill': '#C94573'\r\n }\r\n },\r\n {\r\n text: 'Analyzing booking intent',\r\n dy: '0em',\r\n y: 0,\r\n x: 66\r\n }\r\n ],\r\n id: 'screen-3-step-text',\r\n class: 'screen-3 first-step screen-3-text',\r\n x: 690,\r\n y: 194,\r\n dy: '0em',\r\n finalX: 690,\r\n finalY: 204,\r\n o: 0,\r\n textStyle: {\r\n // 'text-anchor': 'middle',\r\n 'font-size': 20,\r\n 'font-weight': 500,\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n }\r\n };\r\n\r\n const octopus = {\r\n id: 'octopus-center',\r\n class: 'octopus-center screen-3-images',\r\n x: 837,\r\n y: 605,\r\n finalX: 712,\r\n finalY: 528,\r\n width: 250,\r\n height: 154,\r\n src: '/assets/images/adaptive-pricing/highlighted_box.svg',\r\n o: 1,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Attributes',\r\n dy: '0em',\r\n y: 0,\r\n x: 0\r\n },\r\n {\r\n text: 'of',\r\n dy: '1.3em',\r\n y: 0,\r\n x: 0\r\n },\r\n {\r\n text: 'Segmentation',\r\n dy: '2.3em',\r\n y: 0,\r\n x: 0\r\n },\r\n ],\r\n id: 'octopus-center-title',\r\n class: 'screen-3 octopus-center-title screen-3-text',\r\n x: 838,\r\n y: 591,\r\n dy: '0em',\r\n finalX: 838,\r\n finalY: 591,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 18,\r\n 'font-weight': 500,\r\n 'fill': '#bc5d7d'\r\n }\r\n }\r\n };\r\n\r\n const octopusLegsData = [\r\n {\r\n line: [[791, 554], [791, 511], [755, 479]],\r\n class: 'pair-1',\r\n duration: 100,\r\n delay: 0,\r\n model: {\r\n src: '/assets/images/adaptive-pricing/text_box.svg',\r\n x: 648,\r\n y: 458,\r\n id: '',\r\n class: '',\r\n finalX: 514,\r\n finalY: 411,\r\n width: 268,\r\n height: 94,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Length of stay',\r\n }\r\n ],\r\n id: '',\r\n class: '',\r\n dy: '0em',\r\n x: 860,\r\n y: 340,\r\n finalX: 860,\r\n finaly: 340,\r\n o: 0,\r\n textStyle: {\r\n 'dy': '0.4em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '18',\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n }\r\n },\r\n {\r\n line: [[885, 554], [885, 511], [921, 479]],\r\n class: 'pair-1',\r\n duration: 100,\r\n delay: 100,\r\n model: {\r\n src: '/assets/images/adaptive-pricing/text_yellow_box.svg',\r\n x: 1058,\r\n y: 478,\r\n id: '',\r\n class: '',\r\n finalX: 903,\r\n finalY: 425,\r\n width: 310,\r\n height: 106,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Past dollars spent',\r\n dy: '0.4em'\r\n }\r\n ],\r\n id: '',\r\n class: '',\r\n dy: '0em',\r\n x: 440,\r\n y: 440,\r\n finalX: 440,\r\n finalY: 440,\r\n o: 0,\r\n textStyle: {\r\n 'dy': '0.4em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '18',\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n }\r\n },\r\n {\r\n line: [[742, 587], [713, 587], [681, 552]],\r\n class: 'pair-1',\r\n duration: 100,\r\n delay: 100,\r\n model: {\r\n src: '/assets/images/adaptive-pricing/text_box.svg',\r\n x: 571,\r\n y: 533,\r\n id: '',\r\n class: '',\r\n finalX: 437,\r\n finalY: 486,\r\n width: 268,\r\n height: 94,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Booking lead time',\r\n }\r\n ],\r\n id: '',\r\n class: '',\r\n dy: '0em',\r\n x: 955,\r\n y: 440,\r\n finalX: 955,\r\n finalY: 440,\r\n o: 0,\r\n textStyle: {\r\n 'dy': '0.4em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '18',\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n }\r\n },\r\n {\r\n line: [[936, 589], [972, 589], [992, 570]],\r\n class: 'pair-1',\r\n duration: 100,\r\n delay: 100,\r\n model: {\r\n src: '/assets/images/adaptive-pricing/text_yellow_box.svg',\r\n x: 1123,\r\n y: 564,\r\n id: '',\r\n class: '',\r\n finalX: 968,\r\n finalY: 511,\r\n width: 310,\r\n height: 106,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Past total night stayed',\r\n dy: '0.4em'\r\n }\r\n ],\r\n id: '',\r\n class: '',\r\n dy: '0em',\r\n x: 440,\r\n y: 440,\r\n finalX: 440,\r\n finalY: 440,\r\n o: 0,\r\n textStyle: {\r\n 'dy': '0.4em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '18',\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n }\r\n },\r\n {\r\n line: [[738, 602], [646, 602]],\r\n class: 'pair-2',\r\n duration: 100,\r\n delay: 200,\r\n model: {\r\n src: '/assets/images/adaptive-pricing/text_box.svg',\r\n x: 528,\r\n y: 609,\r\n id: '',\r\n class: '',\r\n finalX: 394,\r\n finalY: 562,\r\n width: 268,\r\n height: 94,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Destination location',\r\n }\r\n ],\r\n id: '',\r\n class: '',\r\n dy: '0em',\r\n x: 440,\r\n y: 548,\r\n finalX: 392,\r\n finalY: 562,\r\n o: 0,\r\n textStyle: {\r\n 'dy': '0.4em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '18',\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n }\r\n },\r\n {\r\n line: [[741, 617], [714, 617], [683, 652]],\r\n class: 'pair-3',\r\n duration: 100,\r\n delay: 200,\r\n model: {\r\n src: '/assets/images/adaptive-pricing/text_box.svg',\r\n x: 570,\r\n y: 688,\r\n id: '',\r\n class: '',\r\n finalX: 436,\r\n finalY: 641,\r\n width: 268,\r\n height: 94,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Travel type',\r\n }\r\n ],\r\n id: '',\r\n class: '',\r\n dy: '0em',\r\n x: 955,\r\n y: 548,\r\n finalX: 955,\r\n finalY: 548,\r\n o: 0,\r\n textStyle: {\r\n 'dy': '0.4em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '18',\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n\r\n }\r\n },\r\n {\r\n line: [[936, 620], [972, 620], [992, 639]],\r\n class: 'pair-3',\r\n duration: 100,\r\n delay: 200,\r\n model: {\r\n src: '/assets/images/adaptive-pricing/text_yellow_box.svg',\r\n x: 1123,\r\n y: 643,\r\n id: '',\r\n class: '',\r\n finalX: 968,\r\n finalY: 590,\r\n width: 310,\r\n height: 106,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Past star rating ref.',\r\n dy: '0.4em'\r\n }\r\n ],\r\n id: '',\r\n class: '',\r\n dy: '0em',\r\n x: 440,\r\n y: 548,\r\n finalX: 440,\r\n finalY: 548,\r\n o: 0,\r\n textStyle: {\r\n 'dy': '0.4em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '18',\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n }\r\n },\r\n {\r\n line: [[791, 655], [791, 698], [753, 734]],\r\n class: 'pair-3',\r\n duration: 100,\r\n delay: 300,\r\n model: {\r\n src: '/assets/images/adaptive-pricing/text_box.svg',\r\n x: 647,\r\n y: 762,\r\n id: '',\r\n class: '',\r\n finalX: 513,\r\n finalY: 715,\r\n width: 268,\r\n height: 94,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Weekend/day travel',\r\n }\r\n ],\r\n id: '',\r\n class: '',\r\n dy: '0em',\r\n x: 860,\r\n y: 650,\r\n finalX: 860,\r\n finalY: 650,\r\n o: 0,\r\n textStyle: {\r\n 'dy': '0.4em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '18',\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n }\r\n },\r\n {\r\n line: [[885, 655], [885, 698], [921, 734]],\r\n class: 'pair-3',\r\n duration: 100,\r\n delay: 200,\r\n model: {\r\n src: '/assets/images/adaptive-pricing/text_yellow_box.svg',\r\n x: 1060,\r\n y: 731,\r\n id: '',\r\n class: '',\r\n finalX: 905,\r\n finalY: 678,\r\n width: 310,\r\n height: 106,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Past ancillary interactions',\r\n dy: '0.4em'\r\n }\r\n ],\r\n id: '',\r\n class: '',\r\n dy: '0em',\r\n x: 440,\r\n y: 548,\r\n finalX: 440,\r\n finalY: 548,\r\n o: 0,\r\n textStyle: {\r\n 'dy': '0.4em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '18',\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n }\r\n }\r\n ];\r\n\r\n const middleGroup = currentProcess.append('g')\r\n .attr({\r\n 'class': 'middle-group',\r\n 'id': 'middle-group',\r\n 'transform': `translate(0, 0)`\r\n });\r\n\r\n const octopusBackgroundGroup = middleGroup.append('g')\r\n .attr({\r\n 'class': 'octopus-background-group',\r\n 'id': 'octopus-background-group',\r\n 'transform': 'translate(0, 0)'\r\n });\r\n\r\n const octopusGroup = middleGroup.append('g')\r\n .attr({\r\n 'class': 'octopus-group',\r\n 'id': 'octopus-group',\r\n 'transform': 'translate(0, 0)'\r\n });\r\n\r\n const stepGroup = middleGroup.append('g')\r\n .attr({\r\n 'class': 'step-group',\r\n 'id': 'step-group',\r\n 'transform': 'translate(0, 0)'\r\n });\r\n\r\n createImageUsingData(stepGroup, { ...stepData.mainData });\r\n\r\n createTextUsingData(stepGroup, { ...stepData.mainData.text });\r\n createTextUsingData(stepGroup, { ...stepData.bottomText });\r\n\r\n const backgroundData = {\r\n leftText: {\r\n wholeText: [{\r\n text: 'Current booking facets',\r\n textStyle: {\r\n 'font-weight': 500,\r\n }\r\n }],\r\n id: 'octopus-background-left-text-screen-3',\r\n class: 'octopus-background-left-text-screen-3 octopus-background-text left-text',\r\n x: 661,\r\n y: 376,\r\n finalX: 661,\r\n finalY: 386,\r\n dy: '0em',\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 18,\r\n 'fill': '#3f3d56'\r\n }\r\n },\r\n rightText: {\r\n wholeText: [{\r\n text: 'Guest\\'s historical preferences',\r\n textStyle: {\r\n 'font-weight': 500,\r\n }\r\n }],\r\n id: 'octopus-background-right-text-screen-3',\r\n class: 'octopus-background-right-text-screen-3 octopus-background-text right-text',\r\n x: 1045,\r\n y: 376,\r\n finalX: 1045,\r\n finalY: 386,\r\n dy: '0em',\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 18,\r\n 'fill': '#3f3d56'\r\n }\r\n },\r\n rectData: [\r\n {\r\n id: 'octopus-background-left-rect-screen-3',\r\n width: 0,\r\n height: 550,\r\n finalWidth: 483,\r\n fill: 'url(#linear-gradient)',\r\n x: 840,\r\n y: 326,\r\n finalX: 357,\r\n finalY: 0,\r\n class: 'screen-3 left background animate',\r\n s: 1,\r\n o: 1\r\n }, {\r\n id: 'octopus-background-right-rect-screen-3',\r\n width: 0,\r\n height: 550,\r\n finalWidth: 483,\r\n x: 840,\r\n y: 326,\r\n fill: 'url(#linear-gradient-grey)',\r\n finalX: 103,\r\n finalY: 58,\r\n class: 'screen-3 right background animate',\r\n s: 1,\r\n o: 1\r\n }\r\n ]\r\n };\r\n\r\n addRect(octopusBackgroundGroup, { ...backgroundData.rectData[0] });\r\n addRect(octopusBackgroundGroup, { ...backgroundData.rectData[1] });\r\n createTextUsingData(octopusBackgroundGroup, { ...backgroundData.leftText });\r\n createTextUsingData(octopusBackgroundGroup, { ...backgroundData.rightText });\r\n\r\n const octopusLegsGroup = octopusGroup.append('g')\r\n .attr({\r\n 'class': 'octopus-legs-group',\r\n 'id': 'octopus-legs-group',\r\n })\r\n .style('font-weight', '400');\r\n\r\n createImageUsingData(octopusGroup, { ...octopus });\r\n\r\n createTextUsingData(octopusGroup, { ...octopus.text })\r\n\r\n octopusLegsData.forEach((leg, index) => {\r\n const group = octopusLegsGroup.append('g')\r\n .attr({\r\n 'class': 'octopus-leg-group',\r\n 'id': `octopus-leg-group-${index}`,\r\n });\r\n const line = addDashedLine(group, leg.line, `screen-3-lines octopus-base-line line-${leg.class}`, '#65617d', '5,4');\r\n line.attr('stroke-dashoffset', d => d.pathLength)\r\n\r\n leg.model.class = `screen-3-images octopus-toe text-background-${leg.class}`;\r\n leg.model.id = `octopus-toe-${index}`;\r\n\r\n createImageUsingData(group, { ...leg.model });\r\n\r\n leg.model.text.id = `text-${leg.class}`;\r\n leg.model.text.class = `screen-3-text text-${leg.class}`;\r\n leg.model.text.x = leg.model.finalX + (leg.model.width / 2);\r\n leg.model.text.y = leg.model.finalY + leg.model.height / 2;\r\n leg.model.text.finalX = leg.model.finalX + (leg.model.width / 2);\r\n leg.model.text.finalY = (leg.model.finalY + (leg.model.height / 2));\r\n\r\n createTextUsingData(group, { ...leg.model.text })\r\n })\r\n\r\n function initAnimation() {\r\n showImage(stepGroup, 'first-step-image', 0, 300, function () {\r\n showText(stepGroup, 'first-step', 0, 200, function () {\r\n showText(stepGroup, 'first-step-bottom-text', 0, 200, function () {\r\n showImage(octopusGroup, 'octopus-center', 0, 300, function () {\r\n showText(octopusGroup, 'octopus-center-title', 0, 200, function () {\r\n octopusBackgroundGroup.select('.left')\r\n .transition()\r\n .delay(200)\r\n .duration(300)\r\n .attr('width', (d: any) => d.finalWidth)\r\n .attr('x', (d: any) => d.finalX)\r\n\r\n octopusBackgroundGroup.select('.right')\r\n .transition()\r\n .delay(200)\r\n .duration(300)\r\n .attr('width', (d: any) => d.finalWidth)\r\n .call(endAll, function () {\r\n showText(octopusBackgroundGroup, 'left-text', 0, 200, function () { })\r\n showText(octopusBackgroundGroup, 'right-text', 0, 200, function () { })\r\n let index = 1;\r\n function opctopusRepeat(index, maxValue) {\r\n operateLine(octopusLegsGroup, `line-pair-${index}`, 'draw', 0, 100, function () {\r\n showImage(octopusLegsGroup, `text-background-pair-${index}`, 0, 200, function () {\r\n showText(octopusLegsGroup, `text-pair-${index}`, 0, 100, function () {\r\n index++;\r\n if (index <= maxValue) {\r\n opctopusRepeat(index, maxValue);\r\n } else {\r\n //add class(card-active) to right section\r\n that.addClassToDom('screen-three-right-section', that.htmlClassVariable.card);\r\n setTimeout(function () {\r\n // console.log(\"screen three initial animation done\");\r\n initialAnimationEnd();\r\n }, 500);\r\n }\r\n })\r\n })\r\n })\r\n }\r\n opctopusRepeat(1, 3)\r\n });\r\n })\r\n })\r\n\r\n\r\n })\r\n })\r\n })\r\n\r\n }\r\n\r\n function initialAnimationEnd() {\r\n that.onAnimationEnd();\r\n }\r\n\r\n function endAnimation() {\r\n function opctopusRepeat(index, maxValue) {\r\n hideText(octopusLegsGroup, `text-pair-${index}`, 0, 10, function () {\r\n hideImage(octopusLegsGroup, `text-background-pair-${index}`, 0, 10, function () {\r\n operateLine(octopusLegsGroup, `line-pair-${index}`, 'hide', 0, 10, function () {\r\n index--;\r\n if (index >= maxValue) {\r\n opctopusRepeat(index, maxValue);\r\n } else {\r\n hideText(octopusGroup, 'octopus-center-title', 0, 10, function () {\r\n hideImage(octopusGroup, 'octopus-center', 0, 10)\r\n hideText(octopusBackgroundGroup, 'left-text', 0, 10, function () { })\r\n hideText(octopusBackgroundGroup, 'right-text', 0, 10, function () { })\r\n\r\n octopusBackgroundGroup.select('.left')\r\n .transition()\r\n .duration(10)\r\n .attr('width', (d: any) => d.width)\r\n .attr('x', (d: any) => d.x)\r\n\r\n octopusBackgroundGroup.select('.right')\r\n .transition()\r\n .duration(10)\r\n .attr('width', (d: any) => d.width)\r\n\r\n hideText(stepGroup, 'first-step-bottom-text', 0, 10, function () {\r\n hideText(stepGroup, 'first-step', 0, 10);\r\n hideImage(stepGroup, 'first-step-image', 0, 10);\r\n })\r\n })\r\n }\r\n })\r\n })\r\n })\r\n }\r\n //remove class(card-active) from right section\r\n that.removeClassFromDom('screen-three-right-section', that.htmlClassVariable.card);\r\n opctopusRepeat(3, 1);\r\n }\r\n\r\n function resetElements() {\r\n // console.log('=================Inside screen3 hideElements function');\r\n operateLine(middleGroup, 'screen-3-lines', 'hide', 0, 0);\r\n hideImage(middleGroup, 'screen-3-images', 0, 0);\r\n hideText(middleGroup, 'screen-3-text', 0, 0);\r\n }\r\n\r\n return {\r\n startAnimation(isFirst = false) {\r\n // that.isAnimation = true;\r\n // // console.log('screen-3 startAnimation');\r\n // baseImage = '';\r\n // baseImage = '/assets/images/adaptive-pricing/3.png';\r\n // image.attr('xlink:href', baseImage);\r\n that.restrictScrollAndClick();\r\n currentProcess\r\n .transition()\r\n .delay(that.currentScrollDirection == 'backward' ? 0 : 2000)\r\n .style('opacity', 1)\r\n .call(endAll, function () {\r\n initAnimation();\r\n });\r\n },\r\n climaxAnimation() {\r\n // that.isAnimation = true;\r\n currentProcess.transition();\r\n that.restrictScrollAndClick();\r\n endAnimation();\r\n // that.restrictScrollAndClick();\r\n },\r\n stopAnimation() {\r\n // currentProcess.interrupt();\r\n currentProcess.style('opacity', 0);\r\n },\r\n resetElements() {\r\n resetElements();\r\n }\r\n }\r\n })();\r\n\r\n const screenFour = (() => {\r\n const stepData = {\r\n bottomText: {\r\n wholeText: [\r\n {\r\n text: 'Estimate guest\\'s level WTP using segment-level',\r\n dy: '0em',\r\n y: 0,\r\n x: 0\r\n },\r\n {\r\n text: 'preferences as priors',\r\n dy: '1.2em',\r\n y: 0,\r\n x: 0\r\n }\r\n ],\r\n id: 'screen-4-step-bottom-text',\r\n class: 'screen-4 second-step-bottom-text',\r\n x: 773,\r\n y: 243,\r\n dy: '0em',\r\n finalX: 773,\r\n finalY: 253,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 18,\r\n 'font-weight': 400,\r\n 'fill': '#c94573'\r\n }\r\n },\r\n mainData: {\r\n id: 'screen-4-step-2',\r\n class: 'second-step-image step-background',\r\n x: 772,\r\n y: 176,\r\n finalX: 562,\r\n finalY: 116,\r\n width: 420,\r\n height: 160,\r\n src: '/assets/images/adaptive-pricing/step-bg.svg',\r\n o: 1,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Step 2:',\r\n dy: '0em',\r\n y: 0,\r\n x: 0,\r\n textStyle: {\r\n 'fill': '#C94573'\r\n }\r\n },\r\n {\r\n text: 'WTP Assessment',\r\n dy: '0em',\r\n y: 0,\r\n x: 66\r\n }\r\n ],\r\n id: 'screen-4-step-text',\r\n class: 'screen-4 second-step',\r\n x: 660,\r\n y: 194,\r\n dy: '0em',\r\n finalX: 660,\r\n finalY: 204,\r\n o: 0,\r\n textStyle: {\r\n // 'text-anchor': 'middle',\r\n 'font-size': 20,\r\n 'font-weight': 500,\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n }\r\n };\r\n\r\n const middleBlockContent = {\r\n title: {\r\n wholeText: [\r\n {\r\n text: 'Decision Choice',\r\n textStyle: {\r\n 'font-weight': 500\r\n }\r\n }, {\r\n text: ' Modeling'\r\n }\r\n ],\r\n id: 'screen-4-title-center',\r\n class: 'title-center screen-4-text',\r\n dy: '0em',\r\n x: 300,\r\n y: -5,\r\n finalX: 300,\r\n finalY: 5,\r\n textStyle: {\r\n 'font-size': '22',\r\n 'text-anchor': 'middle',\r\n 'fill': '#3f3d56'\r\n }\r\n },\r\n images: [\r\n {\r\n id: 'rrm-block-screen-4',\r\n height: 154,\r\n width: 660,\r\n src: 'assets/images/adaptive-pricing/robust_regression_model.svg',\r\n x: 330,\r\n y: 77,\r\n finalX: -30,\r\n finalY: 10,\r\n s: 0,\r\n class: 'screen-4 center rrm-block animate screen-4-images'\r\n }, {\r\n id: 'brain-image',\r\n height: 57,\r\n width: 57,\r\n src: 'assets/images/adaptive-pricing/brain.svg',\r\n x: 299,\r\n y: 85.5,\r\n finalX: 271,\r\n finalY: 57,\r\n s: 0,\r\n class: 'screen-4 center brain-image animate screen-4-images'\r\n }],\r\n contents: [{\r\n x: 66,\r\n y: 71,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Booked Property'\r\n }\r\n ],\r\n id: '',\r\n class: 'concept-title screen-4-text',\r\n x: 0,\r\n y: -10,\r\n finalX: 0,\r\n finalY: 0,\r\n dy: '0em',\r\n o: 0,\r\n textStyle: {\r\n 'fill': '#3f3d56',\r\n 'font-size': '16',\r\n 'text-anchor': 'start',\r\n 'font-weight': '500'\r\n },\r\n\r\n properties: [{\r\n wholeText: [\r\n {\r\n text: '- Hotel attributes'\r\n }\r\n ],\r\n id: '',\r\n class: 'concept-props-1 screen-4-text',\r\n x: 0,\r\n y: -9,\r\n dy: '1.5em',\r\n finalX: 0,\r\n finalY: 1,\r\n o: 0,\r\n textStyle: {\r\n 'fill': '#3f3d56',\r\n 'font-size': '13',\r\n 'text-anchor': 'start'\r\n },\r\n },\r\n {\r\n wholeText: [\r\n {\r\n text: '- In-room attributes'\r\n }\r\n ],\r\n id: '',\r\n class: 'concept-props-2 screen-4-text',\r\n x: 0,\r\n y: -9,\r\n dy: '3em',\r\n finalX: 0,\r\n finalY: 1,\r\n o: 0,\r\n textStyle: {\r\n 'fill': '#3f3d56',\r\n 'font-size': '13',\r\n 'text-anchor': 'start'\r\n },\r\n }]\r\n }\r\n },\r\n {\r\n x: 392,\r\n y: 71,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Alternative Properties'\r\n }\r\n ],\r\n id: '',\r\n class: 'concept-title screen-4-text',\r\n x: 0,\r\n y: -10,\r\n finalX: 0,\r\n finalY: 0,\r\n dy: '0em',\r\n o: 0,\r\n textStyle: {\r\n 'fill': '3f3d56',\r\n 'font-size': '16',\r\n 'text-anchor': 'start',\r\n 'font-weight': '500'\r\n },\r\n properties: [{\r\n wholeText: [\r\n {\r\n text: '- Clicked booking choice'\r\n }\r\n ],\r\n id: '',\r\n class: 'concept-props-1 screen-4-text',\r\n x: 0,\r\n y: -9,\r\n dy: '1.5em',\r\n finalX: 0,\r\n finalY: 1,\r\n o: 0,\r\n textStyle: {\r\n 'fill': '#3f3d56',\r\n 'font-size': '13',\r\n 'text-anchor': 'start'\r\n },\r\n },\r\n {\r\n wholeText: [\r\n {\r\n text: '- Non-clicked booking choice'\r\n }\r\n ],\r\n id: '',\r\n class: 'concept-props-2 screen-4-text',\r\n x: 0,\r\n y: -9,\r\n dy: '3em',\r\n finalX: 0,\r\n finalY: 1,\r\n o: 0,\r\n textStyle: {\r\n 'fill': '#3f3d56',\r\n 'font-size': '13',\r\n 'text-anchor': 'start'\r\n }\r\n }]\r\n }\r\n }],\r\n types: [\r\n {\r\n line: [[276, 39], [276, 87], [240, 123]],\r\n model: {\r\n x: 125,\r\n y: 155,\r\n // rx: 25,\r\n id: '',\r\n class: '',\r\n finalX: -60,\r\n finalY: 102,\r\n height: 126,\r\n width: 350,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Feature Engineering',\r\n textStyle: {\r\n 'font-weight': 500\r\n }\r\n }\r\n ],\r\n id: '',\r\n class: 'model-bottom-bg',\r\n dy: '0em',\r\n x: -20,\r\n y: 102,\r\n finalX: -20,\r\n finalY: 102,\r\n o: 0,\r\n textStyle: {\r\n 'dy': '0.4em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '16',\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n }\r\n },\r\n {\r\n line: [[300, 42], [300, 230]],\r\n model: {\r\n x: 300,\r\n y: 265,\r\n id: '',\r\n class: '',\r\n finalX: 118,\r\n finalY: 212,\r\n height: 126,\r\n width: 350,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Multinomial logit',\r\n x: 0,\r\n dy: '-0.7em',\r\n textStyle: {\r\n 'font-weight': 500\r\n }\r\n },\r\n {\r\n text: '(Segment model)',\r\n x: 0,\r\n dy: '1.2em',\r\n textStyle: {\r\n 'font-weight': 500\r\n }\r\n }\r\n ],\r\n id: '',\r\n class: 'model-bottom-bg',\r\n dy: '0em',\r\n x: 300,\r\n y: 233,\r\n finalX: 300,\r\n finalY: 233,\r\n o: 0,\r\n textStyle: {\r\n 'dy': '0.4em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '16',\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n }\r\n },\r\n {\r\n line: [[324, 39], [324, 87], [360, 123]],\r\n model: {\r\n y: 155,\r\n x: 465,\r\n id: '',\r\n class: '',\r\n finalY: 102,\r\n finalX: 310,\r\n height: 126,\r\n width: 350,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n {\r\n text: 'Hierarchical Bayesian',\r\n x: 0,\r\n dy: '-0.7em',\r\n textStyle: {\r\n 'font-weight': 500\r\n }\r\n },\r\n {\r\n text: '(Customer Decision Choice model)',\r\n x: 0,\r\n dy: '1.2em',\r\n textStyle: {\r\n 'font-weight': 500\r\n }\r\n }\r\n ],\r\n id: '',\r\n class: 'model-bottom-bg',\r\n dy: '0em',\r\n x: 465,\r\n y: 155,\r\n finalX: 465,\r\n finalY: 155,\r\n o: 0,\r\n textStyle: {\r\n 'dy': '0.4em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '16',\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n }\r\n }\r\n ]\r\n };\r\n\r\n const currentProcess = dataGroup.append('g')\r\n .attr('id', 'screen-4-group')\r\n .attr('class', 'screen-4-group')\r\n .style('opacity', 0);\r\n\r\n const middleSectionWrapper = currentProcess.append('g')\r\n .attr({\r\n 'class': 'middle-screen-wrapper',\r\n 'id': 'middle-screen-wrapper'\r\n });\r\n\r\n const stepGroup = middleSectionWrapper.append('g')\r\n .attr({\r\n 'class': 'screen-4-step-group',\r\n 'id': 'screen-4-step-group',\r\n 'transform': 'translate(0, 0)'\r\n });\r\n\r\n createImageUsingData(stepGroup, { ...stepData.mainData });\r\n\r\n createTextUsingData(stepGroup, { ...stepData.mainData.text });\r\n createTextUsingData(stepGroup, { ...stepData.bottomText });\r\n\r\n const middleSectionBlock = middleSectionWrapper.append('g')\r\n .style({\r\n 'transform': `translate(471px, 358px)`\r\n });\r\n\r\n const middleSectionAttrProps = middleSectionBlock.append('g')\r\n .attr({\r\n 'class': 'middle-section-attr-props',\r\n 'id': 'middle-section-attr-props'\r\n });\r\n\r\n const middleSectionModels = middleSectionBlock.append('g')\r\n .attr({\r\n 'class': 'middle-section-attr-props',\r\n 'id': 'middle-section-attr-props'\r\n })\r\n .style({\r\n 'transform': `translate(0, 100px)`\r\n });\r\n\r\n createTextUsingData(middleSectionAttrProps, middleBlockContent.title);\r\n\r\n middleBlockContent.images.forEach(d => {\r\n createImageUsingData(middleSectionAttrProps, { ...d })\r\n })\r\n\r\n middleBlockContent.contents.forEach((section, key) => {\r\n const group = middleSectionAttrProps.append('g')\r\n .style({\r\n 'transform': `translate(${section.x}px,${section.y}px)`\r\n })\r\n section.text.id = 'title-text-' + key;\r\n createTextUsingData(group, section.text)\r\n\r\n section.text.properties.forEach((prop, index) => {\r\n\r\n prop.id = 'sub-text-' + index;\r\n createTextUsingData(group, prop)\r\n })\r\n });\r\n\r\n const modelLinePath = [];\r\n middleBlockContent.types.forEach((model, index) => {\r\n const group = middleSectionModels.append('g')\r\n .attr({\r\n 'class': 'concept-model-group',\r\n 'id': `concept-model-group-${index}`,\r\n });\r\n\r\n const line = addDashedLine(group, model.line, 'screen-4-lines model-base-line', '#65617d', '5,4');\r\n line.attr('stroke-dashoffset', d => d.pathLength);\r\n // console.log(model.model);\r\n model.model.id = model.model.id || 'bottom-background-' + index;\r\n model.model.class = 'bottom-background screen-4-images';\r\n\r\n\r\n createImageUsingData(group, {\r\n ...model.model,\r\n src: 'assets/images/adaptive-pricing/' + (model.model.id === 'large-text' ? 'text_box_large' : 'text_box_3') + '.svg'\r\n })\r\n\r\n model.model.text.id = `bottom-text`;\r\n model.model.text.class = `bottom-text screen-4-text`;\r\n model.model.text.x = model.model.finalX + (model.model.width / 2);\r\n model.model.text.y = model.model.finalY + model.model.height / 2;\r\n model.model.text.finalX = model.model.finalX + (model.model.width / 2);\r\n model.model.text.finalY = (model.model.finalY + (model.model.height / 2)) + 6;\r\n\r\n // model.model.text.o = 1;\r\n createTextUsingData(group, { ...model.model.text });\r\n });\r\n\r\n // right portion\r\n const lineGraphTranslate = {\r\n x: 1271,\r\n y: 270\r\n };\r\n\r\n const rightContainer = currentProcess.append('g')\r\n .attr({\r\n 'class': 'right-container',\r\n 'id': 'right-container',\r\n })\r\n\r\n createImageUsingData(rightContainer,\r\n {\r\n id: `right-bg`\r\n , class: 'right-bg'\r\n , src: '/assets/images/adaptive-pricing/graph_container.svg'\r\n , width: 715.77\r\n , height: 906\r\n , x: 1540\r\n , y: 533\r\n , finalX: 1133\r\n , finalY: 75\r\n , s: 0\r\n , o: 1\r\n });\r\n\r\n function manageDraggableTooltip(group, value) {\r\n if (value < 90) {\r\n group.style('transform', `translate(-23px, -37px)`);\r\n group.select(`path`)\r\n .attr({\r\n 'd': 'm19.617,20l6.155,0l-3.087,3.243l-3.068,-3.243zm-9.617,0a10,10 0 0 1 -10,-10a10,10 0 0 1 10,-10l25,0a10,10 0 0 1 10,10a10,10 0 0 1 -10,10l-25,0z', //top\r\n });\r\n group.select('text')\r\n .attr({\r\n 'x': '24',\r\n 'dy': '1.1em',\r\n });\r\n } else {\r\n group.style('transform', `translate(-23px, 13px)`);\r\n group.select('path').attr({\r\n 'd': 'm22.32,0l3.06,3.24l-6.15,0l3.09,-3.24zm-12.32,3.24c-1.31,0 -2.61,0.26 -3.83,0.76c-1.21,0.51 -2.31,1.24 -3.24,2.17c-0.93,0.93 -1.67,2.03 -2.17,3.25c-0.5,1.21 -0.76,2.51 -0.76,3.82c0,1.32 0.26,2.62 0.76,3.83c0.5,1.21 1.24,2.32 2.17,3.24c0.93,0.93 2.03,1.67 3.24,2.17c1.22,0.5 2.52,0.76 3.83,0.76l25,0c1.31,0 2.61,-0.26 3.83,-0.76c1.21,-0.5 2.31,-1.24 3.24,-2.17c0.93,-0.92 1.67,-2.03 2.17,-3.24c0.5,-1.21 0.76,-2.51 0.76,-3.83c0,-1.31 -0.26,-2.61 -0.76,-3.82c-0.5,-1.22 -1.24,-2.32 -2.17,-3.25c-0.93,-0.93 -2.03,-1.66 -3.24,-2.17c-1.22,-0.5 -2.52,-0.76 -3.83,-0.76l-25,0z', //below\r\n });\r\n group.select('text')\r\n .attr({\r\n 'x': '22',\r\n 'dy': '1.3em',\r\n });\r\n }\r\n }\r\n\r\n const lineGraphWrapper = currentProcess.append('g')\r\n .attr('id', 'line-graph-wrapper')\r\n .attr('class', 'line-graph-wrapper')\r\n .style('transform', `translate(${lineGraphTranslate.x}px, ${lineGraphTranslate.y}px)`)\r\n .style('opacity', 0);\r\n\r\n const margin = { top: 30, right: 20, bottom: 30, left: 50 }\r\n , width = 500 - margin.left - margin.right\r\n , height = 550 - margin.top - margin.bottom\r\n , parseDate = d3.time.format('%d-%b-%y').parse;\r\n\r\n // Set the ranges\r\n let yMax = 105;\r\n let x = d3.time.scale().range([0, width]);\r\n let y = d3.scale.linear().range([height, 0]);\r\n let value = d3.scale.linear().range([yMax, 0]);\r\n\r\n // // console.log('height: ', height);\r\n // .origin(function () {\r\n // var current = d3.select(this);\r\n // return { x: current.attr(\"x\"), y: current.attr(\"y\") };\r\n // })\r\n var drag = d3.behavior.drag()\r\n .on('drag', function (d, i) {\r\n if (d.isDraggable) {\r\n lineGraphWrapper.select('.hand-cursor')\r\n .style('opacity', d => {\r\n d.isAnimating = false;\r\n return '0'\r\n })\r\n .attr({\r\n 'transform': `translate(0, 0)`\r\n });\r\n // const tx = x(d.date);\r\n // const ty = (d3.event.sourceEvent.pageY / that.svgResize.heightAspect) - lineGraphTranslate.y;\r\n d.y += d3.event.y;\r\n const parentNode = this.parentNode;\r\n const close = Math.round(value(d.y));\r\n if (close >= 0 && close <= 100) {\r\n draggableCircleWrapper.select(`#${this.parentNode.id}`)\r\n .attr('transform', `translate(${d.x}, ${d.y})`);\r\n const group = currentProcess.select(`#drag-circle-tooltip-${i}`)\r\n manageDraggableTooltip(group, close);\r\n currentProcess.select(`#drag-circle-tooltip-${i} text`).text(`$ ${close}`);\r\n that.pricingData.travellerDetails[that.selectedTraveller].attributes.hotel[i].preferredValue = close;\r\n data[i].close = close;\r\n const updateGuestValue = data.reduce((total, obj, key) => total + obj.close, 0);\r\n const updateSegmentValue = that.pricingData.travellerDetails[that.selectedTraveller].attributes.hotel.reduce((total, obj) => total + obj.defaultValue, 0);;\r\n guestValueText.text(`$${updateGuestValue}`);\r\n // const avgValue = `${that.pricingData.currencyUnit}${((updateGuestValue + updateSegmentValue) / 2).toFixed(0)}`\r\n // avgValueText.text(avgValue);\r\n }\r\n }\r\n });\r\n\r\n var yGridLine = d3.svg.axis()\r\n .scale(y)\r\n .tickSize(-width - 45, 0, 0)\r\n .tickFormat('')\r\n .orient('left');\r\n\r\n var xGridLine = d3.svg.axis()\r\n .scale(x)\r\n .tickSize(height, 0, 0)\r\n .tickFormat('')\r\n .orient('bottom');\r\n\r\n var xAxis = d3.svg.axis().scale(x)\r\n .orient('bottom').ticks(5);\r\n\r\n var yAxis = d3.svg.axis().scale(y)\r\n .orient('left').ticks(10);\r\n\r\n // Define the line\r\n // var valueline = d3.svg.line()\r\n // .x(function (d) { return x(d.date); })\r\n // .y(function (d) { return y(d.close); });\r\n\r\n const data = [\r\n {\r\n date: '23-Apr-12',\r\n close: 0,\r\n dragValues: [-3, 5, -4, 4, 0],\r\n isDraggable: true\r\n },\r\n {\r\n date: '24-Apr-12',\r\n close: 0,\r\n dragValues: [-3, 5, -4, 4, 0],\r\n isDraggable: true\r\n },\r\n {\r\n date: '25-Apr-12',\r\n close: 0,\r\n dragValues: [4, -5, 3, -4, 0],\r\n isDraggable: true\r\n },\r\n {\r\n date: '26-Apr-12',\r\n close: 0,\r\n dragValues: [-5, 4, -4, 5, 0],\r\n isDraggable: true\r\n },\r\n {\r\n date: '27-Apr-12',\r\n close: 0,\r\n dragValues: [4, -4, 3, -5, 0],\r\n isDraggable: true\r\n },\r\n {\r\n date: '28-Apr-12',\r\n close: 0,\r\n dragValues: [4, -4, 3, -5, 0],\r\n isDraggable: true\r\n },\r\n {\r\n date: '29-Apr-12',\r\n close: 0,\r\n dragValues: [-3, 4, -5, 3, 0],\r\n isDraggable: true\r\n },\r\n ];\r\n\r\n data.forEach(function (d) {\r\n d.date = parseDate(d.date);\r\n d.close = +d.close;\r\n });\r\n\r\n // // console.log('Data: ', data);\r\n\r\n // Scale the range of the data\r\n x.domain(d3.extent(data, function (d) { return d.date; }));\r\n y.domain([0, d3.max(data, function (d) { return yMax; })]);\r\n value.domain([0, height]);\r\n\r\n // Add the X Axis\r\n // lineGraphWrapper.append('g')\r\n // .attr('class', 'x axis')\r\n // .attr('transform', 'translate(0,' + height + ')')\r\n // .call(xAxis);\r\n\r\n // Add the Y Axis\r\n const xGridGroup = lineGraphWrapper.append('g')\r\n .attr('class', 'x-grid')\r\n .style('stroke', '#fff')\r\n // .style('stroke', 'black')\r\n .style('stroke-width', '1')\r\n .call(xGridLine);\r\n\r\n const yGridGroup = lineGraphWrapper.append('g')\r\n .attr('class', 'y-grid')\r\n .style('stroke', '#fff')\r\n // .style('stroke', 'black')\r\n .style('stroke-width', '1')\r\n .call(yGridLine);\r\n\r\n yGridGroup.selectAll('path').remove();\r\n yGridGroup\r\n .select('g:nth-child(1)')\r\n .select('line')\r\n .style('stroke', '#A19FB5');\r\n\r\n xGridGroup.selectAll('path').remove();\r\n xGridGroup\r\n .select('g:nth-child(1)')\r\n .remove();\r\n xGridGroup.selectAll('g').each(function (object, index) {\r\n if (index % 2 == 0)\r\n this.remove()\r\n });\r\n\r\n const yAxisGroup = lineGraphWrapper.append('g')\r\n .attr('class', 'y axis')\r\n .attr('font-size', '14')\r\n // .attr('transform', `translate(${width},0)`)\r\n .style({\r\n // 'letter-spacing': '1px',\r\n // 'stroke': '#A19FB5',\r\n 'font-weight': '500'\r\n })\r\n .call(yAxis);\r\n\r\n yAxisGroup.select('path')\r\n .attr('d', 'M0,0V490');\r\n yAxisGroup.selectAll('line').remove();\r\n\r\n const fixedCircleWrapper = lineGraphWrapper.append('g')\r\n .attr({\r\n 'class': 'fixed-circle-wrapper',\r\n 'id': 'fixed-circle-wrapper',\r\n })\r\n\r\n data.shift();\r\n\r\n const fixedCircleGroup = fixedCircleWrapper.selectAll('circle')\r\n .data(data)\r\n .enter()\r\n .append('g')\r\n .attr({\r\n 'class': (d, i) => `fixed-circle-group ${that.pricingData.travellerDetails.solo.attributes.hotel[i].id}`,\r\n 'transform': d => `translate(${x(d.date)}, ${y(d.close)})`\r\n });\r\n\r\n fixedCircleGroup.append('circle')\r\n .attr({\r\n 'cx': (d) => 0,\r\n 'cy': (d) => 0,\r\n 'r': 6,\r\n 'fill': '#7e5f69'\r\n });\r\n\r\n const fixedCircleTooltip = fixedCircleGroup.append('g')\r\n .attr({\r\n 'class': 'fixed-circle-tooltip',\r\n 'id': (d, i) => `fixed-circle-tooltip-${i}`,\r\n })\r\n .style({\r\n 'transform': (d) => `translate(-22px, 12px)`\r\n });\r\n\r\n fixedCircleTooltip.append('path')\r\n .attr({\r\n 'd': 'm22.32,0l3.06,3.24l-6.15,0l3.09,-3.24zm-12.32,3.24c-1.31,0 -2.61,0.26 -3.83,0.76c-1.21,0.51 -2.31,1.24 -3.24,2.17c-0.93,0.93 -1.67,2.03 -2.17,3.25c-0.5,1.21 -0.76,2.51 -0.76,3.82c0,1.32 0.26,2.62 0.76,3.83c0.5,1.21 1.24,2.32 2.17,3.24c0.93,0.93 2.03,1.67 3.24,2.17c1.22,0.5 2.52,0.76 3.83,0.76l25,0c1.31,0 2.61,-0.26 3.83,-0.76c1.21,-0.5 2.31,-1.24 3.24,-2.17c0.93,-0.92 1.67,-2.03 2.17,-3.24c0.5,-1.21 0.76,-2.51 0.76,-3.83c0,-1.31 -0.26,-2.61 -0.76,-3.82c-0.5,-1.22 -1.24,-2.32 -2.17,-3.25c-0.93,-0.93 -2.03,-1.66 -3.24,-2.17c-1.22,-0.5 -2.52,-0.76 -3.83,-0.76l-25,0z', //below\r\n // 'd': 'm19.617,20l6.155,0l-3.087,3.243l-3.068,-3.243zm-9.617,0a10,10 0 0 1 -10,-10a10,10 0 0 1 10,-10l25,0a10,10 0 0 1 10,10a10,10 0 0 1 -10,10l-25,0z', //top\r\n // 'd': 'm13.29495,19.99899a10.006,10.006 0 0 1 -9.663,-7.41l-3.632,-2.673l3.675,-2.659a10.005,10.005 0 0 1 9.62,-7.257l21.707,0a10,10 0 0 1 10,10a10,10 0 0 1 -10,10l-21.707,-0.001z', //right\r\n 'fill': '#8b6e78',\r\n });\r\n\r\n fixedCircleTooltip\r\n .append('text')\r\n .text((d) => `$ ${d.close}`)\r\n .attr({\r\n 'fill': '#fff',\r\n 'x': 22,\r\n 'y': 0,\r\n 'dy': '1.3em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '14'\r\n });\r\n\r\n const draggableCircleWrapper = lineGraphWrapper.append('g')\r\n .attr({\r\n 'class': 'drag-circle-wrapper',\r\n 'id': 'drag-circle-wrapper',\r\n });\r\n\r\n const draggableCircleGroup = draggableCircleWrapper.selectAll('g')\r\n .data(data)\r\n .enter()\r\n .append('g')\r\n .attr({\r\n 'class': (d, i) => `drag-circle-group ${that.pricingData.travellerDetails.solo.attributes.hotel[i].id}`,\r\n 'id': (d, i) => `drag-circle-group-${i}`,\r\n 'opacity': '0',\r\n 'transform': (d) => {\r\n d.x = x(d.date);\r\n d.y = y(d.close);\r\n return `translate(${d.x}, ${d.y})`\r\n },\r\n })\r\n\r\n const dragPointerGroup = draggableCircleGroup.append('g')\r\n .attr({\r\n 'class': 'drag-pointer',\r\n 'id': (d, i) => `drag-pointer-${i}`,\r\n })\r\n .style({\r\n 'transform': (d) => `translate(${-10}px, ${-7}px)`,\r\n 'cursor': 'pointer'\r\n })\r\n // .on('click', function () {\r\n // // console.log('pointer value: ', d3.event)\r\n // })\r\n .call(drag);\r\n\r\n dragPointerGroup.append('rect')\r\n .attr({\r\n 'x': 0,\r\n 'y': 0,\r\n 'width': 20,\r\n 'height': 14,\r\n 'rx': 6,\r\n 'fill': '#c94573'\r\n });\r\n\r\n dragPointerGroup.append('path')\r\n .attr({\r\n 'd': 'm4.998,9l0,-1l10,0l0,1l-10,0zm0,-3l0,-1l10,0l0,1l-10,0z',\r\n 'fill': '#fff'\r\n });\r\n\r\n const draggableCircleTooltip = draggableCircleGroup.append('g')\r\n .attr({\r\n 'class': 'drag-circle-tooltip',\r\n 'id': (d, i) => `drag-circle-tooltip-${i}`,\r\n })\r\n .style({\r\n 'transform': (d) => `translate(${-23}px, ${-37}px)`\r\n });\r\n\r\n draggableCircleTooltip.append('path')\r\n .attr({\r\n 'd': 'm19.617,20l6.155,0l-3.087,3.243l-3.068,-3.243zm-9.617,0a10,10 0 0 1 -10,-10a10,10 0 0 1 10,-10l25,0a10,10 0 0 1 10,10a10,10 0 0 1 -10,10l-25,0z',\r\n // 'd': 'm13.29495,19.99899a10.006,10.006 0 0 1 -9.663,-7.41l-3.632,-2.673l3.675,-2.659a10.005,10.005 0 0 1 9.62,-7.257l21.707,0a10,10 0 0 1 10,10a10,10 0 0 1 -10,10l-21.707,-0.001z',\r\n 'fill': '#c36b89',\r\n });\r\n\r\n draggableCircleTooltip\r\n .append('text')\r\n .text((d) => `$ ${d.close + 15}`)\r\n .attr({\r\n 'fill': '#fff',\r\n 'x': 24,\r\n 'y': 0,\r\n 'dy': '1.1em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '14'\r\n });\r\n\r\n createImageUsingData(lineGraphWrapper, {\r\n id: 'hand-cursor',\r\n class: 'hand-cursor',\r\n height: 70,\r\n width: 70,\r\n src: 'assets/images/adaptive-pricing/hand_cursor.svg',\r\n x: -5,\r\n y: y(data[0].close),\r\n o: 0,\r\n textStyle: {\r\n display: 'none',\r\n // cursor: 'pointer'\r\n }\r\n });\r\n\r\n // lineGraphWrapper.select('.hand-cursor')\r\n // .on('click', function (d) {\r\n // this.style.display = 'none';\r\n // d.isAnimating = false;\r\n // lineGraphWrapper.select('.hand-cursor')\r\n // .attr({\r\n // 'tranform': 'translate(0,0)'\r\n // })\r\n // .interrupt();\r\n // })\r\n\r\n currentProcess.append('g')\r\n .attr({\r\n 'class': 'line-y-value-currency',\r\n 'id': 'line-y-value-currency',\r\n 'opacity': 0\r\n })\r\n .style({\r\n 'transform': `translate(${lineGraphTranslate.x}px,${lineGraphTranslate.y + height}px)`\r\n })\r\n .append('text')\r\n .attr({\r\n 'x': 0,\r\n 'y': 0,\r\n 'dy': '0em',\r\n 'font-size': '16',\r\n 'text-anchor': 'end'\r\n })\r\n .style({\r\n 'transform': `translate(-10px, 30px)`,\r\n 'font-weight': '500'\r\n })\r\n .text('$');\r\n\r\n const segmentWTPWrapper = currentProcess.append('g')\r\n .attr({\r\n 'class': 'segment-wtp-wrapper',\r\n 'id': 'segment-wtp-wrapper',\r\n 'opacity': 0,\r\n 'transform': `translate(1549, ${lineGraphTranslate.y + height + 6 - 10})`\r\n });\r\n\r\n const segmentWTPBlock = segmentWTPWrapper.append('g')\r\n .attr({\r\n 'class': 'segment-wtp-block',\r\n 'id': 'segment-wtp-block'\r\n })\r\n .style({\r\n 'transform': `translate( 0px, ${10}px)`\r\n });\r\n\r\n segmentWTPBlock.append('rect')\r\n .attr({\r\n 'x': 0,\r\n 'y': 0,\r\n 'width': 150,\r\n 'height': 76,\r\n 'rx': 40,\r\n 'fill': '#7e5f69'\r\n });\r\n\r\n segmentWTPBlock.append('text')\r\n .attr({\r\n 'fill': '#FFF',\r\n 'x': 75,\r\n 'y': 25,\r\n 'dy': '0em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '12'\r\n })\r\n .style({\r\n 'font-weight': '400'\r\n })\r\n .text('SEGMENT\\'s WTP');\r\n\r\n segmentWTPBlock.append('text')\r\n .attr({\r\n 'fill': '#FFF',\r\n 'x': 50,\r\n 'y': 45,\r\n 'dy': '0em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '12'\r\n })\r\n .style({\r\n 'font-weight': '400'\r\n })\r\n .text('From');\r\n\r\n const segmentValueText = segmentWTPBlock.append('text')\r\n .attr({\r\n 'class': 'segment-wtp-value',\r\n 'id': 'segment-wtp-value',\r\n 'fill': '#fff',\r\n 'x': 93,\r\n 'y': 25,\r\n 'dy': '1.2em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '22'\r\n })\r\n .style({\r\n 'font-weight': '500',\r\n // 'letter-spacing': '1px'\r\n })\r\n .text(`$${data.reduce((total, obj) => total + obj.close, 0)}`);\r\n\r\n segmentWTPBlock.append('text')\r\n .attr({\r\n 'class': 'segment-wtp-value',\r\n 'id': 'segment-wtp-value',\r\n 'fill': '#fff',\r\n 'x': 99,\r\n 'y': 34,\r\n 'dy': '2.7em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '12'\r\n })\r\n .text(`/night`);\r\n\r\n const guestWTPWrapper = currentProcess.append('g')\r\n .attr({\r\n 'class': 'guest-wtp-wrapper',\r\n 'id': 'guest-wtp-wrapper',\r\n 'opacity': 0,\r\n 'transform': `translate(1335, ${lineGraphTranslate.y + height + 6 - 10})`\r\n });\r\n\r\n const guestWTPBlock = guestWTPWrapper.append('g')\r\n .attr({\r\n 'class': 'guest-wtp-block',\r\n 'id': 'guest-wtp-block'\r\n })\r\n .style({\r\n 'transform': `translate( 0px, ${10}px)`\r\n });\r\n\r\n guestWTPBlock.append('rect')\r\n .attr({\r\n 'x': 0,\r\n 'y': 0,\r\n 'width': 150,\r\n 'height': 76,\r\n 'rx': 40,\r\n 'fill': '#c94573'\r\n });\r\n\r\n guestWTPBlock.append('text')\r\n .attr({\r\n 'fill': '#fff',\r\n 'x': 75,\r\n 'y': 25,\r\n 'dy': '0em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '14'\r\n })\r\n .style({\r\n 'font-weight': '400'\r\n })\r\n .text('GUEST\\'s WTP');\r\n\r\n guestWTPBlock.append('text')\r\n .attr({\r\n 'fill': '#FFF',\r\n 'x': 50,\r\n 'y': 45,\r\n 'dy': '0em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '12'\r\n })\r\n .style({\r\n 'font-weight': '400'\r\n })\r\n .text('From');\r\n\r\n const guestValueText = guestWTPBlock.append('text')\r\n .attr({\r\n 'class': 'guest-wtp-value',\r\n 'id': 'guest-wtp-value',\r\n 'fill': '#fff',\r\n 'x': 93,\r\n 'y': 25,\r\n 'dy': '1.2em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '22'\r\n })\r\n .style({\r\n 'font-weight': '500',\r\n // 'letter-spacing': '1px'\r\n })\r\n .text(`$${data.reduce((total, obj) => total + obj.close + 15, 0)}`);\r\n\r\n\r\n guestWTPBlock.append('text')\r\n .attr({\r\n 'class': 'guest-wtp-value',\r\n 'id': 'guest-wtp-value',\r\n 'fill': '#fff',\r\n 'x': 99,\r\n 'y': 34,\r\n 'dy': '2.7em',\r\n 'text-anchor': 'middle',\r\n 'font-size': '12'\r\n })\r\n .text(`/night`);\r\n\r\n // const avgWTPPos = {\r\n // x: 1136,\r\n // y: 472\r\n // }\r\n // const avgWTPWrapper = currentProcess.append('g')\r\n // .attr({\r\n // 'class': 'avg-wtp-wrapper',\r\n // 'id': 'avg-wtp-wrapper',\r\n // 'opacity': 0,\r\n // 'transform': `translate(${avgWTPPos.x + 10}, ${avgWTPPos.y})`\r\n // })\r\n // .style('opacity', 0);\r\n\r\n // avgWTPWrapper.append('rect')\r\n // .attr({\r\n // 'x': 0,\r\n // 'y': 0,\r\n // 'width': 160,\r\n // 'height': 85,\r\n // 'rx': 45,\r\n // 'fill': '#65617d'\r\n // });\r\n\r\n // const avgTitle = avgWTPWrapper.append('text')\r\n // .attr({\r\n // 'fill': '#ffeae3',\r\n // 'x': 79,\r\n // 'y': 27,\r\n // 'dy': '0em',\r\n // 'text-anchor': 'middle',\r\n // 'font-size': '15'\r\n // })\r\n // .style({\r\n // 'letter-spacing': '1px'\r\n // })\r\n\r\n // avgTitle.append('tspan')\r\n // .text('AVERAGE');\r\n\r\n // avgTitle.append('tspan')\r\n // .style('font-weight', '500')\r\n // .text(' WTP');\r\n\r\n // const avgValueText = avgWTPWrapper.append('text')\r\n // .attr({\r\n // 'class': 'avg-wtp-value',\r\n // 'id': 'avg-wtp-value',\r\n // 'fill': '#fff',\r\n // 'x': 79,\r\n // 'y': 33,\r\n // 'dy': '1.2em',\r\n // 'text-anchor': 'middle',\r\n // 'font-size': '22'\r\n // })\r\n // .style({\r\n // 'font-weight': '500',\r\n // // 'letter-spacing': '1px'\r\n // })\r\n // .text(`$${data.reduce((total, obj) => total + obj.close + 15, 0)}`);\r\n\r\n\r\n // avgWTPWrapper.append('text')\r\n // .attr({\r\n // 'class': 'avg-wtp-value',\r\n // 'id': 'avg-wtp-value',\r\n // 'fill': '#fff',\r\n // 'x': 90,\r\n // 'y': 42,\r\n // 'dy': '2.7em',\r\n // 'text-anchor': 'middle',\r\n // 'font-size': '12'\r\n // })\r\n // .text(`/night`);\r\n\r\n const individualSegmentRightData = {\r\n titleText: {\r\n wholeText: [\r\n {\r\n text: 'Individual & Segment ',\r\n textStyle: {\r\n 'font-weight': 500\r\n }\r\n },\r\n {\r\n text: 'WTP'\r\n }\r\n ],\r\n text: 'Individual & Segment WTP',\r\n id: 'individual-segment-title',\r\n class: 'individual-segment-title screen-4-text',\r\n x: 320,\r\n y: 25,\r\n finalX: 320,\r\n finalY: 35,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 26,\r\n }\r\n },\r\n bottomText: {\r\n wholeText: [\r\n {\r\n text: 'Change '\r\n },\r\n {\r\n text: 'Guest’s attribute-level WTP',\r\n textStyle: {\r\n 'font-weight': 500,\r\n }\r\n },\r\n {\r\n text: ' to know the'\r\n },\r\n {\r\n text: ' Aggregated WTP',\r\n textStyle: {\r\n 'font-weight': 500,\r\n }\r\n },\r\n ],\r\n id: 'bottom-title-text-screen-4',\r\n class: 'bottom-title-text-screen-4 screen-4-text',\r\n x: 320,\r\n y: 145,\r\n dy: '0em',\r\n finalX: 320,\r\n finalY: 155,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 12,\r\n 'fill': '#65617d'\r\n }\r\n },\r\n imageData: [{\r\n id: 'right-image-background-screen-4',\r\n width: 626,\r\n height: 137,\r\n src: 'assets/images/adaptive-pricing/white_box_with_shadow.svg',\r\n x: 285,\r\n y: 99,\r\n finalX: 0,\r\n finalY: 37,\r\n class: 'screen-4 right center background animate screen-4-images',\r\n s: 0\r\n },\r\n {\r\n id: 'right-building-screen-4',\r\n height: 34,\r\n width: 35,\r\n src: 'assets/images/adaptive-pricing/building.svg',\r\n x: 78,\r\n y: 88.5,\r\n finalX: 78,\r\n finalY: 88.5,\r\n class: 'screen-4 right icon building animate screen-4-images',\r\n o: 0\r\n },\r\n {\r\n id: 'right-brand-screen-4',\r\n height: 45,\r\n width: 32,\r\n src: 'assets/images/adaptive-pricing/brand_sm_grey.svg',\r\n x: 152,\r\n y: 82,\r\n finalX: 152,\r\n finalY: 82,\r\n class: 'screen-4 right icon brand animate screen-4-images',\r\n o: 0\r\n },\r\n {\r\n id: 'right-location-screen-4',\r\n height: 45,\r\n width: 40,\r\n src: 'assets/images/adaptive-pricing/location_sm_grey.svg',\r\n x: 218,\r\n y: 82,\r\n finalX: 218,\r\n finalY: 82,\r\n class: 'screen-4 right icon location animate screen-4-images',\r\n o: 0\r\n },\r\n {\r\n id: 'right-star-screen-4',\r\n height: 44,\r\n width: 28,\r\n src: 'assets/images/adaptive-pricing/star_sm_grey.svg',\r\n x: 297,\r\n y: 84,\r\n finalX: 297,\r\n finalY: 84,\r\n class: 'screen-4 right icon star animate screen-4-images',\r\n o: 0\r\n },\r\n {\r\n id: 'right-review-screen-4',\r\n height: 43,\r\n width: 38,\r\n src: 'assets/images/adaptive-pricing/review_sm_grey.svg',\r\n x: 365,\r\n y: 74,\r\n finalX: 365,\r\n finalY: 84,\r\n class: 'screen-4 right icon review animate screen-4-images',\r\n o: 0\r\n },\r\n {\r\n id: 'right-discount-screen-4',\r\n height: 45,\r\n width: 40,\r\n src: 'assets/images/adaptive-pricing/discount_sm_grey.svg',\r\n x: 435,\r\n y: 83,\r\n finalX: 435,\r\n finalY: 83,\r\n class: 'screen-4 right icon discount animate screen-4-images',\r\n o: 0\r\n },\r\n {\r\n id: 'right-discount-screen-4',\r\n height: 45,\r\n width: 40,\r\n src: 'assets/images/adaptive-pricing/bed_type_sm_grey.svg',\r\n x: 505,\r\n y: 74,\r\n finalX: 505,\r\n finalY: 84,\r\n class: 'screen-4 right icon discount animate screen-4-images',\r\n o: 0\r\n },\r\n {\r\n id: 'right-discount-screen-4',\r\n height: 4,\r\n width: 22,\r\n src: 'assets/images/adaptive-pricing/three_dots_grey.svg',\r\n x: 555,\r\n y: 104,\r\n finalX: 555,\r\n finalY: 104,\r\n class: 'screen-4 right icon discount animate screen-4-images',\r\n o: 0\r\n }\r\n ]\r\n };\r\n\r\n const individualSegment = currentProcess.append('g')\r\n .attr({\r\n 'class': 'individual-segment-wrapper',\r\n 'id': 'individual-segment-wrapper'\r\n })\r\n .style({\r\n 'transform': `translate(${lineGraphTranslate.x - 96}px, 120px)`\r\n });\r\n\r\n createCenterBox(individualSegment, individualSegmentRightData);\r\n\r\n createTextUsingData(individualSegment, {\r\n wholeText: individualSegmentRightData.bottomText.wholeText\r\n , id: individualSegmentRightData.bottomText.id\r\n , x: individualSegmentRightData.bottomText.x\r\n , y: individualSegmentRightData.bottomText.y\r\n , finalX: individualSegmentRightData.bottomText.finalX\r\n , finalY: individualSegmentRightData.bottomText.finalY\r\n , dy: individualSegmentRightData.bottomText.dy\r\n , class: individualSegmentRightData.bottomText.class\r\n , textStyle: individualSegmentRightData.bottomText.textStyle\r\n , o: individualSegmentRightData.bottomText.o\r\n });\r\n\r\n function updateRightSection() {\r\n // // console.log('Inside updateRightSection: ', that.selectedTraveller);\r\n let updateGuestValue = 0;\r\n let updateSegmentValue = 0;\r\n that.pricingData.travellerDetails[that.selectedTraveller].attributes.hotel.forEach((hAttributes, index) => {\r\n const fixedGroup = fixedCircleWrapper.select(`.${hAttributes.id}`);\r\n\r\n fixedGroup.attr({\r\n 'transform': (d) => {\r\n d.close = hAttributes.defaultValue;\r\n return `translate(${x(d.date)}, ${y(d.close)})`\r\n }\r\n });\r\n fixedGroup.select('.fixed-circle-tooltip text')\r\n .text(d => `${that.pricingData.currencyUnit} ${d.close}`);\r\n updateSegmentValue += hAttributes.defaultValue;\r\n\r\n const draggableGroup = draggableCircleWrapper.select(`.${hAttributes.id}`);\r\n const dragTooltipGroup = draggableGroup.select('.drag-circle-tooltip');\r\n\r\n draggableGroup.attr({\r\n 'transform': (d) => {\r\n d.close = hAttributes.preferredValue;\r\n d.x = x(d.date);\r\n d.y = y(d.close);\r\n return `translate(${x(d.date)}, ${y(d.close)})`\r\n }\r\n });\r\n\r\n if (index == 0) {\r\n lineGraphWrapper.select('.hand-cursor')\r\n .attr({\r\n 'transform': (d) => {\r\n d.y = y(hAttributes.preferredValue)\r\n return `translate(${d.x}, ${d.y - 30})`\r\n }\r\n });\r\n }\r\n manageDraggableTooltip(dragTooltipGroup, hAttributes.preferredValue);\r\n dragTooltipGroup.select('text')\r\n .text(d => `${that.pricingData.currencyUnit} ${d.close}`);\r\n\r\n updateGuestValue += hAttributes.preferredValue;\r\n });\r\n segmentValueText.text(`$${updateSegmentValue}`);\r\n guestValueText.text(`$${updateGuestValue}`);\r\n // const avgValue = `${that.pricingData.currencyUnit}${((updateGuestValue + updateSegmentValue) / 2).toFixed(0)}`;\r\n // avgValueText.text(avgValue);\r\n }\r\n\r\n function initiateAnimation() {\r\n\r\n showImage(stepGroup, 'second-step-image', 0, 300, function () {\r\n showText(stepGroup, 'second-step', 0, 200, function () {\r\n showText(stepGroup, 'second-step-bottom-text', 0, 200, function () {\r\n showText(middleSectionAttrProps, 'title-center', 0, 250)\r\n showImage(middleSectionAttrProps, 'rrm-block', 0, 250, () => {\r\n showImage(middleSectionAttrProps, 'brain-image', 0, 250, () => {\r\n showText(middleSectionAttrProps, 'concept-title', 0, 200, () => {\r\n showText(middleSectionAttrProps, 'concept-props-1', 0, 200)\r\n showText(middleSectionAttrProps, 'concept-props-2', 200, 200, () => {\r\n initiateRightAnimation();\r\n operateLine(middleSectionModels, 'model-base-line', 'draw', 0, 300, () => {\r\n showImage(middleSectionModels, 'bottom-background', 0, 200, () => {\r\n showText(middleSectionModels, 'bottom-text', 100, 100, () => {\r\n\r\n })\r\n })\r\n })\r\n })\r\n })\r\n })\r\n })\r\n })\r\n })\r\n })\r\n }\r\n\r\n function initiateRightAnimation() {\r\n showImage(rightContainer, 'right-bg', 0, 300, () => {\r\n showText(individualSegment, 'individual-segment-title', 0, 250, () => { })\r\n showText(individualSegment, 'bottom-title-text-screen-4', 0, 250, () => { })\r\n showImage(individualSegment, 'center'\r\n , 0, 250, () => {\r\n individualSegment.selectAll('.icon')\r\n .transition()\r\n .delay((d, i) => i * 80)\r\n .duration(150)\r\n .style('opacity', 1)\r\n .attr({\r\n 'transform': (d: any) => `translate(${d.finalX}, ${d.finalY})`,\r\n })\r\n .call(endAll, function () {\r\n\r\n currentProcess.selectAll('.line-y-value-currency')\r\n .transition()\r\n .delay(0)\r\n .duration(300)\r\n .attr({\r\n 'opacity': 1\r\n });\r\n draggableCircleWrapper.selectAll(`.drag-circle-group`)\r\n .attr({\r\n 'opacity': 0\r\n });\r\n lineGraphWrapper\r\n .transition()\r\n .delay(0)\r\n .duration(300)\r\n .style({\r\n 'opacity': 1\r\n })\r\n .call(endAll, function () {\r\n animateDraggablePoints();\r\n\r\n // avgWTPWrapper\r\n // .transition()\r\n // .delay(0)\r\n // .duration(500)\r\n // .attr({\r\n // 'opacity': 1,\r\n // 'transform': (d: any) => `translate(${avgWTPPos.x}, ${avgWTPPos.y})`,\r\n // });\r\n\r\n segmentWTPWrapper\r\n .transition()\r\n .delay(0)\r\n .duration(300)\r\n .attr({\r\n 'opacity': 1,\r\n 'transform': (d: any) => `translate(1549, ${lineGraphTranslate.y + height + 6})`,\r\n });\r\n\r\n guestWTPWrapper\r\n .transition()\r\n .delay(0)\r\n .duration(300)\r\n .attr({\r\n 'opacity': 1,\r\n 'transform': (d: any) => `translate(1335, ${lineGraphTranslate.y + height + 6})`,\r\n })\r\n .call(endAll, function () {\r\n initialAnimationEnd();\r\n });\r\n })\r\n })\r\n })\r\n })\r\n }\r\n\r\n function initiateEndAnimation() {\r\n hideText(middleSectionModels, 'bottom-text', 0, 10, () => {\r\n hideImage(middleSectionModels, 'bottom-background', 0, 10, () => {\r\n operateLine(middleSectionModels, 'model-base-line', 'hide', 0, 10, () => {\r\n hideText(middleSectionAttrProps, 'concept-props-2', 0, 10)\r\n hideText(middleSectionAttrProps, 'concept-props-1', 0, 10, () => {\r\n hideText(middleSectionAttrProps, 'concept-title', 0, 10, () => {\r\n hideImage(middleSectionAttrProps, 'brain-image', 0, 10, () => {\r\n hideText(middleSectionAttrProps, 'title-center', 0, 10);\r\n hideImage(middleSectionAttrProps, 'rrm-block', 0, 10);\r\n hideImage(stepGroup, 'second-step-image', 0, 10, function () {\r\n hideText(stepGroup, 'second-step', 0, 10, function () {\r\n hideText(stepGroup, 'second-step-bottom-text', 0, 10, function () {\r\n });\r\n });\r\n });\r\n });\r\n });\r\n });\r\n });\r\n });\r\n });\r\n }\r\n\r\n function initiateEndRightAnimation() {\r\n\r\n // avgWTPWrapper\r\n // .transition()\r\n // .delay(0)\r\n // .duration(100)\r\n // .attr({\r\n // 'opacity': 0,\r\n // 'transform': (d: any) => `translate(${avgWTPPos.x + 10}, ${avgWTPPos.y})`,\r\n // })\r\n\r\n segmentWTPWrapper\r\n .transition()\r\n .delay(0)\r\n .duration(10)\r\n .attr({\r\n 'opacity': 0,\r\n 'transform': (d: any) => `translate(1549, ${lineGraphTranslate.y + height + 6 - 10})`,\r\n });\r\n\r\n guestWTPWrapper\r\n .transition()\r\n .delay(0)\r\n .duration(10)\r\n .attr({\r\n 'opacity': 0,\r\n 'transform': (d: any) => `translate(1335, ${lineGraphTranslate.y + height + 6 - 10})`,\r\n })\r\n .call(endAll, function () {\r\n currentProcess.selectAll('.line-y-value-currency')\r\n .transition()\r\n .delay(0)\r\n .duration(10)\r\n .attr({\r\n 'opacity': 0\r\n })\r\n lineGraphWrapper\r\n .transition()\r\n .delay(0)\r\n .duration(10)\r\n .style({\r\n 'opacity': 0\r\n })\r\n .call(endAll, function () {\r\n const selectIcons = individualSegment.selectAll('.icon')\r\n selectIcons[0].reverse();\r\n selectIcons\r\n .transition()\r\n .delay((d, i) => i * 10)\r\n .duration(10)\r\n .style('opacity', 0)\r\n .attr({\r\n 'transform': (d: any) => `translate(${d.x}, ${d.y})`,\r\n })\r\n .call(endAll, function () {\r\n hideImage(individualSegment, 'center', 0, 10, () => { })\r\n hideText(individualSegment, 'individual-segment-title', 0, 10, () => { })\r\n hideText(individualSegment, 'bottom-title-text-screen-4', 0, 10, () => {\r\n hideImage(rightContainer, 'right-bg', 0, 10, () => {\r\n initiateEndAnimation();\r\n })\r\n })\r\n })\r\n })\r\n })\r\n }\r\n\r\n function endAnimation() {\r\n initiateEndAnimation();\r\n }\r\n\r\n function resetElements() {\r\n // console.log('=================Inside screen4 hideElements function');\r\n operateLine(currentProcess, 'screen-4-lines', 'hide', 0, 0);\r\n hideImage(currentProcess, 'screen-4-images', 0, 0);\r\n hideText(currentProcess, 'screen-4-text', 0, 0);\r\n hideImage(rightContainer, 'right-bg', 0, 0);\r\n currentProcess.selectAll('.line-y-value-currency')\r\n .transition()\r\n .duration(0)\r\n .attr('opacity', 0);\r\n lineGraphWrapper.style('opacity', 0);\r\n // avgWTPWrapper.attr('opacity', 0);\r\n segmentWTPWrapper.attr('opacity', 0);\r\n guestWTPWrapper.attr('opacity', 0);\r\n }\r\n\r\n function initialAnimationEnd() {\r\n that.onAnimationEnd();\r\n }\r\n\r\n function animateHandCursor(index = true) {\r\n lineGraphWrapper.select('.hand-cursor')\r\n .style({\r\n 'opacity': d => {\r\n d.isAnimating = true;\r\n return 1\r\n },\r\n 'display': 'block'\r\n })\r\n .transition()\r\n .duration(350)\r\n .ease('linear')\r\n .attr({\r\n 'transform': d => {\r\n const offset = index ? 4 : -4;\r\n return `translate(${d.x}, ${d.y - 30 + offset}) scale(1)`\r\n }\r\n })\r\n .call(endAll, function (d, i) {\r\n if (d.isAnimating) {\r\n animateHandCursor(!index);\r\n } else {\r\n this.style.display = 'none';\r\n }\r\n });\r\n }\r\n\r\n function animateDraggablePoints(cb = function () { animateHandCursor() }) {\r\n // draggableCircleWrapper.selectAll(`.drag-circle-group`)\r\n // .attr('opacity', d => {\r\n // d.isDraggable = false;\r\n // return 1\r\n // })\r\n // .transition()\r\n // .delay(50)\r\n // .duration(180)\r\n // .ease('linear')\r\n // .attr('transform', (d) => `translate(${x(d.date)}, ${y(d.close + d.dragValues[index])})`)\r\n // .each('end', function (d) {\r\n // if (index == 4)\r\n // d.isDraggable = true;\r\n // })\r\n // .transition()\r\n // .duration(0)\r\n // .call(endAll, function (d, i) {\r\n // index++;\r\n // if (index < 4) {\r\n // if (index % 2 == 0)\r\n // animateDraggablePoints(index);\r\n // else\r\n // animateDraggablePoints(index);\r\n // } else if (index == 4) {\r\n // animateDraggablePoints(index);\r\n // } else if (index > 4) {\r\n // cb();\r\n // }\r\n // });\r\n\r\n draggableCircleWrapper.selectAll(`.drag-circle-group`)\r\n .attr({\r\n 'transform': (d) => {\r\n d.isDraggable = false;\r\n return `translate(${x(d.date)}, ${y(d.close - 10)})`\r\n }\r\n })\r\n .transition()\r\n .delay(50)\r\n .duration(500)\r\n .ease('linear')\r\n .attr({\r\n 'opacity': '1',\r\n 'transform': (d) => `translate(${x(d.date)}, ${y(d.close)})`\r\n })\r\n .each('end', function (d) {\r\n d.isDraggable = true;\r\n })\r\n .transition()\r\n .duration(100)\r\n .call(endAll, function (d, i) {\r\n cb();\r\n });\r\n }\r\n\r\n return {\r\n startAnimation(isFirst = false) {\r\n // console.log('screen-4 startAnimation');\r\n // that.isAnimation = true;\r\n // baseImage = '';\r\n // baseImage = '/assets/images/adaptive-pricing/4.png';\r\n // image.attr('xlink:href', baseImage);\r\n commonLeftSection.resetClass('expand');\r\n travellersWrapper.select(`.${that.selectedTraveller} .title-underline`)\r\n .attr({\r\n 'stroke': 'url(#traveller-selected-lg)',\r\n 'stroke-dashoffset': 0,\r\n 'opacity': 1\r\n });\r\n that.restrictScrollAndClick();\r\n updateRightSection();\r\n currentProcess.style('opacity', 1);\r\n initiateAnimation();\r\n // setTimeout(function () {\r\n // animateDraggablePoints()\r\n // }, 10000);\r\n },\r\n climaxAnimation() {\r\n // that.isAnimation = true;\r\n currentProcess.transition();\r\n that.restrictScrollAndClick();\r\n initiateEndRightAnimation()\r\n // endAnimation();\r\n // initiateEndAnimation()\r\n },\r\n stopAnimation() {\r\n // currentProcess.interrupt();\r\n currentProcess.style('opacity', 0);\r\n lineGraphWrapper.select('.hand-cursor')\r\n .style('opacity', d => {\r\n d.isAnimating = false;\r\n return '0'\r\n });\r\n },\r\n updateRightSection,\r\n resetElements() {\r\n resetElements();\r\n }\r\n }\r\n })();\r\n\r\n const screenFive = (() => {\r\n const currentProcess = dataGroup.append('g')\r\n .attr('id', 'screen-5-group')\r\n .attr('class', 'screen-5-group')\r\n .style('opacity', 0);\r\n\r\n const travelLeftLineGroup = currentProcess.append('g')\r\n .attr('class', 'travel-lines-screen-5');\r\n\r\n const travelLeftWTPGroup = currentProcess.append('g')\r\n .attr('class', 'traveller-wtp-screen-5');\r\n\r\n const stepData = {\r\n bottomText: {\r\n wholeText: [\r\n {\r\n text: 'WTP based rank-optimized hotel alternatives',\r\n dy: '0em',\r\n y: 0,\r\n x: 0\r\n },\r\n {\r\n text: ' to distribute tailored recommendations and offers',\r\n dy: '1.2em',\r\n y: 0,\r\n x: 0,\r\n }\r\n ],\r\n id: 'screen-5-step-bottom-text',\r\n class: 'screen-5 third-step-bottom-text screen-5-text',\r\n x: 818,\r\n y: 243,\r\n dy: '0em',\r\n finalX: 818,\r\n finalY: 253,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 18,\r\n 'font-weight': 400,\r\n 'fill': '#C94573'\r\n }\r\n },\r\n mainData: {\r\n id: 'screen-5-step-2',\r\n class: 'third-step-image step-background screen-5-images',\r\n x: 818,\r\n y: 176,\r\n finalX: 608,\r\n finalY: 116,\r\n width: 420,\r\n height: 160,\r\n src: '/assets/images/adaptive-pricing/step-bg.svg',\r\n o: 1,\r\n s: 0,\r\n text: {\r\n wholeText: [\r\n\r\n {\r\n text: 'Step 3:',\r\n dy: '0em',\r\n y: 0,\r\n x: 0,\r\n textStyle: {\r\n 'fill': '#C94573'\r\n }\r\n },\r\n {\r\n text: 'WTP Application',\r\n dy: '0em',\r\n y: 0,\r\n x: 66\r\n }\r\n ],\r\n id: 'screen-5-step-text',\r\n class: 'screen-5 third-step screen-5-text',\r\n x: 709,\r\n y: 193,\r\n dy: '0em',\r\n finalX: 709,\r\n finalY: 203,\r\n o: 0,\r\n textStyle: {\r\n // 'text-anchor': 'middle',\r\n 'font-size': 20,\r\n 'font-weight': 500,\r\n 'fill': '#3f3d56'\r\n }\r\n }\r\n }\r\n };\r\n\r\n const travelLeftLines = [{\r\n line: [[388, 325], [408, 325], [451, 617], [473, 617]],\r\n type: 'solo'\r\n }, {\r\n line: [[388, 487], [406, 487], [451, 617], [473, 617]],\r\n type: 'business'\r\n }, {\r\n line: [[388, 673], [410, 673], [451, 617], [473, 617]],\r\n type: 'couple'\r\n }, {\r\n line: [[388, 851], [406, 851], [451, 617], [473, 617]],\r\n type: 'group'\r\n }]\r\n\r\n travelLeftLines.forEach((data, index) => {\r\n const line = addDashedLine(travelLeftLineGroup, data.line, `screen-5 screen-5-lines travel-line ${data.type}`, '#65617d', '5,4');\r\n line.attr('stroke-dashoffset', (d) => d.pathLength);\r\n });\r\n\r\n const centerLeftLineGroup = currentProcess.append('g')\r\n .attr('class', 'center-left-lines-screen-5');\r\n\r\n const centerLeftLines = [{\r\n line: [[473, 617], [473, 497], [514, 472]],\r\n type: 'top'\r\n }, {\r\n line: [[473, 617], [473, 742], [514, 762]],\r\n type: 'bottom'\r\n }]\r\n\r\n centerLeftLines.forEach((data, index) => {\r\n const line = addDashedLine(centerLeftLineGroup, data.line, `screen-5 screen-5-lines center-left-line ${data.type}`, '#65617d', '5,4');\r\n line.attr('stroke-dashoffset', (d) => d.pathLength);\r\n })\r\n\r\n const middleSection = currentProcess.append('g')\r\n .attr('transform', 'translate(466, 390)');\r\n\r\n const stepGroup = currentProcess.append('g')\r\n .attr({\r\n 'class': 'screen-5-step-group',\r\n 'id': 'screen-5-step-group',\r\n 'transform': 'translate(0, 0)'\r\n });\r\n\r\n createImageUsingData(stepGroup, { ...stepData.mainData });\r\n\r\n createTextUsingData(stepGroup, { ...stepData.mainData.text });\r\n createTextUsingData(stepGroup, { ...stepData.bottomText });\r\n\r\n createTextUsingData(currentProcess, {\r\n wholeText: [{\r\n text: 'Attribute level WTP',\r\n textStyle: {\r\n 'font-weight': 500,\r\n }\r\n }],\r\n id: 'screen-other-title-text-screen-5',\r\n class: 'screen-other-title-text-screen-5 screen-5-text',\r\n x: 824,\r\n y: 333,\r\n dy: '0em',\r\n finalX: 824,\r\n finalY: 343,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 20,\r\n 'fill': '#3f3d56'\r\n }\r\n });\r\n\r\n const screenFiveCenterData = {\r\n titleText: {\r\n wholeText: [\r\n {\r\n text: 'Hotel ',\r\n textStyle: {\r\n 'font-weight': 500\r\n }\r\n },\r\n {\r\n text: 'Attributes'\r\n }\r\n ],\r\n text: 'Hotel Attributes',\r\n id: 'screen-title-text-screen-5',\r\n class: 'screen-title-text-screen-5 screen-5-text',\r\n x: 358,\r\n y: 4,\r\n finalX: 358,\r\n finalY: 14,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 20.5,\r\n 'fill': '#65617d'\r\n }\r\n },\r\n footerText: {\r\n wholeText: [{\r\n text: 'Attribute level',\r\n textStyle: {\r\n 'font-weight': 500,\r\n }\r\n },\r\n {\r\n text: ' WTP'\r\n }],\r\n id: 'footer-title-text-screen-5',\r\n class: 'footer-title-text-screen-5 screen-5-text',\r\n x: 353,\r\n y: 233,\r\n dy: '0em',\r\n finalX: 353,\r\n finalY: 243,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 20,\r\n 'letter-spacing': 0.1,\r\n 'fill': '#65617d'\r\n }\r\n },\r\n imageData: [{\r\n id: 'center-image-background-screen-5',\r\n width: 720,\r\n height: 280,\r\n src: 'assets/images/adaptive-pricing/double_box.svg',\r\n finalX: 0,\r\n finalY: 0,\r\n x: 353,\r\n y: 120,\r\n s: 0,\r\n class: 'screen-5 center background animate screen-5-images'\r\n }, {\r\n id: 'center-brand-screen-5',\r\n height: 65,\r\n width: 44,\r\n src: 'assets/images/adaptive-pricing/brand_red.svg',\r\n x: 121,\r\n y: 40,\r\n finalX: 121,\r\n finalY: 50,\r\n o: 0,\r\n class: 'screen-5 center icon brand animate screen-5-images'\r\n }, {\r\n id: 'center-location-screen-5',\r\n height: 65,\r\n width: 56,\r\n src: 'assets/images/adaptive-pricing/location_red.svg',\r\n x: 224,\r\n y: 40,\r\n finalX: 224,\r\n finalY: 50,\r\n o: 0,\r\n class: 'screen-5 center icon location animate screen-5-images'\r\n }, {\r\n id: 'center-star-screen-5',\r\n height: 64,\r\n width: 37,\r\n src: 'assets/images/adaptive-pricing/star_red.svg',\r\n x: 340,\r\n y: 42,\r\n finalX: 340,\r\n finalY: 52,\r\n o: 0,\r\n class: 'screen-5 center icon star animate screen-5-images'\r\n }, {\r\n id: 'center-review-screen-5',\r\n height: 62,\r\n width: 52,\r\n src: 'assets/images/adaptive-pricing/review_red.svg',\r\n x: 442,\r\n y: 43,\r\n finalX: 442,\r\n finalY: 53,\r\n o: 0,\r\n class: 'screen-5 center icon review animate screen-5-images'\r\n }, {\r\n id: 'center-discount-screen-5',\r\n height: 64,\r\n width: 56,\r\n src: 'assets/images/adaptive-pricing/discount_red.svg',\r\n x: 552,\r\n y: 42,\r\n finalX: 552,\r\n finalY: 52,\r\n o: 0,\r\n class: 'screen-5 center icon discount screen-5-images'\r\n }],\r\n connectors: [\r\n {\r\n x1: 142,\r\n x2: 142,\r\n y1: 125,\r\n y2: 142,\r\n class: 'screen-5 connector animate',\r\n stroke: '#b79e8f'\r\n },\r\n {\r\n x1: 252,\r\n x2: 252,\r\n y1: 125,\r\n y2: 142,\r\n class: 'screen-5 connector animate',\r\n stroke: '#b79e8f'\r\n },\r\n {\r\n x1: 360,\r\n x2: 360,\r\n y1: 125,\r\n y2: 142,\r\n class: 'screen-5 connector animate',\r\n stroke: '#b79e8f'\r\n },\r\n {\r\n x1: 468,\r\n x2: 468,\r\n y1: 125,\r\n y2: 142,\r\n class: 'screen-5 connector animate',\r\n stroke: '#b79e8f'\r\n },\r\n {\r\n x1: 580,\r\n x2: 580,\r\n y1: 125,\r\n y2: 142,\r\n class: 'screen-5 connector animate',\r\n stroke: '#b79e8f'\r\n },\r\n ],\r\n };\r\n\r\n createCenterBox(middleSection, screenFiveCenterData);\r\n\r\n const legendData = {\r\n textsContent: [\r\n {\r\n wholeText: [\r\n {\r\n text: 'Increase',\r\n textStyle: {\r\n 'font-weight': 500\r\n }\r\n }\r\n ],\r\n text: 'Increase',\r\n id: 'increase-indicator-text-screen-5',\r\n class: 'increase-indicator-text-screen-5',\r\n x: 160,\r\n y: 223,\r\n dy: '0em',\r\n finalX: 160,\r\n finalY: 223,\r\n o: 1,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 14,\r\n 'fill': '#10919f'\r\n }\r\n },\r\n {\r\n wholeText: [\r\n {\r\n text: 'Decrease',\r\n textStyle: {\r\n 'font-weight': 500\r\n }\r\n }\r\n ],\r\n text: 'Decrease',\r\n id: 'decrease-indicator-text-screen-5',\r\n class: 'decrease-indicator-text-screen-5',\r\n x: 242,\r\n y: 223,\r\n dy: '0em',\r\n finalX: 242,\r\n finalY: 223,\r\n o: 1,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 14,\r\n 'fill': '#a2487b'\r\n }\r\n },\r\n {\r\n wholeText: [\r\n {\r\n text: '( Variation of WTP from segment level based',\r\n dy: '0em',\r\n x: 0,\r\n y: 0,\r\n },\r\n {\r\n text: 'on guest’s individual heterogeneity )',\r\n dy: '1.1em',\r\n x: 30,\r\n y: 0,\r\n }\r\n ],\r\n text: '( Variation of WTP from segment level based on guest’s individual heterogeneity )',\r\n id: 'price-variation-text-screen-5',\r\n class: 'price-variation-text-screen-5',\r\n x: 322,\r\n y: 216,\r\n dy: '0em',\r\n finalX: 322,\r\n finalY: 216,\r\n o: 1,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 14,\r\n 'fill': '#65617d'\r\n }\r\n },\r\n ],\r\n imageData: [\r\n {\r\n id: 'increase-indicator-screen-5',\r\n height: 16,\r\n width: 6,\r\n src: 'assets/images/adaptive-pricing/green_up_arrow.svg',\r\n x: 147,\r\n y: 210.5,\r\n finalX: 147,\r\n finalY: 210.5,\r\n o: 1,\r\n class: 'screen-5 indicator increase-indicator'\r\n },\r\n {\r\n id: 'decrease-indicator-screen-5',\r\n height: 16,\r\n width: 6,\r\n src: 'assets/images/adaptive-pricing/red_down_arrow.svg',\r\n x: 229,\r\n y: 210.5,\r\n finalX: 229,\r\n finalY: 210.5,\r\n o: 1,\r\n class: 'screen-5 indicator decrease-indicator'\r\n }\r\n ]\r\n };\r\n\r\n const legendSection = middleSection.append('g')\r\n .attr({\r\n 'class': 'wtp-legend-section',\r\n 'id': 'wtp-legend-section',\r\n })\r\n .style('opacity', 0);\r\n\r\n legendData.textsContent.forEach((textContent, index) => {\r\n createTextUsingData(legendSection, textContent);\r\n });\r\n\r\n legendData.imageData.forEach((image, index) => {\r\n createImageUsingData(legendSection, image);\r\n });\r\n\r\n const middleBottomSection = currentProcess.append('g')\r\n .attr('transform', 'translate(488, 667)');\r\n\r\n const screenFiveBottomData = {\r\n titleText: {\r\n wholeText: [{\r\n text: 'In-room',\r\n textStyle: {\r\n 'font-weight': 500,\r\n }\r\n }, {\r\n text: ' Attributes',\r\n textStyle: {\r\n }\r\n }],\r\n id: 'screen-title-bottom-text-screen-5',\r\n class: 'screen-title-bottom-text-screen-5 screen-5-images',\r\n x: 336,\r\n y: 4,\r\n finalX: 336,\r\n finalY: 14,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 20.5,\r\n 'fill': '#3f3d56'\r\n }\r\n },\r\n footerText: {\r\n wholeText: [{\r\n text: '(In-room Attributes are also considered in WTP)',\r\n // textStyle: {\r\n // 'font-weight': 500,\r\n // }\r\n }\r\n // ,\r\n // {\r\n // text: ' WTP'\r\n // }\r\n ],\r\n id: 'footer-title-bottom-text-screen-5',\r\n class: 'footer-title-bottom-text-screen-5 screen-5-text',\r\n x: 336,\r\n y: 151,\r\n dy: '0em',\r\n finalX: 336,\r\n finalY: 161,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 14,\r\n 'letter-spacing': 0.1,\r\n 'fill': '#65617d'\r\n }\r\n },\r\n imageData: [\r\n {\r\n id: 'center-image-background-bottom-screen-5',\r\n width: 672,\r\n height: 172,\r\n src: 'assets/images/adaptive-pricing/box.svg',\r\n x: 353,\r\n y: 86,\r\n finalX: 0,\r\n finalY: 0,\r\n class: 'screen-5 center background animate screen-5-images',\r\n s: 0\r\n },\r\n {\r\n id: 'center-bed-screen-5',\r\n height: 60,\r\n width: 66,\r\n src: 'assets/images/adaptive-pricing/bed_grey.svg',\r\n x: 84,\r\n y: 50,\r\n finalX: 84,\r\n finalY: 60,\r\n class: 'screen-5 center icon bed animate screen-5-images',\r\n o: 0\r\n },\r\n {\r\n id: 'center-wifi-screen-5',\r\n height: 62,\r\n width: 96,\r\n src: 'assets/images/adaptive-pricing/wifi_grey.svg',\r\n x: 191,\r\n y: 48,\r\n finalX: 191,\r\n finalY: 58,\r\n class: 'screen-5 center icon wifi animate screen-5-images',\r\n o: 0\r\n },\r\n {\r\n id: 'center-bar-screen-5',\r\n height: 60,\r\n width: 63,\r\n src: 'assets/images/adaptive-pricing/bar_grey.svg',\r\n x: 328,\r\n y: 46,\r\n finalX: 328,\r\n finalY: 56,\r\n class: 'screen-5 center icon bar animate screen-5-images',\r\n o: 0\r\n },\r\n {\r\n id: 'center-balcony-screen-5',\r\n height: 62,\r\n width: 48,\r\n src: 'assets/images/adaptive-pricing/balcony_grey.svg',\r\n x: 431,\r\n y: 48,\r\n finalX: 431,\r\n finalY: 58,\r\n class: 'screen-5 center icon balcony animate screen-5-images',\r\n o: 0\r\n },\r\n {\r\n id: 'center-kitchen-screen-5',\r\n height: 62,\r\n width: 48,\r\n src: 'assets/images/adaptive-pricing/kitchen_grey.svg',\r\n x: 524,\r\n y: 47,\r\n finalX: 524,\r\n finalY: 57,\r\n class: 'screen-5 center icon kitchen animate screen-5-images',\r\n o: 0\r\n },\r\n ]\r\n };\r\n\r\n createCenterBox(middleBottomSection, screenFiveBottomData);\r\n\r\n const confValuesGroup = middleSection.append('g');\r\n\r\n screenFiveCenterData.connectors.forEach((connector, index) => {\r\n const group = confValuesGroup.append('g')\r\n .attr({\r\n 'class': `values-group ${that.pricingData.travellerDetails.solo.attributes.hotel[index].id}`,\r\n 'id': `values-group-${index}`\r\n });\r\n\r\n const dvCalculateGroup = group.append('g')\r\n .attr({\r\n 'class': 'dv-calculate-group',\r\n 'id': `dv-calculate-group-${index}`,\r\n });\r\n\r\n group.append('line')\r\n .attr({\r\n 'x1': connector.x1,\r\n 'x2': connector.x2,\r\n 'y1': connector.y1,\r\n 'y2': connector.y2,\r\n 'class': `${connector.class}`,\r\n 'id': `${connector.class || `line-${index}`}`,\r\n 'stroke': connector.stroke || '#65617d',\r\n })\r\n .style({\r\n 'opacity': 0\r\n });\r\n\r\n dvCalculateGroup\r\n .datum(connector)\r\n .attr({\r\n 'opacity': 0\r\n });\r\n\r\n group.append('text')\r\n .datum(connector)\r\n .attr({\r\n 'class': `selected-values new-wtp-value animate`,\r\n 'id': `selected-values-${index}`,\r\n 'x': connector.x1 - 2,\r\n 'y': connector.y2 + 37,\r\n 'dy': '0em',\r\n 'fill': '#65617d',\r\n 'font-size': '22',\r\n 'text-anchor': 'end',\r\n 'opacity': 0\r\n })\r\n .style({\r\n 'font-weight': '500'\r\n })\r\n .text(`$70`);\r\n\r\n createImageUsingData(dvCalculateGroup, {\r\n 'id': `dv-indicator-${index}`,\r\n 'class': `dv-indicator screen-5-images-2`,\r\n 'height': 16,\r\n 'width': 6,\r\n 'src': 'assets/images/adaptive-pricing/green_up_arrow.svg',\r\n // 'src': 'assets/images/adaptive-pricing/red_down_arrow.svg',\r\n 'x': connector.x1 + 2,\r\n 'y': connector.y2 + 10,\r\n });\r\n\r\n dvCalculateGroup.append('text')\r\n .datum(connector)\r\n .attr({\r\n 'class': `dv-values-deduct animate`,\r\n 'id': `dv-values-deduct-${index}`,\r\n 'x': connector.x1 + 10 + 2,\r\n 'y': connector.y2 + 10 + 14,\r\n 'dy': '0em',\r\n 'fill': '#10919f',\r\n 'font-size': '14',\r\n 'text-anchor': 'start'\r\n })\r\n .style({\r\n 'font-weight': '500'\r\n })\r\n .text(`$10`);\r\n });\r\n\r\n createTextUsingData(middleBottomSection, { ...screenFiveBottomData.footerText });\r\n\r\n const travelRightLineGroup = currentProcess.append('g')\r\n .attr('class', 'right-lines-screen-5');\r\n\r\n const travelRightLines = [{\r\n line: [[1135, 473], [1177, 495], [1177, 616]],\r\n type: 'top'\r\n }, {\r\n line: [[1135, 758], [1177, 732], [1177, 616]],\r\n type: 'bottom'\r\n }, {\r\n line: [[1178, 617], [1204, 615], [1231, 313], [1264, 312]],\r\n type: 'right'\r\n }];\r\n\r\n travelRightLines.forEach((data, index) => {\r\n const line = addDashedLine(travelRightLineGroup, data.line, `screen-5 screen-5-lines ${data.type} ${data.type}-line`, '#65617d', '5,4');\r\n line.attr('stroke-dashoffset', (d) => d.pathLength);\r\n });\r\n\r\n function updateMiddleSection() {\r\n // // console.log('screen-5 Inside updateMiddleSection');\r\n // drawLine(travelLeftLineGroup);\r\n that.pricingData.travellerDetails[that.selectedTraveller].attributes.hotel.forEach((hAttributes, index) => {\r\n const confGroup = confValuesGroup.select(`.${hAttributes.id}`);\r\n const dvCalGroup = confGroup.select(`.dv-calculate-group`);\r\n\r\n const dvCalculation = hAttributes.preferredValue - hAttributes.defaultValue;\r\n let dvColor = '#10919f';\r\n let dvText = `${that.pricingData.currencyUnit}${Math.abs(dvCalculation)}`;\r\n let dvSrc = 'assets/images/adaptive-pricing/green_up_arrow.svg';\r\n\r\n confGroup.select('.selected-values')\r\n .text(`${that.pricingData.currencyUnit}${hAttributes.preferredValue}`);\r\n\r\n if (dvCalculation < 0) {\r\n dvSrc = 'assets/images/adaptive-pricing/red_down_arrow.svg';\r\n dvColor = '#a2487b';\r\n } else if (dvCalculation == 0) {\r\n dvSrc = '';\r\n dvText = '';\r\n } else {\r\n dvSrc = 'assets/images/adaptive-pricing/green_up_arrow.svg';\r\n }\r\n\r\n dvCalGroup\r\n .each(d => {\r\n d.preferredValue = hAttributes.preferredValue;\r\n d.dvCalculation = dvCalculation;\r\n d.defaultValue = hAttributes.defaultValue;\r\n });\r\n\r\n dvCalGroup.select('.dv-indicator')\r\n .attr({\r\n 'xlink:href': dvSrc,\r\n });\r\n\r\n dvCalGroup.select('.dv-values-deduct')\r\n .text(dvText)\r\n .attr('fill', dvColor)\r\n });\r\n }\r\n\r\n function initStepAnimation(cb = function () { }) {\r\n showImage(stepGroup, 'third-step-image', 0, 300, function () {\r\n showText(stepGroup, 'third-step', 0, 200, function () {\r\n showText(stepGroup, 'third-step-bottom-text', 0, 200, function () {\r\n cb();\r\n })\r\n })\r\n })\r\n }\r\n\r\n function setUpdatedValue() {\r\n //add class(card-active) to right section\r\n that.addClassToDom('screen-five-right-section', that.htmlClassVariable.card);\r\n that.addClassToDom('screen-five-right-section #card-body-1', that.htmlClassVariable.hotelListLoader);\r\n updateGuestSegmentWTPValue();\r\n commonLeftSection.resetClass('expand');\r\n commonLeftSection.addClass('expand');\r\n travellersWrapper.select(`.${that.selectedTraveller} .title-underline`)\r\n .transition()\r\n .duration(80)\r\n .attr({\r\n 'stroke': 'url(#traveller-selected-lg)',\r\n 'stroke-dashoffset': 0,\r\n 'opacity': 0\r\n });\r\n animateLeftToRightSection(function () { initialAnimationEnded() });\r\n }\r\n\r\n function initiateAnimation(group, className, bottomTextClassName, cb = function () { }) {\r\n showText(group, className, 0, 500, () => { })\r\n showText(group, bottomTextClassName, 0, 500, () => { })\r\n showImage(group, 'center'\r\n , 0, 500, () => {\r\n group.selectAll('.icon')\r\n .transition()\r\n .delay((d, i) => i * 80)\r\n .duration(100)\r\n .style('opacity', 1)\r\n .attr({\r\n 'transform': (d: any) => `translate(${d.finalX}, ${d.finalY})`,\r\n })\r\n .call(endAll, function (d, i) {\r\n group.selectAll('.connector')\r\n .transition()\r\n // .delay((d, i) => 80)\r\n .duration(100)\r\n .style({\r\n 'opacity': 1,\r\n })\r\n .call(endAll, function (d, i) {\r\n // TODO\r\n cb();\r\n })\r\n })\r\n })\r\n }\r\n\r\n function updateGuestSegmentWTPValue() {\r\n let attributes = that.pricingData.travellerDetails[that.selectedTraveller].attributes.hotel;\r\n let totalValue = 0;\r\n attributes.forEach((attribute, index) => {\r\n totalValue += attribute.preferredValue;\r\n })\r\n that.guestSegmentWTP = totalValue;\r\n // console.log('guestSegmentWTP: ', that.guestSegmentWTP);\r\n that.updateHotelPrice();\r\n commonLeftSection.updateGuestSegmentWTPValueToDOM();\r\n }\r\n\r\n function initialAnimationEnded() {\r\n // console.log('All attributes have been visible');\r\n // TODO\r\n //add class(list-active) be added from here\r\n that.removeClassFromDom('screen-five-right-section #card-body-1', that.htmlClassVariable.hotelListLoader);\r\n that.addClassToDom('screen-five-right-section #card-body-1', that.htmlClassVariable.hotelList);\r\n that.onAnimationEnd();\r\n }\r\n\r\n function initiatEndAnimation(cb = function () { }) {\r\n legendSection\r\n .transition()\r\n .delay(10)\r\n .style({\r\n 'opacity': 0\r\n });\r\n middleSection.selectAll('.dv-calculate-group')\r\n .attr({\r\n 'opacity': 1,\r\n 'transform': (d: any) => `translate(${0}, ${0})`\r\n })\r\n .transition()\r\n .delay((d, i) => 10)\r\n .duration(10)\r\n .attr({\r\n 'opacity': 0,\r\n 'transform': (d: any) => `translate(${0}, ${d.dvCalculation < 0 ? -10 : 10})`\r\n })\r\n .call(endAll, function (d, i) {\r\n const newWtpValue = middleSection.selectAll('.new-wtp-value')\r\n newWtpValue[0].reverse();\r\n newWtpValue.attr({\r\n 'opacity': 1,\r\n 'transform': (d: any) => `translate(${0}, ${0})`\r\n })\r\n .transition()\r\n .delay((d, i) => i * 10)\r\n .duration(10)\r\n .attr({\r\n 'opacity': 0,\r\n 'transform': (d: any) => `translate(${-15}, ${0})`\r\n })\r\n .call(endAll, function (d, i) {\r\n const selectConnector = middleSection.selectAll('.connector')\r\n selectConnector[0].reverse();\r\n selectConnector\r\n .transition()\r\n .delay((d, i) => i * 10)\r\n .duration(10)\r\n .style({\r\n 'opacity': 0,\r\n })\r\n .call(endAll, function (d, i) {\r\n const selectIcon = middleSection.selectAll('.icon')\r\n selectIcon[0].reverse()\r\n selectIcon\r\n .transition()\r\n .delay((d, i) => i * 10)\r\n .duration(10)\r\n .style('opacity', 0)\r\n .attr({\r\n 'transform': (d: any) => `translate(${d.x}, ${d.y})`,\r\n })\r\n .call(endAll, function (d, i) {\r\n hideText(middleSection, 'screen-title-text-screen-5', 0, 10);\r\n hideText(middleSection, 'footer-title-text-screen-5', 0, 10);\r\n hideImage(middleSection, 'center', 0, 10);\r\n hideText(currentProcess, 'screen-other-title-text-screen-5', 0, 10);\r\n hideText(stepGroup, 'third-step-bottom-text', 0, 10);\r\n hideText(stepGroup, 'third-step', 0, 10, function () {\r\n hideImage(stepGroup, 'third-step-image', 0, 10, cb);\r\n })\r\n })\r\n })\r\n })\r\n })\r\n }\r\n\r\n function endBottomAnimation() {\r\n const selectIcon = middleBottomSection.selectAll('.icon')\r\n selectIcon[0].reverse()\r\n selectIcon\r\n .transition()\r\n .delay((d, i) => i * 10)\r\n .duration(10)\r\n .style('opacity', 0)\r\n .attr({\r\n 'transform': (d: any) => `translate(${d.x}, ${d.y})`,\r\n })\r\n .call(endAll, function (d, i) {\r\n hideText(middleBottomSection, 'screen-title-bottom-text-screen-5', 0, 10, () => { });\r\n hideText(middleBottomSection, 'footer-title-bottom-text-screen-5', 0, 10, () => { });\r\n hideImage(middleBottomSection, 'center', 0, 10);\r\n // hideText(stepGroup, 'third-step-bottom-text', 0, 100)\r\n // hideText(stepGroup, 'third-step', 0, 100, function () {\r\n // hideImage(stepGroup, 'third-step-image', 0, 100);\r\n // })\r\n })\r\n }\r\n\r\n function endAnimation() {\r\n //remove class(card-active) from right section\r\n that.removeClassFromDom('screen-five-right-section', that.htmlClassVariable.card);\r\n operateLine(travelRightLineGroup, 'right-line', 'hide', 0, 10, function () {\r\n operateLine(travelRightLineGroup, 'bottom-line', 'hide', 0, 10)\r\n operateLine(travelRightLineGroup, 'top-line', 'hide', 0, 10, function () {\r\n endBottomAnimation();\r\n initiatEndAnimation(function () {\r\n operateLine(centerLeftLineGroup, 'top', 'hide', 0, 10, function () {\r\n operateLine(travelLeftLineGroup, that.selectedTraveller, 'hide', 0, 10, function () {\r\n commonLeftSection.resetClass('expand');\r\n });\r\n })\r\n operateLine(centerLeftLineGroup, 'bottom', 'hide', 0, 10)\r\n });\r\n })\r\n });\r\n }\r\n\r\n function updateTravellerPreference() {\r\n //remove class(list-active) from right section\r\n that.removeClassFromDom('screen-five-right-section #card-body-1', that.htmlClassVariable.hotelList);\r\n that.addClassToDom('screen-five-right-section #card-body-1', that.htmlClassVariable.hotelListLoader);\r\n\r\n operateLine(travelRightLineGroup, 'right-line', 'hide', 0, 200, function () {\r\n operateLine(travelRightLineGroup, 'bottom-line', 'hide', 0, 200)\r\n operateLine(travelRightLineGroup, 'top-line', 'hide', 0, 200, function () {\r\n middleBottomSection.selectAll('.icon')\r\n .transition()\r\n .duration(5)\r\n .attr({\r\n 'xlink:href': (d: any) => d.src\r\n });\r\n middleSection.selectAll('.dv-calculate-group')\r\n .attr({\r\n 'opacity': 1,\r\n 'transform': (d: any) => `translate(${0}, ${0})`\r\n })\r\n .transition()\r\n .delay((d, i) => 80)\r\n .duration(100)\r\n .attr({\r\n 'opacity': 0,\r\n 'transform': (d: any) => `translate(${0}, ${d.dvCalculation < 0 ? -10 : 10})`\r\n })\r\n .call(endAll, function () {\r\n middleSection.selectAll('.new-wtp-value')\r\n .attr({\r\n 'opacity': 1,\r\n 'transform': (d: any) => `translate(${0}, ${0})`\r\n })\r\n .transition()\r\n .delay((d, i) => i * 50)\r\n .duration(100)\r\n .attr({\r\n 'opacity': 0,\r\n 'transform': (d: any) => `translate(${-15}, ${0})`\r\n })\r\n .call(endAll, function (d, i) {\r\n operateLine(centerLeftLineGroup, 'bottom', 'hide', 0, 200)\r\n operateLine(centerLeftLineGroup, 'top', 'hide', 0, 200, function () {\r\n operateLine(travelLeftLineGroup, 'screen-5-lines', 'hide', 0, 200, function () {\r\n // TODO\r\n //expand class to be added from here\r\n updateGuestSegmentWTPValue();\r\n commonLeftSection.resetClass('expand');\r\n commonLeftSection.addClass('expand');\r\n updateMiddleSection();\r\n animateLeftToRightSection(function () { initialAnimationEnded() });\r\n });\r\n })\r\n });\r\n });\r\n })\r\n });\r\n }\r\n\r\n function animateLeftToRightSection(cb = function () { }) {\r\n operateLine(travelLeftLineGroup, that.selectedTraveller, 'draw', 200, 400, function () {\r\n operateLine(centerLeftLineGroup, 'center-left-line', 'hide', 0, 0, function () {\r\n operateLine(centerLeftLineGroup, 'bottom', 'draw', 0, 400)\r\n operateLine(centerLeftLineGroup, 'top', 'draw', 0, 400, function () {\r\n updateIcons(middleBottomSection, 'inRoom');\r\n middleSection.selectAll('.new-wtp-value')\r\n .attr({\r\n 'opacity': 0,\r\n 'transform': (d: any) => `translate(${-15}, ${0})`\r\n })\r\n .transition()\r\n .delay((d, i) => i * 80)\r\n .duration(200)\r\n .attr({\r\n 'opacity': 1,\r\n 'transform': (d: any) => `translate(${0}, ${0})`\r\n })\r\n .call(endAll, function (d, i) {\r\n legendSection\r\n .transition()\r\n .duration(150)\r\n .style({\r\n 'opacity': 1\r\n });\r\n middleSection.selectAll('.dv-calculate-group')\r\n .attr({\r\n 'opacity': 0,\r\n 'transform': (d: any) => `translate(${0}, ${d.dvCalculation < 0 ? -10 : 10})`\r\n })\r\n .transition()\r\n .delay((d, i) => 80)\r\n .duration(250)\r\n .attr({\r\n 'opacity': 1,\r\n 'transform': (d: any) => `translate(${0}, ${0})`\r\n })\r\n .call(endAll, function () {\r\n operateLine(travelRightLineGroup, 'bottom-line', 'draw', 0, 400)\r\n operateLine(travelRightLineGroup, 'top-line', 'draw', 0, 400, function () {\r\n operateLine(travelRightLineGroup, 'right-line', 'draw', 0, 400, function () {\r\n cb();\r\n });\r\n });\r\n })\r\n });\r\n })\r\n\r\n })\r\n\r\n // operateLine(travelRightLineGroup, 'right-line', 'draw', 0, 700, function () {\r\n // initialAnimationEnded();\r\n // });\r\n })\r\n }\r\n\r\n function resetElements() {\r\n // console.log('=================Inside screen5 hideElements function');\r\n operateLine(currentProcess, 'screen-5-lines', 'hide', 0, 0);\r\n hideImage(currentProcess, 'screen-5-images', 0, 0);\r\n hideText(currentProcess, 'screen-5-text', 0, 0);\r\n legendSection.style('opacity', 0);\r\n currentProcess.selectAll('.dv-calculate-group')\r\n .transition()\r\n .duration(0)\r\n .attr('opacity', '0');\r\n currentProcess.selectAll('.new-wtp-value')\r\n .transition()\r\n .duration(0)\r\n .attr('opacity', '0');\r\n middleSection.selectAll('.connector')\r\n .transition()\r\n .duration(0)\r\n .style('opacity', '0');\r\n }\r\n\r\n return {\r\n startAnimation(isFirst = false) {\r\n // console.log('screen-5 startAnimation');\r\n // baseImage = '';\r\n // baseImage = '/assets/images/adaptive-pricing/5.png';\r\n // image.attr('xlink:href', baseImage);\r\n that.restrictScrollAndClick();\r\n updateMiddleSection();\r\n // console.log(that.previousTraversedSlide);\r\n currentProcess\r\n .transition()\r\n .delay(that.currentScrollDirection == 'forward' ? 0 : 2000)\r\n .duration(0)\r\n .style('opacity', 1)\r\n .call(endAll, function () {\r\n initStepAnimation(function () {\r\n showText(currentProcess, 'screen-other-title-text-screen-5', 0, 200, () => { })\r\n initiateAnimation(middleSection, 'screen-title-text-screen-5', 'footer-title-text-screen-5', function () { setUpdatedValue() });\r\n initiateAnimation(middleBottomSection, 'screen-title-bottom-text-screen-5', 'footer-title-bottom-text-screen-5', function () { });\r\n });\r\n });\r\n },\r\n climaxAnimation() {\r\n // that.isAnimation = true;\r\n currentProcess.transition();\r\n that.restrictScrollAndClick();\r\n endAnimation();\r\n },\r\n stopAnimation() {\r\n // currentProcess.interrupt();\r\n //remove class(list-active) from right section\r\n that.removeClassFromDom('screen-five-right-section #card-body-1', that.htmlClassVariable.hotelList);\r\n that.removeClassFromDom('screen-five-right-section #card-body-1', that.htmlClassVariable.hotelListLoader);\r\n commonLeftSection.resetClass('expand');\r\n currentProcess.style('opacity', 0);\r\n },\r\n updateMiddleSection,\r\n updateTravellerPreference,\r\n resetElements() {\r\n resetElements();\r\n },\r\n groups: {\r\n travelRightLineGroup\r\n }\r\n }\r\n })();\r\n\r\n const screenSix = (() => {\r\n const currentProcess = dataGroup.append('g')\r\n .attr('id', 'screen-6-group')\r\n .attr('class', 'screen-6-group')\r\n .style('opacity', 0);\r\n\r\n const travelLeftLineGroup = currentProcess.append('g')\r\n .attr('class', 'travel-lines-screen-6');\r\n\r\n const travelLeftLines = [\r\n {\r\n line: [[310, 320], [395, 320], [446, 570], [482, 570]],\r\n type: 'solo'\r\n },\r\n {\r\n line: [[310, 491], [395, 491], [446, 570], [482, 570]],\r\n type: 'business'\r\n },\r\n {\r\n line: [[310, 674], [395, 674], [446, 570], [482, 570]],\r\n type: 'couple'\r\n },\r\n {\r\n line: [[310, 848], [395, 848], [446, 570], [482, 570]],\r\n type: 'group'\r\n }\r\n ];\r\n\r\n travelLeftLines.forEach((data, index) => {\r\n const line = addDashedLine(travelLeftLineGroup, data.line, `screen-6 screen-6-lines travel-line ${data.type}`, '#65617d', '5,4');\r\n line.attr('stroke-dashoffset', (d) => d.pathLength);\r\n });\r\n\r\n // const centerLeftLineGroup = currentProcess.append('g')\r\n // .attr('class', 'center-left-lines-screen-6');\r\n\r\n const centerLeftLines = [\r\n {\r\n line: [[482, 542], [482, 361], [516, 328]],\r\n type: 'top'\r\n },\r\n {\r\n line: [[482, 542], [482, 772], [516, 814]],\r\n type: 'bottom'\r\n },\r\n {\r\n line: [[482, 500], [516, 500]],\r\n type: 'center-top'\r\n },\r\n {\r\n line: [[482, 664], [516, 664]],\r\n type: 'center-bottom'\r\n }\r\n ];\r\n\r\n centerLeftLines.forEach((data, index) => {\r\n const line = addDashedLine(travelLeftLineGroup, data.line, `screen-6 screen-6-lines center-left-line ${data.type}`, '#65617d', '5,4');\r\n line.attr('stroke-dashoffset', (d) => d.pathLength);\r\n });\r\n\r\n const middleTopSection = currentProcess.append('g')\r\n .attr('transform', 'translate(490, 240)');\r\n\r\n const screenSixTopData = {\r\n titleText: {\r\n wholeText: [{\r\n text: 'Hotel',\r\n textStyle: {\r\n 'font-weight': 500,\r\n }\r\n }, {\r\n text: ' Attributes',\r\n textStyle: {\r\n }\r\n }],\r\n id: 'screen-title-top-text-screen-6',\r\n class: 'screen-title-top-text-screen-6 screen-6-text',\r\n x: 334,\r\n y: 8,\r\n finalX: 334,\r\n finalY: 18,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 20.5,\r\n 'fill': '#3f3d56'\r\n }\r\n },\r\n imageData: [{\r\n id: 'center-image-background-top-screen-6',\r\n width: 672,\r\n height: 172,\r\n src: 'assets/images/adaptive-pricing/box.svg',\r\n x: 336,\r\n y: 86,\r\n finalX: 0,\r\n finalY: 0,\r\n class: 'screen-6 center background animate screen-6-images',\r\n s: 0\r\n }, {\r\n id: 'center-brand-screen-6',\r\n height: 65,\r\n width: 44,\r\n src: 'assets/images/adaptive-pricing/brand_grey.svg',\r\n x: 98,\r\n y: 45,\r\n finalX: 98,\r\n finalY: 55,\r\n class: 'screen-6 center icon brand animate screen-6-images',\r\n o: 0.3\r\n }, {\r\n id: 'center-location-screen-6',\r\n height: 65,\r\n width: 56,\r\n src: 'assets/images/adaptive-pricing/location_grey.svg',\r\n x: 200,\r\n y: 45,\r\n finalX: 200,\r\n finalY: 55,\r\n class: 'screen-6 center icon location animate screen-6-images',\r\n o: 0.3\r\n }, {\r\n id: 'center-star-screen-6',\r\n height: 64,\r\n width: 37,\r\n src: 'assets/images/adaptive-pricing/star_grey.svg',\r\n x: 318,\r\n y: 45,\r\n finalX: 318,\r\n finalY: 55,\r\n class: 'screen-6 center icon star animate screen-6-images',\r\n o: 0.3\r\n }, {\r\n id: 'center-review-screen-6',\r\n height: 62,\r\n width: 52,\r\n src: 'assets/images/adaptive-pricing/review_grey.svg',\r\n x: 418,\r\n y: 45,\r\n finalX: 418,\r\n finalY: 58,\r\n class: 'screen-6 center icon review animate screen-6-images',\r\n o: 0.3\r\n }, {\r\n id: 'center-discount-screen-6',\r\n height: 64,\r\n width: 56,\r\n src: 'assets/images/adaptive-pricing/discount_grey.svg',\r\n x: 530,\r\n y: 45,\r\n finalX: 530,\r\n finalY: 56,\r\n class: 'screen-6 center icon discount animate screen-6-images',\r\n o: 0.3\r\n }]\r\n };\r\n\r\n createCenterBox(middleTopSection, screenSixTopData);\r\n\r\n const middleBottomSection = currentProcess.append('g')\r\n .attr('transform', 'translate(490, 408)');\r\n\r\n const screenSixBottomData = {\r\n titleText: {\r\n wholeText: [{\r\n text: 'In-room',\r\n textStyle: {\r\n 'font-weight': 500,\r\n }\r\n }, {\r\n text: ' Attributes',\r\n textStyle: {\r\n }\r\n }],\r\n id: 'screen-title-bottom-text-screen-6',\r\n class: 'screen-title-bottom-text-screen-6 screen-6-text',\r\n x: 334,\r\n y: 8,\r\n finalX: 334,\r\n finalY: 18,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 20.5,\r\n 'fill': '#3f3d56'\r\n }\r\n },\r\n imageData: [\r\n {\r\n id: 'center-image-background-bottom-screen-6',\r\n width: 672,\r\n height: 172,\r\n src: 'assets/images/adaptive-pricing/box.svg',\r\n x: 336,\r\n y: 86,\r\n finalX: 0,\r\n finalY: 0,\r\n class: 'screen-6 center background animate screen-6-images',\r\n s: 0\r\n },\r\n {\r\n id: 'center-bed-screen-6',\r\n height: 60,\r\n width: 66,\r\n src: 'assets/images/adaptive-pricing/bed_grey.svg',\r\n x: 63,\r\n y: 46,\r\n finalX: 63,\r\n finalY: 56,\r\n class: 'screen-6 center icon bed animate screen-6-images',\r\n o: 0\r\n },\r\n {\r\n id: 'center-wifi-screen-6',\r\n height: 62,\r\n width: 96,\r\n src: 'assets/images/adaptive-pricing/wifi_grey.svg',\r\n x: 153,\r\n y: 44,\r\n finalX: 153,\r\n finalY: 54,\r\n class: 'screen-6 center icon wifi animate screen-6-images',\r\n o: 0\r\n },\r\n {\r\n id: 'center-bar-screen-6',\r\n height: 60,\r\n width: 63,\r\n src: 'assets/images/adaptive-pricing/bar_grey.svg',\r\n x: 277,\r\n y: 43,\r\n finalX: 277,\r\n finalY: 53,\r\n class: 'screen-6 center icon bar animate screen-6-images',\r\n o: 0\r\n },\r\n {\r\n id: 'center-balcony-screen-6',\r\n height: 62,\r\n width: 48,\r\n src: 'assets/images/adaptive-pricing/balcony_grey.svg',\r\n x: 383,\r\n y: 44,\r\n finalX: 383,\r\n finalY: 54,\r\n class: 'screen-6 center icon balcony animate screen-6-images',\r\n o: 0\r\n },\r\n {\r\n id: 'center-kitchen-screen-6',\r\n height: 62,\r\n width: 48,\r\n src: 'assets/images/adaptive-pricing/kitchen_grey.svg',\r\n x: 481,\r\n y: 42,\r\n finalX: 481,\r\n finalY: 52,\r\n class: 'screen-6 center icon kitchen animate screen-6-images',\r\n o: 0\r\n },\r\n {\r\n id: 'center-dining-screen-6',\r\n height: 62,\r\n width: 48,\r\n src: 'assets/images/adaptive-pricing/dining_grey.svg',\r\n x: 565,\r\n y: 43,\r\n finalX: 565,\r\n finalY: 53,\r\n class: 'screen-6 center icon dining animate screen-6-images',\r\n o: 0\r\n }\r\n ]\r\n };\r\n\r\n createCenterBox(middleBottomSection, screenSixBottomData);\r\n\r\n const centerRightLineGroup = currentProcess.append('g')\r\n .attr('class', 'center-right-lines-screen-6');\r\n\r\n const centerRightLines = [\r\n {\r\n line: [[1136, 326], [1172, 359], [1172, 570]],\r\n type: 'top'\r\n },\r\n {\r\n line: [[1136, 813], [1172, 772], [1172, 570]],\r\n type: 'bottom'\r\n },\r\n {\r\n line: [[1136, 500], [1172, 500]],\r\n type: 'center-top'\r\n },\r\n {\r\n line: [[1136, 664], [1172, 664]],\r\n type: 'center-bottom'\r\n },\r\n {\r\n line: [[1172, 570], [1198, 570], [1230, 356], [1259, 354]],\r\n type: 'right'\r\n }\r\n ];\r\n\r\n centerRightLines.forEach((data, index) => {\r\n const line = addDashedLine(centerRightLineGroup, data.line, `screen-6 screen-6-lines center-right-line ${data.type}`, '#65617d', '5,4');\r\n line.attr('stroke-dashoffset', (d) => d.pathLength);\r\n });\r\n\r\n const screenSixCurrentBookingIntent = {\r\n labelTextsContent: [\r\n {\r\n wholeText: [\r\n {\r\n text: 'Length of stay'\r\n }\r\n ],\r\n id: 'travel-type-label-text-screen-6',\r\n class: 'travel-type-label-text-screen-6 segment-profile-label segment-details screen-6-text',\r\n x: 88,\r\n y: 72,\r\n dy: '0em',\r\n finalX: 88,\r\n finalY: 72,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 14,\r\n 'fill': '#3f3d56',\r\n 'font-weight': 400\r\n }\r\n },\r\n {\r\n wholeText: [{\r\n text: 'Booking lead time'\r\n }],\r\n id: 'customer-type-label-text-screen-6',\r\n class: 'customer-type-label-text-screen-6 segment-profile-label segment-details screen-6-text',\r\n x: 352,\r\n y: 72,\r\n dy: '0em',\r\n finalX: 352,\r\n finalY: 72,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 14,\r\n 'fill': '#3f3d56',\r\n 'font-weight': 400\r\n }\r\n },\r\n {\r\n wholeText: [{\r\n text: 'Destination location'\r\n }],\r\n id: 'avg-length-of-stay-label-text-screen-6',\r\n class: 'avg-length-of-stay-label-text-screen-6 segment-profile-label segment-details screen-6-text',\r\n x: 88,\r\n y: 103,\r\n dy: '0em',\r\n finalX: 88,\r\n finalY: 103,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 14,\r\n 'fill': '#3f3d56',\r\n 'font-weight': 400\r\n }\r\n },\r\n {\r\n wholeText: [{\r\n text: 'Weekend/day travel'\r\n }],\r\n id: 'avg-price-label-text-screen-6',\r\n class: 'avg-price-label-text-screen-6 segment-profile-label segment-details screen-6-text',\r\n x: 352,\r\n y: 103,\r\n dy: '0em',\r\n finalX: 352,\r\n finalY: 103,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 14,\r\n 'fill': '#3f3d56',\r\n 'font-weight': 400\r\n }\r\n }\r\n ],\r\n answerTextsContent: [\r\n {\r\n wholeText: [\r\n {\r\n text: 'Travel type'\r\n }\r\n ],\r\n id: 'travel-type-answer-screen-6',\r\n class: 'travel-type-answer-screen-6 segment-profile-answer segment-details screen-6-text',\r\n x: 227,\r\n y: 72,\r\n dy: '0em',\r\n finalX: 227,\r\n finalY: 72,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 15,\r\n 'fill': '#C94573',\r\n 'font-weight': 500\r\n }\r\n },\r\n {\r\n wholeText: [{\r\n text: 'Cust. type'\r\n }],\r\n id: 'customer-type-answer-screen-6',\r\n class: 'customer-type-answer-screen-6 segment-profile-answer segment-details screen-6-text',\r\n x: 490,\r\n y: 72,\r\n dy: '0em',\r\n finalX: 490,\r\n finalY: 72,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 15,\r\n 'fill': '#C94573',\r\n 'font-weight': 500\r\n }\r\n },\r\n {\r\n wholeText: [{\r\n text: 'Avg. len. stay'\r\n }],\r\n id: 'avg-length-of-stay-answer-screen-6',\r\n class: 'avg-length-of-stay-answer-screen-6 segment-profile-answer segment-details screen-6-text',\r\n x: 227,\r\n y: 103,\r\n dy: '0em',\r\n finalX: 227,\r\n finalY: 103,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 15,\r\n 'fill': '#C94573',\r\n 'font-weight': 500\r\n }\r\n },\r\n {\r\n wholeText: [{\r\n text: 'Avg. price/night'\r\n }],\r\n id: 'avg-price-answer-screen-6',\r\n class: 'avg-price-answer-screen-6 segment-profile-answer segment-details screen-6-text',\r\n x: 490,\r\n y: 103,\r\n dy: '0em',\r\n finalX: 490,\r\n finalY: 103,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 15,\r\n 'fill': '#C94573',\r\n 'font-weight': 500\r\n }\r\n }\r\n ],\r\n titleBackgroundData: {\r\n titleText: {\r\n wholeText: [{\r\n text: 'Current',\r\n textStyle: {\r\n 'font-weight': 500,\r\n }\r\n }, {\r\n text: ' Booking Intent',\r\n textStyle: {\r\n }\r\n }],\r\n id: 'screen-title-segment-profile-text-screen-6',\r\n class: 'screen-title-segment-profile-text-screen-6 screen-6-text',\r\n x: 334,\r\n y: 8,\r\n finalX: 334,\r\n finalY: 18,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 20.5,\r\n 'fill': '#3f3d56'\r\n }\r\n },\r\n imageData: [\r\n {\r\n id: 'segment-profile-background-bottom-screen-6',\r\n width: 672,\r\n height: 172,\r\n src: 'assets/images/adaptive-pricing/box.svg',\r\n x: 336,\r\n y: 86,\r\n // x: 0,\r\n // y: 0,\r\n finalX: 0,\r\n finalY: 0,\r\n class: 'screen-6 bottom background animate segment-profile-bg screen-6-images',\r\n s: 0,\r\n // o: 1\r\n }]\r\n },\r\n };\r\n\r\n const segementProfileDataSection = currentProcess.append('g')\r\n .attr({\r\n 'class': 'segment-profile-section',\r\n 'id': 'segment-profile-section',\r\n 'transform': 'translate(490, 570)'\r\n });\r\n\r\n createCenterBox(segementProfileDataSection, screenSixCurrentBookingIntent.titleBackgroundData);\r\n\r\n const answerTextElement = [];\r\n\r\n screenSixCurrentBookingIntent.labelTextsContent.forEach((labelTextContent, index) => {\r\n const answerTextsContent = screenSixCurrentBookingIntent.answerTextsContent;\r\n createTextUsingData(segementProfileDataSection, labelTextContent);\r\n answerTextElement[index] = createTextUsingData(segementProfileDataSection, answerTextsContent[index]);\r\n });\r\n\r\n const screenSixHistoricPreferenceData = {\r\n labelTextsContent: [\r\n {\r\n wholeText: [\r\n {\r\n text: 'Past dollars spent'\r\n }\r\n ],\r\n id: 'travel-type-label-text-screen-6',\r\n class: 'travel-type-label-text-screen-6 historical-preference-label historical-details screen-6-text',\r\n x: 88,\r\n y: 72,\r\n dy: '0em',\r\n finalX: 88,\r\n finalY: 72,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 14,\r\n 'fill': '#3f3d56',\r\n 'font-weight': 400\r\n }\r\n },\r\n {\r\n wholeText: [{\r\n text: 'Past star rating ref'\r\n }],\r\n id: 'customer-type-label-text-screen-6',\r\n class: 'customer-type-label-text-screen-6 historical-preference-label historical-details screen-6-text',\r\n x: 352,\r\n y: 72,\r\n dy: '0em',\r\n finalX: 352,\r\n finalY: 72,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 14,\r\n 'fill': '#3f3d56',\r\n 'font-weight': 400\r\n }\r\n },\r\n {\r\n wholeText: [{\r\n text: 'Past total night',\r\n dy: '0em',\r\n x: 0,\r\n },\r\n {\r\n text: 'stayed',\r\n dy: '1.2em',\r\n x: 0,\r\n }],\r\n id: 'avg-length-of-stay-label-text-screen-6',\r\n class: 'avg-length-of-stay-label-text-screen-6 historical-preference-label historical-details screen-6-text',\r\n x: 88,\r\n y: 103,\r\n dy: '0em',\r\n finalX: 88,\r\n finalY: 103,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 14,\r\n 'fill': '#3f3d56',\r\n 'font-weight': 400\r\n }\r\n },\r\n {\r\n wholeText: [{\r\n text: 'Past ancillary',\r\n dy: '0em',\r\n x: 0,\r\n },\r\n {\r\n text: 'interactions',\r\n dy: '1.2em',\r\n x: 0,\r\n }],\r\n id: 'avg-price-label-text-screen-6',\r\n class: 'avg-price-label-text-screen-6 historical-preference-label historical-details screen-6-text',\r\n x: 352,\r\n y: 103,\r\n dy: '0em',\r\n finalX: 352,\r\n finalY: 103,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 14,\r\n 'fill': '#3f3d56',\r\n 'font-weight': 400\r\n }\r\n }\r\n ],\r\n answerTextsContent: [\r\n {\r\n wholeText: [\r\n {\r\n text: 'Travel type'\r\n }\r\n ],\r\n id: 'travel-type-answer-screen-6',\r\n class: 'travel-type-answer-screen-6 historical-preference-answer historical-details screen-6-text',\r\n x: 227,\r\n y: 72,\r\n dy: '0em',\r\n finalX: 227,\r\n finalY: 72,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 15,\r\n 'fill': '#C94573',\r\n 'font-weight': 500\r\n }\r\n },\r\n {\r\n wholeText: [{\r\n text: 'Cust. type'\r\n }],\r\n id: 'customer-type-answer-screen-6',\r\n class: 'customer-type-answer-screen-6 historical-preference-answer historical-details screen-6-text',\r\n x: 490,\r\n y: 72,\r\n dy: '0em',\r\n finalX: 490,\r\n finalY: 72,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 15,\r\n 'fill': '#C94573',\r\n 'font-weight': 500\r\n }\r\n },\r\n {\r\n wholeText: [{\r\n text: 'Avg. len. stay'\r\n }],\r\n id: 'avg-length-of-stay-answer-screen-6',\r\n class: 'avg-length-of-stay-answer-screen-6 historical-preference-answer historical-details screen-6-text',\r\n x: 227,\r\n y: 103,\r\n dy: '0em',\r\n finalX: 227,\r\n finalY: 103,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 15,\r\n 'fill': '#C94573',\r\n 'font-weight': 500\r\n }\r\n },\r\n {\r\n wholeText: [{\r\n text: 'Avg. price/night'\r\n }],\r\n id: 'avg-price-answer-screen-6',\r\n class: 'avg-price-answer-screen-6 historical-preference-answer historical-details screen-6-text',\r\n x: 490,\r\n y: 103,\r\n dy: '0em',\r\n finalX: 490,\r\n finalY: 103,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'start',\r\n 'font-size': 15,\r\n 'fill': '#C94573',\r\n 'font-weight': 500\r\n }\r\n }\r\n ],\r\n titleBackgroundData: {\r\n titleText: {\r\n wholeText: [{\r\n text: 'Guest\\'s',\r\n textStyle: {\r\n 'font-weight': 500,\r\n }\r\n }, {\r\n text: ' Historical Preferences',\r\n textStyle: {\r\n }\r\n }],\r\n id: 'screen-title-historical-preference-text-screen-6',\r\n class: 'screen-title-historical-preference-text-screen-6 screen-6-text',\r\n x: 334,\r\n y: 10,\r\n finalX: 334,\r\n finalY: 20,\r\n o: 0,\r\n textStyle: {\r\n 'text-anchor': 'middle',\r\n 'font-size': 20.5,\r\n 'fill': '#3f3d56'\r\n }\r\n },\r\n imageData: [\r\n {\r\n id: 'segment-profile-background-bottom-screen-6',\r\n width: 672,\r\n height: 172,\r\n src: 'assets/images/adaptive-pricing/historic_box.svg',\r\n x: 336,\r\n y: 86,\r\n // x: 0,\r\n // y: 0,\r\n finalX: 0,\r\n finalY: 0,\r\n class: 'screen-6 bottom background animate historical-preference-bg screen-6-images',\r\n s: 0,\r\n // o: 1\r\n }]\r\n },\r\n };\r\n\r\n const segementHistoricPreferenceSection = currentProcess.append('g')\r\n .attr({\r\n 'class': 'segment-historic-preference-section',\r\n 'id': 'segment-historic-preference-section',\r\n 'transform': 'translate(490, 720)'\r\n });\r\n\r\n createCenterBox(segementHistoricPreferenceSection, screenSixHistoricPreferenceData.titleBackgroundData);\r\n\r\n const historicPreferenceAnswerTextElement = [];\r\n\r\n screenSixHistoricPreferenceData.labelTextsContent.forEach((labelTextContent, index) => {\r\n const answerTextsContent = screenSixHistoricPreferenceData.answerTextsContent;\r\n createTextUsingData(segementHistoricPreferenceSection, labelTextContent);\r\n historicPreferenceAnswerTextElement[index] = createTextUsingData(segementHistoricPreferenceSection, answerTextsContent[index]);\r\n });\r\n\r\n function startMiddleSectionAnimation(group, className, cb = function () { }) {\r\n showText(group, className, 0, 500, function () { });\r\n showImage(group, 'center'\r\n , 0, 500, function () {\r\n group.selectAll('.icon')\r\n .transition()\r\n .delay((d, i) => i * 80)\r\n .duration(100)\r\n .style('opacity', 0.3)\r\n .attr({\r\n 'xlink:href': (d: any) => d.src,\r\n 'transform': (d: any) => `translate(${d.finalX}, ${d.finalY})`\r\n })\r\n .call(endAll, function (d, i) {\r\n // console.log('All attributes have been visible');\r\n cb();\r\n })\r\n }\r\n )\r\n }\r\n\r\n function resetIconsLinesAndStartSelectedTravellertraverse() {\r\n hideText(segementProfileDataSection, 'segment-profile-answer', 0, 5);\r\n hideText(segementHistoricPreferenceSection, 'historical-preference-answer', 0, 5);\r\n currentProcess.selectAll('.icon')\r\n .transition()\r\n .duration(5)\r\n .attr({\r\n 'xlink:href': (d: any) => d.src\r\n })\r\n .style('opacity', 0.3)\r\n .call(endAll, function (d, i) {\r\n operateLine(travelLeftLineGroup, 'bottom', 'hide', 0, 100);\r\n operateLine(travelLeftLineGroup, 'center-bottom', 'hide', 0, 100);\r\n operateLine(travelLeftLineGroup, 'center-top', 'hide', 0, 100);\r\n operateLine(travelLeftLineGroup, 'top', 'hide', 0, 100,\r\n function () {\r\n startLeftToMiddleToRightAnimation();\r\n });\r\n });\r\n }\r\n\r\n function updateTravellerPreference(cb = resetIconsLinesAndStartSelectedTravellertraverse, removeClass = true) {\r\n // console.log('Screen six updateTravellerPreference');\r\n if (removeClass) {\r\n //remove class(list-active) from reight section\r\n that.removeClassFromDom('screen-six-right-section #card-body-1', that.htmlClassVariable.hotelList);\r\n that.addClassToDom('screen-six-right-section #card-body-1', that.htmlClassVariable.hotelListLoader);\r\n }\r\n operateLine(centerRightLineGroup, 'right', 'hide', 0, removeClass ? 100 : 10,\r\n function () {\r\n operateLine(centerRightLineGroup, 'top', 'hide', 0, removeClass ? 100 : 10);\r\n operateLine(centerRightLineGroup, 'center-top', 'hide', 0, removeClass ? 100 : 10);\r\n operateLine(centerRightLineGroup, 'center-bottom', 'hide', 0, removeClass ? 100 : 10);\r\n operateLine(centerRightLineGroup, 'bottom', 'hide', 0, removeClass ? 100 : 10,\r\n cb);\r\n });\r\n }\r\n\r\n function startLeftToMiddleToRightAnimation() {\r\n // console.log('Screen 6 Lines animation started');\r\n operateLine(travelLeftLineGroup, 'travel-line', 'hide', 0, 0, () =>\r\n operateLine(travelLeftLineGroup, that.selectedTraveller, 'draw', 0, 400,\r\n function () {\r\n operateLine(travelLeftLineGroup, 'center-left-line', 'hide', 0, 0,\r\n function () {\r\n operateLine(travelLeftLineGroup, 'bottom', 'draw', 0, 400, function () { updateTravellerDetailsInGuestsHistoricalPreferences(); });\r\n operateLine(travelLeftLineGroup, 'center-bottom', 'draw', 0, 400, function () { updateTravellerDetailsInCurrentBookingIntent(); });\r\n operateLine(travelLeftLineGroup, 'center-top', 'draw', 0, 400, function () { updateIcons(middleBottomSection, 'inRoom'); });\r\n operateLine(travelLeftLineGroup, 'top', 'draw', 0, 400, function () {\r\n updateIcons(middleTopSection, 'hotel', function () {\r\n operateLine(centerRightLineGroup, 'center-right-line', 'hide', 50, 0,\r\n function () {\r\n operateLine(centerRightLineGroup, 'top', 'draw', 0, 400);\r\n operateLine(centerRightLineGroup, 'center-top', 'draw', 0, 400);\r\n operateLine(centerRightLineGroup, 'center-bottom', 'draw', 0, 400);\r\n operateLine(centerRightLineGroup, 'bottom', 'draw', 0, 400,\r\n function () {\r\n operateLine(centerRightLineGroup, 'right', 'draw', 0, 400, function () {\r\n initialAnimationEnd();\r\n });\r\n });\r\n });\r\n });\r\n });\r\n });\r\n })\r\n );\r\n }\r\n\r\n function initialAnimationEnd() {\r\n //add class(list-active) to right section card-body\r\n that.removeClassFromDom('screen-six-right-section #card-body-1', that.htmlClassVariable.hotelListLoader);\r\n that.addClassToDom('screen-six-right-section #card-body-1', that.htmlClassVariable.hotelList);\r\n that.onAnimationEnd();\r\n }\r\n\r\n function initiateAnimation() {\r\n // updateIcons(middleTopSection);\r\n // updateIcons(middleBottomSection);\r\n startMiddleSectionAnimation(middleTopSection, 'screen-title-top-text-screen-6');\r\n startMiddleSectionAnimation(middleBottomSection, 'screen-title-bottom-text-screen-6', function () {\r\n //add class(card-active) to right section\r\n that.addClassToDom('screen-six-right-section', that.htmlClassVariable.card);\r\n that.addClassToDom('screen-six-right-section #card-body-1', that.htmlClassVariable.hotelListLoader);\r\n startLeftToMiddleToRightAnimation();\r\n });\r\n showText(segementProfileDataSection, 'screen-title-segment-profile-text-screen-6', 0, 500, function () { });\r\n showImage(segementProfileDataSection, 'segment-profile-bg', 0, 500, function () {\r\n showText(segementProfileDataSection, 'segment-profile-label', 0, 200);\r\n });\r\n showText(segementHistoricPreferenceSection, 'screen-title-historical-preference-text-screen-6', 0, 500, function () { });\r\n showImage(segementHistoricPreferenceSection, 'historical-preference-bg', 0, 500, function () {\r\n showText(segementHistoricPreferenceSection, 'historical-preference-label', 0, 200);\r\n });\r\n }\r\n\r\n function updateTravellerDetailsInCurrentBookingIntent() {\r\n // console.log(\"selectedTravellerData\", that.selectedTravellerData);\r\n const travellerHistoryDetails = that.selectedTravellerData.historyData;\r\n answerTextElement[0].select('tspan').text(travellerHistoryDetails.lengthOfStay);\r\n answerTextElement[1].select('tspan').text(travellerHistoryDetails.bookingLeadTime);\r\n answerTextElement[2].select('tspan').text(travellerHistoryDetails.destinationLocation);\r\n answerTextElement[3].select('tspan').text(travellerHistoryDetails.weekendDayTravel);\r\n // answerTextElement[4].select('tspan').text(travellerHistoryDetails.checkInDays);\r\n // answerTextElement[5].select('tspan').text(travellerHistoryDetails.averageReviewScore);\r\n showText(segementProfileDataSection, 'segment-profile-answer', 0, 250);\r\n }\r\n\r\n function updateTravellerDetailsInGuestsHistoricalPreferences() {\r\n // console.log(\"selectedTravellerData\", that.selectedTravellerData);\r\n const travellerHistoryDetails = that.selectedTravellerData.historyData;\r\n historicPreferenceAnswerTextElement[0].select('tspan').text(`${that.pricingData.currencyUnit}${travellerHistoryDetails.pastDollarSpent}/night`);\r\n historicPreferenceAnswerTextElement[1].select('tspan').text(travellerHistoryDetails.pastStarRatingReference);\r\n historicPreferenceAnswerTextElement[2].select('tspan').text(travellerHistoryDetails.pastTotalNightStayed);\r\n historicPreferenceAnswerTextElement[3].select('tspan').text(travellerHistoryDetails.pastAncillaryInteractions);\r\n // answerTextElement[4].select('tspan').text(travellerHistoryDetails.checkInDays);\r\n // answerTextElement[5].select('tspan').text(travellerHistoryDetails.averageReviewScore);\r\n showText(segementHistoricPreferenceSection, 'historical-preference-answer', 0, 250);\r\n }\r\n\r\n function hideMiddleBackground(group, className) {\r\n currentProcess.selectAll('.icon')\r\n .transition()\r\n .duration(0)\r\n .attr({\r\n 'xlink:href': (d: any) => d.src\r\n })\r\n .style('opacity', '0');\r\n hideImage(group, 'center', 0, 0);\r\n hideText(group, className, 0, 0);\r\n }\r\n\r\n function initiateEndAnimation(group, className, cb = function () { }) {\r\n // console.log('Inside endAnimation');\r\n const selection = group.selectAll('.icon')\r\n selection[0].reverse();\r\n selection\r\n .transition()\r\n .delay((d, i) => i * 10)\r\n .duration(10)\r\n .style('opacity', 0)\r\n .attr({\r\n 'transform': (d: any) => `translate(${d.x}, ${d.y})`,\r\n 'xlink:href': (d: any) => d.src\r\n })\r\n .call(endAll, function () {\r\n hideImage(group, 'center', 0, 10)\r\n hideText(group, className, 0, 10,\r\n cb);\r\n })\r\n }\r\n\r\n function endAnimation() {\r\n that.removeClassFromDom('screen-six-right-section', that.htmlClassVariable.card);\r\n updateTravellerPreference(function () {\r\n hideText(segementProfileDataSection, 'segment-details', 0, 10, function () {\r\n hideText(segementProfileDataSection, 'screen-title-segment-profile-text-screen-6', 0, 10);\r\n hideImage(segementProfileDataSection, 'segment-profile-bg', 0, 10);\r\n\r\n // hideText(segementHistoricPreferenceSection, 'screen-title-historical-preference-text-screen-6', 0, 10);\r\n // hideImage(segementHistoricPreferenceSection, 'historical-preference-bg', 0, 10);\r\n });\r\n\r\n hideText(segementHistoricPreferenceSection, 'historical-details', 0, 10, function () {\r\n hideText(segementHistoricPreferenceSection, 'screen-title-historical-preference-text-screen-6', 0, 10);\r\n hideImage(segementHistoricPreferenceSection, 'historical-preference-bg', 0, 10);\r\n });\r\n\r\n initiateEndAnimation(middleTopSection, 'screen-title-top-text-screen-6')\r\n initiateEndAnimation(middleBottomSection, 'screen-title-bottom-text-screen-6',\r\n function () {\r\n operateLine(travelLeftLineGroup, 'bottom', 'hide', 0, 10);\r\n operateLine(travelLeftLineGroup, 'center-bottom', 'hide', 0, 10);\r\n operateLine(travelLeftLineGroup, 'center-top', 'hide', 0, 10);\r\n operateLine(travelLeftLineGroup, 'top', 'hide', 0, 10,\r\n function () {\r\n operateLine(travelLeftLineGroup, 'travel-line', 'hide', 0, 10);\r\n });\r\n });\r\n }, false);\r\n }\r\n\r\n // function updateTravellerPreference() {\r\n // // drawLine(travelLeftLineGroup);\r\n\r\n // updateIcons(middleTopSection);\r\n // updateIcons(middleBottomSection);\r\n // }\r\n function resetElements() {\r\n // console.log('=================Inside screen6 hideElements function');\r\n operateLine(currentProcess, 'screen-6-lines', 'hide', 0, 0);\r\n hideImage(currentProcess, 'screen-6-images', 0, 0);\r\n hideText(currentProcess, 'screen-6-text', 0, 0);\r\n hideMiddleBackground(middleTopSection, 'screen-title-top-text-screen-6');\r\n hideMiddleBackground(middleBottomSection, 'screen-title-bottom-text-screen-6');\r\n }\r\n\r\n return {\r\n startAnimation(isFirst = false) {\r\n // // console.log('screen-6 startAnimation');\r\n // baseImage = '';\r\n // baseImage = '/assets/images/adaptive-pricing/6.png';\r\n // image.attr('xlink:href', baseImage);\r\n commonLeftSection.resetClass('expand');\r\n that.restrictScrollAndClick();\r\n travellersWrapper.select(`.${that.selectedTraveller} .title-underline`)\r\n .attr({\r\n 'stroke': 'url(#traveller-selected-lg)',\r\n 'stroke-dashoffset': 0,\r\n 'opacity': 1\r\n });\r\n currentProcess\r\n .transition()\r\n .delay(2000)\r\n .style('opacity', 1)\r\n .call(endAll, function () {\r\n initiateAnimation();\r\n })\r\n },\r\n climaxAnimation() {\r\n currentProcess.transition();\r\n that.restrictScrollAndClick();\r\n endAnimation();\r\n },\r\n stopAnimation() {\r\n // currentProcess.interrupt();\r\n that.removeClassFromDom('screen-six-right-section #card-body-1', that.htmlClassVariable.hotelList);\r\n that.removeClassFromDom('screen-six-right-section #card-body-1', that.htmlClassVariable.hotelListLoader);\r\n currentProcess.style('opacity', 0);\r\n },\r\n updateTravellerPreference,\r\n resetElements() {\r\n resetElements();\r\n },\r\n groups: {\r\n centerRightLineGroup\r\n }\r\n }\r\n })();\r\n\r\n\r\n const travellersData = [\r\n {\r\n id: 'solo',\r\n class: 'solo',\r\n isDefault: false,\r\n x: 0,\r\n y: 0,\r\n rx: 65,\r\n width: 180,\r\n height: 130,\r\n imageURL: '',\r\n isShadow: true,\r\n title: 'Solo Traveller',\r\n color: '#FFFFFF',\r\n duration: 650,\r\n delay: 100,\r\n shadow: {\r\n x: 40,\r\n y: 112,\r\n rx: 65,\r\n height: 5,\r\n width: 100,\r\n color: '#e6e6e6'\r\n },\r\n titleLine: [[88, 1], [268, 2]],\r\n },\r\n {\r\n id: 'business',\r\n class: 'business',\r\n isDefault: false,\r\n x: 0,\r\n y: 175,\r\n rx: 65,\r\n width: 180,\r\n height: 130,\r\n imageURL: '',\r\n isShadow: true,\r\n title: 'Business Traveller',\r\n color: '#FFFFFF',\r\n duration: 650,\r\n delay: 400,\r\n shadow: {\r\n x: 43,\r\n y: 280,\r\n rx: 65,\r\n height: 7,\r\n width: 100,\r\n color: '#e6e6e6'\r\n },\r\n titleLine: [[88, 176], [268, 177]]\r\n\r\n },\r\n {\r\n id: 'couple',\r\n class: 'couple',\r\n isDefault: false,\r\n x: 0,\r\n y: 350,\r\n rx: 65,\r\n width: 180,\r\n height: 130,\r\n imageURL: '',\r\n isShadow: true,\r\n title: 'Couple Traveller',\r\n color: '#FFFFFF',\r\n duration: 650,\r\n delay: 600,\r\n shadow: {\r\n x: 40,\r\n y: 456,\r\n rx: 65,\r\n height: 5,\r\n width: 100,\r\n color: '#e6e6e6'\r\n },\r\n titleLine: [[88, 351], [268, 352]]\r\n\r\n },\r\n {\r\n id: 'group',\r\n class: 'group',\r\n isDefault: false,\r\n x: 0,\r\n y: 525,\r\n rx: 65,\r\n width: 180,\r\n height: 130,\r\n imageURL: '',\r\n isShadow: true,\r\n title: 'Group Traveller',\r\n color: '#FFFFFF',\r\n duration: 650,\r\n delay: 800,\r\n shadow: {\r\n x: 40,\r\n y: 618,\r\n rx: 65,\r\n height: 10,\r\n width: 110,\r\n color: '#e6e6e6'\r\n },\r\n titleLine: [[88, 526], [268, 527]],\r\n isLast: true\r\n }];\r\n\r\n const travellersWrapper = dataGroup.append('g')\r\n .attr({\r\n 'class': 'travellers-wrapper',\r\n 'id': 'travellers-wrapper'\r\n })\r\n .style({\r\n 'transform': `translate(100px, 250px)`,\r\n 'opacity': 1\r\n });\r\n\r\n const travellerGroup = travellersWrapper.selectAll('g')\r\n .data(travellersData)\r\n .enter()\r\n .append('g')\r\n .attr({\r\n 'class': (d, i) => `traveller-group ${d.class}`,\r\n 'id': (d, i) => `traveller-group-${i}`\r\n });\r\n\r\n const manageScreenwiseAnimation = function () {\r\n return {\r\n changeAnimation() {\r\n if (['screen-1', 'screen-7'].includes(that.activeSlide)) {\r\n // console.log(\"Inside manageScreenwiseAnimation screen 1 and 7 if scope triggered\");\r\n commonLeftSection.manageTravellersGroup();\r\n } else if (that.activeSlide == 'screen-2') {\r\n screenTwo.updateTravellerPreference();\r\n } else if (that.activeSlide == 'screen-3') {\r\n that.onAnimationEnd();\r\n } else if (that.activeSlide == 'screen-4') {\r\n screenFour.updateRightSection();\r\n that.onAnimationEnd();\r\n } else if (that.activeSlide == 'screen-5') {\r\n screenFive.updateTravellerPreference();\r\n } else if (that.activeSlide == 'screen-6') {\r\n screenSix.updateTravellerPreference();\r\n }\r\n // that.isAnimation = false;\r\n }\r\n }\r\n }();\r\n\r\n travellerGroup.append('foreignObject')\r\n .attr('x', (d) => d.x)\r\n .attr('y', (d) => d.y)\r\n .attr('width', (d) => 280 + 20)\r\n .attr('height', (d) => d.height + 20)\r\n .append('xhtml:div')\r\n .attr({\r\n 'class': (d) => `oval-wrapper ${d.id}`\r\n })\r\n .style({\r\n 'opacity': 0,\r\n 'transition': (d, i) => `all ${d.duration}ms ease-in-out`\r\n })\r\n .append('xhtml:div')\r\n .attr({\r\n 'class': (d, i) => `oval-space ${d.id}`\r\n })\r\n .html(d => `
\r\n \r\n
WTP \r\n
$215 \r\n
/night
\r\n
\\r\\n
Introduction \\r\\n
Challenges & Solution\\r\\n Process \\r\\n Impact & Benefits \\r\\n \\r\\n \\r\\n \\r\\n ![](\\\"assets/images/logo-white.png\\\"){kind=logo}
\\r\\n ![\\\"\\\"](\\\"/assets/images/contact.png\\\")
\\r\\n 
![](\\\"./assets/images/adaptive-pricing/person.png\\\")
\\r\\n ![\"?\"](\"../../../assets/images/atlas-intelligence-kraft/pointer.svg\")
\r\n ![\"\"](\"../../../assets/images/atlas-intelligence-kraft/icon_idea_screening.svg\"){kind=icon}
\r\n ![\"\"](\"../../../assets/images/atlas-intelligence-kraft/icon_formula.svg\"){kind=icon}
\r\n ![\"\"](\"../../../assets/images/atlas-intelligence-kraft/icon_launch_plan.svg\"){kind=icon}
\r\n ![\"\"](\"../../../assets/images/atlas-intelligence-kraft/icon_price_tag.svg\"){kind=icon}
\r\n ![\"\"](\"../../../assets/images/atlas-intelligence-kraft/icon_brand_growth.svg\"){kind=icon}
\r\n ![\"Product\"](\"../../../assets/images/atlas-intelligence-kraft/product.svg\")
\r\n ![\\\"\\\"](\\\"../../../assets/images/ctemp/image1.svg\\\")
\\r\\n ![\\\"\\\"](\\\"../../../assets/images/ctemp/image2.svg\\\")
\\r\\n ![\\\"\\\"](\\\"../../../assets/images/ctemp/image3.svg\\\")
\\r\\n ![\\\"\\\"](\\\"../../../assets/images/ctemp/forecasting-icon.png\\\"){kind=icon}
\\r\\n ![](\\\"../../../assets/images/ml-cloud-icon.png\\\"){kind=icon}
\\r\\n ![](\\\"../../../assets/images/ml-advt-icon.png\\\"){kind=icon}
\\r\\n ![](\\\"../../../assets/images/ml-messanger-icon.png\\\"){kind=icon}
\\r\\n ![](\\\"../../../assets/images/ml-os-icon.png\\\"){kind=icon}
\\r\\n ![](\\\"../../../assets/images/ml-search-icon.png\\\"){kind=icon}
\\r\\n ![](\\\"../../../assets/images/ml-game-icon.png\\\"){kind=icon}
\\r\\n ![](\\\"../../../assets/images/ml-email-icon.png\\\"){kind=icon}
\\r\\n ![](\\\"../../../assets/images/data-interaction-icon.png\\\"){kind=icon}
\\r\\n ![](\\\"../.././../assets/images/1.png\\\")
\\r\\n ![](\\\"../.././../assets/images/2.png\\\")
\\r\\n ![](\\\"../.././../assets/images/3.png\\\")
\\r\\n ![](\\\"../.././../assets/images/4.png\\\")
\\r\\n ![](\\\"../.././../assets/images/5.png\\\")
\\r\\n ![](\\\"../.././../assets/images/6.png\\\")
\\r\\n ![\\\"stuctured-data-img1\\\"](\\\"/assets/images/nlp-updated/structured-data-arc.svg\\\")
\\r\\n ![\\\"stuctured-data-img1\\\"](\\\"/assets/images/nlp-updated/stuctured-data-img1.svg\\\")
\\r\\n \\r\\n \\r\\n ![\\\"stuctured-data-img2\\\"](\\\"/assets/images/nlp-updated/stuctured-data-img2.svg\\\")
\\r\\n \\r\\n \\r\\n ![\\\"slide\\\"](\\\"../../../assets/images/virua-rep/slide-4.png\\\")
\\r\\n