{"__symbolic":"module","version":4,"metadata":{"TimelineListItem":{"__symbolic":"interface"},"TimelineDirection":{"__symbolic":"interface"},"TimelineComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"sebng-timeline","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":15,"character":19},"member":"None"},"template":"<div class=\"form-group custom-timeline\" [ngClass]=\"className\">\n    <div *ngIf=\"list && list.length && direction === 'vertical'\" class=\"timeline\" [class.clickable]=\"onClick\" [ngClass]=\"direction\">\n        <div *ngFor=\"let item of list; let i = index\" class=\"item-holder\">\n            <div [ngClass]=\"{ 'direction-left': i % 2, 'direction-right': !(i % 2) }\">\n                <div class=\"title-wrapper\" (click)=\"handleClick($event, i)\">\n                    <div class=\"title\">{{ item.title }}</div>\n                    <div class=\"time-wrapper\">\n                        <span class=\"time\">{{ item.time }}</span>\n                    </div>\n                    <div class=\"desc\" *ngIf=\"item.desc\">{{ item.desc }}</div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div *ngIf=\"list && list.length && direction === 'horizontal'\" class=\"timeline\" [class.clickable]=\"onClick\" [ngClass]=\"direction\">\n        <div class=\"row\" *ngFor=\"let loop of items\">\n            <ng-container *ngIf=\"loop === 1\">\n                <div *ngFor=\"let item of topList; let i = index\" class=\"item-holder\" [ngStyle]=\"{ width: 100 / list.length + '%' }\">\n                    <div class=\"direction-top\" *ngIf=\"item\">\n                        <div class=\"title-wrapper\" (click)=\"handleClick($event, i)\">\n                            <div class=\"title\">{{ item.title }}</div>\n                            <div class=\"time-wrapper\">\n                                <span class=\"time\">{{ item.time }}</span>\n                            </div>\n                            <div class=\"desc\" *ngIf=\"item.desc\">{{ item.desc }}</div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"loop === 2\">\n                <div *ngFor=\"let item of topList\" class=\"indicator-holder\" [ngStyle]=\"{ width: 100 / list.length + '%' }\"></div>\n            </ng-container>\n\n            <ng-container *ngIf=\"loop === 3\">\n                <div *ngFor=\"let item of bottomList; let i = index\" class=\"item-holder\" [ngStyle]=\"{ width: 100 / list.length + '%' }\">\n                    <div *ngIf=\"item\" class=\"direction-bottom\">\n                        <div class=\"title-wrapper\" (click)=\"handleClick($event, i)\">\n                            <div class=\"title\">{{ item.title }}</div>\n                            <div class=\"time-wrapper\">\n                                <span class=\"time\">{{ item.time }}</span>\n                            </div>\n                            <div *ngIf=\"item.desc\" class=\"desc\">{{ item.desc }}</div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n","styles":[".custom-timeline{width:100%}.custom-timeline .timeline{position:relative}.custom-timeline .timeline.vertical{margin:0 auto;padding:10px 0}.custom-timeline .timeline.vertical:before{position:absolute;left:50%;top:0;content:\" \";display:block;width:6px;height:100%;margin-left:-3px;background:#41B0EE;background:linear-gradient(to top,rgba(0,0,0,0) 0%,#41B0EE 8%,#41B0EE 92%,rgba(0,0,0,0) 100%)}.custom-timeline .timeline.vertical .item-holder{padding:15px 0}.custom-timeline .timeline.vertical .item-holder:after{content:\"\";display:block;height:1px;clear:both;visibility:hidden}.custom-timeline .timeline.vertical .item-holder [class^=direction-]{position:relative;width:50%}.custom-timeline .timeline.vertical .item-holder [class^=direction-] .title-wrapper{position:relative;display:inline-block;background-color:#f8f8f8;border:1px solid #dedede;border-radius:4px;box-shadow:1px 3px 15px -3px rgba(0,0,0,.302)}.custom-timeline .timeline.vertical .item-holder [class^=direction-] .title-wrapper .title{position:relative;border-radius:5px;font-weight:600}.custom-timeline .timeline.vertical .item-holder [class^=direction-] .title-wrapper .title:before{position:absolute;top:15px;right:-44px;content:\" \";display:block;width:18px;height:18px;margin-top:-10px;background:#fff;border-radius:10px;border:4px solid #007AC7;z-index:10}.custom-timeline .timeline.vertical .item-holder [class^=direction-] .title-wrapper .time-wrapper{line-height:1em;font-size:.66666em;vertical-align:middle}.custom-timeline .timeline.vertical .item-holder [class^=direction-] .title-wrapper .time-wrapper .time{display:inline-block;padding:4px 0}.custom-timeline .timeline.vertical .item-holder [class^=direction-] .title-wrapper .desc{margin-top:10px;font-size:.77777em;font-style:italic;line-height:1.5em;text-align:left;display:block}.custom-timeline .timeline.vertical .item-holder .direction-left{float:left;text-align:right;padding-right:24px}.custom-timeline .timeline.vertical .item-holder .direction-left .title-wrapper{text-align:right;padding:5px 10px 5px 5px}.custom-timeline .timeline.vertical .item-holder .direction-left .title-wrapper:after{content:\" \";position:absolute;width:20px;height:20px;background:linear-gradient(-45deg,#f8f8f8 0%,#f8f8f8 1%,#f8f8f8 50%,rgba(0,0,0,0) 53%,rgba(0,0,0,0) 100%);top:9px;right:-10px;transform:rotate(-45deg);box-shadow:1px 2px 4px -2px rgba(0,0,0,.302);border-right:1px solid #dedede;border-bottom:1px solid #dedede}.custom-timeline .timeline.vertical .item-holder .direction-left .title-wrapper .title{text-align:right}.custom-timeline .timeline.vertical .item-holder .direction-left .title-wrapper .desc{text-align:right}.custom-timeline .timeline.vertical .item-holder .direction-right{float:right;padding-left:24px}.custom-timeline .timeline.vertical .item-holder .direction-right .title-wrapper{padding:5px 5px 5px 10px}.custom-timeline .timeline.vertical .item-holder .direction-right .title-wrapper:after{content:\" \";position:absolute;width:20px;height:20px;background:linear-gradient(-45deg,#f8f8f8 0%,#f8f8f8 1%,#f8f8f8 50%,rgba(0,0,0,0) 53%,rgba(0,0,0,0) 100%);top:9px;left:-10px;transform:rotate(135deg);box-shadow:2px 1px 4px -2px rgba(0,0,0,.302);border-right:1px solid #dedede;border-bottom:1px solid #dedede}.custom-timeline .timeline.vertical .item-holder .direction-right .title-wrapper .title{text-align:left}.custom-timeline .timeline.vertical .item-holder .direction-right .title-wrapper .title:before{left:-44px}.custom-timeline .timeline.vertical .item-holder .direction-right .time-wrapper{text-align:left}.custom-timeline .timeline.horizontal{padding:0 10px}.custom-timeline .timeline.horizontal .item-holder{padding:15px 0;display:table-cell;height:100%;position:relative;vertical-align:top}.custom-timeline .timeline.horizontal .item-holder:after{content:\"\";display:block;height:1px;clear:both;visibility:hidden}.custom-timeline .timeline.horizontal .item-holder [class^=direction-]{position:relative;display:inline-block;margin:0 10px}.custom-timeline .timeline.horizontal .item-holder [class^=direction-] .title-wrapper{position:relative;display:block;background-color:#f8f8f8;border:1px solid #dedede;border-radius:4px;padding:5px 10px;box-shadow:1px 3px 15px -3px rgba(0,0,0,.302)}.custom-timeline .timeline.horizontal .item-holder [class^=direction-] .title-wrapper .title{position:relative;border-radius:5px;font-weight:600}.custom-timeline .timeline.horizontal .item-holder [class^=direction-] .title-wrapper .time-wrapper{line-height:1em;font-size:.66666em;vertical-align:middle}.custom-timeline .timeline.horizontal .item-holder [class^=direction-] .title-wrapper .time-wrapper .time{display:inline-block;padding:4px 0}.custom-timeline .timeline.horizontal .item-holder [class^=direction-] .title-wrapper .desc{margin-top:10px;font-size:.77777em;font-style:italic;line-height:1.5em;display:block}.custom-timeline .timeline.horizontal .item-holder .direction-top .title-wrapper:after{content:\" \";position:absolute;width:20px;height:20px;background:linear-gradient(-225deg,#f8f8f8 0%,#f8f8f8 1%,#f8f8f8 50%,rgba(0,0,0,0) 53%,rgba(0,0,0,0) 100%);bottom:-11px;left:50%;transform:translate(-50%) rotate(225deg);box-shadow:-2px -1px 2px -1px rgba(0,0,0,.251);border-left:1px solid #dedede;border-top:1px solid #dedede}.custom-timeline .timeline.horizontal .item-holder .direction-bottom{margin-top:7px}.custom-timeline .timeline.horizontal .item-holder .direction-bottom .title-wrapper:after{content:\" \";position:absolute;width:20px;height:20px;background:linear-gradient(-225deg,#f8f8f8 0%,#f8f8f8 1%,#f8f8f8 50%,rgba(0,0,0,0) 53%,rgba(0,0,0,0) 100%);top:-10px;left:50%;transform:translate(-50%) rotate(45deg);box-shadow:-1px -2px 2px -1px rgba(0,0,0,.251);border-left:1px solid #dedede;border-top:1px solid #dedede}.custom-timeline .timeline.horizontal .row{padding:0 10px}.custom-timeline .timeline.horizontal .row:nth-child(1),.custom-timeline .timeline.horizontal .row:nth-child(3){display:table}.custom-timeline .timeline.horizontal .row:nth-child(1) .item-holder{vertical-align:bottom;padding-bottom:17px}.custom-timeline .timeline.horizontal .row:nth-child(2){position:relative}.custom-timeline .timeline.horizontal .row:nth-child(2):before{position:absolute;left:0;top:50%;content:\" \";display:block;width:100%;height:6px;margin-left:-3px;background:#41B0EE;background:linear-gradient(to left,rgba(0,0,0,0) 0%,#41B0EE 8%,#41B0EE 92%,rgba(0,0,0,0) 100%)}.custom-timeline .timeline.horizontal .row:nth-child(2) .indicator-holder{position:relative}.custom-timeline .timeline.horizontal .row:nth-child(2) .indicator-holder:before{position:relative;top:8px;margin:-10px auto 0;content:\" \";display:block;width:18px;height:18px;background:#fff;border-radius:16px;border:4px solid #007AC7;z-index:10}.custom-timeline .timeline.horizontal .row:nth-child(3) .item-holder{padding-bottom:16px}.custom-timeline .timeline.clickable .item-holder [class^=direction-] .title-wrapper{cursor:pointer}.custom-timeline .timeline.clickable .item-holder [class^=direction-] .title-wrapper:hover{border:1px solid #41B0EE}.custom-timeline .timeline.clickable.vertical [class^=direction-] .title-wrapper:hover:after{border-right:1px solid #41B0EE;border-bottom:1px solid #41B0EE}.custom-timeline .timeline.clickable.horizontal .row [class^=direction-] .title-wrapper:hover:after{border-left:1px solid #41B0EE;border-top:1px solid #41B0EE}\n"]}]}],"members":{"list":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":5}}]}],"styles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":28,"character":5},"arguments":["style"]}]}],"ngOnInit":[{"__symbolic":"method"}],"prepareList":[{"__symbolic":"method"}],"handleClick":[{"__symbolic":"method"}]}},"TimelineModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":14},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":6,"character":28}],"exports":[{"__symbolic":"reference","name":"TimelineComponent"}],"declarations":[{"__symbolic":"reference","name":"TimelineComponent"}]}]}],"members":{}}},"origins":{"TimelineListItem":"./timeline.component","TimelineDirection":"./timeline.component","TimelineComponent":"./timeline.component","TimelineModule":"./timeline.module"},"importAs":"@sebgroup/ng-components/lib/timeline"}