ng-devui
Version:
DevUI components based on Angular
271 lines (265 loc) • 38.7 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, TemplateRef, Component, Input, Output, HostBinding, ContentChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'ng-devui/utils';
import { SafePipeModule } from 'ng-devui/utils';
import { FormsModule } from '@angular/forms';
class TimeAxisItemComponent {
set type(type) {
switch (type) {
case 'success':
this._type = 'right';
break;
case 'danger':
this._type = 'danger';
break;
case 'warning':
this._type = 'warning';
break;
case 'primary':
this._type = 'primary';
break;
case 'running':
this._type = 'running';
this.dotText = '↻';
break;
default:
break;
}
}
/**
* @deprecated Use type to replace.
*/
set status(status) {
if (status !== undefined) {
this.statusChanged.emit(status);
if (status === 'running') {
this.type = 'running';
}
else if (this._type === 'running' && status === '') {
this.type = 'primary';
}
}
}
get horizontalNoLine() {
return this.direction === 'horizontal' && this?.lineStyle?.style === 'none';
}
get verticalNoLine() {
return this.direction === 'vertical' && this?.lineStyle?.style === 'none';
}
constructor() {
this.horizontalAlign = 'center';
this.mode = 'normal';
this.statusChanged = new EventEmitter();
}
ngOnInit() {
if (this.position === undefined) {
this.position = (this.direction === 'vertical' ? 'right' : 'bottom');
}
}
get extraTemplate() {
return this.extraElement instanceof TemplateRef ? this.extraElement : null;
}
get dotTemplate() {
return this.customDot instanceof TemplateRef ? this.extraElement : null;
}
get timeAxisLineClass() {
let styleClass = `devui-time-axis-line-style-${this.lineStyle?.style || 'solid'}`;
styleClass += this.timePosition !== 'bottom' ? ' devui-time-axis-item-line' : ' devui-time-axis-item-line-time-bottom';
return styleClass;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeAxisItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TimeAxisItemComponent, selector: "d-time-axis-item", inputs: { model: "model", direction: "direction", time: "time", timePosition: "timePosition", position: "position", lineStyle: "lineStyle", customDot: "customDot", dotColor: "dotColor", iconClass: "iconClass", extraElement: "extraElement", text: "text", contentTemplate: "contentTemplate", data: "data", horizontalAlign: "horizontalAlign", mode: "mode", type: "type", status: "status" }, outputs: { statusChanged: "statusChanged" }, host: { properties: { "class.devui-time-axis-item-horizontal-no-line": "this.horizontalNoLine", "class.devui-time-axis-item-vertical-no-line": "this.verticalNoLine" } }, ngImport: i0, template: "<div\n [class.devui-time-axis-item-horizontal]=\"direction === 'horizontal'\"\n [class.devui-time-axis-item-vertical]=\"direction === 'vertical' && timePosition !== 'bottom'\"\n [class.devui-time-axis-item-vertical-time-bottom]=\"direction === 'vertical' && timePosition === 'bottom'\"\n>\n <div\n *ngIf=\"timePosition !== 'bottom' && mode !== 'bottom' && mode !== 'right'\"\n [class.devui-time-axis-item-data-horizontal-top]=\"direction === 'horizontal'\"\n [class.devui-time-axis-item-data-vertical-left]=\"direction === 'vertical'\"\n >\n <div *ngIf=\"time && (position === 'bottom' || position === 'right')\">\n <div [class.devui-time-axis-item-horizontal-align-center]=\"position === 'bottom' && horizontalAlign === 'center'\">{{ time }}</div>\n </div>\n <div\n *ngIf=\"position === 'top' || position === 'left'\"\n [class.devui-time-axis-item-horizontal-align-center]=\"position === 'top' && horizontalAlign === 'center'\"\n >\n <div *ngIf=\"model !== 'template'\" [innerHTML]=\"text | safe: 'html'\"></div>\n <div *ngIf=\"model === 'template'\">\n <ng-template [ngTemplateOutlet]=\"contentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this, data: data }\"></ng-template>\n </div>\n </div>\n </div>\n <div\n class=\"devui-time-axis-item-axis\"\n [class.devui-time-axis-item-axis-padding-horizontal]=\"direction === 'horizontal'\"\n [class.devui-time-axis-item-axis-padding-vertical]=\"direction === 'vertical'\"\n [class.devui-time-axis-item-axis-padding-mode-top]=\"mode === 'top'\"\n [class.devui-time-axis-item-axis-padding-mode-bottom]=\"mode === 'bottom'\"\n [class.devui-time-axis-item-axis-padding-mode-left]=\"mode === 'left'\"\n [class.devui-time-axis-item-axis-padding-mode-right]=\"mode === 'right'\"\n >\n <div\n *ngIf=\"!customDot && (_type === 'primary' || !_type)\"\n [style.borderColor]=\"dotColor\"\n class=\"devui-time-axis-item-dot devui-time-axis-item-type-{{ _type || 'primary' }} {{ iconClass }}\"\n ></div>\n <div\n *ngIf=\"!customDot && _type !== 'primary' && _type\"\n class=\"devui-time-axis-item-dot devui-time-axis-item-type-{{ _type || 'primary' }} {{ iconClass }}\"\n >\n <svg\n *ngIf=\"_type === 'danger'\"\n class=\"devui-icon devui-icon-error\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\n <path\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n <i *ngIf=\"_type === 'right' || _type === 'warning'\" class=\"devui-icon icon-{{ _type }}-o\"></i>\n <span *ngIf=\"_type === 'running'\">\n {{ dotText }}\n </span>\n </div>\n <div *ngIf=\"customDot\" class=\"devui-time-axis-item-custom-dot\">\n <ng-template [ngTemplateOutlet]=\"dotTemplate || defaultDotTemplate\"> </ng-template>\n <ng-template #defaultDotTemplate>\n <span [innerHTML]=\"customDot | safe: 'html'\"></span>\n </ng-template>\n </div>\n <div *ngIf=\"time && timePosition === 'bottom'\">{{ time }}</div>\n <div class=\"{{ timeAxisLineClass }}\" [style.borderColor]=\"lineStyle?.color\">\n <div *ngIf=\"extraElement\" class=\"devui-time-axis-middle-zone\">\n <ng-template [ngTemplateOutlet]=\"extraTemplate || defaultTemplate\"> </ng-template>\n <ng-template #defaultTemplate>\n <div [innerHTML]=\"extraElement | safe: 'html'\"></div>\n </ng-template>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"mode !== 'top' && mode !== 'left'\"\n [class.devui-time-axis-item-data-horizontal-bottom]=\"direction === 'horizontal'\"\n [class.devui-time-axis-item-data-vertical-right]=\"direction === 'vertical' && timePosition !== 'bottom'\"\n [class.devui-time-axis-item-data-time-bottom]=\"timePosition === 'bottom'\"\n >\n <div *ngIf=\"time && (position === 'top' || position === 'left')\">\n <div [class.devui-time-axis-item-horizontal-align-center]=\"position === 'top' && horizontalAlign === 'center'\">{{ time }}</div>\n </div>\n <div\n *ngIf=\"position === 'bottom' || position === 'right'\"\n [class.devui-time-axis-item-horizontal-align-center]=\"position === 'bottom' && horizontalAlign === 'center'\"\n >\n <div *ngIf=\"model !== 'template'\" [innerHTML]=\"text | safe: 'html'\"></div>\n <div *ngIf=\"model === 'template'\">\n <ng-template [ngTemplateOutlet]=\"contentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this, data: data }\"></ng-template>\n </div>\n </div>\n </div>\n</div>\n", styles: [".devui-time-axis-item-horizontal{display:flex;flex-direction:column;height:100%}.devui-time-axis-item-horizontal .devui-time-axis-item-axis{display:flex;flex-direction:row;align-items:center}.devui-time-axis-item-horizontal .devui-time-axis-item-dot,.devui-time-axis-item-horizontal .devui-time-axis-item-dot>svg{width:18px;height:18px}.devui-time-axis-item-horizontal .devui-time-axis-item-dot>i{font-size:18px}.devui-time-axis-item-horizontal .devui-time-axis-item-custom-dot{width:18px;height:18px;text-align:center}.devui-time-axis-item-horizontal .devui-time-axis-item-line{position:relative;min-width:60px;width:calc(100% - 18px);border-bottom-width:2px;border-bottom-color:var(--devui-dividing-line, #f0f0f0)}.devui-time-axis-item-horizontal .devui-time-axis-item-data-horizontal-top{display:flex;align-items:flex-end;margin-right:12px;flex:1}.devui-time-axis-item-horizontal .devui-time-axis-item-data-horizontal-bottom{margin-right:12px;flex:1}.devui-time-axis-item-horizontal .devui-time-axis-item-axis-padding-horizontal{padding:12px 0}.devui-time-axis-item-horizontal .devui-time-axis-item-axis-padding-mode-top{padding-bottom:0}.devui-time-axis-item-horizontal .devui-time-axis-item-axis-padding-mode-bottom{padding-top:0}.devui-time-axis-item-horizontal .devui-time-axis-line-style-dashed{border-bottom-style:dashed}.devui-time-axis-item-horizontal .devui-time-axis-line-style-solid{border-bottom-style:solid}.devui-time-axis-item-horizontal .devui-time-axis-line-style-dotted{border-bottom-style:dotted}.devui-time-axis-item-horizontal .devui-time-axis-line-style-none{border-bottom-style:none}.devui-time-axis-item-horizontal .devui-time-axis-middle-zone{position:absolute;left:50%;transform:translate(-50%,-50%)}.devui-time-axis-item-vertical{display:flex;flex-direction:row;width:100%}.devui-time-axis-item-vertical .devui-time-axis-item-axis{display:flex;flex-direction:column;align-items:center}.devui-time-axis-item-vertical .devui-time-axis-item-dot,.devui-time-axis-item-vertical .devui-time-axis-item-dot>svg{width:18px;height:18px}.devui-time-axis-item-vertical .devui-time-axis-item-dot>i{font-size:18px}.devui-time-axis-item-vertical .devui-time-axis-item-custom-dot{width:18px;height:18px;text-align:center}.devui-time-axis-item-vertical .devui-time-axis-item-line{position:relative;height:calc(100% - 18px);border-left-width:2px;border-left-color:var(--devui-dividing-line, #f0f0f0)}.devui-time-axis-item-vertical .devui-time-axis-item-data-vertical-left{text-align:end;margin-bottom:24px;flex:1}.devui-time-axis-item-vertical .devui-time-axis-item-data-vertical-right{margin-bottom:24px;flex:1}.devui-time-axis-item-vertical .devui-time-axis-item-axis-padding-vertical{padding:0 12px}.devui-time-axis-item-vertical .devui-time-axis-item-axis-padding-mode-left{padding-right:0}.devui-time-axis-item-vertical .devui-time-axis-item-axis-padding-mode-right{padding-left:0}.devui-time-axis-item-vertical .devui-time-axis-line-style-dashed{border-left-style:dashed}.devui-time-axis-item-vertical .devui-time-axis-line-style-solid{border-left-style:solid}.devui-time-axis-item-vertical .devui-time-axis-line-style-dotted{border-left-style:dotted}.devui-time-axis-item-vertical .devui-time-axis-line-style-none{border-left-style:none}.devui-time-axis-item-vertical .devui-time-axis-middle-zone{position:absolute;top:50%;transform:translate(-50%,-50%)}.devui-time-axis-item-vertical-time-bottom{display:flex}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-axis{display:flex;flex-direction:column;align-items:center}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-dot,.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-dot>svg{width:18px;height:18px}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-dot>i{font-size:18px}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-custom-dot{width:18px;height:18px;text-align:center}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-line-time-bottom{position:relative;height:calc(100% - 36px);border-left-width:2px;border-left-color:var(--devui-dividing-line, #f0f0f0)}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-line-style-dashed{border-left-style:dashed}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-line-style-solid{border-left-style:solid}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-line-style-none{border-left-style:none}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-middle-zone{position:absolute;top:50%;transform:translate(-50%,-50%)}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-data-time-bottom{margin-left:12px;margin-bottom:40px}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-template{margin-left:12px;margin-bottom:24px}.devui-time-axis-item-type-primary{border:2px solid var(--devui-placeholder, #808080);border-radius:50%}.devui-time-axis-item-type-right i{color:var(--devui-success, #058358)}.devui-time-axis-item-type-danger path{fill:var(--devui-danger, #e02128)}.devui-time-axis-item-type-danger circle{fill:var(--devui-light-text, #ffffff)}.devui-time-axis-item-type-warning i{color:var(--devui-warning, #fcc800)}.devui-time-axis-item-type-running{line-height:16px;text-align:center;animation:devui-time-axis-running 1.5s linear infinite;border:2px solid var(--devui-success, #058358);border-radius:50%}@keyframes devui-time-axis-running{0%{transform:rotate(0);color:var(--devui-success, #058358);border-color:var(--devui-success, #058358)}50%{transform:rotate(180deg);color:var(--devui-success, #058358);border-color:var(--devui-success, #058358)}to{transform:rotate(360deg);color:var(--devui-success, #058358);border-color:var(--devui-success, #058358)}}.devui-time-axis-item-data-hidden{visibility:hidden}:host.devui-time-axis-item-horizontal-no-line{width:auto!important}:host.devui-time-axis-item-horizontal-no-line .devui-time-axis-item-data-horizontal-top{width:max-content}:host.devui-time-axis-item-horizontal-no-line .devui-time-axis-item-data-horizontal-bottom{width:max-content}:host.devui-time-axis-item-vertical-no-line .devui-time-axis-item-data-time-bottom{margin-bottom:0}:host.devui-time-axis-item-vertical-no-line .devui-time-axis-item-data-vertical-left{margin-bottom:0}:host.devui-time-axis-item-vertical-no-line .devui-time-axis-item-data-vertical-right{margin-bottom:0}.devui-time-axis-item-horizontal-align-center{position:relative;width:fit-content;transform:translate(-50%);left:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.SafePipe, name: "safe" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeAxisItemComponent, decorators: [{
type: Component,
args: [{ selector: 'd-time-axis-item', template: "<div\n [class.devui-time-axis-item-horizontal]=\"direction === 'horizontal'\"\n [class.devui-time-axis-item-vertical]=\"direction === 'vertical' && timePosition !== 'bottom'\"\n [class.devui-time-axis-item-vertical-time-bottom]=\"direction === 'vertical' && timePosition === 'bottom'\"\n>\n <div\n *ngIf=\"timePosition !== 'bottom' && mode !== 'bottom' && mode !== 'right'\"\n [class.devui-time-axis-item-data-horizontal-top]=\"direction === 'horizontal'\"\n [class.devui-time-axis-item-data-vertical-left]=\"direction === 'vertical'\"\n >\n <div *ngIf=\"time && (position === 'bottom' || position === 'right')\">\n <div [class.devui-time-axis-item-horizontal-align-center]=\"position === 'bottom' && horizontalAlign === 'center'\">{{ time }}</div>\n </div>\n <div\n *ngIf=\"position === 'top' || position === 'left'\"\n [class.devui-time-axis-item-horizontal-align-center]=\"position === 'top' && horizontalAlign === 'center'\"\n >\n <div *ngIf=\"model !== 'template'\" [innerHTML]=\"text | safe: 'html'\"></div>\n <div *ngIf=\"model === 'template'\">\n <ng-template [ngTemplateOutlet]=\"contentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this, data: data }\"></ng-template>\n </div>\n </div>\n </div>\n <div\n class=\"devui-time-axis-item-axis\"\n [class.devui-time-axis-item-axis-padding-horizontal]=\"direction === 'horizontal'\"\n [class.devui-time-axis-item-axis-padding-vertical]=\"direction === 'vertical'\"\n [class.devui-time-axis-item-axis-padding-mode-top]=\"mode === 'top'\"\n [class.devui-time-axis-item-axis-padding-mode-bottom]=\"mode === 'bottom'\"\n [class.devui-time-axis-item-axis-padding-mode-left]=\"mode === 'left'\"\n [class.devui-time-axis-item-axis-padding-mode-right]=\"mode === 'right'\"\n >\n <div\n *ngIf=\"!customDot && (_type === 'primary' || !_type)\"\n [style.borderColor]=\"dotColor\"\n class=\"devui-time-axis-item-dot devui-time-axis-item-type-{{ _type || 'primary' }} {{ iconClass }}\"\n ></div>\n <div\n *ngIf=\"!customDot && _type !== 'primary' && _type\"\n class=\"devui-time-axis-item-dot devui-time-axis-item-type-{{ _type || 'primary' }} {{ iconClass }}\"\n >\n <svg\n *ngIf=\"_type === 'danger'\"\n class=\"devui-icon devui-icon-error\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\n <path\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n <i *ngIf=\"_type === 'right' || _type === 'warning'\" class=\"devui-icon icon-{{ _type }}-o\"></i>\n <span *ngIf=\"_type === 'running'\">\n {{ dotText }}\n </span>\n </div>\n <div *ngIf=\"customDot\" class=\"devui-time-axis-item-custom-dot\">\n <ng-template [ngTemplateOutlet]=\"dotTemplate || defaultDotTemplate\"> </ng-template>\n <ng-template #defaultDotTemplate>\n <span [innerHTML]=\"customDot | safe: 'html'\"></span>\n </ng-template>\n </div>\n <div *ngIf=\"time && timePosition === 'bottom'\">{{ time }}</div>\n <div class=\"{{ timeAxisLineClass }}\" [style.borderColor]=\"lineStyle?.color\">\n <div *ngIf=\"extraElement\" class=\"devui-time-axis-middle-zone\">\n <ng-template [ngTemplateOutlet]=\"extraTemplate || defaultTemplate\"> </ng-template>\n <ng-template #defaultTemplate>\n <div [innerHTML]=\"extraElement | safe: 'html'\"></div>\n </ng-template>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"mode !== 'top' && mode !== 'left'\"\n [class.devui-time-axis-item-data-horizontal-bottom]=\"direction === 'horizontal'\"\n [class.devui-time-axis-item-data-vertical-right]=\"direction === 'vertical' && timePosition !== 'bottom'\"\n [class.devui-time-axis-item-data-time-bottom]=\"timePosition === 'bottom'\"\n >\n <div *ngIf=\"time && (position === 'top' || position === 'left')\">\n <div [class.devui-time-axis-item-horizontal-align-center]=\"position === 'top' && horizontalAlign === 'center'\">{{ time }}</div>\n </div>\n <div\n *ngIf=\"position === 'bottom' || position === 'right'\"\n [class.devui-time-axis-item-horizontal-align-center]=\"position === 'bottom' && horizontalAlign === 'center'\"\n >\n <div *ngIf=\"model !== 'template'\" [innerHTML]=\"text | safe: 'html'\"></div>\n <div *ngIf=\"model === 'template'\">\n <ng-template [ngTemplateOutlet]=\"contentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this, data: data }\"></ng-template>\n </div>\n </div>\n </div>\n</div>\n", styles: [".devui-time-axis-item-horizontal{display:flex;flex-direction:column;height:100%}.devui-time-axis-item-horizontal .devui-time-axis-item-axis{display:flex;flex-direction:row;align-items:center}.devui-time-axis-item-horizontal .devui-time-axis-item-dot,.devui-time-axis-item-horizontal .devui-time-axis-item-dot>svg{width:18px;height:18px}.devui-time-axis-item-horizontal .devui-time-axis-item-dot>i{font-size:18px}.devui-time-axis-item-horizontal .devui-time-axis-item-custom-dot{width:18px;height:18px;text-align:center}.devui-time-axis-item-horizontal .devui-time-axis-item-line{position:relative;min-width:60px;width:calc(100% - 18px);border-bottom-width:2px;border-bottom-color:var(--devui-dividing-line, #f0f0f0)}.devui-time-axis-item-horizontal .devui-time-axis-item-data-horizontal-top{display:flex;align-items:flex-end;margin-right:12px;flex:1}.devui-time-axis-item-horizontal .devui-time-axis-item-data-horizontal-bottom{margin-right:12px;flex:1}.devui-time-axis-item-horizontal .devui-time-axis-item-axis-padding-horizontal{padding:12px 0}.devui-time-axis-item-horizontal .devui-time-axis-item-axis-padding-mode-top{padding-bottom:0}.devui-time-axis-item-horizontal .devui-time-axis-item-axis-padding-mode-bottom{padding-top:0}.devui-time-axis-item-horizontal .devui-time-axis-line-style-dashed{border-bottom-style:dashed}.devui-time-axis-item-horizontal .devui-time-axis-line-style-solid{border-bottom-style:solid}.devui-time-axis-item-horizontal .devui-time-axis-line-style-dotted{border-bottom-style:dotted}.devui-time-axis-item-horizontal .devui-time-axis-line-style-none{border-bottom-style:none}.devui-time-axis-item-horizontal .devui-time-axis-middle-zone{position:absolute;left:50%;transform:translate(-50%,-50%)}.devui-time-axis-item-vertical{display:flex;flex-direction:row;width:100%}.devui-time-axis-item-vertical .devui-time-axis-item-axis{display:flex;flex-direction:column;align-items:center}.devui-time-axis-item-vertical .devui-time-axis-item-dot,.devui-time-axis-item-vertical .devui-time-axis-item-dot>svg{width:18px;height:18px}.devui-time-axis-item-vertical .devui-time-axis-item-dot>i{font-size:18px}.devui-time-axis-item-vertical .devui-time-axis-item-custom-dot{width:18px;height:18px;text-align:center}.devui-time-axis-item-vertical .devui-time-axis-item-line{position:relative;height:calc(100% - 18px);border-left-width:2px;border-left-color:var(--devui-dividing-line, #f0f0f0)}.devui-time-axis-item-vertical .devui-time-axis-item-data-vertical-left{text-align:end;margin-bottom:24px;flex:1}.devui-time-axis-item-vertical .devui-time-axis-item-data-vertical-right{margin-bottom:24px;flex:1}.devui-time-axis-item-vertical .devui-time-axis-item-axis-padding-vertical{padding:0 12px}.devui-time-axis-item-vertical .devui-time-axis-item-axis-padding-mode-left{padding-right:0}.devui-time-axis-item-vertical .devui-time-axis-item-axis-padding-mode-right{padding-left:0}.devui-time-axis-item-vertical .devui-time-axis-line-style-dashed{border-left-style:dashed}.devui-time-axis-item-vertical .devui-time-axis-line-style-solid{border-left-style:solid}.devui-time-axis-item-vertical .devui-time-axis-line-style-dotted{border-left-style:dotted}.devui-time-axis-item-vertical .devui-time-axis-line-style-none{border-left-style:none}.devui-time-axis-item-vertical .devui-time-axis-middle-zone{position:absolute;top:50%;transform:translate(-50%,-50%)}.devui-time-axis-item-vertical-time-bottom{display:flex}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-axis{display:flex;flex-direction:column;align-items:center}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-dot,.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-dot>svg{width:18px;height:18px}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-dot>i{font-size:18px}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-custom-dot{width:18px;height:18px;text-align:center}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-line-time-bottom{position:relative;height:calc(100% - 36px);border-left-width:2px;border-left-color:var(--devui-dividing-line, #f0f0f0)}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-line-style-dashed{border-left-style:dashed}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-line-style-solid{border-left-style:solid}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-line-style-none{border-left-style:none}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-middle-zone{position:absolute;top:50%;transform:translate(-50%,-50%)}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-data-time-bottom{margin-left:12px;margin-bottom:40px}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-template{margin-left:12px;margin-bottom:24px}.devui-time-axis-item-type-primary{border:2px solid var(--devui-placeholder, #808080);border-radius:50%}.devui-time-axis-item-type-right i{color:var(--devui-success, #058358)}.devui-time-axis-item-type-danger path{fill:var(--devui-danger, #e02128)}.devui-time-axis-item-type-danger circle{fill:var(--devui-light-text, #ffffff)}.devui-time-axis-item-type-warning i{color:var(--devui-warning, #fcc800)}.devui-time-axis-item-type-running{line-height:16px;text-align:center;animation:devui-time-axis-running 1.5s linear infinite;border:2px solid var(--devui-success, #058358);border-radius:50%}@keyframes devui-time-axis-running{0%{transform:rotate(0);color:var(--devui-success, #058358);border-color:var(--devui-success, #058358)}50%{transform:rotate(180deg);color:var(--devui-success, #058358);border-color:var(--devui-success, #058358)}to{transform:rotate(360deg);color:var(--devui-success, #058358);border-color:var(--devui-success, #058358)}}.devui-time-axis-item-data-hidden{visibility:hidden}:host.devui-time-axis-item-horizontal-no-line{width:auto!important}:host.devui-time-axis-item-horizontal-no-line .devui-time-axis-item-data-horizontal-top{width:max-content}:host.devui-time-axis-item-horizontal-no-line .devui-time-axis-item-data-horizontal-bottom{width:max-content}:host.devui-time-axis-item-vertical-no-line .devui-time-axis-item-data-time-bottom{margin-bottom:0}:host.devui-time-axis-item-vertical-no-line .devui-time-axis-item-data-vertical-left{margin-bottom:0}:host.devui-time-axis-item-vertical-no-line .devui-time-axis-item-data-vertical-right{margin-bottom:0}.devui-time-axis-item-horizontal-align-center{position:relative;width:fit-content;transform:translate(-50%);left:8px}\n"] }]
}], ctorParameters: () => [], propDecorators: { model: [{
type: Input
}], direction: [{
type: Input
}], time: [{
type: Input
}], timePosition: [{
type: Input
}], position: [{
type: Input
}], lineStyle: [{
type: Input
}], customDot: [{
type: Input
}], dotColor: [{
type: Input
}], iconClass: [{
type: Input
}], extraElement: [{
type: Input
}], text: [{
type: Input
}], contentTemplate: [{
type: Input
}], data: [{
type: Input
}], horizontalAlign: [{
type: Input
}], mode: [{
type: Input
}], statusChanged: [{
type: Output
}], type: [{
type: Input
}], status: [{
type: Input
}], horizontalNoLine: [{
type: HostBinding,
args: ['class.devui-time-axis-item-horizontal-no-line']
}], verticalNoLine: [{
type: HostBinding,
args: ['class.devui-time-axis-item-vertical-no-line']
}] } });
class TimeAxisComponent {
constructor(elementRef) {
this.elementRef = elementRef;
this.direction = 'vertical';
this.mode = 'normal';
this.widthMode = 'fitContent';
}
ngAfterContentInit() {
if (this.mode === 'alternative') {
this.updateAlternativePosition();
}
this.vanishHorizontalLastLine();
}
ngAfterViewInit() {
if (this._direction === 'horizontal' && this.mode !== 'top' && this.mode !== 'bottom') {
const ulElement = this.elementRef.nativeElement.querySelector('.devui-time-axis-horizontal');
const topElement = this.elementRef.nativeElement.querySelector('.devui-time-axis-item-data-horizontal-top');
const bottomElement = this.elementRef.nativeElement.querySelector('.devui-time-axis-item-data-horizontal-bottom');
ulElement.style.height = `${Math.max(topElement.offsetHeight, bottomElement.offsetHeight) * 2 + 42}px`;
}
}
get _direction() {
if (this.data !== undefined) {
return this.data.direction || 'vertical';
}
else {
return this.direction;
}
}
get _widthMode() {
if (this.data !== undefined) {
return this.data.widthMode;
}
else {
return this.widthMode;
}
}
updateAlternativePosition() {
if (this.data === undefined) {
this.listOfItems.forEach((item, index) => {
if (this._direction === 'vertical') {
item.position = index % 2 === 0 ? 'left' : 'right';
}
else {
item.position = index % 2 === 0 ? 'bottom' : 'top';
}
});
}
else {
for (let i = 0; i < this.data.list.length; i++) {
if (this._direction === 'vertical') {
this.data.list[i].position = i % 2 === 0 ? 'left' : 'right';
}
else {
this.data.list[i].position = i % 2 === 0 ? 'bottom' : 'top';
}
}
}
}
vanishHorizontalLastLine() {
if (this._direction === 'horizontal') {
if (this.data === undefined) {
if (this.listOfItems.last.lineStyle === undefined) {
this.listOfItems.last.lineStyle = { style: 'none' };
}
}
else {
if (this.data.list[this.data.list.length - 1].lineStyle === undefined) {
this.data.list[this.data.list.length - 1].lineStyle = { style: 'none' };
}
}
}
}
changeStatusLine(event) {
if (this.data !== undefined && this.data.direction === 'horizontal') {
setTimeout(() => {
this.data.list.forEach((item, index, array) => {
if (item.status === 'runned' && index > 0) {
array[index - 1].lineStyle = { style: 'solid', color: 'var(--devui-success)' };
}
else if (item.status === 'running' && index > 0) {
array[index - 1].lineStyle = { style: 'dotted', color: 'var(--devui-success)' };
}
else if (item.status === '' && index > 0) {
array[index - 1].lineStyle = { style: 'solid' };
}
});
});
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeAxisComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TimeAxisComponent, selector: "d-time-axis", inputs: { data: "data", contentTemplate: "contentTemplate", direction: "direction", mode: "mode", widthMode: "widthMode" }, queries: [{ propertyName: "listOfItems", predicate: TimeAxisItemComponent }], exportAs: ["time-axis"], ngImport: i0, template: "<div\n [class.devui-time-axis-horizontal]=\"_direction === 'horizontal'\"\n [class.devui-time-axis-vertical]=\"_direction === 'vertical'\"\n [class.devui-time-axis-horizontal-fullwidth]=\"_direction === 'horizontal' && _widthMode === 'fitWidth'\"\n>\n <ng-container *ngIf=\"data !== undefined\">\n <d-time-axis-item\n *ngFor=\"let list of data.list\"\n [model]=\"data.model\"\n [direction]=\"_direction\"\n [time]=\"list.time\"\n [timePosition]=\"data.position\"\n [position]=\"list.position\"\n [lineStyle]=\"list.lineStyle\"\n [customDot]=\"list.customDot\"\n [dotColor]=\"list.dotColor\"\n [iconClass]=\"list.iconClass\"\n [type]=\"list.type\"\n [status]=\"list.status\"\n [extraElement]=\"list.extraElement\"\n [text]=\"list.text\"\n [contentTemplate]=\"contentTemplate\"\n [data]=\"list.data\"\n [mode]=\"mode\"\n [horizontalAlign]=\"data.horizontalAlign || 'center'\"\n (statusChanged)=\"changeStatusLine($event)\"\n >\n </d-time-axis-item>\n </ng-container>\n <ng-content select=\"d-time-axis-item\"></ng-content>\n</div>\n", styles: [".devui-time-axis-vertical{display:flex;flex-direction:column;align-items:center;position:relative}.devui-time-axis-vertical ::ng-deep d-time-axis-item{width:100%}.devui-time-axis-horizontal{display:flex;flex-direction:row;align-items:center!important;position:relative}.devui-time-axis-horizontal ::ng-deep d-time-axis-item{height:100%}.devui-time-axis-horizontal-fullwidth ::ng-deep d-time-axis-item{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TimeAxisItemComponent, selector: "d-time-axis-item", inputs: ["model", "direction", "time", "timePosition", "position", "lineStyle", "customDot", "dotColor", "iconClass", "extraElement", "text", "contentTemplate", "data", "horizontalAlign", "mode", "type", "status"], outputs: ["statusChanged"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeAxisComponent, decorators: [{
type: Component,
args: [{ selector: 'd-time-axis', exportAs: 'time-axis', preserveWhitespaces: false, template: "<div\n [class.devui-time-axis-horizontal]=\"_direction === 'horizontal'\"\n [class.devui-time-axis-vertical]=\"_direction === 'vertical'\"\n [class.devui-time-axis-horizontal-fullwidth]=\"_direction === 'horizontal' && _widthMode === 'fitWidth'\"\n>\n <ng-container *ngIf=\"data !== undefined\">\n <d-time-axis-item\n *ngFor=\"let list of data.list\"\n [model]=\"data.model\"\n [direction]=\"_direction\"\n [time]=\"list.time\"\n [timePosition]=\"data.position\"\n [position]=\"list.position\"\n [lineStyle]=\"list.lineStyle\"\n [customDot]=\"list.customDot\"\n [dotColor]=\"list.dotColor\"\n [iconClass]=\"list.iconClass\"\n [type]=\"list.type\"\n [status]=\"list.status\"\n [extraElement]=\"list.extraElement\"\n [text]=\"list.text\"\n [contentTemplate]=\"contentTemplate\"\n [data]=\"list.data\"\n [mode]=\"mode\"\n [horizontalAlign]=\"data.horizontalAlign || 'center'\"\n (statusChanged)=\"changeStatusLine($event)\"\n >\n </d-time-axis-item>\n </ng-container>\n <ng-content select=\"d-time-axis-item\"></ng-content>\n</div>\n", styles: [".devui-time-axis-vertical{display:flex;flex-direction:column;align-items:center;position:relative}.devui-time-axis-vertical ::ng-deep d-time-axis-item{width:100%}.devui-time-axis-horizontal{display:flex;flex-direction:row;align-items:center!important;position:relative}.devui-time-axis-horizontal ::ng-deep d-time-axis-item{height:100%}.devui-time-axis-horizontal-fullwidth ::ng-deep d-time-axis-item{width:100%}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { listOfItems: [{
type: ContentChildren,
args: [TimeAxisItemComponent]
}], data: [{
type: Input
}], contentTemplate: [{
type: Input
}], direction: [{
type: Input
}], mode: [{
type: Input
}], widthMode: [{
type: Input
}] } });
class TimeAxisModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeAxisModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TimeAxisModule, declarations: [TimeAxisComponent,
TimeAxisItemComponent], imports: [CommonModule,
FormsModule,
SafePipeModule], exports: [TimeAxisComponent,
TimeAxisItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeAxisModule, imports: [CommonModule,
FormsModule,
SafePipeModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeAxisModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
FormsModule,
SafePipeModule
],
exports: [
TimeAxisComponent,
TimeAxisItemComponent
],
declarations: [
TimeAxisComponent,
TimeAxisItemComponent
],
providers: []
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TimeAxisComponent, TimeAxisItemComponent, TimeAxisModule };
//# sourceMappingURL=ng-devui-time-axis.mjs.map