import { Component, Input, TemplateRef } from '@angular/core';
import { QuadrantDiagramService } from '../quadrant-diagram.service';
import { LARGE_LABEL_SIZE_CENTER_POINT, NORMAL_LABEL_SIZE_CENTER_POINT, SMALL_LABEL_SIZE_CENTER_POINT } from '../quadrant.config';
import * as i0 from "@angular/core";
import * as i1 from "../quadrant-diagram.service";
import * as i2 from "@angular/common";
import * as i3 from "ng-devui/dragdrop";
import * as i4 from "ng-devui/progress";
import * as i5 from "ng-devui/popover";
export class QuadrantLabelComponent {
    constructor(quadrantDiagramService) {
        this.quadrantDiagramService = quadrantDiagramService;
    }
    ngOnChanges(changes) {
        if (changes && changes['currentLabelSize']) {
            switch (this.currentLabelSize) {
                case 'small':
                    this.currentCenterPoint = SMALL_LABEL_SIZE_CENTER_POINT;
                    this.currentLabelTemplate = this.smallLabelTemplate;
                    break;
                case 'normal':
                    this.currentCenterPoint = NORMAL_LABEL_SIZE_CENTER_POINT;
                    this.currentLabelTemplate = this.normalLabelTemplate;
                    break;
                default:
                    this.currentCenterPoint = LARGE_LABEL_SIZE_CENTER_POINT;
                    this.currentLabelTemplate = this.largeLabelTemplate;
            }
        }
    }
    /**
    * @param offsetY the half height of label
    */
    getLabelTopValue(yAxisValue, offsetY) {
        return this.view.height - yAxisValue * this.axisConfigs.yTickSpacing - this.axisConfigs.originPosition.bottom - offsetY;
    }
    /**
    * @param offsetX the half width of label
    */
    getLabelLeftValue(xAxisValue, offsetX) {
        return xAxisValue * this.axisConfigs.xTickSpacing + this.axisConfigs.originPosition.left - offsetX;
    }
    showAxisLine(x, y) {
        const top = this.getLabelTopValue(y, 0);
        const left = this.getLabelLeftValue(x, 0);
        this.quadrantDiagramService.showAxisLine(left, top, this.diagramId, this.view, this.axisConfigs);
    }
    hideAxisLine() {
        this.quadrantDiagramService.hideAxisLine(this.diagramId);
    }
    handleDropOutRegion(event) {
        this.hideAxisLine();
        this.quadrantDiagramService.setListPointerEvents(this.diagramId, '');
    }
}
QuadrantLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: QuadrantLabelComponent, deps: [{ token: i1.QuadrantDiagramService }], target: i0.ɵɵFactoryTarget.Component });
QuadrantLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: QuadrantLabelComponent, selector: "d-quadrant-label", inputs: { currentLabelSize: "currentLabelSize", labelData: "labelData", axisConfigs: "axisConfigs", view: "view", normalLabelTemplate: "normalLabelTemplate", largeLabelTemplate: "largeLabelTemplate", smallLabelTemplate: "smallLabelTemplate", dropScope: "dropScope", diagramId: "diagramId" }, usesOnChanges: true, ngImport: i0, template: "<ng-template\n  [ngTemplateOutlet]=\"currentLabelTemplate ? currentLabelTemplate : defaultLabel\"\n  [ngTemplateOutletContext]=\"{\n    $implicit: this,\n    labelData: labelData\n  }\"\n>\n</ng-template>\n<ng-template #defaultLabel let-labelData=\"labelData\">\n  <div\n    dDraggable\n    [dragScope]=\"dropScope\"\n    [dragData]=\"{ item: item, parent: labelData }\"\n    (dragEndEvent)=\"handleDropOutRegion($event)\"\n    *ngFor=\"let item of labelData\"\n    class=\"devui-list-style devui-{{ currentLabelSize }}-size\"\n    [style.position]=\"'absolute'\"\n    [style.top.px]=\"getLabelTopValue(item?.y, currentCenterPoint?.y)\"\n    [style.left.px]=\"getLabelLeftValue(item?.x, currentCenterPoint?.x)\"\n    dPopover\n    [content]=\"item?.content\"\n    [position]=\"'bottom'\"\n    [controlled]=\"true\"\n    [trigger]=\"'hover'\"\n    (mouseover)=\"showAxisLine(item?.x, item?.y)\"\n    (mouseout)=\"hideAxisLine()\"\n  >\n    <div *ngIf=\"currentLabelSize !== 'small'\" class=\"devui-label-style\">{{ item?.title }}</div>\n    <ng-container *ngIf=\"currentLabelSize === 'large'\">\n      <d-progress style=\"margin-top: -4px\" [percentage]=\"item?.progress\" [percentageText]=\"''\" [strokeColor]=\"'#3ECCA6'\" [height]=\"'4px'\">\n      </d-progress>\n    </ng-container>\n  </div>\n  <div\n    class=\"devui-horizontal-line\"\n    [style.width.px]=\"view.width - axisConfigs.originPosition.left - axisConfigs.axisMargin\"\n    [style.left.px]=\"axisConfigs.originPosition.left\"\n    [style.display]=\"'none'\"\n  >\n    <span class=\"devui-axis-value\" id=\"devui-label-y-axis-value\"></span>\n  </div>\n  <div\n    class=\"devui-vertical-line\"\n    [style.height.px]=\"view.height - axisConfigs.originPosition.bottom - axisConfigs.axisMargin\"\n    [style.top.px]=\"axisConfigs.axisMargin\"\n    [style.display]=\"'none'\"\n  >\n    <span class=\"devui-axis-value\" id=\"devui-label-x-axis-value\"></span>\n  </div>\n</ng-template>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-list-style{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);color:#252b3a;color:var(--devui-text, #252b3a);background:#ffffff;background:var(--devui-base-bg, #ffffff);box-shadow:0 1px 4px #252b3a33;box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-shadow, rgba(37, 43, 58, .2));border-radius:2px;border-radius:var(--devui-border-radius, 2px);z-index:10;cursor:-webkit-grabbing;cursor:grabbing}.devui-list-style:hover{color:#5e7ce0;color:var(--devui-brand, #5e7ce0);box-shadow:0 8px 16px #252b3a33;box-shadow:var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}.devui-large-size{height:36px;line-height:36px;width:120px}.devui-normal-size{height:28px;line-height:28px;width:90px}.devui-small-size{background:#50d4ab;background:var(--devui-success, #50d4ab);border-radius:100%;height:12px;width:12px}.devui-label-style{padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}:host ::ng-deep .devui-progress{background:#f2f2f3!important;background:var(--devui-dividing-line, #f2f2f3)!important}.devui-horizontal-line{position:absolute;height:1px;border-bottom:1px dashed #f2f2f3;border-bottom:1px dashed var(--devui-dividing-line, #f2f2f3)}.devui-vertical-line{position:absolute;width:1px;border-left:1px dashed #f2f2f3;border-left:1px dashed var(--devui-dividing-line, #f2f2f3)}.devui-axis-value{color:#71757f;color:var(--devui-aide-text, #71757f);line-height:20px;padding:4px;font-size:12px;font-size:var(--devui-font-size, 12px)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.DraggableDirective, selector: "[dDraggable]", inputs: ["dragData", "dragHandle", "dragEffect", "dragScope", "dragHandleClass", "dragOverClass", "disabled", "enableDragFollow", "dragFollowOptions", "originPlaceholder", "dragIdentity", "dragItemParentName", "dragItemChildrenName"], outputs: ["dragStartEvent", "dragEvent", "dragEndEvent", "dropEndEvent"] }, { kind: "component", type: i4.ProgressComponent, selector: "d-progress", inputs: ["percentage", "percentageText", "barbgcolor", "strokeColor", "height", "strokeWidth", "isCircle", "type", "showContent"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[dPopover]", inputs: ["content", "controlled", "position", "showAnimation", "showAnimate", "scrollElement", "appendToBody", "zIndex", "popType", "popMaxWidth", "trigger", "hoverToContent", "hoverDelayTime", "popoverStyle", "mouseEnterDelay", "mouseLeaveDelay", "visible"], exportAs: ["dPopover"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: QuadrantLabelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-quadrant-label', template: "<ng-template\n  [ngTemplateOutlet]=\"currentLabelTemplate ? currentLabelTemplate : defaultLabel\"\n  [ngTemplateOutletContext]=\"{\n    $implicit: this,\n    labelData: labelData\n  }\"\n>\n</ng-template>\n<ng-template #defaultLabel let-labelData=\"labelData\">\n  <div\n    dDraggable\n    [dragScope]=\"dropScope\"\n    [dragData]=\"{ item: item, parent: labelData }\"\n    (dragEndEvent)=\"handleDropOutRegion($event)\"\n    *ngFor=\"let item of labelData\"\n    class=\"devui-list-style devui-{{ currentLabelSize }}-size\"\n    [style.position]=\"'absolute'\"\n    [style.top.px]=\"getLabelTopValue(item?.y, currentCenterPoint?.y)\"\n    [style.left.px]=\"getLabelLeftValue(item?.x, currentCenterPoint?.x)\"\n    dPopover\n    [content]=\"item?.content\"\n    [position]=\"'bottom'\"\n    [controlled]=\"true\"\n    [trigger]=\"'hover'\"\n    (mouseover)=\"showAxisLine(item?.x, item?.y)\"\n    (mouseout)=\"hideAxisLine()\"\n  >\n    <div *ngIf=\"currentLabelSize !== 'small'\" class=\"devui-label-style\">{{ item?.title }}</div>\n    <ng-container *ngIf=\"currentLabelSize === 'large'\">\n      <d-progress style=\"margin-top: -4px\" [percentage]=\"item?.progress\" [percentageText]=\"''\" [strokeColor]=\"'#3ECCA6'\" [height]=\"'4px'\">\n      </d-progress>\n    </ng-container>\n  </div>\n  <div\n    class=\"devui-horizontal-line\"\n    [style.width.px]=\"view.width - axisConfigs.originPosition.left - axisConfigs.axisMargin\"\n    [style.left.px]=\"axisConfigs.originPosition.left\"\n    [style.display]=\"'none'\"\n  >\n    <span class=\"devui-axis-value\" id=\"devui-label-y-axis-value\"></span>\n  </div>\n  <div\n    class=\"devui-vertical-line\"\n    [style.height.px]=\"view.height - axisConfigs.originPosition.bottom - axisConfigs.axisMargin\"\n    [style.top.px]=\"axisConfigs.axisMargin\"\n    [style.display]=\"'none'\"\n  >\n    <span class=\"devui-axis-value\" id=\"devui-label-x-axis-value\"></span>\n  </div>\n</ng-template>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-list-style{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);color:#252b3a;color:var(--devui-text, #252b3a);background:#ffffff;background:var(--devui-base-bg, #ffffff);box-shadow:0 1px 4px #252b3a33;box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-shadow, rgba(37, 43, 58, .2));border-radius:2px;border-radius:var(--devui-border-radius, 2px);z-index:10;cursor:-webkit-grabbing;cursor:grabbing}.devui-list-style:hover{color:#5e7ce0;color:var(--devui-brand, #5e7ce0);box-shadow:0 8px 16px #252b3a33;box-shadow:var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}.devui-large-size{height:36px;line-height:36px;width:120px}.devui-normal-size{height:28px;line-height:28px;width:90px}.devui-small-size{background:#50d4ab;background:var(--devui-success, #50d4ab);border-radius:100%;height:12px;width:12px}.devui-label-style{padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}:host ::ng-deep .devui-progress{background:#f2f2f3!important;background:var(--devui-dividing-line, #f2f2f3)!important}.devui-horizontal-line{position:absolute;height:1px;border-bottom:1px dashed #f2f2f3;border-bottom:1px dashed var(--devui-dividing-line, #f2f2f3)}.devui-vertical-line{position:absolute;width:1px;border-left:1px dashed #f2f2f3;border-left:1px dashed var(--devui-dividing-line, #f2f2f3)}.devui-axis-value{color:#71757f;color:var(--devui-aide-text, #71757f);line-height:20px;padding:4px;font-size:12px;font-size:var(--devui-font-size, 12px)}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.QuadrantDiagramService }]; }, propDecorators: { currentLabelSize: [{
                type: Input
            }], labelData: [{
                type: Input
            }], axisConfigs: [{
                type: Input
            }], view: [{
                type: Input
            }], normalLabelTemplate: [{
                type: Input
            }], largeLabelTemplate: [{
                type: Input
            }], smallLabelTemplate: [{
                type: Input
            }], dropScope: [{
                type: Input
            }], diagramId: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 