import { Component, ContentChildren, ElementRef, Input, } from "@angular/core";
import { SdTimelineDefDirective } from "../directives/timeline-def.directive";
export 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,] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IkM6L1VzZXJzL25naGlhdHQxNV9vbmVtb3VudC9Eb2N1bWVudHMvbGliLWNvcmUtdWkvcHJvamVjdHMvc2QtY29yZS90aW1lbGluZS8iLCJzb3VyY2VzIjpbInNyYy9saWIvY29tcG9uZW50cy90aW1lbGluZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLFNBQVMsRUFDVCxlQUFlLEVBQ2YsVUFBVSxFQUNWLEtBQUssR0FHTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQU85RSxNQUFNLE9BQU8sbUJBQW1CO0lBcUI5QixZQUFvQixFQUFjO1FBQWQsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQWR6QixVQUFLLEdBQVcsTUFBTSxDQUFDO1FBRXZCLFdBQU0sR0FBVyxVQUFVLENBQUM7UUFvQ3JDLFdBQU0sR0FBRyxDQUFDLElBQUksRUFBRSxFQUFFO1lBQ2hCLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQzdCLENBQUMsQ0FBQztJQTFCbUMsQ0FBQztJQUV0QyxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRTtZQUM5QixRQUFRLElBQUksQ0FBQyxhQUFhLEVBQUU7Z0JBQzFCLEtBQUssU0FBUztvQkFDWixJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUM7b0JBQ3hDLE1BQU07Z0JBRVIsS0FBSyxVQUFVO29CQUNiLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDO29CQUN6QyxNQUFNO2dCQUVSLEtBQUssUUFBUTtvQkFDWCxJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUM7b0JBQ3ZDLE1BQU07Z0JBRVIsS0FBSyxRQUFRO29CQUNYLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQztvQkFDdkMsTUFBTTthQUNUO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDOzs7WUFoREYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxhQUFhO2dCQUN2QixtdURBQXdDOzthQUV6Qzs7O1lBWEMsVUFBVTs7O29CQWFULEtBQUs7b0JBRUwsS0FBSzt5QkFFTCxLQUFLO29CQUVMLEtBQUs7cUJBRUwsS0FBSzt3QkFFTCxlQUFlLFNBQUMsc0JBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBBZnRlckNvbnRlbnRJbml0LFxyXG4gIENvbXBvbmVudCxcclxuICBDb250ZW50Q2hpbGRyZW4sXHJcbiAgRWxlbWVudFJlZixcclxuICBJbnB1dCxcclxuICBRdWVyeUxpc3QsXHJcbiAgVGVtcGxhdGVSZWYsXHJcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHsgU2RUaW1lbGluZURlZkRpcmVjdGl2ZSB9IGZyb20gXCIuLi9kaXJlY3RpdmVzL3RpbWVsaW5lLWRlZi5kaXJlY3RpdmVcIjtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiBcInNkLXRpbWVsaW5lXCIsXHJcbiAgdGVtcGxhdGVVcmw6IFwiLi90aW1lbGluZS5jb21wb25lbnQuaHRtbFwiLFxyXG4gIHN0eWxlVXJsczogW1wiLi90aW1lbGluZS5jb21wb25lbnQuc2Nzc1wiXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNkVGltZWxpbmVDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0IHtcclxuICBASW5wdXQoKSB2YWx1ZTogYW55W107XHJcblxyXG4gIEBJbnB1dCgpIHN0eWxlOiBhbnk7XHJcblxyXG4gIEBJbnB1dCgpIHN0eWxlQ2xhc3M6IHN0cmluZztcclxuXHJcbiAgQElucHV0KCkgYWxpZ246IHN0cmluZyA9IFwibGVmdFwiO1xyXG5cclxuICBASW5wdXQoKSBsYXlvdXQ6IHN0cmluZyA9IFwidmVydGljYWxcIjtcclxuXHJcbiAgQENvbnRlbnRDaGlsZHJlbihTZFRpbWVsaW5lRGVmRGlyZWN0aXZlKSB0ZW1wbGF0ZXM6IFF1ZXJ5TGlzdDxhbnk+O1xyXG5cclxuICBjb250ZW50VGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XHJcblxyXG4gIG9wcG9zaXRlVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XHJcblxyXG4gIG1hcmtlclRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xyXG5cclxuICBkZXRhaWxUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbDogRWxlbWVudFJlZikge31cclxuXHJcbiAgbmdBZnRlckNvbnRlbnRJbml0KCkge1xyXG4gICAgdGhpcy50ZW1wbGF0ZXMuZm9yRWFjaCgoaXRlbSkgPT4ge1xyXG4gICAgICBzd2l0Y2ggKGl0ZW0uc2RUaW1lbGluZURlZikge1xyXG4gICAgICAgIGNhc2UgXCJjb250ZW50XCI6XHJcbiAgICAgICAgICB0aGlzLmNvbnRlbnRUZW1wbGF0ZSA9IGl0ZW0udGVtcGxhdGVSZWY7XHJcbiAgICAgICAgICBicmVhaztcclxuXHJcbiAgICAgICAgY2FzZSBcIm9wcG9zaXRlXCI6XHJcbiAgICAgICAgICB0aGlzLm9wcG9zaXRlVGVtcGxhdGUgPSBpdGVtLnRlbXBsYXRlUmVmO1xyXG4gICAgICAgICAgYnJlYWs7XHJcblxyXG4gICAgICAgIGNhc2UgXCJtYXJrZXJcIjpcclxuICAgICAgICAgIHRoaXMubWFya2VyVGVtcGxhdGUgPSBpdGVtLnRlbXBsYXRlUmVmO1xyXG4gICAgICAgICAgYnJlYWs7XHJcblxyXG4gICAgICAgIGNhc2UgXCJkZXRhaWxcIjpcclxuICAgICAgICAgIHRoaXMuZGV0YWlsVGVtcGxhdGUgPSBpdGVtLnRlbXBsYXRlUmVmO1xyXG4gICAgICAgICAgYnJlYWs7XHJcbiAgICAgIH1cclxuICAgIH0pO1xyXG4gIH1cclxuXHJcbiAgdG9nZ2xlID0gKGl0ZW0pID0+IHtcclxuICAgIGl0ZW0uYWN0aXZlID0gIWl0ZW0uYWN0aXZlO1xyXG4gIH07XHJcbn1cclxuIl19