intelica-library-components 1.1.4 → 1.1.13

package/fesm2022/intelica-library-components.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, Pipe, Component, HostListener, Directive, EventEmitter, Output, Input, forwardRef, TemplateRef, ContentChild, ContentChildren, ViewChild, PLATFORM_ID, Inject, Optional, Host } from '@angular/core';
+import { inject, Injectable, signal, Pipe, Component, HostListener, Directive, EventEmitter, Output, Input, forwardRef, TemplateRef, ContentChild, ContentChildren, ViewChild, PLATFORM_ID, Inject, output, Optional, Host } from '@angular/core';
 import { getCookie, Cookies, setCookie } from 'typescript-cookie';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { BehaviorSubject, catchError, throwError, from, switchMap, Subject, Subscription, of, tap, map } from 'rxjs';
+import { BehaviorSubject, catchError, throwError, from, switchMap, Subject, Subscription, of, delay, tap, map } from 'rxjs';
 import Swal from 'sweetalert2';
 import * as i1 from '@angular/common';
-import { CommonModule, DatePipe, isPlatformBrowser } from '@angular/common';
+import { CommonModule, DatePipe, isPlatformBrowser, NgClass } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, FormBuilder, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BadgeModule } from 'primeng/badge';
@@ -18,7 +18,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import moment from 'moment';
 import * as _ from 'lodash';
 import * as i2 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
+import { ButtonModule, Button } from 'primeng/button';
 import * as i3 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import * as i1$2 from 'primeng/popover';
@@ -28,11 +28,12 @@ import { InputText, InputTextModule } from 'primeng/inputtext';
 import * as i6 from 'primeng/select';
 import { Select, SelectModule } from 'primeng/select';
 import * as i3$1 from 'primeng/api';
+import { ConfirmationService } from 'primeng/api';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import * as i3$2 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import * as i2$3 from 'primeng/datepicker';
-import { DatePickerModule } from 'primeng/datepicker';
+import { DatePickerModule, DatePicker } from 'primeng/datepicker';
 import * as i2$2 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as i7 from 'primeng/textarea';
@@ -41,6 +42,8 @@ import { Dialog } from 'primeng/dialog';
 import * as echarts from 'echarts';
 import * as i2$4 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
+import * as i1$3 from 'primeng/confirmdialog';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import * as XLSX from 'xlsx';
 import { Workbook } from 'exceljs';
 import { saveAs } from 'file-saver';
@@ -164,13 +167,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
         }] });
 
 class FormatAmountPipe {
-    transform(value, shortFormat = false, decimalPlaces = 2) {
-        if (value === null || value === undefined) {
-            return "0";
+    transform(value, shortFormat = false, decimalPlaces = 2, validNegative = false) {
+        if (value === null || value === undefined || value == 0) {
+            return "-";
         }
-        const numericValue = typeof value === "string" ? parseFloat(value) : value;
-        if (isNaN(numericValue)) {
-            return "0";
+        const numericValue = typeof value === "string" ? Number.parseFloat(value) : value;
+        if (Number.isNaN(numericValue)) {
+            return "-";
         }
         let formattedValue;
         if (shortFormat) {
@@ -179,6 +182,11 @@ class FormatAmountPipe {
         else {
             formattedValue = this.formatWithThousandSeparators(numericValue, decimalPlaces);
         }
+        if (validNegative) {
+            if (numericValue < 0) {
+                formattedValue = `(${formattedValue})`;
+            }
+        }
         return formattedValue;
     }
     getShortFormat(value, decimalPlaces) {
@@ -191,16 +199,17 @@ class FormatAmountPipe {
         ];
         for (const { limit, suffix } of suffixes) {
             if (absValue >= limit) {
-                return (value / limit).toFixed(decimalPlaces) + suffix;
+                return (absValue / limit).toFixed(decimalPlaces) + suffix;
             }
         }
-        return value.toFixed(decimalPlaces);
+        return absValue.toFixed(decimalPlaces);
     }
     formatWithThousandSeparators(value, decimalPlaces) {
+        const absValue = Math.abs(value);
         return new Intl.NumberFormat("en-US", {
             minimumFractionDigits: decimalPlaces,
             maximumFractionDigits: decimalPlaces,
-        }).format(value);
+        }).format(absValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FormatAmountPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: FormatAmountPipe, isStandalone: true, name: "amount" });
@@ -251,9 +260,10 @@ const Color = {
     amex: "#348AD5",
     orange: "#ff7f00",
     orangeDark: "#CC4900",
+    skyBlue: "#7490E2",
     blue: "#17375E",
-    gray: "#D3D3D3",
-    gray3: "#a6a5a1",
+    gray: "#BABECF",
+    gray3: "#4E546F",
     gray5: "#e9e9e9",
 };
 const getColor = (name) => {
@@ -518,6 +528,33 @@ var TableSortOrder;
     TableSortOrder[TableSortOrder["Desc"] = -1] = "Desc";
 })(TableSortOrder || (TableSortOrder = {}));
 
+/**
+ * Enum representing the different types of alerts available in the system.
+ * Each type corresponds to a specific visual style and semantic meaning.
+ */
+var AlertType;
+(function (AlertType) {
+    /** Warning alert - Yellow icon and title, used for cautionary messages */
+    AlertType["WARNING"] = "warning";
+    /** Success alert - Green icon and title, used for successful operations */
+    AlertType["SUCCESS"] = "success";
+    /** Error alert - Red icon and title, used for error messages */
+    AlertType["ERROR"] = "error";
+})(AlertType || (AlertType = {}));
+/**
+ * Enum representing the button configuration modes for alerts.
+ * Determines which buttons are displayed in the alert dialog.
+ */
+var AlertButtonMode;
+(function (AlertButtonMode) {
+    /** Only shows a single OK/Confirm button */
+    AlertButtonMode["OK_ONLY"] = "ok_only";
+    /** Shows both Confirm and Cancel buttons */
+    AlertButtonMode["CONFIRM_CANCEL"] = "confirm_cancel";
+    /** Shows only a Confirm button (without cancel) */
+    AlertButtonMode["CONFIRM_ONLY"] = "confirm_only";
+})(AlertButtonMode || (AlertButtonMode = {}));
+
 class PermissionsService {
     constructor() { }
     async canActivate(next, state) {
@@ -4917,6 +4954,457 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 args: ["document:click", ["$event"]]
             }] } });
 
+/**
+ * Constants for DatePicker custom button types
+ * Use these constants instead of string literals to maintain consistency
+ * and facilitate future changes
+ */
+const DATEPICKER_BUTTON_TYPES = {
+    TODAY: 'TODAY',
+    LAST_12_MONTHS: 'LAST_12_MONTHS',
+    CURRENT_YEAR: 'CURRENT_YEAR',
+    CURRENT_MONTH: 'CURRENT_MONTH',
+};
+
+class DatepickerComponent {
+    cdr;
+    // Expose constants to template
+    DATEPICKER_BUTTON_TYPES = DATEPICKER_BUTTON_TYPES;
+    /**
+     * @description Readonly input
+     * @default	false
+     * @type {boolean}
+     */
+    readonlyInput = false;
+    /**
+     * @description Show icon
+     * @default	false
+     * @type {boolean}
+     */
+    showIcon = false;
+    /**
+     * @description Number of months to display
+     * @default	2
+     * @type {number}
+     */
+    numberOfMonths = 2;
+    /**
+     * @description Panel style class
+     * @default	"prDatapicker prDatapicker--dropdown"
+     * @type {string}
+     */
+    panelStyleClass = "prDatapicker prDatapicker--dropdown";
+    /**
+     * @description Manual apply mode - requires Apply button click to confirm selection
+     * @default	false
+     * @type {boolean}
+     */
+    manualApply = false;
+    /**
+     * @description Custom buttons to show in footer
+     * @default	[]
+     * @type {CustomButtonType[]}
+     */
+    customButtons = [];
+    /**
+     * @description Date format for display in input
+     * @default	"dd M, yy" (e.g., "08 Jan, 2026")
+     * @type {string}
+     */
+    dateFormat;
+    /**
+     * @description View mode for the datepicker
+     * @default	"date"
+     * @type {"date" | "month" | "year"}
+     */
+    view = "date";
+    /**
+     * @description Selection mode for the datepicker
+     * @default	"range"
+     * @type {"single" | "range"}
+     */
+    selectionMode = "range";
+    /**
+     * @description Change event
+     * @emits {(Date | null)[] | null}
+     * @type {EventEmitter<(Date | null)[] | null>}
+     */
+    onChangeEvent = new EventEmitter();
+    rangeDates = null;
+    // Temporary selection for manual apply mode
+    tempSelection = null;
+    viewMonth;
+    viewYear;
+    currentYear = new Date().getFullYear();
+    currentMonth = new Date().getMonth();
+    defaultDate;
+    navigatingWithArrows = false;
+    // ViewChild to access datepicker instance
+    datepickerRef;
+    // Flag to control when closing is allowed
+    allowClose = true;
+    // Flag to prevent auto-close immediately after date selection
+    preventAutoClose = false;
+    // Track active button
+    activeButton = null;
+    months = [
+        { label: "Enero", value: 0 },
+        { label: "Febrero", value: 1 },
+        { label: "Marzo", value: 2 },
+        { label: "Abril", value: 3 },
+        { label: "Mayo", value: 4 },
+        { label: "Junio", value: 5 },
+        { label: "Julio", value: 6 },
+        { label: "Agosto", value: 7 },
+        { label: "Septiembre", value: 8 },
+        { label: "Octubre", value: 9 },
+        { label: "Noviembre", value: 10 },
+        { label: "Diciembre", value: 11 },
+    ];
+    years = [];
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    constructor(cdr) {
+        this.cdr = cdr;
+        const today = new Date();
+        this.viewMonth = today.getMonth();
+        this.viewYear = today.getFullYear();
+        this.defaultDate = new Date(this.viewYear, this.viewMonth, 1);
+        const YEARS_BACK = 10;
+        this.years = [];
+        for (let y = this.viewYear - YEARS_BACK; y <= this.viewYear; y++) {
+            this.years.push(y);
+        }
+    }
+    get filteredMonths() {
+        if (this.navigatingWithArrows) {
+            return this.months;
+        }
+        if (this.viewYear === this.currentYear) {
+            return this.months.filter(m => m.value >= this.currentMonth);
+        }
+        return this.months;
+    }
+    getDateFormat() {
+        if (this.dateFormat) {
+            return this.dateFormat;
+        }
+        switch (this.view) {
+            case 'month':
+                return 'M, yy';
+            case 'year':
+                return 'yy';
+            default:
+                return 'dd M, yy';
+        }
+    }
+    normalizeMonthYear(month, year) {
+        if (month > 11) {
+            return { month: 0, year: year + 1 };
+        }
+        if (month < 0) {
+            return { month: 11, year: year - 1 };
+        }
+        return { month, year };
+    }
+    onMonthChange(event) {
+        this.navigatingWithArrows = true;
+        const normalized = this.normalizeMonthYear(event.month, event.year);
+        this.viewMonth = normalized.month;
+        this.viewYear = normalized.year;
+    }
+    onYearChange(event) {
+        this.navigatingWithArrows = true;
+        const normalized = this.normalizeMonthYear(event.month, event.year);
+        this.viewMonth = normalized.month;
+        this.viewYear = normalized.year;
+    }
+    onViewChange() {
+        this.navigatingWithArrows = false;
+        if (this.viewYear === this.currentYear && this.viewMonth < this.currentMonth) {
+            this.viewMonth = this.currentMonth;
+        }
+        this.defaultDate = new Date(this.viewYear, this.viewMonth, 1);
+    }
+    // Internal model for the datepicker (handles manual apply mode)
+    get internalModel() {
+        // In manual apply mode, show temp selection for the calendar
+        // In normal mode, show the actual value
+        return this.manualApply ? this.tempSelection : this.rangeDates;
+    }
+    // Handle model changes from datepicker
+    onModelChange(val) {
+        // Reset active button when user manually selects dates
+        this.activeButton = null;
+        if (this.manualApply) {
+            // In manual apply mode, only store in temp selection
+            this.tempSelection = val;
+            // Prevent auto-close immediately after date selection
+            this.preventAutoClose = true;
+            // After a brief moment, allow closing by clicking outside
+            setTimeout(() => {
+                this.preventAutoClose = false;
+            }, 200);
+        }
+        else {
+            // In normal mode, update the actual value immediately
+            this.rangeDates = val;
+            this.onChangeEvent.emit(this.rangeDates);
+            this.onChangeFn(this.rangeDates);
+            this.onTouchedFn();
+        }
+    }
+    writeValue(value) {
+        this.rangeDates = value;
+        if (this.manualApply) {
+            this.tempSelection = value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        /* opcional: implementar si necesitas deshabilitar el componente desde ngModel */
+    }
+    onDateChange() {
+        this.onChangeEvent.emit(this.rangeDates);
+        this.onChangeFn(this.rangeDates);
+        this.onTouchedFn();
+    }
+    // Event handlers for open/close
+    handleOpen() {
+        if (this.manualApply) {
+            // Initialize temp selection with current value
+            this.tempSelection = this.rangeDates;
+            // Reset flags
+            this.allowClose = false;
+            this.preventAutoClose = false;
+            // Ensure hideOverlay is overridden every time the overlay opens
+            setTimeout(() => {
+                this.setupHideOverlayOverride();
+            }, 0);
+        }
+    }
+    handleClose() {
+        if (this.manualApply) {
+            // Reset temp selection to current value (discards changes if not applied)
+            this.tempSelection = this.rangeDates;
+            // Reset flags
+            this.allowClose = false;
+            this.preventAutoClose = false;
+            // Force the datepicker to refresh its internal model to show the original value
+            // Use setTimeout to ensure the change happens after the close animation
+            setTimeout(() => {
+                if (this.datepickerRef) {
+                    // Update the datepicker's internal value
+                    this.datepickerRef.value = this.rangeDates;
+                    // Trigger change detection
+                    this.cdr.detectChanges();
+                }
+            }, 0);
+        }
+    }
+    // Apply button callback
+    applyCallback(event) {
+        // Apply the temporary selection to the actual value
+        this.rangeDates = this.tempSelection;
+        this.onChangeEvent.emit(this.rangeDates);
+        this.onChangeFn(this.rangeDates);
+        this.onTouchedFn();
+        // Allow closing
+        this.allowClose = true;
+        this.preventAutoClose = false;
+        // Close the datepicker overlay
+        if (this.datepickerRef) {
+            this.datepickerRef.overlayVisible = false;
+        }
+    }
+    // Clear button callback
+    clearCallback(event) {
+        // Reset active button
+        this.activeButton = null;
+        if (this.manualApply) {
+            // In manual apply mode, clear both temp selection and actual value
+            this.tempSelection = null;
+            this.rangeDates = null;
+            this.onChangeEvent.emit(this.rangeDates);
+            this.onChangeFn(this.rangeDates);
+            this.onTouchedFn();
+            // Allow closing
+            this.allowClose = true;
+            this.preventAutoClose = false;
+        }
+        else {
+            this.rangeDates = null;
+            this.onChangeEvent.emit(this.rangeDates);
+            this.onChangeFn(this.rangeDates);
+            this.onTouchedFn();
+        }
+        // Close the datepicker overlay
+        if (this.datepickerRef) {
+            this.datepickerRef.overlayVisible = false;
+        }
+    }
+    // Custom button callbacks
+    todayCallback(event) {
+        const today = new Date();
+        const dateRange = [today, today];
+        this.activeButton = DATEPICKER_BUTTON_TYPES.TODAY;
+        if (this.manualApply) {
+            this.tempSelection = dateRange;
+        }
+        else {
+            this.rangeDates = dateRange;
+            this.onChangeEvent.emit(this.rangeDates);
+            this.onChangeFn(this.rangeDates);
+            this.onTouchedFn();
+        }
+    }
+    last12MonthsCallback(event) {
+        const endDate = new Date();
+        const startDate = new Date();
+        startDate.setMonth(startDate.getMonth() - 12);
+        const dateRange = [startDate, endDate];
+        this.activeButton = DATEPICKER_BUTTON_TYPES.LAST_12_MONTHS;
+        if (this.manualApply) {
+            this.tempSelection = dateRange;
+        }
+        else {
+            this.rangeDates = dateRange;
+            this.onChangeEvent.emit(this.rangeDates);
+            this.onChangeFn(this.rangeDates);
+            this.onTouchedFn();
+        }
+    }
+    currentYearCallback(event) {
+        const today = new Date();
+        const startDate = new Date(today.getFullYear(), 0, 1); // January 1st
+        const endDate = new Date(today.getFullYear(), 11, 31); // December 31st
+        const dateRange = [startDate, endDate];
+        this.activeButton = DATEPICKER_BUTTON_TYPES.CURRENT_YEAR;
+        if (this.manualApply) {
+            this.tempSelection = dateRange;
+        }
+        else {
+            this.rangeDates = dateRange;
+            this.onChangeEvent.emit(this.rangeDates);
+            this.onChangeFn(this.rangeDates);
+            this.onTouchedFn();
+        }
+    }
+    currentMonthCallback(event) {
+        const today = new Date();
+        const startDate = new Date(today.getFullYear(), today.getMonth(), 1); // First day of month
+        const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();
+        const endDate = new Date(today.getFullYear(), today.getMonth(), lastDay); // Last day of month
+        const dateRange = [startDate, endDate];
+        this.activeButton = DATEPICKER_BUTTON_TYPES.CURRENT_MONTH;
+        if (this.manualApply) {
+            this.tempSelection = dateRange;
+        }
+        else {
+            this.rangeDates = dateRange;
+            this.onChangeEvent.emit(this.rangeDates);
+            this.onChangeFn(this.rangeDates);
+            this.onTouchedFn();
+        }
+    }
+    // Helper method to check if a button should be shown
+    shouldShowButton(buttonType) {
+        return this.customButtons.includes(buttonType);
+    }
+    // Helper method to get button class
+    getButtonClass(buttonType) {
+        return this.activeButton === buttonType ? 'btnActive' : 'btnSecond';
+    }
+    ngAfterViewChecked() {
+        // Sync viewYear with PrimeNG's internal year when in month view
+        if (this.view === 'month' && this.datepickerRef && this.datepickerRef.currentYear !== undefined) {
+            if (this.viewYear !== this.datepickerRef.currentYear) {
+                // Use setTimeout to avoid ExpressionChangedAfterItHasBeenCheckedError
+                setTimeout(() => {
+                    this.viewYear = this.datepickerRef.currentYear;
+                }, 0);
+            }
+        }
+    }
+    setupHideOverlayOverride() {
+        if (!this.datepickerRef) {
+            return;
+        }
+        // Check if hideOverlay method exists
+        if (!this.datepickerRef.hideOverlay) {
+            return;
+        }
+        // Save the original method only once
+        if (!this.datepickerRef._hideOverlayOriginal) {
+            this.datepickerRef._hideOverlayOriginal = this.datepickerRef.hideOverlay.bind(this.datepickerRef);
+        }
+        // Override the hideOverlay method
+        this.datepickerRef.hideOverlay = () => {
+            // In manual apply mode, prevent auto-close only immediately after date selection
+            if (this.manualApply && this.preventAutoClose) {
+                return;
+            }
+            // In manual apply mode, if closing without Apply button (clicking outside)
+            // Reset temp selection to original value BEFORE closing
+            if (this.manualApply && !this.allowClose) {
+                // Reset temp selection to discard changes
+                this.tempSelection = this.rangeDates;
+                // Update datepicker's internal value
+                this.datepickerRef.value = this.rangeDates;
+            }
+            // Allow closing
+            this.datepickerRef._hideOverlayOriginal();
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DatepickerComponent, isStandalone: true, selector: "intelica-datepicker", inputs: { readonlyInput: "readonlyInput", showIcon: "showIcon", numberOfMonths: "numberOfMonths", panelStyleClass: "panelStyleClass", manualApply: "manualApply", customButtons: "customButtons", dateFormat: "dateFormat", view: "view", selectionMode: "selectionMode" }, outputs: { onChangeEvent: "onChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DatepickerComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "datepickerRef", first: true, predicate: ["datepicker"], descendants: true }], ngImport: i0, template: "<p-datepicker\r\n\t#datepicker\r\n\t[class]=\"panelStyleClass\"\r\n\t[ngModel]=\"internalModel\"\r\n\t(ngModelChange)=\"onModelChange($event)\"\r\n\t[selectionMode]=\"selectionMode\"\r\n\t[numberOfMonths]=\"numberOfMonths\"\r\n\t[readonlyInput]=\"readonlyInput\"\r\n\t[showIcon]=\"showIcon\"\r\n\t[view]=\"view\"\r\n\t[dateFormat]=\"getDateFormat()\"\r\n\t[defaultDate]=\"defaultDate\"\r\n\t(onMonthChange)=\"onMonthChange($event)\"\r\n\t(onYearChange)=\"onYearChange($event)\"\r\n\t(onShow)=\"handleOpen()\"\r\n\t(onHide)=\"handleClose()\"\r\n\t>\r\n\r\n\t<ng-template pTemplate=\"header\">\r\n\t\t<div class=\"prDatapicker__header\">\r\n\t\t\t<div class=\"prDatapicker__content\">\r\n\r\n\t\t\t\t<!-- MES -->\r\n\t\t\t\t<p-select\r\n\t\t\t\t\t*ngIf=\"view === 'date'\"\r\n\t\t\t\t\tclass=\"prSelect\"\r\n\t\t\t\t\t[options]=\"filteredMonths\"\r\n\t\t\t\t\toptionLabel=\"label\"\r\n\t\t\t\t\toptionValue=\"value\"\r\n\t\t\t\t\t[(ngModel)]=\"viewMonth\"\r\n\t\t\t\t\t(ngModelChange)=\"onViewChange()\"\r\n\t\t\t\t\tdropdownIcon=\"icon icon-arrow-down\">\r\n\t\t\t\t</p-select>\r\n\r\n\t\t\t\t<!-- A\u00D1O -->\r\n\t\t\t\t<p-select\r\n\t\t\t\t\t*ngIf=\"view === 'date' || view === 'month'\"\r\n\t\t\t\t\tclass=\"prSelect\"\r\n\t\t\t\t\t[options]=\"years\"\r\n\t\t\t\t\t[(ngModel)]=\"viewYear\"\r\n\t\t\t\t\t(ngModelChange)=\"onViewChange()\"\r\n\t\t\t\t\tdropdownIcon=\"icon icon-arrow-down\"\r\n\t\t\t\t\t[virtualScroll]=\"true\"\r\n\t\t\t\t\t[virtualScrollItemSize]=\"38\">\r\n\t\t\t\t</p-select>\r\n\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\t<ng-template pTemplate=\"footer\" *ngIf=\"selectionMode === 'range'\">\r\n\t\t<div class=\"footerDatapicker footerDatapicker--range\">\r\n\t\t\t<div class=\"footerDatapicker__box\">\r\n\t\t\t\t<!-- TODAY button -->\r\n\t\t\t\t<p-button\r\n\t\t\t\t\t*ngIf=\"shouldShowButton(DATEPICKER_BUTTON_TYPES.TODAY)\"\r\n\t\t\t\t\t[class]=\"getButtonClass(DATEPICKER_BUTTON_TYPES.TODAY)\"\r\n\t\t\t\t\tlabel=\"Today\"\r\n\t\t\t\t\t(click)=\"todayCallback($event)\">\r\n\t\t\t\t</p-button>\r\n\t\t\t\t<!-- LAST 12 MONTHS button -->\r\n\t\t\t\t<p-button\r\n\t\t\t\t\t*ngIf=\"shouldShowButton(DATEPICKER_BUTTON_TYPES.LAST_12_MONTHS)\"\r\n\t\t\t\t\t[class]=\"getButtonClass(DATEPICKER_BUTTON_TYPES.LAST_12_MONTHS)\"\r\n\t\t\t\t\tlabel=\"Last 12 months\"\r\n\t\t\t\t\t(click)=\"last12MonthsCallback($event)\">\r\n\t\t\t\t</p-button>\r\n\t\t\t\t<!-- CURRENT YEAR button -->\r\n\t\t\t\t<p-button\r\n\t\t\t\t\t*ngIf=\"shouldShowButton(DATEPICKER_BUTTON_TYPES.CURRENT_YEAR)\"\r\n\t\t\t\t\t[class]=\"getButtonClass(DATEPICKER_BUTTON_TYPES.CURRENT_YEAR)\"\r\n\t\t\t\t\tlabel=\"Current year\"\r\n\t\t\t\t\t(click)=\"currentYearCallback($event)\">\r\n\t\t\t\t</p-button>\r\n\t\t\t\t<!-- CURRENT MONTH button -->\r\n\t\t\t\t<p-button\r\n\t\t\t\t\t*ngIf=\"shouldShowButton(DATEPICKER_BUTTON_TYPES.CURRENT_MONTH)\"\r\n\t\t\t\t\t[class]=\"getButtonClass(DATEPICKER_BUTTON_TYPES.CURRENT_MONTH)\"\r\n\t\t\t\t\tlabel=\"Current month\"\r\n\t\t\t\t\t(click)=\"currentMonthCallback($event)\">\r\n\t\t\t\t</p-button>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"footerDatapicker__box\">\r\n\t\t\t\t<!-- Apply button - shown only in manual apply mode -->\r\n\t\t\t\t<p-button\r\n\t\t\t\t\t*ngIf=\"manualApply\"\r\n\t\t\t\t\tclass=\"btnPrimary\"\r\n\t\t\t\t\tlabel=\"Apply\"\r\n\t\t\t\t\t(click)=\"applyCallback($event)\">\r\n\t\t\t\t</p-button>\r\n\t\t\t\t<!-- Clear button - always shown -->\r\n\t\t\t\t<p-button\r\n\t\t\t\t\tclass=\"btnSecond\"\r\n\t\t\t\t\tlabel=\"Clear\"\r\n\t\t\t\t\t(click)=\"clearCallback($event)\">\r\n\t\t\t\t</p-button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\r\n</p-datepicker>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "intelica-datepicker", imports: [CommonModule, FormsModule, DatePicker, SelectModule, ButtonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatepickerComponent),
+                            multi: true,
+                        },
+                    ], template: "<p-datepicker\r\n\t#datepicker\r\n\t[class]=\"panelStyleClass\"\r\n\t[ngModel]=\"internalModel\"\r\n\t(ngModelChange)=\"onModelChange($event)\"\r\n\t[selectionMode]=\"selectionMode\"\r\n\t[numberOfMonths]=\"numberOfMonths\"\r\n\t[readonlyInput]=\"readonlyInput\"\r\n\t[showIcon]=\"showIcon\"\r\n\t[view]=\"view\"\r\n\t[dateFormat]=\"getDateFormat()\"\r\n\t[defaultDate]=\"defaultDate\"\r\n\t(onMonthChange)=\"onMonthChange($event)\"\r\n\t(onYearChange)=\"onYearChange($event)\"\r\n\t(onShow)=\"handleOpen()\"\r\n\t(onHide)=\"handleClose()\"\r\n\t>\r\n\r\n\t<ng-template pTemplate=\"header\">\r\n\t\t<div class=\"prDatapicker__header\">\r\n\t\t\t<div class=\"prDatapicker__content\">\r\n\r\n\t\t\t\t<!-- MES -->\r\n\t\t\t\t<p-select\r\n\t\t\t\t\t*ngIf=\"view === 'date'\"\r\n\t\t\t\t\tclass=\"prSelect\"\r\n\t\t\t\t\t[options]=\"filteredMonths\"\r\n\t\t\t\t\toptionLabel=\"label\"\r\n\t\t\t\t\toptionValue=\"value\"\r\n\t\t\t\t\t[(ngModel)]=\"viewMonth\"\r\n\t\t\t\t\t(ngModelChange)=\"onViewChange()\"\r\n\t\t\t\t\tdropdownIcon=\"icon icon-arrow-down\">\r\n\t\t\t\t</p-select>\r\n\r\n\t\t\t\t<!-- A\u00D1O -->\r\n\t\t\t\t<p-select\r\n\t\t\t\t\t*ngIf=\"view === 'date' || view === 'month'\"\r\n\t\t\t\t\tclass=\"prSelect\"\r\n\t\t\t\t\t[options]=\"years\"\r\n\t\t\t\t\t[(ngModel)]=\"viewYear\"\r\n\t\t\t\t\t(ngModelChange)=\"onViewChange()\"\r\n\t\t\t\t\tdropdownIcon=\"icon icon-arrow-down\"\r\n\t\t\t\t\t[virtualScroll]=\"true\"\r\n\t\t\t\t\t[virtualScrollItemSize]=\"38\">\r\n\t\t\t\t</p-select>\r\n\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\t<ng-template pTemplate=\"footer\" *ngIf=\"selectionMode === 'range'\">\r\n\t\t<div class=\"footerDatapicker footerDatapicker--range\">\r\n\t\t\t<div class=\"footerDatapicker__box\">\r\n\t\t\t\t<!-- TODAY button -->\r\n\t\t\t\t<p-button\r\n\t\t\t\t\t*ngIf=\"shouldShowButton(DATEPICKER_BUTTON_TYPES.TODAY)\"\r\n\t\t\t\t\t[class]=\"getButtonClass(DATEPICKER_BUTTON_TYPES.TODAY)\"\r\n\t\t\t\t\tlabel=\"Today\"\r\n\t\t\t\t\t(click)=\"todayCallback($event)\">\r\n\t\t\t\t</p-button>\r\n\t\t\t\t<!-- LAST 12 MONTHS button -->\r\n\t\t\t\t<p-button\r\n\t\t\t\t\t*ngIf=\"shouldShowButton(DATEPICKER_BUTTON_TYPES.LAST_12_MONTHS)\"\r\n\t\t\t\t\t[class]=\"getButtonClass(DATEPICKER_BUTTON_TYPES.LAST_12_MONTHS)\"\r\n\t\t\t\t\tlabel=\"Last 12 months\"\r\n\t\t\t\t\t(click)=\"last12MonthsCallback($event)\">\r\n\t\t\t\t</p-button>\r\n\t\t\t\t<!-- CURRENT YEAR button -->\r\n\t\t\t\t<p-button\r\n\t\t\t\t\t*ngIf=\"shouldShowButton(DATEPICKER_BUTTON_TYPES.CURRENT_YEAR)\"\r\n\t\t\t\t\t[class]=\"getButtonClass(DATEPICKER_BUTTON_TYPES.CURRENT_YEAR)\"\r\n\t\t\t\t\tlabel=\"Current year\"\r\n\t\t\t\t\t(click)=\"currentYearCallback($event)\">\r\n\t\t\t\t</p-button>\r\n\t\t\t\t<!-- CURRENT MONTH button -->\r\n\t\t\t\t<p-button\r\n\t\t\t\t\t*ngIf=\"shouldShowButton(DATEPICKER_BUTTON_TYPES.CURRENT_MONTH)\"\r\n\t\t\t\t\t[class]=\"getButtonClass(DATEPICKER_BUTTON_TYPES.CURRENT_MONTH)\"\r\n\t\t\t\t\tlabel=\"Current month\"\r\n\t\t\t\t\t(click)=\"currentMonthCallback($event)\">\r\n\t\t\t\t</p-button>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"footerDatapicker__box\">\r\n\t\t\t\t<!-- Apply button - shown only in manual apply mode -->\r\n\t\t\t\t<p-button\r\n\t\t\t\t\t*ngIf=\"manualApply\"\r\n\t\t\t\t\tclass=\"btnPrimary\"\r\n\t\t\t\t\tlabel=\"Apply\"\r\n\t\t\t\t\t(click)=\"applyCallback($event)\">\r\n\t\t\t\t</p-button>\r\n\t\t\t\t<!-- Clear button - always shown -->\r\n\t\t\t\t<p-button\r\n\t\t\t\t\tclass=\"btnSecond\"\r\n\t\t\t\t\tlabel=\"Clear\"\r\n\t\t\t\t\t(click)=\"clearCallback($event)\">\r\n\t\t\t\t</p-button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\r\n</p-datepicker>\r\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { readonlyInput: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], numberOfMonths: [{
+                type: Input
+            }], panelStyleClass: [{
+                type: Input
+            }], manualApply: [{
+                type: Input
+            }], customButtons: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], onChangeEvent: [{
+                type: Output,
+                args: ["onChange"]
+            }], datepickerRef: [{
+                type: ViewChild,
+                args: ['datepicker']
+            }] } });
+
 class SkeletonService {
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     hide() {
@@ -5348,6 +5836,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 type: Input
             }] } });
 
+class IntelicaAlertComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IntelicaAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: IntelicaAlertComponent, isStandalone: true, selector: "intelica-alert", ngImport: i0, template: "<p-confirmDialog key=\"intelica-alert-dialog\" [style]=\"{width: 'auto', 'max-width': '90cw'}\" [closable]=\"false\"\r\n    [visible]=\"undefined\">\r\n    <!-- \r\n        We use the headless template. \r\n        'message' contains the confirmation object.\r\n        'message.data' contains our custom 'presentationData' object from AlertService.\r\n    -->\r\n    <ng-template pTemplate=\"headless\" let-message let-onAccept=\"onAccept\" let-onReject=\"onReject\">\r\n        <div [style]=\"message.data.dialogStyle\"\r\n            style=\"background: white; display: flex; flex-direction: column; align-items: center; padding: 2rem; position: relative; text-align: center;\">\r\n\r\n            <!-- Close Button -->\r\n            @if (message.data.config.showCloseButton) {\r\n            <button type=\"button\"\r\n                style=\"position: absolute; top: 0.75rem; right: 0.75rem; background: transparent; border: none; cursor: pointer; padding: 0.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s;\"\r\n                (click)=\"onReject()\" aria-label=\"Cerrar\">\r\n                <i class=\"pi pi-times\" style=\"font-size: 1.25rem; color: #6c757d;\"></i>\r\n            </button>\r\n            }\r\n\r\n            <!-- Icon -->\r\n            <div [style.backgroundColor]=\"message.data.iconBackgroundColor\"\r\n                style=\"width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;\">\r\n                @if (message.data.config.customImageUrl) {\r\n                <img [src]=\"message.data.config.customImageUrl\" style=\"width: 60px; height: 60px; object-fit: contain;\"\r\n                    alt=\"Alert icon\" />\r\n                } @else {\r\n                <i [class]=\"message.data.iconClass\" [style.color]=\"message.data.iconColor\"\r\n                    style=\"font-size: 2.5rem;\"></i>\r\n                }\r\n            </div>\r\n\r\n            <!-- Title -->\r\n            <h2 [style.color]=\"message.data.titleColor\"\r\n                style=\"margin: 0 0 0.75rem 0; font-size: 1.5rem; font-weight: 600;\">{{ message.header }}</h2>\r\n\r\n            <!-- Subtitle / Message -->\r\n            @if (message.message) {\r\n            <p [style.color]=\"message.data.config.styles?.subtitleColor ?? '#555'\"\r\n                style=\"margin: 0 0 1.5rem 0; font-size: 1rem; line-height: 1.5;\">{{ message.message }}</p>\r\n            }\r\n\r\n            <!-- HTML Content -->\r\n            @if (message.data.config.htmlContent) {\r\n            <div [innerHTML]=\"message.data.config.htmlContent\"\r\n                [style.color]=\"message.data.config.styles?.subtitleColor ?? '#555'\"\r\n                style=\"margin-bottom: 1.5rem; width: 100%;\"></div>\r\n            }\r\n\r\n            <!-- Buttons -->\r\n            <div style=\"display: flex; gap: 0.75rem; justify-content: center; width: 100%; margin-top: 0.5rem;\">\r\n                <!-- Cancel Button -->\r\n                @if (message.data.showCancelButton) {\r\n                <p-button [label]=\"message.data.cancelText\" [style]=\"message.data.cancelButtonStyle\"\r\n                    severity=\"secondary\" [outlined]=\"true\" (onClick)=\"onReject()\" />\r\n                }\r\n                <!-- Confirm Button -->\r\n                <p-button [label]=\"message.data.confirmText\" [style]=\"message.data.confirmButtonStyle\"\r\n                    (onClick)=\"onAccept()\" />\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</p-confirmDialog>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i1$3.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IntelicaAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "intelica-alert", standalone: true, imports: [CommonModule, ConfirmDialogModule, ButtonModule], template: "<p-confirmDialog key=\"intelica-alert-dialog\" [style]=\"{width: 'auto', 'max-width': '90cw'}\" [closable]=\"false\"\r\n    [visible]=\"undefined\">\r\n    <!-- \r\n        We use the headless template. \r\n        'message' contains the confirmation object.\r\n        'message.data' contains our custom 'presentationData' object from AlertService.\r\n    -->\r\n    <ng-template pTemplate=\"headless\" let-message let-onAccept=\"onAccept\" let-onReject=\"onReject\">\r\n        <div [style]=\"message.data.dialogStyle\"\r\n            style=\"background: white; display: flex; flex-direction: column; align-items: center; padding: 2rem; position: relative; text-align: center;\">\r\n\r\n            <!-- Close Button -->\r\n            @if (message.data.config.showCloseButton) {\r\n            <button type=\"button\"\r\n                style=\"position: absolute; top: 0.75rem; right: 0.75rem; background: transparent; border: none; cursor: pointer; padding: 0.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s;\"\r\n                (click)=\"onReject()\" aria-label=\"Cerrar\">\r\n                <i class=\"pi pi-times\" style=\"font-size: 1.25rem; color: #6c757d;\"></i>\r\n            </button>\r\n            }\r\n\r\n            <!-- Icon -->\r\n            <div [style.backgroundColor]=\"message.data.iconBackgroundColor\"\r\n                style=\"width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;\">\r\n                @if (message.data.config.customImageUrl) {\r\n                <img [src]=\"message.data.config.customImageUrl\" style=\"width: 60px; height: 60px; object-fit: contain;\"\r\n                    alt=\"Alert icon\" />\r\n                } @else {\r\n                <i [class]=\"message.data.iconClass\" [style.color]=\"message.data.iconColor\"\r\n                    style=\"font-size: 2.5rem;\"></i>\r\n                }\r\n            </div>\r\n\r\n            <!-- Title -->\r\n            <h2 [style.color]=\"message.data.titleColor\"\r\n                style=\"margin: 0 0 0.75rem 0; font-size: 1.5rem; font-weight: 600;\">{{ message.header }}</h2>\r\n\r\n            <!-- Subtitle / Message -->\r\n            @if (message.message) {\r\n            <p [style.color]=\"message.data.config.styles?.subtitleColor ?? '#555'\"\r\n                style=\"margin: 0 0 1.5rem 0; font-size: 1rem; line-height: 1.5;\">{{ message.message }}</p>\r\n            }\r\n\r\n            <!-- HTML Content -->\r\n            @if (message.data.config.htmlContent) {\r\n            <div [innerHTML]=\"message.data.config.htmlContent\"\r\n                [style.color]=\"message.data.config.styles?.subtitleColor ?? '#555'\"\r\n                style=\"margin-bottom: 1.5rem; width: 100%;\"></div>\r\n            }\r\n\r\n            <!-- Buttons -->\r\n            <div style=\"display: flex; gap: 0.75rem; justify-content: center; width: 100%; margin-top: 0.5rem;\">\r\n                <!-- Cancel Button -->\r\n                @if (message.data.showCancelButton) {\r\n                <p-button [label]=\"message.data.cancelText\" [style]=\"message.data.cancelButtonStyle\"\r\n                    severity=\"secondary\" [outlined]=\"true\" (onClick)=\"onReject()\" />\r\n                }\r\n                <!-- Confirm Button -->\r\n                <p-button [label]=\"message.data.confirmText\" [style]=\"message.data.confirmButtonStyle\"\r\n                    (onClick)=\"onAccept()\" />\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</p-confirmDialog>\r\n" }]
+        }] });
+
+class AddFavoritesService {
+    configService = inject(ConfigService);
+    addPageToFavorites() {
+        return of(void 0).pipe(delay(200), tap(() => console.log("Test: Added current page to favorites")));
+    }
+    isPageFavorite() {
+        return of(false).pipe(delay(200), tap(() => console.log("Test: Checked if current page is favorite")));
+    }
+    simulateToggle() {
+        return of(void 0).pipe(delay(200), tap(() => console.log("Test: Toggle favorite request")));
+    }
+    removeFromFavorites() {
+        return of(void 0).pipe(delay(200), tap(() => console.log("Test: removed from favorites")));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AddFavoritesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AddFavoritesService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AddFavoritesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
+const ICON_ON = "icon-favorites-on";
+const ICON_OFF = "icon-favorites-off";
+class AddFavoritesComponent {
+    termService = inject(GlobalTermService);
+    favoritesMock = inject(AddFavoritesService);
+    favoriteChanged = output();
+    isFavorite = false;
+    iconClass = ICON_OFF;
+    ngOnInit() {
+        this.loadInitialState();
+    }
+    toggleFavorite() {
+        const action$ = this.isFavorite ? this.favoritesMock.removeFromFavorites() : this.favoritesMock.addPageToFavorites();
+        action$.subscribe({
+            next: () => {
+                this.isFavorite = !this.isFavorite;
+                this.updateIcon();
+                this.favoriteChanged.emit(this.isFavorite);
+            },
+        });
+    }
+    loadInitialState() {
+        this.favoritesMock.isPageFavorite().subscribe({
+            next: isFavorite => {
+                this.isFavorite = isFavorite;
+                this.updateIcon();
+            },
+        });
+    }
+    updateIcon() {
+        this.iconClass = this.isFavorite ? ICON_ON : ICON_OFF;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AddFavoritesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: AddFavoritesComponent, isStandalone: true, selector: "intelica-add-favorites", outputs: { favoriteChanged: "favoriteChanged" }, ngImport: i0, template: "<p-button class=\"prButton\" severity=\"secondary\" (onClick)=\"toggleFavorite()\">\r\n\t<i class=\"icon p-button-icon-left\" [ngClass]=\"iconClass\" pButtonIcon></i>\r\n\t<span pButtonLabel>{{ \"ADD_TO_FAVORITES\" | term : termService.languageCode }}</span>\r\n</p-button>\r\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TermPipe, name: "term" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AddFavoritesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "intelica-add-favorites", imports: [Button, TermPipe, NgClass], template: "<p-button class=\"prButton\" severity=\"secondary\" (onClick)=\"toggleFavorite()\">\r\n\t<i class=\"icon p-button-icon-left\" [ngClass]=\"iconClass\" pButtonIcon></i>\r\n\t<span pButtonLabel>{{ \"ADD_TO_FAVORITES\" | term : termService.languageCode }}</span>\r\n</p-button>\r\n" }]
+        }] });
+
 class CheckboxFilterDirective extends FilterDirective {
     constructor() {
         super(FilterTypeEnum.Checkbox);
@@ -5814,6 +6375,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 args: ["onChange", ["$event"]]
             }] } });
 
+/**
+ * Default configuration values for alerts.
+ */
+const ALERT_DEFAULTS = {
+    buttonMode: AlertButtonMode.OK_ONLY,
+    showCloseButton: true,
+    buttons: {
+        confirmText: "Ok",
+        cancelText: "Cancelar",
+    },
+};
+/**
+ * Paths to custom SVG icons for alerts.
+ * Icons should be placed in: public/assets/icons/alerts/
+ */
+const ALERT_ICON_PATHS = {
+    error: "/assets/icons/alerts/alert-error.svg",
+    // warning: "/assets/icons/alerts/alert-warning.svg",
+    // success: "/assets/icons/alerts/alert-success.svg",
+};
+/**
+ * Centralized configuration for each alert type using PrimeNG icons.
+ */
+const ALERT_TYPE_CONFIG = {
+    [AlertType.WARNING]: {
+        titleColor: "#f0ad4e",
+        icon: "pi pi-exclamation-triangle",
+        iconBackgroundColor: "#fff3cd",
+        iconColor: "#f0ad4e",
+    },
+    [AlertType.SUCCESS]: {
+        titleColor: "#5cb85c",
+        icon: "pi pi-check-circle",
+        iconBackgroundColor: "#d4edda",
+        iconColor: "#5cb85c",
+    },
+    [AlertType.ERROR]: {
+        titleColor: "#d9534f",
+        icon: "pi pi-times-circle",
+        iconBackgroundColor: "#f8d7da",
+        iconColor: "#d9534f",
+    },
+};
+
 class HtmlToExcelService {
     ExportTOExcel(idTabla, html, filename, tabname, extension) {
         let Table = document.getElementById(idTabla);
@@ -6207,6 +6812,239 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 }]
         }] });
 
+class AlertService {
+    confirmationService = inject(ConfirmationService);
+    DIALOG_KEY = 'intelica-alert-dialog';
+    /**
+     * Displays a warning alert with yellow styling.
+     * Can be called with (title, subtitle, buttonMode, buttons) OR (title, subtitle, buttons).
+     */
+    warning(title, subtitle, modeOrButtons, buttons) {
+        const { buttonMode, buttonConfig } = this.resolveArgs(modeOrButtons, buttons);
+        return this.show({
+            type: AlertType.WARNING,
+            title,
+            subtitle,
+            buttonMode,
+            buttons: buttonConfig,
+        });
+    }
+    /**
+     * Displays a success alert with green styling.
+     * Can be called with (title, subtitle, buttonMode, buttons) OR (title, subtitle, buttons).
+     */
+    success(title, subtitle, modeOrButtons, buttons) {
+        const { buttonMode, buttonConfig } = this.resolveArgs(modeOrButtons, buttons);
+        return this.show({
+            type: AlertType.SUCCESS,
+            title,
+            subtitle,
+            buttonMode,
+            buttons: buttonConfig,
+        });
+    }
+    /**
+     * Displays an error alert with red styling.
+     * Can be called with (title, subtitle, buttonMode, buttons) OR (title, subtitle, buttons).
+     */
+    error(title, subtitle, modeOrButtons, buttons) {
+        const { buttonMode, buttonConfig } = this.resolveArgs(modeOrButtons, buttons);
+        return this.show({
+            type: AlertType.ERROR,
+            title,
+            subtitle,
+            buttonMode,
+            buttons: buttonConfig,
+        });
+    }
+    /**
+     * Helper to resolve flexible arguments.
+     * If 3rd arg is object (not string enum), treat it as buttons config and default mode to OK_ONLY.
+     * If 3rd arg is string (enum), treat it as mode and 4th as buttons config.
+     */
+    resolveArgs(modeOrButtons, buttons) {
+        if (modeOrButtons && typeof modeOrButtons === 'object') {
+            // USAGE: success(title, subtitle, { confirmText: 'Ok', cancelText: 'Cancel' })
+            // Auto-detect mode based on presence of cancelText
+            const hasCancel = !!modeOrButtons.cancelText;
+            return {
+                buttonMode: hasCancel ? AlertButtonMode.CONFIRM_CANCEL : AlertButtonMode.OK_ONLY,
+                buttonConfig: modeOrButtons
+            };
+        }
+        // USAGE: success(title, subtitle, AlertButtonMode.CONFIRM_CANCEL, { ... })
+        // OR default
+        return {
+            buttonMode: modeOrButtons ?? AlertButtonMode.OK_ONLY,
+            buttonConfig: buttons
+        };
+    }
+    message(message, type = AlertType.WARNING) {
+        return this.show({
+            type,
+            title: message,
+            buttonMode: AlertButtonMode.OK_ONLY,
+        });
+    }
+    confirm(title, subtitle, confirmText = "Confirmar", cancelText = "Cancelar", type = AlertType.WARNING) {
+        return this.show({
+            type,
+            title,
+            subtitle,
+            buttonMode: AlertButtonMode.CONFIRM_CANCEL,
+            buttons: { confirmText, cancelText },
+        });
+    }
+    showHtml(title, htmlContent, type = AlertType.WARNING, buttonMode = AlertButtonMode.OK_ONLY) {
+        return this.show({
+            type,
+            title,
+            htmlContent,
+            buttonMode,
+        });
+    }
+    showWithStyles(config, styles) {
+        return this.show({
+            ...config,
+            styles,
+        });
+    }
+    show(config) {
+        return new Promise((resolve) => {
+            const mergedConfig = this.mergeWithDefaults(config);
+            const typeConfig = ALERT_TYPE_CONFIG[mergedConfig.type];
+            // Prepare data object for the view
+            const data = {
+                config: mergedConfig,
+                typeConfig: typeConfig,
+                iconClass: this.getIconClass(mergedConfig, typeConfig),
+                iconBackgroundColor: this.getIconBackgroundColor(mergedConfig, typeConfig),
+                iconColor: this.getIconColor(mergedConfig, typeConfig),
+                titleColor: this.getTitleColor(mergedConfig, typeConfig),
+                showCancelButton: this.showCancelButton(mergedConfig),
+                confirmText: this.getConfirmText(mergedConfig),
+                cancelText: this.getCancelText(mergedConfig),
+                dialogStyle: {
+                    width: mergedConfig.styles?.width ?? "400px",
+                    maxWidth: "90vw",
+                    borderRadius: "12px",
+                    overflow: "hidden",
+                },
+                confirmButtonStyle: this.getConfirmButtonStyle(mergedConfig),
+                cancelButtonStyle: this.getCancelButtonStyle(mergedConfig),
+                // Add manual dismiss handler to data so template can call it if needed, 
+                // though explicit close button in template can just use reject or logic.
+                // For custom headers/X buttons usually we initiate close.
+            };
+            const confirmation = {
+                key: this.DIALOG_KEY,
+                message: mergedConfig.subtitle,
+                header: mergedConfig.title,
+                icon: data.iconClass,
+                dismissableMask: true,
+                closeOnEscape: true,
+                accept: () => {
+                    resolve({
+                        isConfirmed: true,
+                        isCancelled: false,
+                        isDismissed: false,
+                    });
+                },
+                reject: (type) => {
+                    resolve({
+                        isConfirmed: false,
+                        isCancelled: true,
+                        isDismissed: false,
+                    });
+                },
+            };
+            // Cast to any to allow 'data' property if it doesn't exist on type
+            confirmation.data = data;
+            this.confirmationService.confirm(confirmation);
+        });
+    }
+    // Private Helper Methods (Presentation Logic)
+    mergeWithDefaults(config) {
+        return {
+            ...ALERT_DEFAULTS,
+            ...config,
+            buttons: {
+                ...ALERT_DEFAULTS.buttons,
+                ...config.buttons,
+            },
+        };
+    }
+    getIconClass(config, typeConfig) {
+        if (config?.customIcon) {
+            return config.customIcon;
+        }
+        return typeConfig?.icon ?? "pi pi-info-circle";
+    }
+    getIconBackgroundColor(config, typeConfig) {
+        if (config?.styles?.iconBackgroundColor) {
+            return config.styles.iconBackgroundColor;
+        }
+        return typeConfig?.iconBackgroundColor ?? "#e3f2fd";
+    }
+    getIconColor(config, typeConfig) {
+        if (config?.styles?.iconColor) {
+            return config.styles.iconColor;
+        }
+        return typeConfig?.iconColor ?? "#1976d2";
+    }
+    getTitleColor(config, typeConfig) {
+        if (config?.styles?.titleColor) {
+            return config.styles.titleColor;
+        }
+        return typeConfig?.titleColor ?? "#333";
+    }
+    showCancelButton(config) {
+        return config?.buttonMode === AlertButtonMode.CONFIRM_CANCEL;
+    }
+    getConfirmText(config) {
+        return config?.buttons?.confirmText ?? "Ok";
+    }
+    getCancelText(config) {
+        return config?.buttons?.cancelText ?? "Cancelar";
+    }
+    getConfirmButtonStyle(config) {
+        const styles = config?.styles;
+        const baseStyle = {
+            minWidth: "120px",
+        };
+        if (styles?.confirmButtonColor) {
+            baseStyle["backgroundColor"] = styles.confirmButtonColor;
+            baseStyle["borderColor"] = styles.confirmButtonColor;
+        }
+        if (styles?.confirmButtonTextColor) {
+            baseStyle["color"] = styles.confirmButtonTextColor;
+        }
+        return baseStyle;
+    }
+    getCancelButtonStyle(config) {
+        const styles = config?.styles;
+        const baseStyle = {
+            minWidth: "120px",
+        };
+        if (styles?.cancelButtonColor) {
+            baseStyle["backgroundColor"] = styles.cancelButtonColor;
+            baseStyle["borderColor"] = styles.cancelButtonColor;
+        }
+        if (styles?.cancelButtonTextColor) {
+            baseStyle["color"] = styles.cancelButtonTextColor;
+        }
+        return baseStyle;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AlertService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AlertService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
 class LanguageService {
     _http = inject(HttpClient);
     _configService = inject(ConfigService);
@@ -6260,14 +7098,17 @@ class EchartService {
             },
             splitLine: {
                 show: showSplitLine,
-                lineStyle: {
-                    color: Color.gray,
-                    type: "dashed",
-                    width: 1,
-                },
+                // lineStyle: {
+                // 	color: Color.gray,
+                // 	type: "dashed",
+                // 	width: 1,
+                // },
+                lineStyle: { width: 1, color: Color.gray, type: [5, 5], cap: "round" },
             },
             axisLabel: {
-                show: showAxis,
+                fontFamily: "Lato, sans-serif",
+                show: true,
+                // show: showAxis,
                 color: Color.gray3,
                 fontSize: 14,
                 padding: 10,
@@ -6277,7 +7118,7 @@ class EchartService {
     getCategoryAxisConfiguration(data) {
         return this.getDefultAxisConfiguration("category", data, true);
     }
-    getValueAxisConfiguration(showAxis = false, format = false, showAxisLines = false) {
+    getValueAxisConfiguration(showAxis = true, format = true, showAxisLines = true) {
         let axisConfiguration = this.getDefultAxisConfiguration("value", undefined, showAxis, showAxisLines);
         if (format) {
             axisConfiguration.axisLabel.formatter = (value) => this._sharedService.FormatNumberWithSuffix(value);
@@ -6286,20 +7127,37 @@ class EchartService {
     }
     getGridConfiguration() {
         return {
-            left: "0%",
-            right: "0%",
-            //bottom: '0%',
+            // left: "0%",
+            // right: "0%",
+            // //bottom: '0%',
+            // containLabel: true,
+            left: 0,
+            right: 0,
+            top: 20,
+            bottom: 40,
             containLabel: true,
         };
     }
     getLegendConfiguration() {
         return {
-            orient: "horizontal", // 'horizontal | vertical'
-            icon: "circle",
-            bottom: 5,
-            align: "auto",
-            itemGap: 20,
-            textStyle: { color: Color.blue, fontSize: 14 },
+            // orient: "horizontal", // 'horizontal | vertical'
+            // icon: "circle",
+            // bottom: 5,
+            // align: "auto",
+            // itemGap: 20,
+            // textStyle: { color: Color.blue, fontSize: 14 },
+            data: [{ name: "Expenses", icon: "circle" }],
+            bottom: 0,
+            textStyle: {
+                color: "#4E546F",
+                fontFamily: "Lato, sans-serif",
+                fontSize: 12,
+                lineHeight: 12,
+            },
+            itemWidth: 10,
+            itemHeight: 10,
+            itemGap: 25,
+            align: "left",
         };
     }
     /**
@@ -6335,15 +7193,16 @@ class EchartService {
      */
     getBarChartOptions(categories, series, labelConfig, tooltipConfig, showLegend = false) {
         return {
+            textStyle: { fontFamily: "Lato, sans-serif" },
             xAxis: this.getCategoryAxisConfiguration(categories),
             yAxis: this.getValueAxisConfiguration(),
             series: [
                 ...series.map((item) => ({
                     type: "bar",
                     name: item.name,
-                    itemStyle: { color: item.color },
+                    itemStyle: { color: item.color, borderRadius: 8 },
                     data: item.value,
-                    // barWidth: "33%",
+                    barWidth: "33%",
                     barGap: "0%",
                     label: {
                         show: true,
@@ -6360,6 +7219,7 @@ class EchartService {
                 borderWidth: 2,
                 textStyle: { fontSize: 12 },
                 formatter: tooltipConfig,
+                appendTo: "body",
             },
             grid: this.getGridConfiguration(),
             legend: showLegend ? this.getLegendConfiguration() : undefined,
@@ -6399,22 +7259,20 @@ class EchartService {
     getBarChartHorizontalOptions(categories, series, labelConfig, tooltipConfig, showLegend = false, enableSelectStyle = false // 👈 nuevo
     ) {
         let barBase = this.getBarChartOptions(categories, series, labelConfig, tooltipConfig, showLegend);
-        barBase.xAxis = this.getValueAxisConfiguration();
+        barBase.xAxis = this.getValueAxisConfiguration(false, true, false);
         barBase.yAxis = this.getCategoryAxisConfiguration(categories);
         barBase.series.forEach((serie, idx) => {
             if (serie.label) {
                 serie.label.position = "right";
             }
-            const baseColor = serie.itemStyle?.color ??
-                (series[idx] && series[idx].color) ??
-                '#FF8A00';
+            const baseColor = serie.itemStyle?.color ?? (series[idx] && series[idx].color) ?? "#FF8A00";
             serie.itemStyle = {
                 ...(serie.itemStyle || {}),
                 color: baseColor,
                 borderWidth: 0,
             };
             if (enableSelectStyle) {
-                serie.selectedMode = 'single';
+                serie.selectedMode = "single";
                 const selectedColor = darkenColor(String(baseColor), 0.38);
                 serie.select = {
                     itemStyle: {
@@ -6478,9 +7336,9 @@ class EchartService {
             const y = barBase.yAxis;
             const gr = barBase.grid;
             const defaultCategoryFormatter = (value, index) => {
-                const sangriaBase = '\u2008\u2008\u2008\u2008\u2008\u2008\u2009';
+                const sangriaBase = "\u2008\u2008\u2008\u2008\u2008\u2008\u2009";
                 const lineLength = 35;
-                const text = String(value ?? '');
+                const text = String(value ?? "");
                 const prefix = `${index + 1} - `;
                 const digitCount = String(index + 1).length;
                 let extraRepeat = 0;
@@ -6488,10 +7346,10 @@ class EchartService {
                     extraRepeat = 2;
                 else if (digitCount === 3)
                     extraRepeat = 5;
-                const sangria = sangriaBase + '\u2008'.repeat(extraRepeat);
-                const words = text.split(' ');
+                const sangria = sangriaBase + "\u2008".repeat(extraRepeat);
+                const words = text.split(" ");
                 const lines = [];
-                let current = '';
+                let current = "";
                 for (const w of words) {
                     const test = current ? `${current} ${w}` : w;
                     if (test.length <= lineLength)
@@ -6504,28 +7362,28 @@ class EchartService {
                 }
                 if (current)
                     lines.push(current);
-                return prefix + lines.map((ln, i) => (i === 0 ? ln : `${sangria}${ln}`)).join('\n');
-            };
-            y.inverse = true;
-            y.axisLabel = {
-                ...y.axisLabel,
-                color: Color.blue,
-                fontSize: 12,
-                width: categoryWidth,
-                overflow: "break",
-                align: "left",
-                verticalAlign: "middle",
-                margin: categoryWidth + 30,
-                lineHeight: 16,
-                formatter: categoryFormatter || defaultCategoryFormatter,
+                return prefix + lines.map((ln, i) => (i === 0 ? ln : `${sangria}${ln}`)).join("\n");
             };
+            // y.inverse = true;
+            // y.axisLabel = {
+            // 	...y.axisLabel,
+            // 	color: Color.blue,
+            // 	fontSize: 12,
+            // 	width: categoryWidth,
+            // 	overflow: "break",
+            // 	align: "left",
+            // 	verticalAlign: "middle",
+            // 	margin: categoryWidth + 30,
+            // 	lineHeight: 16,
+            // 	formatter: categoryFormatter || defaultCategoryFormatter,
+            // };
             gr.top = "0%";
             gr.left = -1 * categoryWidth + 60;
             gr.right = 20;
             gr.bottom = "0%";
             gr.containLabel = true;
         }
-        barBase.series.forEach((serie) => {
+        barBase.series.forEach(serie => {
             serie.label = {
                 ...(serie.label || {}),
                 formatter: labelConfig,
@@ -6570,6 +7428,7 @@ class EchartService {
                 borderWidth: 2,
                 textStyle: { fontSize: 12 },
                 formatter: tooltipConfig,
+                appendTo: "body	",
             },
             dataZoom: [
                 {
@@ -6637,6 +7496,7 @@ class EchartService {
             tooltip: {
                 trigger: "item",
                 formatter: tooltipConfig,
+                appendTo: "body",
                 // extraCssText: this.chartService.getTooltipCssText(),
             },
             legend: {
@@ -6670,6 +7530,7 @@ class EchartService {
         return {
             tooltip: {
                 trigger: "none",
+                appendTo: "body",
             },
             series: [
                 {
@@ -6700,6 +7561,118 @@ class EchartService {
             ],
         };
     }
+    /**
+     * Semi doughnut gauge (half circle) with:
+     * - Progress arc
+     * - End dot
+     * - Center letter
+     *
+     * @param letter - Text to show in the center
+     * @param value - Current value
+     * @param textSize - Center letter font size
+     * @param color - Progress and end dot color
+     * @param total - Max value (default 100)
+     */
+    getRateSemiDoughnutOptions(letter, value, textSize, color, total = 100) {
+        const safeTotal = total > 0 ? total : 100;
+        const safeValue = Math.max(0, Math.min(value, safeTotal));
+        const START_ANGLE = 210;
+        const END_ANGLE = -30;
+        const THICKNESS = 22;
+        const BACKGROUND_COLOR = "#D9D9E3";
+        const TEXT_COLOR = "#4F5470";
+        const MIN_LABEL = "0";
+        const MAX_LABEL = String(safeTotal);
+        const MIN_MAX_FONT_SIZE = 15;
+        return {
+            tooltip: { trigger: "none", appendTo: "body" },
+            series: [
+                /* ================= GAUGE 1: PROGRESS ================= */
+                {
+                    type: "gauge",
+                    startAngle: START_ANGLE,
+                    endAngle: END_ANGLE,
+                    min: 0,
+                    max: safeTotal,
+                    pointer: { show: false },
+                    progress: {
+                        show: true,
+                        roundCap: true,
+                        width: THICKNESS,
+                        itemStyle: { color },
+                    },
+                    axisLine: {
+                        roundCap: true,
+                        lineStyle: {
+                            width: THICKNESS,
+                            color: [[1, BACKGROUND_COLOR]],
+                        },
+                    },
+                    axisTick: { show: false },
+                    splitLine: { show: false },
+                    axisLabel: { show: false },
+                    detail: {
+                        show: true,
+                        offsetCenter: [0, "0%"],
+                        fontSize: textSize,
+                        fontWeight: 700,
+                        color: TEXT_COLOR,
+                        formatter: () => letter,
+                    },
+                    data: [
+                        {
+                            value: safeValue,
+                            name: "0",
+                            title: {
+                                show: true,
+                                formatter: () => MIN_LABEL,
+                                offsetCenter: ["-80%", "66%"],
+                                fontSize: MIN_MAX_FONT_SIZE,
+                                color: TEXT_COLOR,
+                            },
+                        },
+                        {
+                            value: safeValue,
+                            name: "100",
+                            title: {
+                                show: true,
+                                formatter: () => MAX_LABEL,
+                                offsetCenter: ["80%", "66%"],
+                                fontSize: MIN_MAX_FONT_SIZE,
+                                color: TEXT_COLOR,
+                            },
+                        },
+                    ],
+                },
+                /* ================= GAUGE 2: END DOT ================= */
+                {
+                    type: "gauge",
+                    startAngle: START_ANGLE,
+                    endAngle: END_ANGLE,
+                    min: 0,
+                    max: safeTotal,
+                    axisLine: { show: false },
+                    progress: { show: false },
+                    splitLine: { show: false },
+                    axisTick: { show: false },
+                    axisLabel: { show: false },
+                    detail: { show: false },
+                    pointer: {
+                        show: true,
+                        length: "183%",
+                        width: 38,
+                        icon: "circle",
+                        itemStyle: {
+                            color,
+                            borderColor: BACKGROUND_COLOR,
+                            borderWidth: 4,
+                        },
+                    },
+                    data: [{ value: safeValue }],
+                },
+            ],
+        };
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EchartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EchartService, providedIn: "root" });
 }
@@ -9190,5 +10163,5 @@ const IntelicaTheme = definePreset(Aura, {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionDirective, ActionsMenuComponent, ButtonSplitComponent, CheckboxFilterDirective, Color, ColumnComponent, ColumnGroupComponent, CompareByField, ConfigService, CookieAttributesGeneral, DataDirective, DateFilterDirective, DateModeOptions, DynamicInputValidation, EchartComponent, EchartService, ElementService, EmailInputValidation, ErrorInterceptor, FeatureFlagService, FilterChipsComponent, FiltersComponent, FormatAmountPipe, GetCookieAttributes, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaCellCheckboxDirective, IntelicaTheme, ItemSplitDirective, LanguageService, MatrixColumnComponent, MatrixColumnGroupComponent, MatrixTableComponent, ModalDialogComponent, MultiSelectComponent, OrderConstants, PaginatorComponent, Patterns, PopoverComponent, ProfileService, RecordPerPageComponent, RefreshTokenInterceptor, RouteGuard, RowResumenComponent, RowResumenTreeComponent, SearchComponent, SelectDetailFilterDirective, SelectFilterDirective, SharedService, SkeletonChartComponent, SkeletonComponent, SkeletonService, SkeletonTableComponent, SortingComponent, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TableFetchComponent, TableSortOrder, TemplateDirective, TemplateMenuComponent, TermGuard, TermPipe, TermService, TextAreaFilterDirective, TextFilterDirective, TextRangeFilterDirective, TreeColumnComponent, TreeColumnGroupComponent, TreeTableComponent, TruncatePipe, decryptData, encryptData, getColor };
+export { ALERT_DEFAULTS, ALERT_ICON_PATHS, ALERT_TYPE_CONFIG, ActionDirective, ActionsMenuComponent, AddFavoritesComponent, AlertButtonMode, AlertService, AlertType, ButtonSplitComponent, CheckboxFilterDirective, Color, ColumnComponent, ColumnGroupComponent, CompareByField, ConfigService, CookieAttributesGeneral, DATEPICKER_BUTTON_TYPES, DataDirective, DateFilterDirective, DateModeOptions, DatepickerComponent, DynamicInputValidation, EchartComponent, EchartService, ElementService, EmailInputValidation, ErrorInterceptor, FeatureFlagService, FilterChipsComponent, FiltersComponent, FormatAmountPipe, GetCookieAttributes, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaAlertComponent, IntelicaCellCheckboxDirective, IntelicaTheme, ItemSplitDirective, LanguageService, MatrixColumnComponent, MatrixColumnGroupComponent, MatrixTableComponent, ModalDialogComponent, MultiSelectComponent, OrderConstants, PaginatorComponent, Patterns, PopoverComponent, ProfileService, RecordPerPageComponent, RefreshTokenInterceptor, RouteGuard, RowResumenComponent, RowResumenTreeComponent, SearchComponent, SelectDetailFilterDirective, SelectFilterDirective, SharedService, SkeletonChartComponent, SkeletonComponent, SkeletonService, SkeletonTableComponent, SortingComponent, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TableFetchComponent, TableSortOrder, TemplateDirective, TemplateMenuComponent, TermGuard, TermPipe, TermService, TextAreaFilterDirective, TextFilterDirective, TextRangeFilterDirective, TreeColumnComponent, TreeColumnGroupComponent, TreeTableComponent, TruncatePipe, decryptData, encryptData, getColor };
 //# sourceMappingURL=intelica-library-components.mjs.map