@sd-angular/core
Version:
Sd Angular Core Lib
88 lines (81 loc) • 6.6 kB
JavaScript
import { Directive, TemplateRef, Input, Component, ElementRef, ContentChildren, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
class SdTimelineDefDirective {
constructor(templateRef) {
this.templateRef = templateRef;
}
}
SdTimelineDefDirective.decorators = [
{ type: Directive, args: [{
selector: '[sdTimelineDef]',
},] }
];
SdTimelineDefDirective.ctorParameters = () => [
{ type: TemplateRef }
];
SdTimelineDefDirective.propDecorators = {
sdTimelineDef: [{ type: Input }]
};
class SdTimelineComponent {
constructor(el) {
this.el = el;
this.align = "left";
this.layout = "vertical";
this.toggle = (item) => {
item.active = !item.active;
};
}
ngAfterContentInit() {
this.templates.forEach((item) => {
switch (item.sdTimelineDef) {
case "content":
this.contentTemplate = item.templateRef;
break;
case "opposite":
this.oppositeTemplate = item.templateRef;
break;
case "marker":
this.markerTemplate = item.templateRef;
break;
case "detail":
this.detailTemplate = item.templateRef;
break;
}
});
}
}
SdTimelineComponent.decorators = [
{ type: Component, args: [{
selector: "sd-timeline",
template: "<div\r\n [class]=\"styleClass\"\r\n [ngStyle]=\"style\"\r\n [ngClass]=\"{\r\n 'sd-timeline': true,\r\n 'sd-timeline-left': align === 'left',\r\n 'sd-timeline-right': align === 'right',\r\n 'sd-timeline-top': align === 'top',\r\n 'sd-timeline-bottom': align === 'bottom',\r\n 'sd-timeline-alternate': align === 'alternate',\r\n 'sd-timeline-vertical': layout === 'vertical',\r\n 'sd-timeline-horizontal': layout === 'horizontal'\r\n }\"\r\n>\r\n <div *ngFor=\"let event of value; let last = last\" class=\"sd-timeline-event\">\r\n <div class=\"sd-timeline-event-opposite\">\r\n <ng-container\r\n *ngTemplateOutlet=\"oppositeTemplate; context: { $implicit: event }\"\r\n ></ng-container>\r\n </div>\r\n <div class=\"sd-timeline-event-separator\">\r\n <ng-container *ngIf=\"markerTemplate; else marker\">\r\n <ng-container\r\n *ngTemplateOutlet=\"markerTemplate; context: { $implicit: event }\"\r\n ></ng-container>\r\n </ng-container>\r\n <ng-template #marker>\r\n <div class=\"sd-timeline-event-marker\"></div>\r\n </ng-template>\r\n <div *ngIf=\"!last\" class=\"sd-timeline-event-connector\"></div>\r\n </div>\r\n <div class=\"sd-timeline-event-content\">\r\n <div (click)=\"toggle(event)\" class=\"sd-timeline-event-box\">\r\n <ng-container\r\n *ngTemplateOutlet=\"contentTemplate; context: { $implicit: event }\"\r\n ></ng-container>\r\n <ng-container *ngIf=\"event.active\">\r\n <ng-container\r\n *ngTemplateOutlet=\"detailTemplate; context: { $implicit: event }\"\r\n ></ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n",
styles: [".sd-timeline{display:flex;flex-direction:column;flex-grow:1}.sd-timeline-left .sd-timeline-event-opposite{text-align:right}.sd-timeline-left .sd-timeline-event-content{text-align:left}.sd-timeline-right .sd-timeline-event{flex-direction:row-reverse}.sd-timeline-right .sd-timeline-event-opposite{text-align:left}.sd-timeline-right .sd-timeline-event-content{text-align:right}.sd-timeline-vertical.sd-timeline-alternate .sd-timeline-event:nth-child(2n){flex-direction:row-reverse}.sd-timeline-vertical.sd-timeline-alternate .sd-timeline-event:nth-child(odd) .sd-timeline-event-opposite{text-align:right}.sd-timeline-vertical.sd-timeline-alternate .sd-timeline-event:nth-child(2n) .sd-timeline-event-opposite,.sd-timeline-vertical.sd-timeline-alternate .sd-timeline-event:nth-child(odd) .sd-timeline-event-content{text-align:left}.sd-timeline-vertical.sd-timeline-alternate .sd-timeline-event:nth-child(2n) .sd-timeline-event-content{text-align:right}.sd-timeline-vertical .sd-timeline-event-connector{width:1px}.sd-timeline-event{display:flex;position:relative}.sd-timeline-event:last-child{min-height:0}.sd-timeline-event-opposite{padding:0 1rem 1rem}.sd-timeline-event-content{flex:1;padding:0 1rem 1rem}.sd-timeline-event-separator{align-items:center;display:flex;flex:0;flex-direction:column;position:relative;top:1rem}.sd-timeline-event-marker{align-self:baseline;background-color:#fff;border:1px solid #94b0ff;border-radius:50%;display:flex;height:12px;width:12px}.sd-timeline-event-connector{background-color:#e5e5e5;flex-grow:1}.sd-timeline-horizontal{flex-direction:row}.sd-timeline-horizontal .sd-timeline-event{flex:1;flex-direction:column}.sd-timeline-horizontal .sd-timeline-event-content,.sd-timeline-horizontal .sd-timeline-event-opposite{padding:1rem 0}.sd-timeline-horizontal .sd-timeline-event-connector{height:2px}.sd-timeline-horizontal .sd-timeline-event:last-child{flex:0}.sd-timeline-horizontal .sd-timeline-event-separator{flex-direction:row}.sd-timeline-horizontal .sd-timeline-event-connector{width:100%}.sd-timeline-bottom .sd-timeline-event,.sd-timeline-horizontal.sd-timeline-alternate .sd-timeline-event:nth-child(2n){flex-direction:column-reverse}.sd-timeline-event-box{border-radius:4px;box-shadow:0 2px 4px rgba(47,49,54,.16);cursor:pointer;padding:12px}"]
},] }
];
SdTimelineComponent.ctorParameters = () => [
{ type: ElementRef }
];
SdTimelineComponent.propDecorators = {
value: [{ type: Input }],
style: [{ type: Input }],
styleClass: [{ type: Input }],
align: [{ type: Input }],
layout: [{ type: Input }],
templates: [{ type: ContentChildren, args: [SdTimelineDefDirective,] }]
};
class SdTimelineModule {
}
SdTimelineModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [SdTimelineComponent, SdTimelineDefDirective],
exports: [SdTimelineComponent, SdTimelineDefDirective],
},] }
];
/*
* Public API Surface of superdev-angular-core
*/
/**
* Generated bundle index. Do not edit.
*/
export { SdTimelineComponent, SdTimelineModule, SdTimelineDefDirective as ɵa };
//# sourceMappingURL=sd-angular-core-timeline.js.map