intelica-library-ui 0.1.186 → 0.1.188

package/fesm2022/intelica-library-ui.mjs

@@ -4809,19 +4809,13 @@ class TemplateMenuComponent {
     }
     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")) {
+        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")) {
+        if (target.closest(".p-datepicker") || target.closest(".p-inputtext") || target.closest(".p-select-panel") || target.closest(".p-multiselect-panel") || target.closest(".swal2-container")) {
             this.IsClickInsideDatepicker = true;
         }
     }
@@ -4839,9 +4833,7 @@ class TemplateMenuComponent {
         // 	this.closePanel();
         // 	return;
         // }
-        if (this.IsPopoverOpen &&
-            this.PopoverContainer &&
-            target === this.PopoverContainer.nativeElement) {
+        if (this.IsPopoverOpen && this.PopoverContainer && target === this.PopoverContainer.nativeElement) {
             this.closePanel();
             return;
         }
@@ -4883,13 +4875,10 @@ class TemplateMenuComponent {
         if (this.IsClickInsideDatepicker) {
             return;
         }
-        if (allowedClasses.some((className) => target.closest(`.${className}`))) {
+        if (allowedClasses.some(className => target.closest(`.${className}`))) {
             return;
         }
-        if (this.Popover &&
-            !this.Popover.nativeElement.contains(target) &&
-            this.MenuButton &&
-            !this.MenuButton.nativeElement.contains(target)) {
+        if (this.Popover && !this.Popover.nativeElement.contains(target) && this.MenuButton && !this.MenuButton.nativeElement.contains(target)) {
             this.closePanel();
         }
     }
@@ -4898,13 +4887,7 @@ class TemplateMenuComponent {
 }
 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)=\"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" }]
+            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"]
@@ -6240,6 +6223,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 }]
         }] });
 
+function darkenColor(input, amount = 0.2) {
+    const clamp = (v) => Math.max(0, Math.min(255, v));
+    const toHex = (v) => v.toString(16).padStart(2, '0');
+    if (input.startsWith('#')) {
+        const r = parseInt(input.slice(1, 3), 16);
+        const g = parseInt(input.slice(3, 5), 16);
+        const b = parseInt(input.slice(5, 7), 16);
+        return `#${toHex(clamp(Math.round(r * (1 - amount))))}${toHex(clamp(Math.round(g * (1 - amount))))}${toHex(clamp(Math.round(b * (1 - amount))))}`;
+    }
+    const m = input.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/i);
+    if (m) {
+        const r = clamp(Math.round(+m[1] * (1 - amount)));
+        const g = clamp(Math.round(+m[2] * (1 - amount)));
+        const b = clamp(Math.round(+m[3] * (1 - amount)));
+        const a = m[4] !== undefined ? `, ${m[4]}` : '';
+        return `rgba(${r}, ${g}, ${b}${a})`;
+    }
+    return input;
+}
+
 class EchartService {
     _sharedService = inject(SharedService);
     /// Chart Generals
@@ -6393,14 +6396,33 @@ class EchartService {
      * @param showLegend - Optional flag to show the legend
      * @returns - EChartsOption - Configuration object for the bar chart
      */
-    getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig, showLegend = false) {
+    getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig, showLegend = false, enableSelectStyle = false // 👈 nuevo
+    ) {
         let barBase = this.getBarChartOptions(categories, series, labelConfig, tooltipConfig, showLegend);
         barBase.xAxis = this.getValueAxisConfiguration();
         barBase.yAxis = this.getCategoryAxisConfiguration(categories);
-        barBase.series.forEach(serie => {
+        barBase.series.forEach((serie, idx) => {
             if (serie.label) {
                 serie.label.position = "right";
             }
+            const baseColor = serie.itemStyle?.color ??
+                (series[idx] && series[idx].color) ??
+                '#FF8A00';
+            serie.itemStyle = {
+                ...(serie.itemStyle || {}),
+                color: baseColor,
+                borderWidth: 0,
+            };
+            if (enableSelectStyle) {
+                serie.selectedMode = 'single';
+                const selectedColor = darkenColor(String(baseColor), 0.38);
+                serie.select = {
+                    itemStyle: {
+                        color: selectedColor,
+                        borderWidth: 0,
+                    },
+                };
+            }
         });
         if (barBase.grid) {
             barBase.grid.left = "10%";
@@ -6451,7 +6473,7 @@ class EchartService {
      * @returns - EChartsOption - Configuration object for the bar chart
      */
     getBarChartTopOptions(categories, series, categoryWidth = 240, labelConfig, tooltipConfig, showLegend = false, categoryFormatter) {
-        const barBase = this.getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig, showLegend);
+        const barBase = this.getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig, showLegend, true);
         if (barBase.yAxis) {
             const y = barBase.yAxis;
             const gr = barBase.grid;