ngx-mzd-timeline
Version:
Minimalist's vertical timeline library for Angular applications.
34 lines • 6.58 kB
JavaScript
import { Component, ElementRef, Input, ViewEncapsulation } from '@angular/core';
export class MzdTimelineContentComponent {
constructor(elementRef) {
this.elementRef = elementRef;
this.card = true;
this.border = false;
}
set left(value) {
this.elementRef.nativeElement.classList.toggle('content-left', value);
}
set right(value) {
this.elementRef.nativeElement.classList.toggle('content-right', value);
}
set noAlternate(value) {
this.elementRef.nativeElement.classList.toggle('no-alternate', value);
}
ngOnInit() { }
}
MzdTimelineContentComponent.decorators = [
{ type: 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: 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}}"]
},] }
];
MzdTimelineContentComponent.ctorParameters = () => [
{ type: ElementRef }
];
MzdTimelineContentComponent.propDecorators = {
card: [{ type: Input }],
border: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUtY29udGVudC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbXpkLXRpbWVsaW5lL3NyYy9saWIvY29tcG9uZW50cy90aW1lbGluZS1jb250ZW50L3RpbWVsaW5lLWNvbnRlbnQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBVSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQVF4RixNQUFNLE9BQU8sMkJBQTJCO0lBaUJ0QyxZQUFvQixVQUFzQjtRQUF0QixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBZmpDLFNBQUksR0FBWSxJQUFJLENBQUM7UUFDckIsV0FBTSxHQUFZLEtBQUssQ0FBQztJQWNhLENBQUM7SUFaL0MsSUFBSSxJQUFJLENBQUMsS0FBYztRQUNyQixJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLGNBQWMsRUFBRSxLQUFLLENBQUMsQ0FBQztJQUN4RSxDQUFDO0lBRUQsSUFBSSxLQUFLLENBQUMsS0FBYztRQUN0QixJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLGVBQWUsRUFBRSxLQUFLLENBQUMsQ0FBQztJQUN6RSxDQUFDO0lBRUQsSUFBSSxXQUFXLENBQUMsS0FBYztRQUM1QixJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLGNBQWMsRUFBRSxLQUFLLENBQUMsQ0FBQztJQUN4RSxDQUFDO0lBSUQsUUFBUSxLQUFXLENBQUM7OztZQXpCckIsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxzQkFBc0I7Z0JBQ2hDLG1JQUFnRDtnQkFFaEQsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7O2FBQ3RDOzs7WUFQbUIsVUFBVTs7O21CQVUzQixLQUFLO3FCQUNMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0LCBPbkluaXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ216ZC10aW1lbGluZS1jb250ZW50JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RpbWVsaW5lLWNvbnRlbnQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90aW1lbGluZS1jb250ZW50LmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmVcbn0pXG5leHBvcnQgY2xhc3MgTXpkVGltZWxpbmVDb250ZW50Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBASW5wdXQoKSBjYXJkOiBib29sZWFuID0gdHJ1ZTtcbiAgQElucHV0KCkgYm9yZGVyOiBib29sZWFuID0gZmFsc2U7XG5cbiAgc2V0IGxlZnQodmFsdWU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5jbGFzc0xpc3QudG9nZ2xlKCdjb250ZW50LWxlZnQnLCB2YWx1ZSk7XG4gIH1cblxuICBzZXQgcmlnaHQodmFsdWU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5jbGFzc0xpc3QudG9nZ2xlKCdjb250ZW50LXJpZ2h0JywgdmFsdWUpO1xuICB9XG5cbiAgc2V0IG5vQWx0ZXJuYXRlKHZhbHVlOiBib29sZWFuKSB7XG4gICAgdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuY2xhc3NMaXN0LnRvZ2dsZSgnbm8tYWx0ZXJuYXRlJywgdmFsdWUpO1xuICB9XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHsgfVxuXG59XG4iXX0=