import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output, } from '@angular/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import * as i0 from "@angular/core";
import * as i1 from "@clr/angular";
import * as i2 from "@angular/common";
import * as i3 from "@ngx-translate/core";
import * as i4 from "../../pipes/locale-date.pipe";
export class TimelineEntryComponent {
    constructor() {
        this.collapsed = false;
        this.expandClick = new EventEmitter();
    }
    get timelineTitle() {
        return this.collapsed ? _('common.expand-entries') : _('common.collapse-entries');
    }
    getIconShape() {
        if (this.iconShape) {
            return typeof this.iconShape === 'string' ? this.iconShape : this.iconShape[0];
        }
    }
    getIconClass() {
        if (this.iconShape) {
            return typeof this.iconShape === 'string' ? '' : this.iconShape[1];
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: TimelineEntryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: { displayType: "displayType", createdAt: "createdAt", name: "name", featured: "featured", iconShape: "iconShape", isLast: "isLast", collapsed: "collapsed" }, outputs: { expandClick: "expandClick" }, host: { properties: { "class.collapsed": "this.collapsed" } }, ngImport: i0, template: "<div\n    [ngClass]=\"displayType\"\n    [class.has-custom-icon]=\"!!iconShape\"\n    class=\"entry\"\n    [class.last]=\"isLast === true\"\n    [class.collapsed]=\"collapsed\"\n>\n    <div class=\"timeline\" (click)=\"expandClick.emit()\" [title]=\"timelineTitle | translate\">\n        <div class=\"custom-icon\">\n            <clr-icon\n                *ngIf=\"iconShape && !collapsed\"\n                [attr.shape]=\"getIconShape()\"\n                [ngClass]=\"getIconClass()\"\n                size=\"24\"\n            ></clr-icon>\n        </div>\n    </div>\n    <div class=\"entry-body\">\n        <div class=\"detail\">\n            <div class=\"time\">\n                {{ createdAt | localeDate: 'short' }}\n            </div>\n            <div class=\"name\">\n                {{ name || '' }}\n            </div>\n        </div>\n        <div [class.featured-entry]=\"featured\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [":host{display:block}:host:first-of-type .timeline:before{border-left-color:var(--color-timeline-thread)}:host:first-of-type .entry-body{max-height:initial}.entry{display:flex}.timeline{border-inline-start:2px solid var(--color-timeline-thread);padding-bottom:8px;position:relative}.timeline:before{content:\"\";position:absolute;width:2px;height:32px;left:-2px;border-inline-start:2px solid var(--color-timeline-thread)}.timeline:after{content:\"\";display:block;border-radius:50%;width:8px;height:8px;background-color:var(--color-component-bg-200);border:1px solid var(--color-component-border-300);position:absolute;left:-5px;top:32px;transition:top .2s;cursor:pointer}.timeline .custom-icon{position:absolute;width:32px;height:32px;left:-17px;top:32px;align-items:center;justify-content:center;border-radius:50%;color:var(--color-primary-700);background-color:var(--color-component-bg-100);border:1px solid var(--color-component-border-200);display:none}.entry.has-custom-icon .timeline:after{display:none}.entry.has-custom-icon .custom-icon{display:flex}.entry.last .timeline{border-left-color:transparent}.entry-body{flex:1;padding-top:24px;padding-inline-start:12px;line-height:16px;margin-inline-start:12px;color:var(--color-text-200);overflow:visible;max-height:100px;transition:max-height .2s,padding-top .2s,opacity .2s .2s}.featured-entry ::ng-deep .title{color:var(--color-text-100);font-size:16px;line-height:26px}.featured-entry ::ng-deep .note-text{color:var(--color-text-100);white-space:pre-wrap}.detail{display:flex;color:var(--color-text-300);font-size:12px}.detail .name{margin-inline-start:12px}.muted .timeline,.muted .timeline .custom-icon{color:var(--color-text-300)}.success .timeline,.success .timeline .custom-icon{color:var(--color-success-700)}.success .timeline:after{background-color:var(--color-success-200);border:1px solid var(--color-success-400)}.error .timeline,.error .timeline .custom-icon{color:var(--color-error-700)}.error .timeline:after{background-color:var(--color-error-200);border:1px solid var(--color-error-400)}.warning .timeline,.warning .timeline .custom-icon{color:var(--color-warning-700)}.warning .timeline:after{background-color:var(--color-warning-200);border:1px solid var(--color-warning-400)}.collapsed .entry-body{max-height:0;overflow:hidden;opacity:0;padding-top:0}.collapsed .timeline{border-left-color:transparent}.collapsed .timeline:after{top:0}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: TimelineEntryComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-timeline-entry', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [ngClass]=\"displayType\"\n    [class.has-custom-icon]=\"!!iconShape\"\n    class=\"entry\"\n    [class.last]=\"isLast === true\"\n    [class.collapsed]=\"collapsed\"\n>\n    <div class=\"timeline\" (click)=\"expandClick.emit()\" [title]=\"timelineTitle | translate\">\n        <div class=\"custom-icon\">\n            <clr-icon\n                *ngIf=\"iconShape && !collapsed\"\n                [attr.shape]=\"getIconShape()\"\n                [ngClass]=\"getIconClass()\"\n                size=\"24\"\n            ></clr-icon>\n        </div>\n    </div>\n    <div class=\"entry-body\">\n        <div class=\"detail\">\n            <div class=\"time\">\n                {{ createdAt | localeDate: 'short' }}\n            </div>\n            <div class=\"name\">\n                {{ name || '' }}\n            </div>\n        </div>\n        <div [class.featured-entry]=\"featured\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [":host{display:block}:host:first-of-type .timeline:before{border-left-color:var(--color-timeline-thread)}:host:first-of-type .entry-body{max-height:initial}.entry{display:flex}.timeline{border-inline-start:2px solid var(--color-timeline-thread);padding-bottom:8px;position:relative}.timeline:before{content:\"\";position:absolute;width:2px;height:32px;left:-2px;border-inline-start:2px solid var(--color-timeline-thread)}.timeline:after{content:\"\";display:block;border-radius:50%;width:8px;height:8px;background-color:var(--color-component-bg-200);border:1px solid var(--color-component-border-300);position:absolute;left:-5px;top:32px;transition:top .2s;cursor:pointer}.timeline .custom-icon{position:absolute;width:32px;height:32px;left:-17px;top:32px;align-items:center;justify-content:center;border-radius:50%;color:var(--color-primary-700);background-color:var(--color-component-bg-100);border:1px solid var(--color-component-border-200);display:none}.entry.has-custom-icon .timeline:after{display:none}.entry.has-custom-icon .custom-icon{display:flex}.entry.last .timeline{border-left-color:transparent}.entry-body{flex:1;padding-top:24px;padding-inline-start:12px;line-height:16px;margin-inline-start:12px;color:var(--color-text-200);overflow:visible;max-height:100px;transition:max-height .2s,padding-top .2s,opacity .2s .2s}.featured-entry ::ng-deep .title{color:var(--color-text-100);font-size:16px;line-height:26px}.featured-entry ::ng-deep .note-text{color:var(--color-text-100);white-space:pre-wrap}.detail{display:flex;color:var(--color-text-300);font-size:12px}.detail .name{margin-inline-start:12px}.muted .timeline,.muted .timeline .custom-icon{color:var(--color-text-300)}.success .timeline,.success .timeline .custom-icon{color:var(--color-success-700)}.success .timeline:after{background-color:var(--color-success-200);border:1px solid var(--color-success-400)}.error .timeline,.error .timeline .custom-icon{color:var(--color-error-700)}.error .timeline:after{background-color:var(--color-error-200);border:1px solid var(--color-error-400)}.warning .timeline,.warning .timeline .custom-icon{color:var(--color-warning-700)}.warning .timeline:after{background-color:var(--color-warning-200);border:1px solid var(--color-warning-400)}.collapsed .entry-body{max-height:0;overflow:hidden;opacity:0;padding-top:0}.collapsed .timeline{border-left-color:transparent}.collapsed .timeline:after{top:0}\n"] }]
        }], propDecorators: { displayType: [{
                type: Input
            }], createdAt: [{
                type: Input
            }], name: [{
                type: Input
            }], featured: [{
                type: Input
            }], iconShape: [{
                type: Input
            }], isLast: [{
                type: Input
            }], collapsed: [{
                type: HostBinding,
                args: ['class.collapsed']
            }, {
                type: Input
            }], expandClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 