ngx-vertical-timeline
Version:
Module for creating Responsive Vertical Timeline
159 lines (151 loc) • 9.29 kB
JavaScript
import { Injectable, ɵɵdefineInjectable, Component, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-vertical-timeline.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxVerticalTimelineService = /** @class */ (function () {
function NgxVerticalTimelineService() {
}
NgxVerticalTimelineService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NgxVerticalTimelineService.ctorParameters = function () { return []; };
/** @nocollapse */ NgxVerticalTimelineService.ngInjectableDef = ɵɵdefineInjectable({ factory: function NgxVerticalTimelineService_Factory() { return new NgxVerticalTimelineService(); }, token: NgxVerticalTimelineService, providedIn: "root" });
return NgxVerticalTimelineService;
}());
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-vertical-timeline.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxVerticalTimelineComponent = /** @class */ (function () {
function NgxVerticalTimelineComponent() {
this.list = [];
}
Object.defineProperty(NgxVerticalTimelineComponent.prototype, "items", {
set: /**
* @param {?} list
* @return {?}
*/
function (list) {
this.list = list;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NgxVerticalTimelineComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @param {?} item
* @return {?}
*/
NgxVerticalTimelineComponent.prototype.action = /**
* @param {?} item
* @return {?}
*/
function (item) {
if (item.command) {
item.command();
}
};
NgxVerticalTimelineComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-ngx-vertical-timeline',
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 url(https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700);#timeline .timeline-item:after,#timeline .timeline-item:before,header:after,header:before{content:'';display:block;width:100%;clear:both}*,:after,:before{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}body,html{height:100%}body{background:0 0/cover #f9f9f9;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;-ms-box-shadow:0 3px 3px rgba(0,0,0,.05);box-shadow:0 3px 3px rgba(0,0,0,.05)}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:.4s;transition:.4s}#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:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;top:0;left:50%;overflow:hidden;margin-left:-23px;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;-ms-box-shadow:0 3px 0 rgba(0,0,0,.1);box-shadow:0 3px 0 rgba(0,0,0,.1);border-radius:5px;-webkit-transition:.3s;transition:.3s}#timeline .timeline-item .timeline-content h2{padding:15px;background:#877ff1;color:#fff;margin:-20px -20px 0;font-weight:300;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.right:before,#timeline .timeline-item .timeline-content: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}"]
}] }
];
/** @nocollapse */
NgxVerticalTimelineComponent.ctorParameters = function () { return []; };
NgxVerticalTimelineComponent.propDecorators = {
items: [{ type: Input }]
};
return NgxVerticalTimelineComponent;
}());
if (false) {
/** @type {?} */
NgxVerticalTimelineComponent.prototype.list;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-vertical-timeline.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxVerticalTimelineModule = /** @class */ (function () {
function NgxVerticalTimelineModule() {
}
NgxVerticalTimelineModule.decorators = [
{ type: NgModule, args: [{
declarations: [NgxVerticalTimelineComponent],
imports: [
CommonModule
],
exports: [NgxVerticalTimelineComponent]
},] }
];
return NgxVerticalTimelineModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: lib/timeline-item.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function TimelineItem() { }
if (false) {
/** @type {?|undefined} */
TimelineItem.prototype.label;
/** @type {?|undefined} */
TimelineItem.prototype.icon;
/** @type {?|undefined} */
TimelineItem.prototype.command;
/** @type {?|undefined} */
TimelineItem.prototype.url;
/** @type {?|undefined} */
TimelineItem.prototype.routerLink;
/** @type {?|undefined} */
TimelineItem.prototype.expanded;
/** @type {?|undefined} */
TimelineItem.prototype.disabled;
/** @type {?|undefined} */
TimelineItem.prototype.visible;
/** @type {?|undefined} */
TimelineItem.prototype.active;
/** @type {?|undefined} */
TimelineItem.prototype.style;
/** @type {?|undefined} */
TimelineItem.prototype.color;
/** @type {?|undefined} */
TimelineItem.prototype.content;
/** @type {?|undefined} */
TimelineItem.prototype.styleClass;
/** @type {?|undefined} */
TimelineItem.prototype.title;
/** @type {?|undefined} */
TimelineItem.prototype.id;
}
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ngx-vertical-timeline.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NgxVerticalTimelineComponent, NgxVerticalTimelineModule, NgxVerticalTimelineService };
//# sourceMappingURL=ngx-vertical-timeline.js.map