intelica-library-ui 0.1.110 → 0.1.111

package/fesm2022/intelica-library-ui.mjs

@@ -3010,6 +3010,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Input
             }] } });
 
+class DataDirective {
+    size = ""; // Esta es la propiedad que recibirás en la etiqueta <data>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: DataDirective, isStandalone: true, selector: "data", inputs: { size: "size" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DataDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "data", // El selector es 'data', lo que permite usar <data> en la plantilla
+                }]
+        }], propDecorators: { size: [{
+                type: Input
+            }] } });
+
+class SkeletonChartComponent {
+    /**
+     * @description type of skeleton chart
+     * @default 'bar'
+     * @type string
+     * @example <intelica-skeleton-chart [type]="'bar'"></intelica-skeleton-chart>
+     */
+    type = "bar";
+    /**
+     * @description number of series to display
+     * @default 6
+     * @type number
+     * @example <intelica-skeleton-chart [series]="3"></intelica-skeleton-chart>
+     */
+    series = 6;
+    /**
+     * @description number of data items to display in each bar
+     * @default 1
+     * @type number
+     * @example <intelica-skeleton-chart [data]="3"></intelica-skeleton-chart>
+     */
+    data = 1;
+    /**
+     * @description Flag to indicate whether the label should be displayed or hidden
+     * @default false
+     * @type boolean
+     */
+    label = true;
+    // Propiedad para almacenar los valores aleatorios de porcentaje de altura
+    randomPercent = [];
+    // Recibimos las etiquetas <data> como directivas
+    dataElements;
+    ngOnInit() {
+        this.updateRandomPercentages();
+    }
+    ngAfterContentInit() {
+        // Si hay elementos <data> proyectados, usamos sus valores de 'size'
+        if (this.dataElements.length > 0) {
+            this.setFixedPercentages();
+            return;
+        }
+        this.updateRandomPercentages();
+    }
+    // Método para asignar alturas aleatorias
+    updateRandomPercentages() {
+        // Si no se encuentran las etiquetas <data>, usamos valores aleatorios
+        this.randomPercent = this.getArray(this.series).map(() => this.getArray(this.data).map(() => this.setRandomPercent(20, 100)));
+    }
+    // Método para asignar alturas fijas según las etiquetas <data>
+    setFixedPercentages() {
+        // Usa las alturas fijas definidas por las etiquetas <data>
+        this.randomPercent = this.getArray(this.series).map(() => this.dataElements.toArray().map(data => data.size) // Aquí mapeamos todas las alturas de las etiquetas <data>
+        );
+    }
+    // Función para generar un valor aleatorio en porcentaje
+    setRandomPercent(min, max) {
+        const random = Math.floor(Math.random() * (max - min + 1));
+        return `${random + min}%`;
+    }
+    // Función auxiliar para crear un array de tamaño "length"
+    getArray(length) {
+        return Array.from({ length }, (_, i) => i);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkeletonChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkeletonChartComponent, isStandalone: true, selector: "intelica-skeleton-chart", inputs: { type: "type", series: "series", data: "data", label: "label" }, queries: [{ propertyName: "dataElements", predicate: DataDirective }], ngImport: i0, template: "@switch (type) { @case('bar'){\r\n<div class=\"skeletonGraphic skeletonGraphic--verticalBars\">\r\n\t<div class=\"skeletonGraphic__serie\" *ngFor=\"let i of getArray(series)\">\r\n\t\t<div class=\"skeletonGraphic__data\">\r\n\t\t\t<!-- Si hay etiquetas <data> proyectadas, las usamos con las alturas fijas -->\r\n\t\t\t<ng-container *ngIf=\"dataElements.length > 0\">\r\n\t\t\t\t<ng-container *ngFor=\"let data of dataElements.toArray()\">\r\n\t\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"data.size\"></p-skeleton>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\r\n\t\t\t<!-- Si no hay etiquetas <data>, usamos los valores aleatorios -->\r\n\t\t\t<ng-container *ngIf=\"dataElements.length === 0\">\r\n\t\t\t\t<ng-container *ngFor=\"let j of getArray(data)\">\r\n\t\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"randomPercent[i][j]\"></p-skeleton>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<div class=\"skeletonGraphic__label\" *ngIf=\"label\">\r\n\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'50%'\" [height]=\"'1rem'\"></p-skeleton>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n} @case ('horizontal-bar'){\r\n<div class=\"skeletonGraphic skeletonGraphic--horizontalBars\">\r\n\t<div class=\"skeletonGraphic__serie\" *ngFor=\"let i of getArray(series)\">\r\n\t\t<div class=\"skeletonGraphic__data\">\r\n\t\t\t<!-- Si hay etiquetas <data> proyectadas, las usamos con las alturas fijas -->\r\n\t\t\t<ng-container *ngIf=\"dataElements.length > 0\">\r\n\t\t\t\t<ng-container *ngFor=\"let data of dataElements.toArray()\">\r\n\t\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"data.size\" [height]=\"'100%'\"></p-skeleton>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\r\n\t\t\t<!-- Si no hay etiquetas <data>, usamos los valores aleatorios -->\r\n\t\t\t<ng-container *ngIf=\"dataElements.length === 0\">\r\n\t\t\t\t<ng-container *ngFor=\"let j of getArray(data)\">\r\n\t\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"randomPercent[i][j]\" [height]=\"'100%'\"></p-skeleton>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<div class=\"skeletonGraphic__label\" *ngIf=\"label\">\r\n\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'10rem'\" [height]=\"'1rem'\"></p-skeleton>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n} @case ('pie'){\r\n<div class=\"skeletonGraphic skeletonGraphic--pie\">\r\n\t<ng-container *ngTemplateOutlet=\"pieDonutTemplate\"></ng-container>\r\n</div>\r\n} @case ('donut'){\r\n<div class=\"skeletonGraphic skeletonGraphic--pie skeletonGraphic--donut\">\r\n\t<ng-container *ngTemplateOutlet=\"pieDonutTemplate\"></ng-container>\r\n</div>\r\n} @case ('line'){\r\n<div class=\"col-6 mb-3\">\r\n\t<div class=\"row align-items-end\">\r\n\t\t<div class=\"col-1 d-flex justify-content-end\">\r\n\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'0.5rem'\" [height]=\"'25rem'\"></p-skeleton>\r\n\t\t</div>\r\n\t\t<div class=\"col d-flex justify-content-center px-0\">\r\n\t\t\t<div class=\"col-8 px-0\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'10rem'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"col d-flex justify-content-center px-0\">\r\n\t\t\t<div class=\"col-8 px-0\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'20rem'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"col d-flex justify-content-center px-0\">\r\n\t\t\t<div class=\"col-8 px-0\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'8rem'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"col d-flex justify-content-center px-0\">\r\n\t\t\t<div class=\"col-8 px-0\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'15rem'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"col d-flex justify-content-center px-0\">\r\n\t\t\t<div class=\"col-8 px-0\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'20rem'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"col d-flex justify-content-center px-0\">\r\n\t\t\t<div class=\"col-8 px-0\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'8rem'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"row mt-3\">\r\n\t\t<div class=\"col-1\"></div>\r\n\t\t<div class=\"col\">\r\n\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'0.5rem'\"></p-skeleton>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n} }\r\n\r\n<ng-template #pieDonutTemplate>\r\n\t<div class=\"skeletonGraphic__serie\">\r\n\t\t<div class=\"skeletonGraphic__wrap\">\r\n\t\t\t<div class=\"skeletonGraphic__label left\" *ngIf=\"label\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"skeletonGraphic__data\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" shape=\"circle\" [size]=\"'100%'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"skeletonGraphic__label right\" *ngIf=\"label\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkeletonChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "intelica-skeleton-chart", imports: [CommonModule, SkeletonModule], template: "@switch (type) { @case('bar'){\r\n<div class=\"skeletonGraphic skeletonGraphic--verticalBars\">\r\n\t<div class=\"skeletonGraphic__serie\" *ngFor=\"let i of getArray(series)\">\r\n\t\t<div class=\"skeletonGraphic__data\">\r\n\t\t\t<!-- Si hay etiquetas <data> proyectadas, las usamos con las alturas fijas -->\r\n\t\t\t<ng-container *ngIf=\"dataElements.length > 0\">\r\n\t\t\t\t<ng-container *ngFor=\"let data of dataElements.toArray()\">\r\n\t\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"data.size\"></p-skeleton>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\r\n\t\t\t<!-- Si no hay etiquetas <data>, usamos los valores aleatorios -->\r\n\t\t\t<ng-container *ngIf=\"dataElements.length === 0\">\r\n\t\t\t\t<ng-container *ngFor=\"let j of getArray(data)\">\r\n\t\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"randomPercent[i][j]\"></p-skeleton>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<div class=\"skeletonGraphic__label\" *ngIf=\"label\">\r\n\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'50%'\" [height]=\"'1rem'\"></p-skeleton>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n} @case ('horizontal-bar'){\r\n<div class=\"skeletonGraphic skeletonGraphic--horizontalBars\">\r\n\t<div class=\"skeletonGraphic__serie\" *ngFor=\"let i of getArray(series)\">\r\n\t\t<div class=\"skeletonGraphic__data\">\r\n\t\t\t<!-- Si hay etiquetas <data> proyectadas, las usamos con las alturas fijas -->\r\n\t\t\t<ng-container *ngIf=\"dataElements.length > 0\">\r\n\t\t\t\t<ng-container *ngFor=\"let data of dataElements.toArray()\">\r\n\t\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"data.size\" [height]=\"'100%'\"></p-skeleton>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\r\n\t\t\t<!-- Si no hay etiquetas <data>, usamos los valores aleatorios -->\r\n\t\t\t<ng-container *ngIf=\"dataElements.length === 0\">\r\n\t\t\t\t<ng-container *ngFor=\"let j of getArray(data)\">\r\n\t\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"randomPercent[i][j]\" [height]=\"'100%'\"></p-skeleton>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<div class=\"skeletonGraphic__label\" *ngIf=\"label\">\r\n\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'10rem'\" [height]=\"'1rem'\"></p-skeleton>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n} @case ('pie'){\r\n<div class=\"skeletonGraphic skeletonGraphic--pie\">\r\n\t<ng-container *ngTemplateOutlet=\"pieDonutTemplate\"></ng-container>\r\n</div>\r\n} @case ('donut'){\r\n<div class=\"skeletonGraphic skeletonGraphic--pie skeletonGraphic--donut\">\r\n\t<ng-container *ngTemplateOutlet=\"pieDonutTemplate\"></ng-container>\r\n</div>\r\n} @case ('line'){\r\n<div class=\"col-6 mb-3\">\r\n\t<div class=\"row align-items-end\">\r\n\t\t<div class=\"col-1 d-flex justify-content-end\">\r\n\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'0.5rem'\" [height]=\"'25rem'\"></p-skeleton>\r\n\t\t</div>\r\n\t\t<div class=\"col d-flex justify-content-center px-0\">\r\n\t\t\t<div class=\"col-8 px-0\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'10rem'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"col d-flex justify-content-center px-0\">\r\n\t\t\t<div class=\"col-8 px-0\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'20rem'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"col d-flex justify-content-center px-0\">\r\n\t\t\t<div class=\"col-8 px-0\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'8rem'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"col d-flex justify-content-center px-0\">\r\n\t\t\t<div class=\"col-8 px-0\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'15rem'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"col d-flex justify-content-center px-0\">\r\n\t\t\t<div class=\"col-8 px-0\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'20rem'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"col d-flex justify-content-center px-0\">\r\n\t\t\t<div class=\"col-8 px-0\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'8rem'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"row mt-3\">\r\n\t\t<div class=\"col-1\"></div>\r\n\t\t<div class=\"col\">\r\n\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'0.5rem'\"></p-skeleton>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n} }\r\n\r\n<ng-template #pieDonutTemplate>\r\n\t<div class=\"skeletonGraphic__serie\">\r\n\t\t<div class=\"skeletonGraphic__wrap\">\r\n\t\t\t<div class=\"skeletonGraphic__label left\" *ngIf=\"label\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"skeletonGraphic__data\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" shape=\"circle\" [size]=\"'100%'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"skeletonGraphic__label right\" *ngIf=\"label\">\r\n\t\t\t\t<p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\"></p-skeleton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n" }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], series: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], dataElements: [{
+                type: ContentChildren,
+                args: [DataDirective]
+            }] } });
+
 class HtmlToExcelService {
     ExportTOExcel(idTabla, html, filename, tabname, extension) {
         let Table = document.getElementById(idTabla);
@@ -6253,5 +6349,5 @@ const IntelicaTheme = definePreset(Aura, {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionDirective, ActionsMenuComponent, ButtonSplitComponent, Color, ColumnComponent, ColumnGroupComponent, CompareByField, ConfigService, CookieAttributesGeneral, DynamicInputValidation, EchartComponent, EchartService, EmailInputValidation, ErrorInterceptor, FeatureFlagService, FormatAmountPipe, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaTheme, ItemSplitDirective, LanguageService, ModalDialogComponent, MultiSelectComponent, OrderConstants, PaginatorComponent, Patterns, PopoverComponent, ProfileService, RecordPerPageComponent, RefreshTokenInterceptor, RowResumenComponent, SearchComponent, SharedService, SkeletonComponent, SkeletonService, SkeletonTableComponent, SortingComponent, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TemplateMenuComponent, TermGuard, TermPipe, TermService, TruncatePipe, decryptData, encryptData, getColor };
+export { ActionDirective, ActionsMenuComponent, ButtonSplitComponent, Color, ColumnComponent, ColumnGroupComponent, CompareByField, ConfigService, CookieAttributesGeneral, DynamicInputValidation, EchartComponent, EchartService, EmailInputValidation, ErrorInterceptor, FeatureFlagService, FormatAmountPipe, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaTheme, ItemSplitDirective, LanguageService, ModalDialogComponent, MultiSelectComponent, OrderConstants, PaginatorComponent, Patterns, PopoverComponent, ProfileService, RecordPerPageComponent, RefreshTokenInterceptor, RowResumenComponent, SearchComponent, SharedService, SkeletonChartComponent, SkeletonComponent, SkeletonService, SkeletonTableComponent, SortingComponent, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TemplateMenuComponent, TermGuard, TermPipe, TermService, TruncatePipe, decryptData, encryptData, getColor };
 //# sourceMappingURL=intelica-library-ui.mjs.map