sdk-datagrid
Version:
Customizable (Angular) datagrid with data options for manipulation, and charts for visualization.
2,750 lines • 308 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", "disableSuggestions", "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:.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"] }]
}], propDecorators: { columns: [{
type: Input
}], closeEvent: [{
type: Output
}], applyEvent: [{
type: Output
}] } });
class SDKDataGridSortOptionComponent {
constructor() {
/**************************************************************************
* Input/Output Parameters
**************************************************************************/
this.columns = [];
this.closeEvent = new EventEmitter();
this.applyEvent = new EventEmitter();
/**************************************************************************
* Component Variables
**************************************************************************/
this.sortList = [];
this.columnList = [];
this.selectedValue = [];
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() {
this.sortList = [];
this._columns
.filter((column) => column.showSort && column.isVisible && !column.isAction && column.Sort)
.sort((a, b) => (a.Sort.position > b.Sort.position) ? 1 : -1)
.forEach((column) => {
this.sortList.push({ Name: column.Name, DisplayName: column.DisplayName, FriendlyName: column.FriendlyName, Sort: { position: column.Sort?.position, direction: column.Sort?.direction } });
});
this.setColumnList();
}
setColumnList() {
this.columnList = [];
this._columns
.filter((column) => column.showSort && column.isVisible && !column.isAction)
.forEach((column) => {
if (this.sortList.filter((s) => s.Name === column.Name).length === 0) {
this.columnList.push({ Name: column.Name, DisplayName: column.DisplayName, FriendlyName: column.FriendlyName, Value: this.getColumnName(column) });
}
});
}
getColumnName(column) {
let name = column.Name;
name = (column.DisplayName && column.DisplayName !== "") ? column.DisplayName : name;
name = (column.FriendlyName && column.FriendlyName !== "") ? column.FriendlyName : name;
return name;
}
/**************************************************************************
* User Action Methods
**************************************************************************/
addSort(event) {
let ndx = this._columns.findIndex((column) => column.Name === event[0].Name);
if (ndx > -1) {
let column = this._columns[ndx];
this.sortList.push({ Name: column.Name, DisplayName: column.DisplayName, FriendlyName: column.FriendlyName, Sort: { position: 0, direction: Sorts.ASC } });
}
this.selectedValue = [];
this.setColumnList();
}
deleteSort(sort) {
this.sortList = this.sortList.filter((f) => f.Name !== sort.Name);
this.setColumnList();
}
drop(event) {
moveItemInArray(this.sortList, event.previousIndex, event.currentIndex);
}
reset() {
this.message = {
Title: "Reset Sorts",
Text: "Are you sure?",
OKText: "YES",
CancelText: "NO",
OK: () => {
this.showMessage = false;
this._columns.forEach((column) => {
column.Sort = column._original.Sort;
});
this.initialize();
},
Cancel: () => {
this.showMessage = false;
}
};
this.showMessage = true;
}
apply() {
this._columns.forEach((column) => {
column.Sort = column._original.Sort;
});
this.sortList.forEach((sort, index) => {
let ndx = this._columns.findIndex((column) => column.Name === sort.Name);
if (ndx > -1) {
this._columns[ndx].Sort = { position: index, direction: sort.Sort.direction };
}
});
this.applyEvent.emit({ option: "Sorts", columns: this._columns });
}
close() {
this.closeEvent.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDataGridSortOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SDKDataGridSortOptionComponent, isStandalone: true, selector: "sdk-datagrid-sort-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\">Sorts</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]=\"columnList\"\r\n optionStyle=\"border-radius: 4px;\"\r\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow-y: auto;'\"\r\n [forceOptionBottom]=\"true\"\r\n noValueLabel=\"ADD SORT...\"\r\n displayValue=\"Value\"\r\n [selectedOptions]=\"selectedValue\"\r\n (selectChangeEvent)=\"addSort($event)\">\r\n </sdk-select>\r\n </div>\r\n <div cdkDropList class=\"content\" (cdkDropListDropped)=\"drop($event)\">\r\n <div *ngIf=\"sortList.length === 0\" class=\"no-records\">\r\n <span>Add a sort.</span>\r\n </div>\r\n <div class=\"box\" *ngFor=\"let sort of sortList\" cdkDragBoundary=\".list\" cdkDrag>\r\n <div class=\"delete\">\r\n <span class=\"sdk-icon\" (click)=\"deleteSort(sort)\">delete</span>\r\n </div>\r\n <div class=\"name\" [title]=\"getColumnName(sort)\">{{ getColumnName(sort) }}</div>\r\n <div class=\"select\">\r\n <div style=\"display: inline-flex;\" (click)=\"sort.Sort.direction = 'asc'\">\r\n <input type=\"radio\" class=\"data-option\" (click)=\"sort.Sort.direction = 'asc'\" [id]=\"sort.Name + '_asc'\" [name]=\"sort.Name\" [checked]=\"(sort.Sort.direction === 'asc') ? 'checked' : ''\" value=\"asc\">\r\n <span class=\"data-label\" [attr.for]=\"sort.Name + '_asc'\">ASC</span>\r\n </div>\r\n <div style=\"display: inline-flex;\" (click)=\"sort.Sort.direction = 'desc'\">\r\n <input type=\"radio\" class=\"data-option\" (click)=\"sort.Sort.direction = 'desc'\" [id]=\"sort.Name + '_desc'\" [name]=\"sort.Name\" [checked]=\"(sort.Sort.direction === 'desc') ? 'checked' : ''\" value=\"desc\">\r\n <span class=\"data-label\" [attr.for]=\"sort.Name + '_desc'\">DESC</span>\r\n </div>\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}.box{height:70px}.box .delete{position:absolute;top:50%;left:10px;transform:translateY(-50%)}.box .delete .sdk-icon{display:inline-flex;font-size:30px;color:var(--sdk-red)}.box .name{position:absolute;top:50%;left:50px;right:140px;transform:translateY(-50%);overflow:hidden;text-overflow:ellipsis;text-align:left}.box .select{position:absolute;top:50%;right:50px;width:80px;transform:translateY(-50%)}.box .select input{border-radius:unset;border-width:unset;margin:unset;padding:unset;width:unset}.box .select input.data-option{padding:0;margin:0 10px 0 0;vertical-align:middle;cursor:pointer}.box .select .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}.box .move{position:absolute;top:50%;right:10px;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: 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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDataGridSortOptionComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-datagrid-sort-option', standalone: true, imports: [
CommonModule,
SDKSelectModule,
], template: "<div class=\"sdk-datagrid-window\">\r\n <div class=\"header\">\r\n <span class=\"title\">Sorts</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]=\"columnList\"\r\n optionStyle=\"border-radius: 4px;\"\r\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow-y: auto;'\"\r\n [forceOptionBottom]=\"true\"\r\n noValueLabel=\"ADD SORT...\"\r\n displayValue=\"Value\"\r\n [selectedOptions]=\"selectedValue\"\r\n (selectChangeEvent)=\"addSort($event)\">\r\n </sdk-select>\r\n </div>\r\n <div cdkDropList class=\"content\" (cdkDropListDropped)=\"drop($event)\">\r\n <div *ngIf=\"sortList.length === 0\" class=\"no-records\">\r\n <span>Add a sort.</span>\r\n </div>\r\n <div class=\"box\" *ngFor=\"let sort of sortList\" cdkDragBoundary=\".list\" cdkDrag>\r\n <div class=\"delete\">\r\n <span class=\"sdk-icon\" (click)=\"deleteSort(sort)\">delete</span>\r\n </div>\r\n <div class=\"name\" [title]=\"getColumnName(sort)\">{{ getColumnName(sort) }}</div>\r\n <div class=\"select\">\r\n <div style=\"display: inline-flex;\" (click)=\"sort.Sort.direction = 'asc'\">\r\n <input type=\"radio\" class=\"data-option\" (click)=\"sort.Sort.direction = 'asc'\" [id]=\"sort.Name + '_asc'\" [name]=\"sort.Name\" [checked]=\"(sort.Sort.direction === 'asc') ? 'checked' : ''\" value=\"asc\">\r\n <span class=\"data-label\" [attr.for]=\"sort.Name + '_asc'\">ASC</span>\r\n </div>\r\n <div style=\"display: inline-flex;\" (click)=\"sort.Sort.direction = 'desc'\">\r\n <input type=\"radio\" class=\"data-option\" (click)=\"sort.Sort.direction = 'desc'\" [id]=\"sort.Name + '_desc'\" [name]=\"sort.Name\" [checked]=\"(sort.Sort.direction === 'desc') ? 'checked' : ''\" value=\"desc\">\r\n <span class=\"data-label\" [attr.for]=\"sort.Name + '_desc'\">DESC</span>\r\n </div>\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}.box{height:70px}.box .delete{position:absolute;top:50%;left:10px;transform:translateY(-50%)}.box .delete .sdk-icon{display:inline-flex;font-size:30px;color:var(--sdk-red)}.box .name{position:absolute;top:50%;left:50px;right:140px;transform:translateY(-50%);overflow:hidden;text-overflow:ellipsis;text-align:left}.box .select{position:absolute;top:50%;right:50px;width:80px;transform:translateY(-50%)}.box .select input{border-radius:unset;border-width:unset;margin:unset;padding:unset;width:unset}.box .select input.data-option{padding:0;margin:0 10px 0 0;vertical-align:middle;cursor:pointer}.box .select .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}.box .move{position:absolute;top:50%;right:10px;transform:translateY(-50%)}.box .move .sdk-icon{display:inline-flex;font-size:30px;cursor:move}\n"] }]
}], propDecorators: { columns: [{
type: Input
}], closeEvent: [{
type: Output
}], applyEvent: [{
type: Output
}] } });
var Filters;
(function (Filters) {
Filters["Equals"] = "Equals (=)";
Filters["NotEquals"] = "Not Equals (!=)";
Filters["Empty"] = "Empty";
Filters["NotEmpty"] = "Not Empty";
Filters["Contains"] = "Contains";
Filters["NotContains"] = "Not Contains";
Filters["GreaterThan"] = "Greater Than (>)";
Filters["GreaterThanOrEqual"] = "Greater Than/Equal To (>=)";
Filters["LessThan"] = "Less Than (<)";
Filters["LessThanOrEqual"] = "Less Than/Equal To (<=)";
Filters["InList"] = "In List";
})(Filters || (Filters = {}));
var FilterType;
(function (FilterType) {
FilterType["Textbox"] = "text";
FilterType["TextboxOnly"] = "text-only";
FilterType["Checkbox"] = "checkbox";
FilterType["Dropdown"] = "list";
})(FilterType || (FilterType = {}));
class SDKDataGridFilterOptionComponent {
constructor() {
/**************************************************************************
* Input/Output Parameters
**************************************************************************/
this.columns = [];
this.customFilters = [];
this.closeEvent = new EventEmitter();
this.applyEvent = new EventEmitter();
/**************************************************************************
* Component Variables
**************************************************************************/
this.columnList = [];
this.filterList = [];
this._columns = [];
this._customFilters = [];
/**************************************************************************
* Message Variables
**************************************************************************/
this.showMessage = false;
this.message = new SDKDataGridMessage();
}
/**************************************************************************
* Component Lifecycle Methods
**************************************************************************/
ngOnChanges(_args) {
this._columns = Clone.deepCopy(this.columns);
this._customFilters = Clone.deepCopy(this.customFilters);
Promise.all([
this._columns.filter((column) => column.setFilterValues !== undefined).forEach(async (fv) => {
await fv.setFilterValues().then((results) => {
fv.FilterValues = results;
});
}),
this._customFilters.filter((custom) => custom.setFilterValues !== undefined).forEach(async (fv) => {
await fv.setFilterValues().then((results) => {
fv.FilterValues = results;
});
})
]).then(() => {
this.initialize();
});
}
/**************************************************************************
* Setup Methods
**************************************************************************/
initialize() {
this.filterList = [];
this.columnList = [];
this._customFilters.forEach((filter) => {
if (filter.Type === FilterType.Dropdown && (!filter.FilterTypes || filter.FilterTypes.length === 0)) {
filter.FilterTypes = [Filters.Contains, Filters.Empty, Filters.Equals, Filters.GreaterThan, Filters.GreaterThanOrEqual, Filters.InList, Filters.LessThan, Filters.LessThanOrEqual, Filters.NotContains, Filters.NotEmpty, Filters.NotEquals];
}
if (filter.FilterMultiSelect && filter.FilterValues && filter.FilterValues.length > 0) {
filter.FilterTypes = [Filters.Equals, Filters.NotEquals];
}
let operation = filter.Filter?.operation;
if (!operation) {
if (filter.FilterTypes.length === 1) {
operation = [filter.FilterTypes[0]];
}
else if (filter.FilterValueDefault) {
operation = [filter.FilterValueDefault];
}
}
this.filterList.push({
Type: "Custom",
Name: filter.Name,
DisplayName: filter.DisplayName,
Operation: operation,
ValueType: filter.Type,
ValueList: filter.FilterValues,
MultiSelect: filter.FilterMultiSelect,
Value: filter.Filter?.value ?? ""
});
});
this._columns.filter((column) => column.showFilter && column.isVisible && !column.isAction).forEach((column) => {
if (!column.FilterTypes || column.FilterTypes.length === 0) {
column.FilterTypes = [Filters.Contains, Filters.Empty, Filters.Equals, Filters.GreaterThan, Filters.GreaterThanOrEqual, Filters.InList, Filters.LessThan, Filters.LessThanOrEqual, Filters.NotContains, Filters.NotEmpty, Filters.NotEquals];
}
if (column.FilterMultiSelect && column.FilterValues && column.FilterValues.length > 0) {
column.FilterTypes = [Filters.Equals, Filters.NotEquals];
}
let operation = column.Filter?.operation;
if (!operation) {
if (column.FilterTypes.length === 1) {
operation = [column.FilterTypes[0]];
}
else if (column.FilterValueDefault) {
operation = [column.FilterValueDefault];
}
}
this.filterList.push({
Type: "System",
Name: column.Name,
DisplayName: this.getColumnName(column),
Operation: operation,
ValueType: column.FilterType,
ValueList: column.FilterValues,
MultiSelect: column.FilterMultiSelect,
Value: column.Filter?.value ?? ""
});
this.columnList.push(column);
});
}
getFilters(filter) {
let obj;
let options = [];
if (filter.Type === "Custom") {
obj = this._customFilters.find((o) => o.Name === filter.Name);
}
else {
obj = this._columns.find((o) => o.Name === filter.Name);
}
obj.FilterTypes.forEach((type) => {
options.push(type);
});
return options;
}
filterExists(value, filter) {
let obj;
if (filter.Type === "Custom") {
obj = this._customFilters.find((o) => o.Name === filter.Name);
}
else {
obj = this._columns.find((o) => o.Name === filter.Name);
}
if (obj?.FilterTypes && obj.FilterTypes.length > 0) {
if (Object.values(obj.FilterTypes).includes(value)) {
return true;
}
}
else {
if (!obj.FilterTypes || obj.FilterTypes.length === 0 || Object.values(obj.FilterTypes).includes(value)) {
return true;
}
}
return false;
}
getColumnName(column) {
let originalName = column.Name;
if (column.FriendlyName && column.FriendlyName !== "") {
originalName = column.FriendlyName;
}
else if (column.DisplayName && column.DisplayName !== "") {
originalName = column.DisplayName;
}
return originalName;
}
validate() {
let valid = true;
this.filterList.forEach((filter) => {
if (![FilterType.Checkbox, FilterType.TextboxOnly].includes(filter.ValueType) && filter.Value.length > 0 && !filter.Operation)
valid = false;
});
return valid;
}
/**************************************************************************
* User Action Methods
**************************************************************************/
addOperation(event, filter) {
let item = this.filterList.find(f => f.Name === filter.Name);
if (item) {
item.Operation = event;
}
}
addValue(event, filter) {
let item = this.filterList.find(f => f.Name === filter.Name);
if (item) {
item.Value = event.target.value;
}
}
selectedValue(event, filter) {
let item = this.filterList.find(f => f.Name === filter.Name);
if (item) {
item.Value = event;
}
filter.Value = event;
}
toggleAny(filter) {
let item = this.filterList.find((f) => f.Type === "Custom" && f.ValueType === "checkbox" && f.Name === filter.Name);
if (item) {
if (item.Value === "true") {
item.Value = "";
}
else {
item.Value = "true";
}
}
}
reset() {
this.message = {
Title: "Reset Filters",
Text: "Are you sure?",
OKText: "YES",
CancelText: "NO",
OK: () => {
this.showMessage = false;
this._columns.forEach((column) => {
column.Filter = column._original.Filter;
});
this._customFilters.forEach((filter) => {
filter.Filter = filter._original.Filter;
});
this.initialize();
},
Cancel: () => {
this.showMessage = false;
}
};
this.showMessage = true;
}
apply() {
let cont = true;
if (!this.validate()) {
cont = confirm("Some filters are missing data. Contniue anyway?");
}
if (cont) {
this.filterList.forEach((filter) => {
let ndx = this._columns.findIndex((column) => column.Name === filter.Name);
if (ndx > -1) {
if (filter.Value && (filter.Value !== undefined || filter.Value !== null || filter.Value !== "" || filter.Value.length > 0)) {
this._columns[ndx].Filter = { operation: filter.Operation, value: filter.Value };
}
else if (filter.Operation && ["Empty", "NotEmpty"].includes(filter.Operation[0])) {
this._columns[ndx].Filter = { operation: filter.Operation, value: null };
}
else {
this._columns[ndx].Filter = null;
}
}
ndx = this._customFilters.findIndex((custom) => custom.Name === filter.Name);
if (ndx > -1) {
if (filter.Value && (filter.Value !== undefined || filter.Value !== null || filter.Value !== "" || filter.Value.length > 0)) {
this._customFilters[ndx].Filter = { operation: filter.Operation, value: filter.Value };
}
else if (filter.Operation && ["Empty", "NotEmpty"].includes(filter.Operation[0])) {
this._customFilters[ndx].Filter = { operation: filter.Operation, value: null };
}
else {
this._customFilters[ndx].Filter = null;
}
}
});
this.applyEvent.emit({ option: "Filters", columns: this._columns, customFilters: this._customFilters });
}
}
close() {
this.closeEvent.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDataGridFilterOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SDKDataGridFilterOptionComponent, isStandalone: true, selector: "sdk-datagrid-filter-option", inputs: { columns: "columns", customFilters: "customFilters" }, 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\">Filters</span>\r\n <span title=\"Close\" class=\"sdk-icon close\" (click)=\"close()\">close</span>\r\n </div>\r\n <div class=\"content no-actions\">\r\n <div class=\"box\" [ngClass]=\"{ 'checkbox': filter.Type === 'Any' }\" *ngFor=\"let filter of filterList\">\r\n <div>\r\n <div *ngIf=\"['text', 'text-only', 'list'].includes(filter.ValueType)\" class=\"column\">\r\n <div class=\"name\">{{ filter.DisplayName }}</div>\r\n </div>\r\n <div *ngIf=\"filter.ValueType === 'text-only'\" class=\"operation-value no-operation\">\r\n <div class=\"value no-operation\">\r\n <input [value]=\"filter.Value\" (input)=\"addValue($event, filter)\" />\r\n </div>\r\n </div>\r\n <div *ngIf=\"filter.ValueType === 'checkbox'\" class=\"column-checkbox\">\r\n <div class=\"all-select\" (click)=\"toggleAny(filter)\">\r\n <input type=\"checkbox\" class=\"select\" [checked]=\"filter.Value === 'true' ? 'checked' : ''\" />\r\n <span>{{ filter.DisplayName }}</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['text', 'list'].includes(filter.ValueType)\" class=\"operation-value\">\r\n <div class=\"operation\">\r\n <sdk-select\r\n [options]=\"getFilters(filter)\"\r\n optionStyle=\"border-radius: 4px;\"\r\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow-y: auto;'\"\r\n noValueLabel=\"Select operator...\"\r\n [selectedOptions]=\"filter.Operation\"\r\n (selectChangeEvent)=\"addOperation($event, filter)\">\r\n </sdk-select>\r\n </div>\r\n <div class=\"value\">\r\n <input *ngIf=\"filter.ValueType === 'text'\" [value]=\"filter.Value\" (input)=\"addValue($event, filter)\" />\r\n\r\n <sdk-select *ngIf=\"filter.ValueType === 'list' && !filter.MultiSelect\"\r\n [options]=\"filter.ValueList\"\r\n optionStyle=\"border-radius: 4px;\"\r\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow-y: auto;'\"\r\n noValueLabel=\"[All values]\"\r\n [noValueDisabled]=false\r\n [selectedOptions]=\"filter.Value\"\r\n (selectChangeEvent)=\"selectedValue($event, filter)\">\r\n </sdk-select>\r\n\r\n <sdk-select *ngIf=\"filter.ValueType === 'list' && filter.MultiSelect\"\r\n [options]=\"filter.ValueList\"\r\n optionStyle=\"border-radius: 4px;\"\r\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow: auto;'\"\r\n noValueLabel=\"[All values]\"\r\n [noValueDisabled]=false\r\n [multiSelect]=filter.MultiSelect\r\n [multiValues]=false\r\n [selectedOptions]=\"filter.Value\"\r\n (selectChangeEvent)=\"selectedValue($event, filter)\">\r\n </sdk-select>\r\n </div>\r\n </div>\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}.box{height:80px}.box.checkbox{height:50px}.box .column{position:absolute;inset:5px 10px 10px}.box .column .name{font-weight:700;color:var(--sdk-blue)}.box .column-checkbox{position:absolute;top:50%;left:10px;-ms-transform:translateY(-50%);transform:translateY(-50%)}.box .column-checkbox .all-select{float:left}.box .column-checkbox .all-select input{border-radius:unset;border-width:unset;margin:unset;padding:unset;width:unset}.box .column-checkbox .all-select input.select{margin-right:10px}.box .column-checkbox .all-select span{font-weight:700;color:var(--sdk-blue)}.box .operation-value{position:absolute;inset:35px 10px 0}.box .operation-value.no-operation{left:0}.box .operation-value .operation{position:absolute;top:0;bottom:10px;left:0;width:50%}.box .operation-value .value{position:absolute;top:0;right:0;bottom:10px;width:50%;display:inline-flex}.box .operation-value .value.no-operation{left:0;width:unset}.box .operation-value .value input,.box .operation-value .value select{margin-left:10px}.box .operation-value .value sdk-select{position:absolute;inset:0 0 10px 10px;font-size:small}.box .keyword-value{position:absolute;inset:35px 10px 10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDataGridFilterOptionComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-datagrid-filter-option', standalone: true, imports: [
CommonModule,
SDKSelectModule
], template: "<div class=\"sdk-datagrid-window\">\r\n <div class=\"header\">\r\n <span class=\"title\">Filters</span>\r\n <span title=\"Close\" class=\"sdk-icon close\" (click)=\"close()\">close</span>\r\n </div>\r\n <div class=\"content no-actions\">\r\n <div class=\"box\" [ngClass]=\"{ 'checkbox': filter.Type === 'Any' }\" *ngFor=\"let filter of filterList\">\r\n <div>\r\n <div *ngIf=\"['text', 'text-only', 'list'].includes(filter.ValueType)\" class=\"column\">\r\n <div class=\"name\">{{ filter.DisplayName }}</div>\r\n </div>\r\n <div *ngIf=\"filter.ValueType === 'text-only'\" class=\"operation-value no-operation\">\r\n <div class=\"value no-operation\">\r\n <input [value]=\"filter.Value\" (input)=\"addValue($event, filter)\" />\r\n </div>\r\n </div>\r\n <div *ngIf=\"filter.ValueType === 'checkbox'\" class=\"column-checkbox\">\r\n <div class=\"all-select\" (click)=\"toggleAny(filter)\">\r\n <input type=\"checkbox\" class=\"select\" [checked]=\"filter.Value === 'true' ? 'checked' : ''\" />\r\n <span>{{ filter.DisplayName }}</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"['text', 'list'].includes(filter.ValueType)\" class=\"operation-value\">\r\n <div class=\"operation\">\r\n <sdk-select\r\n [options]=\"getFilters(filter)\"\r\n optionStyle=\"border-radius: 4px;\"\r\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow-y: auto;'\"\r\n noValueLabel=\"Select operator...\"\r\n [selectedOptions]=\"filter.Operation\"\r\n (selectChangeEvent)=\"addOperation($event, filter)\">\r\n </sdk-select>\r\n </div>\r\n <div class=\"value\">\r\n <input *ngIf=\"filter.ValueType === 'text'\" [value]=\"filter.Value\" (input)=\"addValue($event, filter)\" />\r\n\r\n <sdk-select *ngIf=\"filter.ValueType === 'list' && !filter.MultiSelect\"\r\n [options]=\"filter.ValueList\"\r\n optionStyle=\"border-radius: 4px;\"\r\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow-y: auto;'\"\r\n noValueLabel=\"[All values]\"\r\n [noValueDisabled]=false\r\n [selectedOptions]=\"filter.Value\"\r\n (selectChangeEvent)=\"selectedValue($event, filter)\">\r\n </sdk-select>\r\n\r\n <sdk-select *ngIf=\"filter.ValueType === 'list' && filter.MultiSelect\"\r\n [options]=\"filter.ValueList\"\r\n optionStyle=\"border-radius: 4px;\"\r\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow: auto;'\"\r\n noValueLabel=\"[All values]\"\r\n [noValueDisabled]=false\r\n [multiSelect]=filter.MultiSelect\r\n [multiValues]=false\r\n [selectedOptions]=\"filter.Value\"\r\n (selectChangeEvent)=\"selectedValue($event, filter)\">\r\n </sdk-select>\r\n </div>\r\n </div>\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}.box{height:80px}.box.checkbox{height:50px}.box .column{position:absolute;inset:5px 10px 10px}.box .column .name{font-weight:700;color:var(--sdk-blue)}.box .column-checkbox{position:absolute;top:50%;left:10px;-ms-transform:translateY(-50%);transform:translateY(-50%)}.box .column-checkbox .all-select{float:left}.box .column-checkbox .all-select input{border-radius:unset;border-width:unset;margin:unset;padding:unset;width:unset}.box .column-checkbox .all-select input.select{margin-right:10px}.box .column-checkbox .all-select span{font-weight:700;color:var(--sdk-blue)}.box .operation-value{position:absolute;inset:35px 10px 0}.box .operation-value.no-operation{left:0}.box .operation-value .operation{position:absolute;top:0;bottom:10px;left:0;width:50%}.box .operation-value .value{position:absolute;top:0;right:0;bottom:10px;width:50%;display:inline-flex}.box .operation-value .value.no-operation{left:0;width:unset}.box .operation-value .value input,.box .operation-value .value select{margin-left:10px}.box .operation-value .value sdk-select{position:absolute;inset:0 0 10px 10px;font-size:small}.box .keyword-value{position:absolute;inset:35px 10px 10px}\n"] }]
}], propDecorators: { columns: [{
type: Input
}], customFilters: [{
type: Input
}], closeEvent: [{
type: Output
}], applyEvent: [{
type: Output
}] } });
var FormulaOperation;
(function (FormulaOperation) {
FormulaOperation["None"] = "";
FormulaOperation["Avg"] = "Avg";
FormulaOperation["Rng"] = "Rng";
FormulaOperation["Sum"] = "Sum";
})(FormulaOperation || (FormulaOperation = {}));
class SDKDataGridFormula {
constructor() {
this.Name = "";
this.Format = 0;
this.Operation = FormulaOperation.None; // Options ["Avg", "Rng", "Sum"].
this.Value = 0;
}
}
class SDKDataGridFormulaOptionComponent {
constructor() {
/**************************************************************************
* Input/Output Parameters
**************************************************************************/
this.columns = [];
this.closeEvent = new EventEmitter();
this.applyEvent = new EventEmitter();
/**************************************************************************
* Component Variables
**************************************************************************/
this.columnList = [];
this.formulaList = [];
this.operationList = [
{ Operation: "Avg", DisplayName: "Average" },
{ Operation: "Rng", DisplayName: "Range (High/Low)" },
{ Operation: "Sum", DisplayName: "Summarize" }
];
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() {
this.formulaList = [];
this.columnList = [];
this._columns
.filter((column) => column.isVisible && !column.isAction && column.Formulas)
.forEach((column) => {
column.Formulas.forEach((formula) => {
this.formulaList.push({
Name: column.Name,
Operation: formula.operation,
Format: formula.format,
Value: formula.value
});
});
});
this._columns.filter((column) => column.isVisible && !column.isAction).forEach((column) => {
this.columnList.push({ Name: column.Name, DisplayName: this.getColumnName(column) });
});
}
getColumnName(column) {
let originalName = column.Name;
if (column.FriendlyName && column.FriendlyName !== "") {
originalName = column.FriendlyName;
}
else if (column.DisplayName && column.DisplayName !== "") {
originalName = column.DisplayName;
}
return originalName;
}
getSelectedColumn(formula) {
let ndx = this._columns.findIndex((column) => column.Name === formula.Name);
if (ndx > -1) {
return [{ "DisplayName": this._columns[ndx].DisplayName }];
}
else {
return [];
}
}
getSelectedOperation(formula) {
let ndx = this.operationList.findIndex((operation) => operation.Operation === formula.Operation);
if (ndx > -1) {
return [{ "DisplayName": this.operationList[ndx].DisplayName }];
}
else {
return [];
}
}
validate() {
let valid = true;
this.formulaList.forEach((formula) => {
if (formula.Name === "")
valid = false;
if (formula.Operation === FormulaOperation.None)
valid = false;
});
return valid;
}
/**************************************************************************
* User Action Methods
**************************************************************************/
addFormula() {
this.formulaList.push({
Name: "",
Operation: FormulaOperation.None,
Format: 0,
Value: 0
});
}
deleteFormula(index) {
this.formulaList.splice(index, 1);
}
addColumn(event, index) {
this.formulaList[index].Name = event[0].Name;
}
addOperation(event, index) {
this.formulaList[index].Operation = event[0].Operation;
}
addFormat(event, index) {
this.formulaList[index].Format = (event.target.value === "" ? 0 : event.target.value);
}
drop(event) {
moveItemInArray(this.formulaList, event.previousIndex, event.currentIndex);
}
reset() {
this.message = {
Title: "Reset Formulas",
Text: "Are you sure?",
OKText: "YES",
CancelText: "NO",
OK: () => {
this.showMessage = false;
this._columns.forEach((column) => {
column.Formulas = column._original.Formulas;
});
this.initialize();
},
Cancel: () => {
this.showMessage = false;
}
};
this.showMessage = true;
}
apply() {
let cont = true;
if (!this.validate()) {
cont = confirm("Some formulas are missing data. Contniue anyway?");
}
if (cont) {
this._columns.forEach((column) => {
column.Formulas = column._original.Formulas;
});
this.formulaList.forEach((formula) => {
let ndx = this._columns.findIndex((column) => column.Name === formula.Name);
if (ndx > -1) {
if (!this._columns[ndx].Formulas) {
this._columns[ndx].Formulas = [];
}
this._columns[ndx].Formulas.push({
operation: formula.Operation,
format: formula.Format,
value: formula.Value
});
}
});
this.applyEvent.emit({ option: "Formulas", columns: this._columns });
}
}
close() {
this.closeEvent.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDataGridFormulaOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SDKDataGridFormulaOptionComponent, isStandalone: true, selector: "sdk-datagrid-formula-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\">Formulas</span>\r\n <span title=\"Close\" class=\"sdk-icon close\" (click)=\"close()\">close</span>\r\n </div>\r\n <div class=\"actions\">\r\n <button class=\"sdk-button button-left\" (click)=\"addFormula()\">Add formula</button>\r\n </div>\r\n <div cdkDropList class=\"content\" (cdkDropListDropped)=\"drop($event)\">\r\n <div *ngIf=\"formulaList.length === 0\" class=\"no-records\">\r\n <span>Add a formula.</span>\r\n </div>\r\n <div class=\"box\" *ngFor=\"let formula of formulaList; let i = index\" cdkDragBoundary=\".list\" cdkDrag>\r\n <div class=\"delete\">\r\n <span class=\"sdk-icon\" (click)=\"deleteFormula(i)\">delete</span>\r\n </div>\r\n <div>\r\n <div class=\"column\">\r\n <sdk-select\r\n [options]=\"columnList\"\r\n optionStyle=\"border-radius: 4px;\"\r\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow-y: auto;'\"\r\n noValueLabel=\"Select column...\"\r\n displayValue=\"DisplayName\"\r\n [selectedOptions]=\"getSelectedColumn(formula)\"\r\n (selectChangeEvent)=\"addColumn($event, i)\">\r\n </sdk-select>\r\n </div>\r\n <div class=\"operation-precision\">\r\n <div class=\"operation\">\r\n <sdk-select\r\n [options]=\"operationList\"\r\n optionStyle=\"border-radius: 4px;\"\r\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow-y: auto;'\"\r\n noValueLabel=\"Select operator...\"\r\n displayValue=\"DisplayName\"\r\n [selectedOptions]=\"getSelectedOperation(formula)\"\r\n (selectChangeEvent)=\"addOperation($event, i)\">\r\n </sdk-select>\r\n </div>\r\n <div class=\"precision\">\r\n <span>#.</span>\r\n <input [value]=\"formula.Format\" (keypress)=\"($event.charCode >= 48 && $event.charCode < 58) || $event.charCode === 8\" (blur)=\"addFormat($event, i)\" />\r\n </div>\r\n </div>\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}.box{height:100px}.box .column{position:absolute;inset:10px 50px 50px}.box .operation-precision{position:absolute;inset:55px 50px 0}.box .operation-precision .operation{position:absolute;inset:0 80px 10px 0}.box .operation-precision .precision{position:absolute;top:0;right:0;bottom:10px;display:inline-flex}.box .operation-precision .precision span{padding-top:6px;margin:0 2px}.box .operation-precision .precision input{width:30px}.box .delete{position:absolute;top:50%;left:10px;-ms-transform:translateY(-50%);transform:translateY(-50%)}.box .delete .sdk-icon{display:inline-flex;font-size:30px;color:var(--sdk-red)}.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: 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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDataGridFormulaOptionComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-datagrid-formula-option', standalone: true, imports: [
CommonModule,
SDKSelectModule
], template: "<div class=\"sdk-datagrid-window\">\r\n <div class=\"header\">\r\n <span class=\"title\">Formulas</span>\r\n <span title=\"Close\" class=\"sdk-icon close\" (click)=\"close()\">close</span>\r\n </div>\r\n <div class=\"actions\">\r\n <button class=\"sdk-button button-left\" (click)=\"addFormula()\">Add formula</button>\r\n </div>\r\n <div cdkDropList class=\"content\" (cdkDropListDropped)=\"drop($event)\">\r\n <div *ngIf=\"formulaList.length === 0\" class=\"no-records\">\r\n <span>Add a formula.</span>\r\n </div>\r\n <div class=\"box\" *ngFor=\"let formula of formulaList; let i = index\" cdkDragBoundary=\".list\" cdkDrag>\r\n <div class=\"delete\">\r\n <span class=\"sdk-icon\" (click)=\"deleteFormula(i)\">delete</span>\r\n </div>\r\n <div>\r\n <div class=\"column\">\r\n <sdk-select\r\n [options]=\"columnList\"\r\n optionStyle=\"border-radius: 4px;\"\r\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow-y: auto;'\"\r\n noValueLabel=\"Select column...\"\r\n displayValue=\"DisplayName\"\r\n [selectedOptions]=\"getSelectedColumn(formula)\"\r\n (selectChangeEvent)=\"addColumn($event, i)\">\r\n </sdk-select>\r\n </div>\r\n <div class=\"operation-precision\">\r\n <div class=\"operation\">\r\n <sdk-select\r\n [options]=\"operationList\"\r\n optionStyle=\"border-radius: 4px;\"\r\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow-y: auto;'\"\r\n noValueLabel=\"Select operator...\"\r\n displayValue=\"DisplayName\"\r\n [selectedOptions]=\"getSelectedOperation(formula)\"\r\n (selectChangeEvent)=\"addOperation($event, i)\">\r\n </sdk-select>\r\n </div>\r\n <div class=\"precision\">\r\n <span>#.</span>\r\n <input [value]=\"formula.Format\" (keypress)=\"($event.charCode >= 48 && $event.charCode < 58) || $event.charCode === 8\" (blur)=\"addFormat($event, i)\" />\r\n </div>\r\n </div>\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}.box{height:100px}.box .column{position:absolute;inset:10px 50px 50px}.box .operation-precision{position:absolute;inset:55px 50px 0}.box .operation-precision .operation{position:absolute;inset:0 80px 10px 0}.box .operation-precision .precision{position:absolute;top:0;right:0;bottom:10px;display:inline-flex}.box .operation-precision .precision span{padding-top:6px;margin:0 2px}.box .operation-precision .precision input{width:30px}.box .delete{position:absolute;top:50%;left:10px;-ms-transform:translateY(-50%);transform:translateY(-50%)}.box .delete .sdk-icon{display:inline-flex;font-size:30px;color:var(--sdk-red)}.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"] }]
}], propDecorators: { columns: [{
type: Input
}], closeEvent: [{
type: Output
}], applyEvent: [{
type: Output
}] } });
class SDKDataGridExportOptionComponent {
constructor() {
/**************************************************************************
* Input/Output Parameters
**************************************************************************/
this.isExporting = false;
this.closeEvent = new EventEmitter();
this.applyEvent = new EventEmitter();
/**************************************************************************
* Component Variables
**************************************************************************/
this.includeAllData = false;
}
/**************************************************************************
* User Action Methods
**************************************************************************/
apply() {
this.applyEvent.emit(this.includeAllData);
}
close() {
this.closeEvent.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDataGridExportOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SDKDataGridExportOptionComponent, isStandalone: true, selector: "sdk-datagrid-export-option", inputs: { isExporting: "isExporting" }, outputs: { closeEvent: "closeEvent", applyEvent: "applyEvent" }, ngImport: i0, template: "<div class=\"sdk-datagrid-window\">\r\n <div class=\"header\">\r\n <span class=\"title\">Export</span>\r\n <span title=\"Close\" class=\"sdk-icon close\" (click)=\"close()\">close</span>\r\n </div>\r\n <div class=\"content no-actions\">\r\n <div class=\"no-box\">\r\n <div class=\"section\">\r\n <div style=\"display: inline-block;\">\r\n <input class=\"data-option\" type=\"checkbox\" [checked]=\"includeAllData\" (change)=\"includeAllData = !includeAllData\">\r\n <span class=\"data-label\" (click)=\"includeAllData = !includeAllData\">Include All Data</span>\r\n </div>\r\n </div>\r\n <div class=\"section\">\r\n <div style=\"display: inline-block; font-size: 0.8em;\">\r\n <span>NOTE: Exporting all data may take a while based on the total records in the dataset.</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <span *ngIf=\"isExporting\" class=\"progress\">Export in progress... please wait.</span>\r\n <button *ngIf=\"!isExporting\" class=\"sdk-button\" (click)=\"apply()\">Export</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}.progress{color:var(--sdk-red)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDataGridExportOptionComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-datagrid-export-option', standalone: true, imports: [CommonModule], template: "<div class=\"sdk-datagrid-window\">\r\n <div class=\"header\">\r\n <span class=\"title\">Export</span>\r\n <span title=\"Close\" class=\"sdk-icon close\" (click)=\"close()\">close</span>\r\n </div>\r\n <div class=\"content no-actions\">\r\n <div class=\"no-box\">\r\n <div class=\"section\">\r\n <div style=\"display: inline-block;\">\r\n <input class=\"data-option\" type=\"checkbox\" [checked]=\"includeAllData\" (change)=\"includeAllData = !includeAllData\">\r\n <span class=\"data-label\" (click)=\"includeAllData = !includeAllData\">Include All Data</span>\r\n </div>\r\n </div>\r\n <div class=\"section\">\r\n <div style=\"display: inline-block; font-size: 0.8em;\">\r\n <span>NOTE: Exporting all data may take a while based on the total records in the dataset.</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <span *ngIf=\"isExporting\" class=\"progress\">Export in progress... please wait.</span>\r\n <button *ngIf=\"!isExporting\" class=\"sdk-button\" (click)=\"apply()\">Export</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}.progress{color:var(--sdk-red)}\n"] }]
}], propDecorators: { isExporting: [{
type: Input
}], closeEvent: [{
type: Output
}], applyEvent: [{
type: Output
}] } });
class SDKDataGridChartOptionComponent {
constructor() {
this.columns = [];
this.chart = "";
this.closeEvent = new EventEmitter();
this.applyEvent = new EventEmitter();
this.chartType = "bar";
this.columnLabel = "";
this.columnDataX = "";
this.columnDataY = "";
this.dataOption = false;
this._columns = [];
/**************************************************************************
* Message Variable
**************************************************************************/
this.showMessage = false;
this.message = new SDKDataGridMessage();
}
ngOnChanges(_args) {
this._columns = Clone.deepCopy(this.columns);
this.initialize();
}
initialize() {
this._columns = this._columns.filter((column) => column.isVisible && !column.isAction);
if (this.chart === "") {
this.chart = {
Type: "bar",
Show: false,
Label: "",
DataX: "",
DataY: "",
Option: false
};
}
this.chartType = this.chart.Type;
this.columnLabel = this.chart.Label;
this.columnDataX = this.chart.DataX;
this.columnDataY = this.chart.DataY;
this.dataOption = this.chart.Option;
}
getColumnOriginalName(column) {
let originalName = column.Name;
if (column.FriendlyName && column.FriendlyName !== "") {
originalName = column.FriendlyName;
}
else if (column.DisplayName && column.DisplayName !== "") {
originalName = column.DisplayName;
}
return originalName;
}
getValue(event) {
return event.target.value;
}
reset() {
this.message = {
Title: "Reset Chart",
Text: "Are you sure?",
OKText: "YES",
CancelText: "NO",
OK: () => {
this.chart = "";
this.initialize();
},
Cancel: () => {
this.showMessage = false;
}
};
this.showMessage = true;
}
apply() {
let show = true;
if (['bar', 'line', 'radar'].indexOf(this.chartType) > -1 && (this.columnLabel === "" || this.columnDataX === "" || this.columnDataY === ""))
show = false;
if (['doughnut', 'pie', 'polarArea'].indexOf(this.chartType) > -1 && (this.columnLabel === "" || this.columnDataY === ""))
show = false;
this.chart = {
Type: this.chartType,
Show: show,
Label: this.columnLabel,
DataX: this.columnDataX,
DataY: this.columnDataY,
Option: this.dataOption
};
this.applyEvent.emit(this.chart);
}
close() {
this.closeEvent.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDataGridChartOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SDKDataGridChartOptionComponent, isStandalone: true, selector: "sdk-datagrid-chart-option", inputs: { columns: "columns", chart: "chart" }, 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\">Chart</span>\r\n <span title=\"Close\" class=\"sdk-icon close\" (click)=\"close()\">close</span>\r\n </div>\r\n <div class=\"content no-actions\">\r\n <div class=\"no-box\">\r\n <div class=\"section\">\r\n <span>Chart Type</span>\r\n <select class=\"column\" (change)=\"chartType = getValue($event)\">\r\n <option value=\"bar\" [selected]=\"(chartType === 'bar') ? 'selected' : ''\">Bar</option>\r\n <option value=\"doughnut\" [selected]=\"(chartType === 'doughnut') ? 'selected' : ''\">Doughnut</option>\r\n <option value=\"line\" [selected]=\"(chartType === 'line') ? 'selected' : ''\">Line</option>\r\n <option value=\"pie\" [selected]=\"(chartType === 'pie') ? 'selected' : ''\">Pie</option>\r\n <option value=\"polarArea\" [selected]=\"(chartType === 'polarArea') ? 'selected' : ''\">Polar Area</option>\r\n <option value=\"radar\" [selected]=\"(chartType === 'radar') ? 'selected' : ''\">Radar</option>\r\n </select>\r\n </div>\r\n <div class=\"section\">\r\n <span *ngIf=\"['bar', 'line', 'radar'].indexOf(chartType) > -1\">Column for Grouping</span>\r\n <span *ngIf=\"['doughnut', 'pie', 'polarArea'].indexOf(chartType) > -1\">Column for Sections</span>\r\n <select class=\"column\" (change)=\"columnLabel = getValue($event)\">\r\n <option selected value=\"\"></option>\r\n <ng-container *ngFor=\"let column of _columns\">\r\n <option [value]=\"column.Name\" [selected]=\"(columnLabel === column.Name) ? 'selected' : ''\">{{ getColumnOriginalName(column) }}</option>\r\n </ng-container>\r\n </select>\r\n </div>\r\n <div *ngIf=\"['bar', 'line', 'radar'].indexOf(chartType) > -1\" class=\"section\">\r\n <span>Column for X-Axis (Bottom)</span>\r\n <span class=\"note\">(typically a timespan)</span>\r\n <select class=\"column\" (change)=\"columnDataX = getValue($event)\">\r\n <option selected value=\"\"></option>\r\n <ng-container *ngFor=\"let column of _columns\">\r\n <option [value]=\"column.Name\" [selected]=\"(columnDataX === column.Name) ? 'selected' : ''\">{{ getColumnOriginalName(column) }}</option>\r\n </ng-container>\r\n </select>\r\n </div>\r\n <div class=\"section\">\r\n <div *ngIf=\"['bar', 'line', 'radar'].indexOf(chartType) > -1\">\r\n <span>Column for Y-Axis (Left Side)</span>\r\n <span class=\"note\">(typically a number)</span>\r\n </div>\r\n <div *ngIf=\"['doughnut', 'pie', 'polarArea'].indexOf(chartType) > -1\">\r\n <span>Column to Summarize</span>\r\n <span class=\"note\">(must be a number)</span>\r\n </div>\r\n <select class=\"column\" (change)=\"columnDataY = getValue($event)\">\r\n <option selected value=\"\"></option>\r\n <ng-container *ngFor=\"let column of _columns\">\r\n <option [value]=\"column.Name\" [selected]=\"(columnDataY === column.Name) ? 'selected' : ''\">{{ getColumnOriginalName(column) }}</option>\r\n </ng-container>\r\n </select>\r\n </div>\r\n <div *ngIf=\"['bar'].indexOf(chartType) > -1\" class=\"section\">\r\n <div style=\"display: inline-block;\">\r\n <span class=\"data-label\" (click)=\"dataOption = !dataOption\">Stack Data?</span>\r\n <input class=\"data-option\" type=\"checkbox\" [checked]=\"dataOption\" (change)=\"dataOption = !dataOption\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"['line'].indexOf(chartType) > -1\" class=\"section\">\r\n <div style=\"display: inline-block;\">\r\n <span class=\"data-label\" (click)=\"dataOption = !dataOption\">Fill Data?</span>\r\n <input class=\"data-option\" type=\"checkbox\" [checked]=\"dataOption\" (change)=\"dataOption = !dataOption\">\r\n </div>\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}\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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDataGridChartOptionComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-datagrid-chart-option', standalone: true, imports: [CommonModule], template: "<div class=\"sdk-datagrid-window\">\r\n <div class=\"header\">\r\n <span class=\"title\">Chart</span>\r\n <span title=\"Close\" class=\"sdk-icon close\" (click)=\"close()\">close</span>\r\n </div>\r\n <div class=\"content no-actions\">\r\n <div class=\"no-box\">\r\n <div class=\"section\">\r\n <span>Chart Type</span>\r\n <select class=\"column\" (change)=\"chartType = getValue($event)\">\r\n <option value=\"bar\" [selected]=\"(chartType === 'bar') ? 'selected' : ''\">Bar</option>\r\n <option value=\"doughnut\" [selected]=\"(chartType === 'doughnut') ? 'selected' : ''\">Doughnut</option>\r\n <option value=\"line\" [selected]=\"(chartType === 'line') ? 'selected' : ''\">Line</option>\r\n <option value=\"pie\" [selected]=\"(chartType === 'pie') ? 'selected' : ''\">Pie</option>\r\n <option value=\"polarArea\" [selected]=\"(chartType === 'polarArea') ? 'selected' : ''\">Polar Area</option>\r\n <option value=\"radar\" [selected]=\"(chartType === 'radar') ? 'selected' : ''\">Radar</option>\r\n </select>\r\n </div>\r\n <div class=\"section\">\r\n <span *ngIf=\"['bar', 'line', 'radar'].indexOf(chartType) > -1\">Column for Grouping</span>\r\n <span *ngIf=\"['doughnut', 'pie', 'polarArea'].indexOf(chartType) > -1\">Column for Sections</span>\r\n <select class=\"column\" (change)=\"columnLabel = getValue($event)\">\r\n <option selected value=\"\"></option>\r\n <ng-container *ngFor=\"let column of _columns\">\r\n <option [value]=\"column.Name\" [selected]=\"(columnLabel === column.Name) ? 'selected' : ''\">{{ getColumnOriginalName(column) }}</option>\r\n </ng-container>\r\n </select>\r\n </div>\r\n <div *ngIf=\"['bar', 'line', 'radar'].indexOf(chartType) > -1\" class=\"section\">\r\n <span>Column for X-Axis (Bottom)</span>\r\n <span class=\"note\">(typically a timespan)</span>\r\n <select class=\"column\" (change)=\"columnDataX = getValue($event)\">\r\n <option selected value=\"\"></option>\r\n <ng-container *ngFor=\"let column of _columns\">\r\n <option [value]=\"column.Name\" [selected]=\"(columnDataX === column.Name) ? 'selected' : ''\">{{ getColumnOriginalName(column) }}</option>\r\n </ng-container>\r\n </select>\r\n </div>\r\n <div class=\"section\">\r\n <div *ngIf=\"['bar', 'line', 'radar'].indexOf(chartType) > -1\">\r\n <span>Column for Y-Axis (Left Side)</span>\r\n <span class=\"note\">(typically a number)</span>\r\n </div>\r\n <div *ngIf=\"['doughnut', 'pie', 'polarArea'].indexOf(chartType) > -1\">\r\n <span>Column to Summarize</span>\r\n <span class=\"note\">(must be a number)</span>\r\n </div>\r\n <select class=\"column\" (change)=\"columnDataY = getValue($event)\">\r\n <option selected value=\"\"></option>\r\n <ng-container *ngFor=\"let column of _columns\">\r\n <option [value]=\"column.Name\" [selected]=\"(columnDataY === column.Name) ? 'selected' : ''\">{{ getColumnOriginalName(column) }}</option>\r\n </ng-container>\r\n </select>\r\n </div>\r\n <div *ngIf=\"['bar'].indexOf(chartType) > -1\" class=\"section\">\r\n <div style=\"display: inline-block;\">\r\n <span class=\"data-label\" (click)=\"dataOption = !dataOption\">Stack Data?</span>\r\n <input class=\"data-option\" type=\"checkbox\" [checked]=\"dataOption\" (change)=\"dataOption = !dataOption\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"['line'].indexOf(chartType) > -1\" class=\"section\">\r\n <div style=\"display: inline-block;\">\r\n <span class=\"data-label\" (click)=\"dataOption = !dataOption\">Fill Data?</span>\r\n <input class=\"data-option\" type=\"checkbox\" [checked]=\"dataOption\" (change)=\"dataOption = !dataOption\">\r\n </div>\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}\n"] }]
}], propDecorators: { columns: [{
type: Input
}], chart: [{
type: Input
}], closeEvent: [{
type: Output
}], applyEvent: [{
type: Output
}] } });
class SDKDataGridColumn {
constructor() {
this.Name = ""; // Original db name.
this.DisplayName = ""; // System override of db name (Name).
this.FriendlyName = ""; // User provides. Produces * indicator.
this.Sort = null; // Sorting (asc/desc) applied to column data.
this.Filter = null; // Filters applied to column data.
this.Formulas = null; // Formulas applied to column.
this.showSort = true; // Allows you to turn on/off sorting capabilities.
this.showFilter = true; // Allows you to turn on/off filtering capabilities.
this.isAction = false; // Is the column associated to an action.
this.isVisible = true; // Allows you to turn on/off the visibility of the column.
this.actionSide = "right"; // right or left
this.dataStyle = ""; // Used to apply styles to the data element.
this.formulaStyle = ""; // Used to apply styles to the formula element.
// START: Filter properties
this.FilterMultiSelect = false; // Allows multiple filter values to be selected.
this.FilterTypes = []; // Allows you to define specific filter types. NOTE: If FilterMultiSelect = true, this property is forced to [Filters.Equals, Filters.NotEquals].
this.FilterValues = []; // Allows you to define specific filter values.
this.FilterType = FilterType.Textbox; // Type of filter (Textbox, TextboxOnly, Checkbox, Dropdown).
// END: Filter properties
// START: editTemplate option
this.allowEdit = true;
this.required = false;
this.notes = "";
this.validCharacters = "";
this.hint = "";
this.pattern = "";
this.height = "";
this.width = "";
this.border = "";
this.style = "";
// Original values - used with resets
this._original = {
index: null,
FriendlyName: "",
isVisible: true,
Sort: null,
Filter: null,
Formulas: null
};
}
}
var StorageType;
(function (StorageType) {
StorageType["Local"] = "localStorage";
StorageType["Session"] = "sessionStorage";
})(StorageType || (StorageType = {}));
class SDKDataGridOptions {
constructor() {
this.header = true;
this.footer = true;
this.paging = true;
this.options = true;
this.datasetTabs = false;
this.autoClosePanel = true;
this.minimizeOptions = false;
this.expandableRows = false;
this.sortableColumns = true;
this.settings = false;
this.columns = true;
this.filters = true;
this.sorts = true;
this.formulas = true;
this.charts = false;
this.export = true;
this.edit = false;
this.delete = true;
this.nowrap = false;
this.settingsStorage = StorageType.Local;
// Maybe remove?
this.panelOverlay = true;
this.selectableRows = false;
}
}
class SDKDataGridCustomFilter {
constructor() {
this.Name = ""; // Unique filter name.
this.DisplayName = ""; // Name to display to user.
this.Type = FilterType.Textbox; // Type of filter (Textbox, TextboxOnly, Checkbox, Dropdown).
this.notes = "";
// START: sdk-select properties for Dropdown filters.
this.FilterMultiSelect = false; // Allows multiple filter values to be selected.
this.FilterTypes = []; // Allows you to define specific filter types. NOTE: If FilterMultiSelect = true, this property is forced to [Filters.Equals, Filters.NotEquals].
this.FilterValues = []; // Allows you to define specific filter values.
this.Filter = null; // Values set for filter.
// END: sdk-select properties for Dropdown filters.
this._original = {
index: null,
Filter: null
};
}
}
class SDKDatagridComponent {
/**************************************************************************
* Private Variables
**************************************************************************/
/**************************************************************************
* Component Lifecycle Methods
**************************************************************************/
constructor(route) {
this.route = route;
/**************************************************************************
* Input/Output Parameters for updating the Grid
**************************************************************************/
this.updateGrid = false; // Applies changes/data to the grid.
this.updateGridChange = new EventEmitter(); // Callback to set updateGrid variable.
/**************************************************************************
* Input/Output Parameters for Grid scroll position
**************************************************************************/
this.scrollTop = 0; // Sets the scrollTop of the grid.
this.scrollLeft = 0; // Sets the scrollLeft of the grid.
this.scrollTopChange = new EventEmitter(); // Callback to set scrollTop position.
this.scrollLeftChange = new EventEmitter(); // Callback to set scrollLeft position.
this.editRecordIndexChange = new EventEmitter(); // Callback to set editRecordIndex variable.
/**************************************************************************
* Input/Output Parameters for dataset change
**************************************************************************/
this.datasets = []; // List of datasets.
this.activeDataset = ""; // The current selected dataset.
this.activeDatasetChange = new EventEmitter(); // Callback to set activeDataset variable.
/**************************************************************************
* Input/Output Parameters for updating columns
**************************************************************************/
this.columns = []; // The columns to be used for the grid.
this.columnHeaderStyle = ""; // Style used for column headers.
this.columnsChange = new EventEmitter(); // Callback to set columns variable.
/**************************************************************************
* Input/Output Parameters for updating custom filters
**************************************************************************/
this.customFilters = []; // Custom filters added to standard filter provided in loaddata callback (filters).
this.customFiltersChange = new EventEmitter(); // Callback to set custom filters variable.
/**************************************************************************
* Input/Output Parameters for exporting data
**************************************************************************/
this.dataExport = ""; // The data to export.
this.dataExportChange = new EventEmitter(); // Callback to set dataExport variable.
/**************************************************************************
* Input/Output Parameters for settings data
**************************************************************************/
this.settings = []; // Options that are saved outside the grid. This value should be set to the value retieved from the datagrid @Output method "settingsSavedEvent". Consider it a passthrough value.
this.clearSettingsCache = false; // Clears any grid storage of settings.
this.savedSettingsEvent = new EventEmitter(); // Used as a callback to save settings.
this.clearSettingsCacheChange = new EventEmitter(); // Callback to set clearSettingsCache variable.
/**************************************************************************
* Required Output Parameters
**************************************************************************/
this.loadDataEvent = new EventEmitter(); // Callback with grid changes.
/**************************************************************************
* Optional Input/Output Parameters
**************************************************************************/
this.name = ""; // Unique name of the grid (per page).
this.title = ""; // Title of the grid.
this.titleStyle = ""; // Style used for title.
this.fontFamily = ""; // font-family used for grid.
this.data = ""; // The data to display in the grid.
this.rowValues = [10, 25, 50, 100, 500, 1000]; // Sets the values used for records per page.
this.defaultRows = 100; // Default value for records per page.
this.saveGridDataEvent = new EventEmitter(); // Callback for saving changes to data.
this.deleteGridDataEvent = new EventEmitter(); // Callback for deleting data.
this.selectedRowsChangedEvent = new EventEmitter(); // Callback for row changes.
this.selectedRowActionEvent = new EventEmitter(); // // Callback for row actions. NOTE: The return object is { record: [the record], index: [the record index] }
/**************************************************************************
* Addon Parameters (Option Icon/Modal Window)
**************************************************************************/
this.optionAddons = [];
this.windowAddons = [];
/**************************************************************************
* Processing Parameters
**************************************************************************/
this.error = ""; // Any errors that occur during processing.
this.isDebug = false; // Turns on debugging.
this.showGrid = false;
this.editGrid = false;
this.totalPages = new Array(0);
this.deleteRecords = new Array(0);
this.editRecords = false;
/**************************************************************************
* Component Variables based on Input parameters
**************************************************************************/
this._editRecordIndex = undefined;
this._datasets = [];
this._activeDataset = "";
this._selectedDataset = "";
this._name = "";
this._options = new SDKDataGridOptions();
this._menuOptions = false;
this._data = "";
this._columns = [];
this._customFilters = [];
this._settings = [];
this._rows = 100;
this._page = 1;
this._selectedPage = "";
this._total = 0;
this._isExporting = false;
/**************************************************************************
* Options Variables
**************************************************************************/
this.optionTitle = "";
this.dataMode = "data";
this.dataClass = "";
this.columnBadge = "0";
this.filterBadge = "0";
this.sortBadge = "0";
this.formulaBadge = "0";
this.chartBadge = "0";
this.showReset = false;
this.showNote = false;
this.lockGrid = false;
/**************************************************************************
* Tooltip Variables
**************************************************************************/
this.tooltipTimer = null;
this.tooltipAutoCloseTimer = null;
this.tooltipVisible = false;
this.tooltipStyles = {};
this.recordIndex = null;
this.recordData = null;
/**************************************************************************
* Addon Variables
* - option(Inputs/Outputs): Used with the Addon icons.
* - window(Inputs/Outputs): Used with the Addon modal.
**************************************************************************/
this.optionInputs = {};
this.windowInputs = {};
this.optionOutputs = {
showDataOptionsEvent: (event) => this.showDataOptions(event),
};
this.windowOutputs = {
closeEvent: () => this.closeDataOptions(),
applyEvent: (event) => this.applyDataOptions(event),
};
/**************************************************************************
* Message Variable
**************************************************************************/
this.showMessage = false;
this.message = new SDKDataGridMessage();
}
ngOnChanges(_args) {
this.showLog("START Method: ngOnChanges >>>");
// this.showLog(["[Input]", Clone.deepCopy(_args)]);
// Handles update grid event
if (_args.updateGrid !== undefined) {
this.showLog(["updateGrid", _args.updateGrid.currentValue]);
if (_args.updateGrid.currentValue) {
if (_args.updateGrid.previousValue === undefined) {
this.setDatasets();
this.setActiveDataset(); // MUST be called before setName() - active dataset is used in setting the name.
this.setName();
this.setOptions();
this.setColumns();
this.setCustomFilters();
this.setSettings(); // MUST be called after setColumns() and setCustomFilters() in case a setting is set to active.
setTimeout(() => {
this.loadData("Initial Load", this._rows, 1);
}, 10);
}
else {
this.showLog("!!! Updating Grid !!!");
this.showInputValues();
this.setGrid();
this.setDatasets();
this.setActiveDataset(); // MUST be called before setName() - active dataset is used in setting the name.
this.setName();
this.setOptions();
this.setColumns();
this.setCustomFilters();
this.setSettings(); // MUST be called after setColumns() and setCustomFilters() in case a setting is set to active.
this.setBadges();
this.setData();
this.setRows();
this.setPage();
this.setTotal();
this.setSelectedPage();
this.showLog("!!! Grid Updated !!!");
this.showGrid = true;
setTimeout(() => {
this.editRecordIndexChange.emit(undefined);
if (this.sdkdatagridcontent) {
this.sdkdatagridcontent.nativeElement.scrollTop = this.scrollTop;
this.sdkdatagridcontent.nativeElement.scrollLeft = this.scrollLeft;
}
}, 10);
}
setTimeout(() => {
this.updateGridChange.emit(false);
}, 10);
}
}
// Handles edit mode event
if (_args.editRecordIndex) {
this.setEditRecordIndex();
}
// Handles "all data" export
if (_args.dataExport !== undefined && _args.dataExport.currentValue !== undefined && _args.dataExport.currentValue !== "") {
this.exportData(true, _args.dataExport.currentValue);
}
this.showLog(">>> END Method: ngOnChanges");
}
/**************************************************************************
* Change Methods
**************************************************************************/
showInputValues() {
this.showLog("*** START: Input Values ***");
this.showLog(["editRecordIndex:", this.editRecordIndex]);
this.showLog(["datasets:", this.datasets]);
this.showLog(["activeDataset:", this.activeDataset]);
this.showLog(["name:", this.name]);
this.showLog(["title:", this.title]);
this.showLog(["titleStyle:", this.titleStyle]);
this.showLog(["settings:", Clone.deepCopy(this.settings)]);
this.showLog(["options:", Clone.deepCopy(this.options)]);
this.showLog(["data:", Clone.deepCopy(this.data)]);
this.showLog(["columns:", Clone.deepCopy(this.columns)]);
this.showLog(["customFilters:", Clone.deepCopy(this.customFilters)]);
this.showLog(["rowValues:", this.rowValues]);
this.showLog(["defaultRows:", this.defaultRows]);
this.showLog(["rows:", this.rows]);
this.showLog(["page:", this.page]);
this.showLog(["total:", this.total]);
this.showLog("*** END: Input Values ***");
}
setGrid() {
this.showLog("START Method: setGrid >>>");
this.showLog(["Set Styles", this.fontFamily]);
if (this.sdkdatagrid) {
if (this.fontFamily !== "") {
this.sdkdatagrid.nativeElement.style.setProperty("--font-family", this.fontFamily);
}
}
if (this.sdkdatagridcontent) {
this.sdkdatagridcontent.nativeElement.scrollTop = 0;
this.sdkdatagridcontent.nativeElement.scrollLeft = 0;
}
this.showLog(">>> END Method: setGrid");
}
setDatasets() {
this.showLog("START Method: setDatasets >>>");
this.showLog(["[Input]", this.datasets]);
this._datasets = this.datasets ?? [];
this.datasetTabs = [];
this._datasets.forEach((dataset) => {
this.datasetTabs.push({
title: dataset,
type: null,
inputs: {},
outputs: {}
});
});
this.showLog(["[Output]", this._datasets]);
this.showLog(">>> END Method: setDatasets");
}
setActiveDataset() {
this.showLog("START Method: setActiveDataset >>>");
this.showLog(["[Input]", this.activeDataset]);
this._activeDataset = this.activeDataset !== "" ? this.activeDataset : (this._datasets.length > 0 ? this._datasets[0] : "");
// Initialize then let sdk-select handle value moving forward.
if (this._selectedDataset === "") {
this._selectedDataset = this._activeDataset;
}
// Set activeDatasetTab for sdk-tab.
let ndx = this.datasetTabs.findIndex((tab) => tab.title === this._activeDataset);
if (ndx > -1) {
this.activeDatasetTab = { ...this.datasetTabs[ndx] };
}
this.showLog(["[Output]", this._activeDataset]);
this.showLog(">>> END Method: setActiveDataset");
}
setName() {
this.showLog("START Method: setName >>>");
this.showLog(["[Input]", this.name]);
if (this.route.url) {
this.route.url.subscribe(([url]) => {
if (url) {
const { path } = url;
if (url.path)
this._name = `${url.path}_${this.route.component?.name}_${this.name}_${this._activeDataset}`;
}
});
}
if (this._name === "") {
this._name = `${this.route.component?.name}_${this.name}_${this._activeDataset}`;
}
this._name = this._name.replaceAll(/[^a-zA-Z0-9]/g, "_");
this.showLog(["[Output]", this._name]);
this.showLog(">>> END Method: setName");
}
setOptions() {
this.showLog("START Method: setOptions >>>");
this.showLog(["[Input]", Clone.deepCopy(this.options)]);
this._options = new SDKDataGridOptions();
if (this.options) {
Object.getOwnPropertyNames(this._options).forEach((prop) => {
const descriptor = Object.getOwnPropertyDescriptor(this.options, prop);
if (descriptor) {
this._options[prop] = this.options[prop];
}
});
}
if (this._options.minimizeOptions !== undefined) {
this._menuOptions = false;
}
this.showLog(["[Output]", Clone.deepCopy(this._options)]);
this.showLog(">>> END Method: setOptions");
}
setColumns() {
this.showLog("START Method: setColumns >>>");
this.showLog(["[Input]", Clone.deepCopy(this.columns)]);
this._columns = [];
let _tmp = Clone.deepCopy(this.columns);
if (!_tmp || _tmp.length === 0) {
_tmp = [];
if (this.data && this.data.length > 0) {
let data = Clone.deepCopy(this.data[0]);
for (let key in data) {
_tmp.push({ Name: key.toString() });
}
}
}
_tmp.forEach((column, index) => {
this.initializeColumn(new SDKDataGridColumn(), column, index);
});
// Load all left-side action columns.
_tmp.filter((column) => column.isAction && column.actionSide === "left").forEach((column) => {
this._columns.push({ ...column });
});
// Load all non-action columns.
_tmp.filter((column) => !column.isAction).forEach((column) => {
this._columns.push({ ...column });
});
// Load all right-side action columns.
_tmp.filter((column) => column.isAction && column.actionSide === "right").forEach((column) => {
this._columns.push({ ...column });
});
this.showLog(["[Output]", Clone.deepCopy(this._columns)]);
this.showLog(">>> END Method: setColumns");
}
setCustomFilters() {
this.showLog("START Method: setCustomFilters >>>");
this.showLog(["[Input]", Clone.deepCopy(this.customFilters)]);
this._customFilters = [];
let _tmp = Clone.deepCopy(this.customFilters);
if (_tmp && _tmp.length > 0) {
_tmp.forEach((filter, index) => {
this.initializeCustomFilter(new SDKDataGridCustomFilter(), filter, index);
this._customFilters.push({ ...filter });
});
}
this.showLog(["[Output]", Clone.deepCopy(this._customFilters)]);
this.showLog(">>> END Method: setCustomFilters");
}
setSettings() {
this.showLog("START Method: setSettings >>>");
if (!this._options.settings) {
this.settings = [];
// REMOVES SETTINGS FROM "GRID" STORAGE IF FORCED
if (this.clearSettingsCache) {
this.showLog("!!! Clear Settings Cache !!!");
let storageItemName = `SDK-DATAGRID_${this._name}`;
localStorage.removeItem(storageItemName);
sessionStorage.removeItem(storageItemName);
setTimeout(() => {
this.clearSettingsCacheChange.emit(false);
}, 10);
}
else {
// LOAD SETTINGS FROM "GRID" STORAGE
let storageItemName = `SDK-DATAGRID_${this._name}`;
let storage = this._options.settingsStorage === StorageType.Local ? localStorage.getItem(storageItemName) : sessionStorage.getItem(storageItemName);
if (storage) {
this.settings = JSON.parse(storage);
}
}
}
else {
let storageItemName = `SDK-DATAGRID_${this._name}`;
localStorage.removeItem(storageItemName);
sessionStorage.removeItem(storageItemName);
}
this.showLog(["[Input]", Clone.deepCopy(this.settings)]);
this._settings = [];
let _tmp = Clone.deepCopy(this.settings);
_tmp.forEach((setting) => {
let _setting = new SDKDataGridSettings();
Object.getOwnPropertyNames(_setting).forEach((prop) => {
const descriptor = Object.getOwnPropertyDescriptor(setting, prop);
if (!descriptor) {
setting[prop] = _setting[prop];
}
});
this._settings.push({ ...setting });
});
let ndx = this._settings.findIndex((setting) => setting.Active);
if (ndx > -1) {
this._columns = Clone.deepCopy(this._settings[ndx].Columns);
this._columns.forEach((column, index) => {
let columnNdx = this.columns.findIndex((c) => c.Name === column.Name);
if (columnNdx > -1) {
this.initializeColumn(this.columns[columnNdx], column, index);
}
});
this._customFilters = Clone.deepCopy(this._settings[ndx].CustomFilters);
this._customFilters.forEach((filter, index) => {
let filternNdx = this.customFilters.findIndex((f) => f.Name === filter.Name);
if (filternNdx > -1) {
this.initializeCustomFilter(this.customFilters[filternNdx], filter, index);
}
});
}
this.showLog(["[Output]", Clone.deepCopy(this._settings)]);
this.showLog(">>> END Method: setSettings");
}
setBadges() {
this.showLog("START Method: setBadges >>>");
this.showNote = this._columns.filter((column) => column.FriendlyName !== "").length > 0 ? true : false;
let columnCount = this._columns.filter((column, index) => index !== column._original.index).length > 0 ? 1 : 0;
columnCount += this._columns.filter((column) => column.isVisible !== column._original.isVisible || column.FriendlyName !== column._original.FriendlyName).length;
this.columnBadge = columnCount.toString();
let filterCount = this._columns.filter((column) => column.Filter).length;
filterCount += this._customFilters.filter((filter) => filter.Filter).length;
this.filterBadge = filterCount.toString();
this.sortBadge = this._columns.filter((column) => column.Sort).length.toString();
let formulaCount = 0;
this._columns.filter((column) => column.Formulas).forEach((column) => {
formulaCount += column.Formulas.length;
});
this.formulaBadge = formulaCount.toString();
if (this.columnBadge !== "0" || this.filterBadge !== "0" || this.sortBadge !== "0" || this.formulaBadge !== "0") {
this.showReset = true;
}
else {
this.showReset = false;
}
this.showLog(">>> END Method: setBadges");
}
setData() {
this.showLog("START Method: setData >>>");
this.showLog(["[Input]", Clone.deepCopy(this.data)]);
this._data = Clone.deepCopy(this.data);
this.showLog(["[Output]", Clone.deepCopy(this._data)]);
this.showLog(">>> END Method: setData");
}
setRows() {
this.showLog("START Method: setRows >>>");
this.showLog(["[Input]", this.rows, "(Default)", this.defaultRows]);
this._rows = this.rows ?? this.defaultRows;
this.showLog(["[Output]", this._rows]);
this.showLog(">>> END Method: setRows");
}
setPage() {
this.showLog("START Method: setPage >>>");
this.showLog(["[Input]", this.page]);
this._page = this.page ?? 1;
this.showLog(["[Output]", this._page]);
this.showLog(">>> END Method: setPage");
}
setTotal() {
this.showLog("START Method: setTotal >>>");
this.showLog(["[Input]", this.total]);
if (this.total === undefined) {
this._total = this._data.length;
}
else {
this._total = this.total;
}
this.showLog(["[Output]", this._total]);
this.showLog(">>> END Method: setTotal");
}
setSelectedPage() {
this.showLog("START Method: setSelectedPage >>>");
if (this.totalPages.length === 0 || this.totalPages.length !== Math.ceil(this._total / this._rows)) {
this.showLog("Updating pages...");
this.totalPages = new Array(0);
for (let p = 0; p < Math.ceil(this._total / this._rows); p++) {
let start = (p * this._rows) + 1;
let end = (start + this._rows) - 1;
if (end > this._total)
end = this._total;
this.totalPages.push(start.toString() + " - " + end.toString());
}
}
let rowStart = ((this._page - 1) * this._rows) + 1;
let rowEnd = (rowStart + this._rows) - 1;
if (rowEnd > this._total)
rowEnd = this._total;
this._selectedPage = rowStart.toString() + " - " + rowEnd.toString();
this.showLog(["[Output]", this._selectedPage]);
this.showLog(">>> END Method: setSelectedPage");
}
setEditRecordIndex() {
this.showLog("START Method: setEditRecordIndex >>>");
this.showLog(["[Input]", this.editRecordIndex]);
this._editRecordIndex = this.editRecordIndex;
this.showLog(["[Output]", this._editRecordIndex]);
this.showLog(">>> END Method: setEditRecordIndex");
}
/**************************************************************************
* Data Methods
**************************************************************************/
loadData(action, rows, page) {
this.showLog("START Method: loadData >>>");
this.showLog(["action", action, "rows", rows, "page", page]);
this.editRecordIndexChange.emit(undefined);
this.columnsChange.emit(this._columns);
this.customFiltersChange.emit(this._customFilters);
this.setAddonInputs();
this.loadDataEvent.emit({ action: action, rows: rows, page: page });
this.showLog(">>> END Method: loadData");
}
selectDataset(event) {
this.showLog("START Method: selectDataset (Dropdown) >>>");
this.showLog(["[Input]", event[0]]);
this.activeDatasetChange.emit(event[0]);
setTimeout(() => {
this.setActiveDataset(); // MUST be called before setName() - active dataset is used in setting the name.
this.setName();
this.setSettings(); // MUST be called in case columns are saved.
this.loadData(`Dataset Change`, this._rows, 1);
}, 10);
this.showLog(">>> END Method: selectDataset (Dropdown)");
}
datasetChanged(event) {
this.showLog("START Method: datasetChanged (Tab) >>>");
this.showLog(["[Input]", event]);
if (event.from) {
this.activeDatasetChange.emit(event.to.title);
setTimeout(() => {
this.setActiveDataset(); // MUST be called before setName() - active dataset is used in setting the name.
this.setName();
this.setSettings(); // MUST be called in case columns are saved.
this.loadData(`Dataset Change`, this._rows, 1);
}, 10);
}
this.showLog(">>> END Method: datasetChanged (Tab)");
}
saveData() {
this.showLog("START Method: saveData >>>");
if (this.missingData()) {
this.message = {
Title: "Missing Data",
Text: "You are missing some required data.",
OKText: "OK",
OK: () => {
this.showMessage = false;
}
};
}
else {
this.message = {
Title: "Save Changes",
Text: "Are you sure?",
OKText: "YES",
CancelText: "NO",
OK: () => {
this.showMessage = false;
this.editGrid = false;
this.editRecords = false;
if (this.saveGridDataEvent.observed) {
this.saveGridDataEvent.emit(this._data);
}
this.editRecordIndexChange.emit(undefined);
this.updateGridChange.emit(false);
},
Cancel: () => {
this.showMessage = false;
}
};
}
this.showMessage = true;
this.showLog(">>> END Method: saveData");
}
deleteData() {
this.showLog("START Method: deleteData >>>");
this.showLog(["records", this.deleteRecords]);
if (this.deleteRecords.length > 0) {
this.editRecords = this.hasDataChanged();
if (this.editRecords) {
this.message = {
Title: "Save Changes",
Text: "You've made changes to the data.<br /><br />Would you like to save them before continuing?",
OKText: "YES",
CancelText: "NO",
OK: () => {
this.editRecords = false;
if (this.saveGridDataEvent.observed) {
this.saveGridDataEvent.emit(this._data);
}
this.editRecordIndexChange.emit(undefined);
this.updateGridChange.emit(false);
this.deleteData();
},
Cancel: () => {
this.editRecords = false;
this._data = Clone.deepCopy(this.data);
this.deleteData();
}
};
}
else {
this.message = {
Title: "Delete record(s)",
Text: "Are you sure?",
OKText: "YES",
CancelText: "NO",
OK: () => {
this.showMessage = false;
if (this.deleteGridDataEvent.observed) {
this.deleteGridDataEvent.emit(this.deleteRecords);
}
this.deleteRecords = [];
},
Cancel: () => {
this.showMessage = false;
}
};
}
this.showMessage = true;
}
this.showLog(">>> END Method: deleteData");
}
selectRecord(index) {
let ndx = this.deleteRecords.findIndex((record) => record === index);
if (ndx > -1) {
this.deleteRecords.splice(ndx, 1);
}
else {
this.deleteRecords.push(index);
}
}
isRecordSelected(index) {
let ndx = this.deleteRecords.findIndex((record) => record === index);
if (ndx > -1) {
return true;
}
else {
return false;
}
}
cancelEdit() {
this.showLog("START Method: cancelEdit >>>");
this.editRecords = this.hasDataChanged();
if (this.editRecords) {
this.message = {
Title: "Cancel Changes",
Text: "You've made changes to the data.<br /><br />Are you sure you want to cancel without saving them?",
OKText: "YES",
CancelText: "NO",
OK: () => {
this.showMessage = false;
this.editGrid = false;
this.editRecords = false;
this.deleteRecords = [];
this.loadData("Cancel Changes", this._rows, this._page);
},
Cancel: () => {
this.showMessage = false;
}
};
this.showMessage = true;
}
else {
this.editGrid = false;
this.editRecords = false;
this.deleteRecords = [];
}
this.showLog(">>> END Method: cancelEdit");
}
hasDataChanged() {
return !(this.data.length === this._data.length &&
this.data.every((element_1) => this._data.some((element_2) => Object.keys(element_1).every((key) => element_1[key] === element_2[key]))));
}
missingData() {
return this._data.some((record) => {
return this._columns.filter((column) => column.required)
.some((column) => record[column.Name] === "");
});
}
/**************************************************************************
* Options Methods
**************************************************************************/
showDataOptions(type) {
this.showLog("START Method: showDataOptions >>>");
this.showLog(["type", type]);
this.lockGrid = true;
this.dataClass = this._options.panelOverlay ? "overlay" : "expand";
this.dataMode = "data";
this.optionTitle = type;
if (type === "export") {
this.dataExportChange.emit(""); // Clears out value
}
this.setAddonInputs();
this.showLog(">>> END Method: showDataOptions");
}
toggleDataMode(type, autoClose = false) {
// this.dataMode = type;
// if (this.dataMode === "data" && this.optionTitle === "Chart") {
// this.dataClass = "";
// this.optionTitle = "";
// }
// if (this.dataMode === "chart") {
// if (this.chart && this.chart !== "") {
// this.applyChartOptions(this.chart, autoClose);
// }
// }
}
closeDataOptions() {
this.showLog("START Method: closeDataOptions >>>");
this.optionTitle = "";
this.dataClass = "";
this.lockGrid = false;
this.setAddonInputs();
this.showLog(">>> END Method: closeDataOptions");
}
resetAllOptions() {
this.showLog("START Method: resetAllOptions >>>");
this.message = {
Title: "Reset ALL Options",
Text: "Are you sure?",
OKText: "YES",
CancelText: "NO",
OK: () => {
this.showMessage = false;
this.dataMode = "data";
this.optionTitle = "";
this.dataClass = "";
this._columns.sort((a, b) => (a._original.index > b._original.index) ? 1 : -1);
this._columns.forEach((column) => {
column.FriendlyName = column._original.FriendlyName;
column.isVisible = column._original.isVisible;
column.Sort = column._original.Sort;
column.Filter = column._original.Filter;
column.Formulas = column._original.Formulas;
});
this._customFilters.forEach((filter) => {
filter.Filter = filter._original.Filter;
});
if (this._options.settings) {
this.saveSettings(this._settings, true);
}
else {
// REMOVE SETTINGS FROM "GRID" STORAGE
let storageItemName = `SDK-DATAGRID_${this._name}`;
if (this._options.settingsStorage === StorageType.Local) {
localStorage.removeItem(storageItemName);
}
else {
sessionStorage.removeItem(storageItemName);
}
this.settings = [];
}
this.showReset = false;
this.loadData("Reset ALL Options", this._rows, 1);
},
Cancel: () => {
this.showMessage = false;
}
};
this.showMessage = true;
this.showLog(["columns", this._columns, "customFilters", this._customFilters]);
this.showLog(">>> END Method: resetAllOptions");
}
applyOptions(event) {
this.showLog("START Method: applyOptions >>>");
this.showLog(["[Input]", event]);
let action = "Options";
if (event?.option)
action = event.option;
if (event?.columns)
this._columns = event.columns;
if (event?.customFilters)
this._customFilters = event.customFilters;
if (this._options.settings) {
this.saveSettings(this._settings, true);
}
else {
// ADD SETTINGS TO "GRID" STORAGE
let storageItemName = `SDK-DATAGRID_${this._name}`;
let settings = [{
Name: "[sdk-datagrid Settings]",
Columns: this._columns,
CustomFilters: this._customFilters,
Active: true
}];
if (this._options.settingsStorage === StorageType.Local) {
localStorage.setItem(storageItemName, JSON.stringify(settings));
}
else {
sessionStorage.setItem(storageItemName, JSON.stringify(settings));
}
}
let rows = this._rows;
let page = this._page;
if (this.optionTitle !== "columns") {
page = 1;
}
if (this._options.autoClosePanel) {
this.closeDataOptions();
}
this.loadData(`Apply ${action}`, rows, page);
this.showLog(">>> END Method: applyOptions");
}
/**************************************************************************
* Addon Methods
**************************************************************************/
applyDataOptions(event) {
this.showLog("START Method: applyDataOptions >>>");
this.showLog(["option", this.optionTitle]);
if (event?.columns)
this._columns = event.columns;
if (event?.customFilters)
this._customFilters = event.customFilters;
this.editRecordIndexChange.emit(undefined);
this.columnsChange.emit(this._columns);
this.customFiltersChange.emit(this._customFilters);
this.loadDataEvent.emit({ action: this.optionTitle, rows: this._rows, page: 1, addon: event });
this.setAddonInputs();
this.showLog(">>> END Method: applyDataOptions");
}
setAddonInputs() {
this.optionInputs = {
optionTitle: this.optionTitle,
};
this.windowInputs = {
dataClass: this.dataClass,
optionTitle: this.optionTitle,
columns: this._columns ?? [],
customFilters: this._customFilters ?? []
};
}
/**************************************************************************
* Settings Methods
**************************************************************************/
applySettingsOptions(event) {
this.showLog("START Method: applySettingsOptions >>>");
this.showLog(["[Input]", event]);
if (event?.columns) {
this._columns = Clone.deepCopy(event.columns);
this._columns.forEach((column, index) => {
let columnNdx = this.columns.findIndex((c) => c.Name === column.Name);
if (columnNdx > -1) {
this.initializeColumn(this.columns[columnNdx], column, index);
}
});
}
if (event?.customFilters) {
this._customFilters = Clone.deepCopy(event.customFilters);
this._customFilters.forEach((filter, index) => {
let filternNdx = this.customFilters.findIndex((f) => f.Name === filter.Name);
if (filternNdx > -1) {
this.initializeCustomFilter(this.customFilters[filternNdx], filter, index);
}
});
}
let rows = this._rows;
let page = 1;
if (this._options.autoClosePanel) {
this.closeDataOptions();
}
this.loadData("Apply Settings", rows, page);
this.showLog(">>> END Method: applySettingsOptions");
}
saveSettings(event, resetActive = false) {
this.showLog("START Method: saveSettings >>>");
this.showLog(["[Input]", event]);
let settings = event.filter((setting) => setting.Name !== "[Current Settings]");
if (resetActive) {
settings.forEach((setting) => {
setting.Active = false;
});
}
this._settings = settings;
this.savedSettingsEvent.emit(this._settings);
this.showLog(">>> END Method: saveSettings");
}
/**************************************************************************
* Export Methods
**************************************************************************/
applyExportOptions(event) {
this.showLog("START Method: applyExportOptions >>>");
this.showLog(["[Input]", event]);
this._isExporting = true;
setTimeout(() => {
let includeAllData = event;
if (includeAllData) {
this.loadDataEvent.emit({ action: "Export Data" });
}
else {
this.exportData(false, Clone.deepCopy(this._data));
}
}, 100);
this.showLog(">>> END Method: applyExportOptions");
}
exportData(includeAllData, data) {
this.showLog("START Method: exportData >>>");
this.showLog(["includeAllData", includeAllData]);
if (!includeAllData) {
data = this.adjustExportColumns(data);
}
let dataArray = JSON.parse(JSON.stringify(data));
let link = document.createElement("a");
link.href = 'data:text/csv;charset=utf-8,' + this.convertToCSV(dataArray);
link.download = "export.csv";
link.click();
this._isExporting = false;
if (this._options.autoClosePanel) {
this.closeDataOptions();
}
this.showLog(">>> END Method: exportData");
}
adjustExportColumns(tmp) {
let rows = [];
tmp.forEach((row) => {
let columns = {};
this._columns.forEach((column) => {
if (column.isVisible && !column.isAction) {
if (column.FriendlyName !== "") {
columns[column.FriendlyName] = row[column.Name];
}
else if (column.DisplayName !== "") {
columns[column.DisplayName] = row[column.Name];
}
else {
columns[column.Name] = row[column.Name];
}
}
});
rows.push(columns);
});
return rows;
}
convertToCSV(objArray) {
let csv = "";
for (let row = 0; row < objArray.length; row++) {
let output = "";
// Add column names as first row.
if (csv === "") {
for (let column in objArray[row]) {
if (output !== "") {
output += ",";
}
output += column;
}
csv += `${output}\r\n`;
output = "";
}
for (let column in objArray[row]) {
if (output !== "") {
output += ",";
}
if (objArray[row][column]) {
let data = `"${objArray[row][column].toString().replace(/"/g, '""')}"`;
output += data;
}
else {
output += "";
}
}
csv += `${encodeURIComponent(output)}\r\n`;
}
return csv;
}
/**************************************************************************
* Row Methods
**************************************************************************/
takeAction(args) {
this.showLog("START Method: takeAction >>>");
this.showLog(["[Input]", args]);
if (this.selectedRowActionEvent.observed) {
this.selectedRowActionEvent.emit(args);
}
this.showLog(">>> END Method: takeAction");
}
setTooltip(event, index, record) {
if (!this.tooltipTemplate)
return;
if (index !== this.recordIndex) {
this.tooltipVisible = false;
this.tooltipStyles = {
position: 'fixed',
zIndex: '9999',
top: `0px`,
left: `0px`,
visibility: 'hidden'
};
this.recordIndex = index;
this.recordData = record;
}
}
showTooltip(event, index, record) {
if (!this.tooltipTemplate)
return;
clearTimeout(this.tooltipTimer);
clearTimeout(this.tooltipAutoCloseTimer);
if (!this.tooltipVisible) {
this.tooltipTimer = setTimeout(() => {
this.tooltipVisible = true;
this.setTooltipPosition(event);
}, 1000);
}
this.tooltipAutoCloseTimer = setTimeout(() => {
this.hideTooltip(event, -1, -1);
}, 5000);
}
keepTooltipAlive() {
if (!this.tooltipTemplate)
return;
clearTimeout(this.tooltipTimer);
clearTimeout(this.tooltipAutoCloseTimer);
this.tooltipVisible = true;
}
hideTooltip(event, index, record) {
if (!this.tooltipTemplate)
return;
clearTimeout(this.tooltipTimer);
clearTimeout(this.tooltipAutoCloseTimer);
if (this.tooltipVisible && index !== this.recordIndex) {
this.tooltipVisible = false;
this.recordIndex = null;
this.recordData = null;
this.tooltipStyles = {
position: 'fixed',
zIndex: '9999',
top: `0px`,
left: `0px`,
visibility: 'hidden'
};
}
}
setTooltipPosition(event) {
if (!this.tooltipTemplate)
return;
let offsetY = 5;
let offsetX = 5;
setTimeout(() => {
let tooltip = this.sdktooltip.nativeElement;
if (tooltip && (event.clientY + tooltip.offsetHeight) > (window.innerHeight - 50)) {
offsetY = (tooltip.offsetHeight * -1) - 5;
}
if (tooltip && (event.clientX + tooltip.offsetWidth) > (window.innerWidth - 100)) {
offsetX = (tooltip.offsetWidth * -1) - 5;
}
this.tooltipStyles = {
position: 'fixed',
zIndex: '9999',
top: `${event.clientY + offsetY}px`,
left: `${event.clientX + offsetX}px`,
visibility: 'visible'
};
}, 1);
}
/**************************************************************************
* Expand/Collapse Rows
**************************************************************************/
expandAll() {
this.setExpandedForAll(true);
}
collapseAll() {
this.setExpandedForAll(false);
}
toggleExpanded(rowItem) {
rowItem["Expanded"] = !rowItem["Expanded"];
}
isFirstColumn(column) {
let visibleColumns = this._columns.filter(c => c.isVisible);
return visibleColumns.length > 0 && column.Name === visibleColumns[0].Name;
}
setExpandedForAll(isExpanded) {
let dataItems = this._data;
dataItems.forEach((item) => {
item["Expanded"] = isExpanded;
});
}
/**************************************************************************
* Column Methods
**************************************************************************/
getColumnName(column) {
let originalName = column.Name;
if (column.FriendlyName !== "") {
originalName = `${column.FriendlyName} *`;
}
else if (column.DisplayName !== "") {
originalName = column.DisplayName;
}
return originalName;
}
getOriginalColumnName(column) {
let originalName = column.Name;
if (column.DisplayName && column.DisplayName !== "") {
originalName = column.DisplayName;
}
return `Orig. Name:\n${originalName}`;
}
hasVisibleColumns() {
return this._columns.filter((column) => column.isVisible);
}
hasFormulas() {
return this._columns.filter((column) => column.Formulas);
}
isColumnObject(value) {
if (typeof (value) === "object") {
return true;
}
else {
return false;
}
}
sortColumn(column) {
if (!this._options.sortableColumns)
return;
let ndx = this._columns.findIndex((c) => c.Name === column.Name);
let sort = null;
if (ndx > -1 && !this._columns[ndx].isAction && this._columns[ndx].showSort) {
sort = this._columns[ndx].Sort;
if (sort) {
this._columns[ndx].Sort.direction = (this._columns[ndx].Sort?.direction === Sorts.ASC) ? Sorts.DESC : Sorts.ASC;
}
else {
this._columns[ndx].Sort = { direction: Sorts.ASC, position: 0 };
}
this.applyOptions({ columns: this._columns });
}
}
/**************************************************************************
* Page Methods
**************************************************************************/
getRows(event) {
this.showLog("START Method: getRows >>>");
this.showLog(["rows", event[0]]);
this.loadData("Rows/Page Change", parseInt(event[0]), 1);
this.showLog(">>> END Method: getRows");
}
getPage(event) {
this.showLog("START Method: getPage >>>");
this.showLog(["page", Array.isArray(event) ? Math.ceil(parseInt(event[0].split(" - ")[1]) / this._rows) : event]);
if (Array.isArray(event))
event = Math.ceil(parseInt(event[0].split(" - ")[1]) / this._rows);
this.loadData("Page Change", this._rows, parseInt(event));
this.showLog(">>> END Method: getPage");
}
setScrollTopLeft() {
this.scrollTopChange.emit(this.sdkdatagridcontent.nativeElement.scrollTop);
this.scrollLeftChange.emit(this.sdkdatagridcontent.nativeElement.scrollLeft);
}
/**************************************************************************
* Util Methods
**************************************************************************/
initializeColumn(baseColumn, column, index) {
Object.getOwnPropertyNames(baseColumn).forEach((prop) => {
const descriptor = Object.getOwnPropertyDescriptor(column, prop);
if (!descriptor) {
column[prop] = baseColumn[prop];
}
});
// Set original values
if (!column._original || column._original.index === null) {
column._original.index = index;
column._original.FriendlyName = column.FriendlyName;
column._original.isVisible = column.isVisible;
column._original.Sort = column.Sort;
column._original.Filter = column.Filter;
column._original.Formulas = column.Formulas;
}
}
initializeCustomFilter(baseFilter, filter, index) {
Object.getOwnPropertyNames(baseFilter).forEach((prop) => {
const descriptor = Object.getOwnPropertyDescriptor(filter, prop);
if (!descriptor) {
filter[prop] = baseFilter[prop];
}
});
// Set original values
if (filter._original.index === null) {
filter._original.index = index;
filter._original.Filter = filter.Filter;
}
}
showLog(args) {
if (this.isDebug) {
if (Array.isArray(args)) {
console.log(...args);
}
else {
console.log(args);
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDatagridComponent, deps: [{ token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SDKDatagridComponent, isStandalone: true, selector: "sdk-datagrid", inputs: { updateGrid: "updateGrid", scrollTop: "scrollTop", scrollLeft: "scrollLeft", editRecordIndex: "editRecordIndex", datasets: "datasets", activeDataset: "activeDataset", columns: "columns", columnHeaderStyle: "columnHeaderStyle", detailTemplate: "detailTemplate", tooltipTemplate: "tooltipTemplate", customFilters: "customFilters", dataExport: "dataExport", settings: "settings", clearSettingsCache: "clearSettingsCache", name: "name", title: "title", titleStyle: "titleStyle", options: "options", fontFamily: "fontFamily", data: "data", rowValues: "rowValues", defaultRows: "defaultRows", rows: "rows", page: "page", total: "total", optionAddons: "optionAddons", windowAddons: "windowAddons", error: "error", isDebug: "isDebug" }, outputs: { updateGridChange: "updateGridChange", scrollTopChange: "scrollTopChange", scrollLeftChange: "scrollLeftChange", editRecordIndexChange: "editRecordIndexChange", activeDatasetChange: "activeDatasetChange", columnsChange: "columnsChange", customFiltersChange: "customFiltersChange", dataExportChange: "dataExportChange", savedSettingsEvent: "savedSettingsEvent", clearSettingsCacheChange: "clearSettingsCacheChange", loadDataEvent: "loadDataEvent", saveGridDataEvent: "saveGridDataEvent", deleteGridDataEvent: "deleteGridDataEvent", selectedRowsChangedEvent: "selectedRowsChangedEvent", selectedRowActionEvent: "selectedRowActionEvent" }, viewQueries: [{ propertyName: "sdkdatagrid", first: true, predicate: ["sdkdatagrid"], descendants: true }, { propertyName: "sdkdatagridcontent", first: true, predicate: ["sdkdatagridcontent"], descendants: true }, { propertyName: "sdktooltip", first: true, predicate: ["sdktooltip"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #sdkdatagrid title=\"\" class=\"sdk-datagrid-content\">\n <!-- Header (Title) -->\n <div *ngIf=\"_options.header\" class=\"sdk-datagrid-header\" [ngClass]=\"{ 'tabs': _options.datasetTabs }\">\n <div *ngIf=\"showGrid && _datasets.length === 0 && title !== ''\" class=\"title\" [ngClass]=\"{ 'centered': !titleStyle || titleStyle === '' }\" [style]=\"titleStyle\">{{ title }}</div>\n <div class=\"data\" *ngIf=\"showGrid && _datasets.length > 0\">\n <div *ngIf=\"!_options.datasetTabs\" class=\"notabs\" [ngClass]=\"{ 'notitle': title === ''}\">\n <sdk-select\n [label]=\"title\"\n [labelStyle]=\"'white-space: nowrap;' + titleStyle\"\n [options]=\"_datasets\"\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow-y: auto;'\"\n [selectedOptions]=\"[_selectedDataset]\"\n (selectChangeEvent)=\"selectDataset($event)\">\n </sdk-select>\n </div>\n <div class=\"tabs\" *ngIf=\"_options.datasetTabs\">\n <sdk-tabs\n [tabs]=\"datasetTabs\"\n [activeTab]=\"activeDatasetTab\"\n [height]=\"'30px'\"\n (tabChangedEvent)=\"datasetChanged($event)\">\n </sdk-tabs>\n </div>\n </div>\n </div>\n\n <!-- Minimized Options Button -->\n <div *ngIf=\"showGrid && _options.options\" class=\"sdk-datagrid-options-menu\" [ngClass]=\"{ 'tabs': _options.datasetTabs }\">\n <div *ngIf=\"!_options.minimizeOptions\" class=\"sizable\">\n <div *ngIf=\"!_menuOptions\" title=\"Show Options\" (click)=\"_menuOptions = true;\" class=\"sdk-icon\">menu_open</div>\n <div *ngIf=\"_menuOptions\" title=\"Hide Options\" (click)=\"_menuOptions = false;\" class=\"sdk-icon\">close</div>\n </div>\n <div *ngIf=\"_options.minimizeOptions\" class=\"always-on\">\n <div *ngIf=\"!_menuOptions\" title=\"Show Options\" (click)=\"_menuOptions = true;\" class=\"sdk-icon\">menu_open</div>\n <div *ngIf=\"_menuOptions\" title=\"Hide Options\" (click)=\"_menuOptions = false;\" class=\"sdk-icon\">close</div>\n </div>\n </div>\n\n <!-- Options -->\n <div *ngIf=\"showGrid && _options.options\" class=\"sdk-datagrid-options\" [ngClass]=\"{ 'no-header': !_options.header, 'no-footer': !_options.footer, 'hide': _options.minimizeOptions && !_menuOptions, 'hide-x': (_options.header || _options.minimizeOptions) && !_menuOptions, 'expand-top': !_options.header && _options.minimizeOptions, 'tabs': _options.datasetTabs }\">\n <div *ngIf=\"showGrid && !editGrid\" class=\"icons\">\n <div class=\"label-title\" title=\"Data Options\">Options</div>\n <div *ngIf=\"_options.settings\" class=\"option\" (click)=\"showDataOptions('settings')\">\n <div title=\"Settings\" class=\"sdk-icon\" [ngClass]=\"{ 'active': optionTitle === 'settings' }\">settings</div>\n </div>\n <div *ngIf=\"_options.expandableRows && detailTemplate\" class=\"option\">\n <div title=\"Expand All\" (click)=\"expandAll()\" class=\"sdk-icon\">unfold_more</div>\n </div>\n <div *ngIf=\"_options.expandableRows && detailTemplate\" class=\"option\">\n <div title=\"Collapse All\" (click)=\"collapseAll()\" class=\"sdk-icon\">unfold_less</div>\n </div>\n <div *ngIf=\"_options.columns\" class=\"option\" (click)=\"showDataOptions('columns')\">\n <div title=\"Columns\" class=\"sdk-icon\" [ngClass]=\"{ 'active': optionTitle === 'columns' }\">list_alt</div>\n <div *ngIf=\"columnBadge !== '0'\" class=\"badge\">\n <div class=\"label\">{{ columnBadge }}</div>\n </div>\n <div *ngIf=\"showNote\" class=\"note\">\n <div title=\"Column * indicates custom name is used.\" class=\"label\">i</div>\n </div>\n </div>\n <div *ngIf=\"_options.sorts\" class=\"option\" (click)=\"showDataOptions('sorts')\">\n <div title=\"Sorts\" class=\"sdk-icon\" [ngClass]=\"{ 'active': optionTitle === 'sorts' }\">sort_by_alpha</div>\n <div *ngIf=\"sortBadge !== '0'\" class=\"badge\">\n <div class=\"label\">{{ sortBadge }}</div>\n </div>\n </div>\n <div *ngIf=\"_options.filters\" class=\"option\" (click)=\"showDataOptions('filters')\">\n <div title=\"Filters\" class=\"sdk-icon\" [ngClass]=\"{ 'active': optionTitle === 'filters' }\">filter_alt</div>\n <div *ngIf=\"filterBadge !== '0'\" class=\"badge\">\n <div class=\"label\">{{ filterBadge }}</div>\n </div>\n </div>\n <div *ngIf=\"_options.formulas\" class=\"option\" (click)=\"showDataOptions('formulas')\">\n <div title=\"Formulas\" class=\"sdk-icon\" [ngClass]=\"{ 'active': optionTitle === 'formulas' }\">functions</div>\n <div *ngIf=\"formulaBadge !== '0'\" class=\"badge\">\n <div class=\"label\">{{ formulaBadge }}</div>\n </div>\n </div>\n <div *ngFor=\"let option of optionAddons\">\n <ng-container [ngComponentOutlet]=\"option\" [ndcDynamicInputs]=\"optionInputs\" [ndcDynamicOutputs]=\"optionOutputs\"></ng-container>\n </div>\n <div *ngIf=\"_options.export\" class=\"option\" (click)=\"showDataOptions('export')\">\n <div title=\"Export\" class=\"sdk-icon\" [ngClass]=\"{ 'active': optionTitle === 'export' }\">file_download</div>\n </div>\n <div *ngIf=\"showReset\" (click)=\"resetAllOptions()\">\n <div title=\"Reset All Options\" class=\"reset\">RESET</div>\n </div>\n <!-- <div *ngIf=\"_options.charts\" class=\"divider\"></div>\n <div *ngIf=\"_options.charts\" class=\"option\" (click)=\"toggleDataMode('data')\">\n <div title=\"Grid\" class=\"sdk-icon\" [ngClass]=\"{ 'active': dataMode === 'data' }\">storage</div>\n </div>\n <div *ngIf=\"_options.charts\" class=\"option\" (click)=\"showDataOptions('charts')\">\n <div title=\"Charts\" class=\"sdk-icon\" [ngClass]=\"{ 'active': dataMode === 'charts' }\">poll</div>\n <div *ngIf=\"chartBadge !== '0'\" class=\"badge\">\n <div class=\"label\">{{ chartBadge }}</div>\n </div>\n </div> -->\n <div *ngIf=\"_options.edit\" class=\"divider\"></div>\n <div *ngIf=\"_options.edit\" (click)=\"editGrid = true\">\n <div title=\"Edit Data\" class=\"sdk-icon\">edit_note</div>\n </div>\n <div class=\"divider\"></div>\n <div (click)=\"loadData('Refresh Data', _rows, _page)\">\n <div title=\"Refresh Data\" class=\"sdk-icon\">refresh</div>\n </div>\n </div>\n <div *ngIf=\"editGrid\" class=\"icons\">\n <div class=\"label-title\" title=\"Edit Options\">Edit Mode</div>\n <div (click)=\"saveData()\">\n <div title=\"Save Data\" class=\"sdk-icon\">save</div>\n </div>\n <div (click)=\"cancelEdit()\">\n <div title=\"Cancel Edit\" class=\"sdk-icon cancel\">close</div>\n </div>\n </div>\n </div>\n\n <!-- Content (Data) -->\n <div class=\"sdk-datagrid-data\" #sdkdatagridcontent (scroll)=\"setScrollTopLeft()\" [ngClass]=\"{ 'no-header': !_options.header, 'no-options': !showGrid || !_options.options || (_options.minimizeOptions && !_menuOptions), 'show-options': _menuOptions || (!_options.header && !_options.minimizeOptions && _options.options), 'no-footer': !_options.footer, 'expand-top': _options.options && !_options.header && _options.minimizeOptions, 'tabs': _options.datasetTabs }\" (mouseleave)=\"hideTooltip($event, -1, -1)\">\n <!-- Grid -->\n <table *ngIf=\"!error && showGrid\" class=\"sdk-table\">\n <caption style=\"display: none;\">sdk-datagrid</caption>\n\n <!-- Columns (Headers) -->\n <thead *ngIf=\"_columns.length > 0\" (mouseenter)=\"hideTooltip($event, -1, -1)\">\n <tr>\n <ng-container *ngFor=\"let _column of _columns; let i = index\">\n <th *ngIf=\"_column.isVisible\" [title]=\"(_column.FriendlyName !== '') ? getOriginalColumnName(_column) : ''\" [ngClass]=\"{ 'action-left': _column.isAction && _column.actionSide === 'left', 'action-right': _column.isAction && _column.actionSide === 'right' }\">\n <div *ngIf=\"!_column.headerTemplate\" [style]=\"(!_column.isAction && _column.showSort && _options.sortableColumns ? 'cursor: pointer;': '') + 'display: inline-flex; ' + columnHeaderStyle\" (click)=\"sortColumn(_column)\">{{ getColumnName(_column) }} <div *ngIf=\"_column.Sort\" class=\"sdk-icon\" style=\"font-size: 15px; padding-left: 5px;\">{{ (_column.Sort && _column.Sort.direction === \"desc\") ? \"arrow_upward\" : \"arrow_downward\"}}</div></div>\n <div *ngIf=\"!_column.headerTemplate && ((_editRecordIndex !== null && _editRecordIndex !== undefined) || editGrid) && _column.notes !== ''\" [title]=\"_column.notes\" class=\"sdk-icon header-info\">info</div>\n <ng-container *ngIf=\"_column.headerTemplate\" [ngTemplateOutlet]=\"_column.headerTemplate()\" [ngTemplateOutletContext]=\"{ index: i, column: _column, value: getColumnName(_column) }\"></ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"editGrid && _options.delete\" class=\"action-right\" style=\"text-align: center;\">\n <div title=\"Delete Selected Records\" class=\"sdk-icon delete\" (click)=\"deleteData()\">delete</div>\n </th>\n </tr>\n </thead>\n\n <!-- No Data -->\n <tbody class=\"no-records\">\n <tr>\n <td *ngIf=\"_data.length === 0 && (_columns.length === 0 || hasVisibleColumns().length > 0)\" colspan=\"1000\" class=\"text-left\">No records found.</td>\n <td *ngIf=\"_columns.length > 0 && hasVisibleColumns().length === 0\" colspan=\"1000\">No columns selected.</td>\n </tr>\n </tbody>\n\n <!-- Data -->\n <tbody class=\"alternate\">\n <ng-container *ngFor=\"let _record of _data; let i = index\">\n <tr [ngClass]=\"{ 'row-action': selectedRowActionEvent.observed && (_editRecordIndex === null || _editRecordIndex === undefined) && !editGrid }\" (click)=\"((_editRecordIndex === null || _editRecordIndex === undefined) && !editGrid) ? takeAction({ record: _record, index: i }) : $event.stopPropagation();\" (mouseenter)=\"setTooltip($event, i, _record)\" (mousemove)=\"showTooltip($event, i, _record)\" (mouseleave)=\"hideTooltip($event, i, _record)\">\n <ng-container *ngFor=\"let _column of _columns\">\n <!-- No Edit -->\n <td *ngIf=\"_column.isVisible && (!_column.allowEdit || _column.isAction || (i !== _editRecordIndex && !editGrid))\" [class]=\"_column.isAction ? 'no-hover' : ''\" [ngClass]=\"{ 'action-left': _column.isAction && _column.actionSide === 'left', 'action-right': _column.isAction && _column.actionSide === 'right', 'nowrap': _options.nowrap}\" (click)=\"(_column.isAction) ? $event.stopPropagation() : ''\">\n <div *ngIf=\"_options.expandableRows && detailTemplate && isFirstColumn(_column)\" class=\"expander\" (click)=\"toggleExpanded(_record)\">\n <span class=\"sdk-icon\">{{_record.Expanded? 'expand_more' : 'chevron_right'}}</span>\n </div>\n <div *ngIf=\"!_column.dataTemplate\" class=\"expander\" [style]=\"_column.dataStyle\">\n <ng-container *ngIf=\"!_column.formatData && isColumnObject(_record[_column.Name])\">\n {{ _record[_column.Name] | json }}\n </ng-container>\n <ng-container *ngIf=\"_column.formatData || !isColumnObject(_record[_column.Name])\">\n {{ _column.formatData? _column.formatData(_record[_column.Name]) : _record[_column.Name]}}\n </ng-container>\n </div>\n <ng-container *ngIf=\"_column.dataTemplate\" [ngTemplateOutlet]=\"_column.dataTemplate()\" [ngTemplateOutletContext]=\"{ index: i, record: _record, column: _column, value: _record[_column.Name] }\"></ng-container>\n </td>\n <!-- Edit -->\n <td *ngIf=\"_column.isVisible && _column.allowEdit && !_column.isAction && (i === _editRecordIndex || editGrid)\">\n <div *ngIf=\"!_column.editTemplate\">\n <sdk-textbox \n [title]=\"_record[_column.Name]\"\n [class]=\"_column.required ? 'sdk-textbox-required' : 'sdk-textbox'\"\n padding=\"5px\"\n [validCharacters]=\"_column.validCharacters ?? ''\"\n [pattern]=\"_column.pattern ?? ''\"\n [height]=\"_column.height === '' ? 'unset' : _column.height\"\n [width]=\"_column.width === '' ? 'unset' : _column.width\"\n [border]=\"_column.border\"\n [style]=\"_column.style\"\n [value]=\"_record[_column.Name]\"\n (changeCallBackEvent)=\"_record[_column.Name] = $event\">\n </sdk-textbox>\n </div>\n <ng-container *ngIf=\"_column.editTemplate\" [ngTemplateOutlet]=\"_column.editTemplate()\" [ngTemplateOutletContext]=\"{ index: i, record: _record, column: _column, value: _record[_column.Name] }\"></ng-container>\n </td>\n </ng-container>\n <td *ngIf=\"editGrid && _options.delete\" class=\"action-right\" style=\"text-align: center;\">\n <div (click)=\"selectRecord(i)\">\n <div class=\"sdk-icon left\">{{ isRecordSelected(i) ? 'check_box' : 'check_box_outline_blank' }}</div>\n </div>\n </td>\n </tr>\n <tr *ngIf=\"_options.expandableRows && detailTemplate && _record.Expanded\">\n <td [attr.colspan]=\"_columns.length\" class=\"row-detail\">\n <ng-container [ngTemplateOutlet]=\"detailTemplate\" [ngTemplateOutletContext]=\"{ index: i, record: _record }\"></ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n\n <!-- Formulas (Footer) -->\n <tfoot *ngIf=\"hasFormulas().length > 0\" (mouseenter)=\"hideTooltip($event, -1, -1)\">\n <tr>\n <ng-container *ngFor=\"let _column of _columns\">\n <th *ngIf=\"_column.isVisible\" [ngClass]=\"{ 'action-left': _column.isAction && _column.actionSide === 'left', 'action-right': _column.isAction && _column.actionSide === 'right' }\">\n <div *ngIf=\"_column.Formulas\">\n <div *ngFor=\"let formula of _column.Formulas\" class=\"formula\" [style]=\"_column.formulaStyle\">\n <span>{{ formula.operation }}</span>: <span style=\"font-weight: normal;\">{{ formula.value }}</span>\n </div>\n </div>\n </th>\n </ng-container>\n </tr>\n </tfoot>\n </table>\n <div #sdktooltip *ngIf=\"tooltipTemplate && tooltipVisible\" class=\"sdk-tooltip\" [ngStyle]=\"tooltipStyles\" (mousemove)=\"keepTooltipAlive()\" (mouseleave)=\"hideTooltip($event, recordIndex, recordData)\">\n <ng-container [ngTemplateOutlet]=\"tooltipTemplate\" [ngTemplateOutletContext]=\"{ index: recordIndex, record: recordData }\"></ng-container>\n </div>\n\n <!-- System Errors -->\n <div *ngIf=\"error\" class=\"system-error\" [ngClass]=\"{ 'no-header': !_options.header, 'no-options': !_options.options, 'no-footer': !_options.footer }\">\n <div class=\"bold\">ERROR:</div>\n <div [innerHTML]=\"error\"></div>\n <br />\n <button class=\"sdk-button\" (click)=\"loadData('reloadData', _rows, _page)\">Try Again?</button>\n </div>\n </div>\n\n <!-- Footer (Paging) -->\n <div *ngIf=\"_options.footer\" class=\"sdk-datagrid-footer\">\n <div *ngIf=\"showGrid && !editGrid && _options.paging && _total > 0\" class=\"left\">\n <sdk-select\n [label]=\"'Rows'\"\n [labelStyle]=\"'white-space: nowrap'\"\n [options]=\"rowValues\"\n [optionStyle]=\"'width: 100px;'\"\n [optionValuesStyle]=\"'bottom: 0; max-height: 150px; overflow: hidden; overflow: auto;'\"\n [selectedOptions]=\"[_rows]\"\n (selectChangeEvent)=\"getRows($event)\">\n </sdk-select>\n </div>\n <div *ngIf=\"showGrid && !editGrid && _options.paging && _total > 0\" class=\"center\">\n <div class=\"paging\">\n <table>\n <caption style=\"display: none;\">sdk-datagrid-paging</caption>\n <tbody>\n <tr>\n <td><div class=\"sdk-icon\" [ngClass]=\" { 'disabled': (_page - 1) === 0 }\" (click)=\"((_page - 1) === 0) ? false : getPage(1)\">keyboard_double_arrow_left</div></td>\n <td><div class=\"sdk-icon\" [ngClass]=\"{ 'disabled': (_page - 1) === 0 }\" (click)=\"((_page - 1) === 0) ? false : getPage(_page - 1)\">navigate_before</div></td>\n <td>\n <sdk-select\n [options]=\"totalPages\"\n [optionStyle]=\"'width: 175px;'\"\n [optionValuesStyle]=\"'bottom: 0; max-height: 200px; overflow: hidden; overflow: auto;'\"\n [selectedOptions]=\"[_selectedPage]\"\n (selectChangeEvent)=\"getPage($event)\">\n </sdk-select>\n </td>\n <td><div class=\"sdk-icon\" [ngClass]=\"{ 'disabled': _page >= totalPages.length }\" (click)=\"_page >= totalPages.length ? false : getPage(_page + 1)\">navigate_next</div></td>\n <td><div class=\"sdk-icon\" [ngClass]=\"{ 'disabled': _page >= totalPages.length }\" (click)=\"_page >= totalPages.length ? false : getPage(totalPages.length)\">keyboard_double_arrow_right</div></td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <div *ngIf=\"showGrid\" class=\"right\">\n <span style=\"font-weight: 600; padding-right: 5px;\">Total:</span>{{ _total | number:'1.0-0': 'en-US' }}\n </div>\n </div>\n</div>\n\n<!-- Option Windows -->\n<div *ngIf=\"_options.options\" title=\"\" class=\"sdk-datagrid-windows\" [ngClass]=\"dataClass\">\n <sdk-datagrid-settings-option *ngIf=\"optionTitle === 'settings'\"\n [settings]=\"_settings\"\n [columns]=\"_columns\"\n [customFilters]=\"_customFilters\"\n (closeEvent)=\"closeDataOptions()\"\n (saveEvent)=\"saveSettings($event)\"\n (applyEvent)=\"applySettingsOptions($event)\"></sdk-datagrid-settings-option>\n\n <sdk-datagrid-columns-option *ngIf=\"optionTitle === 'columns'\"\n [columns]=\"_columns\"\n (closeEvent)=\"closeDataOptions()\"\n (applyEvent)=\"applyOptions($event)\"></sdk-datagrid-columns-option>\n\n <sdk-datagrid-sort-option *ngIf=\"optionTitle === 'sorts'\"\n [columns]=\"_columns\"\n (closeEvent)=\"closeDataOptions()\"\n (applyEvent)=\"applyOptions($event)\"></sdk-datagrid-sort-option>\n\n <sdk-datagrid-filter-option *ngIf=\"optionTitle === 'filters'\"\n [columns]=\"_columns\"\n [customFilters]=\"_customFilters\"\n (closeEvent)=\"closeDataOptions()\"\n (applyEvent)=\"applyOptions($event)\"></sdk-datagrid-filter-option>\n\n <sdk-datagrid-formula-option *ngIf=\"optionTitle === 'formulas'\"\n [columns]=\"_columns\"\n (closeEvent)=\"closeDataOptions()\"\n (applyEvent)=\"applyOptions($event)\"></sdk-datagrid-formula-option>\n\n <sdk-datagrid-export-option *ngIf=\"optionTitle === 'export'\"\n [isExporting]=\"_isExporting\"\n (closeEvent)=\"closeDataOptions()\"\n (applyEvent)=\"applyExportOptions($event)\"></sdk-datagrid-export-option>\n\n <sdk-datagrid-chart-option *ngIf=\"optionTitle === 'charts'\"\n [columns]=\"_columns\"\n [chart]=\"null\"\n (closeEvent)=\"closeDataOptions()\"\n (applyEvent)=\"applyOptions($event)\"></sdk-datagrid-chart-option>\n\n <div *ngFor=\"let window of windowAddons\">\n <ng-container [ngComponentOutlet]=\"window\" [ndcDynamicInputs]=\"windowInputs\" [ndcDynamicOutputs]=\"windowOutputs\"></ng-container>\n </div>\n</div>\n\n<!-- Lock -->\n<div *ngIf=\"lockGrid || showMessage\" title=\"\" class=\"sdk-datagrid-windows-lock\"></div>\n\n<!-- Message -->\n<div *ngIf=\"showMessage\" title=\"\" class=\"sdk-datagrid-message\">\n <div class=\"title\">{{ message.Title }}</div>\n <div class=\"text\" [innerHtml]=\"message.Text\"></div>\n <div class=\"action\">\n <button class=\"sdk-button\" (click)=\"message.OK()\">{{ message.OKText }}</button>\n <button *ngIf=\"message.CancelText\" class=\"sdk-button cancel\" (click)=\"message.Cancel()\">{{ message.CancelText }}</button>\n </div>\n</div>\n", styles: ["::ng-deep .sdk-textbox-required{color:var(--sdk-red);border:1px solid var(--sdk-red);background-color:var(--sdk-light-red)}.sdk-datagrid-content *:not(.sdk-icon){font-family:var(--font-family, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\")}.sdk-datagrid-content .sdk-datagrid-header{position:absolute;top:0;left:0;right:0;height:50px;z-index:3;background-color:var(--sdk-background)}.sdk-datagrid-content .sdk-datagrid-header.tabs{height:30px}.sdk-datagrid-content .sdk-datagrid-header .title{font-size:1.25em;font-weight:600;height:100%}.sdk-datagrid-content .sdk-datagrid-header .title.centered{display:flex;align-items:center;justify-content:center}.sdk-datagrid-content .sdk-datagrid-header .data{position:absolute;inset:0;z-index:2;background-color:var(--sdk-background)}.sdk-datagrid-content .sdk-datagrid-header .data .notabs{padding:10px;max-width:250px}.sdk-datagrid-content .sdk-datagrid-header .data .notabs.notitle{padding-left:0}.sdk-datagrid-content .sdk-datagrid-header .data .tabs{position:absolute;top:0;left:0;right:0;height:30px}.sdk-datagrid-content .sdk-datagrid-options-menu{position:absolute;top:0;right:0;height:50px;width:90px;z-index:4}.sdk-datagrid-content .sdk-datagrid-options-menu.tabs{height:30px}.sdk-datagrid-content .sdk-datagrid-options-menu .sizable{position:absolute;top:50%;left:50%;padding:0;transform:translate(-50%,-50%);z-index:3;display:none}.sdk-datagrid-content .sdk-datagrid-options-menu .always-on{position:absolute;top:50%;left:50%;padding:0;transform:translate(-50%,-50%);z-index:3;display:block}.sdk-datagrid-content .sdk-datagrid-options{position:absolute;top:50px;right:0;bottom:50px;z-index:4;background-color:var(--sdk-background);width:90px;overflow:hidden;overflow-y:auto;display:block}.sdk-datagrid-content .sdk-datagrid-options.hide{display:none}.sdk-datagrid-content .sdk-datagrid-options.no-header{top:0}.sdk-datagrid-content .sdk-datagrid-options.no-footer{bottom:0}.sdk-datagrid-content .sdk-datagrid-options.expand-top{top:50px}.sdk-datagrid-content .sdk-datagrid-options.tabs{top:30px}.sdk-datagrid-content .sdk-datagrid-options .icons{position:absolute;inset:5px 10px 0;text-align:center}.sdk-datagrid-content .sdk-datagrid-options .icons .option{position:relative;display:block;cursor:default;width:40px;margin:0 auto}.sdk-datagrid-content .sdk-datagrid-options .icons .option .badge{position:absolute;top:-3px;right:0;height:15px;width:15px;border-radius:50%;background:var(--sdk-red);text-align:start}.sdk-datagrid-content .sdk-datagrid-options .icons .option .badge .label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:15px;width:15px;text-align:center;font-size:.7em;color:var(--sdk-white)}.sdk-datagrid-content .sdk-datagrid-options .icons .option .note{position:absolute;top:-3px;left:0;height:15px;width:15px;border-radius:50%;background:var(--sdk-green);text-align:start}.sdk-datagrid-content .sdk-datagrid-options .icons .option .note .label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:15px;width:15px;text-align:center;font-size:.7em;color:var(--sdk-white)}.sdk-datagrid-content .sdk-datagrid-options .icons .option .note:hover{background:var(--sdk-blue)}.sdk-datagrid-content .sdk-datagrid-options .icons .label-title{position:relative;display:block;font-size:.75em;font-weight:600;text-transform:uppercase;padding-bottom:10px}.sdk-datagrid-content .sdk-datagrid-options .icons .divider{display:block;margin:10px auto;height:2px;width:50px;background-color:var(--sdk-dark-gray)}.sdk-datagrid-content .sdk-datagrid-options .icons .reset{position:relative;display:block;margin:10px auto;font-size:small;font-weight:600;color:var(--sdk-red);text-transform:uppercase;cursor:pointer}.sdk-datagrid-content .sdk-datagrid-options .icons .reset:hover{color:var(--sdk-blue)}.sdk-datagrid-content .sdk-datagrid-data{position:absolute;inset:50px 90px 50px 0;z-index:1;border:.5px solid var(--sdk-border);background-color:var(--sdk-background);overflow:auto}.sdk-datagrid-content .sdk-datagrid-data.no-header{top:0}.sdk-datagrid-content .sdk-datagrid-data.no-options{right:0}.sdk-datagrid-content .sdk-datagrid-data.no-footer{bottom:0}.sdk-datagrid-content .sdk-datagrid-data.expand-top{top:50px}.sdk-datagrid-content .sdk-datagrid-data.tabs{top:30px}.sdk-datagrid-content .sdk-datagrid-data .sdk-table{width:100%;max-width:100%;border-collapse:separate;border-spacing:0;background-color:var(--sdk-background);cursor:default}.sdk-datagrid-content .sdk-datagrid-data .sdk-table .pointer,.sdk-datagrid-content .sdk-datagrid-data .sdk-table .pointer *{cursor:pointer}.sdk-datagrid-content .sdk-datagrid-data .sdk-table *{position:relative}.sdk-datagrid-content .sdk-datagrid-data .sdk-table thead tr th{position:sticky;position:-webkit-sticky;top:0;z-index:2;padding:.5rem;vertical-align:middle;text-align:left;white-space:nowrap;font-weight:600;background-color:var(--sdk-light-gray);border:.5px solid var(--sdk-border-dark)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table thead tr th.action-left{position:sticky;left:0;z-index:3;border-right:2px solid var(--sdk-border-dark)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table thead tr th.action-right{position:sticky;right:0;z-index:3;border-left:2px solid var(--sdk-border-dark)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate tr,.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate tr td.action-left,.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate tr td.action-right{background-color:var(--sdk-background)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate tr:hover{background-color:var(--sdk-light-blue)!important}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate tr:nth-child(odd){background-color:var(--sdk-light-white)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate tr:nth-child(odd) td.action-left,.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate tr:nth-child(odd) td.action-right{background-color:var(--sdk-light-white)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate .expander{display:inline;vertical-align:middle}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.no-records tr td{width:100%;text-align:center;font-weight:600;color:var(--sdk-red)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.no-records tr td.text-left{text-align:left}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody tr th{font-weight:600;background-color:var(--sdk-light-gray)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody tr td{padding:.75rem;vertical-align:middle;text-align:left;border:.5px solid var(--sdk-border)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody tr td.action-left{position:sticky;left:0;z-index:1;padding:0;border-right:2px solid var(--sdk-border-dark);cursor:default}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody tr td.action-right{position:sticky;right:0;z-index:1;padding:0;border-left:2px solid var(--sdk-border-dark);cursor:default}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody tr td.nowrap{white-space:nowrap}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody .row-action *{cursor:pointer}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody .row-action:hover *:not(.no-hover){color:var(--sdk-blue)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tfoot tr th{position:sticky;position:-webkit-sticky;bottom:0;z-index:2;padding:.5rem;vertical-align:middle;text-align:left;white-space:nowrap;font-weight:600;background-color:var(--sdk-light-gray);border:.5px solid var(--sdk-border-dark)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tfoot tr th.action-left{position:sticky;left:0;z-index:3;border-right:2px solid var(--sdk-border-dark)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tfoot tr th.action-right{position:sticky;right:0;z-index:3;border-left:2px solid var(--sdk-border-dark)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tfoot tr th .formula{font-size:.9em}.sdk-datagrid-content .sdk-datagrid-data .system-error{position:absolute;inset:10px;overflow:auto;text-align:center}.sdk-datagrid-content .sdk-datagrid-data .system-error .bold{font-weight:600}.sdk-datagrid-content .sdk-datagrid-data .system-error *{color:var(--sdk-red)}.sdk-datagrid-content .sdk-datagrid-data .system-error.no-header{top:10px}.sdk-datagrid-content .sdk-datagrid-data .system-error.no-options{right:10px}.sdk-datagrid-content .sdk-datagrid-data .system-error.no-footer{bottom:10px}.sdk-datagrid-content .sdk-datagrid-data .sdk-icon.header-info{display:inline-flex;font-size:1em;background-color:transparent;font-variation-settings:\"FILL\" 0;margin:0;padding:0;cursor:default}.sdk-datagrid-content .sdk-datagrid-data .sdk-tooltip{position:fixed;z-index:9999;background-color:var(--sdk-white);pointer-events:all;visibility:hidden;height:inherit;width:inherit}.sdk-datagrid-content .sdk-datagrid-footer{position:absolute;left:0;right:0;bottom:0;height:50px;z-index:3;background-color:var(--sdk-background)}.sdk-datagrid-content .sdk-datagrid-footer .left{position:absolute;top:50%;left:10px;transform:translateY(-50%);width:25%;white-space:nowrap;display:inline-flex;flex-direction:row;align-items:center}.sdk-datagrid-content .sdk-datagrid-footer .center{position:absolute;top:50%;left:25%;right:25%;transform:translateY(-50%);white-space:nowrap}.sdk-datagrid-content .sdk-datagrid-footer .center .paging{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sdk-datagrid-content .sdk-datagrid-footer .center .paging table{border-collapse:separate;border-spacing:0}.sdk-datagrid-content .sdk-datagrid-footer .center .paging table tbody tr td{border:none;padding:0;margin:0}.sdk-datagrid-content .sdk-datagrid-footer .center .paging table tbody tr:hover{background-color:transparent}.sdk-datagrid-content .sdk-datagrid-footer .right{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:25%;text-align:right;white-space:nowrap}.sdk-datagrid-windows{position:absolute;top:0;right:0;bottom:0;margin:0;font-weight:400;color:var(--sdk-font);line-height:1.25;z-index:9;width:450px;display:none;background-color:var(--sdk-light-gray);border-top:.5px solid var(--sdk-gray);border-left:.5px solid var(--sdk-gray);border-bottom:.5px solid var(--sdk-gray);box-shadow:-5px 0 10px #606060}.sdk-datagrid-windows.expand,.sdk-datagrid-windows.overlay{display:block}.sdk-datagrid-windows-lock{position:fixed;inset:0;z-index:8;overflow:hidden;background-color:var(--sdk-black);opacity:.33}.sdk-datagrid-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);height:250px;width:350px;background-color:var(--sdk-background);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}@media screen and (max-width: 750px){.sdk-datagrid-content .sdk-datagrid-header .data{right:80px}.sdk-datagrid-content .sdk-datagrid-header .data .notabs{max-width:unset;width:100%}.sdk-datagrid-content .sdk-datagrid-options-menu{width:70px}.sdk-datagrid-content .sdk-datagrid-options-menu .sizable{display:block}.sdk-datagrid-content .sdk-datagrid-options{bottom:100px;width:70px}.sdk-datagrid-content .sdk-datagrid-options.hide{display:unset}.sdk-datagrid-content .sdk-datagrid-options.hide-x{display:none}.sdk-datagrid-content .sdk-datagrid-data{right:0;bottom:100px}.sdk-datagrid-content .sdk-datagrid-data.show-options{right:70px}.sdk-datagrid-content .sdk-datagrid-footer{height:100px}.sdk-datagrid-content .sdk-datagrid-footer .left{top:10px;left:10px;bottom:unset;transform:unset;width:unset}.sdk-datagrid-content .sdk-datagrid-footer .center{top:unset;left:50%;bottom:30px;transform:translate(-50%)}.sdk-datagrid-content .sdk-datagrid-footer .right{top:10px;right:10px;bottom:unset;transform:unset;width:unset}.sdk-datagrid-content .sdk-datagrid-footer .right .paging{position:relative;top:unset;left:unset;transform:unset}.sdk-datagrid-windows{width:100%;box-shadow:unset}.sdk-datagrid-message{width:90%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: DynamicModule }, { kind: "directive", type: i3$1.DynamicIoDirective, selector: "[ndcDynamicInputs],[ndcDynamicOutputs]", inputs: ["ndcDynamicInputs", "ndcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "directive", type: i3$1.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "ngmodule", type: SDKLoadingModule }, { kind: "ngmodule", type: SDKMessageModule }, { 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: SDKTabsModule }, { kind: "component", type: i5.SDKTabsComponent, selector: "sdk-tabs", inputs: ["tabs", "activeTab", "fontFamily", "fontColor", "tabColor", "tabBorderColor", "activeTabColor", "activeFontColor", "height", "share"], outputs: ["tabChangedEvent"] }, { 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", "disableSuggestions", "showCalendarIcon", "calHeight", "calWidth", "calFontSize", "focus"], outputs: ["blurCallBackEvent", "changeCallBackEvent", "enterCallBackEvent"] }, { kind: "component", type: SDKDataGridSettingsOptionComponent, selector: "sdk-datagrid-settings-option", inputs: ["settings", "columns", "customFilters"], outputs: ["closeEvent", "saveEvent", "applyEvent"] }, { kind: "component", type: SDKDataGridColumnsOptionComponent, selector: "sdk-datagrid-columns-option", inputs: ["columns"], outputs: ["closeEvent", "applyEvent"] }, { kind: "component", type: SDKDataGridSortOptionComponent, selector: "sdk-datagrid-sort-option", inputs: ["columns"], outputs: ["closeEvent", "applyEvent"] }, { kind: "component", type: SDKDataGridFilterOptionComponent, selector: "sdk-datagrid-filter-option", inputs: ["columns", "customFilters"], outputs: ["closeEvent", "applyEvent"] }, { kind: "component", type: SDKDataGridFormulaOptionComponent, selector: "sdk-datagrid-formula-option", inputs: ["columns"], outputs: ["closeEvent", "applyEvent"] }, { kind: "component", type: SDKDataGridExportOptionComponent, selector: "sdk-datagrid-export-option", inputs: ["isExporting"], outputs: ["closeEvent", "applyEvent"] }, { kind: "component", type: SDKDataGridChartOptionComponent, selector: "sdk-datagrid-chart-option", inputs: ["columns", "chart"], outputs: ["closeEvent", "applyEvent"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDatagridComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-datagrid', standalone: true, imports: [
CommonModule,
DynamicModule,
SDKLoadingModule,
SDKMessageModule,
SDKSelectModule,
SDKTabsModule,
SDKTextboxModule,
SDKDataGridSettingsOptionComponent,
SDKDataGridColumnsOptionComponent,
SDKDataGridSortOptionComponent,
SDKDataGridFilterOptionComponent,
SDKDataGridFormulaOptionComponent,
SDKDataGridExportOptionComponent,
SDKDataGridChartOptionComponent,
], template: "<div #sdkdatagrid title=\"\" class=\"sdk-datagrid-content\">\n <!-- Header (Title) -->\n <div *ngIf=\"_options.header\" class=\"sdk-datagrid-header\" [ngClass]=\"{ 'tabs': _options.datasetTabs }\">\n <div *ngIf=\"showGrid && _datasets.length === 0 && title !== ''\" class=\"title\" [ngClass]=\"{ 'centered': !titleStyle || titleStyle === '' }\" [style]=\"titleStyle\">{{ title }}</div>\n <div class=\"data\" *ngIf=\"showGrid && _datasets.length > 0\">\n <div *ngIf=\"!_options.datasetTabs\" class=\"notabs\" [ngClass]=\"{ 'notitle': title === ''}\">\n <sdk-select\n [label]=\"title\"\n [labelStyle]=\"'white-space: nowrap;' + titleStyle\"\n [options]=\"_datasets\"\n [optionValuesStyle]=\"'max-height: 150px; overflow: hidden; overflow-y: auto;'\"\n [selectedOptions]=\"[_selectedDataset]\"\n (selectChangeEvent)=\"selectDataset($event)\">\n </sdk-select>\n </div>\n <div class=\"tabs\" *ngIf=\"_options.datasetTabs\">\n <sdk-tabs\n [tabs]=\"datasetTabs\"\n [activeTab]=\"activeDatasetTab\"\n [height]=\"'30px'\"\n (tabChangedEvent)=\"datasetChanged($event)\">\n </sdk-tabs>\n </div>\n </div>\n </div>\n\n <!-- Minimized Options Button -->\n <div *ngIf=\"showGrid && _options.options\" class=\"sdk-datagrid-options-menu\" [ngClass]=\"{ 'tabs': _options.datasetTabs }\">\n <div *ngIf=\"!_options.minimizeOptions\" class=\"sizable\">\n <div *ngIf=\"!_menuOptions\" title=\"Show Options\" (click)=\"_menuOptions = true;\" class=\"sdk-icon\">menu_open</div>\n <div *ngIf=\"_menuOptions\" title=\"Hide Options\" (click)=\"_menuOptions = false;\" class=\"sdk-icon\">close</div>\n </div>\n <div *ngIf=\"_options.minimizeOptions\" class=\"always-on\">\n <div *ngIf=\"!_menuOptions\" title=\"Show Options\" (click)=\"_menuOptions = true;\" class=\"sdk-icon\">menu_open</div>\n <div *ngIf=\"_menuOptions\" title=\"Hide Options\" (click)=\"_menuOptions = false;\" class=\"sdk-icon\">close</div>\n </div>\n </div>\n\n <!-- Options -->\n <div *ngIf=\"showGrid && _options.options\" class=\"sdk-datagrid-options\" [ngClass]=\"{ 'no-header': !_options.header, 'no-footer': !_options.footer, 'hide': _options.minimizeOptions && !_menuOptions, 'hide-x': (_options.header || _options.minimizeOptions) && !_menuOptions, 'expand-top': !_options.header && _options.minimizeOptions, 'tabs': _options.datasetTabs }\">\n <div *ngIf=\"showGrid && !editGrid\" class=\"icons\">\n <div class=\"label-title\" title=\"Data Options\">Options</div>\n <div *ngIf=\"_options.settings\" class=\"option\" (click)=\"showDataOptions('settings')\">\n <div title=\"Settings\" class=\"sdk-icon\" [ngClass]=\"{ 'active': optionTitle === 'settings' }\">settings</div>\n </div>\n <div *ngIf=\"_options.expandableRows && detailTemplate\" class=\"option\">\n <div title=\"Expand All\" (click)=\"expandAll()\" class=\"sdk-icon\">unfold_more</div>\n </div>\n <div *ngIf=\"_options.expandableRows && detailTemplate\" class=\"option\">\n <div title=\"Collapse All\" (click)=\"collapseAll()\" class=\"sdk-icon\">unfold_less</div>\n </div>\n <div *ngIf=\"_options.columns\" class=\"option\" (click)=\"showDataOptions('columns')\">\n <div title=\"Columns\" class=\"sdk-icon\" [ngClass]=\"{ 'active': optionTitle === 'columns' }\">list_alt</div>\n <div *ngIf=\"columnBadge !== '0'\" class=\"badge\">\n <div class=\"label\">{{ columnBadge }}</div>\n </div>\n <div *ngIf=\"showNote\" class=\"note\">\n <div title=\"Column * indicates custom name is used.\" class=\"label\">i</div>\n </div>\n </div>\n <div *ngIf=\"_options.sorts\" class=\"option\" (click)=\"showDataOptions('sorts')\">\n <div title=\"Sorts\" class=\"sdk-icon\" [ngClass]=\"{ 'active': optionTitle === 'sorts' }\">sort_by_alpha</div>\n <div *ngIf=\"sortBadge !== '0'\" class=\"badge\">\n <div class=\"label\">{{ sortBadge }}</div>\n </div>\n </div>\n <div *ngIf=\"_options.filters\" class=\"option\" (click)=\"showDataOptions('filters')\">\n <div title=\"Filters\" class=\"sdk-icon\" [ngClass]=\"{ 'active': optionTitle === 'filters' }\">filter_alt</div>\n <div *ngIf=\"filterBadge !== '0'\" class=\"badge\">\n <div class=\"label\">{{ filterBadge }}</div>\n </div>\n </div>\n <div *ngIf=\"_options.formulas\" class=\"option\" (click)=\"showDataOptions('formulas')\">\n <div title=\"Formulas\" class=\"sdk-icon\" [ngClass]=\"{ 'active': optionTitle === 'formulas' }\">functions</div>\n <div *ngIf=\"formulaBadge !== '0'\" class=\"badge\">\n <div class=\"label\">{{ formulaBadge }}</div>\n </div>\n </div>\n <div *ngFor=\"let option of optionAddons\">\n <ng-container [ngComponentOutlet]=\"option\" [ndcDynamicInputs]=\"optionInputs\" [ndcDynamicOutputs]=\"optionOutputs\"></ng-container>\n </div>\n <div *ngIf=\"_options.export\" class=\"option\" (click)=\"showDataOptions('export')\">\n <div title=\"Export\" class=\"sdk-icon\" [ngClass]=\"{ 'active': optionTitle === 'export' }\">file_download</div>\n </div>\n <div *ngIf=\"showReset\" (click)=\"resetAllOptions()\">\n <div title=\"Reset All Options\" class=\"reset\">RESET</div>\n </div>\n <!-- <div *ngIf=\"_options.charts\" class=\"divider\"></div>\n <div *ngIf=\"_options.charts\" class=\"option\" (click)=\"toggleDataMode('data')\">\n <div title=\"Grid\" class=\"sdk-icon\" [ngClass]=\"{ 'active': dataMode === 'data' }\">storage</div>\n </div>\n <div *ngIf=\"_options.charts\" class=\"option\" (click)=\"showDataOptions('charts')\">\n <div title=\"Charts\" class=\"sdk-icon\" [ngClass]=\"{ 'active': dataMode === 'charts' }\">poll</div>\n <div *ngIf=\"chartBadge !== '0'\" class=\"badge\">\n <div class=\"label\">{{ chartBadge }}</div>\n </div>\n </div> -->\n <div *ngIf=\"_options.edit\" class=\"divider\"></div>\n <div *ngIf=\"_options.edit\" (click)=\"editGrid = true\">\n <div title=\"Edit Data\" class=\"sdk-icon\">edit_note</div>\n </div>\n <div class=\"divider\"></div>\n <div (click)=\"loadData('Refresh Data', _rows, _page)\">\n <div title=\"Refresh Data\" class=\"sdk-icon\">refresh</div>\n </div>\n </div>\n <div *ngIf=\"editGrid\" class=\"icons\">\n <div class=\"label-title\" title=\"Edit Options\">Edit Mode</div>\n <div (click)=\"saveData()\">\n <div title=\"Save Data\" class=\"sdk-icon\">save</div>\n </div>\n <div (click)=\"cancelEdit()\">\n <div title=\"Cancel Edit\" class=\"sdk-icon cancel\">close</div>\n </div>\n </div>\n </div>\n\n <!-- Content (Data) -->\n <div class=\"sdk-datagrid-data\" #sdkdatagridcontent (scroll)=\"setScrollTopLeft()\" [ngClass]=\"{ 'no-header': !_options.header, 'no-options': !showGrid || !_options.options || (_options.minimizeOptions && !_menuOptions), 'show-options': _menuOptions || (!_options.header && !_options.minimizeOptions && _options.options), 'no-footer': !_options.footer, 'expand-top': _options.options && !_options.header && _options.minimizeOptions, 'tabs': _options.datasetTabs }\" (mouseleave)=\"hideTooltip($event, -1, -1)\">\n <!-- Grid -->\n <table *ngIf=\"!error && showGrid\" class=\"sdk-table\">\n <caption style=\"display: none;\">sdk-datagrid</caption>\n\n <!-- Columns (Headers) -->\n <thead *ngIf=\"_columns.length > 0\" (mouseenter)=\"hideTooltip($event, -1, -1)\">\n <tr>\n <ng-container *ngFor=\"let _column of _columns; let i = index\">\n <th *ngIf=\"_column.isVisible\" [title]=\"(_column.FriendlyName !== '') ? getOriginalColumnName(_column) : ''\" [ngClass]=\"{ 'action-left': _column.isAction && _column.actionSide === 'left', 'action-right': _column.isAction && _column.actionSide === 'right' }\">\n <div *ngIf=\"!_column.headerTemplate\" [style]=\"(!_column.isAction && _column.showSort && _options.sortableColumns ? 'cursor: pointer;': '') + 'display: inline-flex; ' + columnHeaderStyle\" (click)=\"sortColumn(_column)\">{{ getColumnName(_column) }} <div *ngIf=\"_column.Sort\" class=\"sdk-icon\" style=\"font-size: 15px; padding-left: 5px;\">{{ (_column.Sort && _column.Sort.direction === \"desc\") ? \"arrow_upward\" : \"arrow_downward\"}}</div></div>\n <div *ngIf=\"!_column.headerTemplate && ((_editRecordIndex !== null && _editRecordIndex !== undefined) || editGrid) && _column.notes !== ''\" [title]=\"_column.notes\" class=\"sdk-icon header-info\">info</div>\n <ng-container *ngIf=\"_column.headerTemplate\" [ngTemplateOutlet]=\"_column.headerTemplate()\" [ngTemplateOutletContext]=\"{ index: i, column: _column, value: getColumnName(_column) }\"></ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"editGrid && _options.delete\" class=\"action-right\" style=\"text-align: center;\">\n <div title=\"Delete Selected Records\" class=\"sdk-icon delete\" (click)=\"deleteData()\">delete</div>\n </th>\n </tr>\n </thead>\n\n <!-- No Data -->\n <tbody class=\"no-records\">\n <tr>\n <td *ngIf=\"_data.length === 0 && (_columns.length === 0 || hasVisibleColumns().length > 0)\" colspan=\"1000\" class=\"text-left\">No records found.</td>\n <td *ngIf=\"_columns.length > 0 && hasVisibleColumns().length === 0\" colspan=\"1000\">No columns selected.</td>\n </tr>\n </tbody>\n\n <!-- Data -->\n <tbody class=\"alternate\">\n <ng-container *ngFor=\"let _record of _data; let i = index\">\n <tr [ngClass]=\"{ 'row-action': selectedRowActionEvent.observed && (_editRecordIndex === null || _editRecordIndex === undefined) && !editGrid }\" (click)=\"((_editRecordIndex === null || _editRecordIndex === undefined) && !editGrid) ? takeAction({ record: _record, index: i }) : $event.stopPropagation();\" (mouseenter)=\"setTooltip($event, i, _record)\" (mousemove)=\"showTooltip($event, i, _record)\" (mouseleave)=\"hideTooltip($event, i, _record)\">\n <ng-container *ngFor=\"let _column of _columns\">\n <!-- No Edit -->\n <td *ngIf=\"_column.isVisible && (!_column.allowEdit || _column.isAction || (i !== _editRecordIndex && !editGrid))\" [class]=\"_column.isAction ? 'no-hover' : ''\" [ngClass]=\"{ 'action-left': _column.isAction && _column.actionSide === 'left', 'action-right': _column.isAction && _column.actionSide === 'right', 'nowrap': _options.nowrap}\" (click)=\"(_column.isAction) ? $event.stopPropagation() : ''\">\n <div *ngIf=\"_options.expandableRows && detailTemplate && isFirstColumn(_column)\" class=\"expander\" (click)=\"toggleExpanded(_record)\">\n <span class=\"sdk-icon\">{{_record.Expanded? 'expand_more' : 'chevron_right'}}</span>\n </div>\n <div *ngIf=\"!_column.dataTemplate\" class=\"expander\" [style]=\"_column.dataStyle\">\n <ng-container *ngIf=\"!_column.formatData && isColumnObject(_record[_column.Name])\">\n {{ _record[_column.Name] | json }}\n </ng-container>\n <ng-container *ngIf=\"_column.formatData || !isColumnObject(_record[_column.Name])\">\n {{ _column.formatData? _column.formatData(_record[_column.Name]) : _record[_column.Name]}}\n </ng-container>\n </div>\n <ng-container *ngIf=\"_column.dataTemplate\" [ngTemplateOutlet]=\"_column.dataTemplate()\" [ngTemplateOutletContext]=\"{ index: i, record: _record, column: _column, value: _record[_column.Name] }\"></ng-container>\n </td>\n <!-- Edit -->\n <td *ngIf=\"_column.isVisible && _column.allowEdit && !_column.isAction && (i === _editRecordIndex || editGrid)\">\n <div *ngIf=\"!_column.editTemplate\">\n <sdk-textbox \n [title]=\"_record[_column.Name]\"\n [class]=\"_column.required ? 'sdk-textbox-required' : 'sdk-textbox'\"\n padding=\"5px\"\n [validCharacters]=\"_column.validCharacters ?? ''\"\n [pattern]=\"_column.pattern ?? ''\"\n [height]=\"_column.height === '' ? 'unset' : _column.height\"\n [width]=\"_column.width === '' ? 'unset' : _column.width\"\n [border]=\"_column.border\"\n [style]=\"_column.style\"\n [value]=\"_record[_column.Name]\"\n (changeCallBackEvent)=\"_record[_column.Name] = $event\">\n </sdk-textbox>\n </div>\n <ng-container *ngIf=\"_column.editTemplate\" [ngTemplateOutlet]=\"_column.editTemplate()\" [ngTemplateOutletContext]=\"{ index: i, record: _record, column: _column, value: _record[_column.Name] }\"></ng-container>\n </td>\n </ng-container>\n <td *ngIf=\"editGrid && _options.delete\" class=\"action-right\" style=\"text-align: center;\">\n <div (click)=\"selectRecord(i)\">\n <div class=\"sdk-icon left\">{{ isRecordSelected(i) ? 'check_box' : 'check_box_outline_blank' }}</div>\n </div>\n </td>\n </tr>\n <tr *ngIf=\"_options.expandableRows && detailTemplate && _record.Expanded\">\n <td [attr.colspan]=\"_columns.length\" class=\"row-detail\">\n <ng-container [ngTemplateOutlet]=\"detailTemplate\" [ngTemplateOutletContext]=\"{ index: i, record: _record }\"></ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n\n <!-- Formulas (Footer) -->\n <tfoot *ngIf=\"hasFormulas().length > 0\" (mouseenter)=\"hideTooltip($event, -1, -1)\">\n <tr>\n <ng-container *ngFor=\"let _column of _columns\">\n <th *ngIf=\"_column.isVisible\" [ngClass]=\"{ 'action-left': _column.isAction && _column.actionSide === 'left', 'action-right': _column.isAction && _column.actionSide === 'right' }\">\n <div *ngIf=\"_column.Formulas\">\n <div *ngFor=\"let formula of _column.Formulas\" class=\"formula\" [style]=\"_column.formulaStyle\">\n <span>{{ formula.operation }}</span>: <span style=\"font-weight: normal;\">{{ formula.value }}</span>\n </div>\n </div>\n </th>\n </ng-container>\n </tr>\n </tfoot>\n </table>\n <div #sdktooltip *ngIf=\"tooltipTemplate && tooltipVisible\" class=\"sdk-tooltip\" [ngStyle]=\"tooltipStyles\" (mousemove)=\"keepTooltipAlive()\" (mouseleave)=\"hideTooltip($event, recordIndex, recordData)\">\n <ng-container [ngTemplateOutlet]=\"tooltipTemplate\" [ngTemplateOutletContext]=\"{ index: recordIndex, record: recordData }\"></ng-container>\n </div>\n\n <!-- System Errors -->\n <div *ngIf=\"error\" class=\"system-error\" [ngClass]=\"{ 'no-header': !_options.header, 'no-options': !_options.options, 'no-footer': !_options.footer }\">\n <div class=\"bold\">ERROR:</div>\n <div [innerHTML]=\"error\"></div>\n <br />\n <button class=\"sdk-button\" (click)=\"loadData('reloadData', _rows, _page)\">Try Again?</button>\n </div>\n </div>\n\n <!-- Footer (Paging) -->\n <div *ngIf=\"_options.footer\" class=\"sdk-datagrid-footer\">\n <div *ngIf=\"showGrid && !editGrid && _options.paging && _total > 0\" class=\"left\">\n <sdk-select\n [label]=\"'Rows'\"\n [labelStyle]=\"'white-space: nowrap'\"\n [options]=\"rowValues\"\n [optionStyle]=\"'width: 100px;'\"\n [optionValuesStyle]=\"'bottom: 0; max-height: 150px; overflow: hidden; overflow: auto;'\"\n [selectedOptions]=\"[_rows]\"\n (selectChangeEvent)=\"getRows($event)\">\n </sdk-select>\n </div>\n <div *ngIf=\"showGrid && !editGrid && _options.paging && _total > 0\" class=\"center\">\n <div class=\"paging\">\n <table>\n <caption style=\"display: none;\">sdk-datagrid-paging</caption>\n <tbody>\n <tr>\n <td><div class=\"sdk-icon\" [ngClass]=\" { 'disabled': (_page - 1) === 0 }\" (click)=\"((_page - 1) === 0) ? false : getPage(1)\">keyboard_double_arrow_left</div></td>\n <td><div class=\"sdk-icon\" [ngClass]=\"{ 'disabled': (_page - 1) === 0 }\" (click)=\"((_page - 1) === 0) ? false : getPage(_page - 1)\">navigate_before</div></td>\n <td>\n <sdk-select\n [options]=\"totalPages\"\n [optionStyle]=\"'width: 175px;'\"\n [optionValuesStyle]=\"'bottom: 0; max-height: 200px; overflow: hidden; overflow: auto;'\"\n [selectedOptions]=\"[_selectedPage]\"\n (selectChangeEvent)=\"getPage($event)\">\n </sdk-select>\n </td>\n <td><div class=\"sdk-icon\" [ngClass]=\"{ 'disabled': _page >= totalPages.length }\" (click)=\"_page >= totalPages.length ? false : getPage(_page + 1)\">navigate_next</div></td>\n <td><div class=\"sdk-icon\" [ngClass]=\"{ 'disabled': _page >= totalPages.length }\" (click)=\"_page >= totalPages.length ? false : getPage(totalPages.length)\">keyboard_double_arrow_right</div></td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <div *ngIf=\"showGrid\" class=\"right\">\n <span style=\"font-weight: 600; padding-right: 5px;\">Total:</span>{{ _total | number:'1.0-0': 'en-US' }}\n </div>\n </div>\n</div>\n\n<!-- Option Windows -->\n<div *ngIf=\"_options.options\" title=\"\" class=\"sdk-datagrid-windows\" [ngClass]=\"dataClass\">\n <sdk-datagrid-settings-option *ngIf=\"optionTitle === 'settings'\"\n [settings]=\"_settings\"\n [columns]=\"_columns\"\n [customFilters]=\"_customFilters\"\n (closeEvent)=\"closeDataOptions()\"\n (saveEvent)=\"saveSettings($event)\"\n (applyEvent)=\"applySettingsOptions($event)\"></sdk-datagrid-settings-option>\n\n <sdk-datagrid-columns-option *ngIf=\"optionTitle === 'columns'\"\n [columns]=\"_columns\"\n (closeEvent)=\"closeDataOptions()\"\n (applyEvent)=\"applyOptions($event)\"></sdk-datagrid-columns-option>\n\n <sdk-datagrid-sort-option *ngIf=\"optionTitle === 'sorts'\"\n [columns]=\"_columns\"\n (closeEvent)=\"closeDataOptions()\"\n (applyEvent)=\"applyOptions($event)\"></sdk-datagrid-sort-option>\n\n <sdk-datagrid-filter-option *ngIf=\"optionTitle === 'filters'\"\n [columns]=\"_columns\"\n [customFilters]=\"_customFilters\"\n (closeEvent)=\"closeDataOptions()\"\n (applyEvent)=\"applyOptions($event)\"></sdk-datagrid-filter-option>\n\n <sdk-datagrid-formula-option *ngIf=\"optionTitle === 'formulas'\"\n [columns]=\"_columns\"\n (closeEvent)=\"closeDataOptions()\"\n (applyEvent)=\"applyOptions($event)\"></sdk-datagrid-formula-option>\n\n <sdk-datagrid-export-option *ngIf=\"optionTitle === 'export'\"\n [isExporting]=\"_isExporting\"\n (closeEvent)=\"closeDataOptions()\"\n (applyEvent)=\"applyExportOptions($event)\"></sdk-datagrid-export-option>\n\n <sdk-datagrid-chart-option *ngIf=\"optionTitle === 'charts'\"\n [columns]=\"_columns\"\n [chart]=\"null\"\n (closeEvent)=\"closeDataOptions()\"\n (applyEvent)=\"applyOptions($event)\"></sdk-datagrid-chart-option>\n\n <div *ngFor=\"let window of windowAddons\">\n <ng-container [ngComponentOutlet]=\"window\" [ndcDynamicInputs]=\"windowInputs\" [ndcDynamicOutputs]=\"windowOutputs\"></ng-container>\n </div>\n</div>\n\n<!-- Lock -->\n<div *ngIf=\"lockGrid || showMessage\" title=\"\" class=\"sdk-datagrid-windows-lock\"></div>\n\n<!-- Message -->\n<div *ngIf=\"showMessage\" title=\"\" class=\"sdk-datagrid-message\">\n <div class=\"title\">{{ message.Title }}</div>\n <div class=\"text\" [innerHtml]=\"message.Text\"></div>\n <div class=\"action\">\n <button class=\"sdk-button\" (click)=\"message.OK()\">{{ message.OKText }}</button>\n <button *ngIf=\"message.CancelText\" class=\"sdk-button cancel\" (click)=\"message.Cancel()\">{{ message.CancelText }}</button>\n </div>\n</div>\n", styles: ["::ng-deep .sdk-textbox-required{color:var(--sdk-red);border:1px solid var(--sdk-red);background-color:var(--sdk-light-red)}.sdk-datagrid-content *:not(.sdk-icon){font-family:var(--font-family, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\")}.sdk-datagrid-content .sdk-datagrid-header{position:absolute;top:0;left:0;right:0;height:50px;z-index:3;background-color:var(--sdk-background)}.sdk-datagrid-content .sdk-datagrid-header.tabs{height:30px}.sdk-datagrid-content .sdk-datagrid-header .title{font-size:1.25em;font-weight:600;height:100%}.sdk-datagrid-content .sdk-datagrid-header .title.centered{display:flex;align-items:center;justify-content:center}.sdk-datagrid-content .sdk-datagrid-header .data{position:absolute;inset:0;z-index:2;background-color:var(--sdk-background)}.sdk-datagrid-content .sdk-datagrid-header .data .notabs{padding:10px;max-width:250px}.sdk-datagrid-content .sdk-datagrid-header .data .notabs.notitle{padding-left:0}.sdk-datagrid-content .sdk-datagrid-header .data .tabs{position:absolute;top:0;left:0;right:0;height:30px}.sdk-datagrid-content .sdk-datagrid-options-menu{position:absolute;top:0;right:0;height:50px;width:90px;z-index:4}.sdk-datagrid-content .sdk-datagrid-options-menu.tabs{height:30px}.sdk-datagrid-content .sdk-datagrid-options-menu .sizable{position:absolute;top:50%;left:50%;padding:0;transform:translate(-50%,-50%);z-index:3;display:none}.sdk-datagrid-content .sdk-datagrid-options-menu .always-on{position:absolute;top:50%;left:50%;padding:0;transform:translate(-50%,-50%);z-index:3;display:block}.sdk-datagrid-content .sdk-datagrid-options{position:absolute;top:50px;right:0;bottom:50px;z-index:4;background-color:var(--sdk-background);width:90px;overflow:hidden;overflow-y:auto;display:block}.sdk-datagrid-content .sdk-datagrid-options.hide{display:none}.sdk-datagrid-content .sdk-datagrid-options.no-header{top:0}.sdk-datagrid-content .sdk-datagrid-options.no-footer{bottom:0}.sdk-datagrid-content .sdk-datagrid-options.expand-top{top:50px}.sdk-datagrid-content .sdk-datagrid-options.tabs{top:30px}.sdk-datagrid-content .sdk-datagrid-options .icons{position:absolute;inset:5px 10px 0;text-align:center}.sdk-datagrid-content .sdk-datagrid-options .icons .option{position:relative;display:block;cursor:default;width:40px;margin:0 auto}.sdk-datagrid-content .sdk-datagrid-options .icons .option .badge{position:absolute;top:-3px;right:0;height:15px;width:15px;border-radius:50%;background:var(--sdk-red);text-align:start}.sdk-datagrid-content .sdk-datagrid-options .icons .option .badge .label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:15px;width:15px;text-align:center;font-size:.7em;color:var(--sdk-white)}.sdk-datagrid-content .sdk-datagrid-options .icons .option .note{position:absolute;top:-3px;left:0;height:15px;width:15px;border-radius:50%;background:var(--sdk-green);text-align:start}.sdk-datagrid-content .sdk-datagrid-options .icons .option .note .label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:15px;width:15px;text-align:center;font-size:.7em;color:var(--sdk-white)}.sdk-datagrid-content .sdk-datagrid-options .icons .option .note:hover{background:var(--sdk-blue)}.sdk-datagrid-content .sdk-datagrid-options .icons .label-title{position:relative;display:block;font-size:.75em;font-weight:600;text-transform:uppercase;padding-bottom:10px}.sdk-datagrid-content .sdk-datagrid-options .icons .divider{display:block;margin:10px auto;height:2px;width:50px;background-color:var(--sdk-dark-gray)}.sdk-datagrid-content .sdk-datagrid-options .icons .reset{position:relative;display:block;margin:10px auto;font-size:small;font-weight:600;color:var(--sdk-red);text-transform:uppercase;cursor:pointer}.sdk-datagrid-content .sdk-datagrid-options .icons .reset:hover{color:var(--sdk-blue)}.sdk-datagrid-content .sdk-datagrid-data{position:absolute;inset:50px 90px 50px 0;z-index:1;border:.5px solid var(--sdk-border);background-color:var(--sdk-background);overflow:auto}.sdk-datagrid-content .sdk-datagrid-data.no-header{top:0}.sdk-datagrid-content .sdk-datagrid-data.no-options{right:0}.sdk-datagrid-content .sdk-datagrid-data.no-footer{bottom:0}.sdk-datagrid-content .sdk-datagrid-data.expand-top{top:50px}.sdk-datagrid-content .sdk-datagrid-data.tabs{top:30px}.sdk-datagrid-content .sdk-datagrid-data .sdk-table{width:100%;max-width:100%;border-collapse:separate;border-spacing:0;background-color:var(--sdk-background);cursor:default}.sdk-datagrid-content .sdk-datagrid-data .sdk-table .pointer,.sdk-datagrid-content .sdk-datagrid-data .sdk-table .pointer *{cursor:pointer}.sdk-datagrid-content .sdk-datagrid-data .sdk-table *{position:relative}.sdk-datagrid-content .sdk-datagrid-data .sdk-table thead tr th{position:sticky;position:-webkit-sticky;top:0;z-index:2;padding:.5rem;vertical-align:middle;text-align:left;white-space:nowrap;font-weight:600;background-color:var(--sdk-light-gray);border:.5px solid var(--sdk-border-dark)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table thead tr th.action-left{position:sticky;left:0;z-index:3;border-right:2px solid var(--sdk-border-dark)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table thead tr th.action-right{position:sticky;right:0;z-index:3;border-left:2px solid var(--sdk-border-dark)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate tr,.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate tr td.action-left,.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate tr td.action-right{background-color:var(--sdk-background)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate tr:hover{background-color:var(--sdk-light-blue)!important}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate tr:nth-child(odd){background-color:var(--sdk-light-white)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate tr:nth-child(odd) td.action-left,.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate tr:nth-child(odd) td.action-right{background-color:var(--sdk-light-white)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.alternate .expander{display:inline;vertical-align:middle}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.no-records tr td{width:100%;text-align:center;font-weight:600;color:var(--sdk-red)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody.no-records tr td.text-left{text-align:left}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody tr th{font-weight:600;background-color:var(--sdk-light-gray)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody tr td{padding:.75rem;vertical-align:middle;text-align:left;border:.5px solid var(--sdk-border)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody tr td.action-left{position:sticky;left:0;z-index:1;padding:0;border-right:2px solid var(--sdk-border-dark);cursor:default}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody tr td.action-right{position:sticky;right:0;z-index:1;padding:0;border-left:2px solid var(--sdk-border-dark);cursor:default}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody tr td.nowrap{white-space:nowrap}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody .row-action *{cursor:pointer}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tbody .row-action:hover *:not(.no-hover){color:var(--sdk-blue)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tfoot tr th{position:sticky;position:-webkit-sticky;bottom:0;z-index:2;padding:.5rem;vertical-align:middle;text-align:left;white-space:nowrap;font-weight:600;background-color:var(--sdk-light-gray);border:.5px solid var(--sdk-border-dark)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tfoot tr th.action-left{position:sticky;left:0;z-index:3;border-right:2px solid var(--sdk-border-dark)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tfoot tr th.action-right{position:sticky;right:0;z-index:3;border-left:2px solid var(--sdk-border-dark)}.sdk-datagrid-content .sdk-datagrid-data .sdk-table tfoot tr th .formula{font-size:.9em}.sdk-datagrid-content .sdk-datagrid-data .system-error{position:absolute;inset:10px;overflow:auto;text-align:center}.sdk-datagrid-content .sdk-datagrid-data .system-error .bold{font-weight:600}.sdk-datagrid-content .sdk-datagrid-data .system-error *{color:var(--sdk-red)}.sdk-datagrid-content .sdk-datagrid-data .system-error.no-header{top:10px}.sdk-datagrid-content .sdk-datagrid-data .system-error.no-options{right:10px}.sdk-datagrid-content .sdk-datagrid-data .system-error.no-footer{bottom:10px}.sdk-datagrid-content .sdk-datagrid-data .sdk-icon.header-info{display:inline-flex;font-size:1em;background-color:transparent;font-variation-settings:\"FILL\" 0;margin:0;padding:0;cursor:default}.sdk-datagrid-content .sdk-datagrid-data .sdk-tooltip{position:fixed;z-index:9999;background-color:var(--sdk-white);pointer-events:all;visibility:hidden;height:inherit;width:inherit}.sdk-datagrid-content .sdk-datagrid-footer{position:absolute;left:0;right:0;bottom:0;height:50px;z-index:3;background-color:var(--sdk-background)}.sdk-datagrid-content .sdk-datagrid-footer .left{position:absolute;top:50%;left:10px;transform:translateY(-50%);width:25%;white-space:nowrap;display:inline-flex;flex-direction:row;align-items:center}.sdk-datagrid-content .sdk-datagrid-footer .center{position:absolute;top:50%;left:25%;right:25%;transform:translateY(-50%);white-space:nowrap}.sdk-datagrid-content .sdk-datagrid-footer .center .paging{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sdk-datagrid-content .sdk-datagrid-footer .center .paging table{border-collapse:separate;border-spacing:0}.sdk-datagrid-content .sdk-datagrid-footer .center .paging table tbody tr td{border:none;padding:0;margin:0}.sdk-datagrid-content .sdk-datagrid-footer .center .paging table tbody tr:hover{background-color:transparent}.sdk-datagrid-content .sdk-datagrid-footer .right{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:25%;text-align:right;white-space:nowrap}.sdk-datagrid-windows{position:absolute;top:0;right:0;bottom:0;margin:0;font-weight:400;color:var(--sdk-font);line-height:1.25;z-index:9;width:450px;display:none;background-color:var(--sdk-light-gray);border-top:.5px solid var(--sdk-gray);border-left:.5px solid var(--sdk-gray);border-bottom:.5px solid var(--sdk-gray);box-shadow:-5px 0 10px #606060}.sdk-datagrid-windows.expand,.sdk-datagrid-windows.overlay{display:block}.sdk-datagrid-windows-lock{position:fixed;inset:0;z-index:8;overflow:hidden;background-color:var(--sdk-black);opacity:.33}.sdk-datagrid-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);height:250px;width:350px;background-color:var(--sdk-background);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}@media screen and (max-width: 750px){.sdk-datagrid-content .sdk-datagrid-header .data{right:80px}.sdk-datagrid-content .sdk-datagrid-header .data .notabs{max-width:unset;width:100%}.sdk-datagrid-content .sdk-datagrid-options-menu{width:70px}.sdk-datagrid-content .sdk-datagrid-options-menu .sizable{display:block}.sdk-datagrid-content .sdk-datagrid-options{bottom:100px;width:70px}.sdk-datagrid-content .sdk-datagrid-options.hide{display:unset}.sdk-datagrid-content .sdk-datagrid-options.hide-x{display:none}.sdk-datagrid-content .sdk-datagrid-data{right:0;bottom:100px}.sdk-datagrid-content .sdk-datagrid-data.show-options{right:70px}.sdk-datagrid-content .sdk-datagrid-footer{height:100px}.sdk-datagrid-content .sdk-datagrid-footer .left{top:10px;left:10px;bottom:unset;transform:unset;width:unset}.sdk-datagrid-content .sdk-datagrid-footer .center{top:unset;left:50%;bottom:30px;transform:translate(-50%)}.sdk-datagrid-content .sdk-datagrid-footer .right{top:10px;right:10px;bottom:unset;transform:unset;width:unset}.sdk-datagrid-content .sdk-datagrid-footer .right .paging{position:relative;top:unset;left:unset;transform:unset}.sdk-datagrid-windows{width:100%;box-shadow:unset}.sdk-datagrid-message{width:90%}}\n"] }]
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }], propDecorators: { updateGrid: [{
type: Input
}], updateGridChange: [{
type: Output
}], scrollTop: [{
type: Input
}], scrollLeft: [{
type: Input
}], scrollTopChange: [{
type: Output
}], scrollLeftChange: [{
type: Output
}], editRecordIndex: [{
type: Input
}], editRecordIndexChange: [{
type: Output
}], datasets: [{
type: Input
}], activeDataset: [{
type: Input
}], activeDatasetChange: [{
type: Output
}], columns: [{
type: Input
}], columnHeaderStyle: [{
type: Input
}], columnsChange: [{
type: Output
}], detailTemplate: [{
type: Input
}], tooltipTemplate: [{
type: Input
}], customFilters: [{
type: Input
}], customFiltersChange: [{
type: Output
}], dataExport: [{
type: Input
}], dataExportChange: [{
type: Output
}], settings: [{
type: Input
}], clearSettingsCache: [{
type: Input
}], savedSettingsEvent: [{
type: Output
}], clearSettingsCacheChange: [{
type: Output
}], loadDataEvent: [{
type: Output
}], name: [{
type: Input
}], title: [{
type: Input
}], titleStyle: [{
type: Input
}], options: [{
type: Input
}], fontFamily: [{
type: Input
}], data: [{
type: Input
}], rowValues: [{
type: Input
}], defaultRows: [{
type: Input
}], rows: [{
type: Input
}], page: [{
type: Input
}], total: [{
type: Input
}], saveGridDataEvent: [{
type: Output
}], deleteGridDataEvent: [{
type: Output
}], selectedRowsChangedEvent: [{
type: Output
}], selectedRowActionEvent: [{
type: Output
}], optionAddons: [{
type: Input
}], windowAddons: [{
type: Input
}], error: [{
type: Input
}], isDebug: [{
type: Input
}], sdkdatagrid: [{
type: ViewChild,
args: ['sdkdatagrid']
}], sdkdatagridcontent: [{
type: ViewChild,
args: ['sdkdatagridcontent']
}], sdktooltip: [{
type: ViewChild,
args: ['sdktooltip']
}] } });
class SDKDatagridModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDatagridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SDKDatagridModule, imports: [SDKDatagridComponent], exports: [SDKDatagridComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDatagridModule, imports: [SDKDatagridComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKDatagridModule, decorators: [{
type: NgModule,
args: [{
imports: [
SDKDatagridComponent,
],
exports: [
SDKDatagridComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
}]
}] });
class SDKDataGridFilter {
}
class SDKDataGridSort {
}
class Colors {
static { this.defaultColors = [
"#02d8e3",
"#349ceb",
"#B2CC34",
"#00858c",
"#004d87",
"#829c03"
]; }
static getRandomColors(count = 1) {
let colors = [];
let letters = '0123456789ABCDEF'.split('');
if (count <= Colors.defaultColors.length) {
for (let c = 0; c < count; c++) {
colors.push(Colors.defaultColors[c]);
}
}
while (colors.length < count) {
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Colors.random(0, 15)];
}
if (colors.find((c) => c === color) === undefined) {
colors.push(color);
}
}
return colors;
}
static random(min, max) {
const crypto = window.crypto;
const range = max - min + 1;
const bytes_needed = Math.ceil(Math.log2(range) / 8);
const cutoff = Math.floor((256 ** bytes_needed) / range) * range;
const bytes = new Uint8Array(bytes_needed);
let value;
do {
crypto.getRandomValues(bytes);
value = bytes.reduce((acc, x, n) => acc + x * 256 ** n, 0);
} while (value >= cutoff);
return min + value % range;
}
}
/*
* Public API Surface of sdk-datagrid
*/
/**
* Generated bundle index. Do not edit.
*/
export { Colors, FilterType, Filters, FormulaOperation, SDKDataGridColumn, SDKDataGridCustomFilter, SDKDataGridFilter, SDKDataGridFormula, SDKDataGridOptions, SDKDataGridSettings, SDKDataGridSort, SDKDatagridComponent, SDKDatagridModule, Sorts, StorageType };
//# sourceMappingURL=sdk-datagrid.mjs.map