intelica-library-ui 0.1.77 → 0.1.79

package/fesm2022/intelica-library-ui.mjs

@@ -156,6 +156,19 @@ const domain = window.location.hostname.split(".").slice(-2).join(".");
 const secure = !domain.includes("localhost");
 const CookieAttributesGeneral = { domain: domain, path: "/", secure: secure };
 
+const Color = {
+    mastercard: '#ff7f00',
+    visa: '#17375E',
+    amex: '#348AD5',
+    orange: '#ff7f00',
+    blue: '#17375E',
+    gray: '#D3D3D3',
+    gray3: '#a6a5a1',
+};
+const getColor = (name) => {
+    return Color[name];
+};
+
 class FeatureFlagService {
     _http = inject(HttpClient);
     _configService = inject(ConfigService);
@@ -2553,6 +2566,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);
@@ -2940,30 +3110,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
         }] });
 
 class EchartService {
-    getDefaultSeriesColors() {
+    _sharedService = inject(SharedService);
+    /// Chart Generals
+    getDefultAxisConfiguration(type, data, showAxis = true, showSplitLine = false) {
         return {
-            mastercard: "#ff7f00",
-            visa: "#17375E",
-            amex: "#348AD5",
-            orange: "#ff7f00",
-            blue: "#17375E",
-            gray: "#D3D3D3",
-            gray3: "#a6a5a1",
-        };
-    }
-    getTooltipCssText() {
-        return `border-color: ${this.getDefaultSeriesColors()["blue"]};`;
-    }
-    getTooltipFormatter(htmlContent) {
-        return `
-		<div>
-			${htmlContent}
-		</div>
-		`;
-    }
-    getDefultAxisConfiguration(type, show = true, data) {
-        let axis = {
-            show: show,
+            show: showAxis,
             type: type,
             data: data,
             axisTick: {
@@ -2971,31 +3122,149 @@ class EchartService {
             },
             axisLine: {
                 show: false,
+                lineStyle: { color: getColor('gray'), type: 'dashed' },
             },
             splitLine: {
-                show: false,
+                show: showSplitLine,
+                lineStyle: {
+                    color: Color.gray,
+                    type: 'dashed',
+                    width: 1,
+                },
             },
             axisLabel: {
-                color: this.getDefaultSeriesColors()["blue"],
-                fontSize: 12,
+                show: showAxis,
+                color: Color.gray3,
+                fontSize: 14,
+                padding: 10,
             },
         };
-        return axis;
+    }
+    getCategoryAxisConfiguration(data) {
+        return this.getDefultAxisConfiguration('category', data, true);
+    }
+    getValueAxisConfiguration(showAxis = false, format = false, showAxisLines = false) {
+        let axisConfiguration = this.getDefultAxisConfiguration('value', undefined, showAxis, showAxisLines);
+        if (format) {
+            axisConfiguration.axisLabel.formatter = (value) => this._sharedService.FormatNumberWithSuffix(value);
+        }
+        console.log(axisConfiguration);
+        return axisConfiguration;
+    }
+    getTooltipFormatter(color, title, body) {
+        return `
+	 	<div style="font-size: 12px; color: ${color}; border-radius: 6px; min-width: 120px; text-align: center;">
+			<b style=" font-size: 13px;">${title} </b><br>
+			<hr style="border: 1px solid ${color}; margin: 4px 0;">
+			${body}
+		</div>
+	  `;
+    }
+    getGridConfiguration() {
+        return {
+            left: '10%',
+            right: '10%',
+            bottom: '10%',
+            containLabel: true,
+        };
+    }
+    getLegendConfiguration() {
+        return {
+            orient: 'horizontal', // 'horizontal | vertical'
+            icon: 'circle',
+            bottom: 5,
+            align: 'auto',
+            itemGap: 20,
+            textStyle: { color: Color.blue, fontSize: 14 },
+        };
+    }
+    /// Charts Configuration
+    getBarChartOptions(categories, series, labelConfig, tooltipConfig) {
+        return {
+            xAxis: this.getCategoryAxisConfiguration(categories),
+            yAxis: this.getValueAxisConfiguration(),
+            series: [
+                ...series.map((item) => ({
+                    type: 'bar',
+                    name: item.name,
+                    itemStyle: { color: item.color },
+                    data: item.value,
+                    barWidth: '25%',
+                    barGap: '0%',
+                    label: {
+                        show: true,
+                        position: 'top',
+                        color: Color.blue,
+                        fontSize: 12,
+                        formatter: labelConfig,
+                    },
+                })),
+            ],
+            tooltip: {
+                trigger: 'item',
+                backgroundColor: '#FFFFFF',
+                borderWidth: 2,
+                textStyle: { fontSize: 12 },
+                formatter: tooltipConfig,
+            },
+            grid: this.getGridConfiguration(),
+            legend: this.getLegendConfiguration(),
+        };
+    }
+    getBarChartStackOptions(categories, series, labelConfig, tooltipConfig) {
+        let barBase = this.getBarChartOptions(categories, series, labelConfig, tooltipConfig);
+        barBase.series.forEach((serie, index) => {
+            serie.barWidth = '50%';
+            serie.barGap = '0%';
+            serie.barCategoryGap = '10%';
+            serie.stack = 'total';
+            if (index < series.length - 1) {
+                serie.label = undefined;
+            }
+        });
+        return barBase;
+    }
+    getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig) {
+        let barBase = this.getBarChartOptions(categories, series, labelConfig, tooltipConfig);
+        barBase.xAxis = this.getValueAxisConfiguration();
+        barBase.yAxis = this.getCategoryAxisConfiguration(categories);
+        barBase.series.forEach((serie) => {
+            if (serie.label) {
+                serie.label.position = 'right';
+            }
+        });
+        return barBase;
+    }
+    getBarChartHorizontalStackOptions(categories, series, labelConfig, tooltipConfig) {
+        let barBase = this.getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig);
+        barBase.series.forEach((serie, index) => {
+            serie.barWidth = '50%';
+            serie.barGap = '0%';
+            serie.barCategoryGap = '10%';
+            serie.stack = 'total';
+            if (serie.label) {
+                serie.label.position = 'right';
+            }
+            if (index < series.length - 1) {
+                serie.label = undefined;
+            }
+        });
+        return barBase;
     }
     getRateDoughnutPie(data) {
-        const rateData = data.find(d => d.name.toLowerCase() !== "placeholder");
+        const rateData = data.find((d) => d.name.toLowerCase() !== 'placeholder');
         return {
             tooltip: {
-                trigger: "none",
+                trigger: 'none',
             },
             series: [
                 {
-                    name: "RateDoughnutPie",
-                    type: "pie",
+                    name: 'RateDoughnutPie',
+                    type: 'pie',
                     tooltip: {
-                        trigger: "none",
+                        trigger: 'none',
                     },
-                    radius: ["70%", "60%"],
+                    radius: ['70%', '60%'],
                     data: data,
                     startAngle: 0,
                     selectedMode: false,
@@ -3006,20 +3275,20 @@ class EchartService {
                             return `${rateData.name}`;
                         },
                         color: rateData.itemStyle.color,
-                        fontSize: "40",
-                        position: "center",
+                        fontSize: '40',
+                        position: 'center',
                     },
                 },
             ],
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EchartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EchartService, providedIn: "root" });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EchartService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EchartService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: "root",
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -5446,5 +5715,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, Color, 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, getColor };
 //# sourceMappingURL=intelica-library-ui.mjs.map