ng-devui
Version:
DevUI components based on Angular
532 lines (526 loc) • 55.5 kB
JavaScript
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) {
const { axisConfigs, view } = changes;
if (changes && (axisConfigs || 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;
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuadrantDiagramAxisComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", 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: () => [{ 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);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuadrantDiagramService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuadrantDiagramService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuadrantDiagramService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }] });
class QuadrantLabelComponent {
constructor(quadrantDiagramService) {
this.quadrantDiagramService = quadrantDiagramService;
}
ngOnChanges(changes) {
if (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, '');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuadrantLabelComponent, deps: [{ token: QuadrantDiagramService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-list-style{font-size:var(--devui-font-size-card-title, 14px);color:var(--devui-text, #191919);background:var(--devui-base-bg, #ffffff);box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-shadow, rgba(0, 0, 0, .16));border-radius:var(--devui-border-radius, 2px);z-index:10;cursor:grabbing}.devui-list-style:hover{color:var(--devui-brand, #0a59f7);box-shadow:var(--devui-shadow-length-hover, 0 8px 24px 0) var(--devui-hover-shadow, rgba(0, 0, 0, .16))}.devui-large-size{height:36px;line-height:36px;width:120px}.devui-normal-size{height:28px;line-height:28px;width:90px}.devui-small-size{background:var(--devui-success, #058358);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:var(--devui-dividing-line, #f0f0f0)!important}.devui-horizontal-line{position:absolute;height:1px;border-bottom:1px dashed var(--devui-dividing-line, #f0f0f0)}.devui-vertical-line{position:absolute;width:1px;border-left:1px dashed var(--devui-dividing-line, #f0f0f0)}.devui-axis-value{color:var(--devui-aide-text, #595959);line-height:20px;padding:4px;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: ["isDynamic", "percentage", "percentageText", "barbgcolor", "strokeColor", "height", "strokeWidth", "isCircle", "type", "showContent", "multiProgressConfig"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[dPopover]", inputs: ["content", "controlled", "position", "showAnimation", "showAnimate", "scrollElement", "autoHideCoefficient", "appendToBody", "zIndex", "popType", "popMaxWidth", "trigger", "hoverToContent", "hoverDelayTime", "popoverStyle", "mouseEnterDelay", "mouseLeaveDelay", "visible"], exportAs: ["dPopover"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-list-style{font-size:var(--devui-font-size-card-title, 14px);color:var(--devui-text, #191919);background:var(--devui-base-bg, #ffffff);box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-shadow, rgba(0, 0, 0, .16));border-radius:var(--devui-border-radius, 2px);z-index:10;cursor:grabbing}.devui-list-style:hover{color:var(--devui-brand, #0a59f7);box-shadow:var(--devui-shadow-length-hover, 0 8px 24px 0) var(--devui-hover-shadow, rgba(0, 0, 0, .16))}.devui-large-size{height:36px;line-height:36px;width:120px}.devui-normal-size{height:28px;line-height:28px;width:90px}.devui-small-size{background:var(--devui-success, #058358);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:var(--devui-dividing-line, #f0f0f0)!important}.devui-horizontal-line{position:absolute;height:1px;border-bottom:1px dashed var(--devui-dividing-line, #f0f0f0)}.devui-vertical-line{position:absolute;width:1px;border-left:1px dashed var(--devui-dividing-line, #f0f0f0)}.devui-axis-value{color:var(--devui-aide-text, #595959);line-height:20px;padding:4px;font-size:var(--devui-font-size, 12px)}\n"] }]
}], ctorParameters: () => [{ 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 {
ngOnChanges(changes) {
const { axisConfigs, view } = changes;
if (axisConfigs || 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;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuadrantRegionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-quadrant-region{position:absolute}.devui-quadrant-title{font-size:var(--devui-font-size-data-overview, 24px);line-height:32px;margin:20px;-webkit-user-select:none;user-select:none}.devui-quadrant-title span{display:block}.devui-quadrant-region-1{background:#f66f6a0a;border-bottom:1px solid var(--devui-dividing-line, #f0f0f0);border-left:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-quadrant-region-1 .devui-quadrant-title{color:#f66f6a4d}.devui-quadrant-region-2{background:#fac20a0a;border-bottom:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-quadrant-region-2 .devui-quadrant-title{color:#fac20a4d}.devui-quadrant-region-3{background:#50d4ab0a}.devui-quadrant-region-3 .devui-quadrant-title{color:#50d4ab4d}.devui-quadrant-region-4{background:#5170ff0a;border-left:1px solid var(--devui-dividing-line, #f0f0f0)}.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: "18.2.13", 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:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-quadrant-region{position:absolute}.devui-quadrant-title{font-size:var(--devui-font-size-data-overview, 24px);line-height:32px;margin:20px;-webkit-user-select:none;user-select:none}.devui-quadrant-title span{display:block}.devui-quadrant-region-1{background:#f66f6a0a;border-bottom:1px solid var(--devui-dividing-line, #f0f0f0);border-left:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-quadrant-region-1 .devui-quadrant-title{color:#f66f6a4d}.devui-quadrant-region-2{background:#fac20a0a;border-bottom:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-quadrant-region-2 .devui-quadrant-title{color:#fac20a4d}.devui-quadrant-region-3{background:#50d4ab0a}.devui-quadrant-region-3 .devui-quadrant-title{color:#50d4ab4d}.devui-quadrant-region-4{background:#5170ff0a;border-left:1px solid var(--devui-dividing-line, #f0f0f0)}.devui-quadrant-region-4 .devui-quadrant-title{color:#5170ff4d}\n"] }]
}], 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 {
static { this.ID_SEED = 0; }
get id() {
return this.diagramId;
}
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;
}
}
ngOnInit() {
this.initAxisData();
this.originHeight = this.view.height;
this.originWidth = this.view.width;
}
ngOnChanges(changes) {
const { axisConfigs, view } = changes;
if (axisConfigs || 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);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuadrantDiagramComponent, deps: [{ token: QuadrantDiagramService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-shadow, rgba(0, 0, 0, .16));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:var(--devui-icon-text, #808080)}.devui-icon-display:hover svg g polygon,.devui-icon-display:hover svg g g,.devui-icon-display:hover svg g path{fill:var(--devui-brand, #0a59f7)}.disabled{cursor:not-allowed}.disabled svg g polygon,.disabled svg g g,.disabled svg g path{fill:var(--devui-disabled-text, #c2c2c2)}\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", "container", "beforeChange"], 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: "18.2.13", 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