@syncfusion/ej2-layouts 24.2.4 → 25.1.35-579988

package/src/timeline/timeline.js

@@ -0,0 +1,392 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, ChildProperty, Collection, Event, NotifyPropertyChanges, Property, getUniqueID, attributes, select, compile, remove, removeClass, append } from '@syncfusion/ej2-base';
+var ITEMLISTCONTAINER = 'e-timeline-items';
+var ITEMCONTAINER = 'e-timeline-item';
+var OPPOSITECONTENT = 'e-opposite-content';
+var DOTCONTAINER = 'e-dot-item';
+var DOTCONTENT = 'e-dot';
+var CONTENT = 'e-content';
+var ITEMCONNECTOR = 'e-connector';
+var VERTICAL = 'e-vertical';
+var HORIZONTAL = 'e-horizontal';
+var TIMELINEREVERSE = 'e-timeline-reverse';
+var RTL = 'e-rtl';
+var DISABLED = 'e-item-disabled';
+var TEMPLATE = 'e-item-template';
+/**
+ * Defines the orientation type of the Timeline.
+ */
+export var TimelineOrientation;
+(function (TimelineOrientation) {
+    /**
+     * Items are displayed horizontally.
+     */
+    TimelineOrientation["Horizontal"] = "Horizontal";
+    /**
+     * Items are displayed vertically.
+     */
+    TimelineOrientation["Vertical"] = "Vertical";
+})(TimelineOrientation || (TimelineOrientation = {}));
+/**
+ * Specifies the alignment of item content within the Timeline.
+ */
+export var TimelineAlign;
+(function (TimelineAlign) {
+    /**
+     * Aligns item content to the top and opposite content to the bottom when the Timeline is in a horizontal orientation, or the content to the left and opposite content to the right when the Timeline is in a vertical orientation.
+     */
+    TimelineAlign["Before"] = "Before";
+    /**
+     * Aligns item content to the bottom and opposite content to the top when the Timeline is in a horizontal orientation, or the content to the right and opposite content to the left when the Timeline is in a vertical orientation.
+     */
+    TimelineAlign["After"] = "After";
+    /**
+     * Aligns item content alternatively, regardless of the Timeline's orientation.
+     */
+    TimelineAlign["Alternate"] = "Alternate";
+    /**
+     * Aligns item content in alternate reverse, regardless of the Timeline's orientation.
+     */
+    TimelineAlign["AlternateReverse"] = "AlternateReverse";
+})(TimelineAlign || (TimelineAlign = {}));
+/**
+ * Specifies the items of the Timeline.
+ */
+var TimelineItem = /** @class */ (function (_super) {
+    __extends(TimelineItem, _super);
+    function TimelineItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], TimelineItem.prototype, "dotCss", void 0);
+    __decorate([
+        Property('')
+    ], TimelineItem.prototype, "content", void 0);
+    __decorate([
+        Property('')
+    ], TimelineItem.prototype, "oppositeContent", void 0);
+    __decorate([
+        Property(false)
+    ], TimelineItem.prototype, "disabled", void 0);
+    __decorate([
+        Property('')
+    ], TimelineItem.prototype, "cssClass", void 0);
+    return TimelineItem;
+}(ChildProperty));
+export { TimelineItem };
+/**
+ * The Timeline component presents a series of events or activities in chronological order, allowing users to track the progression of time.
+ *
+ * ```html
+ * <div id="timeline"></div>
+ * ```
+ * ```typescript
+ * <script>
+ *   let timelineObj: Timeline = new Timeline({items : [{}, {}, {}, {}, {}]});
+ *   timelineObj.appendTo('#timeline');
+ * </script>
+ * ```
+ */
+var Timeline = /** @class */ (function (_super) {
+    __extends(Timeline, _super);
+    /**
+     * * Constructor for creating the Timeline component.
+     *
+     * @param {TimelineModel} options - Specifies the Timeline model.
+     * @param {string | HTMLElement} element - Specifies the element to render as component.
+     * @private
+     */
+    function Timeline(options, element) {
+        return _super.call(this, options, element) || this;
+    }
+    Timeline.prototype.preRender = function () {
+        if (!this.element.id) {
+            this.element.id = getUniqueID('e-' + this.getModuleName());
+        }
+    };
+    /**
+     * To get component name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    Timeline.prototype.getModuleName = function () {
+        return 'timeline';
+    };
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {string}
+     */
+    Timeline.prototype.getPersistData = function () {
+        return this.addOnPersist([]);
+    };
+    Timeline.prototype.render = function () {
+        attributes(this.element, { 'role': 'navigation', 'aria-label': this.element.id });
+        this.timelineListEle = this.createElement('ol', { className: ITEMLISTCONTAINER });
+        this.updateOrientation();
+        this.updateCssClass(this.cssClass);
+        this.updateAlign();
+        this.updateReverse();
+        this.updateRtl();
+        this.updateTemplateFunction();
+        this.renderItems();
+        this.element.appendChild(this.timelineListEle);
+    };
+    Timeline.prototype.updateOrientation = function () {
+        var orientation = this.orientation.toLowerCase();
+        if (orientation === 'horizontal' || orientation === 'vertical') {
+            this.element.classList.remove(HORIZONTAL, VERTICAL);
+            this.element.classList.add('e-' + orientation);
+        }
+    };
+    Timeline.prototype.updateCssClass = function (addCss, removeCss) {
+        if (removeCss === void 0) { removeCss = ""; }
+        var _a, _b;
+        var cssClasses;
+        if (removeCss) {
+            cssClasses = removeCss.trim().split(' ');
+            (_a = this.element.classList).remove.apply(_a, cssClasses);
+        }
+        if (addCss) {
+            cssClasses = addCss.trim().split(' ');
+            (_b = this.element.classList).add.apply(_b, cssClasses);
+        }
+    };
+    Timeline.prototype.updateRtl = function () {
+        this.element.classList[this.enableRtl ? 'add' : 'remove'](RTL);
+    };
+    Timeline.prototype.updateAlign = function () {
+        var align = this.align.toLowerCase();
+        if (align === 'before' || align === 'after' || align === 'alternate' || align === 'alternatereverse') {
+            this.element.classList.remove('e-align-before', 'e-align-after', 'e-align-alternate', 'e-align-alternatereverse');
+            this.element.classList.add('e-align-' + align);
+        }
+    };
+    Timeline.prototype.updateReverse = function () {
+        this.element.classList[this.reverse ? 'add' : 'remove'](TIMELINEREVERSE);
+    };
+    Timeline.prototype.renderItems = function () {
+        var _this = this;
+        var _a;
+        for (var index = 0; index < this.items.length; index++) {
+            var item = this.items[parseInt(index.toString(), 10)];
+            var timelineItem = this.createElement('li', { className: ITEMCONTAINER + ' ' + ITEMCONNECTOR });
+            if (!this.template) {
+                var oppositeTextEle = this.createElement('div', { className: OPPOSITECONTENT });
+                if (item.oppositeContent) {
+                    var oppositeCtn = this.getTemplateFunction(item.oppositeContent);
+                    if (typeof oppositeCtn === 'string') {
+                        oppositeTextEle.innerText = oppositeCtn;
+                    }
+                    else {
+                        append(oppositeCtn({ item: item, itemIndex: index }), oppositeTextEle);
+                    }
+                }
+                timelineItem.appendChild(oppositeTextEle);
+                var dotContainer = this.createElement('div', { className: DOTCONTAINER });
+                var dotEleCss = item.dotCss ? DOTCONTENT + ' ' + item.dotCss.trim() : DOTCONTENT;
+                var dotEle = this.createElement('div', { className: dotEleCss });
+                dotContainer.appendChild(dotEle);
+                timelineItem.appendChild(dotContainer);
+                var contentEle = this.createElement('div', { className: CONTENT });
+                if (item.content) {
+                    var ctn = this.getTemplateFunction(item.content);
+                    if (typeof ctn === 'string') {
+                        contentEle.innerText = ctn;
+                    }
+                    else {
+                        append(ctn({ item: item, itemIndex: index }), contentEle);
+                    }
+                }
+                timelineItem.appendChild(contentEle);
+                if (item.cssClass) {
+                    (_a = timelineItem.classList).add.apply(_a, item.cssClass.trim().split(' '));
+                }
+                if (item.disabled) {
+                    timelineItem.classList.add(DISABLED);
+                }
+            }
+            else {
+                this.renderItemContent(index, false, timelineItem);
+            }
+            var eventArgs = { element: timelineItem, index: index };
+            this.trigger('beforeItemRender', eventArgs, function (args) { _this.timelineListEle.appendChild(args.element); });
+        }
+    };
+    Timeline.prototype.updateTemplateFunction = function () {
+        this.templateFunction = this.template ? this.getTemplateFunction(this.template, false) : null;
+    };
+    Timeline.prototype.renderItemContent = function (index, isrerender, timelineItem) {
+        var listItems = this.timelineListEle.querySelectorAll('li');
+        if (isrerender) {
+            this.removeItemContent(listItems[parseInt((index).toString(), 10)]);
+        }
+        if (this.template) {
+            isrerender ? listItems[parseInt((index).toString(), 10)].classList.add(TEMPLATE) :
+                timelineItem.classList.add(TEMPLATE);
+            var item = this.items[parseInt(index.toString(), 10)];
+            append(this.templateFunction({ item: item, itemIndex: index }, this, 'timelineTemplate', (this.element.id + '_timelineTemplate'), this.isStringTemplate), isrerender ? listItems[parseInt((index).toString(), 10)] : timelineItem);
+        }
+        this.renderReactTemplates();
+    };
+    Timeline.prototype.removeItemContent = function (ele) {
+        ele.classList.remove(TEMPLATE);
+        var firstChild = ele.firstElementChild;
+        for (var i = 0; i < ele.childElementCount; i++) {
+            firstChild.remove();
+        }
+    };
+    /**
+     * Gets template content based on the template property value.
+     *
+     * @param {string | Function} template - Template property value.
+     * @returns {Function} - Return template function.
+     * @hidden
+     */
+    Timeline.prototype.getTemplateFunction = function (template, notCompile) {
+        if (notCompile === void 0) { notCompile = true; }
+        if (typeof template === 'string') {
+            var content = '';
+            try {
+                var tempEle = select(template);
+                if (tempEle) {
+                    //Return innerHTML incase of jsrenderer script else outerHTML
+                    content = tempEle.tagName === 'SCRIPT' ? tempEle.innerHTML : tempEle.outerHTML;
+                    notCompile = false;
+                }
+                else {
+                    content = template;
+                }
+            }
+            catch (e) {
+                content = template;
+            }
+            return notCompile ? content : compile(content);
+        }
+        else {
+            /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
+            return compile(template);
+        }
+    };
+    Timeline.prototype.removeItemElements = function () {
+        var listItems = this.timelineListEle.querySelectorAll('li');
+        for (var i = 0; i < listItems.length; i++) {
+            remove(listItems[parseInt(i.toString(), 10)]);
+        }
+    };
+    Timeline.prototype.updateElementClassArray = function () {
+        var classArray = [RTL, 'e-align-before', 'e-align-after', 'e-outline', 'e-fill', 'e-align-alternate',
+            'e-align-alternatereverse', TIMELINEREVERSE, HORIZONTAL, VERTICAL];
+        removeClass([this.element], classArray);
+    };
+    Timeline.prototype.updateContent = function () {
+        if (this.isReact) {
+            this.clearTemplate(['timelineTemplate']);
+        }
+        for (var i = 0; i < this.items.length; i++) {
+            this.renderItemContent(i, true);
+        }
+    };
+    Timeline.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
+        // unwires the events and detach the li elements
+        this.removeItemElements();
+        this.element.removeAttribute("role");
+        this.element.removeAttribute("aria-label");
+        this.clearTemplate();
+        if (this.timelineListEle) {
+            remove(this.timelineListEle);
+        }
+        this.timelineListEle = null;
+        this.updateElementClassArray();
+    };
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param  {TimelineModel} newProp - Specifies new properties
+     * @param  {TimelineModel} oldProp - Specifies old properties
+     * @returns {void}
+     * @private
+     */
+    Timeline.prototype.onPropertyChanged = function (newProp, oldProp) {
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'items': {
+                    this.removeItemElements();
+                    this.renderItems();
+                    break;
+                }
+                case 'orientation':
+                    this.updateOrientation();
+                    break;
+                case 'align':
+                    this.updateAlign();
+                    break;
+                case 'enableRtl':
+                    this.updateRtl();
+                    break;
+                case 'cssClass':
+                    this.updateCssClass(newProp.cssClass, oldProp.cssClass);
+                    break;
+                case 'reverse':
+                    this.element.classList[this.reverse ? 'add' : 'remove'](TIMELINEREVERSE);
+                    break;
+                case 'template':
+                    this.updateTemplateFunction();
+                    this.updateContent();
+                    break;
+            }
+        }
+    };
+    __decorate([
+        Property(TimelineOrientation.Vertical)
+    ], Timeline.prototype, "orientation", void 0);
+    __decorate([
+        Property(TimelineAlign.After)
+    ], Timeline.prototype, "align", void 0);
+    __decorate([
+        Collection([], TimelineItem)
+    ], Timeline.prototype, "items", void 0);
+    __decorate([
+        Property('')
+    ], Timeline.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], Timeline.prototype, "reverse", void 0);
+    __decorate([
+        Property('')
+    ], Timeline.prototype, "template", void 0);
+    __decorate([
+        Event()
+    ], Timeline.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], Timeline.prototype, "beforeItemRender", void 0);
+    Timeline = __decorate([
+        NotifyPropertyChanges
+    ], Timeline);
+    return Timeline;
+}(Component));
+export { Timeline };

package/styles/avatar/_bds-definition.scss

@@ -0,0 +1,32 @@
+// Avatar Base
+$avatar-base-border-radius: 8px !default;
+$avatar-base-background-color: $content-bg-color-alt3 !default;
+$avatar-base-font-size: $text-sm !default;
+$avatar-base-width: 40px !default;
+$avatar-base-height: 40px !default;
+$avatar-base-line-height: 22px !default;
+$avatar-base-text-color: $content-text-color-alt2 !default;
+$avatar-base-font-weight: $font-weight-medium !default;
+$avatar-base-img-height: 100% !default;
+
+// Circle Avatar
+$avatar-circle-border-radius: 50% !default;
+
+// Avatar size
+$avatar-xsmall-font-size: $text-xxs !default;
+$avatar-small-font-size: $text-xs !default;
+$avatar-large-font-size: $text-lg !default;
+$avatar-xlarge-font-size: $text-xl !default;
+
+// Avatar Line Height
+$avatar-base-xsmall-line-height: 16px !default;
+$avatar-base-small-line-height: 18px !default;
+$avatar-base-large-line-height: 28px !default;
+$avatar-base-xlarge-line-height: 28px !default;
+
+//border
+$avatar-border: $avatar-border-color !default;
+
+.e-avatar {
+  border: 1px solid $avatar-border;
+}

package/styles/bootstrap-dark.css

@@ -1348,4 +1348,243 @@
 }
 .e-dashboardlayout.e-control .e-panel.e-bigger .e-panel-header {
   color: #acacac;
+}
+
+.e-timeline {
+  --dot-size: 16px;
+  --dot-outer-space: 0;
+  --dot-border: 1px;
+  --connector-size: 1px;
+  --dot-radius: 50%;
+  height: inherit;
+  width: 100%;
+}
+.e-timeline [class^="e-dot "]::before,
+.e-timeline .e-dot-item,
+.e-timeline .e-dot {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+}
+.e-timeline [class^="e-dot "]::before {
+  min-width: 32px;
+  min-height: 32px;
+  border-radius: var(--dot-radius);
+}
+.e-timeline .e-timeline-items {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  list-style: none;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  padding: 0;
+  width: inherit;
+  height: inherit;
+}
+.e-timeline .e-timeline-item {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: row;
+      flex-direction: row;
+  position: relative;
+  -ms-flex-align: start;
+      align-items: flex-start;
+  width: inherit;
+  height: inherit;
+}
+.e-timeline .e-timeline-item.e-connector::after {
+  top: 0;
+  bottom: 0;
+  left: calc(50% - var(--connector-size));
+  right: auto;
+  content: "";
+  position: absolute;
+  z-index: 999;
+  border-width: var(--connector-size);
+  border-style: solid;
+}
+.e-timeline .e-timeline-item.e-connector.e-item-template::after {
+  content: unset;
+}
+.e-timeline .e-dot-item {
+  position: relative;
+  -ms-flex: 0 1 calc(var(--dot-size) * 3);
+      flex: 0 1 calc(var(--dot-size) * 3);
+  z-index: 1000;
+}
+.e-timeline .e-dot {
+  min-width: var(--dot-size);
+  min-height: var(--dot-size);
+  border-radius: var(--dot-radius);
+  outline: var(--dot-outer-space) solid;
+  border: var(--dot-border) solid;
+  font-size: 16px;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.e-timeline .e-opposite-content,
+.e-timeline .e-content {
+  -ms-flex: 1 1 50%;
+      flex: 1 1 50%;
+}
+.e-timeline .e-opposite-content {
+  font-size: 12px;
+  text-align: right;
+}
+.e-timeline .e-content {
+  text-align: left;
+  font-size: 14px;
+  font-weight: 500;
+}
+.e-timeline .e-timeline-item:first-child::after {
+  top: 0;
+}
+.e-timeline .e-timeline-item:last-child::after {
+  bottom: calc(var(--dot-size) * 2);
+}
+.e-timeline.e-vertical.e-align-before .e-timeline-item, .e-timeline.e-vertical.e-align-alternate .e-timeline-item:nth-of-type(even), .e-timeline.e-vertical.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) {
+  -ms-flex-direction: row-reverse;
+      flex-direction: row-reverse;
+}
+.e-timeline.e-vertical.e-timeline-reverse .e-timeline-items {
+  -ms-flex-direction: column-reverse;
+      flex-direction: column-reverse;
+}
+.e-timeline.e-vertical.e-align-before .e-timeline-items .e-opposite-content, .e-timeline.e-vertical.e-align-after .e-timeline-items .e-content {
+  text-align: left;
+}
+.e-timeline.e-vertical .e-timeline-item.e-connector:last-child::after {
+  content: unset;
+}
+.e-timeline.e-vertical.e-timeline-reverse .e-timeline-item.e-connector:first-child::after {
+  content: unset;
+}
+.e-timeline.e-vertical.e-timeline-reverse .e-timeline-item.e-connector:last-child::after {
+  content: "";
+  bottom: 0;
+}
+.e-timeline.e-vertical.e-align-after .e-opposite-content, .e-timeline.e-vertical.e-align-before .e-content, .e-timeline.e-vertical.e-rtl.e-align-after .e-content, .e-timeline.e-vertical.e-rtl.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-vertical.e-rtl.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-vertical.e-align-alternate .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-vertical.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-vertical.e-rtl.e-align-alternate .e-timeline-item:nth-of-type(even) .e-opposite-content, .e-timeline.e-vertical.e-rtl.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-opposite-content, .e-timeline.e-vertical.e-rtl.e-align-before .e-opposite-content, .e-timeline.e-vertical.e-align-alternate .e-opposite-content, .e-timeline.e-vertical.e-align-alternatereverse .e-opposite-content {
+  text-align: right;
+}
+.e-timeline.e-vertical.e-align-before .e-opposite-content, .e-timeline.e-vertical.e-align-after .e-content, .e-timeline.e-vertical.e-rtl.e-align-after .e-opposite-content, .e-timeline.e-vertical.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-vertical.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-vertical.e-align-alternate .e-timeline-item:nth-of-type(even) .e-opposite-content, .e-timeline.e-vertical.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-opposite-content, .e-timeline.e-vertical.e-rtl.e-align-alternate .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-vertical.e-rtl.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-vertical.e-rtl.e-align-before .e-content, .e-timeline.e-vertical.e-rtl.e-align-alternate .e-opposite-content, .e-timeline.e-vertical.e-rtl.e-align-alternatereverse .e-opposite-content {
+  text-align: left;
+}
+.e-timeline.e-vertical .e-dot-item {
+  width: calc(var(--dot-size) * 2);
+}
+.e-timeline.e-horizontal .e-timeline-items {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-direction: row;
+      flex-direction: row;
+}
+.e-timeline.e-horizontal .e-timeline-item {
+  height: auto;
+}
+.e-timeline.e-horizontal.e-rtl .e-timeline-item.e-connector::after, .e-timeline.e-horizontal.e-timeline-reverse .e-timeline-item.e-connector::after {
+  right: calc(50% - var(--connector-size));
+  left: auto;
+}
+.e-timeline.e-horizontal .e-dot-item {
+  margin: calc(var(--dot-size) * 2 / 2) 0;
+}
+.e-timeline.e-horizontal .e-timeline-item {
+  -ms-flex-direction: column;
+      flex-direction: column;
+  -ms-flex-align: center;
+      align-items: center;
+}
+.e-timeline.e-horizontal .e-opposite-content,
+.e-timeline.e-horizontal .e-content {
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-timeline.e-horizontal.e-align-alternate .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-horizontal.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-opposite-content, .e-timeline.e-horizontal.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-horizontal.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-opposite-content, .e-timeline.e-horizontal.e-align-before .e-content {
+  -ms-flex-align: end;
+      align-items: flex-end;
+}
+.e-timeline.e-horizontal.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-horizontal.e-align-alternate .e-timeline-item:nth-of-type(even) .e-opposite-content, .e-timeline.e-horizontal.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-horizontal.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-opposite-content, .e-timeline.e-horizontal.e-align-before .e-opposite-content {
+  -ms-flex-align: start;
+      align-items: flex-start;
+}
+.e-timeline.e-horizontal.e-align-before .e-timeline-item, .e-timeline.e-horizontal.e-align-alternate .e-timeline-item:nth-of-type(even), .e-timeline.e-horizontal.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) {
+  -ms-flex-direction: column-reverse;
+      flex-direction: column-reverse;
+}
+.e-timeline.e-horizontal.e-timeline-reverse .e-timeline-items {
+  -ms-flex-direction: row-reverse;
+      flex-direction: row-reverse;
+}
+.e-timeline.e-horizontal .e-timeline-item::after {
+  width: 100%;
+  height: 0;
+  top: calc(50% - var(--connector-size));
+}
+.e-timeline.e-horizontal .e-opposite-content {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: end;
+      align-items: flex-end;
+  text-align: left;
+  padding: 0;
+}
+.e-timeline.e-horizontal .e-content {
+  padding: 0;
+}
+.e-timeline.e-horizontal .e-timeline-item:last-child::after {
+  width: auto;
+}
+
+.e-bigger.e-timeline [class^="e-dot "]::before,
+.e-bigger .e-timeline [class^="e-dot "]::before {
+  min-width: 40px;
+  min-height: 40px;
+  font-size: 18px;
+}
+.e-bigger.e-timeline .e-dot-item,
+.e-bigger .e-timeline .e-dot-item {
+  -ms-flex: 0 1 calc(var(--dot-size) * 4);
+      flex: 0 1 calc(var(--dot-size) * 4);
+}
+.e-bigger.e-timeline .e-dot,
+.e-bigger .e-timeline .e-dot {
+  min-width: 20px;
+  min-height: 20px;
+}
+.e-bigger.e-timeline .e-opposite-content,
+.e-bigger .e-timeline .e-opposite-content {
+  font-size: 14px;
+}
+.e-bigger.e-timeline .e-content,
+.e-bigger .e-timeline .e-content {
+  font-size: 16px;
+}
+
+.e-timeline .e-dot {
+  background-color: #676767;
+  border-color: #676767;
+  color: #f0f0f0;
+  outline-color: #393939;
+}
+.e-timeline.e-outline .e-dot {
+  background-color: #393939;
+}
+.e-timeline .e-timeline-item.e-connector::after {
+  border-color: #676767;
+}
+.e-timeline .e-content {
+  color: #f0f0f0;
+}
+.e-timeline .e-opposite-content {
+  color: #f0f0f0;
+}
+.e-timeline .e-item-disabled .e-content,
+.e-timeline .e-item-disabled .e-opposite-content {
+  color: #767676;
 }

package/styles/bootstrap-dark.scss

@@ -2,3 +2,4 @@
 @import 'card/bootstrap-dark.scss';
 @import 'splitter/bootstrap-dark.scss';
 @import 'dashboard-layout/bootstrap-dark.scss';
+@import 'timeline/bootstrap-dark.scss';