sdk-datagrid
Version:
Customizable (Angular) datagrid with data options for manipulation, and charts for visualization.
492 lines (486 loc) • 306 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, ViewEncapsulation, Component, ViewChild, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3$1 from 'ng-dynamic-component';
import { DynamicModule } from 'ng-dynamic-component';
import { SDKLoadingModule } from 'sdk-loading';
import * as i3 from 'sdk-message';
import { SDKMessageModule } from 'sdk-message';
import * as i2 from 'sdk-select';
import { SDKSelectModule } from 'sdk-select';
import * as i5 from 'sdk-tabs';
import { SDKTabsModule } from 'sdk-tabs';
import * as i4 from 'sdk-textbox';
import { SDKTextboxModule } from 'sdk-textbox';
import * as i2$1 from '@angular/cdk/drag-drop';
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
import * as i1$1 from '@angular/router';
var Sorts;
(function (Sorts) {
Sorts["ASC"] = "asc";
Sorts["DESC"] = "desc";
})(Sorts || (Sorts = {}));
class Clone {
static deepCopy(source) {
if (Array.isArray(source)) {
return this.copyArray(source);
}
if (source instanceof Date) {
return this.copyDate(source);
}
if (source && typeof source === 'object') {
return this.copyObject(source);
}
return source;
}
static copyArray(source) {
return source.map(item => this.deepCopy(item));
}
static copyDate(source) {
return new Date(source.getTime());
}
static copyObject(source) {
const copy = Object.create(Object.getPrototypeOf(source));
Object.getOwnPropertyNames(source).forEach(prop => {
const descriptor = Object.getOwnPropertyDescriptor(source, prop);
if (descriptor) {
Object.defineProperty(copy, prop, descriptor);
copy[prop] = this.deepCopy(source[prop]);
}
});
return copy;
}
}
class SDKDataGridSettings {
constructor() {
this.Name = "";
this.Columns = [];
this.CustomFilters = [];
this.Active = false;
}
}
class SDKDataGridMessage {
constructor() {
this.Title = "";
this.Text = "";
this.OKText = "";
this.CancelText = "";
this.OK = () => { };
this.Cancel = () => { };
}
}
class SDKDataGridSettingsOptionComponent {
constructor() {
/**************************************************************************
* Input/Output Parameters
**************************************************************************/
this.settings = [];
this.columns = [];
this.customFilters = [];
this.closeEvent = new EventEmitter();
this.saveEvent = new EventEmitter();
this.applyEvent = new EventEmitter();
/**************************************************************************
* Component Variables
**************************************************************************/
this.activeSetting = new SDKDataGridSettings();
this.settingsList = [];
this.name = "";
this.viewerText = "";
this.msg = "";
this.error = "";
this.activeIndex = 0;
this._settings = [];
this._columns = [];
this._customFilters = [];
/**************************************************************************
* Message Variables
**************************************************************************/
this.showMessage = false;
this.message = new SDKDataGridMessage();
}
ngOnChanges(_args) {
this._settings = Clone.deepCopy(this.settings);
this._columns = Clone.deepCopy(this.columns);
this._customFilters = Clone.deepCopy(this.customFilters);
this.initialze();
}
/**************************************************************************
* Setup Methods
**************************************************************************/
initialze() {
this.settingsList = this._settings;
// Reset current settings based on columns and custom filters.
let currentSetting = {
Name: "[Current Settings]",
Columns: this._columns,
CustomFilters: this._customFilters,
Active: false
};
let ndx = this.settingsList.findIndex((settings) => settings.Name === "[Current Settings]");
if (ndx === -1) {
this.settingsList.unshift(currentSetting);
}
else {
this.settingsList[ndx] = currentSetting;
}
// Pre-load any settings that are flagged as 'active'.
let activeNdx = this.settingsList.findIndex((setting) => setting.Active === true);
if (activeNdx > -1) {
this.activeIndex = activeNdx;
}
this.activeSetting = this.settingsList[this.activeIndex];
this.name = this.activeSetting.Name;
this.validateSettings();
this.setViewerText();
}
saveSetting() {
this.settingsList[this.activeIndex].Name = this.name;
if (this.activeIndex === 0) {
let currentSetting = Clone.deepCopy(this.settingsList[this.activeIndex]);
currentSetting.Name = "[Current Settings]";
this.settingsList.unshift(currentSetting);
}
this.resetProperties();
this.activeIndex = this.settingsList.findIndex((setting) => setting.Name === this.name) + 1;
this.saveEvent.emit(this.settingsList);
this.msg = "Settings have been saved.";
}
sortSettings() {
this.settingsList.sort((a, b) => {
const aName = a.Name.toUpperCase();
const bName = b.Name.toUpperCase();
if (aName > bName) {
return 1;
}
if (aName < bName) {
return -1;
}
return 0;
});
}
resetProperties() {
this.sortSettings();
this.settingsList.forEach((setting) => {
setting.Active = false;
});
}
setViewerText() {
setTimeout(() => {
this.viewerText = `Columns:<br />`;
this.viewerText += "<ul>";
this.activeSetting.Columns.filter((column) => !column.isAction).forEach((column) => {
this.viewerText += `<li>${(column.FriendlyName !== "") ? column.FriendlyName : (column.DisplayName !== "") ? column.DisplayName : column.Name} (${column.isVisible ? "visible" : "hidden"})</li>`;
});
this.viewerText += "</ul>";
this.viewerText += `<br />Sorts:<br />`;
this.viewerText += "<ul>";
this.activeSetting.Columns.forEach((column) => {
if (column.Sort) {
this.viewerText += `<li>${(column.DisplayName !== "") ? column.DisplayName : column.Name} (${column.Sort.direction})</li>`;
}
});
this.viewerText += "</ul>";
this.viewerText += `<br />Filters:<br />`;
this.viewerText += "<ul>";
this.activeSetting.CustomFilters.forEach((filter) => {
if (filter.Filter) {
if (filter.Filter.operation) {
this.viewerText += `<li>${(filter.DisplayName !== "") ? filter.DisplayName : filter.Name} (${filter.Filter.operation}: ${filter.Filter.value})</li>`;
}
else {
this.viewerText += `<li>${(filter.DisplayName !== "") ? filter.DisplayName : filter.Name} (${filter.Filter.value})</li>`;
}
}
});
this.activeSetting.Columns.forEach((column) => {
if (column.Filter) {
if (column.Filter.operation) {
this.viewerText += `<li>${(column.DisplayName !== "") ? column.DisplayName : column.Name} (${column.Filter.operation}: ${column.Filter.value})</li>`;
}
else {
this.viewerText += `<li>${(column.DisplayName !== "") ? column.DisplayName : column.Name} (${column.Filter.value})</li>`;
}
}
});
this.viewerText += "</ul>";
this.viewerText += `<br />Formulas:<br />`;
this.viewerText += "<ul>";
this.activeSetting.Columns.forEach((column) => {
if (column.Formulas) {
column.Formulas.forEach((formula) => {
this.viewerText += `<li>${(column.DisplayName !== "") ? column.DisplayName : column.Name} (${formula.Operation}: #.${formula.Format})</li>`;
});
}
});
this.viewerText += "</ul>";
}, 10);
}
validateSettings() {
let issue = false;
this.error = "";
if (this._columns.length !== this.activeSetting.Columns.length) {
issue = true;
}
this.activeSetting.Columns.forEach((column) => {
let ndx = this._columns.findIndex((c) => c.Name === column.Name);
if (ndx === -1) {
issue = true;
column.FriendlyName = column.Name + '<span> <-- Does NOT exist!</span>';
}
});
this._columns.forEach((column) => {
let ndx = this.activeSetting.Columns.findIndex((c) => c.Name === column.Name);
if (ndx === -1) {
issue = true;
this.activeSetting.Columns.push({
Name: column.Name,
DisplayName: "",
FriendlyName: column.Name + '<span> <-- Missing!</span>',
isVisible: column.isVisible
});
}
});
if (this._customFilters.length !== this.activeSetting.CustomFilters.length) {
issue = true;
}
this.activeSetting.CustomFilters.forEach((filter) => {
let ndx = this._customFilters.findIndex((f) => f.Name === filter.Name);
if (ndx === -1) {
issue = true;
filter.DisplayName = filter.Name + '<span> <-- Does NOT exist!</span>';
}
});
this._customFilters.forEach((filter) => {
let ndx = this.activeSetting.CustomFilters.findIndex((f) => f.Name === filter.Name);
if (ndx === -1) {
issue = true;
this.activeSetting.CustomFilters.push({
Name: filter.Name,
DisplayName: filter.Name = '<span> <-- Missing!</span>',
Type: filter.Type,
Filter: {
operation: [],
value: ""
}
});
}
});
if (issue) {
this.error = "There are issues with these settings!";
}
}
/**************************************************************************
* User Action Methods
**************************************************************************/
setName(event) {
this.name = event.trim();
}
save() {
if (this.name !== "") {
let dup = this.settingsList.findIndex((setting) => setting.Name === this.name);
if (dup > -1) {
this.message = {
Title: "Duplicate Settings",
Text: `'${this.name}' already exists. Would you like to override it?`,
OKText: "YES",
CancelText: "NO",
OK: () => {
this.showMessage = false;
this.settingsList.splice(dup, 1);
this.saveSetting();
},
Cancel: () => {
this.showMessage = false;
}
};
this.showMessage = true;
}
else {
this.saveSetting();
}
}
}
remove() {
if (this.activeSetting.Name !== "[Current Settings]") {
this.message = {
Title: "Delete Settings",
Text: `Are you sure you want to delete the '${this.name}' settings?`,
OKText: "YES",
CancelText: "NO",
OK: () => {
this.showMessage = false;
this.settingsList.splice(this.activeIndex, 1);
this.activeIndex = 0;
this.saveEvent.emit(this.settingsList);
this.msg = "Settings have been deleted.";
},
Cancel: () => {
this.showMessage = false;
}
};
this.showMessage = true;
}
}
load(event) {
this.activeIndex = this.settingsList.findIndex((setting) => setting.Name === event[0].Name);
this.activeSetting = this.settingsList[this.activeIndex];
this.name = this.activeSetting.Name;
this.validateSettings();
this.setViewerText();
}
apply() {
this.resetProperties();
// Set selected settings as active.
if (this.activeSetting.Name !== "[Current Settings]") {
this.activeSetting.Active = true;
}
this.saveEvent.emit(this.settingsList);
this.applyEvent.emit({ columns: this.activeSetting.Columns, customFilters: this.activeSetting.CustomFilters });
}
close() {
this.closeEvent.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDataGridSettingsOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SDKDataGridSettingsOptionComponent, isStandalone: true, selector: "sdk-datagrid-settings-option", inputs: { settings: "settings", columns: "columns", customFilters: "customFilters" }, outputs: { closeEvent: "closeEvent", saveEvent: "saveEvent", applyEvent: "applyEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sdk-datagrid-window\">\r\n <sdk-message [(message)]=\"msg\"></sdk-message>\r\n <div class=\"header\">\r\n <span class=\"title\">Settings</span>\r\n <span title=\"Close\" class=\"sdk-icon close\" (click)=\"close()\">close</span>\r\n </div>\r\n <div class=\"actions\">\r\n <sdk-select\r\n [options]=\"settingsList\"\r\n optionStyle=\"border-radius: 4px;\"\r\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow-y: auto;'\"\r\n displayValue=\"Name\"\r\n [selectedOptions]=\"[activeSetting]\"\r\n (selectChangeEvent)=\"load($event)\">\r\n </sdk-select>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"settings\">\r\n <div class=\"name\">\r\n <label *ngIf=\"error !== ''\" class=\"error\">{{ error }}</label>\r\n <sdk-textbox *ngIf=\"error === ''\" hint=\"Enter Settings Name...\" [value]=\"name === '[Current Settings]' ? '' : name\" (changeCallBackEvent)=\"setName($event)\"></sdk-textbox>\r\n </div>\r\n <div class=\"values\" [ngClass]=\"{ adjusted: activeSetting.Active }\">\r\n <div [innerHTML]=\"viewerText\"></div>\r\n </div>\r\n <div *ngIf=\"activeSetting.Active\" class=\"notes\">\r\n * Indicates active settings.\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button class=\"sdk-button delete\" [disabled]=\"activeSetting.Name === '[Current Settings]' ? 'disabled' : ''\" [ngClass]=\"{ 'disabled': activeSetting.Name === '[Current Settings]' }\" (click)=\"remove()\">Delete</button>\r\n <button *ngIf=\"error === ''\" class=\"sdk-button\" (click)=\"save()\">Save</button>\r\n <button *ngIf=\"error === ''\" class=\"sdk-button\" (click)=\"apply()\">Apply</button>\r\n </div>\r\n</div>\r\n\r\n<!-- Lock -->\r\n<div *ngIf=\"showMessage\" title=\"\" class=\"sdk-datagrid-windows-lock\"></div>\r\n\r\n<!-- Message -->\r\n<div *ngIf=\"showMessage\" title=\"\" class=\"sdk-datagrid-message\">\r\n <div class=\"title\">{{ message.Title }}</div>\r\n <div class=\"text\" [innerHtml]=\"message.Text\"></div>\r\n <div class=\"action\">\r\n <button class=\"sdk-button\" (click)=\"message.OK()\">{{ message.OKText }}</button>\r\n <button class=\"sdk-button cancel\" (click)=\"message.Cancel()\">{{ message.CancelText }}</button>\r\n </div>\r\n</div>\r\n", styles: [".sdk-datagrid-window{position:absolute;inset:10px;overflow:hidden}.sdk-datagrid-window .header{position:absolute;top:0;right:0;left:0;height:50px}.sdk-datagrid-window .header .title{position:absolute;top:0;left:0;font-size:large;font-weight:600}.sdk-datagrid-window .header .sdk-icon.close{position:absolute;top:0;right:0}.sdk-datagrid-window .actions{position:absolute;top:50px;right:0;left:0;margin-top:5px;height:50px;width:100%}.sdk-datagrid-window .actions .button-left{float:left;margin:0}.sdk-datagrid-window .actions .button-right{float:right;margin:0 5px 0 0}.sdk-datagrid-window .content{position:absolute;inset:100px 0 50px;border:1px solid var(--sdk-border-dark);display:block;background:var(--sdk-white);border-radius:4px;margin-top:0;overflow:auto;text-align:left}.sdk-datagrid-window .content.no-actions{top:50px}.sdk-datagrid-window .content .keyword{position:relative;padding:5px 10px}.sdk-datagrid-window .content .no-box{position:relative;background-color:var(--sdk-white);text-align:left;margin:4px;box-sizing:border-box;cursor:default}.sdk-datagrid-window .content .no-box input{border-radius:unset;border-width:unset;margin:unset;padding:unset;width:unset}.sdk-datagrid-window .content .no-box input.data-option{padding:0;margin:0 5px 0 0;vertical-align:middle;cursor:pointer}.sdk-datagrid-window .content .no-box .data-label{padding:0;margin:0 10px 0 0;display:inline;vertical-align:middle;text-transform:uppercase;font-weight:600;font-size:small;cursor:pointer}.sdk-datagrid-window .content .box{position:relative;border:1px solid var(--sdk-border);background-color:var(--sdk-white);text-align:left;margin:4px;box-sizing:border-box;cursor:default}.sdk-datagrid-window .content .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.sdk-datagrid-window .content .cdk-drag-placeholder{opacity:0}.sdk-datagrid-window .content .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.sdk-datagrid-window .content .list.cdk-drop-list-dragging .box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.sdk-datagrid-window .content .section{margin:10px 10px 20px}.sdk-datagrid-window .content .section span{margin-bottom:5px;display:block;font-weight:600}.sdk-datagrid-window .content .section .column{display:block;padding:5px;width:100%}.sdk-datagrid-window .content .section .note{margin:-10px 0 5px;font-size:small;font-style:italic;font-weight:400}.sdk-datagrid-window .content .no-records{height:100%;width:100%;display:table;text-align:center;align-items:center}.sdk-datagrid-window .content .no-records span{display:table-cell;vertical-align:middle;font-size:large;font-weight:600;color:var(--sdk-red)}.sdk-datagrid-window .content .error{display:table;text-align:left;vertical-align:top;padding:20px;color:var(--sdk-red)}.sdk-datagrid-window .footer{position:absolute;right:0;left:0;bottom:0;height:40px;width:100%;text-align:center}.sdk-datagrid-window input,.sdk-datagrid-window select{border-radius:5px;border-width:.5px;margin:0;padding:5px;width:100%}.sdk-datagrid-window input:hover,.sdk-datagrid-window select:hover{border-width:1px}.sdk-datagrid-windows-lock{position:absolute;inset:0;z-index:8;overflow:hidden;background-color:var(--sdk-black);opacity:.33}.sdk-datagrid-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:200px;width:300px;background-color:var(--sdk-white);border-top:.5px solid var(--sdk-gray);border-left:.5px solid var(--sdk-gray);border-bottom:.5px solid var(--sdk-gray);box-shadow:5px 5px 10px #606060;z-index:10}.sdk-datagrid-message .title{position:absolute;top:0;left:0;right:0;height:50px;padding-top:10px;color:var(--sdk-blue);font-size:1.5em;font-weight:600;text-align:center}.sdk-datagrid-message .text{position:absolute;inset:50px 0;padding:0 10px;text-align:center}.sdk-datagrid-message .action{position:absolute;left:0;right:0;bottom:0;height:50px;text-align:center}.settings{margin:0;padding:0}.settings .name{position:absolute;top:10px;left:10px;right:10px;height:50px}.settings .name .error{color:var(--sdk-red);margin:auto;padding:0}.settings .values{position:absolute;inset:50px 10px 10px;overflow:auto;border:.5px solid var(--sdk-border);padding:10px}.settings .values.adjusted{bottom:40px}.settings .values * ul{margin:0}.settings .values * span{font-size:.8em;color:var(--sdk-red)}.settings .notes{position:absolute;left:10px;right:10px;bottom:10px;font-size:.9em;padding:0 10px;color:var(--sdk-red)}.footer .reset.disabled{opacity:.5!important;cursor:default!important}.footer .reset.disabled:hover{border:.5px solid transparent!important;border-radius:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SDKSelectModule }, { kind: "component", type: i2.SDKSelectComponent, selector: "sdk-select", inputs: ["label", "labelPosition", "labelStyle", "options", "optionStyle", "optionValuesStyle", "forceOptionBottom", "noValueLabel", "noValueDisabled", "displayValue", "displayGroup", "multiSelect", "multiValues", "selectedOptions", "resetLabel", "hoverColor", "selectedColor", "selectedBackground"], outputs: ["selectChangeEvent"] }, { kind: "ngmodule", type: SDKMessageModule }, { kind: "component", type: i3.SDKMessageComponent, selector: "sdk-message", inputs: ["message", "height", "style", "timer"], outputs: ["messageChange"] }, { kind: "ngmodule", type: SDKTextboxModule }, { kind: "component", type: i4.SDKTextboxComponent, selector: "sdk-textbox", inputs: ["validCharacters", "value", "hint", "pattern", "locale", "multiLine", "border", "padding", "margin", "height", "width", "style", "class", "showCalendarIcon", "calHeight", "calWidth", "calFontSize", "focus"], outputs: ["blurCallBackEvent", "changeCallBackEvent", "enterCallBackEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDataGridSettingsOptionComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-datagrid-settings-option', standalone: true, imports: [
CommonModule,
SDKSelectModule,
SDKMessageModule,
SDKTextboxModule
], encapsulation: ViewEncapsulation.None // Used for innerHtml formatting on 'viewerText' property.
, template: "<div class=\"sdk-datagrid-window\">\r\n <sdk-message [(message)]=\"msg\"></sdk-message>\r\n <div class=\"header\">\r\n <span class=\"title\">Settings</span>\r\n <span title=\"Close\" class=\"sdk-icon close\" (click)=\"close()\">close</span>\r\n </div>\r\n <div class=\"actions\">\r\n <sdk-select\r\n [options]=\"settingsList\"\r\n optionStyle=\"border-radius: 4px;\"\r\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow-y: auto;'\"\r\n displayValue=\"Name\"\r\n [selectedOptions]=\"[activeSetting]\"\r\n (selectChangeEvent)=\"load($event)\">\r\n </sdk-select>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"settings\">\r\n <div class=\"name\">\r\n <label *ngIf=\"error !== ''\" class=\"error\">{{ error }}</label>\r\n <sdk-textbox *ngIf=\"error === ''\" hint=\"Enter Settings Name...\" [value]=\"name === '[Current Settings]' ? '' : name\" (changeCallBackEvent)=\"setName($event)\"></sdk-textbox>\r\n </div>\r\n <div class=\"values\" [ngClass]=\"{ adjusted: activeSetting.Active }\">\r\n <div [innerHTML]=\"viewerText\"></div>\r\n </div>\r\n <div *ngIf=\"activeSetting.Active\" class=\"notes\">\r\n * Indicates active settings.\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button class=\"sdk-button delete\" [disabled]=\"activeSetting.Name === '[Current Settings]' ? 'disabled' : ''\" [ngClass]=\"{ 'disabled': activeSetting.Name === '[Current Settings]' }\" (click)=\"remove()\">Delete</button>\r\n <button *ngIf=\"error === ''\" class=\"sdk-button\" (click)=\"save()\">Save</button>\r\n <button *ngIf=\"error === ''\" class=\"sdk-button\" (click)=\"apply()\">Apply</button>\r\n </div>\r\n</div>\r\n\r\n<!-- Lock -->\r\n<div *ngIf=\"showMessage\" title=\"\" class=\"sdk-datagrid-windows-lock\"></div>\r\n\r\n<!-- Message -->\r\n<div *ngIf=\"showMessage\" title=\"\" class=\"sdk-datagrid-message\">\r\n <div class=\"title\">{{ message.Title }}</div>\r\n <div class=\"text\" [innerHtml]=\"message.Text\"></div>\r\n <div class=\"action\">\r\n <button class=\"sdk-button\" (click)=\"message.OK()\">{{ message.OKText }}</button>\r\n <button class=\"sdk-button cancel\" (click)=\"message.Cancel()\">{{ message.CancelText }}</button>\r\n </div>\r\n</div>\r\n", styles: [".sdk-datagrid-window{position:absolute;inset:10px;overflow:hidden}.sdk-datagrid-window .header{position:absolute;top:0;right:0;left:0;height:50px}.sdk-datagrid-window .header .title{position:absolute;top:0;left:0;font-size:large;font-weight:600}.sdk-datagrid-window .header .sdk-icon.close{position:absolute;top:0;right:0}.sdk-datagrid-window .actions{position:absolute;top:50px;right:0;left:0;margin-top:5px;height:50px;width:100%}.sdk-datagrid-window .actions .button-left{float:left;margin:0}.sdk-datagrid-window .actions .button-right{float:right;margin:0 5px 0 0}.sdk-datagrid-window .content{position:absolute;inset:100px 0 50px;border:1px solid var(--sdk-border-dark);display:block;background:var(--sdk-white);border-radius:4px;margin-top:0;overflow:auto;text-align:left}.sdk-datagrid-window .content.no-actions{top:50px}.sdk-datagrid-window .content .keyword{position:relative;padding:5px 10px}.sdk-datagrid-window .content .no-box{position:relative;background-color:var(--sdk-white);text-align:left;margin:4px;box-sizing:border-box;cursor:default}.sdk-datagrid-window .content .no-box input{border-radius:unset;border-width:unset;margin:unset;padding:unset;width:unset}.sdk-datagrid-window .content .no-box input.data-option{padding:0;margin:0 5px 0 0;vertical-align:middle;cursor:pointer}.sdk-datagrid-window .content .no-box .data-label{padding:0;margin:0 10px 0 0;display:inline;vertical-align:middle;text-transform:uppercase;font-weight:600;font-size:small;cursor:pointer}.sdk-datagrid-window .content .box{position:relative;border:1px solid var(--sdk-border);background-color:var(--sdk-white);text-align:left;margin:4px;box-sizing:border-box;cursor:default}.sdk-datagrid-window .content .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.sdk-datagrid-window .content .cdk-drag-placeholder{opacity:0}.sdk-datagrid-window .content .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.sdk-datagrid-window .content .list.cdk-drop-list-dragging .box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.sdk-datagrid-window .content .section{margin:10px 10px 20px}.sdk-datagrid-window .content .section span{margin-bottom:5px;display:block;font-weight:600}.sdk-datagrid-window .content .section .column{display:block;padding:5px;width:100%}.sdk-datagrid-window .content .section .note{margin:-10px 0 5px;font-size:small;font-style:italic;font-weight:400}.sdk-datagrid-window .content .no-records{height:100%;width:100%;display:table;text-align:center;align-items:center}.sdk-datagrid-window .content .no-records span{display:table-cell;vertical-align:middle;font-size:large;font-weight:600;color:var(--sdk-red)}.sdk-datagrid-window .content .error{display:table;text-align:left;vertical-align:top;padding:20px;color:var(--sdk-red)}.sdk-datagrid-window .footer{position:absolute;right:0;left:0;bottom:0;height:40px;width:100%;text-align:center}.sdk-datagrid-window input,.sdk-datagrid-window select{border-radius:5px;border-width:.5px;margin:0;padding:5px;width:100%}.sdk-datagrid-window input:hover,.sdk-datagrid-window select:hover{border-width:1px}.sdk-datagrid-windows-lock{position:absolute;inset:0;z-index:8;overflow:hidden;background-color:var(--sdk-black);opacity:.33}.sdk-datagrid-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:200px;width:300px;background-color:var(--sdk-white);border-top:.5px solid var(--sdk-gray);border-left:.5px solid var(--sdk-gray);border-bottom:.5px solid var(--sdk-gray);box-shadow:5px 5px 10px #606060;z-index:10}.sdk-datagrid-message .title{position:absolute;top:0;left:0;right:0;height:50px;padding-top:10px;color:var(--sdk-blue);font-size:1.5em;font-weight:600;text-align:center}.sdk-datagrid-message .text{position:absolute;inset:50px 0;padding:0 10px;text-align:center}.sdk-datagrid-message .action{position:absolute;left:0;right:0;bottom:0;height:50px;text-align:center}.settings{margin:0;padding:0}.settings .name{position:absolute;top:10px;left:10px;right:10px;height:50px}.settings .name .error{color:var(--sdk-red);margin:auto;padding:0}.settings .values{position:absolute;inset:50px 10px 10px;overflow:auto;border:.5px solid var(--sdk-border);padding:10px}.settings .values.adjusted{bottom:40px}.settings .values * ul{margin:0}.settings .values * span{font-size:.8em;color:var(--sdk-red)}.settings .notes{position:absolute;left:10px;right:10px;bottom:10px;font-size:.9em;padding:0 10px;color:var(--sdk-red)}.footer .reset.disabled{opacity:.5!important;cursor:default!important}.footer .reset.disabled:hover{border:.5px solid transparent!important;border-radius:unset!important}\n"] }]
}], propDecorators: { settings: [{
type: Input
}], columns: [{
type: Input
}], customFilters: [{
type: Input
}], closeEvent: [{
type: Output
}], saveEvent: [{
type: Output
}], applyEvent: [{
type: Output
}] } });
class SDKDataGridColumnsOptionComponent {
constructor() {
/**************************************************************************
* Input/Output Parameters
**************************************************************************/
this.columns = [];
this.closeEvent = new EventEmitter();
this.applyEvent = new EventEmitter();
/**************************************************************************
* Component Variables
**************************************************************************/
this.columnList = [];
this.allVisible = true;
this._columns = [];
/**************************************************************************
* Message Variables
**************************************************************************/
this.showMessage = false;
this.message = new SDKDataGridMessage();
}
/**************************************************************************
* Component Lifecycle Methods
**************************************************************************/
ngOnChanges(_args) {
if (_args.columns?.currentValue !== undefined) {
this._columns = Clone.deepCopy(this.columns);
this.initialize();
}
}
/**************************************************************************
* Setup Methods
**************************************************************************/
initialize() {
// Remove any "Action" columns. They are NOT available for user updates.
this.columnList = this._columns.filter((column) => !column.isAction);
this.allVisible = this.columnList.filter((column) => !column.isVisible).length > 0 ? false : true;
}
getColumnName(column) {
let name = column.Name;
name = (column.DisplayName && column.DisplayName !== "") ? column.DisplayName : name;
name = (column.FriendlyName && column.FriendlyName !== "") ? column.FriendlyName : name;
return name;
}
setFriendlyName(event, column) {
column.FriendlyName = event.target.value;
}
/**************************************************************************
* User Action Methods
**************************************************************************/
groupVisibleColumns() {
let visible = this.columnList.filter((column) => column.isVisible);
let hidden = this.columnList.filter((column) => !column.isVisible);
this.columnList = visible.concat(hidden);
}
toggleAllColumns(event) {
this.allVisible = event.target.checked;
this.columnList.forEach((column) => {
column.isVisible = this.allVisible;
});
}
toggleColumn(event, column) {
column.isVisible = event.target.checked;
}
drop(event) {
moveItemInArray(this.columnList, event.previousIndex, event.currentIndex);
}
reset() {
this.message = {
Title: "Reset Columns",
Text: "Are you sure?",
OKText: "YES",
CancelText: "NO",
OK: () => {
this.showMessage = false;
this.columnList.sort((a, b) => (a._original.index > b._original.index) ? 1 : -1);
this.columnList.forEach((column) => {
column.FriendlyName = column._original.FriendlyName;
column.isVisible = column._original.isVisible;
});
this.initialize();
},
Cancel: () => {
this.showMessage = false;
}
};
this.showMessage = true;
}
apply() {
// Add 'left' action columns back into list.
this._columns.filter((column) => column.isAction && column.actionSide === "left").forEach((column) => {
this.columnList.unshift({ ...column });
});
// Add 'right' action columns back into list.
this._columns.filter((column) => column.isAction && column.actionSide === "right").forEach((column) => {
this.columnList.push({ ...column });
});
// Remove any sorting/filtering for columns that are no longer visible.
this.columnList.forEach((column) => {
if (!column.isVisible) {
column.Filter = column._original.Filter;
column.Sort = column._original.Sort;
}
});
this.applyEvent.emit({ option: "Columns", columns: this.columnList });
}
close() {
this.closeEvent.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDataGridColumnsOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SDKDataGridColumnsOptionComponent, isStandalone: true, selector: "sdk-datagrid-columns-option", inputs: { columns: "columns" }, outputs: { closeEvent: "closeEvent", applyEvent: "applyEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sdk-datagrid-window\">\r\n <div class=\"header\">\r\n <span class=\"title\">Columns</span>\r\n <span title=\"Close\" class=\"sdk-icon close\" (click)=\"close()\">close</span>\r\n </div>\r\n <div class=\"actions\">\r\n <div class=\"all-select\">\r\n <input type=\"checkbox\" class=\"select\" [checked]=\"allVisible\" (change)=\"toggleAllColumns($event)\" />\r\n <span>All</span>\r\n </div>\r\n <button class=\"sdk-button button-right\" (click)=\"groupVisibleColumns()\">Group Visible</button>\r\n </div>\r\n <div cdkDropList class=\"content\" (cdkDropListDropped)=\"drop($event)\">\r\n <div class=\"box\" *ngFor=\"let column of columnList\" cdkDragBoundary=\".list\" cdkDrag>\r\n <div class=\"select\">\r\n <input type=\"checkbox\" [checked]=\"column.isVisible\" (change)=\"toggleColumn($event, column)\" />\r\n </div>\r\n <div class=\"name\">\r\n <input (input)=\"setFriendlyName($event, column);\" [value]=\"getColumnName(column)\" />\r\n </div>\r\n <div class=\"move\" cdkDragHandle>\r\n <span class=\"sdk-icon\">drag_handle</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button class=\"sdk-button delete\" (click)=\"reset()\">Reset</button>\r\n <button class=\"sdk-button\" (click)=\"apply()\">Apply</button>\r\n </div>\r\n</div>\r\n\r\n<!-- Lock -->\r\n<div *ngIf=\"showMessage\" title=\"\" class=\"sdk-datagrid-windows-lock\"></div>\r\n\r\n<!-- Message -->\r\n<div *ngIf=\"showMessage\" title=\"\" class=\"sdk-datagrid-message\">\r\n <div class=\"title\">{{ message.Title }}</div>\r\n <div class=\"text\" [innerHtml]=\"message.Text\"></div>\r\n <div class=\"action\">\r\n <button class=\"sdk-button\" (click)=\"message.OK()\">{{ message.OKText }}</button>\r\n <button class=\"sdk-button cancel\" (click)=\"message.Cancel()\">{{ message.CancelText }}</button>\r\n </div>\r\n</div>\r\n", styles: [".sdk-datagrid-window{position:absolute;inset:10px;overflow:hidden}.sdk-datagrid-window .header{position:absolute;top:0;right:0;left:0;height:50px}.sdk-datagrid-window .header .title{position:absolute;top:0;left:0;font-size:large;font-weight:600}.sdk-datagrid-window .header .sdk-icon.close{position:absolute;top:0;right:0}.sdk-datagrid-window .actions{position:absolute;top:50px;right:0;left:0;margin-top:5px;height:50px;width:100%}.sdk-datagrid-window .actions .button-left{float:left;margin:0}.sdk-datagrid-window .actions .button-right{float:right;margin:0 5px 0 0}.sdk-datagrid-window .content{position:absolute;inset:100px 0 50px;border:1px solid var(--sdk-border-dark);display:block;background:var(--sdk-white);border-radius:4px;margin-top:0;overflow:auto;text-align:left}.sdk-datagrid-window .content.no-actions{top:50px}.sdk-datagrid-window .content .keyword{position:relative;padding:5px 10px}.sdk-datagrid-window .content .no-box{position:relative;background-color:var(--sdk-white);text-align:left;margin:4px;box-sizing:border-box;cursor:default}.sdk-datagrid-window .content .no-box input{border-radius:unset;border-width:unset;margin:unset;padding:unset;width:unset}.sdk-datagrid-window .content .no-box input.data-option{padding:0;margin:0 5px 0 0;vertical-align:middle;cursor:pointer}.sdk-datagrid-window .content .no-box .data-label{padding:0;margin:0 10px 0 0;display:inline;vertical-align:middle;text-transform:uppercase;font-weight:600;font-size:small;cursor:pointer}.sdk-datagrid-window .content .box{position:relative;border:1px solid var(--sdk-border);background-color:var(--sdk-white);text-align:left;margin:4px;box-sizing:border-box;cursor:default}.sdk-datagrid-window .content .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.sdk-datagrid-window .content .cdk-drag-placeholder{opacity:0}.sdk-datagrid-window .content .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.sdk-datagrid-window .content .list.cdk-drop-list-dragging .box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.sdk-datagrid-window .content .section{margin:10px 10px 20px}.sdk-datagrid-window .content .section span{margin-bottom:5px;display:block;font-weight:600}.sdk-datagrid-window .content .section .column{display:block;padding:5px;width:100%}.sdk-datagrid-window .content .section .note{margin:-10px 0 5px;font-size:small;font-style:italic;font-weight:400}.sdk-datagrid-window .content .no-records{height:100%;width:100%;display:table;text-align:center;align-items:center}.sdk-datagrid-window .content .no-records span{display:table-cell;vertical-align:middle;font-size:large;font-weight:600;color:var(--sdk-red)}.sdk-datagrid-window .content .error{display:table;text-align:left;vertical-align:top;padding:20px;color:var(--sdk-red)}.sdk-datagrid-window .footer{position:absolute;right:0;left:0;bottom:0;height:40px;width:100%;text-align:center}.sdk-datagrid-window input,.sdk-datagrid-window select{border-radius:5px;border-width:.5px;margin:0;padding:5px;width:100%}.sdk-datagrid-window input:hover,.sdk-datagrid-window select:hover{border-width:1px}.sdk-datagrid-windows-lock{position:absolute;inset:0;z-index:8;overflow:hidden;background-color:var(--sdk-black);opacity:.33}.sdk-datagrid-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:200px;width:300px;background-color:var(--sdk-white);border-top:.5px solid var(--sdk-gray);border-left:.5px solid var(--sdk-gray);border-bottom:.5px solid var(--sdk-gray);box-shadow:5px 5px 10px #606060;z-index:10}.sdk-datagrid-message .title{position:absolute;top:0;left:0;right:0;height:50px;padding-top:10px;color:var(--sdk-blue);font-size:1.5em;font-weight:600;text-align:center}.sdk-datagrid-message .text{position:absolute;inset:50px 0;padding:0 10px;text-align:center}.sdk-datagrid-message .action{position:absolute;left:0;right:0;bottom:0;height:50px;text-align:center}.actions .all-select{margin:20px 0 0 15px;float:left}.actions .all-select input{border-radius:unset;border-width:unset;margin:unset;padding:unset;width:unset}.actions .all-select input.select{margin-right:10px}.actions .all-select span{text-transform:uppercase;font-size:14px;font-weight:600}.box{height:70px}.box .select{position:absolute;top:50%;left:10px;-ms-transform:translateY(-50%);transform:translateY(-50%);display:inline-flex}.box .name{position:absolute;top:50%;right:60px;left:40px;-ms-transform:translateY(-50%);transform:translateY(-50%)}.box .move{position:absolute;top:50%;right:10px;-ms-transform:translateY(-50%);transform:translateY(-50%)}.box .move .sdk-icon{display:inline-flex;font-size:30px;cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDataGridColumnsOptionComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-datagrid-columns-option', standalone: true, imports: [
CommonModule,
DragDropModule,
], template: "<div class=\"sdk-datagrid-window\">\r\n <div class=\"header\">\r\n <span class=\"title\">Columns</span>\r\n <span title=\"Close\" class=\"sdk-icon close\" (click)=\"close()\">close</span>\r\n </div>\r\n <div class=\"actions\">\r\n <div class=\"all-select\">\r\n <input type=\"checkbox\" class=\"select\" [checked]=\"allVisible\" (change)=\"toggleAllColumns($event)\" />\r\n <span>All</span>\r\n </div>\r\n <button class=\"sdk-button button-right\" (click)=\"groupVisibleColumns()\">Group Visible</button>\r\n </div>\r\n <div cdkDropList class=\"content\" (cdkDropListDropped)=\"drop($event)\">\r\n <div class=\"box\" *ngFor=\"let column of columnList\" cdkDragBoundary=\".list\" cdkDrag>\r\n <div class=\"select\">\r\n <input type=\"checkbox\" [checked]=\"column.isVisible\" (change)=\"toggleColumn($event, column)\" />\r\n </div>\r\n <div class=\"name\">\r\n <input (input)=\"setFriendlyName($event, column);\" [value]=\"getColumnName(column)\" />\r\n </div>\r\n <div class=\"move\" cdkDragHandle>\r\n <span class=\"sdk-icon\">drag_handle</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button class=\"sdk-button delete\" (click)=\"reset()\">Reset</button>\r\n <button class=\"sdk-button\" (click)=\"apply()\">Apply</button>\r\n </div>\r\n</div>\r\n\r\n<!-- Lock -->\r\n<div *ngIf=\"showMessage\" title=\"\" class=\"sdk-datagrid-windows-lock\"></div>\r\n\r\n<!-- Message -->\r\n<div *ngIf=\"showMessage\" title=\"\" class=\"sdk-datagrid-message\">\r\n <div class=\"title\">{{ message.Title }}</div>\r\n <div class=\"text\" [innerHtml]=\"message.Text\"></div>\r\n <div class=\"action\">\r\n <button class=\"sdk-button\" (click)=\"message.OK()\">{{ message.OKText }}</button>\r\n <button class=\"sdk-button cancel\" (click)=\"message.Cancel()\">{{ message.CancelText }}</button>\r\n </div>\r\n</div>\r\n", styles: [".sdk-datagrid-window{position:absolute;inset:10px;overflow:hidden}.sdk-datagrid-window .header{position:absolute;top:0;right:0;left:0;height:50px}.sdk-datagrid-window .header .title{position:absolute;top:0;left:0;font-size:large;font-weight:600}.sdk-datagrid-window .header .sdk-icon.close{position:absolute;top:0;right:0}.sdk-datagrid-window .actions{position:absolute;top:50px;right:0;left:0;margin-top:5px;height:50px;width:100%}.sdk-datagrid-window .actions .button-left{float:left;margin:0}.sdk-datagrid-window .actions .button-right{float:right;margin:0 5px 0 0}.sdk-datagrid-window .content{position:absolute;inset:100px 0 50px;border:1px solid var(--sdk-border-dark);display:block;background:var(--sdk-white);border-radius:4px;margin-top:0;overflow:auto;text-align:left}.sdk-datagrid-window .content.no-actions{top:50px}.sdk-datagrid-window .content .keyword{position:relative;padding:5px 10px}.sdk-datagrid-window .content .no-box{position:relative;background-color:var(--sdk-white);text-align:left;margin:4px;box-sizing:border-box;cursor:default}.sdk-datagrid-window .content .no-box input{border-radius:unset;border-width:unset;margin:unset;padding:unset;width:unset}.sdk-datagrid-window .content .no-box input.data-option{padding:0;margin:0 5px 0 0;vertical-align:middle;cursor:pointer}.sdk-datagrid-window .content .no-box .data-label{padding:0;margin:0 10px 0 0;display:inline;vertical-align:middle;text-transform:uppercase;font-weight:600;font-size:small;cursor:pointer}.sdk-datagrid-window .content .box{position:relative;border:1px solid var(--sdk-border);background-color:var(--sdk-white);text-align:left;margin:4px;box-sizing:border-box;cursor:default}.sdk-datagrid-window .content .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.sdk-datagrid-window .content .cdk-drag-placeholder{opacity:0}.sdk-datagrid-window .content .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.sdk-datagrid-window .content .list.cdk-drop-list-dragging .box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.sdk-datagrid-window .content .section{margin:10px 10px 20px}.sdk-datagrid-window .content .section span{margin-bottom:5px;display:block;font-weight:600}.sdk-datagrid-window .content .section .column{display:block;padding:5px;width:100%}.sdk-datagrid-window .content .section .note{margin:-10px 0 5px;font-size:small;font-style:italic;font-weight:400}.sdk-datagrid-window .content .no-records{height:100%;width:100%;display:table;text-align:center;align-items:center}.sdk-datagrid-window .content .no-records span{display:table-cell;vertical-align:middle;font-size:large;font-weight:600;color:var(--sdk-red)}.sdk-datagrid-window .content .error{display:table;text-align:left;vertical-align:top;padding:20px;color:var(--sdk-red)}.sdk-datagrid-window .footer{position:absolute;right:0;left:0;bottom:0;height:40px;width:100%;text-align:center}.sdk-datagrid-window input,.sdk-datagrid-window select{border-radius:5px;border-width:.