ng-vertical-timeline/fesm5/ng-vertical-timeline.js

This is a Angular library that generates a vertical timeline.

import { Injectable, NgModule, Component, Input, defineInjectable } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var NgVerticalTimelineService = /** @class */ (function () {
    function NgVerticalTimelineService() {
    }
    NgVerticalTimelineService.decorators = [
        { type: Injectable, args: [{
                    providedIn: 'root'
                },] }
    ];
    /** @nocollapse */
    NgVerticalTimelineService.ctorParameters = function () { return []; };
    /** @nocollapse */ NgVerticalTimelineService.ngInjectableDef = defineInjectable({ factory: function NgVerticalTimelineService_Factory() { return new NgVerticalTimelineService(); }, token: NgVerticalTimelineService, providedIn: "root" });
    return NgVerticalTimelineService;
}());

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
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;
}());

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var NgVerticalTimelineModule = /** @class */ (function () {
    function NgVerticalTimelineModule() {
    }
    NgVerticalTimelineModule.decorators = [
        { type: NgModule, args: [{
                    imports: [BrowserModule],
                    declarations: [NgVerticalTimelineComponent],
                    exports: [NgVerticalTimelineComponent]
                },] }
    ];
    return NgVerticalTimelineModule;
}());

/**
 * @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