@sd-angular/core
Version:
Sd Angular Core Lib
103 lines (94 loc) • 8.03 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('-angular/core/timeline', ['exports', '/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