systelab-components
Version:
systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.
833 lines (821 loc) • 2.02 MB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, ViewChild, Output, Input, Component, HostListener, Directive, ViewChildren, Pipe, ContentChildren, InjectionToken, Optional, Inject, Injectable, ViewContainerRef, Injector, ElementRef, TemplateRef, ContentChild, NgModule, DOCUMENT } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/forms';
import { FormsModule, NG_VALIDATORS } from '@angular/forms';
import { polyfill } from 'mobile-drag-drop';
import * as i2$1 from '@angular/cdk/drag-drop';
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
import * as i1 from 'systelab-translate';
import { SystelabTranslateModule } from 'systelab-translate';
import { Subject, Subscription, timer, of, fromEvent, EMPTY, firstValueFrom, map } from 'rxjs';
import * as i4 from 'ag-grid-angular';
import { AgGridAngular, AgGridModule } from 'ag-grid-angular';
import * as i1$1 from 'systelab-preferences';
import * as i1$2 from '@angular/cdk/overlay';
import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { addYears, addMonths, addWeeks, addDays, getDaysInMonth, setDate, lastDayOfMonth, getISODay, getDate, isSameDay } from 'date-fns';
import * as i3$1 from 'primeng/config';
import { providePrimeNG } from 'primeng/config';
import * as i6 from 'primeng/datepicker';
import { DatePickerModule } from 'primeng/datepicker';
import * as i7 from 'primeng/api';
import { SplitComponent, AngularSplitModule } from 'angular-split';
import { debounceTime, delay, switchMap, takeUntil, pairwise } from 'rxjs/operators';
import { ContextMenuModule } from 'primeng/contextmenu';
import * as i2$2 from 'primeng/autocomplete';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { trigger, state, transition, style, animate } from '@angular/animations';
import { CdkTreeModule, NestedTreeControl } from '@angular/cdk/tree';
import interact from 'interactjs';
import * as i1$3 from '@angular/platform-browser';
import { ModuleRegistry, AllCommunityModule, provideGlobalGridOptions } from 'ag-grid-community';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { ArrayDataSource } from '@angular/cdk/collections';
class SliderComponent {
constructor() {
this.min = 0;
this.max = 100;
this.step = 1;
this.continuous = true;
this.value = 0;
this.valueChange = new EventEmitter();
}
sliderChangeEvent(event) {
const v = this.element.nativeElement.value;
if (v !== this.value) {
this.value = v;
this.valueChange.emit(this.value);
}
}
sliderInputEvent(event) {
if (this.continuous) {
this.value = this.element.nativeElement.value;
this.valueChange.emit(this.value);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: SliderComponent, isStandalone: false, selector: "systelab-slider", inputs: { min: "min", max: "max", step: "step", continuous: "continuous", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["range"], descendants: true }], ngImport: i0, template: "<input #range type=\"range\" min=\"{{ min }}\" max=\"{{ max }}\" value=\"{{ value }}\" step=\"{{ step }}\"\n (change)=\"sliderChangeEvent($event)\" (input)=\"sliderInputEvent($event)\" class=\"slab-slider\" id=\"myRange\" />" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SliderComponent, decorators: [{
type: Component,
args: [{ selector: 'systelab-slider', standalone: false, template: "<input #range type=\"range\" min=\"{{ min }}\" max=\"{{ max }}\" value=\"{{ value }}\" step=\"{{ step }}\"\n (change)=\"sliderChangeEvent($event)\" (input)=\"sliderInputEvent($event)\" class=\"slab-slider\" id=\"myRange\" />" }]
}], propDecorators: { min: [{
type: Input
}], max: [{
type: Input
}], step: [{
type: Input
}], continuous: [{
type: Input
}], value: [{
type: Input
}], valueChange: [{
type: Output
}], element: [{
type: ViewChild,
args: ['range', { static: false }]
}] } });
class SwitchComponent {
constructor() {
this.checked = false;
this.isCheckedChange = new EventEmitter();
this.disabled = false;
}
get isChecked() {
return this.checked;
}
set isChecked(val) {
this.checked = val;
this.isCheckedChange.emit(this.checked);
}
onToggle() {
if (!this.disabled) {
this.isChecked = !this.isChecked;
}
}
doKeyDown(event) {
if (event.key === ' ') {
if (!this.disabled) {
this.isChecked = !this.isChecked;
}
event.preventDefault();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: SwitchComponent, isStandalone: false, selector: "systelab-switch", inputs: { isChecked: "isChecked", disabled: "disabled" }, outputs: { isCheckedChange: "isCheckedChange" }, host: { listeners: { "click": "onToggle()" } }, ngImport: i0, template: "<span class=\"slab-switch\" [tabIndex]=\"disabled?-1:0\" [class.checked]=\"isChecked\" [class.disabled]=\"disabled\" (keydown)=\"doKeyDown($event)\">\n <span class=\"slab-tick\"></span>\n <input type=\"checkbox\" name=\"checkbox\" [checked]=\"isChecked\" [disabled]=\"disabled\" style=\"display:none\">\n <span class=\"slab-switch-text\"></span>\n</span>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SwitchComponent, decorators: [{
type: Component,
args: [{ selector: 'systelab-switch', standalone: false, template: "<span class=\"slab-switch\" [tabIndex]=\"disabled?-1:0\" [class.checked]=\"isChecked\" [class.disabled]=\"disabled\" (keydown)=\"doKeyDown($event)\">\n <span class=\"slab-tick\"></span>\n <input type=\"checkbox\" name=\"checkbox\" [checked]=\"isChecked\" [disabled]=\"disabled\" style=\"display:none\">\n <span class=\"slab-switch-text\"></span>\n</span>\n" }]
}], propDecorators: { isChecked: [{
type: Input
}], isCheckedChange: [{
type: Output
}], disabled: [{
type: Input
}], onToggle: [{
type: HostListener,
args: ['click']
}] } });
class ContextMenuActionData {
constructor(elementId, actionId) {
this.elementId = elementId;
this.actionId = actionId;
}
}
class AbstractContextComponent {
constructor(el, myRenderer, cdr) {
this.el = el;
this.myRenderer = myRenderer;
this.cdr = cdr;
this.action = new EventEmitter();
this.elementID = (Math.floor(Math.random() * (999999999999 - 1))).toString();
this.isEmbedded = false;
this.overflow = false;
this.isOpened = false;
this.previousShownMenu = [];
this.previousMenuWidth = [];
this.lastMenuLevel = 0;
}
ngOnInit() {
jQuery(this.dropdownParent.nativeElement)
.on('hide.bs.dropdown', this.actionsAfterCloseDropDown.bind(this));
}
onResize(event) {
if (this.isDropDownOpened()) {
this.closeDropDown();
}
}
isDropDownOpened() {
return this.dropdownParent.nativeElement.className.includes('show');
}
loop(x, y) {
if (this.isDropDownOpened()) {
this.myRenderer.setStyle(this.dropdownMenuElement.nativeElement, 'position', 'fixed');
if (this.isEmbedded) {
this.myRenderer.setStyle(this.dropdownMenuElement.nativeElement, 'transform', 'unset');
}
this.myRenderer.setStyle(this.dropdownElement.nativeElement, 'position', 'absolute');
y = y - this.dropdownParent.nativeElement.offsetHeight;
if (y + this.dropdownElement.nativeElement.offsetHeight > window.innerHeight) {
y = y - this.dropdownElement.nativeElement.offsetHeight;
if (y < 0) {
y = 0;
}
}
if (x + this.dropdownElement.nativeElement.offsetWidth > window.innerWidth) {
x = x - this.dropdownElement.nativeElement.offsetWidth;
}
this.myRenderer.setStyle(this.dropdownElement.nativeElement, 'top', y + 'px');
this.myRenderer.setStyle(this.dropdownElement.nativeElement, 'left', x + 'px');
this.myRenderer.setStyle(this.dropdownMenuElement.nativeElement, 'visibility', 'visible');
this.myRenderer.setStyle(this.dropdownMenuElement.nativeElement, 'backgroundColor', 'transparent');
this.myRenderer.setStyle(this.dropdownMenuElement.nativeElement, 'border', '0');
this.addListeners();
}
else {
setTimeout(() => this.loop(x, y), 10);
}
}
showDropDown(x, y) {
setTimeout(() => this.loop(x, y), 10);
}
resetDropDownPositionAndHeight() {
this.myRenderer.setStyle(this.dropdownElement.nativeElement, 'top', null);
this.myRenderer.setStyle(this.dropdownElement.nativeElement, 'left', null);
}
getFirstChildLeft(selectedChild) {
let firstChildLeft = this.dropdownElement.nativeElement.offsetWidth + 15;
const firstChildAbsoluteLeft = this.dropdownElement.nativeElement.offsetLeft;
if (firstChildAbsoluteLeft + this.dropdownElement.nativeElement.offsetWidth +
selectedChild.nativeElement.offsetWidth > window.innerWidth) {
firstChildLeft = -selectedChild.nativeElement.offsetWidth + 10;
}
return firstChildLeft;
}
getFirstChildLeftWithLevels(selectedChild, optionLevel, previousMenuWidth) {
let firstChildLeft;
let accumulativeLeft = 0;
const firstChildAbsoluteLeft = this.dropdownElement.nativeElement.offsetLeft;
if (optionLevel < 1) {
firstChildLeft = this.dropdownElement.nativeElement.offsetWidth + 12;
}
else {
firstChildLeft = previousMenuWidth[optionLevel - 1] + 12;
for (let i = 0; i < optionLevel; i++) {
accumulativeLeft = accumulativeLeft + previousMenuWidth[i];
}
}
if (firstChildAbsoluteLeft + this.dropdownElement.nativeElement.offsetWidth + accumulativeLeft +
selectedChild.nativeElement.offsetWidth > window.innerWidth) {
firstChildLeft = -selectedChild.nativeElement.offsetWidth + 15;
}
return firstChildLeft;
}
getFirstChildTop(event, selectedChild) {
const firstChildAbsoluteTop = event.clientY;
let firstChildRelativeTop = event.target.offsetTop;
if (firstChildAbsoluteTop + selectedChild.nativeElement.offsetHeight > window.innerHeight) {
firstChildRelativeTop = firstChildRelativeTop - selectedChild.nativeElement.offsetHeight;
}
return firstChildRelativeTop;
}
actionsAfterCloseDropDown() {
this.previousShownMenu = [];
this.previousMenuWidth = [];
this.lastMenuLevel = 0;
this.previousActionId = undefined;
this.isOpened = false;
this.cdr.detectChanges();
this.removeScrollHandler();
if (this.destroyWheelListener) {
this.destroyWheelListener();
}
if (this.destroyKeyListener) {
this.destroyKeyListener();
}
if (this.destroyMouseListener) {
this.destroyMouseListener();
}
this.resetDropDownPositionAndHeight();
}
closeDropDown() {
if (this.isDropDownOpened()) {
this.myRenderer.removeAttribute(this.dropdownParent.nativeElement, 'aria-expanded');
this.myRenderer.removeClass(this.dropdownParent.nativeElement, 'show');
this.myRenderer.removeClass(this.dropdownMenuElement.nativeElement, 'show');
this.myRenderer.setStyle(this.dropdownMenuElement.nativeElement, 'visibility', 'hidden');
}
this.actionsAfterCloseDropDown();
}
addListeners() {
this.addScrollHandler();
this.destroyMouseListener = this.myRenderer.listen('window', 'click', (evt) => {
this.handleMouseEvents(evt);
});
this.destroyWheelListener = this.myRenderer.listen('window', 'scroll', (evt) => {
this.handleWheelEvents(evt);
});
this.destroyKeyListener = this.myRenderer.listen('document', 'keydown', (evt) => {
this.handleKeyboardEvents(evt);
});
}
handleKeyboardEvents(event) {
if (event.key === 'Escape') {
if (this.isDropDownOpened()) {
this.closeDropDown();
}
}
}
handleWheelEvents(event) {
this.checkTargetAndClose(event.target);
}
handleMouseEvents(event) {
this.checkTargetAndClose(event.target);
}
scroll(event) {
this.checkTargetAndClose(event.target);
}
checkTargetAndClose(target) {
if (!this.checkIfNgContent(target)) {
if (this.isDropDownOpened()) {
this.closeDropDown();
}
}
}
ngContentStopPropagation(event) {
event.stopPropagation();
}
checkIfNgContent(target) {
let currentElement = target;
while (currentElement !== this.dropdownElement && currentElement) {
if (currentElement === this.ngcontent.nativeElement) {
return true;
}
else {
currentElement = currentElement.parentElement;
}
}
return false;
}
addScrollHandler() {
this.scrollHandler = this.scroll.bind(this);
window.addEventListener('scroll', this.scrollHandler, true);
}
removeScrollHandler() {
window.removeEventListener('scroll', this.scrollHandler, true);
}
ngOnDestroy() {
this.removeScrollHandler();
}
dotsClicked(event) {
if (!this.isDropDownOpened()) {
this.elementID = (Math.floor(Math.random() * (999999999999 - 1))).toString();
this.hideDivUntilIsPositioned(event.clientX, event.clientY);
}
}
hideDivUntilIsPositioned(x, y) {
// hide the div until is positioned in event x y position to avoid flick
this.myRenderer.setStyle(this.dropdownMenuElement.nativeElement, 'visibility', 'hidden');
this.isOpened = true;
this.cdr.detectChanges();
this.showDropDown(x, y);
}
open(event) {
jQuery('#' + this.elementID)
.dropdown('toggle');
if (!this.isDropDownOpened()) {
// Add class manually because is not set when jquery.dropdwon toogle is executed
this.myRenderer.addClass(this.dropdownParent.nativeElement, 'show');
this.hideDivUntilIsPositioned(event.clientX, event.clientY);
}
}
toggle(elementID) {
jQuery('#' + elementID)
.toggle();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AbstractContextComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: AbstractContextComponent, isStandalone: true, inputs: { elementID: "elementID", fontSize: "fontSize", fontColor: "fontColor", isEmbedded: "isEmbedded", overflow: "overflow" }, outputs: { action: "action" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "dropdownParent", first: true, predicate: ["dropdownparent"], descendants: true, static: true }, { propertyName: "dropdownMenuElement", first: true, predicate: ["dropdownmenu"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "ngcontent", first: true, predicate: ["ngcontent"], descendants: true }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AbstractContextComponent, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { dropdownParent: [{
type: ViewChild,
args: ['dropdownparent', { static: true }]
}], dropdownMenuElement: [{
type: ViewChild,
args: ['dropdownmenu', { static: false }]
}], dropdownElement: [{
type: ViewChild,
args: ['dropdown', { static: false }]
}], ngcontent: [{
type: ViewChild,
args: ['ngcontent', { static: false }]
}], action: [{
type: Output
}], elementID: [{
type: Input
}], fontSize: [{
type: Input
}], fontColor: [{
type: Input
}], isEmbedded: [{
type: Input
}], overflow: [{
type: Input
}], onResize: [{
type: HostListener,
args: ['window:resize', ['$event']]
}] } });
class AbstractContextMenuComponent extends AbstractContextComponent {
constructor() {
super(...arguments);
this.action = new EventEmitter();
this.levelSeparator = '_|_';
this.hasIcons = false;
}
set contextMenuOptions(value) {
this.contextMenuOptionsList = value;
this.checkIfHasIcons();
}
get contextMenuOptions() {
return this.contextMenuOptionsList;
}
ngOnInit() {
super.ngOnInit();
this.checkIfHasIcons();
}
dotsClicked(event) {
if (this.existsAtLeastOneActionEnabled()) {
super.dotsClicked(event);
}
else {
event.stopPropagation();
}
}
open(event) {
if (this.existsAtLeastOneActionEnabled()) {
super.open(event);
}
else {
event.stopPropagation();
}
}
doClick(event, elementID, action, parent) {
if (this.isEnabled(elementID, action.actionId)) {
this.executeAction(event, elementID, action.actionId);
}
}
doClickWithAction(event, elementID, actionId) {
if (this.isEnabled(elementID, actionId)) {
this.executeAction(event, elementID, actionId);
}
}
doMouseOver(event, elementID, actionId) {
if (this.isEnabled(elementID, actionId)) {
const optionAcitionId = this.getOptionDetailsActionId(actionId);
const selectedChild = this.childDropdownMenuElement.toArray()
.find((elem) => elem.nativeElement.id === (optionAcitionId + this.elementID));
this.showSubmenu(event, actionId, selectedChild, this.elementID);
}
}
getSelfReference() {
return this;
}
getMenuLevel(actionId) {
const actions = actionId ? actionId.split(this.levelSeparator) : [];
return actions.length - 1;
}
getOptionDetailsActionId(actionId) {
const option = this.getOption(actionId);
return option ? option.actionId : undefined;
}
getOptionDetailsHasChildren(actionId) {
const option = this.getOption(actionId);
return option ? option.hasChildren() : false;
}
showSubmenu(event, actionId, selectedChild, elementId) {
const optionActionId = this.getOptionDetailsActionId(actionId);
const optionHasChildren = this.getOptionDetailsHasChildren(actionId);
const optionLevel = this.getMenuLevel(actionId);
if (optionHasChildren) {
event.stopPropagation();
event.preventDefault();
if (this.previousActionId !== optionActionId) {
this.previousActionId = optionActionId;
this.hideSubmenus(optionLevel);
this.lastMenuLevel = optionLevel + 1;
this.previousShownMenu.push(optionActionId + elementId);
this.toggle(optionActionId + elementId);
this.previousMenuWidth[this.lastMenuLevel - 1] = selectedChild.nativeElement.offsetWidth;
const leftPosition = this.getFirstChildLeftWithLevels(selectedChild, optionLevel, this.previousMenuWidth);
this.myRenderer.setStyle(selectedChild.nativeElement, 'top', this.getFirstChildTop(event, selectedChild) + 'px');
if (selectedChild.nativeElement.getBoundingClientRect().top < 0) {
this.myRenderer.setStyle(selectedChild.nativeElement, 'top', (0 - event.clientY + selectedChild.nativeElement.parentElement.offsetTop + 10) + 'px');
}
this.myRenderer.setStyle(selectedChild.nativeElement, 'left', leftPosition + 'px');
}
}
else {
this.hideSubmenus(optionLevel);
this.lastMenuLevel = optionLevel;
event.stopPropagation();
event.preventDefault();
this.previousActionId = optionActionId;
}
}
checkIfHasIcons() {
this.hasIcons = false;
}
checkTargetAndClose(target) {
if (!this.checkIfNgContent(target)) {
if (target !== this.scrollableList.nativeElement && this.isDropDownOpened()) {
if (this.childDropdownMenuElement) {
if (!this.childDropdownMenuElement.toArray()
.some((elem) => target === elem.nativeElement)) {
this.closeDropDown();
}
}
else {
this.closeDropDown();
}
}
}
}
hideSubmenus(untilLevel) {
if (untilLevel < this.lastMenuLevel) {
for (let i = this.lastMenuLevel; i > untilLevel; i--) {
if (this.previousShownMenu[i - 1]) {
this.toggle(this.previousShownMenu[i - 1]);
}
this.previousShownMenu.pop();
this.lastMenuLevel = i - 1;
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AbstractContextMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: AbstractContextMenuComponent, isStandalone: true, inputs: { contextMenuOptions: "contextMenuOptions" }, outputs: { action: "action" }, viewQueries: [{ propertyName: "scrollableList", first: true, predicate: ["scrollableList"], descendants: true }, { propertyName: "childDropdownMenuElement", predicate: ["childdropdownmenu"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AbstractContextMenuComponent, decorators: [{
type: Directive
}], propDecorators: { childDropdownMenuElement: [{
type: ViewChildren,
args: ['childdropdownmenu']
}], scrollableList: [{
type: ViewChild,
args: ['scrollableList', { static: false }]
}], action: [{
type: Output
}], contextMenuOptions: [{
type: Input
}] } });
class ContextMenuItemComponent {
constructor() {
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ContextMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ContextMenuItemComponent, isStandalone: false, selector: "systelab-context-menu-item", inputs: { action: "action", hasIcons: "hasIcons", isEnabled: "isEnabled", isIconEnabled: "isIconEnabled", hasChildren: "hasChildren" }, ngImport: i0, template: "@if (hasIcons && isIconEnabled) {\n <div\n class=\"slab-icon-container rounded d-flex text-center justify-content-center align-items-center\"\n [style.background-color]=\"action.backgroundIconColor\">\n <i class=\"slab-flex-1 slab-menu-icon {{action.iconClass}}\" [style.color]=\"action.iconColor\"\n [style.font-size]=\"action.iconFontSize\"\n [ngClass]=\"{'text-white': !action.iconColor}\"></i>\n </div>\n}\n<a class=\"slab-flex-1\" style=\"flex:1 1 auto\" [style.padding-left]=\"hasIcons && !isIconEnabled?'20px':'0'\"\n[ngClass]=\"{'ml-2': hasIcons}\">{{action.actionText}}</a>\n@if (hasChildren) {\n <span class=\"pl-3 slab-menu-caret icon-chevron-right small mt-1\" ></span>\n}\n@if (action.isDivider && isEnabled) {\n <div class=\"dropdown-divider\"></div>\n}", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ContextMenuItemComponent, decorators: [{
type: Component,
args: [{ selector: 'systelab-context-menu-item', standalone: false, template: "@if (hasIcons && isIconEnabled) {\n <div\n class=\"slab-icon-container rounded d-flex text-center justify-content-center align-items-center\"\n [style.background-color]=\"action.backgroundIconColor\">\n <i class=\"slab-flex-1 slab-menu-icon {{action.iconClass}}\" [style.color]=\"action.iconColor\"\n [style.font-size]=\"action.iconFontSize\"\n [ngClass]=\"{'text-white': !action.iconColor}\"></i>\n </div>\n}\n<a class=\"slab-flex-1\" style=\"flex:1 1 auto\" [style.padding-left]=\"hasIcons && !isIconEnabled?'20px':'0'\"\n[ngClass]=\"{'ml-2': hasIcons}\">{{action.actionText}}</a>\n@if (hasChildren) {\n <span class=\"pl-3 slab-menu-caret icon-chevron-right small mt-1\" ></span>\n}\n@if (action.isDivider && isEnabled) {\n <div class=\"dropdown-divider\"></div>\n}" }]
}], ctorParameters: () => [], propDecorators: { action: [{
type: Input
}], hasIcons: [{
type: Input
}], isEnabled: [{
type: Input
}], isIconEnabled: [{
type: Input
}], hasChildren: [{
type: Input
}] } });
class ContextMenuSubmenuItemComponent {
constructor() {
this.levelSeparator = '_|_';
this.elementID = (Math.floor(Math.random() * (999999999999 - 1))).toString();
}
doMouseOver(event, elementID, actionId) {
let selectedChild;
const optionAcitionId = this.contextMenuOriginal.getOptionDetailsActionId(actionId);
selectedChild = this.childDropdownMenuElement.toArray()
.find((elem) => elem.nativeElement.id === (optionAcitionId + this.elementID));
this.contextMenuOriginal.showSubmenu(event, actionId, selectedChild, this.elementID);
}
doClickWithAction(event, elementID, actionId) {
this.contextMenuOriginal.executeAction(event, elementID, actionId);
}
getAction(childActionId) {
return this.actionName + this.levelSeparator + childActionId;
}
isEnabled(elementId, actionId) {
return (this.action && this.action.isActionEnabled) ? this.action.isActionEnabled(elementId, actionId) : true;
}
isIconEnabled(elementId, actionId) {
return (this.action && this.action.isIconEnabled) ? this.action.isIconEnabled(elementId, actionId) : true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ContextMenuSubmenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ContextMenuSubmenuItemComponent, isStandalone: false, selector: "systelab-context-menu-submenu-item", inputs: { action: "action", actionName: "actionName", hasIcons: "hasIcons", hasChildren: "hasChildren", contextMenuOriginal: "contextMenuOriginal", parentId: "parentId", elementID: "elementID" }, viewQueries: [{ propertyName: "childDropdownMenuElement", predicate: ["childdropdownmenu"], descendants: true }], ngImport: i0, template: "@for (childAction of action.childrenContextMenuOptions; track childAction.actionId) {\n <li class=\"d-flex align-items-center\" [class.disabled]=\"!true\"\n (click)=\"doClickWithAction($event, parentId, actionName + levelSeparator + childAction.actionId)\"\n (mouseover)=\"doMouseOver($event, elementID, actionName + levelSeparator + childAction.actionId)\">\n @if (isEnabled) {\n <div class=\"slab-flex-1\" style=\"flex:1 1 auto\">\n <systelab-context-menu-item class=\"d-flex align-items-center\" [action]=\"childAction\"\n [isEnabled]=\"isEnabled(elementID, childAction.actionId)\"\n [isIconEnabled]=\"isIconEnabled(elementID, childAction.actionId)\"\n [hasChildren]=\"childAction.hasChildren()\"\n [hasIcons]=\"hasIcons\"></systelab-context-menu-item>\n @if (childAction.hasChildren()) {\n <ul #childdropdownmenu id=\"{{childAction.actionId+elementID}}\"\n class=\"slab-dropdown dropdown-menu slab-dropdown-menu slab-dropdown-scroll slab-dropdown-absolute\">\n <systelab-context-menu-submenu-item [action]=\"childAction\"\n [actionName]=\"getAction(childAction.actionId)\"\n [hasChildren]=\"childAction.hasChildren()\"\n [hasIcons]=\"hasIcons\"\n [contextMenuOriginal]=\"contextMenuOriginal\"\n [parentId]=\"parentId\"\n ></systelab-context-menu-submenu-item>\n </ul>\n }\n </div>\n }\n </li>\n}\n", dependencies: [{ kind: "component", type: ContextMenuSubmenuItemComponent, selector: "systelab-context-menu-submenu-item", inputs: ["action", "actionName", "hasIcons", "hasChildren", "contextMenuOriginal", "parentId", "elementID"] }, { kind: "component", type: ContextMenuItemComponent, selector: "systelab-context-menu-item", inputs: ["action", "hasIcons", "isEnabled", "isIconEnabled", "hasChildren"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ContextMenuSubmenuItemComponent, decorators: [{
type: Component,
args: [{ selector: 'systelab-context-menu-submenu-item', standalone: false, template: "@for (childAction of action.childrenContextMenuOptions; track childAction.actionId) {\n <li class=\"d-flex align-items-center\" [class.disabled]=\"!true\"\n (click)=\"doClickWithAction($event, parentId, actionName + levelSeparator + childAction.actionId)\"\n (mouseover)=\"doMouseOver($event, elementID, actionName + levelSeparator + childAction.actionId)\">\n @if (isEnabled) {\n <div class=\"slab-flex-1\" style=\"flex:1 1 auto\">\n <systelab-context-menu-item class=\"d-flex align-items-center\" [action]=\"childAction\"\n [isEnabled]=\"isEnabled(elementID, childAction.actionId)\"\n [isIconEnabled]=\"isIconEnabled(elementID, childAction.actionId)\"\n [hasChildren]=\"childAction.hasChildren()\"\n [hasIcons]=\"hasIcons\"></systelab-context-menu-item>\n @if (childAction.hasChildren()) {\n <ul #childdropdownmenu id=\"{{childAction.actionId+elementID}}\"\n class=\"slab-dropdown dropdown-menu slab-dropdown-menu slab-dropdown-scroll slab-dropdown-absolute\">\n <systelab-context-menu-submenu-item [action]=\"childAction\"\n [actionName]=\"getAction(childAction.actionId)\"\n [hasChildren]=\"childAction.hasChildren()\"\n [hasIcons]=\"hasIcons\"\n [contextMenuOriginal]=\"contextMenuOriginal\"\n [parentId]=\"parentId\"\n ></systelab-context-menu-submenu-item>\n </ul>\n }\n </div>\n }\n </li>\n}\n" }]
}], ctorParameters: () => [], propDecorators: { action: [{
type: Input
}], actionName: [{
type: Input
}], hasIcons: [{
type: Input
}], hasChildren: [{
type: Input
}], contextMenuOriginal: [{
type: Input
}], parentId: [{
type: Input
}], elementID: [{
type: Input
}], childDropdownMenuElement: [{
type: ViewChildren,
args: ['childdropdownmenu']
}] } });
class ContextMenuComponent extends AbstractContextMenuComponent {
constructor(el, myRenderer, cdr) {
super(el, myRenderer, cdr);
this.el = el;
this.myRenderer = myRenderer;
this.cdr = cdr;
}
openWithOptions(event, newContextMenuOptions) {
this.contextMenuOptions = newContextMenuOptions;
this.open(event);
}
getSelfReference() {
return this;
}
existsAtLeastOneActionEnabled() {
if (this.contextMenuOptions) {
return this.contextMenuOptions.some(opt => this.isEnabled(this.elementID, opt.actionId));
}
else {
return false;
}
}
isEnabled(elementId, actionId) {
const option = this.getOption(actionId);
return (option && option.isActionEnabled) ? option.isActionEnabled(elementId, actionId) : true;
}
isIconEnabled(elementId, actionId) {
const option = this.getOption(actionId);
return (option && option.isIconEnabled) ? option.isIconEnabled(elementId, actionId) : true;
}
executeAction(event, elementId, actionId) {
const option = this.getOption(actionId);
if (option && option.hasChildren()) {
this.doMouseOver(event, elementId, actionId);
}
else {
this.closeDropDown();
event.stopPropagation();
event.preventDefault();
if (option && option.action) {
option.action(new ContextMenuActionData(elementId, actionId));
}
else {
this.action.emit(new ContextMenuActionData(elementId, actionId));
}
}
}
checkIfHasIcons() {
this.hasIcons = this.contextMenuOptions.some(opt => opt.iconClass !== undefined && opt.iconClass !== null);
}
getOption(actionId, parentAction) {
if (actionId) {
const actions = actionId.split(this.levelSeparator);
let level = 1;
let menuLevel = this.contextMenuOptions.find(opt => opt.actionId === actions[level - 1]);
level++;
while (level <= actions.length) {
menuLevel = menuLevel.childrenContextMenuOptions.find(opt => opt.actionId === actions[level - 1]);
level++;
}
return menuLevel;
}
else {
return undefined;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ContextMenuComponent, isStandalone: false, selector: "systelab-context-menu", usesInheritance: true, ngImport: i0, template: "<div #dropdownparent id=\"{{elementID}}\" class=\"dropdown\">\n <div class=\"dropdown-toggle slab-context-menu\" data-toggle=\"dropdown\" (click)=\"dotsClicked($event)\">\n <i class=\"icon-context-menu\" [ngClass]=\"{'d-none': isEmbedded}\" [style.font-size]=\"fontSize\"\n [style.color]=\"fontColor\"></i>\n </div>\n <div #dropdownmenu class=\"dropdown-menu slab-dropdown-menu\">\n <div #dropdown class=\"slab-dropdown slab-dropdown-fixed\">\n @if (isOpened) {\n <div>\n <div #ngcontent (click)=\"ngContentStopPropagation($event)\">\n <ng-content></ng-content>\n </div>\n <ul #scrollableList class=\"slab-dropdown-scroll\" [ngClass]=\"{'slab-dropdown-overflow': overflow}\">\n @for (action of contextMenuOptions; track action.actionId) {\n <li class=\"d-flex align-items-center m-0\"\n [class.disabled]=\"!isEnabled(elementID, action.actionId) || action.isDivider\"\n (click)=\"doClickWithAction($event, elementID, action.actionId)\"\n (mouseover)=\"doMouseOver($event, elementID, action.actionId)\">\n @if (isEnabled(elementID, action.actionId)) {\n <div class=\"slab-flex-1\" style=\"flex:1 1 auto\">\n <systelab-context-menu-item class=\"d-flex align-items-center\" [action]=\"action\"\n [isEnabled]=\"isEnabled(elementID, action.actionId)\"\n [isIconEnabled]=\"isIconEnabled(elementID, action.actionId)\"\n [hasChildren]=\"action.hasChildren()\"\n [hasIcons]=\"hasIcons\"></systelab-context-menu-item>\n @if (action.hasChildren()) {\n <ul #childdropdownmenu id=\"{{action.actionId+elementID}}\"\n class=\"slab-dropdown dropdown-menu slab-dropdown-menu slab-dropdown-scroll slab-dropdown-absolute\">\n <systelab-context-menu-submenu-item [action]=\"action\"\n [actionName]=\"action.actionId\"\n [hasChildren]=\"action.hasChildren()\"\n [hasIcons]=\"hasIcons\"\n [contextMenuOriginal]=\"getSelfReference()\"\n [parentId]=\"elementID\"\n ></systelab-context-menu-submenu-item>\n </ul>\n }\n </div>\n }\n </li>\n }\n </ul>\n </div>\n }\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ContextMenuSubmenuItemComponent, selector: "systelab-context-menu-submenu-item", inputs: ["action", "actionName", "hasIcons", "hasChildren", "contextMenuOriginal", "parentId", "elementID"] }, { kind: "component", type: ContextMenuItemComponent, selector: "systelab-context-menu-item", inputs: ["action", "hasIcons", "isEnabled", "isIconEnabled", "hasChildren"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ContextMenuComponent, decorators: [{
type: Component,
args: [{ selector: 'systelab-context-menu', standalone: false, template: "<div #dropdownparent id=\"{{elementID}}\" class=\"dropdown\">\n <div class=\"dropdown-toggle slab-context-menu\" data-toggle=\"dropdown\" (click)=\"dotsClicked($event)\">\n <i class=\"icon-context-menu\" [ngClass]=\"{'d-none': isEmbedded}\" [style.font-size]=\"fontSize\"\n [style.color]=\"fontColor\"></i>\n </div>\n <div #dropdownmenu class=\"dropdown-menu slab-dropdown-menu\">\n <div #dropdown class=\"slab-dropdown slab-dropdown-fixed\">\n @if (isOpened) {\n <div>\n <div #ngcontent (click)=\"ngContentStopPropagation($event)\">\n <ng-content></ng-content>\n </div>\n <ul #scrollableList class=\"slab-dropdown-scroll\" [ngClass]=\"{'slab-dropdown-overflow': overflow}\">\n @for (action of contextMenuOptions; track action.actionId) {\n <li class=\"d-flex align-items-center m-0\"\n [class.disabled]=\"!isEnabled(elementID, action.actionId) || action.isDivider\"\n (click)=\"doClickWithAction($event, elementID, action.actionId)\"\n (mouseover)=\"doMouseOver($event, elementID, action.actionId)\">\n @if (isEnabled(elementID, action.actionId)) {\n <div class=\"slab-flex-1\" style=\"flex:1 1 auto\">\n <systelab-context-menu-item class=\"d-flex align-items-center\" [action]=\"action\"\n [isEnabled]=\"isEnabled(elementID, action.actionId)\"\n [isIconEnabled]=\"isIconEnabled(elementID, action.actionId)\"\n [hasChildren]=\"action.hasChildren()\"\n [hasIcons]=\"hasIcons\"></systelab-context-menu-item>\n @if (action.hasChildren()) {\n <ul #childdropdownmenu id=\"{{action.actionId+elementID}}\"\n class=\"slab-dropdown dropdown-menu slab-dropdown-menu slab-dropdown-scroll slab-dropdown-absolute\">\n <systelab-context-menu-submenu-item [action]=\"action\"\n [actionName]=\"action.actionId\"\n [hasChildren]=\"action.hasChildren()\"\n [hasIcons]=\"hasIcons\"\n [contextMenuOriginal]=\"getSelfReference()\"\n [parentId]=\"elementID\"\n ></systelab-context-menu-submenu-item>\n </ul>\n }\n </div>\n }\n </li>\n }\n </ul>\n </div>\n }\n </div>\n </div>\n</div>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }] });
class DataFilterPipe {
transform(input, searchString) {
const result = [];
if (!searchString) {
return input;
}
for (const element of input) {
if (element.displayName.toLowerCase()
.indexOf(searchString.toLowerCase()) > -1) {
result.push(element);
}
}
return result;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DataFilterPipe, isStandalone: false, name: "datafilter" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataFilterPipe, decorators: [{
type: Pipe,
args: [{
name: 'datafilter',
standalone: false
}]
}] });
class TwoListItem {
constructor(displayName, colId, isSelected, isVisible) {
this.displayName = displayName;
this.colId = colId;
this.isSelected = isSelected;
this.isVisible = isVisible;
}
}
class CurrentSelectionStatus {
constructor(available, visible) {
this.available = available;
this.visible = visible;
}
selectAvailable(element, filteredList, isShiftKey, isControlKey) {
this.clear(this.visible);
this.select(this.available, element, filteredList, isShiftKey, isControlKey);
}
selectVisible(element, filteredList, isShiftKey, isControlKey) {
this.clear(this.available);
this.select(this.visible, element, filteredList, isShiftKey, isControlKey);
}
clearAll() {
this.clear(this.available);
this.clear(this.visible);
}
select(selectedList, element, filteredList, isShiftKey, isControlKey) {
if (selectedList.length > 0 && isShiftKey) {
this.selectRange(selectedList, element, filteredList);
}
else {
this.selectSingle(selectedList, element, isControlKey);
}
}
selectRange(selectedList, element, filteredList) {
const indexOfLastSelected = filteredList.indexOf(selectedList[0]);
const indexOfSelected = filteredList.indexOf(element);
this.clear(selectedList);
if (indexOfLastSelected < indexOfSelected) {
for (let i = indexOfLastSelected; i <= indexOfSelected; i++) {
filteredList[i].isSelected = true;
selectedList.push(filteredList[i]);
}
}
else {
for (let i = indexOfLastSelected; i >= indexOfSelected; i--) {
filteredList[i].isSelected = true;
selectedList.push(filteredList[i]);
}
}
}
selectSingle(selectedList, element, isControlKey) {
element.isSelected = !element.isSelected;
if (selectedList.length === 0 || (selectedList.length > 0 && isControlKey)) {
if (element.isSelected) {
selectedList.push(element);
}
else {
selectedList.splice(selectedList.indexOf(element), 1);
}
}
else {
this.clear(selectedList);
if (element.isSelected) {
selectedList.push(element);
}
}
}
clear(list) {
list.forEach(element => element.isSelected = false);
list.splice(0);
}
}
class ButtonComponent {
constructor(element) {
this.element = element;
this.action = new EventEmitter();
this.disabled = false;
this.type = 'regular';
this.size = 'medium';
}
getId() {
return this.element.nativeElement.id;
}
doClick(event) {
if (this.disabled) {
event.stopPropagation();
}
else {
this.action.emit(event);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ButtonComponent, isStandalone: false, selector: "systelab-button", inputs: { disabled: "disabled", type: "type", size: "size" }, outputs: { action: "action" }, ngImport: i0, template: "<button type=\"button\" class=\"slab-btn\"\n [class.slab-btn-regular]=\"type==='regular'\"\n [class.slab-btn-primary]=\"type==='primary'\"\n [class.slab-btn-warning]=\"type==='warning'\"\n [class.slab-btn-danger]=\"type==='danger'\"\n [class.slab-btn-success]=\"type==='success'\"\n [class.slab-btn-link]=\"type==='link'\"\n [class.slab-btn-small]=\"size==='small'\"\n [class.slab-btn-medium]=\"size==='medium'\"\n [class.slab-btn-large]=\"size==='large'\"\n [class.slab-btn-disabled]=\"disabled\"\n [disabled]=\"disabled\" (click)=\"doClick($event)\">\n <ng-content></ng-content>\n</button>\n", styles: [":host{display:inline-block}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'systelab-button', standalone: false, template: "<button type=\"button\" class=\"slab-btn\"\n [class.slab-btn-regular]=\"type==='regular'\"\n [class.slab-btn-primary]=\"type==='primary'\"\n [class.slab-btn-warning]=\"type==='warning'\"\n [class.slab-btn-danger]=\"type==='danger'\"\n [class.slab-btn-success]=\"type==='success'\"\n [class.slab-btn-link]=\"type==='link'\"\n [class.slab-btn-small]=\"size==='small'\"\n [class.slab-btn-medium]=\"size==='medium'\"\n [class.slab-btn-large]=\"size==='large'\"\n [class.slab-btn-disabled]=\"disabled\"\n [disabled]=\"disabled\" (click)=\"doClick($event)\">\n <ng-content></ng-content>\n</button>\n", styles: [":host{display:inline-block}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { action: [{
type: Output
}], disabled: [{
type: Input
}], type: [{
type: Input
}], size: [{
type: Input
}] } });
class AbstractSortableListComponent {
constructor() {
this.elementsList = [];
this.dragAndDropEnabled = true;
this.elementsListChange = new EventEmitter();
this.deleteWithSupr = false;
this.showIcon = false;
polyfill({});
}
dbClickSelectedItem(element) {
}
getDescription(element) {
return element[this.getDescriptionField(element)];
}
getSelectionFieldValue(element) {
return element[this.getSelectionField(element)];
}
handleDragEnter(event) {
return this.handleDrag(event);
}
handleDragOver(event) {
return this.handleDrag(event);
}
handleDragLeave(event) {
return this.handleDrag(event);
}
selectElement(element, ev) {
if (!ev.ctrlKey) {
this.elementsList.forEach(elementInList => {
elementInList[this.getSelectionField(element)] = false;
});
}
element[this.getSelectionField(element)] = !element[this.getSelectionField(element)];
}
getSelectedRows() {
return this.elementsList.filter(el