intelica-library-ui 0.1.105 → 0.1.107

package/fesm2022/intelica-library-ui.mjs

@@ -2674,63 +2674,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
             }] } });
 
 class TemplateMenuComponent {
-    termPipe;
     GlobalTermService = inject(GlobalTermService);
     Popover;
     MenuButton;
     PopoverContainer;
-    template;
+    openPanelEvent = new EventEmitter();
+    closePanelEvent = new EventEmitter();
     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() {
+    constructor() { }
+    openPanel() {
         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");
+        this.openPanelEvent.emit({ open: this.IsPopoverOpen, element: this.Popover.nativeElement });
     }
-    closePopover() {
+    closePanel() {
         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");
+        this.closePanelEvent.emit({ open: this.IsPopoverOpen, element: this.Popover.nativeElement });
     }
-    /** Método para alternar el estado del popover */
-    togglePopover(event) {
-        this.IsPopoverOpen ? this.closePopover() : this.openPopover();
+    togglePanel(event) {
+        console.log("togglePanel", event);
+        this.IsPopoverOpen ? this.closePanel() : this.openPanel();
     }
     onMouseDown(event) {
         const target = event.target;
@@ -2753,11 +2722,9 @@ class TemplateMenuComponent {
         if (!event)
             return;
         const target = event.target;
-        // clases que fuerzan el cierre del popover
         const forceCloseClasses = ["closePopoverNow", "closeTemplateMenu"];
-        // Si se da clic en una clase que debe cerrar sí o sí
         if (forceCloseClasses.some(className => target.closest(`.${className}`))) {
-            this.closePopover();
+            this.closePanel();
             return;
         }
         const allowedClasses = [
@@ -2802,16 +2769,16 @@ class TemplateMenuComponent {
             return;
         }
         if (this.Popover && !this.Popover.nativeElement.contains(target) && this.MenuButton && !this.MenuButton.nativeElement.contains(target)) {
-            this.closePopover();
+            this.closePanel();
         }
     }
-    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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RippleModule }, { kind: "pipe", type: TermPipe, name: "term" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TemplateMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: TemplateMenuComponent, isStandalone: true, selector: "intelica-template-menu", outputs: { openPanelEvent: "onOpen", closePanelEvent: "onClose" }, host: { listeners: { "mousedown": "onMouseDown($event)", "window:mousedown": "onMouseDownOutsideBody($event)", "mouseup": "onMouseUp($event)", "document:click": "closeAll($event)" } }, 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)=\"togglePanel($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<div class=\"grPopoverMenu\" [ngClass]=\"{ hidden: !IsPopoverOpen }\">\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-content></ng-content>\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: [{
+            args: [{ selector: "intelica-template-menu", imports: [ButtonModule, InputGroupAddonModule, CommonModule, RippleModule, TermPipe], template: "<div #popoverContainer class=\"grPopoverContainer\">\r\n\t<button #menuButton class=\"grMenuTemplate\" (click)=\"togglePanel($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<div class=\"grPopoverMenu\" [ngClass]=\"{ hidden: !IsPopoverOpen }\">\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-content></ng-content>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { Popover: [{
                 type: ViewChild,
                 args: ["popover"]
             }], MenuButton: [{
@@ -2820,9 +2787,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
             }], PopoverContainer: [{
                 type: ViewChild,
                 args: ["popoverContainer"]
-            }], template: [{
-                type: ContentChild,
-                args: ["template", { static: true }]
+            }], openPanelEvent: [{
+                type: Output,
+                args: ["onOpen"]
+            }], closePanelEvent: [{
+                type: Output,
+                args: ["onClose"]
             }], onMouseDown: [{
                 type: HostListener,
                 args: ["mousedown", ["$event"]]
@@ -3480,10 +3450,14 @@ class EchartService {
      * @returns - Tooltip HTML string
      */
     getTooltipFormatter(color, title, body) {
-        return `
-	 	<div style="font-size: 12px; color: ${color}; border-radius: 6px; min-width: 120px; text-align: center;">
+        const titleHtml = title.length > 0
+            ? `
 			<b style=" font-size: 13px;">${title} </b><br>
-			<hr style="border: 1px solid ${color}; margin: 4px 0;">
+			<hr style="border: 1px solid ${color}; margin: 4px 0;">`
+            : "";
+        return `
+	 	<div style="font-size: 12px; boder-color: ${color}; color: ${color}; border-radius: 6px; min-width: 120px; text-align: center;">
+			${titleHtml}
 			${body}
 		</div>
 	  `;
@@ -3509,7 +3483,7 @@ class EchartService {
                     name: item.name,
                     itemStyle: { color: item.color },
                     data: item.value,
-                    barWidth: "25%",
+                    // barWidth: "33%",
                     barGap: "0%",
                     label: {
                         show: true,
@@ -3543,8 +3517,8 @@ class EchartService {
     getBarChartStackOptions(categories, series, labelConfig, tooltipConfig, showLegend = false) {
         let barBase = this.getBarChartOptions(categories, series, labelConfig, tooltipConfig, showLegend);
         barBase.series.forEach((serie, index) => {
-            serie.barWidth = "50%";
-            serie.barGap = "0%";
+            // serie.barWidth = "50%";
+            // serie.barGap = "0%";
             serie.barCategoryGap = "10%";
             serie.stack = "total";
             if (index < series.length - 1) {
@@ -3591,8 +3565,8 @@ class EchartService {
     getBarChartHorizontalStackOptions(categories, series, labelConfig, tooltipConfig, showLegend = false) {
         let barBase = this.getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig, showLegend);
         barBase.series.forEach((serie, index) => {
-            serie.barWidth = "50%";
-            serie.barGap = "0%";
+            // serie.barWidth = "50%";
+            // serie.barGap = "0%";
             serie.barCategoryGap = "10%";
             serie.stack = "total";
             if (serie.label) {
@@ -3638,7 +3612,7 @@ class EchartService {
             barBase.grid.containLabel = true;
         }
         barBase.series.forEach((serie, index) => {
-            serie.barWidth = "75%";
+            // serie.barWidth = "75%";
         });
         return barBase;
     }