(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
    typeof define === 'function' && define.amd ? define('@sd-angular/core/timeline', ['exports', '@angular/core', '@angular/common'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core.timeline = {}), global.ng.core, global.ng.common));
}(this, (function (exports, core, common) { 'use strict';

    var SdTimelineDefDirective = /** @class */ (function () {
        function SdTimelineDefDirective(templateRef) {
            this.templateRef = templateRef;
        }
        return SdTimelineDefDirective;
    }());
    SdTimelineDefDirective.decorators = [
        { type: core.Directive, args: [{
                    selector: '[sdTimelineDef]',
                },] }
    ];
    SdTimelineDefDirective.ctorParameters = function () { return [
        { type: core.TemplateRef }
    ]; };
    SdTimelineDefDirective.propDecorators = {
        sdTimelineDef: [{ type: core.Input }]
    };

    var SdTimelineComponent = /** @class */ (function () {
        function SdTimelineComponent(el) {
            this.el = el;
            this.align = "left";
            this.layout = "vertical";
            this.toggle = function (item) {
                item.active = !item.active;
            };
        }
        SdTimelineComponent.prototype.ngAfterContentInit = function () {
            var _this = this;
            this.templates.forEach(function (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;
                }
            });
        };
        return SdTimelineComponent;
    }());
    SdTimelineComponent.decorators = [
        { type: core.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 = function () { return [
        { type: core.ElementRef }
    ]; };
    SdTimelineComponent.propDecorators = {
        value: [{ type: core.Input }],
        style: [{ type: core.Input }],
        styleClass: [{ type: core.Input }],
        align: [{ type: core.Input }],
        layout: [{ type: core.Input }],
        templates: [{ type: core.ContentChildren, args: [SdTimelineDefDirective,] }]
    };

    var SdTimelineModule = /** @class */ (function () {
        function SdTimelineModule() {
        }
        return SdTimelineModule;
    }());
    SdTimelineModule.decorators = [
        { type: core.NgModule, args: [{
                    imports: [common.CommonModule],
                    declarations: [SdTimelineComponent, SdTimelineDefDirective],
                    exports: [SdTimelineComponent, SdTimelineDefDirective],
                },] }
    ];

    /*
     * Public API Surface of superdev-angular-core
     */

    /**
     * Generated bundle index. Do not edit.
     */

    exports.SdTimelineComponent = SdTimelineComponent;
    exports.SdTimelineModule = SdTimelineModule;
    exports.ɵa = SdTimelineDefDirective;

    Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=sd-angular-core-timeline.umd.js.map
