ng-devui
Version:
DevUI components based on Angular
153 lines • 71.4 kB
JavaScript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { I18nService } from 'ng-devui/i18n';
import { ModalService } from 'ng-devui/modal';
import { cloneDeep } from 'lodash-es';
import { TableOptionModalComponent } from './table-option-modal.component';
import * as i0 from "@angular/core";
import * as i1 from "ng-devui/modal";
import * as i2 from "ng-devui/i18n";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "ng-devui/checkbox";
import * as i6 from "ng-devui/dropdown";
import * as i7 from "ng-devui/dragdrop";
import * as i8 from "ng-devui/toggle";
export class TableOptionToggleComponent {
set columnsData(value) {
this._columnsData = cloneDeep(value);
}
get showStyleSetting() {
return !!Object.keys(this.styleSetting).length;
}
get sizeStatus() {
return this.styleSetting?.size;
}
set sizeStatus(value) {
if (!this.styleSetting) {
this.styleSetting = {};
}
this.styleSetting.size = value;
}
constructor(modalService, cdr, i18n) {
this.modalService = modalService;
this.cdr = cdr;
this.i18n = i18n;
this.colSort = true;
this.styleSetting = {};
this.toggleMode = 'dropdown';
this.modalWidth = '600px';
this.colChanges = new EventEmitter();
this.styleChanges = new EventEmitter();
this._columnsData = [];
}
ngOnInit() {
this.i18nText = this.i18n.getI18nText().datatable;
this.i18nLocale = this.i18n.getI18nText().locale;
this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
this.i18nText = data.datatable;
this.i18nLocale = data.locale;
this.cdr.markForCheck();
});
}
onToggle(event) {
console.log(event);
}
toggleActive(item) {
if (item.disabled) {
return;
}
item.checked = !item.checked;
this.emitData();
}
onCardActiveChanges(active, status) {
this.sizeStatus = active ? status : 'none';
}
emitStyles() {
this.styleChanges.emit(this.styleSetting);
}
emitData() {
this.colChanges.emit(this._columnsData);
}
styleSettingChanges(checked, type) {
switch (type) {
case 'border':
this.styleSetting.borderType = checked ? '' : 'borderless';
break;
case 'shadow':
this.styleSetting.shadowType = checked ? 'normal' : 'embed';
break;
case 'striped':
this.styleSetting.striped = checked;
break;
default:
}
this.emitStyles();
}
onDrop(e) {
let index = e.dropIndex;
const fromIndex = e.dragFromIndex;
if (-1 !== index) {
if (-1 !== fromIndex && index > fromIndex) {
index--;
}
this._columnsData.splice(index, 0, fromIndex === -1 ? e.dragData : this._columnsData.splice(fromIndex, 1)[0]);
}
else {
this._columnsData.push(e.dragData);
}
this.colChanges.emit(this._columnsData);
}
openModal() {
const results = this.modalService.open({
id: 'modal-modal',
width: this.modalWidth,
backdropCloseable: true,
component: TableOptionModalComponent,
data: {
columnsData: this._columnsData,
showCategory: this.showCategory,
styleSetting: cloneDeep(this.styleSetting),
colSort: this.colSort,
i18nText: this.i18nText,
onClose: () => {
results.modalInstance.hide();
},
onEnsure: (columnsData, styleSetting) => {
this._columnsData = columnsData;
this.colChanges.emit(columnsData);
this.styleChanges.emit(styleSetting);
results.modalInstance.hide();
this.cdr.detectChanges();
},
},
});
}
ngOnDestroy() {
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableOptionToggleComponent, deps: [{ token: i1.ModalService }, { token: i0.ChangeDetectorRef }, { token: i2.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableOptionToggleComponent, selector: "d-table-option-toggle", inputs: { columnsData: "columnsData", showCategory: "showCategory", colSort: "colSort", styleSetting: "styleSetting", toggleMode: "toggleMode", modalWidth: "modalWidth" }, outputs: { colChanges: "colChanges", styleChanges: "styleChanges" }, ngImport: i0, template: "<div *ngIf=\"toggleMode === 'dropdown'\" class=\"btn-group\" dDropDown (toggleEvent)=\"onToggle($event)\" appendToBody>\n <div dDropDownToggle class=\"devui-option-toggle\">\n <ng-template [ngTemplateOutlet]=\"host\"></ng-template>\n </div>\n <div dDropDownMenu class=\"devui-option-panel\" (click)=\"$event.stopPropagation()\">\n <p class=\"devui-option-title\">{{ i18nText?.tableSetting }}</p>\n <div class=\"devui-option-panel-style-setting\" *ngIf=\"showStyleSetting\">\n <div class=\"devui-option-panel-style-header\">\n <p class=\"devui-option-subtitle\">{{ i18nText?.styles }}</p>\n <div class=\"devui-option-size-wrapper\" *ngIf=\"styleSetting.size !== undefined\">\n <div class=\"devui-option-size-card\" (click)=\"sizeStatus = 'xs'\" [ngClass]=\"{ 'devui-option-item-active': sizeStatus === 'xs' }\">\n <svg\n width=\"32px\"\n height=\"32px\"\n viewBox=\"0 0 32 32\"\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=\"M3.2,11.6 C3.6418278,11.6 4,11.9581722 4,12.4 L4,13.2 C4,13.6418278 3.6418278,14 3.2,14 L2.4,14 C1.9581722,14 1.6,13.6418278 1.6,13.2 L1.6,12.4 C1.6,11.9581722 1.9581722,11.6 2.4,11.6 L3.2,11.6 Z M13.6,11.6 C14.0418278,11.6 14.4,11.9581722 14.4,12.4 L14.4,13.2 C14.4,13.6418278 14.0418278,14 13.6,14 L5.6,14 C5.1581722,14 4.8,13.6418278 4.8,13.2 L4.8,12.4 C4.8,11.9581722 5.1581722,11.6 5.6,11.6 L13.6,11.6 Z M3.2,8.4 C3.6418278,8.4 4,8.7581722 4,9.2 L4,10 C4,10.4418278 3.6418278,10.8 3.2,10.8 L2.4,10.8 C1.9581722,10.8 1.6,10.4418278 1.6,10 L1.6,9.2 C1.6,8.7581722 1.9581722,8.4 2.4,8.4 L3.2,8.4 Z M13.6,8.4 C14.0418278,8.4 14.4,8.7581722 14.4,9.2 L14.4,10 C14.4,10.4418278 14.0418278,10.8 13.6,10.8 L5.6,10.8 C5.1581722,10.8 4.8,10.4418278 4.8,10 L4.8,9.2 C4.8,8.7581722 5.1581722,8.4 5.6,8.4 L13.6,8.4 Z M3.2,5.2 C3.6418278,5.2 4,5.5581722 4,6 L4,6.8 C4,7.2418278 3.6418278,7.6 3.2,7.6 L2.4,7.6 C1.9581722,7.6 1.6,7.2418278 1.6,6.8 L1.6,6 C1.6,5.5581722 1.9581722,5.2 2.4,5.2 L3.2,5.2 Z M13.6,5.2 C14.0418278,5.2 14.4,5.5581722 14.4,6 L14.4,6.8 C14.4,7.2418278 14.0418278,7.6 13.6,7.6 L5.6,7.6 C5.1581722,7.6 4.8,7.2418278 4.8,6.8 L4.8,6 C4.8,5.5581722 5.1581722,5.2 5.6,5.2 L13.6,5.2 Z M3.2,2 C3.6418278,2 4,2.3581722 4,2.8 L4,3.6 C4,4.0418278 3.6418278,4.4 3.2,4.4 L2.4,4.4 C1.9581722,4.4 1.6,4.0418278 1.6,3.6 L1.6,2.8 C1.6,2.3581722 1.9581722,2 2.4,2 L3.2,2 Z M13.6,2 C14.0418278,2 14.4,2.3581722 14.4,2.8 L14.4,3.6 C14.4,4.0418278 14.0418278,4.4 13.6,4.4 L5.6,4.4 C5.1581722,4.4 4.8,4.0418278 4.8,3.6 L4.8,2.8 C4.8,2.3581722 5.1581722,2 5.6,2 L13.6,2 Z\"\n fill=\"#BECCFA\"\n ></path>\n </g>\n </svg>\n <d-checkbox\n [isShowTitle]=\"false\"\n [ngModel]=\"sizeStatus === 'xs'\"\n (ngModelChange)=\"onCardActiveChanges($event, 'xs')\"\n (click)=\"$event.stopPropagation()\"\n ></d-checkbox>\n <p>{{ i18nText?.compact }}</p>\n </div>\n <div class=\"devui-option-size-card\" (click)=\"sizeStatus = 'sm'\" [ngClass]=\"{ 'devui-option-item-active': sizeStatus === 'sm' }\">\n <svg\n width=\"32px\"\n height=\"32px\"\n viewBox=\"0 0 32 32\"\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=\"M3.2,10.8 C3.6418278,10.8 4,11.1581722 4,11.6 L4,12.4 C4,12.8418278 3.6418278,13.2 3.2,13.2 L2.4,13.2 C1.9581722,13.2 1.6,12.8418278 1.6,12.4 L1.6,11.6 C1.6,11.1581722 1.9581722,10.8 2.4,10.8 L3.2,10.8 Z M13.6,10.8 C14.0418278,10.8 14.4,11.1581722 14.4,11.6 L14.4,12.4 C14.4,12.8418278 14.0418278,13.2 13.6,13.2 L5.6,13.2 C5.1581722,13.2 4.8,12.8418278 4.8,12.4 L4.8,11.6 C4.8,11.1581722 5.1581722,10.8 5.6,10.8 L13.6,10.8 Z M3.2,6.8 C3.6418278,6.8 4,7.1581722 4,7.6 L4,8.4 C4,8.8418278 3.6418278,9.2 3.2,9.2 L2.4,9.2 C1.9581722,9.2 1.6,8.8418278 1.6,8.4 L1.6,7.6 C1.6,7.1581722 1.9581722,6.8 2.4,6.8 L3.2,6.8 Z M13.6,6.8 C14.0418278,6.8 14.4,7.1581722 14.4,7.6 L14.4,8.4 C14.4,8.8418278 14.0418278,9.2 13.6,9.2 L5.6,9.2 C5.1581722,9.2 4.8,8.8418278 4.8,8.4 L4.8,7.6 C4.8,7.1581722 5.1581722,6.8 5.6,6.8 L13.6,6.8 Z M3.2,2.8 C3.6418278,2.8 4,3.1581722 4,3.6 L4,4.4 C4,4.8418278 3.6418278,5.2 3.2,5.2 L2.4,5.2 C1.9581722,5.2 1.6,4.8418278 1.6,4.4 L1.6,3.6 C1.6,3.1581722 1.9581722,2.8 2.4,2.8 L3.2,2.8 Z M13.6,2.8 C14.0418278,2.8 14.4,3.1581722 14.4,3.6 L14.4,4.4 C14.4,4.8418278 14.0418278,5.2 13.6,5.2 L5.6,5.2 C5.1581722,5.2 4.8,4.8418278 4.8,4.4 L4.8,3.6 C4.8,3.1581722 5.1581722,2.8 5.6,2.8 L13.6,2.8 Z\"\n fill=\"#BECCFA\"\n ></path>\n </g>\n </svg>\n <d-checkbox\n [isShowTitle]=\"false\"\n [ngModel]=\"sizeStatus === 'sm'\"\n (ngModelChange)=\"onCardActiveChanges($event, 'sm')\"\n (click)=\"$event.stopPropagation()\"\n ></d-checkbox>\n <p>{{ i18nText?.standard }}</p>\n </div>\n <div class=\"devui-option-size-card\" (click)=\"sizeStatus = 'md'\" [ngClass]=\"{ 'devui-option-item-active': sizeStatus === 'md' }\">\n <svg\n width=\"32px\"\n height=\"32px\"\n viewBox=\"0 0 32 32\"\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=\"M3.2,9.6 C3.6418278,9.6 4,9.9581722 4,10.4 L4,11.2 C4,11.6418278 3.6418278,12 3.2,12 L2.4,12 C1.9581722,12 1.6,11.6418278 1.6,11.2 L1.6,10.4 C1.6,9.9581722 1.9581722,9.6 2.4,9.6 L3.2,9.6 Z M13.6,9.6 C14.0418278,9.6 14.4,9.9581722 14.4,10.4 L14.4,11.2 C14.4,11.6418278 14.0418278,12 13.6,12 L5.6,12 C5.1581722,12 4.8,11.6418278 4.8,11.2 L4.8,10.4 C4.8,9.9581722 5.1581722,9.6 5.6,9.6 L13.6,9.6 Z M3.2,4 C3.6418278,4 4,4.3581722 4,4.8 L4,5.6 C4,6.0418278 3.6418278,6.4 3.2,6.4 L2.4,6.4 C1.9581722,6.4 1.6,6.0418278 1.6,5.6 L1.6,4.8 C1.6,4.3581722 1.9581722,4 2.4,4 L3.2,4 Z M13.6,4 C14.0418278,4 14.4,4.3581722 14.4,4.8 L14.4,5.6 C14.4,6.0418278 14.0418278,6.4 13.6,6.4 L5.6,6.4 C5.1581722,6.4 4.8,6.0418278 4.8,5.6 L4.8,4.8 C4.8,4.3581722 5.1581722,4 5.6,4 L13.6,4 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"#BECCFA\"\n ></path>\n </g>\n </svg>\n <d-checkbox\n [isShowTitle]=\"false\"\n [ngModel]=\"sizeStatus === 'md'\"\n (ngModelChange)=\"onCardActiveChanges($event, 'md')\"\n (click)=\"$event.stopPropagation()\"\n ></d-checkbox>\n <p>{{ i18nText?.loose }}</p>\n </div>\n </div>\n <div class=\"devui-option-form\" *ngIf=\"styleSetting.borderType !== undefined\">\n <span>{{ i18nText?.divideLine }}</span>\n <d-toggle [checked]=\"styleSetting.borderType === ''\" (change)=\"styleSettingChanges($event, 'border')\"></d-toggle>\n </div>\n\n <div class=\"devui-option-form\" *ngIf=\"styleSetting.striped !== undefined\">\n <span>{{ i18nText?.striped }}</span>\n <d-toggle [checked]=\"styleSetting.striped\" (change)=\"styleSettingChanges($event, 'striped')\"></d-toggle>\n </div>\n\n <div class=\"devui-option-form\" *ngIf=\"styleSetting.shadowType !== undefined\">\n <span>{{ i18nText?.tableShadow }}</span>\n <d-toggle [checked]=\"styleSetting.shadowType === 'normal'\" (change)=\"styleSettingChanges($event, 'shadow')\"></d-toggle>\n </div>\n </div>\n </div>\n <div class=\"devui-option-panel-col-drag\">\n <p class=\"devui-option-subtitle\">{{ i18nText?.colCanSelect }}</p>\n\n <div *ngIf=\"colSort\" dDroppable [switchWhileCrossEdge]=\"true\" [dropScope]=\"'drag-place'\" (dropEvent)=\"onDrop($event)\" dSortable>\n <div\n *ngFor=\"let data of _columnsData\"\n class=\"devui-option-drag-item\"\n [ngClass]=\"{ disabled: data.disabled }\"\n dDraggable\n [dragScope]=\"'drag-place'\"\n [dragHandleClass]=\"'devui-option-drag-handle'\"\n [dragData]=\"data\"\n [disabled]=\"data.disabled\"\n (click)=\"toggleActive(data)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"colItem\"\n [ngTemplateOutletContext]=\"{\n colsData: data,\n canDrag: true\n }\"\n ></ng-template>\n </div>\n </div>\n <div *ngIf=\"!colSort\">\n <div *ngFor=\"let data of _columnsData\" class=\"devui-option-drag-item\" (click)=\"toggleActive(data)\">\n <ng-template\n [ngTemplateOutlet]=\"colItem\"\n [ngTemplateOutletContext]=\"{\n colsData: data,\n canDrag: false\n }\"\n ></ng-template>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div *ngIf=\"toggleMode === 'modal'\" (click)=\"openModal()\">\n <ng-template [ngTemplateOutlet]=\"host\"></ng-template>\n</div>\n\n<ng-template #host>\n <ng-content></ng-content>\n</ng-template>\n<ng-template #colItem let-colsData=\"colsData\" let-canDrag=\"canDrag\">\n <svg\n *ngIf=\"canDrag\"\n class=\"devui-option-drag-handle\"\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 <g fill=\"#5170FF\" fill-rule=\"nonzero\">\n <path\n d=\"M5.5,0 C6.32842712,-1.3527075e-16 7,0.596953667 7,1.33333333 C7,2.069713 6.32842712,2.66666667 5.5,2.66666667 C4.67157288,2.66666667 4,2.069713 4,1.33333333 C4,0.596953667 4.67157288,1.3527075e-16 5.5,0 Z M5.5,4.44444444 C6.32842712,4.44444444 7,5.04139811 7,5.77777778 C7,6.51415744 6.32842712,7.11111111 5.5,7.11111111 C4.67157288,7.11111111 4,6.51415744 4,5.77777778 C4,5.04139811 4.67157288,4.44444444 5.5,4.44444444 Z M5.5,8.88888889 C6.32842712,8.88888889 7,9.48584256 7,10.2222222 C7,10.9586019 6.32842712,11.5555556 5.5,11.5555556 C4.67157288,11.5555556 4,10.9586019 4,10.2222222 C4,9.48584256 4.67157288,8.88888889 5.5,8.88888889 Z M5.5,13.3333333 C6.32842712,13.3333333 7,13.930287 7,14.6666667 C7,15.4030463 6.32842712,16 5.5,16 C4.67157288,16 4,15.4030463 4,14.6666667 C4,13.930287 4.67157288,13.3333333 5.5,13.3333333 Z M10.5,0 C11.3284271,-1.3527075e-16 12,0.596953667 12,1.33333333 C12,2.069713 11.3284271,2.66666667 10.5,2.66666667 C9.67157288,2.66666667 9,2.069713 9,1.33333333 C9,0.596953667 9.67157288,1.3527075e-16 10.5,0 Z M10.5,4.44444444 C11.3284271,4.44444444 12,5.04139811 12,5.77777778 C12,6.51415744 11.3284271,7.11111111 10.5,7.11111111 C9.67157288,7.11111111 9,6.51415744 9,5.77777778 C9,5.04139811 9.67157288,4.44444444 10.5,4.44444444 Z M10.5,8.88888889 C11.3284271,8.88888889 12,9.48584256 12,10.2222222 C12,10.9586019 11.3284271,11.5555556 10.5,11.5555556 C9.67157288,11.5555556 9,10.9586019 9,10.2222222 C9,9.48584256 9.67157288,8.88888889 10.5,8.88888889 Z M10.5,13.3333333 C11.3284271,13.3333333 12,13.930287 12,14.6666667 C12,15.4030463 11.3284271,16 10.5,16 C9.67157288,16 9,15.4030463 9,14.6666667 C9,13.930287 9.67157288,13.3333333 10.5,13.3333333 Z\"\n ></path>\n </g>\n </g>\n </svg>\n <span class=\"devui-option-drag-label\">{{ colsData.header }}</span>\n <d-checkbox\n [ngClass]=\"{ 'devui-option-item-active': colsData.checked }\"\n [isShowTitle]=\"false\"\n [(ngModel)]=\"colsData.checked\"\n [disabled]=\"colsData.disabled\"\n (click)=\"$event.stopPropagation(); emitData()\"\n ></d-checkbox>\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-option-toggle{cursor:pointer}.devui-option-panel{width:280px;padding:20px}.devui-option-panel .disabled{color:var(--devui-disabled-text, #c2c2c2)}.devui-option-panel .devui-option-title{font-size:var(--devui-font-size-card-title, 14px);color:var(--devui-text, #191919);font-weight:700;margin-bottom:16px}.devui-option-panel .devui-option-subtitle{color:var(--devui-text, #191919);font-size:var(--devui-font-size, 12px);font-weight:700;margin-bottom:12px}.devui-option-panel-col-select{display:inline-block}.devui-option-panel-style-setting{display:inline-block;width:100%;padding-bottom:20px}.devui-option-panel .devui-option-size-wrapper{display:flex;justify-content:space-between}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card{width:72px;height:72px;border-radius:var(--devui-border-radius-card, 6px);padding:8px 22px 8px 20px;box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-light-shadow, rgba(0, 0, 0, .08));cursor:pointer;position:relative;color:var(--devui-aide-text, #595959)}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card p{width:72px;margin-left:-20px;text-align:center}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card d-checkbox{position:absolute;right:4px;top:4px;display:none}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card.devui-option-item-active{box-shadow:var(--devui-shadow-length-hover, 0 8px 24px 0) var(--devui-hover-shadow, rgba(0, 0, 0, .16));font-weight:700;color:var(--devui-text, #191919)}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card.devui-option-item-active d-checkbox{display:block}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card:hover{box-shadow:var(--devui-shadow-length-hover, 0 8px 24px 0) var(--devui-hover-shadow, rgba(0, 0, 0, .16))}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card:hover d-checkbox{display:block}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card svg{transform:scale(2);transform-origin:0 0}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card svg path{fill:var(--devui-waiting, #9dbdfc)}.devui-option-panel .devui-option-size-wrapper ::ng-deep d-checkbox .devui-checkbox-default-background{border-radius:50%}.devui-option-panel .devui-option-form{margin-top:18px;display:flex;justify-content:space-between}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-item{margin:0 -8px;height:36px;padding:10px 8px;display:flex;align-items:center;cursor:pointer;border-radius:var(--devui-border-radius, 2px)}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-item svg{margin-right:12px}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-item svg path{fill:var(--devui-icon-text, #808080)}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-item d-checkbox{display:none}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-item d-checkbox.devui-option-item-active{display:block}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-item:hover d-checkbox{display:block}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-label{flex:1}.devui-option-panel .devui-option-panel-col-drag ::ng-deep d-checkbox .devui-checkbox-default-background{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.CheckBoxComponent, selector: "d-checkbox", inputs: ["name", "label", "cssClass", "color", "disabled", "isShowTitle", "title", "labelTemplate", "halfchecked", "showAnimation", "showGlowStyle", "beforeChange"], outputs: ["change"] }, { kind: "directive", type: i6.DropDownDirective, selector: "[dDropDown]", inputs: ["isOpen", "disabled", "showAnimation", "trigger", "closeScope", "closeOnMouseLeaveMenu", "autofocusToggleElement"], outputs: ["toggleEvent"], exportAs: ["d-dropdown"] }, { kind: "directive", type: i6.DropDownMenuDirective, selector: "[dDropDownMenu]", exportAs: ["d-dropdown-menu"] }, { kind: "directive", type: i6.DropDownToggleDirective, selector: "[dDropDownToggle]", inputs: ["toggleOnFocus", "autoFocus"], exportAs: ["d-dropdown-toggle"] }, { kind: "component", type: i6.DropDownAppendToBodyComponent, selector: "[dDropDown][appendToBody]", inputs: ["alignOrigin", "appendToBodyDirections", "appendToBodyScrollStrategy"], exportAs: ["d-dropdown-append-to-body"] }, { kind: "directive", type: i7.DraggableDirective, selector: "[dDraggable]", inputs: ["dragData", "dragHandle", "dragEffect", "dragScope", "dragHandleClass", "dragOverClass", "disabled", "enableDragFollow", "dragFollowOptions", "originPlaceholder", "dragIdentity", "dragItemParentName", "dragItemChildrenName"], outputs: ["dragStartEvent", "dragEvent", "dragEndEvent", "dropEndEvent"] }, { kind: "directive", type: i7.DroppableDirective, selector: "[dDroppable]", inputs: ["dragOverClass", "dropScope", "placeholderTag", "placeholderStyle", "placeholderText", "allowDropOnItem", "dragOverItemClass", "nestingTargetRect", "switchWhileCrossEdge", "defaultDropPosition", "dropSortCountSelector", "dropSortVirtualScrollOption"], outputs: ["dragEnterEvent", "dragOverEvent", "dragLeaveEvent", "dropEvent"] }, { kind: "directive", type: i7.SortableDirective, selector: "[dSortable]", inputs: ["dSortable", "dSortableZMode"] }, { kind: "component", type: i8.ToggleComponent, selector: "d-toggle", inputs: ["size", "color", "beforeChange", "checkedContent", "uncheckedContent", "checked", "disabled"], outputs: ["change"], exportAs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableOptionToggleComponent, decorators: [{
type: Component,
args: [{ selector: 'd-table-option-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"toggleMode === 'dropdown'\" class=\"btn-group\" dDropDown (toggleEvent)=\"onToggle($event)\" appendToBody>\n <div dDropDownToggle class=\"devui-option-toggle\">\n <ng-template [ngTemplateOutlet]=\"host\"></ng-template>\n </div>\n <div dDropDownMenu class=\"devui-option-panel\" (click)=\"$event.stopPropagation()\">\n <p class=\"devui-option-title\">{{ i18nText?.tableSetting }}</p>\n <div class=\"devui-option-panel-style-setting\" *ngIf=\"showStyleSetting\">\n <div class=\"devui-option-panel-style-header\">\n <p class=\"devui-option-subtitle\">{{ i18nText?.styles }}</p>\n <div class=\"devui-option-size-wrapper\" *ngIf=\"styleSetting.size !== undefined\">\n <div class=\"devui-option-size-card\" (click)=\"sizeStatus = 'xs'\" [ngClass]=\"{ 'devui-option-item-active': sizeStatus === 'xs' }\">\n <svg\n width=\"32px\"\n height=\"32px\"\n viewBox=\"0 0 32 32\"\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=\"M3.2,11.6 C3.6418278,11.6 4,11.9581722 4,12.4 L4,13.2 C4,13.6418278 3.6418278,14 3.2,14 L2.4,14 C1.9581722,14 1.6,13.6418278 1.6,13.2 L1.6,12.4 C1.6,11.9581722 1.9581722,11.6 2.4,11.6 L3.2,11.6 Z M13.6,11.6 C14.0418278,11.6 14.4,11.9581722 14.4,12.4 L14.4,13.2 C14.4,13.6418278 14.0418278,14 13.6,14 L5.6,14 C5.1581722,14 4.8,13.6418278 4.8,13.2 L4.8,12.4 C4.8,11.9581722 5.1581722,11.6 5.6,11.6 L13.6,11.6 Z M3.2,8.4 C3.6418278,8.4 4,8.7581722 4,9.2 L4,10 C4,10.4418278 3.6418278,10.8 3.2,10.8 L2.4,10.8 C1.9581722,10.8 1.6,10.4418278 1.6,10 L1.6,9.2 C1.6,8.7581722 1.9581722,8.4 2.4,8.4 L3.2,8.4 Z M13.6,8.4 C14.0418278,8.4 14.4,8.7581722 14.4,9.2 L14.4,10 C14.4,10.4418278 14.0418278,10.8 13.6,10.8 L5.6,10.8 C5.1581722,10.8 4.8,10.4418278 4.8,10 L4.8,9.2 C4.8,8.7581722 5.1581722,8.4 5.6,8.4 L13.6,8.4 Z M3.2,5.2 C3.6418278,5.2 4,5.5581722 4,6 L4,6.8 C4,7.2418278 3.6418278,7.6 3.2,7.6 L2.4,7.6 C1.9581722,7.6 1.6,7.2418278 1.6,6.8 L1.6,6 C1.6,5.5581722 1.9581722,5.2 2.4,5.2 L3.2,5.2 Z M13.6,5.2 C14.0418278,5.2 14.4,5.5581722 14.4,6 L14.4,6.8 C14.4,7.2418278 14.0418278,7.6 13.6,7.6 L5.6,7.6 C5.1581722,7.6 4.8,7.2418278 4.8,6.8 L4.8,6 C4.8,5.5581722 5.1581722,5.2 5.6,5.2 L13.6,5.2 Z M3.2,2 C3.6418278,2 4,2.3581722 4,2.8 L4,3.6 C4,4.0418278 3.6418278,4.4 3.2,4.4 L2.4,4.4 C1.9581722,4.4 1.6,4.0418278 1.6,3.6 L1.6,2.8 C1.6,2.3581722 1.9581722,2 2.4,2 L3.2,2 Z M13.6,2 C14.0418278,2 14.4,2.3581722 14.4,2.8 L14.4,3.6 C14.4,4.0418278 14.0418278,4.4 13.6,4.4 L5.6,4.4 C5.1581722,4.4 4.8,4.0418278 4.8,3.6 L4.8,2.8 C4.8,2.3581722 5.1581722,2 5.6,2 L13.6,2 Z\"\n fill=\"#BECCFA\"\n ></path>\n </g>\n </svg>\n <d-checkbox\n [isShowTitle]=\"false\"\n [ngModel]=\"sizeStatus === 'xs'\"\n (ngModelChange)=\"onCardActiveChanges($event, 'xs')\"\n (click)=\"$event.stopPropagation()\"\n ></d-checkbox>\n <p>{{ i18nText?.compact }}</p>\n </div>\n <div class=\"devui-option-size-card\" (click)=\"sizeStatus = 'sm'\" [ngClass]=\"{ 'devui-option-item-active': sizeStatus === 'sm' }\">\n <svg\n width=\"32px\"\n height=\"32px\"\n viewBox=\"0 0 32 32\"\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=\"M3.2,10.8 C3.6418278,10.8 4,11.1581722 4,11.6 L4,12.4 C4,12.8418278 3.6418278,13.2 3.2,13.2 L2.4,13.2 C1.9581722,13.2 1.6,12.8418278 1.6,12.4 L1.6,11.6 C1.6,11.1581722 1.9581722,10.8 2.4,10.8 L3.2,10.8 Z M13.6,10.8 C14.0418278,10.8 14.4,11.1581722 14.4,11.6 L14.4,12.4 C14.4,12.8418278 14.0418278,13.2 13.6,13.2 L5.6,13.2 C5.1581722,13.2 4.8,12.8418278 4.8,12.4 L4.8,11.6 C4.8,11.1581722 5.1581722,10.8 5.6,10.8 L13.6,10.8 Z M3.2,6.8 C3.6418278,6.8 4,7.1581722 4,7.6 L4,8.4 C4,8.8418278 3.6418278,9.2 3.2,9.2 L2.4,9.2 C1.9581722,9.2 1.6,8.8418278 1.6,8.4 L1.6,7.6 C1.6,7.1581722 1.9581722,6.8 2.4,6.8 L3.2,6.8 Z M13.6,6.8 C14.0418278,6.8 14.4,7.1581722 14.4,7.6 L14.4,8.4 C14.4,8.8418278 14.0418278,9.2 13.6,9.2 L5.6,9.2 C5.1581722,9.2 4.8,8.8418278 4.8,8.4 L4.8,7.6 C4.8,7.1581722 5.1581722,6.8 5.6,6.8 L13.6,6.8 Z M3.2,2.8 C3.6418278,2.8 4,3.1581722 4,3.6 L4,4.4 C4,4.8418278 3.6418278,5.2 3.2,5.2 L2.4,5.2 C1.9581722,5.2 1.6,4.8418278 1.6,4.4 L1.6,3.6 C1.6,3.1581722 1.9581722,2.8 2.4,2.8 L3.2,2.8 Z M13.6,2.8 C14.0418278,2.8 14.4,3.1581722 14.4,3.6 L14.4,4.4 C14.4,4.8418278 14.0418278,5.2 13.6,5.2 L5.6,5.2 C5.1581722,5.2 4.8,4.8418278 4.8,4.4 L4.8,3.6 C4.8,3.1581722 5.1581722,2.8 5.6,2.8 L13.6,2.8 Z\"\n fill=\"#BECCFA\"\n ></path>\n </g>\n </svg>\n <d-checkbox\n [isShowTitle]=\"false\"\n [ngModel]=\"sizeStatus === 'sm'\"\n (ngModelChange)=\"onCardActiveChanges($event, 'sm')\"\n (click)=\"$event.stopPropagation()\"\n ></d-checkbox>\n <p>{{ i18nText?.standard }}</p>\n </div>\n <div class=\"devui-option-size-card\" (click)=\"sizeStatus = 'md'\" [ngClass]=\"{ 'devui-option-item-active': sizeStatus === 'md' }\">\n <svg\n width=\"32px\"\n height=\"32px\"\n viewBox=\"0 0 32 32\"\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=\"M3.2,9.6 C3.6418278,9.6 4,9.9581722 4,10.4 L4,11.2 C4,11.6418278 3.6418278,12 3.2,12 L2.4,12 C1.9581722,12 1.6,11.6418278 1.6,11.2 L1.6,10.4 C1.6,9.9581722 1.9581722,9.6 2.4,9.6 L3.2,9.6 Z M13.6,9.6 C14.0418278,9.6 14.4,9.9581722 14.4,10.4 L14.4,11.2 C14.4,11.6418278 14.0418278,12 13.6,12 L5.6,12 C5.1581722,12 4.8,11.6418278 4.8,11.2 L4.8,10.4 C4.8,9.9581722 5.1581722,9.6 5.6,9.6 L13.6,9.6 Z M3.2,4 C3.6418278,4 4,4.3581722 4,4.8 L4,5.6 C4,6.0418278 3.6418278,6.4 3.2,6.4 L2.4,6.4 C1.9581722,6.4 1.6,6.0418278 1.6,5.6 L1.6,4.8 C1.6,4.3581722 1.9581722,4 2.4,4 L3.2,4 Z M13.6,4 C14.0418278,4 14.4,4.3581722 14.4,4.8 L14.4,5.6 C14.4,6.0418278 14.0418278,6.4 13.6,6.4 L5.6,6.4 C5.1581722,6.4 4.8,6.0418278 4.8,5.6 L4.8,4.8 C4.8,4.3581722 5.1581722,4 5.6,4 L13.6,4 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"#BECCFA\"\n ></path>\n </g>\n </svg>\n <d-checkbox\n [isShowTitle]=\"false\"\n [ngModel]=\"sizeStatus === 'md'\"\n (ngModelChange)=\"onCardActiveChanges($event, 'md')\"\n (click)=\"$event.stopPropagation()\"\n ></d-checkbox>\n <p>{{ i18nText?.loose }}</p>\n </div>\n </div>\n <div class=\"devui-option-form\" *ngIf=\"styleSetting.borderType !== undefined\">\n <span>{{ i18nText?.divideLine }}</span>\n <d-toggle [checked]=\"styleSetting.borderType === ''\" (change)=\"styleSettingChanges($event, 'border')\"></d-toggle>\n </div>\n\n <div class=\"devui-option-form\" *ngIf=\"styleSetting.striped !== undefined\">\n <span>{{ i18nText?.striped }}</span>\n <d-toggle [checked]=\"styleSetting.striped\" (change)=\"styleSettingChanges($event, 'striped')\"></d-toggle>\n </div>\n\n <div class=\"devui-option-form\" *ngIf=\"styleSetting.shadowType !== undefined\">\n <span>{{ i18nText?.tableShadow }}</span>\n <d-toggle [checked]=\"styleSetting.shadowType === 'normal'\" (change)=\"styleSettingChanges($event, 'shadow')\"></d-toggle>\n </div>\n </div>\n </div>\n <div class=\"devui-option-panel-col-drag\">\n <p class=\"devui-option-subtitle\">{{ i18nText?.colCanSelect }}</p>\n\n <div *ngIf=\"colSort\" dDroppable [switchWhileCrossEdge]=\"true\" [dropScope]=\"'drag-place'\" (dropEvent)=\"onDrop($event)\" dSortable>\n <div\n *ngFor=\"let data of _columnsData\"\n class=\"devui-option-drag-item\"\n [ngClass]=\"{ disabled: data.disabled }\"\n dDraggable\n [dragScope]=\"'drag-place'\"\n [dragHandleClass]=\"'devui-option-drag-handle'\"\n [dragData]=\"data\"\n [disabled]=\"data.disabled\"\n (click)=\"toggleActive(data)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"colItem\"\n [ngTemplateOutletContext]=\"{\n colsData: data,\n canDrag: true\n }\"\n ></ng-template>\n </div>\n </div>\n <div *ngIf=\"!colSort\">\n <div *ngFor=\"let data of _columnsData\" class=\"devui-option-drag-item\" (click)=\"toggleActive(data)\">\n <ng-template\n [ngTemplateOutlet]=\"colItem\"\n [ngTemplateOutletContext]=\"{\n colsData: data,\n canDrag: false\n }\"\n ></ng-template>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div *ngIf=\"toggleMode === 'modal'\" (click)=\"openModal()\">\n <ng-template [ngTemplateOutlet]=\"host\"></ng-template>\n</div>\n\n<ng-template #host>\n <ng-content></ng-content>\n</ng-template>\n<ng-template #colItem let-colsData=\"colsData\" let-canDrag=\"canDrag\">\n <svg\n *ngIf=\"canDrag\"\n class=\"devui-option-drag-handle\"\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 <g fill=\"#5170FF\" fill-rule=\"nonzero\">\n <path\n d=\"M5.5,0 C6.32842712,-1.3527075e-16 7,0.596953667 7,1.33333333 C7,2.069713 6.32842712,2.66666667 5.5,2.66666667 C4.67157288,2.66666667 4,2.069713 4,1.33333333 C4,0.596953667 4.67157288,1.3527075e-16 5.5,0 Z M5.5,4.44444444 C6.32842712,4.44444444 7,5.04139811 7,5.77777778 C7,6.51415744 6.32842712,7.11111111 5.5,7.11111111 C4.67157288,7.11111111 4,6.51415744 4,5.77777778 C4,5.04139811 4.67157288,4.44444444 5.5,4.44444444 Z M5.5,8.88888889 C6.32842712,8.88888889 7,9.48584256 7,10.2222222 C7,10.9586019 6.32842712,11.5555556 5.5,11.5555556 C4.67157288,11.5555556 4,10.9586019 4,10.2222222 C4,9.48584256 4.67157288,8.88888889 5.5,8.88888889 Z M5.5,13.3333333 C6.32842712,13.3333333 7,13.930287 7,14.6666667 C7,15.4030463 6.32842712,16 5.5,16 C4.67157288,16 4,15.4030463 4,14.6666667 C4,13.930287 4.67157288,13.3333333 5.5,13.3333333 Z M10.5,0 C11.3284271,-1.3527075e-16 12,0.596953667 12,1.33333333 C12,2.069713 11.3284271,2.66666667 10.5,2.66666667 C9.67157288,2.66666667 9,2.069713 9,1.33333333 C9,0.596953667 9.67157288,1.3527075e-16 10.5,0 Z M10.5,4.44444444 C11.3284271,4.44444444 12,5.04139811 12,5.77777778 C12,6.51415744 11.3284271,7.11111111 10.5,7.11111111 C9.67157288,7.11111111 9,6.51415744 9,5.77777778 C9,5.04139811 9.67157288,4.44444444 10.5,4.44444444 Z M10.5,8.88888889 C11.3284271,8.88888889 12,9.48584256 12,10.2222222 C12,10.9586019 11.3284271,11.5555556 10.5,11.5555556 C9.67157288,11.5555556 9,10.9586019 9,10.2222222 C9,9.48584256 9.67157288,8.88888889 10.5,8.88888889 Z M10.5,13.3333333 C11.3284271,13.3333333 12,13.930287 12,14.6666667 C12,15.4030463 11.3284271,16 10.5,16 C9.67157288,16 9,15.4030463 9,14.6666667 C9,13.930287 9.67157288,13.3333333 10.5,13.3333333 Z\"\n ></path>\n </g>\n </g>\n </svg>\n <span class=\"devui-option-drag-label\">{{ colsData.header }}</span>\n <d-checkbox\n [ngClass]=\"{ 'devui-option-item-active': colsData.checked }\"\n [isShowTitle]=\"false\"\n [(ngModel)]=\"colsData.checked\"\n [disabled]=\"colsData.disabled\"\n (click)=\"$event.stopPropagation(); emitData()\"\n ></d-checkbox>\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-option-toggle{cursor:pointer}.devui-option-panel{width:280px;padding:20px}.devui-option-panel .disabled{color:var(--devui-disabled-text, #c2c2c2)}.devui-option-panel .devui-option-title{font-size:var(--devui-font-size-card-title, 14px);color:var(--devui-text, #191919);font-weight:700;margin-bottom:16px}.devui-option-panel .devui-option-subtitle{color:var(--devui-text, #191919);font-size:var(--devui-font-size, 12px);font-weight:700;margin-bottom:12px}.devui-option-panel-col-select{display:inline-block}.devui-option-panel-style-setting{display:inline-block;width:100%;padding-bottom:20px}.devui-option-panel .devui-option-size-wrapper{display:flex;justify-content:space-between}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card{width:72px;height:72px;border-radius:var(--devui-border-radius-card, 6px);padding:8px 22px 8px 20px;box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-light-shadow, rgba(0, 0, 0, .08));cursor:pointer;position:relative;color:var(--devui-aide-text, #595959)}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card p{width:72px;margin-left:-20px;text-align:center}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card d-checkbox{position:absolute;right:4px;top:4px;display:none}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card.devui-option-item-active{box-shadow:var(--devui-shadow-length-hover, 0 8px 24px 0) var(--devui-hover-shadow, rgba(0, 0, 0, .16));font-weight:700;color:var(--devui-text, #191919)}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card.devui-option-item-active d-checkbox{display:block}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card:hover{box-shadow:var(--devui-shadow-length-hover, 0 8px 24px 0) var(--devui-hover-shadow, rgba(0, 0, 0, .16))}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card:hover d-checkbox{display:block}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card svg{transform:scale(2);transform-origin:0 0}.devui-option-panel .devui-option-size-wrapper .devui-option-size-card svg path{fill:var(--devui-waiting, #9dbdfc)}.devui-option-panel .devui-option-size-wrapper ::ng-deep d-checkbox .devui-checkbox-default-background{border-radius:50%}.devui-option-panel .devui-option-form{margin-top:18px;display:flex;justify-content:space-between}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-item{margin:0 -8px;height:36px;padding:10px 8px;display:flex;align-items:center;cursor:pointer;border-radius:var(--devui-border-radius, 2px)}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-item svg{margin-right:12px}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-item svg path{fill:var(--devui-icon-text, #808080)}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-item d-checkbox{display:none}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-item d-checkbox.devui-option-item-active{display:block}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-item:hover d-checkbox{display:block}.devui-option-panel .devui-option-panel-col-drag .devui-option-drag-label{flex:1}.devui-option-panel .devui-option-panel-col-drag ::ng-deep d-checkbox .devui-checkbox-default-background{border-radius:50%}\n"] }]
}], ctorParameters: () => [{ type: i1.ModalService }, { type: i0.ChangeDetectorRef }, { type: i2.I18nService }], propDecorators: { columnsData: [{
type: Input
}], showCategory: [{
type: Input
}], colSort: [{
type: Input
}], styleSetting: [{
type: Input
}], toggleMode: [{
type: Input
}], modalWidth: [{
type: Input
}], colChanges: [{
type: Output
}], styleChanges: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtb3B0aW9uLXRvZ2dsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9kZXZ1aS9kYXRhLXRhYmxlL3RhYmxlLW9wdGlvbi10b2dnbGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vZGV2dWkvZGF0YS10YWJsZS90YWJsZS1vcHRpb24tdG9nZ2xlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxpQkFBaUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBcUIsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RJLE9BQU8sRUFBaUIsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM5QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBRXRDLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDOzs7Ozs7Ozs7O0FBdUIzRSxNQUFNLE9BQU8sMEJBQTBCO0lBQ3JDLElBQWEsV0FBVyxDQUFDLEtBQXFCO1FBQzVDLElBQUksQ0FBQyxZQUFZLEdBQUcsU0FBUyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7SUFjRCxJQUFJLGdCQUFnQjtRQUNsQixPQUFPLENBQUMsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQyxNQUFNLENBQUM7SUFDakQsQ0FBQztJQUVELElBQUksVUFBVTtRQUNaLE9BQVEsSUFBSSxDQUFDLFlBQW9CLEVBQUUsSUFBSSxDQUFDO0lBQzFDLENBQUM7SUFFRCxJQUFJLFVBQVUsQ0FBQyxLQUFLO1FBQ2xCLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLFlBQVksR0FBRyxFQUFFLENBQUM7UUFDekIsQ0FB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LEVBQUUsR0FBRyxFQUFFO29CQUNaLE9BQU8sQ0FBQyxhQUFhLENBQUMsSUFBSSxFQUFFLENBQUM7Z0JBQy9CLENBQUM7Z0JBQ0QsUUFBUSxFQUFFLENBQUMsV0FBVyxFQUFFLFlBQVksRUFBRSxFQUFFO29CQUN0QyxJQUFJLENBQUMsWUFBWSxHQUFHLFdBQVcsQ0FBQztvQkFDaEMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7b0JBQ2xDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO29CQUNyQyxPQUFPLENBQUMsYUFBYSxDQUFDLElBQUksRUFBRSxDQUFDO29CQUM3QixJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxDQUFDO2dCQUMzQixDQUFDO2FBQ0Y7U0FDRixDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7WUFDMUIsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3RDLENBQUM7SUFDSCxDQUFDOytHQXRJVSwwQkFBMEI7bUdBQTFCLDBCQUEwQiw4U0M1QnZDLDQrWEE4S0E7OzRGRGxKYSwwQkFBMEI7a0JBTnRDLFNBQVM7K0JBQ0UsdUJBQXVCLG1CQUdoQix1QkFBdUIsQ0FBQyxNQUFNOzJJQUdsQyxXQUFXO3NCQUF2QixLQUFLO2dCQUdHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUVJLFVBQVU7c0JBQW5CLE1BQU07Z0JBQ0csWUFBWTtzQkFBckIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEkxOG5JbnRlcmZhY2UsIEkxOG5TZXJ2aWNlIH0gZnJvbSAnbmctZGV2dWkvaTE4bic7XHJcbmltcG9ydCB7IE1vZGFsU2VydmljZSB9IGZyb20gJ25nLWRldnVpL21vZGFsJztcclxuaW1wb3J0IHsgY2xvbmVEZWVwIH0gZnJvbSAnbG9kYXNoLWVzJztcclxuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IFRhYmxlT3B0aW9uTW9kYWxDb21wb25lbnQgfSBmcm9tICcuL3RhYmxlLW9wdGlvbi1tb2RhbC5jb21wb25lbnQnO1xyXG5cclxuZXhwb3J0IGludGVyZmFjZSBDb2xEYXRhIHtcclxuICBoZWFkZXI6IHN0cmluZztcclxuICBjaGVja2VkOiBib29sZWFuO1xyXG4gIGNhdGVnb3J5Pzogc3RyaW5nO1xyXG4gIGRpc2FibGVkPzogYm9vbGVhbjtcclxuICBbcHJvcDogc3RyaW5nXTogYW55O1xyXG59XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIFRhYmxlU3R5bGVEYXRhIHtcclxuICBzaXplPzogJ3hzJyB8ICdzbScgfCAnbWQnO1xyXG4gIGJvcmRlclR5cGU/OiAnJyB8ICdib3JkZXJsZXNzJztcclxuICBzdHJpcGVkPzogYm9vbGVhbjtcclxuICBzaGFkb3dUeXBlPzogJ2VtYmVkJyB8ICdub3JtYWwnO1xyXG59XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2QtdGFibGUtb3B0aW9uLXRvZ2dsZScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3RhYmxlLW9wdGlvbi10b2dnbGUuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3RhYmxlLW9wdGlvbi10b2dnbGUuY29tcG9uZW50LnNjc3MnXSxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxufSlcclxuZXhwb3J0IGNsYXNzIFRhYmxlT3B0aW9uVG9nZ2xlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xyXG4gIEBJbnB1dCgpIHNldCBjb2x1bW5zRGF0YSh2YWx1ZTogQXJyYXk8Q29sRGF0YT4pIHtcclxuICAgIHRoaXMuX2NvbHVtbnNEYXRhID0gY2xvbmVEZWVwKHZhbHVlKTtcclxuICB9XHJcbiAgQElucHV0KCkgc2hvd0NhdGVnb3J5OiBib29sZWFuO1xyXG4gIEBJbnB1