ng-vertical-timeline
Version:
This is a Angular library that generates a vertical timeline.
78 lines (71 loc) • 5.12 kB
JavaScript
import { Injectable, Component, Input, NgModule, defineInjectable } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgVerticalTimelineService {
constructor() { }
}
NgVerticalTimelineService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NgVerticalTimelineService.ctorParameters = () => [];
/** @nocollapse */ NgVerticalTimelineService.ngInjectableDef = defineInjectable({ factory: function NgVerticalTimelineService_Factory() { return new NgVerticalTimelineService(); }, token: NgVerticalTimelineService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgVerticalTimelineComponent {
constructor() { }
/**
* @return {?}
*/
ngOnInit() { }
/**
* @param {?} id
* @return {?}
*/
isPair(id) {
return !(id % 2);
}
}
NgVerticalTimelineComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-vertical-timeline',
template: "<div class=\"timeline\">\r\n\r\n <div *ngFor=\"let item of data\">\r\n\r\n <div class=\"container left\" [ngClass]=\"isPair(item.id)?'left':'right'\">\r\n <div class=\"inner\">\r\n <div class=\"head\" [style.backgroundColor]=\"primaryColor\">\r\n <div class=\"icon\">\r\n <img class=\"ui tiny image\" [src]=\"item.icon\">\r\n </div>\r\n\r\n <div class=\"title\">\r\n <span>{{item.date}}</span>\r\n {{item.title }}\r\n </div>\r\n\r\n </div>\r\n <div class=\"body\">\r\n <p [innerHTML]=\"item.content\"></p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n",
styles: [".timeline{position:relative;max-width:1200px;margin:0 auto}.timeline:after{content:\"\";position:absolute;width:6px;background-color:#222;top:0;bottom:0;left:50%;margin-left:-3px}.timeline .container{position:relative;width:50%;margin:initial;padding:10px 40px;background-color:initial;box-sizing:border-box}.timeline .container:after{content:\"\";position:absolute;width:25px;height:25px;right:-16px;background-color:#000428;border:4px solid #004e92;top:15px;border-radius:50%;z-index:1}.timeline .container .inner{background-color:#fff;color:#222;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.timeline .container .inner .head{display:flex;align-items:center;color:#fff;background-color:#222}.timeline .container .inner .head .icon{margin:20px;max-width:50px}.timeline .container .inner .head .icon img{width:100%;height:100%}.timeline .container .inner .head .title{font-size:24px;text-transform:uppercase}.timeline .container .inner .head .title span{display:block;font-size:14px}.timeline .container .inner .body{background-color:#fff;padding:20px}.left{left:0}.left:before{content:\" \";height:0;position:absolute;top:22px;width:0;z-index:1;right:30px;border:solid #222;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #222}.right{left:50%}.right:before{content:\" \";height:0;position:absolute;top:22px;width:0;z-index:1;left:30px;border:solid #222;border-width:10px 10px 10px 0;border-color:transparent #222 transparent transparent}.right:after{left:-16px}@media screen and (max-width:600px){.timeline:after{left:31px}.timeline .container{width:100%;padding-left:70px;padding-right:25px}.timeline .container:before{left:60px;border:solid #222;border-width:10px 10px 10px 0;border-color:transparent #222 transparent transparent}.left::after,.right::after{left:12px}.right{left:0}#timeline--1,#timeline--2,#timeline--3{top:initial}}"]
}] }
];
/** @nocollapse */
NgVerticalTimelineComponent.ctorParameters = () => [];
NgVerticalTimelineComponent.propDecorators = {
data: [{ type: Input }],
primaryColor: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgVerticalTimelineModule {
}
NgVerticalTimelineModule.decorators = [
{ type: NgModule, args: [{
imports: [BrowserModule],
declarations: [NgVerticalTimelineComponent],
exports: [NgVerticalTimelineComponent]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NgVerticalTimelineService, NgVerticalTimelineComponent, NgVerticalTimelineModule };
//# sourceMappingURL=ng-vertical-timeline.js.map