intelica-library-ui 0.1.77 → 0.1.78

package/fesm2022/intelica-library-ui.mjs

@@ -2553,6 +2553,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Output
             }] } });
 
+class TemplateMenuComponent {
+    termPipe;
+    GlobalTermService = inject(GlobalTermService);
+    Popover;
+    MenuButton;
+    PopoverContainer;
+    template;
+    IsPopoverOpen = false;
+    IsClickInsideDatepicker = false;
+    /**
+     * Indica si el menú de acciones está visible o no.
+     * @type {boolean}
+     * @default false
+     */
+    ShowActionsMenu = false;
+    /**
+     * Indica si la sección de selección de acciones está visible o no.
+     * @type {boolean}
+     * @default false
+     */
+    ShowSelectActions = false;
+    constructor(termPipe) {
+        this.termPipe = termPipe;
+    }
+    ngOnInit() {
+        // const specificRegex = /local.*filt|filt.*local/i;
+        // const generalRegex = /filt/i;
+        // const specificResults = this.actions.filter(action => specificRegex.test(action.name));
+        // if (specificResults.length === 0) {
+        // 	const generalResults = this.actions.filter(action => generalRegex.test(action.name));
+        // 	generalResults.forEach(action => this.showTemplate(action));
+        // } else {
+        // 	specificResults.forEach(action => this.showTemplate(action));
+        // }
+    }
+    openPopover() {
+        this.IsPopoverOpen = true;
+        // Cambia el estado de visibilidad del menú de acciones.
+        this.ShowActionsMenu = true;
+        // Muestra u oculta el menú de selección de acciones.
+        this.ShowSelectActions = true;
+        this.Popover.nativeElement.style.display = "block";
+        this.MenuButton.nativeElement.classList.add("active");
+        this.PopoverContainer.nativeElement.classList.add("backdrop-visible");
+    }
+    closePopover() {
+        this.IsPopoverOpen = false;
+        // Cambia el estado de visibilidad del menú de acciones.
+        this.ShowActionsMenu = false;
+        // Muestra u oculta el menú de selección de acciones.
+        this.ShowSelectActions = true;
+        this.Popover.nativeElement.style.display = "none";
+        this.MenuButton.nativeElement.classList.remove("active");
+        this.PopoverContainer.nativeElement.classList.remove("backdrop-visible");
+    }
+    /** Método para alternar el estado del popover */
+    togglePopover(event) {
+        this.IsPopoverOpen ? this.closePopover() : this.openPopover();
+    }
+    onMouseDown(event) {
+        const target = event.target;
+        if (target.closest(".p-datepicker") || target.closest(".p-inputtext") || target.closest(".p-select-panel") || target.closest(".p-multiselect-panel")) {
+            this.IsClickInsideDatepicker = true;
+        }
+    }
+    onMouseDownOutsideBody(event) {
+        const target = event.target;
+        if (target.closest(".p-datepicker") || target.closest(".p-inputtext") || target.closest(".p-select-panel") || target.closest(".p-multiselect-panel")) {
+            this.IsClickInsideDatepicker = true;
+        }
+    }
+    onMouseUp(event) {
+        setTimeout(() => {
+            this.IsClickInsideDatepicker = false;
+        }, 100);
+    }
+    closeAll(event) {
+        if (!event)
+            return;
+        const target = event.target;
+        const allowedClasses = [
+            "prSelect",
+            "p-select-option-selected",
+            "p-select-option",
+            "p-datepicker-panel",
+            "p-datepicker-select-month",
+            "p-button-text",
+            "p-datepicker-select-year",
+            "p-datepicker-month",
+            "p-datepicker-year",
+            "p-checkbox-input",
+            "p-multiselect-option",
+            "p-multiselect-filter",
+            "p-multiselect-empty-message",
+            "p-inputicon",
+            "p-tree-node-selected",
+            "p-tree-node-content",
+            "p-multiselect-header",
+            "grButton--icon-close-modal",
+            "p-overlay-mask",
+            "p-select-clear-icon",
+            "formRowInputClear",
+            "icon-times",
+            "p-select-empty-message",
+            "p-select-list",
+            "p-iconfield",
+            "p-inputtext",
+            "p-select-header",
+            "p-overlay",
+            "p-select-filter",
+            "p-overlay-content",
+            "p-select-overlay",
+            "p-select-panel",
+            "p-multiselect-panel",
+        ];
+        if (this.IsClickInsideDatepicker) {
+            return;
+        }
+        if (allowedClasses.some(className => target.closest(`.${className}`))) {
+            return;
+        }
+        if (this.Popover && !this.Popover.nativeElement.contains(target) && this.MenuButton && !this.MenuButton.nativeElement.contains(target)) {
+            this.closePopover();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TemplateMenuComponent, deps: [{ token: TermPipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: TemplateMenuComponent, isStandalone: true, selector: "intelica-template-menu", host: { listeners: { "mousedown": "onMouseDown($event)", "window:mousedown": "onMouseDownOutsideBody($event)", "mouseup": "onMouseUp($event)", "document:click": "closeAll($event)" } }, queries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], 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=\"grMenuTemplate\" (click)=\"togglePopover($event)\">\r\n\t\t<span class=\"grMenuTemplate__ico\"><i class=\"icon icon-filter-option\"></i></span>\r\n\t\t<span class=\"grMenuTemplate__txt\">{{ \"Filters\" | term : GlobalTermService.languageCode }}</span>\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>{{ \"Filters\" | 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 grPopoverBody--template\">\r\n\t\t\t\t<ng-container *ngIf=\"template\">\r\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"template\"></ng-container>\r\n\t\t\t\t</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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RippleModule }, { kind: "pipe", type: TermPipe, name: "term" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TemplateMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "intelica-template-menu", imports: [ButtonModule, InputGroupAddonModule, CommonModule, RippleModule, TermPipe], template: "<div #popoverContainer class=\"grPopoverContainer\">\r\n\t<button #menuButton class=\"grMenuTemplate\" (click)=\"togglePopover($event)\">\r\n\t\t<span class=\"grMenuTemplate__ico\"><i class=\"icon icon-filter-option\"></i></span>\r\n\t\t<span class=\"grMenuTemplate__txt\">{{ \"Filters\" | term : GlobalTermService.languageCode }}</span>\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>{{ \"Filters\" | 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 grPopoverBody--template\">\r\n\t\t\t\t<ng-container *ngIf=\"template\">\r\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"template\"></ng-container>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: TermPipe }], propDecorators: { Popover: [{
+                type: ViewChild,
+                args: ["popover"]
+            }], MenuButton: [{
+                type: ViewChild,
+                args: ["menuButton"]
+            }], PopoverContainer: [{
+                type: ViewChild,
+                args: ["popoverContainer"]
+            }], template: [{
+                type: ContentChild,
+                args: ["template", { static: true }]
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ["mousedown", ["$event"]]
+            }], onMouseDownOutsideBody: [{
+                type: HostListener,
+                args: ["window:mousedown", ["$event"]]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ["mouseup", ["$event"]]
+            }], closeAll: [{
+                type: HostListener,
+                args: ["document:click", ["$event"]]
+            }] } });
+
 class HtmlToExcelService {
     ExportTOExcel(idTabla, html, filename, tabname, extension) {
         let Table = document.getElementById(idTabla);
@@ -5446,5 +5603,5 @@ const IntelicaTheme = definePreset(Aura, {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionDirective, ActionsMenuComponent, ButtonSplitComponent, ColumnComponent, ColumnGroupComponent, CompareByField, ConfigService, CookieAttributesGeneral, DynamicInputValidation, EchartComponent, EchartService, EmailInputValidation, ErrorInterceptor, FeatureFlagService, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaTheme, ItemSplitDirective, LanguageService, ModalDialogComponent, OrderConstants, PaginatorComponent, Patterns, PopoverComponent, ProfileService, RecordPerPageComponent, RefreshTokenInterceptor, RowResumenComponent, SearchComponent, SharedService, SortingComponent, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TermGuard, TermPipe, TermService, decryptData, encryptData };
+export { ActionDirective, ActionsMenuComponent, ButtonSplitComponent, ColumnComponent, ColumnGroupComponent, CompareByField, ConfigService, CookieAttributesGeneral, DynamicInputValidation, EchartComponent, EchartService, EmailInputValidation, ErrorInterceptor, FeatureFlagService, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaTheme, ItemSplitDirective, LanguageService, ModalDialogComponent, OrderConstants, PaginatorComponent, Patterns, PopoverComponent, ProfileService, RecordPerPageComponent, RefreshTokenInterceptor, RowResumenComponent, SearchComponent, SharedService, SortingComponent, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TemplateMenuComponent, TermGuard, TermPipe, TermService, decryptData, encryptData };
 //# sourceMappingURL=intelica-library-ui.mjs.map