ng-devui
Version:
DevUI components based on Angular
110 lines • 76.5 kB
JavaScript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "ng-devui/checkbox";
import * as i4 from "ng-devui/button";
import * as i5 from "ng-devui/dragdrop";
import * as i6 from "ng-devui/toggle";
import * as i7 from "ng-devui/search";
export class TableOptionModalComponent {
get showStyleSetting() {
return !!Object.keys(this.data.styleSetting).length;
}
get selectedCols() {
return this._columnsData.filter((t) => t.checked);
}
constructor(cdr) {
this.cdr = cdr;
this._columnsData = [];
this.columnsCache = [];
this._styleSetting = {};
this.filterKey = '';
this.allChecked = false;
this.halfCheck = false;
}
judgeNameFIlter(name) {
return name.toUpperCase().includes(this.filterKey.toUpperCase());
}
onCheckedChanges() {
this.allChecked = true;
this.halfCheck = false;
this.columnsCache.forEach((t) => {
if (!t.checked) {
this.allChecked = false;
}
if (t.checked) {
this.halfCheck = true;
}
});
this.halfCheck = this.halfCheck && !this.allChecked ? true : false;
}
onAllCheckChanges(checked) {
this.halfCheck = false;
this.allChecked = checked;
this.columnsCache.forEach((t) => {
if (t.disabled) {
return;
}
t.checked = checked;
});
}
onSearch(value) {
this.filterKey = value;
this.cdr.detectChanges();
}
ngOnInit() {
this._columnsData = this.data.columnsData;
this.columnsCache = [...this._columnsData];
this._styleSetting = this.data.styleSetting;
this.onCheckedChanges();
}
searchIndex(col) {
return this.data.columnsData.findIndex((t) => t.header === col?.header);
}
onDrop(e) {
let index = this.searchIndex(this.selectedCols[e.dropIndex]);
const fromIndex = this.searchIndex(this.selectedCols[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(this._columnsData.splice(fromIndex, 1)[0]);
}
}
onCardActiveChanges(active, status) {
this._styleSetting.size = active ? status : 'none';
}
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:
}
}
close() {
this.data.onClose();
}
ensure() {
this.data.onEnsure(this._columnsData, this._styleSetting);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableOptionModalComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableOptionModalComponent, selector: "d-table-option-modal", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"devui-option-modal\">\n <div class=\"devui-option-modal-body\">\n <div class=\"devui-option-modal-selected-col\">\n <p class=\"devui-option-title\">{{ data.i18nText?.tableSetting }}</p>\n <d-search style=\"width: 100%\" [isKeyupSearch]=\"true\" (searchFn)=\"onSearch($event)\"></d-search>\n\n <p class=\"devui-option-subtitle\" style=\"margin-top: 16px\">{{ data.i18nText?.colCanSelect }}</p>\n <d-checkbox\n *ngIf=\"!filterKey\"\n [label]=\"'All Check'\"\n [isShowTitle]=\"true\"\n [ngModel]=\"allChecked\"\n [halfchecked]=\"halfCheck\"\n (ngModelChange)=\"onAllCheckChanges($event)\"\n >\n </d-checkbox>\n <ng-container *ngFor=\"let data of columnsCache\">\n <d-checkbox\n *ngIf=\"judgeNameFIlter(data.header)\"\n [label]=\"data.header\"\n [isShowTitle]=\"true\"\n [(ngModel)]=\"data.checked\"\n [disabled]=\"data.disabled\"\n (ngModelChange)=\"onCheckedChanges()\"\n >\n </d-checkbox>\n </ng-container>\n </div>\n\n <div class=\"devui-option-modal-style\">\n <div class=\"devui-option-panel\">\n <div class=\"devui-option-panel-style-setting\" *ngIf=\"showStyleSetting\">\n <div class=\"devui-option-panel-style-header\">\n <p class=\"devui-option-subtitle\">{{ data.i18nText?.styles }}</p>\n <div class=\"devui-option-size-wrapper\" *ngIf=\"data.styleSetting.size !== undefined\">\n <div\n class=\"devui-option-size-card\"\n (click)=\"_styleSetting.size = 'xs'\"\n [ngClass]=\"{ 'devui-option-item-active': _styleSetting.size === 'xs' }\"\n >\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]=\"_styleSetting.size === 'xs'\"\n (ngModelChange)=\"onCardActiveChanges($event, 'xs')\"\n (click)=\"$event.stopPropagation()\"\n ></d-checkbox>\n <p>{{ data.i18nText?.compact }}</p>\n </div>\n <div\n class=\"devui-option-size-card\"\n (click)=\"_styleSetting.size = 'sm'\"\n [ngClass]=\"{ 'devui-option-item-active': _styleSetting.size === 'sm' }\"\n >\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]=\"_styleSetting.size === 'sm'\"\n (ngModelChange)=\"onCardActiveChanges($event, 'sm')\"\n (click)=\"$event.stopPropagation()\"\n ></d-checkbox>\n <p>{{ data.i18nText?.standard }}</p>\n </div>\n <div\n class=\"devui-option-size-card\"\n (click)=\"_styleSetting.size = 'md'\"\n [ngClass]=\"{ 'devui-option-item-active': _styleSetting.size === 'md' }\"\n >\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]=\"_styleSetting.size === 'md'\"\n (ngModelChange)=\"onCardActiveChanges($event, 'md')\"\n (click)=\"$event.stopPropagation()\"\n ></d-checkbox>\n <p>{{ data.i18nText?.loose }}</p>\n </div>\n </div>\n <div class=\"devui-option-form\" *ngIf=\"data.styleSetting.borderType !== undefined\">\n <span>{{ data.i18nText?.divideLine }}</span>\n <d-toggle [checked]=\"data.styleSetting.borderType === ''\" (change)=\"styleSettingChanges($event, 'border')\"></d-toggle>\n </div>\n\n <div class=\"devui-option-form\" *ngIf=\"data.styleSetting.striped !== undefined\">\n <span>{{ data.i18nText?.striped }}</span>\n <d-toggle [checked]=\"data.styleSetting.striped\" (change)=\"styleSettingChanges($event, 'striped')\"></d-toggle>\n </div>\n\n <div class=\"devui-option-form\" *ngIf=\"data.styleSetting.shadowType !== undefined\">\n <span>{{ data.i18nText?.tableShadow }}</span>\n <d-toggle [checked]=\"data.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\">{{ data.i18nText?.colSelected }}</p>\n\n <div\n *ngIf=\"data.colSort\"\n dDroppable\n [switchWhileCrossEdge]=\"true\"\n [dropScope]=\"'drag-place'\"\n (dropEvent)=\"onDrop($event)\"\n dSortable\n >\n <div\n *ngFor=\"let data of selectedCols\"\n class=\"devui-option-drag-item\"\n [ngClass]=\"{ disabled: data.disabled }\"\n dDraggable\n [disabled]=\"data.disabled\"\n [dragScope]=\"'drag-place'\"\n [dragHandleClass]=\"'devui-option-drag-handle'\"\n [dragData]=\"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=\"!data.colSort\">\n <div *ngFor=\"let data of selectedCols\" class=\"devui-option-drag-item\">\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 </div>\n <div class=\"devui-option-modal-footer\">\n <d-button bsStyle=\"primary\" (click)=\"ensure()\" bsSize=\"lg\" style=\"margin-right: 8px\"> {{ data.i18nText?.ensure }} </d-button>\n <d-button bsStyle=\"common\" (click)=\"close()\" bsSize=\"lg\"> {{ data.i18nText?.cancel }} </d-button>\n </div>\n</div>\n\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</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-modal{position:relative}.devui-option-modal-body{height:550px;display:flex}.devui-option-modal-body .devui-option-modal-selected-col{flex:1;padding:20px;overflow-y:auto}.devui-option-modal-body .devui-option-modal-selected-col d-checkbox{display:inline-block;width:30%;height:36px;margin-right:8px}.devui-option-modal-body .devui-option-modal-selected-col d-checkbox::ng-deep label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devui-option-modal-body .devui-option-modal-style{width:280px;background:var(--devui-global-bg, #f5f5f5);border-radius:0 var(--devui-border-radius-card, 6px) 0 0}.devui-option-modal-body .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-modal-body .devui-option-subtitle{color:var(--devui-text, #191919);font-size:var(--devui-font-size, 12px);font-weight:700;margin-bottom:12px}.devui-option-modal-footer{height:72px;text-align:center;padding:16px 0;position:relative}.devui-option-modal-footer:before{content:\"\";width:100%;height:20px;opacity:.04;position:absolute;top:-20px;left:0;background-image:linear-gradient(180deg,transparent,var(--devui-base-bg-dark, #000000))}.devui-option-modal .devui-option-panel{padding-bottom:0;height:100%;flex-direction:column;display:flex}.devui-option-modal .devui-option-panel .devui-option-panel-col-drag{flex:1;overflow:hidden;scrollbar-gutter:stable}.devui-option-modal .devui-option-panel .devui-option-panel-col-drag:hover{overflow-y:auto}.devui-option-modal .disabled{color:var(--devui-disabled-text, #c2c2c2)}\n", ".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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.CheckBoxComponent, selector: "d-checkbox", inputs: ["name", "label", "cssClass", "color", "disabled", "isShowTitle", "title", "labelTemplate", "halfchecked", "showAnimation", "showGlowStyle", "beforeChange"], outputs: ["change"] }, { kind: "component", type: i4.ButtonComponent, selector: "d-button", inputs: ["id", "type", "bsStyle", "shape", "bsSize", "bsPosition", "bordered", "icon", "disabled", "showLoading", "width", "autofocus", "loadingTemplateRef"], outputs: ["btnClick"] }, { kind: "directive", type: i5.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: i5.DroppableDirective, selector: "[dDroppable]", inputs: ["dragOverClass", "dropScope", "placeholderTag", "placeholderStyle", "placeholderText", "allowDropOnItem", "dragOverItemClass", "nestingTargetRect", "switchWhileCrossEdge", "defaultDropPosition", "dropSortCountSelector", "dropSortVirtualScrollOption"], outputs: ["dragEnterEvent", "dragOverEvent", "dragLeaveEvent", "dropEvent"] }, { kind: "directive", type: i5.SortableDirective, selector: "[dSortable]", inputs: ["dSortable", "dSortableZMode"] }, { kind: "component", type: i6.ToggleComponent, selector: "d-toggle", inputs: ["size", "color", "beforeChange", "checkedContent", "uncheckedContent", "checked", "disabled"], outputs: ["change"], exportAs: ["toggle"] }, { kind: "component", type: i7.SearchComponent, selector: "d-search", inputs: ["size", "placeholder", "maxLength", "isKeyupSearch", "delay", "disabled", "cssClass", "iconPosition", "noBorder", "autoFocus", "styleType", "showGlowStyle"], outputs: ["searchFn"], exportAs: ["search"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableOptionModalComponent, decorators: [{
type: Component,
args: [{ selector: 'd-table-option-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"devui-option-modal\">\n <div class=\"devui-option-modal-body\">\n <div class=\"devui-option-modal-selected-col\">\n <p class=\"devui-option-title\">{{ data.i18nText?.tableSetting }}</p>\n <d-search style=\"width: 100%\" [isKeyupSearch]=\"true\" (searchFn)=\"onSearch($event)\"></d-search>\n\n <p class=\"devui-option-subtitle\" style=\"margin-top: 16px\">{{ data.i18nText?.colCanSelect }}</p>\n <d-checkbox\n *ngIf=\"!filterKey\"\n [label]=\"'All Check'\"\n [isShowTitle]=\"true\"\n [ngModel]=\"allChecked\"\n [halfchecked]=\"halfCheck\"\n (ngModelChange)=\"onAllCheckChanges($event)\"\n >\n </d-checkbox>\n <ng-container *ngFor=\"let data of columnsCache\">\n <d-checkbox\n *ngIf=\"judgeNameFIlter(data.header)\"\n [label]=\"data.header\"\n [isShowTitle]=\"true\"\n [(ngModel)]=\"data.checked\"\n [disabled]=\"data.disabled\"\n (ngModelChange)=\"onCheckedChanges()\"\n >\n </d-checkbox>\n </ng-container>\n </div>\n\n <div class=\"devui-option-modal-style\">\n <div class=\"devui-option-panel\">\n <div class=\"devui-option-panel-style-setting\" *ngIf=\"showStyleSetting\">\n <div class=\"devui-option-panel-style-header\">\n <p class=\"devui-option-subtitle\">{{ data.i18nText?.styles }}</p>\n <div class=\"devui-option-size-wrapper\" *ngIf=\"data.styleSetting.size !== undefined\">\n <div\n class=\"devui-option-size-card\"\n (click)=\"_styleSetting.size = 'xs'\"\n [ngClass]=\"{ 'devui-option-item-active': _styleSetting.size === 'xs' }\"\n >\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]=\"_styleSetting.size === 'xs'\"\n (ngModelChange)=\"onCardActiveChanges($event, 'xs')\"\n (click)=\"$event.stopPropagation()\"\n ></d-checkbox>\n <p>{{ data.i18nText?.compact }}</p>\n </div>\n <div\n class=\"devui-option-size-card\"\n (click)=\"_styleSetting.size = 'sm'\"\n [ngClass]=\"{ 'devui-option-item-active': _styleSetting.size === 'sm' }\"\n >\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]=\"_styleSetting.size === 'sm'\"\n (ngModelChange)=\"onCardActiveChanges($event, 'sm')\"\n (click)=\"$event.stopPropagation()\"\n ></d-checkbox>\n <p>{{ data.i18nText?.standard }}</p>\n </div>\n <div\n class=\"devui-option-size-card\"\n (click)=\"_styleSetting.size = 'md'\"\n [ngClass]=\"{ 'devui-option-item-active': _styleSetting.size === 'md' }\"\n >\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]=\"_styleSetting.size === 'md'\"\n (ngModelChange)=\"onCardActiveChanges($event, 'md')\"\n (click)=\"$event.stopPropagation()\"\n ></d-checkbox>\n <p>{{ data.i18nText?.loose }}</p>\n </div>\n </div>\n <div class=\"devui-option-form\" *ngIf=\"data.styleSetting.borderType !== undefined\">\n <span>{{ data.i18nText?.divideLine }}</span>\n <d-toggle [checked]=\"data.styleSetting.borderType === ''\" (change)=\"styleSettingChanges($event, 'border')\"></d-toggle>\n </div>\n\n <div class=\"devui-option-form\" *ngIf=\"data.styleSetting.striped !== undefined\">\n <span>{{ data.i18nText?.striped }}</span>\n <d-toggle [checked]=\"data.styleSetting.striped\" (change)=\"styleSettingChanges($event, 'striped')\"></d-toggle>\n </div>\n\n <div class=\"devui-option-form\" *ngIf=\"data.styleSetting.shadowType !== undefined\">\n <span>{{ data.i18nText?.tableShadow }}</span>\n <d-toggle [checked]=\"data.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\">{{ data.i18nText?.colSelected }}</p>\n\n <div\n *ngIf=\"data.colSort\"\n dDroppable\n [switchWhileCrossEdge]=\"true\"\n [dropScope]=\"'drag-place'\"\n (dropEvent)=\"onDrop($event)\"\n dSortable\n >\n <div\n *ngFor=\"let data of selectedCols\"\n class=\"devui-option-drag-item\"\n [ngClass]=\"{ disabled: data.disabled }\"\n dDraggable\n [disabled]=\"data.disabled\"\n [dragScope]=\"'drag-place'\"\n [dragHandleClass]=\"'devui-option-drag-handle'\"\n [dragData]=\"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=\"!data.colSort\">\n <div *ngFor=\"let data of selectedCols\" class=\"devui-option-drag-item\">\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 </div>\n <div class=\"devui-option-modal-footer\">\n <d-button bsStyle=\"primary\" (click)=\"ensure()\" bsSize=\"lg\" style=\"margin-right: 8px\"> {{ data.i18nText?.ensure }} </d-button>\n <d-button bsStyle=\"common\" (click)=\"close()\" bsSize=\"lg\"> {{ data.i18nText?.cancel }} </d-button>\n </div>\n</div>\n\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</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-modal{position:relative}.devui-option-modal-body{height:550px;display:flex}.devui-option-modal-body .devui-option-modal-selected-col{flex:1;padding:20px;overflow-y:auto}.devui-option-modal-body .devui-option-modal-selected-col d-checkbox{display:inline-block;width:30%;height:36px;margin-right:8px}.devui-option-modal-body .devui-option-modal-selected-col d-checkbox::ng-deep label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devui-option-modal-body .devui-option-modal-style{width:280px;background:var(--devui-global-bg, #f5f5f5);border-radius:0 var(--devui-border-radius-card, 6px) 0 0}.devui-option-modal-body .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-modal-body .devui-option-subtitle{color:var(--devui-text, #191919);font-size:var(--devui-font-size, 12px);font-weight:700;margin-bottom:12px}.devui-option-modal-footer{height:72px;text-align:center;padding:16px 0;position:relative}.devui-option-modal-footer:before{content:\"\";width:100%;height:20px;opacity:.04;position:absolute;top:-20px;left:0;background-image:linear-gradient(180deg,transparent,var(--devui-base-bg-dark, #000000))}.devui-option-modal .devui-option-panel{padding-bottom:0;height:100%;flex-direction:column;display:flex}.devui-option-modal .devui-option-panel .devui-option-panel-col-drag{flex:1;overflow:hidden;scrollbar-gutter:stable}.devui-option-modal .devui-option-panel .devui-option-panel-col-drag:hover{overflow-y:auto}.devui-option-modal .disabled{color:var(--devui-disabled-text, #c2c2c2)}\n", ".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: i0.ChangeDetectorRef }], propDecorators: { data: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtb3B0aW9uLW1vZGFsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2RldnVpL2RhdGEtdGFibGUvdGFibGUtb3B0aW9uLW1vZGFsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uL2RldnVpL2RhdGEtdGFibGUvdGFibGUtb3B0aW9uLW1vZGFsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxpQkFBaUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7Ozs7Ozs7QUFTckcsTUFBTSxPQUFPLHlCQUF5QjtJQUdwQyxJQUFJLGdCQUFnQjtRQUNsQixPQUFPLENBQUMsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUMsTUFBTSxDQUFDO0lBQ3RELENBQUM7SUFFRCxJQUFJLFlBQVk7UUFDZCxPQUFPLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDcEQsQ0FBQztJQVdELFlBQW9CLEdBQXNCO1FBQXRCLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBVDFDLGlCQUFZLEdBQW1CLEVBQUUsQ0FBQztRQUNsQyxpQkFBWSxHQUFtQixFQUFFLENBQUM7UUFDbEMsa0JBQWEsR0FBUSxFQUFFLENBQUM7UUFFeEIsY0FBUyxHQUFHLEVBQUUsQ0FBQztRQUVmLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsY0FBUyxHQUFHLEtBQUssQ0FBQztJQUUyQixDQUFDO0lBRTlDLGVBQWUsQ0FBQyxJQUFZO1FBQzFCLE9BQU8sSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLFdBQVcsRUFBRSxDQUFDLENBQUM7SUFDbkUsQ0FBQztJQUVELGdCQUFnQjtRQUNkLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxTQUFTL