import * as i2 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, Injectable, Inject, EventEmitter, Output, HostBinding, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import * as i3 from 'ng-devui/dragdrop';
import { DragDropModule } from 'ng-devui/dragdrop';
import * as i4$1 from 'ng-devui/fullscreen';
import { FullscreenModule } from 'ng-devui/fullscreen';
import * as i4 from 'ng-devui/progress';
import { ProgressModule } from 'ng-devui/progress';
import * as i5 from 'ng-devui/popover';
import { PopoverModule } from 'ng-devui/popover';
import { SafePipeModule } from 'ng-devui/utils';

const QUADRANT_CONFIGS = [];
const LABEL_SIZE = ['small', 'normal', 'large'];
const DEFAULT_AXIS_CONFIGS = {
    tickWidth: 10,
    spaceBetweenLabelsAxis: 20,
    xAxisLabel: '紧急度',
    yAxisLabel: '重要度',
    xAxisRange: {
        min: 0,
        max: 100,
        step: 10
    },
    yAxisRange: {
        min: 0,
        max: 50,
        step: 5
    },
    originPosition: {
        left: 30,
        bottom: 30
    },
    axisMargin: 35,
    xWeight: 1,
    yWeight: 1
};
const DEFAULT_QUADRANT_CONFIGS = [
    { title: '重要紧急' },
    { title: '重要不紧急' },
    { title: '不重要不紧急' },
    { title: '不重要紧急' }
];
const AXIS_TITLE_SPACE = 15;
const SMALL_LABEL_SIZE_CENTER_POINT = {
    x: 6, y: 6
};
const NORMAL_LABEL_SIZE_CENTER_POINT = {
    x: 45, y: 14
};
const LARGE_LABEL_SIZE_CENTER_POINT = {
    x: 60, y: 18
};

class QuadrantDiagramAxisComponent {
    constructor(elementRef) {
        this.elementRef = elementRef;
        this.refreshColor = () => {
            if (this.themeService) {
                this.AXIS_COLOR = this.themeService.currentTheme.data['devui-dividing-line'];
                this.AXIS_LABEL_COLOR = this.themeService.currentTheme.data['devui-aide-text'];
            }
            this.resetAxis();
        };
    }
    ngOnChanges(changes) {
        if (changes && (changes['axisConfigs'] || changes['view'])) {
            this.resetAxis();
        }
    }
    ngOnInit() {
        if (typeof window !== 'undefined') {
            this.themeService = window['devuiThemeService'];
            if (this.themeService && this.themeService.eventBus) {
                this.themeService.eventBus.add('themeChanged', this.refreshColor);
            }
            this.refreshColor();
        }
    }
    resetAxis() {
        this.initAxisData();
        this.setAxisData();
        this.drawAxis();
        this.drawAxisLabels();
    }
    initAxisData() {
        this.quadrantAxis = this.elementRef.nativeElement.querySelector('d-quadrant-diagram#' + this.diagramId + ' canvas');
        this.quadrantAxis.width = this.view.width;
        this.quadrantAxis.height = this.view.height;
    }
    setAxisData() {
        this.context = this.quadrantAxis.getContext('2d');
        this.axisOrigin = this.axisConfigs.axisOrigin;
        this.axisTop = this.axisConfigs.axisTop;
        this.axisRight = this.axisConfigs.axisRight;
        this.axisWidth = this.axisConfigs.axisWidth;
        this.axisHeight = this.axisConfigs.axisHeight;
        this.yAxisTicksNum = this.axisConfigs.yAxisTicksNum;
        this.xAxisTicksNum = this.axisConfigs.xAxisTicksNum;
        this.xTickSpacing = this.axisConfigs.xTickSpacing;
        this.yTickSpacing = this.axisConfigs.yTickSpacing;
    }
    drawAxis() {
        this.context.save();
        this.context.fillStyle = this.AXIS_COLOR;
        this.context.strokeStyle = this.AXIS_COLOR;
        this.drawXAxis();
        this.drawYAxis();
        this.context.lineWidth = 0.5;
        this.drawYAxisTicks();
        this.drawXAxisTicks();
        this.context.restore();
    }
    drawXAxisTicks() {
        let deltaY;
        for (let i = 1; i < this.xAxisTicksNum; i++) {
            this.context.beginPath();
            // 判断显示长刻度还是短刻度
            if (i % this.axisConfigs.xAxisRange.step === 0) {
                deltaY = this.axisConfigs.tickWidth;
            }
            else {
                deltaY = this.axisConfigs.tickWidth / 2;
            }
            this.context.moveTo(this.axisOrigin.x + i * this.xTickSpacing, this.axisOrigin.y - deltaY);
            this.context.lineTo(this.axisOrigin.x + i * this.xTickSpacing, this.axisOrigin.y + deltaY);
            this.context.stroke();
        }
    }
    drawYAxisTicks() {
        let deltaX;
        for (let i = 1; i < this.yAxisTicksNum; i++) {
            this.context.beginPath();
            if (i % this.axisConfigs.yAxisRange.step === 0) {
                deltaX = this.axisConfigs.tickWidth;
            }
            else {
                deltaX = this.axisConfigs.tickWidth / 2;
            }
            this.context.moveTo(this.axisOrigin.x - deltaX, this.axisOrigin.y - i * this.yTickSpacing);
            this.context.lineTo(this.axisOrigin.x + deltaX, this.axisOrigin.y - i * this.yTickSpacing);
            this.context.stroke();
        }
    }
    drawYAxis() {
        this.context.beginPath();
        this.context.moveTo(this.axisOrigin.x, this.axisOrigin.y);
        this.context.lineTo(this.axisOrigin.x, this.axisTop - this.axisConfigs.axisMargin);
        this.context.stroke();
        this.context.moveTo(this.axisOrigin.x, this.axisTop - this.axisConfigs.axisMargin);
        this.context.lineTo(this.axisOrigin.x + 5, this.axisTop - this.axisConfigs.axisMargin + 10);
        this.context.lineTo(this.axisOrigin.x - 5, this.axisTop - this.axisConfigs.axisMargin + 10);
        this.context.fill();
    }
    drawXAxis() {
        this.context.beginPath();
        this.context.moveTo(this.axisOrigin.x, this.axisOrigin.y);
        this.context.lineTo(this.axisRight + this.axisConfigs.axisMargin - 10, this.axisOrigin.y);
        this.context.stroke();
        // 绘制坐标轴三角形
        this.context.moveTo(this.axisRight + this.axisConfigs.axisMargin, this.axisOrigin.y);
        this.context.lineTo(this.axisRight + this.axisConfigs.axisMargin - 10, this.axisOrigin.y + 5);
        this.context.lineTo(this.axisRight + this.axisConfigs.axisMargin - 10, this.axisOrigin.y - 5);
        this.context.fill();
    }
    drawAxisLabels() {
        this.context.save();
        this.context.fillStyle = this.AXIS_LABEL_COLOR;
        this.drawXTicksLabels();
        this.drawYTicksLabels();
        this.context.restore();
        this.drawAxisTitle();
    }
    drawAxisTitle() {
        this.context.font = '12px Microsoft YaHei';
        this.context.textAlign = 'left';
        this.context.fillStyle = this.AXIS_LABEL_COLOR;
        const xLabelWidth = this.context.measureText(this.axisConfigs.xAxisLabel).width;
        this.rotateLabel(this.axisConfigs.xAxisLabel, this.axisRight + this.axisConfigs.axisMargin / 2, this.axisOrigin.y - xLabelWidth - AXIS_TITLE_SPACE);
        this.context.fillText(this.axisConfigs.yAxisLabel, this.axisOrigin.x + AXIS_TITLE_SPACE, this.axisTop - this.axisConfigs.axisMargin / 2);
    }
    drawXTicksLabels() {
        this.context.textAlign = 'center';
        this.context.textBaseline = 'top';
        for (let i = 0; i <= this.xAxisTicksNum; i++) {
            if (i % this.axisConfigs.xAxisRange.step === 0) {
                this.context.fillText(i, this.axisOrigin.x + i * this.xTickSpacing, this.axisOrigin.y + this.axisConfigs.spaceBetweenLabelsAxis);
            }
        }
    }
    drawYTicksLabels() {
        this.context.textAlign = 'center';
        this.context.textBaseline = 'middle';
        for (let i = 0; i <= this.yAxisTicksNum; i++) {
            if (i % this.axisConfigs.yAxisRange.step === 0) {
                this.context.fillText(i, this.axisOrigin.x - this.axisConfigs.spaceBetweenLabelsAxis, this.axisOrigin.y - i * this.yTickSpacing);
            }
        }
    }
    rotateLabel(name, x, y) {
        for (let i = 0; i < name.length; i++) {
            const str = name.slice(i, i + 1).toString();
            if (str.match(/[A-Za-z0-9]/)) {
                this.context.save();
                this.context.translate(x, y);
                this.context.rotate(Math.PI / 180 * 90);
                this.context.textBaseline = 'bottom';
                this.context.fillText(str, 0, 0);
                this.context.restore();
                y += this.context.measureText(str).width;
            }
            else if (str.match(/[\u4E00-\u9FA5]/)) {
                this.context.save();
                this.context.textBaseline = 'top';
                this.context.fillText(str, x, y);
                this.context.restore();
                y += this.context.measureText(str).width;
            }
        }
    }
}
QuadrantDiagramAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: QuadrantDiagramAxisComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
QuadrantDiagramAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: QuadrantDiagramAxisComponent, selector: "d-quadrant-axis", inputs: { axisConfigs: "axisConfigs", view: "view", diagramId: "diagramId" }, usesOnChanges: true, ngImport: i0, template: "<canvas id=\"devui-quadrant-axis\"></canvas>\n", styles: ["canvas{position:absolute;z-index:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: QuadrantDiagramAxisComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-quadrant-axis', changeDetection: ChangeDetectionStrategy.OnPush, template: "<canvas id=\"devui-quadrant-axis\"></canvas>\n", styles: ["canvas{position:absolute;z-index:1}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { axisConfigs: [{
                type: Input
            }], view: [{
                type: Input
            }], diagramId: [{
                type: Input
            }] } });

class QuadrantDiagramService {
    constructor(doc) {
        this.doc = doc;
        this.document = this.doc;
    }
    showAxisLine(x, y, diagramId, view, axisConfigs) {
        const horizontalLine = this.document.querySelector('d-quadrant-diagram#' + diagramId + ' .devui-horizontal-line');
        const verticalLine = this.document.querySelector('d-quadrant-diagram#' + diagramId + ' .devui-vertical-line');
        const labelXAxisValue = this.document.querySelector('d-quadrant-diagram#' + diagramId + ' #devui-label-x-axis-value');
        const labelYAxisValue = this.document.querySelector('d-quadrant-diagram#' + diagramId + ' #devui-label-y-axis-value');
        labelXAxisValue.textContent = this.getXAxisValue(view, axisConfigs, x);
        labelYAxisValue.textContent = this.getYAxisValue(view, axisConfigs, y);
        horizontalLine.style.top = y + 'px';
        horizontalLine.style.display = '';
        verticalLine.style.left = x + 'px';
        verticalLine.style.display = '';
    }
    hideAxisLine(diagramId) {
        const horizontalLine = this.document.querySelector('d-quadrant-diagram#' + diagramId + ' .devui-horizontal-line');
        const verticalLine = this.document.querySelector('d-quadrant-diagram#' + diagramId + ' .devui-vertical-line');
        verticalLine.style.display = 'none';
        horizontalLine.style.display = 'none';
    }
    setListPointerEvents(diagramId, value) {
        const ele = this.document.querySelectorAll('d-quadrant-diagram#' + diagramId + ' .devui-list-style');
        ele.forEach(element => {
            element.style.pointerEvents = value;
        });
    }
    getXAxisValue(view, axisConfigs, left) {
        return ((left - axisConfigs.originPosition.left) / axisConfigs.xTickSpacing).toFixed(1);
    }
    getYAxisValue(view, axisConfigs, top) {
        return ((view.height - top - axisConfigs.originPosition.bottom)
            / axisConfigs.yTickSpacing).toFixed(1);
    }
}
QuadrantDiagramService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: QuadrantDiagramService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
QuadrantDiagramService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: QuadrantDiagramService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: QuadrantDiagramService, decorators: [{
            type: Injectable
        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }]; } });

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: 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: 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
            }] } });

class QuadrantRegionComponent {
    constructor() { }
    ngOnChanges(changes) {
        if (changes && (changes['axisConfigs'] || changes['view'])) {
            this.drawQuadrantRegion();
        }
    }
    ngOnInit() {
        this.drawQuadrantRegion();
    }
    drawQuadrantRegion() {
        if (this.view && this.view.height) {
            this.quadrantHeight = (this.view.height - this.axisConfigs.axisMargin - this.axisConfigs.originPosition.bottom) / 2;
        }
        if (this.view && this.view.width) {
            this.quadrantWidth = (this.view.width - this.axisConfigs.axisMargin - this.axisConfigs.originPosition.left) / 2;
        }
    }
    getQuadrantTopValue(index) {
        let height = 0;
        if (index + 1 === 3 || index + 1 === 4) {
            height = this.quadrantHeight;
        }
        return this.axisConfigs.axisMargin + height;
    }
    getQuadrantLeftValue(index) {
        let width = 0;
        if (index + 1 === 1 || index + 1 === 4) {
            width = this.quadrantWidth;
        }
        return this.axisConfigs.originPosition.left + width;
    }
}
QuadrantRegionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: QuadrantRegionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
QuadrantRegionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: QuadrantRegionComponent, selector: "d-quadrant-region", inputs: { quadrantConfigs: "quadrantConfigs", axisConfigs: "axisConfigs", view: "view", labelData: "labelData", normalLabelTemplate: "normalLabelTemplate", largeLabelTemplate: "largeLabelTemplate", smallLabelTemplate: "smallLabelTemplate", currentLabelSize: "currentLabelSize", showQuadrants: "showQuadrants", dropScope: "dropScope", diagramId: "diagramId" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"showQuadrants\">\n  <div\n    *ngFor=\"let item of quadrantConfigs; let i = index\"\n    class=\"devui-quadrant-region devui-quadrant-region-{{ i + 1 }}\"\n    [style.background-color]=\"item?.backgroundColor\"\n    [style.height.px]=\"quadrantHeight\"\n    [style.width.px]=\"quadrantWidth\"\n    [style.top.px]=\"getQuadrantTopValue(i)\"\n    [style.left.px]=\"getQuadrantLeftValue(i)\"\n  >\n    <div class=\"devui-quadrant-title\" [style.color]=\"item?.color\">\n      <span>{{ item?.title }}</span>\n    </div>\n  </div>\n</ng-container>\n<d-quadrant-label\n  [currentLabelSize]=\"currentLabelSize\"\n  [labelData]=\"labelData\"\n  [axisConfigs]=\"axisConfigs\"\n  [view]=\"view\"\n  [dropScope]=\"dropScope\"\n  [diagramId]=\"diagramId\"\n></d-quadrant-label>\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-quadrant-region{position:absolute}.devui-quadrant-title{font-size:24px;font-size:var(--devui-font-size-data-overview, 24px);line-height:32px;margin:20px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.devui-quadrant-title span{display:block}.devui-quadrant-region-1{background:rgba(246,111,106,.04);border-bottom:1px solid #f2f2f3;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3);border-left:1px solid #f2f2f3;border-left:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-quadrant-region-1 .devui-quadrant-title{color:#f66f6a4d}.devui-quadrant-region-2{background:rgba(250,194,10,.04);border-bottom:1px solid #f2f2f3;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-quadrant-region-2 .devui-quadrant-title{color:#fac20a4d}.devui-quadrant-region-3{background:rgba(80,212,171,.04)}.devui-quadrant-region-3 .devui-quadrant-title{color:#50d4ab4d}.devui-quadrant-region-4{background:rgba(81,112,255,.04);border-left:1px solid #f2f2f3;border-left:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-quadrant-region-4 .devui-quadrant-title{color:#5170ff4d}\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: "component", type: QuadrantLabelComponent, selector: "d-quadrant-label", inputs: ["currentLabelSize", "labelData", "axisConfigs", "view", "normalLabelTemplate", "largeLabelTemplate", "smallLabelTemplate", "dropScope", "diagramId"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: QuadrantRegionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-quadrant-region', template: "<ng-container *ngIf=\"showQuadrants\">\n  <div\n    *ngFor=\"let item of quadrantConfigs; let i = index\"\n    class=\"devui-quadrant-region devui-quadrant-region-{{ i + 1 }}\"\n    [style.background-color]=\"item?.backgroundColor\"\n    [style.height.px]=\"quadrantHeight\"\n    [style.width.px]=\"quadrantWidth\"\n    [style.top.px]=\"getQuadrantTopValue(i)\"\n    [style.left.px]=\"getQuadrantLeftValue(i)\"\n  >\n    <div class=\"devui-quadrant-title\" [style.color]=\"item?.color\">\n      <span>{{ item?.title }}</span>\n    </div>\n  </div>\n</ng-container>\n<d-quadrant-label\n  [currentLabelSize]=\"currentLabelSize\"\n  [labelData]=\"labelData\"\n  [axisConfigs]=\"axisConfigs\"\n  [view]=\"view\"\n  [dropScope]=\"dropScope\"\n  [diagramId]=\"diagramId\"\n></d-quadrant-label>\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-quadrant-region{position:absolute}.devui-quadrant-title{font-size:24px;font-size:var(--devui-font-size-data-overview, 24px);line-height:32px;margin:20px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.devui-quadrant-title span{display:block}.devui-quadrant-region-1{background:rgba(246,111,106,.04);border-bottom:1px solid #f2f2f3;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3);border-left:1px solid #f2f2f3;border-left:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-quadrant-region-1 .devui-quadrant-title{color:#f66f6a4d}.devui-quadrant-region-2{background:rgba(250,194,10,.04);border-bottom:1px solid #f2f2f3;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-quadrant-region-2 .devui-quadrant-title{color:#fac20a4d}.devui-quadrant-region-3{background:rgba(80,212,171,.04)}.devui-quadrant-region-3 .devui-quadrant-title{color:#50d4ab4d}.devui-quadrant-region-4{background:rgba(81,112,255,.04);border-left:1px solid #f2f2f3;border-left:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-quadrant-region-4 .devui-quadrant-title{color:#5170ff4d}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { quadrantConfigs: [{
                type: Input
            }], axisConfigs: [{
                type: Input
            }], view: [{
                type: Input
            }], labelData: [{
                type: Input
            }], normalLabelTemplate: [{
                type: Input
            }], largeLabelTemplate: [{
                type: Input
            }], smallLabelTemplate: [{
                type: Input
            }], currentLabelSize: [{
                type: Input
            }], showQuadrants: [{
                type: Input
            }], dropScope: [{
                type: Input
            }], diagramId: [{
                type: Input
            }] } });

class QuadrantDiagramComponent {
    constructor(quadrantDiagramService) {
        this.quadrantDiagramService = quadrantDiagramService;
        this.axisConfigs = DEFAULT_AXIS_CONFIGS;
        this.quadrantConfigs = DEFAULT_QUADRANT_CONFIGS;
        this.view = {
            height: 900,
            width: 950
        };
        this.labelData = [];
        this.currentLabelSize = 'large';
        this.showQuadrants = true;
        this.dropEvent = new EventEmitter();
        this.zoomInEvent = new EventEmitter();
        this.zoomOutEvent = new EventEmitter();
        this.fullScreenEvent = new EventEmitter();
        this.dropScope = 'default';
        this.showToolbar = true;
        this.isFullScreen = false;
        if (this.diagramId === undefined) {
            const id = QuadrantDiagramComponent.ID_SEED++;
            this.diagramId = 'devui-quadrant-diagram-' + id;
        }
    }
    get id() {
        return this.diagramId;
    }
    ngOnInit() {
        this.initAxisData();
        this.originHeight = this.view.height;
        this.originWidth = this.view.width;
    }
    ngOnChanges(changes) {
        if (changes && (changes['axisConfigs'] || changes['view'])) {
            this.initAxisData();
            this.originHeight = this.view.height;
            this.originWidth = this.view.width;
        }
    }
    launchFullscreen({ isFullscreen }) {
        if (typeof window !== 'undefined' && isFullscreen) {
            this.isFullScreen = isFullscreen;
            this.view = {
                height: window.screen.height,
                width: window.screen.width
            };
            this.initAxisData();
        }
        else {
            this.isFullScreen = isFullscreen;
            this.view = {
                height: this.originHeight,
                width: this.originWidth
            };
            this.initAxisData();
        }
        this.fullScreenEvent.emit(isFullscreen);
    }
    onDrop(e) {
        const xAxisValue = this.quadrantDiagramService.getXAxisValue(this.view, this.axisConfigs, e.nativeEvent.offsetX);
        const yAxisValue = this.quadrantDiagramService.getYAxisValue(this.view, this.axisConfigs, e.nativeEvent.offsetY);
        this.quadrantDiagramService.setListPointerEvents(this.diagramId, '');
        this.quadrantDiagramService.hideAxisLine(this.diagramId);
        this.dropEvent.emit({ dragData: e.dragData, xAxisValue: xAxisValue, yAxisValue: yAxisValue });
    }
    initAxisData() {
        const axisConfigKeys = Object.keys(DEFAULT_AXIS_CONFIGS);
        for (let i = 0; i < axisConfigKeys.length; i++) {
            if (this.axisConfigs[axisConfigKeys[i]] === undefined) {
                this.axisConfigs[axisConfigKeys[i]] = DEFAULT_AXIS_CONFIGS[axisConfigKeys[i]];
            }
        }
        this.axisConfigs.axisOrigin = {
            x: this.axisConfigs.originPosition.left,
            y: this.view.height - this.axisConfigs.originPosition.bottom
        };
        this.axisConfigs.axisTop = this.axisConfigs.axisMargin;
        this.axisConfigs.axisRight = this.view.width - this.axisConfigs.axisMargin;
        this.axisConfigs.axisWidth = this.axisConfigs.axisRight - this.axisConfigs.axisOrigin.x;
        this.axisConfigs.axisHeight = this.axisConfigs.axisOrigin.y - this.axisConfigs.axisTop;
        this.axisConfigs.yAxisTicksNum = this.axisConfigs.yAxisRange.max - this.axisConfigs.yAxisRange.min;
        this.axisConfigs.xAxisTicksNum = this.axisConfigs.xAxisRange.max - this.axisConfigs.xAxisRange.min;
        this.axisConfigs.xTickSpacing = this.axisConfigs.axisWidth / this.axisConfigs.xAxisTicksNum;
        this.axisConfigs.yTickSpacing = this.axisConfigs.axisHeight / this.axisConfigs.yAxisTicksNum;
    }
    zoomOut(size) {
        const index = LABEL_SIZE.indexOf(size);
        if (index > 0) {
            this.currentLabelSize = LABEL_SIZE[index - 1];
        }
        this.zoomOutEvent.emit(this.currentLabelSize);
    }
    zoomIn(size) {
        const index = LABEL_SIZE.indexOf(size);
        if (index < LABEL_SIZE.length - 1) {
            this.currentLabelSize = LABEL_SIZE[index + 1];
        }
        this.zoomInEvent.emit(this.currentLabelSize);
    }
    dragOverEvent(e) {
        this.quadrantDiagramService.setListPointerEvents(this.diagramId, 'none');
        this.quadrantDiagramService.showAxisLine(e.offsetX, e.offsetY, this.diagramId, this.view, this.axisConfigs);
    }
    handleDropOut() {
        this.quadrantDiagramService.setListPointerEvents(this.diagramId, '');
        this.quadrantDiagramService.hideAxisLine(this.diagramId);
    }
}
QuadrantDiagramComponent.ID_SEED = 0;
QuadrantDiagramComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: QuadrantDiagramComponent, deps: [{ token: QuadrantDiagramService }], target: i0.ɵɵFactoryTarget.Component });
QuadrantDiagramComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: QuadrantDiagramComponent, selector: "d-quadrant-diagram", inputs: { axisConfigs: "axisConfigs", quadrantConfigs: "quadrantConfigs", view: "view", normalLabelTemplate: "normalLabelTemplate", largeLabelTemplate: "largeLabelTemplate", smallLabelTemplate: "smallLabelTemplate", labelData: "labelData", currentLabelSize: "currentLabelSize", showQuadrants: "showQuadrants", diagramId: "diagramId", dropScope: "dropScope", showToolbar: "showToolbar" }, outputs: { dropEvent: "dropEvent", zoomInEvent: "zoomInEvent", zoomOutEvent: "zoomOutEvent", fullScreenEvent: "fullScreenEvent" }, host: { properties: { "attr.id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: "<d-fullscreen (fullscreenLaunch)=\"launchFullscreen($event)\" [zIndex]=\"1001\">\n  <div fullscreen-target>\n    <div\n      [id]=\"diagramId\"\n      dDroppable\n      [dropScope]=\"dropScope\"\n      (dragOverEvent)=\"dragOverEvent($event)\"\n      (dropEvent)=\"onDrop($event)\"\n      (dragleave)=\"handleDropOut()\"\n      class=\"devui-quadrant-diagram\"\n      [style.height.px]=\"view?.height\"\n      [style.width.px]=\"view?.width\"\n    >\n      <div *ngIf=\"showToolbar\" class=\"devui-control-zoom-container\" [style.right.px]=\"axisConfigs.axisMargin\">\n        <div class=\"devui-icon-display\" [class.disabled]=\"currentLabelSize === 'small'\" (click)=\"zoomOut(currentLabelSize)\">\n          <svg\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              <polygon fill=\"#293040\" points=\"14 7 14 9 2 9 2 7\"></polygon>\n            </g>\n          </svg>\n        </div>\n        <div class=\"devui-icon-display\" [class.disabled]=\"currentLabelSize === 'large'\" (click)=\"zoomIn(currentLabelSize)\">\n          <svg\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              <polygon fill=\"#293040\" points=\"7 7 7 2 9 2 9 7 14 7 14 9 9 9 9 14 7 14 7 9 2 9 2 7\"></polygon>\n            </g>\n          </svg>\n        </div>\n        <div fullscreen-launch class=\"devui-icon-display\">\n          <svg\n            *ngIf=\"!isFullScreen\"\n            width=\"14px\"\n            height=\"14px\"\n            viewBox=\"0 0 14 14\"\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              <g transform=\"translate(-1482.000000, -1285.000000)\" fill=\"#293040\" fill-rule=\"nonzero\">\n                <g transform=\"translate(1481.000000, 1284.000000)\">\n                  <path\n                    d=\"M15,1 L15,6 L13,6 L13,3 L10,3 L10,1 L15,1 Z M15,10 L15,15 L10,15 L10,13 L13,13 L13,10 L15,10\n                Z M1,15 L1,10 L3,10 L3,13 L6,13 L6,15 L1,15 Z M1,1 L6,1 L6,3 L3,3 L3,6 L1,6 L1,1 Z\"\n                    id=\"Combined-Shape\"\n                  ></path>\n                </g>\n              </g>\n            </g>\n          </svg>\n          <svg\n            *ngIf=\"isFullScreen\"\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              <path\n                d=\"M10,6 L10,1 L12,1 L12,4 L15,4 L15,6 L10,6 Z M6,1 L6,6 L1,6 L1,4 L4,4 L4,1 L6,1 Z M10,15 L10,10 L15,10 L15,12\n        L12,12 L12,15 L10,15 Z M6,10 L6,15 L4,15 L4,12 L1,12 L1,10 L6,10 Z\"\n                id=\"\u5F62\u72B6\"\n                fill=\"#293040\"\n                fill-rule=\"nonzero\"\n              ></path>\n            </g>\n          </svg>\n        </div>\n      </div>\n      <d-quadrant-axis [diagramId]=\"diagramId\" [view]=\"view\" [axisConfigs]=\"axisConfigs\"></d-quadrant-axis>\n      <d-quadrant-region\n        [view]=\"view\"\n        [labelData]=\"labelData\"\n        [axisConfigs]=\"axisConfigs\"\n        [quadrantConfigs]=\"quadrantConfigs\"\n        [currentLabelSize]=\"currentLabelSize\"\n        [showQuadrants]=\"showQuadrants\"\n        [dropScope]=\"dropScope\"\n        [diagramId]=\"diagramId\"\n      ></d-quadrant-region>\n    </div>\n  </div>\n</d-fullscreen>\n", styles: [".devui-quadrant-diagram{position:relative}.devui-control-zoom-container{display:flex;align-items:center;justify-content:space-between;padding:0 8px;position:absolute;top:-4px;height:32px;width:96px;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));background:#ffffff;background:var(--devui-base-bg, #ffffff);z-index:10}.devui-icon-display{cursor:pointer}.devui-icon-display svg g polygon,.devui-icon-display svg g g,.devui-icon-display svg g path{fill:#71757f;fill:var(--devui-icon-text, #71757f)}.devui-icon-display:hover svg g polygon,.devui-icon-display:hover svg g g,.devui-icon-display:hover svg g path{fill:#5e7ce0;fill:var(--devui-brand, #5e7ce0)}.disabled{cursor:not-allowed}.disabled svg g polygon,.disabled svg g g,.disabled svg g path{fill:#cfd0d3;fill:var(--devui-disabled-text, #cfd0d3)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DroppableDirective, selector: "[dDroppable]", inputs: ["dragOverClass", "dropScope", "placeholderTag", "placeholderStyle", "placeholderText", "allowDropOnItem", "dragOverItemClass", "nestingTargetRect", "switchWhileCrossEdge", "defaultDropPosition", "dropSortCountSelector", "dropSortVirtualScrollOption"], outputs: ["dragEnterEvent", "dragOverEvent", "dragLeaveEvent", "dropEvent"] }, { kind: "component", type: i4$1.FullscreenComponent, selector: "d-fullscreen", inputs: ["mode", "zIndex", "target"], outputs: ["fullscreenLaunch"] }, { kind: "component", type: QuadrantDiagramAxisComponent, selector: "d-quadrant-axis", inputs: ["axisConfigs", "view", "diagramId"] }, { kind: "component", type: QuadrantRegionComponent, selector: "d-quadrant-region", inputs: ["quadrantConfigs", "axisConfigs", "view", "labelData", "normalLabelTemplate", "largeLabelTemplate", "smallLabelTemplate", "currentLabelSize", "showQuadrants", "dropScope", "diagramId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: QuadrantDiagramComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-quadrant-diagram', changeDetection: ChangeDetectionStrategy.OnPush, template: "<d-fullscreen (fullscreenLaunch)=\"launchFullscreen($event)\" [zIndex]=\"1001\">\n  <div fullscreen-target>\n    <div\n      [id]=\"diagramId\"\n      dDroppable\n      [dropScope]=\"dropScope\"\n      (dragOverEvent)=\"dragOverEvent($event)\"\n      (dropEvent)=\"onDrop($event)\"\n      (dragleave)=\"handleDropOut()\"\n      class=\"devui-quadrant-diagram\"\n      [style.height.px]=\"view?.height\"\n      [style.width.px]=\"view?.width\"\n    >\n      <div *ngIf=\"showToolbar\" class=\"devui-control-zoom-container\" [style.right.px]=\"axisConfigs.axisMargin\">\n        <div class=\"devui-icon-display\" [class.disabled]=\"currentLabelSize === 'small'\" (click)=\"zoomOut(currentLabelSize)\">\n          <svg\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              <polygon fill=\"#293040\" points=\"14 7 14 9 2 9 2 7\"></polygon>\n            </g>\n          </svg>\n        </div>\n        <div class=\"devui-icon-display\" [class.disabled]=\"currentLabelSize === 'large'\" (click)=\"zoomIn(currentLabelSize)\">\n          <svg\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              <polygon fill=\"#293040\" points=\"7 7 7 2 9 2 9 7 14 7 14 9 9 9 9 14 7 14 7 9 2 9 2 7\"></polygon>\n            </g>\n          </svg>\n        </div>\n        <div fullscreen-launch class=\"devui-icon-display\">\n          <svg\n            *ngIf=\"!isFullScreen\"\n            width=\"14px\"\n            height=\"14px\"\n            viewBox=\"0 0 14 14\"\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              <g transform=\"translate(-1482.000000, -1285.000000)\" fill=\"#293040\" fill-rule=\"nonzero\">\n                <g transform=\"translate(1481.000000, 1284.000000)\">\n                  <path\n                    d=\"M15,1 L15,6 L13,6 L13,3 L10,3 L10,1 L15,1 Z M15,10 L15,15 L10,15 L10,13 L13,13 L13,10 L15,10\n                Z M1,15 L1,10 L3,10 L3,13 L6,13 L6,15 L1,15 Z M1,1 L6,1 L6,3 L3,3 L3,6 L1,6 L1,1 Z\"\n                    id=\"Combined-Shape\"\n                  ></path>\n                </g>\n              </g>\n            </g>\n          </svg>\n          <svg\n            *ngIf=\"isFullScreen\"\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              <path\n                d=\"M10,6 L10,1 L12,1 L12,4 L15,4 L15,6 L10,6 Z M6,1 L6,6 L1,6 L1,4 L4,4 L4,1 L6,1 Z M10,15 L10,10 L15,10 L15,12\n        L12,12 L12,15 L10,15 Z M6,10 L6,15 L4,15 L4,12 L1,12 L1,10 L6,10 Z\"\n                id=\"\u5F62\u72B6\"\n                fill=\"#293040\"\n                fill-rule=\"nonzero\"\n              ></path>\n            </g>\n          </svg>\n        </div>\n      </div>\n      <d-quadrant-axis [diagramId]=\"diagramId\" [view]=\"view\" [axisConfigs]=\"axisConfigs\"></d-quadrant-axis>\n      <d-quadrant-region\n        [view]=\"view\"\n        [labelData]=\"labelData\"\n        [axisConfigs]=\"axisConfigs\"\n        [quadrantConfigs]=\"quadrantConfigs\"\n        [currentLabelSize]=\"currentLabelSize\"\n        [showQuadrants]=\"showQuadrants\"\n        [dropScope]=\"dropScope\"\n        [diagramId]=\"diagramId\"\n      ></d-quadrant-region>\n    </div>\n  </div>\n</d-fullscreen>\n", styles: [".devui-quadrant-diagram{position:relative}.devui-control-zoom-container{display:flex;align-items:center;justify-content:space-between;padding:0 8px;position:absolute;top:-4px;height:32px;width:96px;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));background:#ffffff;background:var(--devui-base-bg, #ffffff);z-index:10}.devui-icon-display{cursor:pointer}.devui-icon-display svg g polygon,.devui-icon-display svg g g,.devui-icon-display svg g path{fill:#71757f;fill:var(--devui-icon-text, #71757f)}.devui-icon-display:hover svg g polygon,.devui-icon-display:hover svg g g,.devui-icon-display:hover svg g path{fill:#5e7ce0;fill:var(--devui-brand, #5e7ce0)}.disabled{cursor:not-allowed}.disabled svg g polygon,.disabled svg g g,.disabled svg g path{fill:#cfd0d3;fill:var(--devui-disabled-text, #cfd0d3)}\n"] }]
        }], ctorParameters: function () { return [{ type: QuadrantDiagramService }]; }, propDecorators: { axisConfigs: [{
                type: Input
            }], quadrantConfigs: [{
                type: Input
            }], view: [{
                type: Input
            }], normalLabelTemplate: [{
                type: Input
            }], largeLabelTemplate: [{
                type: Input
            }], smallLabelTemplate: [{
                type: Input
            }], labelData: [{
                type: Input
            }], currentLabelSize: [{
                type: Input
            }], showQuadrants: [{
                type: Input
            }], diagramId: [{
                type: Input
            }], dropEvent: [{
                type: Output
            }], zoomInEvent: [{
                type: Output
            }], zoomOutEvent: [{
                type: Output
            }], fullScreenEvent: [{
                type: Output
            }], dropScope: [{
                type: Input
            }], showToolbar: [{
                type: Input
            }], id: [{
                type: HostBinding,
                args: ['attr.id']
            }] } });

class QuadrantDiagramModule {
}
QuadrantDiagramModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: QuadrantDiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
QuadrantDiagramModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: QuadrantDiagramModule, declarations: [QuadrantDiagramComponent,
        QuadrantDiagramAxisComponent,
        QuadrantRegionComponent,
        QuadrantLabelComponent], imports: [CommonModule,
        FormsModule,
        DragDropModule,
        ProgressModule,
        PopoverModule,
        ProgressModule,
        FullscreenModule,
        SafePipeModule], exports: [QuadrantDiagramComponent] });
QuadrantDiagramModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: QuadrantDiagramModule, providers: [QuadrantDiagramService], imports: [CommonModule,
        FormsModule,
        DragDropModule,
        ProgressModule,
        PopoverModule,
        ProgressModule,
        FullscreenModule,
        SafePipeModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: QuadrantDiagramModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                        FormsModule,
                        DragDropModule,
                        ProgressModule,
                        PopoverModule,
                        ProgressModule,
                        FullscreenModule,
                        SafePipeModule
                    ],
                    exports: [
                        QuadrantDiagramComponent
                    ],
                    declarations: [
                        QuadrantDiagramComponent,
                        QuadrantDiagramAxisComponent,
                        QuadrantRegionComponent,
                        QuadrantLabelComponent
                    ],
                    providers: [QuadrantDiagramService]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { AXIS_TITLE_SPACE, DEFAULT_AXIS_CONFIGS, DEFAULT_QUADRANT_CONFIGS, LABEL_SIZE, LARGE_LABEL_SIZE_CENTER_POINT, NORMAL_LABEL_SIZE_CENTER_POINT, QUADRANT_CONFIGS, QuadrantDiagramAxisComponent, QuadrantDiagramComponent, QuadrantDiagramModule, QuadrantDiagramService, QuadrantLabelComponent, QuadrantRegionComponent, SMALL_LABEL_SIZE_CENTER_POINT };
//# sourceMappingURL=ng-devui-quadrant-diagram.mjs.map
