intelica-library-ui 0.1.26 → 0.1.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -22,6 +22,9 @@ import { ButtonModule } from 'primeng/button';
|
|
|
22
22
|
import moment from 'moment';
|
|
23
23
|
import * as _ from 'lodash';
|
|
24
24
|
import * as i3 from 'primeng/api';
|
|
25
|
+
import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
|
|
26
|
+
import * as i3$1 from 'primeng/ripple';
|
|
27
|
+
import { RippleModule } from 'primeng/ripple';
|
|
25
28
|
|
|
26
29
|
class IntelicaLibraryUiComponent {
|
|
27
30
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: IntelicaLibraryUiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -190,13 +193,13 @@ class SweetAlertService {
|
|
|
190
193
|
html: "",
|
|
191
194
|
};
|
|
192
195
|
messageBox(message) {
|
|
193
|
-
let options =
|
|
196
|
+
let options = structuredClone(this.options);
|
|
194
197
|
options.showCancelButton = false;
|
|
195
198
|
options.text = message;
|
|
196
199
|
return Swal.fire(options);
|
|
197
200
|
}
|
|
198
201
|
messageTextBox(message = "", swHtml = false) {
|
|
199
|
-
let options = this.options;
|
|
202
|
+
let options = structuredClone(this.options);
|
|
200
203
|
options.showCancelButton = false;
|
|
201
204
|
if (!swHtml)
|
|
202
205
|
options.text = message.length === 0 ? "Something went wrong!" : message;
|
|
@@ -205,7 +208,7 @@ class SweetAlertService {
|
|
|
205
208
|
Swal.fire(options);
|
|
206
209
|
}
|
|
207
210
|
confirmBox(message, confirmButtonText, cancelButtonText, title, html, popupClass) {
|
|
208
|
-
let options =
|
|
211
|
+
let options = structuredClone(this.options);
|
|
209
212
|
options.title = title ?? "";
|
|
210
213
|
options.showCancelButton = cancelButtonText == "" ? false : true;
|
|
211
214
|
options.text = message;
|
|
@@ -220,7 +223,7 @@ class SweetAlertService {
|
|
|
220
223
|
return Swal.fire(options);
|
|
221
224
|
}
|
|
222
225
|
messageHTMLBox(title, html, confirmButtonText) {
|
|
223
|
-
let options =
|
|
226
|
+
let options = structuredClone(this.options);
|
|
224
227
|
options.showCancelButton = false;
|
|
225
228
|
options.title = title;
|
|
226
229
|
options.html = html;
|
|
@@ -612,7 +615,7 @@ class SearchComponent {
|
|
|
612
615
|
provide: NG_VALUE_ACCESSOR,
|
|
613
616
|
useExisting: forwardRef(() => SearchComponent),
|
|
614
617
|
},
|
|
615
|
-
], ngImport: i0, template: "<form [formGroup]=\"SearchForm\">\r\n\t<div class=\"prSearchBar\">\r\n\t\t<div class=\"prSearchBar__dropdown\" (click)=\"op.toggle($event)\">\r\n\t\t\t<div
|
|
618
|
+
], ngImport: i0, template: "<form [formGroup]=\"SearchForm\">\r\n\t<div class=\"prSearchBar\">\r\n\t\t<div class=\"prSearchBar__dropdown\" (click)=\"op.toggle($event)\">\r\n\t\t\t<div\r\n\t\t\t\tclass=\"prSearchBar__dropdown--label\"\r\n\t\t\t\t[pTooltip]=\"(GetSelectedOperatorValue() | term : GlobalTermService.languageCode) + ', ' + (GetSelectedFieldValue() | term : GlobalTermService.languageCode)\"\r\n\t\t\t\ttooltipPosition=\"top\"\r\n\t\t\t>\r\n\t\t\t\t{{ GetSelectedFieldValue() | term : GlobalTermService.languageCode }}\r\n\t\t\t</div>\r\n\t\t\t<div class=\"prSearchBar__dropdown--icon\">\r\n\t\t\t\t<i [ngClass]=\"IsDropdownOpen ? 'icon-arrow-up' : 'icon-arrow-down'\"></i>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<p-popover #op (onShow)=\"DropDownChange(true)\" (onHide)=\"DropDownChange(false)\" class=\"prSearchBar__popover\">\r\n\t\t\t<div class=\"searchDropDown\">\r\n\t\t\t\t<div class=\"searchDropDown__group\">\r\n\t\t\t\t\t<div class=\"searchDropDown__title\">{{ \"Selectoperator\" | term : GlobalTermService.languageCode }}</div>\r\n\t\t\t\t\t<div class=\"searchDropDown__listOption\">\r\n\t\t\t\t\t\t@for ( option of SearchOperatorOptions ; track option.id; let index = $index){\r\n\t\t\t\t\t\t<div class=\"searchDropDown__option\">\r\n\t\t\t\t\t\t\t<p-radiobutton [inputId]=\"ComponentId + option.id\" class=\"prRadioButton\" [value]=\"option.id\" formControlName=\"operatorId\" (change)=\"OnSearchKeyup()\" />\r\n\t\t\t\t\t\t\t<label [for]=\"ComponentId + option.id\" class=\"prRadioButton--label\">{{ option.value | term : GlobalTermService.languageCode }}</label>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<hr />\r\n\t\t\t\t<div class=\"searchDropDown__group\">\r\n\t\t\t\t\t<div class=\"searchDropDown__title\">{{ \"Selectfield\" | term : GlobalTermService.languageCode }}</div>\r\n\t\t\t\t\t@for ( option of SearchFieldOptions ; track option.id; let index = $index){\r\n\t\t\t\t\t<div class=\"searchDropDown__option\">\r\n\t\t\t\t\t\t<p-radiobutton [inputId]=\"ComponentId + 'fieldId_' + option.id\" class=\"prRadioButton\" [value]=\"option.id\" formControlName=\"fieldId\" (change)=\"OnSearchKeyup()\" />\r\n\t\t\t\t\t\t<label [for]=\"ComponentId + 'fieldId_' + option.id\" class=\"prRadioButton--label\">{{ option.value | term : GlobalTermService.languageCode }}</label>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</p-popover>\r\n\t\t<div class=\"prSearchBar__content\">\r\n\t\t\t<div class=\"prSearchBar__btn\">\r\n\t\t\t\t<button pButton type=\"button\" class=\"prSearchBar__btn-action\" (click)=\"ClearSearchText()\" *ngIf=\"HasSearchText\">\r\n\t\t\t\t\t<i class=\"icon-times\"></i>\r\n\t\t\t\t</button>\r\n\t\t\t\t<button pButton type=\"button\" class=\"prSearchBar__btn-action\" (click)=\"OnSearch()\">\r\n\t\t\t\t\t<i class=\"icon-search\"></i>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t\t<input\r\n\t\t\t\tpInputText\r\n\t\t\t\ttype=\"text\"\r\n\t\t\t\tclass=\"prSearchBar__input\"\r\n\t\t\t\tformControlName=\"searchText\"\r\n\t\t\t\t[placeholder]=\"Placeholder | term : GlobalTermService.languageCode\"\r\n\t\t\t\t(keyup.enter)=\"OnSearchEnter()\"\r\n\t\t\t\t(keyup)=\"OnSearchKeyup()\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</div>\r\n</form>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i2.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TermPipe, name: "term" }] });
|
|
616
619
|
}
|
|
617
620
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SearchComponent, decorators: [{
|
|
618
621
|
type: Component,
|
|
@@ -621,7 +624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
621
624
|
provide: NG_VALUE_ACCESSOR,
|
|
622
625
|
useExisting: forwardRef(() => SearchComponent),
|
|
623
626
|
},
|
|
624
|
-
], template: "<form [formGroup]=\"SearchForm\">\r\n\t<div class=\"prSearchBar\">\r\n\t\t<div class=\"prSearchBar__dropdown\" (click)=\"op.toggle($event)\">\r\n\t\t\t<div
|
|
627
|
+
], template: "<form [formGroup]=\"SearchForm\">\r\n\t<div class=\"prSearchBar\">\r\n\t\t<div class=\"prSearchBar__dropdown\" (click)=\"op.toggle($event)\">\r\n\t\t\t<div\r\n\t\t\t\tclass=\"prSearchBar__dropdown--label\"\r\n\t\t\t\t[pTooltip]=\"(GetSelectedOperatorValue() | term : GlobalTermService.languageCode) + ', ' + (GetSelectedFieldValue() | term : GlobalTermService.languageCode)\"\r\n\t\t\t\ttooltipPosition=\"top\"\r\n\t\t\t>\r\n\t\t\t\t{{ GetSelectedFieldValue() | term : GlobalTermService.languageCode }}\r\n\t\t\t</div>\r\n\t\t\t<div class=\"prSearchBar__dropdown--icon\">\r\n\t\t\t\t<i [ngClass]=\"IsDropdownOpen ? 'icon-arrow-up' : 'icon-arrow-down'\"></i>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<p-popover #op (onShow)=\"DropDownChange(true)\" (onHide)=\"DropDownChange(false)\" class=\"prSearchBar__popover\">\r\n\t\t\t<div class=\"searchDropDown\">\r\n\t\t\t\t<div class=\"searchDropDown__group\">\r\n\t\t\t\t\t<div class=\"searchDropDown__title\">{{ \"Selectoperator\" | term : GlobalTermService.languageCode }}</div>\r\n\t\t\t\t\t<div class=\"searchDropDown__listOption\">\r\n\t\t\t\t\t\t@for ( option of SearchOperatorOptions ; track option.id; let index = $index){\r\n\t\t\t\t\t\t<div class=\"searchDropDown__option\">\r\n\t\t\t\t\t\t\t<p-radiobutton [inputId]=\"ComponentId + option.id\" class=\"prRadioButton\" [value]=\"option.id\" formControlName=\"operatorId\" (change)=\"OnSearchKeyup()\" />\r\n\t\t\t\t\t\t\t<label [for]=\"ComponentId + option.id\" class=\"prRadioButton--label\">{{ option.value | term : GlobalTermService.languageCode }}</label>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<hr />\r\n\t\t\t\t<div class=\"searchDropDown__group\">\r\n\t\t\t\t\t<div class=\"searchDropDown__title\">{{ \"Selectfield\" | term : GlobalTermService.languageCode }}</div>\r\n\t\t\t\t\t@for ( option of SearchFieldOptions ; track option.id; let index = $index){\r\n\t\t\t\t\t<div class=\"searchDropDown__option\">\r\n\t\t\t\t\t\t<p-radiobutton [inputId]=\"ComponentId + 'fieldId_' + option.id\" class=\"prRadioButton\" [value]=\"option.id\" formControlName=\"fieldId\" (change)=\"OnSearchKeyup()\" />\r\n\t\t\t\t\t\t<label [for]=\"ComponentId + 'fieldId_' + option.id\" class=\"prRadioButton--label\">{{ option.value | term : GlobalTermService.languageCode }}</label>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</p-popover>\r\n\t\t<div class=\"prSearchBar__content\">\r\n\t\t\t<div class=\"prSearchBar__btn\">\r\n\t\t\t\t<button pButton type=\"button\" class=\"prSearchBar__btn-action\" (click)=\"ClearSearchText()\" *ngIf=\"HasSearchText\">\r\n\t\t\t\t\t<i class=\"icon-times\"></i>\r\n\t\t\t\t</button>\r\n\t\t\t\t<button pButton type=\"button\" class=\"prSearchBar__btn-action\" (click)=\"OnSearch()\">\r\n\t\t\t\t\t<i class=\"icon-search\"></i>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t\t<input\r\n\t\t\t\tpInputText\r\n\t\t\t\ttype=\"text\"\r\n\t\t\t\tclass=\"prSearchBar__input\"\r\n\t\t\t\tformControlName=\"searchText\"\r\n\t\t\t\t[placeholder]=\"Placeholder | term : GlobalTermService.languageCode\"\r\n\t\t\t\t(keyup.enter)=\"OnSearchEnter()\"\r\n\t\t\t\t(keyup)=\"OnSearchKeyup()\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</div>\r\n</form>\r\n" }]
|
|
625
628
|
}], ctorParameters: () => [], propDecorators: { ComponentId: [{
|
|
626
629
|
type: Input
|
|
627
630
|
}], SearchFieldOptions: [{
|
|
@@ -1505,9 +1508,302 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
1505
1508
|
args: [ColumnComponent]
|
|
1506
1509
|
}] } });
|
|
1507
1510
|
|
|
1511
|
+
class ActionDirective {
|
|
1512
|
+
/**
|
|
1513
|
+
* Nombre de la acción.
|
|
1514
|
+
* @type {string}
|
|
1515
|
+
*/
|
|
1516
|
+
name = "";
|
|
1517
|
+
/**
|
|
1518
|
+
* Indica si los botones asociados a la acción deben ocultarse.
|
|
1519
|
+
* @type {boolean}
|
|
1520
|
+
* @default false
|
|
1521
|
+
*/
|
|
1522
|
+
hideButtons = false;
|
|
1523
|
+
/**
|
|
1524
|
+
* Texto que se mostrará en el botón de aplicar.
|
|
1525
|
+
* @type {string}
|
|
1526
|
+
* @default 'Apply'
|
|
1527
|
+
*/
|
|
1528
|
+
textApply = "Apply";
|
|
1529
|
+
/**
|
|
1530
|
+
* Texto que se mostrará en el botón de cancelar.
|
|
1531
|
+
* @type {string}
|
|
1532
|
+
* @default 'Clear'
|
|
1533
|
+
*/
|
|
1534
|
+
textCancel = "Clear";
|
|
1535
|
+
/**
|
|
1536
|
+
* Indica si detener la propagación de eventos al hacer clic en la acción.
|
|
1537
|
+
* @type {boolean}
|
|
1538
|
+
* @default false
|
|
1539
|
+
*/
|
|
1540
|
+
stopPropagation = false;
|
|
1541
|
+
/**
|
|
1542
|
+
* Evento emitido cuando se aplica la acción.
|
|
1543
|
+
* @type {EventEmitter<any>}
|
|
1544
|
+
*/
|
|
1545
|
+
onApply = new EventEmitter();
|
|
1546
|
+
/**
|
|
1547
|
+
* Evento emitido cuando se cancela la acción.
|
|
1548
|
+
* @type {EventEmitter<any>}
|
|
1549
|
+
*/
|
|
1550
|
+
onCancel = new EventEmitter();
|
|
1551
|
+
/**
|
|
1552
|
+
* Evento emitido cuando se hace clic en la acción.
|
|
1553
|
+
* @type {EventEmitter<any>}
|
|
1554
|
+
*/
|
|
1555
|
+
onClick = new EventEmitter();
|
|
1556
|
+
/**
|
|
1557
|
+
* Referencia al contenido proporcionado por la plantilla.
|
|
1558
|
+
* @type {any}
|
|
1559
|
+
*/
|
|
1560
|
+
template;
|
|
1561
|
+
/**
|
|
1562
|
+
* Indica si la acción está activa o no.
|
|
1563
|
+
* @type {boolean}
|
|
1564
|
+
* @default false
|
|
1565
|
+
*/
|
|
1566
|
+
active = false;
|
|
1567
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1568
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: ActionDirective, isStandalone: true, selector: "action", inputs: { name: "name", hideButtons: "hideButtons", textApply: "textApply", textCancel: "textCancel", stopPropagation: "stopPropagation" }, outputs: { onApply: "onApply", onCancel: "onCancel", onClick: "onClick" }, queries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true }], ngImport: i0 });
|
|
1569
|
+
}
|
|
1570
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ActionDirective, decorators: [{
|
|
1571
|
+
type: Directive,
|
|
1572
|
+
args: [{
|
|
1573
|
+
selector: "action",
|
|
1574
|
+
}]
|
|
1575
|
+
}], propDecorators: { name: [{
|
|
1576
|
+
type: Input
|
|
1577
|
+
}], hideButtons: [{
|
|
1578
|
+
type: Input
|
|
1579
|
+
}], textApply: [{
|
|
1580
|
+
type: Input
|
|
1581
|
+
}], textCancel: [{
|
|
1582
|
+
type: Input
|
|
1583
|
+
}], stopPropagation: [{
|
|
1584
|
+
type: Input
|
|
1585
|
+
}], onApply: [{
|
|
1586
|
+
type: Output
|
|
1587
|
+
}], onCancel: [{
|
|
1588
|
+
type: Output
|
|
1589
|
+
}], onClick: [{
|
|
1590
|
+
type: Output
|
|
1591
|
+
}], template: [{
|
|
1592
|
+
type: ContentChild,
|
|
1593
|
+
args: ["template"]
|
|
1594
|
+
}] } });
|
|
1595
|
+
|
|
1596
|
+
class ActionsMenuComponent {
|
|
1597
|
+
termPipe;
|
|
1598
|
+
GlobalTermService = inject(GlobalTermService);
|
|
1599
|
+
Popover;
|
|
1600
|
+
MenuButton;
|
|
1601
|
+
PopoverContainer;
|
|
1602
|
+
IsPopoverOpen = false;
|
|
1603
|
+
IsClickInsideDatepicker = false;
|
|
1604
|
+
/**
|
|
1605
|
+
* Indica si el menú de acciones está visible o no.
|
|
1606
|
+
* @type {boolean}
|
|
1607
|
+
* @default false
|
|
1608
|
+
*/
|
|
1609
|
+
ShowActionsMenu = false;
|
|
1610
|
+
/**
|
|
1611
|
+
* Indica si la sección de selección de acciones está visible o no.
|
|
1612
|
+
* @type {boolean}
|
|
1613
|
+
* @default false
|
|
1614
|
+
*/
|
|
1615
|
+
ShowSelectActions = false;
|
|
1616
|
+
constructor(termPipe) {
|
|
1617
|
+
this.termPipe = termPipe;
|
|
1618
|
+
}
|
|
1619
|
+
ngOnInit() {
|
|
1620
|
+
// const specificRegex = /local.*filt|filt.*local/i;
|
|
1621
|
+
// const generalRegex = /filt/i;
|
|
1622
|
+
// const specificResults = this.actions.filter(action => specificRegex.test(action.name));
|
|
1623
|
+
// if (specificResults.length === 0) {
|
|
1624
|
+
// const generalResults = this.actions.filter(action => generalRegex.test(action.name));
|
|
1625
|
+
// generalResults.forEach(action => this.showTemplate(action));
|
|
1626
|
+
// } else {
|
|
1627
|
+
// specificResults.forEach(action => this.showTemplate(action));
|
|
1628
|
+
// }
|
|
1629
|
+
}
|
|
1630
|
+
openPopover() {
|
|
1631
|
+
this.IsPopoverOpen = true;
|
|
1632
|
+
// Cambia el estado de visibilidad del menú de acciones.
|
|
1633
|
+
this.ShowActionsMenu = true;
|
|
1634
|
+
// Muestra u oculta el menú de selección de acciones.
|
|
1635
|
+
this.ShowSelectActions = true;
|
|
1636
|
+
this.Popover.nativeElement.style.display = "block";
|
|
1637
|
+
this.MenuButton.nativeElement.classList.add("active");
|
|
1638
|
+
this.PopoverContainer.nativeElement.classList.add("backdrop-visible");
|
|
1639
|
+
}
|
|
1640
|
+
closePopover() {
|
|
1641
|
+
this.IsPopoverOpen = false;
|
|
1642
|
+
// Cambia el estado de visibilidad del menú de acciones.
|
|
1643
|
+
this.ShowActionsMenu = false;
|
|
1644
|
+
// Muestra u oculta el menú de selección de acciones.
|
|
1645
|
+
this.ShowSelectActions = true;
|
|
1646
|
+
this.Popover.nativeElement.style.display = "none";
|
|
1647
|
+
this.MenuButton.nativeElement.classList.remove("active");
|
|
1648
|
+
this.PopoverContainer.nativeElement.classList.remove("backdrop-visible");
|
|
1649
|
+
}
|
|
1650
|
+
/** Método para alternar el estado del popover */
|
|
1651
|
+
togglePopover(event) {
|
|
1652
|
+
this.IsPopoverOpen ? this.closePopover() : this.openPopover();
|
|
1653
|
+
// Desactiva todas las acciones dentro del menú.
|
|
1654
|
+
this.actions.forEach(action => {
|
|
1655
|
+
action.active = false;
|
|
1656
|
+
});
|
|
1657
|
+
}
|
|
1658
|
+
onMouseDown(event) {
|
|
1659
|
+
const target = event.target;
|
|
1660
|
+
if (target.closest(".p-datepicker") || target.closest(".p-inputtext") || target.closest(".p-select-panel") || target.closest(".p-multiselect-panel")) {
|
|
1661
|
+
this.IsClickInsideDatepicker = true;
|
|
1662
|
+
}
|
|
1663
|
+
}
|
|
1664
|
+
onMouseDownOutsideBody(event) {
|
|
1665
|
+
const target = event.target;
|
|
1666
|
+
if (target.closest(".p-datepicker") || target.closest(".p-inputtext") || target.closest(".p-select-panel") || target.closest(".p-multiselect-panel")) {
|
|
1667
|
+
this.IsClickInsideDatepicker = true;
|
|
1668
|
+
}
|
|
1669
|
+
}
|
|
1670
|
+
onMouseUp(event) {
|
|
1671
|
+
setTimeout(() => {
|
|
1672
|
+
this.IsClickInsideDatepicker = false;
|
|
1673
|
+
}, 100);
|
|
1674
|
+
}
|
|
1675
|
+
closeAll(event) {
|
|
1676
|
+
if (!event)
|
|
1677
|
+
return;
|
|
1678
|
+
const target = event.target;
|
|
1679
|
+
const allowedClasses = [
|
|
1680
|
+
"prSelect",
|
|
1681
|
+
"p-select-option-selected",
|
|
1682
|
+
"p-select-option",
|
|
1683
|
+
"p-datepicker-panel",
|
|
1684
|
+
"p-datepicker-select-month",
|
|
1685
|
+
"p-button-text",
|
|
1686
|
+
"p-datepicker-select-year",
|
|
1687
|
+
"p-datepicker-month",
|
|
1688
|
+
"p-datepicker-year",
|
|
1689
|
+
"p-checkbox-input",
|
|
1690
|
+
"p-multiselect-option",
|
|
1691
|
+
"p-multiselect-filter",
|
|
1692
|
+
"p-multiselect-empty-message",
|
|
1693
|
+
"p-inputicon",
|
|
1694
|
+
"p-tree-node-selected",
|
|
1695
|
+
"p-tree-node-content",
|
|
1696
|
+
"p-multiselect-header",
|
|
1697
|
+
"grButton--icon-close-modal",
|
|
1698
|
+
"p-overlay-mask",
|
|
1699
|
+
"p-select-clear-icon",
|
|
1700
|
+
"formRowInputClear",
|
|
1701
|
+
"icon-times",
|
|
1702
|
+
"p-select-empty-message",
|
|
1703
|
+
"p-select-list",
|
|
1704
|
+
"p-iconfield",
|
|
1705
|
+
"p-inputtext",
|
|
1706
|
+
"p-select-header",
|
|
1707
|
+
"p-overlay",
|
|
1708
|
+
"p-select-filter",
|
|
1709
|
+
"p-overlay-content",
|
|
1710
|
+
"p-select-overlay",
|
|
1711
|
+
"p-select-panel",
|
|
1712
|
+
"p-multiselect-panel",
|
|
1713
|
+
];
|
|
1714
|
+
if (this.IsClickInsideDatepicker) {
|
|
1715
|
+
return;
|
|
1716
|
+
}
|
|
1717
|
+
if (allowedClasses.some(className => target.closest(`.${className}`))) {
|
|
1718
|
+
return;
|
|
1719
|
+
}
|
|
1720
|
+
if (this.Popover && !this.Popover.nativeElement.contains(target) && this.MenuButton && !this.MenuButton.nativeElement.contains(target)) {
|
|
1721
|
+
this.closePopover();
|
|
1722
|
+
}
|
|
1723
|
+
}
|
|
1724
|
+
/**
|
|
1725
|
+
* Directiva que representa una colección de elementos hijos del tipo `ActionDirective`.
|
|
1726
|
+
* Se utiliza para acceder a las instancias de la directiva `ActionDirective` dentro de un componente.
|
|
1727
|
+
* @type {QueryList<ActionDirective>}
|
|
1728
|
+
*/
|
|
1729
|
+
actions;
|
|
1730
|
+
/**
|
|
1731
|
+
* Muestra la plantilla asociada a una acción si se proporciona un manejador de eventos `onClick`.
|
|
1732
|
+
* - Emite el evento `onClick` de la acción si está definido.
|
|
1733
|
+
* - Detiene la propagación del evento si la propiedad `stopPropagation` de la acción está establecida.
|
|
1734
|
+
* - Activa la acción.
|
|
1735
|
+
* - Oculta el menú de selección de acciones si se cumplen ciertas condiciones.
|
|
1736
|
+
*
|
|
1737
|
+
* @param {ActionDirective} action - La acción para la cual mostrar la plantilla.
|
|
1738
|
+
*/
|
|
1739
|
+
showTemplate(action) {
|
|
1740
|
+
// Emite el evento onClick de la acción si está definido.
|
|
1741
|
+
if (action.onClick) {
|
|
1742
|
+
action.onClick.emit();
|
|
1743
|
+
}
|
|
1744
|
+
// Detiene la propagación del evento si la propiedad stopPropagation de la acción está establecida.
|
|
1745
|
+
if (action.stopPropagation) {
|
|
1746
|
+
return;
|
|
1747
|
+
}
|
|
1748
|
+
// Activa la acción.
|
|
1749
|
+
action.active = true;
|
|
1750
|
+
// Oculta el menú de selección de acciones si se cumplen ciertas condiciones.
|
|
1751
|
+
if (action.active) {
|
|
1752
|
+
// || this.showRecordsPerPage || this.showSorting) {
|
|
1753
|
+
this.ShowSelectActions = false;
|
|
1754
|
+
}
|
|
1755
|
+
}
|
|
1756
|
+
/**
|
|
1757
|
+
* Restablece el estado de una acción y muestra el menú de selección de acciones.
|
|
1758
|
+
* - Desactiva la acción proporcionada.
|
|
1759
|
+
* - Muestra el menú de acciones.
|
|
1760
|
+
* - Muestra el menú de selección de acciones.
|
|
1761
|
+
*
|
|
1762
|
+
* @param {ActionDirective} action - La acción que se va a restablecer.
|
|
1763
|
+
*/
|
|
1764
|
+
returnSelectActions(action) {
|
|
1765
|
+
// Desactiva la acción proporcionada.
|
|
1766
|
+
action.active = false;
|
|
1767
|
+
// Muestra el menú de acciones.
|
|
1768
|
+
this.ShowActionsMenu = true;
|
|
1769
|
+
// Muestra el menú de selección de acciones.
|
|
1770
|
+
this.ShowSelectActions = true;
|
|
1771
|
+
}
|
|
1772
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ActionsMenuComponent, deps: [{ token: TermPipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
1773
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: ActionsMenuComponent, isStandalone: true, selector: "intelica-actions-menu", host: { listeners: { "mousedown": "onMouseDown($event)", "window:mousedown": "onMouseDownOutsideBody($event)", "mouseup": "onMouseUp($event)", "document:click": "closeAll($event)" } }, queries: [{ propertyName: "actions", predicate: ActionDirective }], viewQueries: [{ propertyName: "Popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "MenuButton", first: true, predicate: ["menuButton"], descendants: true }, { propertyName: "PopoverContainer", first: true, predicate: ["popoverContainer"], descendants: true }], ngImport: i0, template: "<div #popoverContainer class=\"grPopoverContainer\">\r\n\t<button #menuButton class=\"grMenuAction\" (click)=\"togglePopover($event)\">\r\n\t\t<i class=\"icon icon-bars\"></i>\r\n\t</button>\r\n\t<div class=\"grPopover\" #popover>\r\n\t\t<!-- Men\u00FA -->\r\n\t\t<div class=\"grPopoverMenu\" *ngIf=\"ShowActionsMenu\" [ngClass]=\"{ hidden: !ShowSelectActions }\">\r\n\t\t\t<div class=\"grPopoverHeader\">\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t<span>{{ \"SelectAction\" | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</h3>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"grPopoverBody\">\r\n\t\t\t\t<button pRipple class=\"grButtonActions\" *ngFor=\"let item of actions; let $index = index\" (click)=\"showTemplate(item)\">\r\n\t\t\t\t\t<span class=\"formRowInputNumber\">{{ $index + 1 }}</span>\r\n\t\t\t\t\t<span class=\"grButtonActionName\">{{ item.name | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<!-- Sub Men\u00FA -->\r\n\t\t<div class=\"grPopoverSubMenu\" [ngClass]=\"{ hidden: !item.active }\" *ngFor=\"let item of actions\">\r\n\t\t\t<div class=\"grPopoverHeader\">\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t<button class=\"backButton\" (click)=\"returnSelectActions(item)\">\r\n\t\t\t\t\t\t<i class=\"icon icon-arrow-left\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<span>{{ item.name | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</h3>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"grPopoverBody\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3$1.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: TermPipe, name: "term" }] });
|
|
1774
|
+
}
|
|
1775
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ActionsMenuComponent, decorators: [{
|
|
1776
|
+
type: Component,
|
|
1777
|
+
args: [{ selector: "intelica-actions-menu", imports: [ButtonModule, InputGroupAddonModule, CommonModule, RippleModule, TermPipe], template: "<div #popoverContainer class=\"grPopoverContainer\">\r\n\t<button #menuButton class=\"grMenuAction\" (click)=\"togglePopover($event)\">\r\n\t\t<i class=\"icon icon-bars\"></i>\r\n\t</button>\r\n\t<div class=\"grPopover\" #popover>\r\n\t\t<!-- Men\u00FA -->\r\n\t\t<div class=\"grPopoverMenu\" *ngIf=\"ShowActionsMenu\" [ngClass]=\"{ hidden: !ShowSelectActions }\">\r\n\t\t\t<div class=\"grPopoverHeader\">\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t<span>{{ \"SelectAction\" | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</h3>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"grPopoverBody\">\r\n\t\t\t\t<button pRipple class=\"grButtonActions\" *ngFor=\"let item of actions; let $index = index\" (click)=\"showTemplate(item)\">\r\n\t\t\t\t\t<span class=\"formRowInputNumber\">{{ $index + 1 }}</span>\r\n\t\t\t\t\t<span class=\"grButtonActionName\">{{ item.name | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<!-- Sub Men\u00FA -->\r\n\t\t<div class=\"grPopoverSubMenu\" [ngClass]=\"{ hidden: !item.active }\" *ngFor=\"let item of actions\">\r\n\t\t\t<div class=\"grPopoverHeader\">\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t<button class=\"backButton\" (click)=\"returnSelectActions(item)\">\r\n\t\t\t\t\t\t<i class=\"icon icon-arrow-left\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<span>{{ item.name | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</h3>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"grPopoverBody\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n" }]
|
|
1778
|
+
}], ctorParameters: () => [{ type: TermPipe }], propDecorators: { Popover: [{
|
|
1779
|
+
type: ViewChild,
|
|
1780
|
+
args: ["popover"]
|
|
1781
|
+
}], MenuButton: [{
|
|
1782
|
+
type: ViewChild,
|
|
1783
|
+
args: ["menuButton"]
|
|
1784
|
+
}], PopoverContainer: [{
|
|
1785
|
+
type: ViewChild,
|
|
1786
|
+
args: ["popoverContainer"]
|
|
1787
|
+
}], onMouseDown: [{
|
|
1788
|
+
type: HostListener,
|
|
1789
|
+
args: ["mousedown", ["$event"]]
|
|
1790
|
+
}], onMouseDownOutsideBody: [{
|
|
1791
|
+
type: HostListener,
|
|
1792
|
+
args: ["window:mousedown", ["$event"]]
|
|
1793
|
+
}], onMouseUp: [{
|
|
1794
|
+
type: HostListener,
|
|
1795
|
+
args: ["mouseup", ["$event"]]
|
|
1796
|
+
}], closeAll: [{
|
|
1797
|
+
type: HostListener,
|
|
1798
|
+
args: ["document:click", ["$event"]]
|
|
1799
|
+
}], actions: [{
|
|
1800
|
+
type: ContentChildren,
|
|
1801
|
+
args: [ActionDirective]
|
|
1802
|
+
}] } });
|
|
1803
|
+
|
|
1508
1804
|
/**
|
|
1509
1805
|
* Generated bundle index. Do not edit.
|
|
1510
1806
|
*/
|
|
1511
1807
|
|
|
1512
|
-
export { ColumnComponent, ConfigService, CookieAttributesGeneral, ErrorInterceptor, FeatureFlagService, GlobalFeatureFlagService, GlobalTermService, InitializeConfigService, IntelicaLibraryUiComponent, LanguageService, RefreshTokenInterceptor, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TermPipe, TermService };
|
|
1808
|
+
export { ActionDirective, ActionsMenuComponent, ColumnComponent, ConfigService, CookieAttributesGeneral, ErrorInterceptor, FeatureFlagService, GlobalFeatureFlagService, GlobalTermService, InitializeConfigService, IntelicaLibraryUiComponent, LanguageService, RefreshTokenInterceptor, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TermPipe, TermService };
|
|
1513
1809
|
//# sourceMappingURL=intelica-library-ui.mjs.map
|