ngx-mzd-timeline
Version:
Minimalist's vertical timeline library for Angular applications.
2 lines • 6.46 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-mzd-timeline",["exports","@angular/core","@angular/common"],e):e((t=t||self)["ngx-mzd-timeline"]={},t.ng.core,t.ng.common)}(this,(function(t,e,n){"use strict";var o=function(){function t(){}return t.prototype.ngOnInit=function(){},t}();o.decorators=[{type:e.Component,args:[{selector:"mzd-icon",template:"<ng-content></ng-content>\n",styles:[""]}]}],o.ctorParameters=function(){return[]};var i=function(){function t(t){this.elementRef=t,this.card=!0,this.border=!1}return Object.defineProperty(t.prototype,"left",{set:function(t){this.elementRef.nativeElement.classList.toggle("content-left",t)},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"right",{set:function(t){this.elementRef.nativeElement.classList.toggle("content-right",t)},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"noAlternate",{set:function(t){this.elementRef.nativeElement.classList.toggle("no-alternate",t)},enumerable:!1,configurable:!0}),t.prototype.ngOnInit=function(){},t}();i.decorators=[{type:e.Component,args:[{selector:"mzd-timeline-content",template:"<div [ngClass]=\"{ 'mzd-timeline-card': card, 'mzd-timeline-border': border }\">\n <ng-content></ng-content>\n</div>\n",encapsulation:e.ViewEncapsulation.None,styles:['mzd-timeline-content{background-color:inherit;display:block;padding:10px 30px;position:relative;width:50%}mzd-timeline-content .mzd-timeline-card{border-radius:4px;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);padding:16px}mzd-timeline-content .mzd-timeline-card mat-card{box-shadow:none!important;padding:0}mzd-timeline-content .mzd-timeline-border{border:1px solid grey;border-radius:4px}mzd-timeline-content.no-alternate{width:100%}mzd-timeline-content.no-alternate.content-right{left:0;padding-left:60px;right:auto}mzd-timeline-content.no-alternate.content-right:after{left:15px;right:auto}mzd-timeline-content.no-alternate.content-right mzd-icon{left:23px;right:auto}mzd-timeline-content.no-alternate.content-right:before{border-color:transparent grey transparent transparent;border-width:5px 10px 5px 20px;left:30px;right:auto}mzd-timeline-content.no-alternate.content-left{left:auto;padding-right:60px;right:0}mzd-timeline-content.no-alternate.content-left:after{left:auto;right:15px}mzd-timeline-content.no-alternate.content-left mzd-icon{left:auto;right:23px}mzd-timeline-content.no-alternate.content-left:before{border:solid transparent;border-left:solid grey;border-width:5px 20px 5px 10px;left:auto;right:30px}mzd-timeline-content:after{background:#f5f5f5;border:2px solid orange;border-radius:50%;box-sizing:border-box;content:"";height:30px;left:auto;position:absolute;right:-15px;top:15px;width:30px;z-index:1}mzd-timeline-content mzd-icon{border-radius:50%;box-sizing:border-box;left:auto;position:absolute;right:-7px;text-align:center;top:21px;width:14px;z-index:2}mzd-timeline-content.content-left{left:0;right:auto}mzd-timeline-content.content-left:before{border:solid transparent;border-left:solid grey;border-width:5px 20px 5px 10px;content:"";height:0;left:auto;position:absolute;right:0;top:25px;width:0;z-index:1}mzd-timeline-content.content-right{left:auto;right:-50%}mzd-timeline-content.content-right:after{left:-15px;right:auto}mzd-timeline-content.content-right mzd-icon{left:-7px;right:auto}mzd-timeline-content.content-right:before{border:solid transparent;border-right:solid grey;border-width:5px 10px 5px 20px;content:"";height:0;left:0;position:absolute;right:auto;top:25px;width:0;z-index:1}@media screen and (max-width:599px){mzd-timeline-content{padding-left:60px;width:100%}mzd-timeline-content.no-alternate{padding-left:30Px}mzd-timeline-content.content-left:after,mzd-timeline-content.content-right:after{left:15px;right:auto}mzd-timeline-content.content-left{left:0;right:auto}mzd-timeline-content.content-left mzd-icon{left:23px;right:auto}mzd-timeline-content.content-left:before,mzd-timeline-content.content-right:before{border-color:transparent grey transparent transparent;border-width:5px 10px 5px 20px;left:30px;right:auto}mzd-timeline-content.content-right{left:0;right:auto}mzd-timeline-content.content-right mzd-icon{left:23px;right:auto}}']}]}],i.ctorParameters=function(){return[{type:e.ElementRef}]},i.propDecorators={card:[{type:e.Input}],border:[{type:e.Input}]};var r=function(){function t(){this.firstContentSide="left",this.alternateSide=!0}return t.prototype.ngOnChanges=function(t){this.updateContent()},t.prototype.ngOnInit=function(){},t.prototype.ngAfterViewInit=function(){this.updateContent()},t.prototype.updateContent=function(){var t=this;this.contents&&(this.alternateSide?"left"===this.firstContentSide?this.contents.forEach((function(t,e){t.left=e%2==0,t.right=e%2!=0})):this.contents.forEach((function(t,e){t.left=e%2!=0,t.right=e%2==0})):this.contents.forEach((function(e){e.left="left"===t.firstContentSide,e.right="right"===t.firstContentSide})),this.contents.forEach((function(e){return e.noAlternate=!t.alternateSide})))},t}();r.decorators=[{type:e.Component,args:[{selector:"mzd-timeline",template:"<div\n class=\"mzd-timeline-line\"\n [ngClass]=\"{\n 'no-alternate': !alternateSide,\n left: firstContentSide !== 'left',\n right: firstContentSide !== 'right'\n }\"\n></div>\n<ng-content></ng-content>\n",encapsulation:e.ViewEncapsulation.None,styles:["*{box-sizing:border-box}mzd-timeline{display:block;padding:50px 0;position:relative;width:100%}mzd-timeline .mzd-timeline-line{background:grey;height:100%;left:50%;position:absolute;right:auto;top:0;width:1px}mzd-timeline .mzd-timeline-line.no-alternate.left{left:30px;right:auto}mzd-timeline .mzd-timeline-line.no-alternate.right{left:auto;right:30px}@media screen and (max-width:599px){mzd-timeline .mzd-timeline-line{left:30px;right:auto}}"]}]}],r.ctorParameters=function(){return[]},r.propDecorators={firstContentSide:[{type:e.Input}],alternateSide:[{type:e.Input}],contents:[{type:e.ContentChildren,args:[i]}]};var a=function(){};a.decorators=[{type:e.NgModule,args:[{declarations:[r,i,o],imports:[n.CommonModule],exports:[r,i,o]}]}],t.MzdIconComponent=o,t.MzdTimelineComponent=r,t.MzdTimelineContentComponent=i,t.MzdTimelineModule=a,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-mzd-timeline.umd.min.js.map