ng-vertical-timeline
Version:
This is a Angular library that generates a vertical timeline.
49 lines • 5.55 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input } from '@angular/core';
var NgVerticalTimelineComponent = /** @class */ (function () {
function NgVerticalTimelineComponent() {
}
/**
* @return {?}
*/
NgVerticalTimelineComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @param {?} id
* @return {?}
*/
NgVerticalTimelineComponent.prototype.isPair = /**
* @param {?} id
* @return {?}
*/
function (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 = function () { return []; };
NgVerticalTimelineComponent.propDecorators = {
data: [{ type: Input }],
primaryColor: [{ type: Input }]
};
return NgVerticalTimelineComponent;
}());
export { NgVerticalTimelineComponent };
if (false) {
/** @type {?} */
NgVerticalTimelineComponent.prototype.data;
/** @type {?} */
NgVerticalTimelineComponent.prototype.primaryColor;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctdmVydGljYWwtdGltZWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmctdmVydGljYWwtdGltZWxpbmUvIiwic291cmNlcyI6WyJsaWIvbmctdmVydGljYWwtdGltZWxpbmUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUd6RDtJQVdFO0lBQWUsQ0FBQzs7OztJQUVoQiw4Q0FBUTs7O0lBQVIsY0FBWSxDQUFDOzs7OztJQUViLDRDQUFNOzs7O0lBQU4sVUFBTyxFQUFVO1FBQ2YsT0FBTyxDQUFDLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQyxDQUFDO0lBQ25CLENBQUM7O2dCQWpCRixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLHNCQUFzQjtvQkFDaEMsMnJCQUFvRDs7aUJBRXJEOzs7Ozt1QkFFRSxLQUFLOytCQUVMLEtBQUs7O0lBVVIsa0NBQUM7Q0FBQSxBQWxCRCxJQWtCQztTQWJZLDJCQUEyQjs7O0lBQ3RDLDJDQUNzQjs7SUFDdEIsbURBQ3FCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFRpbWVsaW5lRXZlbnQgfSBmcm9tICcuL3RpbWVsaW5lLWV2ZW50JztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmctdmVydGljYWwtdGltZWxpbmUnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9uZy12ZXJ0aWNhbC10aW1lbGluZS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vbmctdmVydGljYWwtdGltZWxpbmUuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgTmdWZXJ0aWNhbFRpbWVsaW5lQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICBASW5wdXQoKVxyXG4gIGRhdGE6IFRpbWVsaW5lRXZlbnRbXTtcclxuICBASW5wdXQoKVxyXG4gIHByaW1hcnlDb2xvcjogc3RyaW5nO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHt9XHJcblxyXG4gIG5nT25Jbml0KCkge31cclxuXHJcbiAgaXNQYWlyKGlkOiBudW1iZXIpOiBib29sZWFuIHtcclxuICAgIHJldHVybiAhKGlkICUgMik7XHJcbiAgfVxyXG59XHJcbiJdfQ==