import { EventEmitter, ChangeDetectionStrategy, Component, ContentChild, Directive, Input, Output, TemplateRef, } from '@angular/core';
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";
export class RelationCardPreviewDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RelationCardPreviewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RelationCardPreviewDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[vdrRelationCardPreview]',
                }]
        }] });
export class RelationCardDetailDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RelationCardDetailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RelationCardDetailDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[vdrRelationCardDetail]',
                }]
        }] });
export class RelationCardComponent {
    constructor() {
        this.removable = true;
        // eslint-disable-next-line @angular-eslint/no-output-native
        this.select = new EventEmitter();
        this.remove = new EventEmitter();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RelationCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: RelationCardComponent, selector: "vdr-relation-card", inputs: { entity: "entity", placeholderIcon: "placeholderIcon", selectLabel: "selectLabel", readonly: "readonly", removable: "removable" }, outputs: { select: "select", remove: "remove" }, queries: [{ propertyName: "previewTemplate", first: true, predicate: RelationCardPreviewDirective, descendants: true, read: TemplateRef }, { propertyName: "detailTemplate", first: true, predicate: RelationCardDetailDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"flex\">\n    <ng-container *ngIf=\"entity; else placeholder\">\n        <div class=\"preview\">\n            <ng-container *ngTemplateOutlet=\"previewTemplate; context: { entity: entity }\"></ng-container>\n        </div>\n        <div class=\"detail\">\n            <div class=\"pl-1\">\n                <ng-container *ngTemplateOutlet=\"detailTemplate; context: { entity: entity }\"></ng-container>\n            </div>\n            <button *ngIf=\"!readonly\" class=\"button-small m-1\" (click)=\"select.emit()\">\n                <clr-icon shape=\"link\"></clr-icon> {{ 'common.change-selection' | translate }}\n            </button>\n            <button *ngIf=\"!readonly && removable\" class=\"button-small m-1\" (click)=\"remove.emit()\">\n                <clr-icon shape=\"times\"></clr-icon> {{ 'common.remove' | translate }}\n            </button>\n        </div>\n    </ng-container>\n    <ng-template #placeholder>\n        <div class=\"preview\">\n            <div class=\"placeholder\" (click)=\"!readonly && select.emit()\">\n                <clr-icon [attr.shape]=\"placeholderIcon\" size=\"50\"></clr-icon>\n            </div>\n        </div>\n        <div class=\"detail\">\n            <div class=\"pl3 not-set\">{{ 'common.not-set' | translate }}</div>\n            <button *ngIf=\"!readonly\" class=\"button-small m-1\" (click)=\"select.emit()\">\n                <clr-icon shape=\"link\"></clr-icon> {{ selectLabel }}\n            </button>\n        </div>\n    </ng-template>\n</div>\n", styles: [":host{display:block;min-width:300px}.placeholder,.not-set{color:var(--color-grey-300)}.detail{flex:1;overflow:hidden}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RelationCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-relation-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex\">\n    <ng-container *ngIf=\"entity; else placeholder\">\n        <div class=\"preview\">\n            <ng-container *ngTemplateOutlet=\"previewTemplate; context: { entity: entity }\"></ng-container>\n        </div>\n        <div class=\"detail\">\n            <div class=\"pl-1\">\n                <ng-container *ngTemplateOutlet=\"detailTemplate; context: { entity: entity }\"></ng-container>\n            </div>\n            <button *ngIf=\"!readonly\" class=\"button-small m-1\" (click)=\"select.emit()\">\n                <clr-icon shape=\"link\"></clr-icon> {{ 'common.change-selection' | translate }}\n            </button>\n            <button *ngIf=\"!readonly && removable\" class=\"button-small m-1\" (click)=\"remove.emit()\">\n                <clr-icon shape=\"times\"></clr-icon> {{ 'common.remove' | translate }}\n            </button>\n        </div>\n    </ng-container>\n    <ng-template #placeholder>\n        <div class=\"preview\">\n            <div class=\"placeholder\" (click)=\"!readonly && select.emit()\">\n                <clr-icon [attr.shape]=\"placeholderIcon\" size=\"50\"></clr-icon>\n            </div>\n        </div>\n        <div class=\"detail\">\n            <div class=\"pl3 not-set\">{{ 'common.not-set' | translate }}</div>\n            <button *ngIf=\"!readonly\" class=\"button-small m-1\" (click)=\"select.emit()\">\n                <clr-icon shape=\"link\"></clr-icon> {{ selectLabel }}\n            </button>\n        </div>\n    </ng-template>\n</div>\n", styles: [":host{display:block;min-width:300px}.placeholder,.not-set{color:var(--color-grey-300)}.detail{flex:1;overflow:hidden}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
        }], propDecorators: { entity: [{
                type: Input
            }], placeholderIcon: [{
                type: Input
            }], selectLabel: [{
                type: Input
            }], readonly: [{
                type: Input
            }], removable: [{
                type: Input
            }], select: [{
                type: Output
            }], remove: [{
                type: Output
            }], previewTemplate: [{
                type: ContentChild,
                args: [RelationCardPreviewDirective, { read: TemplateRef }]
            }], detailTemplate: [{
                type: ContentChild,
                args: [RelationCardDetailDirective, { read: TemplateRef }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 