ngx-vertical-timeline
Version:
Component for creating Responsive Vertical Timeline
26 lines • 13.6 kB
JavaScript
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class NgxVerticalTimelineComponent {
constructor() {
this.list = [];
}
set items(list) {
this.list = list;
}
action(item) {
if (item.command) {
item.command();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxVerticalTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NgxVerticalTimelineComponent, isStandalone: true, selector: "lib-ngx-vertical-timeline", inputs: { items: "items" }, ngImport: i0, template: "\n<div id=\"timeline\">\n <div *ngFor=\"let item of list; let i = index\" class=\"timeline-item\">\n <div [class]=\"item.styleClass? item.styleClass: ''\">\n <div class=\"timeline-icon\">\n <span class=\"item-icon {{item?.icon}}\"></span>\n </div>\n <div class=\"timeline-content\" [class.right]=\"i % 2 !== 0\">\n <h2>{{item?.title}}</h2>\n <p>\n {{item?.content}}\n </p>\n <button *ngIf=\"item?.command\" class=\"btn bg-purple\" (click)=\"action(item)\">\n <i class=\"fa fa-search-plus\"></i> {{item?.label}}\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700\";header:after,#timeline .timeline-item:after,header:before,#timeline .timeline-item:before{content:\"\";display:block;width:100%;clear:both}*,*:before,*:after{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}body,html{height:100%}body{background:#f9f9f9;background-size:cover;margin:0;padding:0;font-family:helvetica,arial,tahoma,verdana;line-height:20px;font-size:14px;color:#726f77}img{max-width:100%}a{text-decoration:none}.container{max-width:1100px;margin:0 auto}h1,h2,h3,h4{font-family:Dosis,arial,tahoma,verdana;font-weight:500}.project-name{text-align:center;padding:10px 0}header{background:#2b2e48;padding:10px;-webkit-box-shadow:0 3px 3px rgba(0,0,0,.05);-moz-box-shadow:0 3px 3px rgba(0,0,0,.05);-ms-box-shadow:0 3px 3px rgba(0,0,0,.05);box-shadow:0 3px 3px #0000000d}header .logo{color:#877ff1;float:left;font-family:Dosis,arial,tahoma,verdana;font-size:22px;font-weight:500}header .logo>span{color:#a9a4f3;font-weight:300}header .social{float:right}header .social .btn{font-family:Dosis;font-size:14px;margin:10px 5px}#timeline{width:100%;margin:30px auto;position:relative;padding:0 10px;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-ms-transition:all .4s ease;transition:all .4s ease}#timeline:before{content:\"\";width:3px;height:100%;background:#877ff1;left:50%;top:0;position:absolute}#timeline:after{content:\"\";clear:both;display:table;width:100%}#timeline .timeline-item{margin-bottom:50px;position:relative}#timeline .timeline-item .timeline-icon{background:#877ff1;width:50px;height:50px;position:absolute;display:flex;justify-content:center;align-items:center;top:0;left:50%;overflow:hidden;margin-left:-23px;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%}#timeline .timeline-item .timeline-icon svg{position:relative;top:14px;left:14px}#timeline .timeline-item .timeline-content{width:45%;background:#fff;padding:20px;-webkit-box-shadow:0 3px 0 rgba(0,0,0,.1);-moz-box-shadow:0 3px 0 rgba(0,0,0,.1);-ms-box-shadow:0 3px 0 rgba(0,0,0,.1);box-shadow:0 3px #0000001a;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease}#timeline .timeline-item .timeline-content h2{padding:15px;background:#877ff1;color:#fff;margin:-20px -20px 0;font-weight:300;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;-ms-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}#timeline .timeline-item .timeline-content:before{content:\"\";position:absolute;left:45%;top:20px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:7px solid #877ff1}#timeline .timeline-item .timeline-content.right{float:right}#timeline .timeline-item .timeline-content.right:before{content:\"\";right:45%;left:inherit;border-left:0;border-right:7px solid #877ff1}.btn{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff}.bg-purple{background-color:#877ff1!important}@media screen and (max-width: 768px){#timeline{margin:30px;padding:0;width:90%}#timeline:before{left:0}#timeline .timeline-item .timeline-content{width:90%;float:right}#timeline .timeline-item .timeline-content:before,#timeline .timeline-item .timeline-content.right:before{left:10%;margin-left:-6px;border-left:0;border-right:7px solid #877ff1}#timeline .timeline-item .timeline-icon{left:0}}.item-icon{color:#fff;font-size:2em}.timeline-content p{margin:10px 0;font-size:1.1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxVerticalTimelineComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-ngx-vertical-timeline', standalone: true, imports: [CommonModule], template: "\n<div id=\"timeline\">\n <div *ngFor=\"let item of list; let i = index\" class=\"timeline-item\">\n <div [class]=\"item.styleClass? item.styleClass: ''\">\n <div class=\"timeline-icon\">\n <span class=\"item-icon {{item?.icon}}\"></span>\n </div>\n <div class=\"timeline-content\" [class.right]=\"i % 2 !== 0\">\n <h2>{{item?.title}}</h2>\n <p>\n {{item?.content}}\n </p>\n <button *ngIf=\"item?.command\" class=\"btn bg-purple\" (click)=\"action(item)\">\n <i class=\"fa fa-search-plus\"></i> {{item?.label}}\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700\";header:after,#timeline .timeline-item:after,header:before,#timeline .timeline-item:before{content:\"\";display:block;width:100%;clear:both}*,*:before,*:after{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}body,html{height:100%}body{background:#f9f9f9;background-size:cover;margin:0;padding:0;font-family:helvetica,arial,tahoma,verdana;line-height:20px;font-size:14px;color:#726f77}img{max-width:100%}a{text-decoration:none}.container{max-width:1100px;margin:0 auto}h1,h2,h3,h4{font-family:Dosis,arial,tahoma,verdana;font-weight:500}.project-name{text-align:center;padding:10px 0}header{background:#2b2e48;padding:10px;-webkit-box-shadow:0 3px 3px rgba(0,0,0,.05);-moz-box-shadow:0 3px 3px rgba(0,0,0,.05);-ms-box-shadow:0 3px 3px rgba(0,0,0,.05);box-shadow:0 3px 3px #0000000d}header .logo{color:#877ff1;float:left;font-family:Dosis,arial,tahoma,verdana;font-size:22px;font-weight:500}header .logo>span{color:#a9a4f3;font-weight:300}header .social{float:right}header .social .btn{font-family:Dosis;font-size:14px;margin:10px 5px}#timeline{width:100%;margin:30px auto;position:relative;padding:0 10px;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-ms-transition:all .4s ease;transition:all .4s ease}#timeline:before{content:\"\";width:3px;height:100%;background:#877ff1;left:50%;top:0;position:absolute}#timeline:after{content:\"\";clear:both;display:table;width:100%}#timeline .timeline-item{margin-bottom:50px;position:relative}#timeline .timeline-item .timeline-icon{background:#877ff1;width:50px;height:50px;position:absolute;display:flex;justify-content:center;align-items:center;top:0;left:50%;overflow:hidden;margin-left:-23px;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%}#timeline .timeline-item .timeline-icon svg{position:relative;top:14px;left:14px}#timeline .timeline-item .timeline-content{width:45%;background:#fff;padding:20px;-webkit-box-shadow:0 3px 0 rgba(0,0,0,.1);-moz-box-shadow:0 3px 0 rgba(0,0,0,.1);-ms-box-shadow:0 3px 0 rgba(0,0,0,.1);box-shadow:0 3px #0000001a;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease}#timeline .timeline-item .timeline-content h2{padding:15px;background:#877ff1;color:#fff;margin:-20px -20px 0;font-weight:300;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;-ms-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}#timeline .timeline-item .timeline-content:before{content:\"\";position:absolute;left:45%;top:20px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:7px solid #877ff1}#timeline .timeline-item .timeline-content.right{float:right}#timeline .timeline-item .timeline-content.right:before{content:\"\";right:45%;left:inherit;border-left:0;border-right:7px solid #877ff1}.btn{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff}.bg-purple{background-color:#877ff1!important}@media screen and (max-width: 768px){#timeline{margin:30px;padding:0;width:90%}#timeline:before{left:0}#timeline .timeline-item .timeline-content{width:90%;float:right}#timeline .timeline-item .timeline-content:before,#timeline .timeline-item .timeline-content.right:before{left:10%;margin-left:-6px;border-left:0;border-right:7px solid #877ff1}#timeline .timeline-item .timeline-icon{left:0}}.item-icon{color:#fff;font-size:2em}.timeline-content p{margin:10px 0;font-size:1.1em}\n"] }]
}], ctorParameters: () => [], propDecorators: { items: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXZlcnRpY2FsLXRpbWVsaW5lLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC12ZXJ0aWNhbC10aW1lbGluZS9zcmMvbGliL25neC12ZXJ0aWNhbC10aW1lbGluZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdmVydGljYWwtdGltZWxpbmUvc3JjL2xpYi9uZ3gtdmVydGljYWwtdGltZWxpbmUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFakQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7QUFTL0MsTUFBTSxPQUFPLDRCQUE0QjtJQUd2QztRQURBLFNBQUksR0FBbUIsRUFBRSxDQUFDO0lBQ1YsQ0FBQztJQUVqQixJQUNJLEtBQUssQ0FBQyxJQUFvQjtRQUM1QixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztJQUNuQixDQUFDO0lBRUQsTUFBTSxDQUFDLElBQWtCO1FBQ3ZCLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ2pCLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztRQUNqQixDQUFDO0lBQ0gsQ0FBQzsrR0FkVSw0QkFBNEI7bUdBQTVCLDRCQUE0QixpSENYekMseW9CQW1CQSwyNEhEVlksWUFBWTs7NEZBRVgsNEJBQTRCO2tCQVB4QyxTQUFTOytCQUNFLDJCQUEyQixjQUd6QixJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUM7d0RBUW5CLEtBQUs7c0JBRFIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFRpbWVsaW5lSXRlbSB9IGZyb20gJy4vdGltZWxpbmUtaXRlbSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItbmd4LXZlcnRpY2FsLXRpbWVsaW5lJyxcbiAgdGVtcGxhdGVVcmw6ICcuL25neC12ZXJ0aWNhbC10aW1lbGluZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25neC12ZXJ0aWNhbC10aW1lbGluZS5jb21wb25lbnQuY3NzJ10sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdXG59KVxuZXhwb3J0IGNsYXNzIE5neFZlcnRpY2FsVGltZWxpbmVDb21wb25lbnQge1xuXG4gIGxpc3Q6IFRpbWVsaW5lSXRlbVtdID0gW107XG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgQElucHV0KClcbiAgc2V0IGl0ZW1zKGxpc3Q6IFRpbWVsaW5lSXRlbVtdKSB7XG4gICAgdGhpcy5saXN0ID0gbGlzdDtcbiAgfVxuXG4gIGFjdGlvbihpdGVtOiBUaW1lbGluZUl0ZW0pIHtcbiAgICBpZiAoaXRlbS5jb21tYW5kKSB7XG4gICAgICBpdGVtLmNvbW1hbmQoKTtcbiAgICB9XG4gIH1cblxufVxuIiwiXG48ZGl2IGlkPVwidGltZWxpbmVcIj5cbiAgPGRpdiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBsaXN0OyBsZXQgaSA9IGluZGV4XCIgY2xhc3M9XCJ0aW1lbGluZS1pdGVtXCI+XG4gICAgPGRpdiBbY2xhc3NdPVwiaXRlbS5zdHlsZUNsYXNzPyBpdGVtLnN0eWxlQ2xhc3M6ICcnXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwidGltZWxpbmUtaWNvblwiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cIml0ZW0taWNvbiB7e2l0ZW0/Lmljb259fVwiPjwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInRpbWVsaW5lLWNvbnRlbnRcIiBbY2xhc3MucmlnaHRdPVwiaSAlIDIgIT09IDBcIj5cbiAgICAgICAgPGgyPnt7aXRlbT8udGl0bGV9fTwvaDI+XG4gICAgICAgIDxwPlxuICAgICAgICAgIHt7aXRlbT8uY29udGVudH19XG4gICAgICAgIDwvcD5cbiAgICAgICAgPGJ1dHRvbiAqbmdJZj1cIml0ZW0/LmNvbW1hbmRcIiBjbGFzcz1cImJ0biBiZy1wdXJwbGVcIiAoY2xpY2spPVwiYWN0aW9uKGl0ZW0pXCI+XG4gICAgICAgICAgPGkgY2xhc3M9XCJmYSBmYS1zZWFyY2gtcGx1c1wiPjwvaT4ge3tpdGVtPy5sYWJlbH19XG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=