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 {
    constructor() {
        this.horizontalAlign = 'center';
        this.statusChanged = new EventEmitter();
    }
    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() {
        var _a;
        return this.direction === 'horizontal' && ((_a = this === null || this === void 0 ? void 0 : this.lineStyle) === null || _a === void 0 ? void 0 : _a.style) === 'none';
    }
    get verticalNoLine() {
        var _a;
        return this.direction === 'vertical' && ((_a = this === null || this === void 0 ? void 0 : this.lineStyle) === null || _a === void 0 ? void 0 : _a.style) === 'none';
    }
    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() {
        var _a;
        let styleClass = `devui-time-axis-line-style-${((_a = this.lineStyle) === null || _a === void 0 ? void 0 : _a.style) || 'solid'}`;
        styleClass += this.timePosition !== 'bottom' ? ' devui-time-axis-item-line' : ' devui-time-axis-item-line-time-bottom';
        return styleClass;
    }
}
TimeAxisItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TimeAxisItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
TimeAxisItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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", 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'\"\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  >\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    [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:#f2f2f3;border-bottom-color:var(--devui-dividing-line, #f2f2f3)}.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-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:#f2f2f3;border-left-color:var(--devui-dividing-line, #f2f2f3)}.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-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:#f2f2f3;border-left-color:var(--devui-dividing-line, #f2f2f3)}.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 #babbc0;border:2px solid var(--devui-placeholder, #babbc0);border-radius:50%}.devui-time-axis-item-type-right i{color:#50d4ab;color:var(--devui-success, #50d4ab)}.devui-time-axis-item-type-danger path{fill:#f66f6a;fill:var(--devui-danger, #f66f6a)}.devui-time-axis-item-type-danger circle{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-time-axis-item-type-warning i{color:#fac20a;color:var(--devui-warning, #fac20a)}.devui-time-axis-item-type-running{line-height:16px;text-align:center;-webkit-animation:devui-time-axis-running 1.5s linear infinite;animation:devui-time-axis-running 1.5s linear infinite;border:2px solid #50d4ab;border:2px solid var(--devui-success, #50d4ab);border-radius:50%}@-webkit-keyframes devui-time-axis-running{0%{transform:rotate(0);color:#50d4ab;color:var(--devui-success, #50d4ab);border-color:#50d4ab;border-color:var(--devui-success, #50d4ab)}50%{transform:rotate(180deg);color:#50d4ab;color:var(--devui-success, #50d4ab);border-color:#50d4ab;border-color:var(--devui-success, #50d4ab)}to{transform:rotate(360deg);color:#50d4ab;color:var(--devui-success, #50d4ab);border-color:#50d4ab;border-color:var(--devui-success, #50d4ab)}}@keyframes devui-time-axis-running{0%{transform:rotate(0);color:#50d4ab;color:var(--devui-success, #50d4ab);border-color:#50d4ab;border-color:var(--devui-success, #50d4ab)}50%{transform:rotate(180deg);color:#50d4ab;color:var(--devui-success, #50d4ab);border-color:#50d4ab;border-color:var(--devui-success, #50d4ab)}to{transform:rotate(360deg);color:#50d4ab;color:var(--devui-success, #50d4ab);border-color:#50d4ab;border-color:var(--devui-success, #50d4ab)}}.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:-webkit-max-content;width:-moz-max-content;width:max-content}:host.devui-time-axis-item-horizontal-no-line .devui-time-axis-item-data-horizontal-bottom{width:-webkit-max-content;width:-moz-max-content;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:-webkit-fit-content;width:-moz-fit-content;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: "14.2.0", 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'\"\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  >\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    [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:#f2f2f3;border-bottom-color:var(--devui-dividing-line, #f2f2f3)}.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-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:#f2f2f3;border-left-color:var(--devui-dividing-line, #f2f2f3)}.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-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:#f2f2f3;border-left-color:var(--devui-dividing-line, #f2f2f3)}.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 #babbc0;border:2px solid var(--devui-placeholder, #babbc0);border-radius:50%}.devui-time-axis-item-type-right i{color:#50d4ab;color:var(--devui-success, #50d4ab)}.devui-time-axis-item-type-danger path{fill:#f66f6a;fill:var(--devui-danger, #f66f6a)}.devui-time-axis-item-type-danger circle{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-time-axis-item-type-warning i{color:#fac20a;color:var(--devui-warning, #fac20a)}.devui-time-axis-item-type-running{line-height:16px;text-align:center;-webkit-animation:devui-time-axis-running 1.5s linear infinite;animation:devui-time-axis-running 1.5s linear infinite;border:2px solid #50d4ab;border:2px solid var(--devui-success, #50d4ab);border-radius:50%}@-webkit-keyframes devui-time-axis-running{0%{transform:rotate(0);color:#50d4ab;color:var(--devui-success, #50d4ab);border-color:#50d4ab;border-color:var(--devui-success, #50d4ab)}50%{transform:rotate(180deg);color:#50d4ab;color:var(--devui-success, #50d4ab);border-color:#50d4ab;border-color:var(--devui-success, #50d4ab)}to{transform:rotate(360deg);color:#50d4ab;color:var(--devui-success, #50d4ab);border-color:#50d4ab;border-color:var(--devui-success, #50d4ab)}}@keyframes devui-time-axis-running{0%{transform:rotate(0);color:#50d4ab;color:var(--devui-success, #50d4ab);border-color:#50d4ab;border-color:var(--devui-success, #50d4ab)}50%{transform:rotate(180deg);color:#50d4ab;color:var(--devui-success, #50d4ab);border-color:#50d4ab;border-color:var(--devui-success, #50d4ab)}to{transform:rotate(360deg);color:#50d4ab;color:var(--devui-success, #50d4ab);border-color:#50d4ab;border-color:var(--devui-success, #50d4ab)}}.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:-webkit-max-content;width:-moz-max-content;width:max-content}:host.devui-time-axis-item-horizontal-no-line .devui-time-axis-item-data-horizontal-bottom{width:-webkit-max-content;width:-moz-max-content;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:-webkit-fit-content;width:-moz-fit-content;width:fit-content;transform:translate(-50%);left:8px}\n"] }]
        }], ctorParameters: function () { return []; }, 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
            }], 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') {
            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' };
                    }
                });
            });
        }
    }
}
TimeAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TimeAxisComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
TimeAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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      [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", "type", "status"], outputs: ["statusChanged"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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      [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: function () { return [{ 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 {
}
TimeAxisModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TimeAxisModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TimeAxisModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: TimeAxisModule, declarations: [TimeAxisComponent,
        TimeAxisItemComponent], imports: [CommonModule,
        FormsModule,
        SafePipeModule], exports: [TimeAxisComponent,
        TimeAxisItemComponent] });
TimeAxisModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TimeAxisModule, imports: [CommonModule,
        FormsModule,
        SafePipeModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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
