sf-loading 13.0.1 → 13.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,9 +6,10 @@ import * as i2 from 'primeng/progressbar';
6
6
  import { ProgressBarModule } from 'primeng/progressbar';
7
7
  import * as i3 from '@angular/common';
8
8
  import { CommonModule } from '@angular/common';
9
- import { TableModule } from 'primeng/table';
10
9
  import { Skeleton } from 'primeng/skeleton';
11
- import { CardModule } from 'primeng/card';
10
+ import * as i2$1 from 'primeng/table';
11
+ import { TableModule } from 'primeng/table';
12
+ import * as i3$1 from 'primeng/api';
12
13
  import { BlockUIModule } from 'primeng/blockui';
13
14
 
14
15
  class SfLoadingComponent {
@@ -39,10 +40,10 @@ class SfLoadingComponent {
39
40
  }
40
41
  }
41
42
  }
42
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
43
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SfLoadingComponent, isStandalone: false, selector: "sf-loading", inputs: { target: "target", progress: "progress", texto: "texto", logo: "logo", enProceso: "enProceso" }, viewQueries: [{ propertyName: "block", first: true, predicate: ["block"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #block [ngClass]=\"{'full-width': !this.target && enProceso}\">\r\n <div *ngIf=\"enProceso\" class=\"blocking-overlay\">\r\n <img *ngIf=\"logo\" [src]=\"logo\" class=\"icon-block\">\r\n <p-progressSpinner *ngIf=\"!logo\"></p-progressSpinner>\r\n <p *ngIf=\"texto\">{{texto}}</p>\r\n <p-progressBar *ngIf=\"progress !== undefined\" [value]=\"progress\" [style]=\"{'height': '20px', 'width': '50vw'}\"></p-progressBar>\r\n </div>\r\n <div *ngIf=\"!enProceso\"></div>\r\n</div>\r\n", styles: [".full-width{width:100%;height:100%;position:fixed;z-index:9999}.blocking-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#9e9797cc;z-index:9999;display:flex;flex-direction:column;justify-content:center;align-items:center}.blocking-overlay>p{font-size:1.5rem;text-align:center;max-width:80%}img.icon-block{width:10%;animation:rotation 1.3s infinite linear}@media screen and (max-width: 765px){img.icon-block{width:25vw}::ng-deep .p-dialog-mask .p-dialog{max-width:95vw}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: i1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i2.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
43
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SfLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
44
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SfLoadingComponent, isStandalone: false, selector: "sf-loading", inputs: { target: "target", progress: "progress", texto: "texto", logo: "logo", enProceso: "enProceso" }, viewQueries: [{ propertyName: "block", first: true, predicate: ["block"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #block [ngClass]=\"{'full-width': !this.target && enProceso}\">\r\n <div *ngIf=\"enProceso\" class=\"blocking-overlay\">\r\n <img *ngIf=\"logo\" [src]=\"logo\" class=\"icon-block\">\r\n <p-progressSpinner *ngIf=\"!logo\"></p-progressSpinner>\r\n <p *ngIf=\"texto\">{{texto}}</p>\r\n <p-progressBar *ngIf=\"progress !== undefined\" [value]=\"progress\" [style]=\"{'height': '20px', 'width': '50vw'}\"></p-progressBar>\r\n </div>\r\n <div *ngIf=\"!enProceso\"></div>\r\n</div>\r\n", styles: [".full-width{width:100%;height:100%;position:fixed;z-index:9999}.blocking-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#9e9797cc;z-index:9999;display:flex;flex-direction:column;justify-content:center;align-items:center}.blocking-overlay>p{font-size:1.5rem;text-align:center;max-width:80%}img.icon-block{width:10%;animation:rotation 1.3s infinite linear}@media screen and (max-width: 765px){img.icon-block{width:25vw}::ng-deep .p-dialog-mask .p-dialog{max-width:95vw}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: i1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i2.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
44
45
  }
45
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfLoadingComponent, decorators: [{
46
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SfLoadingComponent, decorators: [{
46
47
  type: Component,
47
48
  args: [{ selector: 'sf-loading', standalone: false, template: "<div #block [ngClass]=\"{'full-width': !this.target && enProceso}\">\r\n <div *ngIf=\"enProceso\" class=\"blocking-overlay\">\r\n <img *ngIf=\"logo\" [src]=\"logo\" class=\"icon-block\">\r\n <p-progressSpinner *ngIf=\"!logo\"></p-progressSpinner>\r\n <p *ngIf=\"texto\">{{texto}}</p>\r\n <p-progressBar *ngIf=\"progress !== undefined\" [value]=\"progress\" [style]=\"{'height': '20px', 'width': '50vw'}\"></p-progressBar>\r\n </div>\r\n <div *ngIf=\"!enProceso\"></div>\r\n</div>\r\n", styles: [".full-width{width:100%;height:100%;position:fixed;z-index:9999}.blocking-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#9e9797cc;z-index:9999;display:flex;flex-direction:column;justify-content:center;align-items:center}.blocking-overlay>p{font-size:1.5rem;text-align:center;max-width:80%}img.icon-block{width:10%;animation:rotation 1.3s infinite linear}@media screen and (max-width: 765px){img.icon-block{width:25vw}::ng-deep .p-dialog-mask .p-dialog{max-width:95vw}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
48
49
  }], ctorParameters: () => [], propDecorators: { target: [{
@@ -60,9 +61,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
60
61
  args: ['block']
61
62
  }] } });
62
63
 
63
- class TableSkeletonComponent {
64
+ class TableLoadingComponent {
64
65
  columns = 5;
65
66
  rows = 10;
67
+ rowsWidth = [
68
+ { width: '100%', height: '1.5rem' },
69
+ { width: '100%', height: '1.5rem' },
70
+ { width: '100%', height: '1.5rem' },
71
+ { width: '100%', height: '1.5rem' },
72
+ { width: '100%', height: '1.5rem' },
73
+ ];
74
+ columnsWidth = [
75
+ { width: '100%', height: '1.5rem' },
76
+ { width: '100%', height: '1.5rem' },
77
+ { width: '100%', height: '1.5rem' },
78
+ { width: '100%', height: '1.5rem' },
79
+ { width: '100%', height: '1.5rem' },
80
+ ];
66
81
  skeletonRows = [];
67
82
  skeletonColumns = [];
68
83
  loadingType = '';
@@ -73,32 +88,42 @@ class TableSkeletonComponent {
73
88
  this.skeletonRows = Array.from({ length: this.rows }, (_, i) => i);
74
89
  this.skeletonColumns = Array.from({ length: this.columns }, (_, i) => i);
75
90
  }
76
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
77
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TableSkeletonComponent, isStandalone: true, selector: "app-table-skeleton", inputs: { columns: "columns", rows: "rows", loadingType: "loadingType" }, ngImport: i0, template: "<!-- Skeleton mientras carga -->\r\n<div class=\"flex flex-column gap-3\">\r\n <!-- Skeleton del header/t\u00EDtulo -->\r\n <div class=\"flex flex-column md:justify-content-between md:align-items-center mb-3 md:flex-row gap-3\"\r\n *ngIf=\"loadingType === 'all'\">\r\n <p-skeleton width=\"200px\" height=\"2rem\"></p-skeleton>\r\n <div class=\"w-full md:w-20rem\">\r\n <p-skeleton width=\"100%\" height=\"2rem\"></p-skeleton>\r\n </div>\r\n </div>\r\n\r\n <!-- Skeleton de la tabla con scroll horizontal -->\r\n <div class=\"table-skeleton-wrapper\">\r\n <div class=\"table-skeleton\">\r\n <!-- Header de la tabla -->\r\n <div class=\"table-row header-row\" *ngIf=\"loadingType === 'all'\">\r\n <div *ngFor=\"let col of skeletonColumns\" class=\"table-cell\">\r\n <p-skeleton height=\"1.2rem\"></p-skeleton>\r\n </div>\r\n </div>\r\n\r\n <!-- Filas de la tabla -->\r\n <div *ngIf=\"loadingType === 'all' || loadingType === 'data'\">\r\n <div *ngFor=\"let row of skeletonRows\" class=\"table-row body-row\">\r\n <div *ngFor=\"let col of skeletonColumns\" class=\"table-cell\">\r\n <p-skeleton height=\"1rem\"></p-skeleton>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Skeleton del paginador -->\r\n <div class=\"flex justify-content-center align-items-center\" *ngIf=\"loadingType === 'all'\">\r\n <div class=\"flex gap-2\">\r\n <p-skeleton size=\"2rem\" shape=\"circle\"></p-skeleton>\r\n <p-skeleton size=\"2rem\" shape=\"circle\"></p-skeleton>\r\n <p-skeleton size=\"2rem\" shape=\"circle\"></p-skeleton>\r\n <p-skeleton size=\"2rem\" shape=\"circle\"></p-skeleton>\r\n <p-skeleton size=\"2rem\" shape=\"circle\"></p-skeleton>\r\n\r\n </div>\r\n </div>\r\n</div>", styles: [".table-skeleton-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-skeleton-wrapper::-webkit-scrollbar{height:6px}.table-skeleton-wrapper::-webkit-scrollbar-track{background:var(--surface-100);border-radius:3px}.table-skeleton-wrapper::-webkit-scrollbar-thumb{background:var(--surface-300);border-radius:3px}.table-skeleton-wrapper::-webkit-scrollbar-thumb:hover{background:var(--surface-400)}.table-skeleton{min-width:600px;width:100%}.table-row{display:flex;width:100%;gap:2rem}.header-row{background-color:var(--surface-100);border-radius:4px 4px 0 0}.body-row{border-bottom:1px solid var(--surface-200)}.body-row:last-child{border-bottom:none}.table-cell{flex:1;padding:1rem 0;min-width:120px}.header-actions{flex-wrap:wrap;gap:.5rem}@media screen and (max-width: 768px){.table-skeleton{min-width:700px}.table-cell{min-width:100px;padding:.75rem}.header-actions{flex-direction:column}.header-actions p-skeleton{width:100%!important}}@media screen and (max-width: 480px){.table-skeleton{min-width:600px}.table-cell{min-width:80px;padding:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: CardModule }] });
91
+ rowSize(index) {
92
+ return this.rowsWidth[index] || { width: '100%', height: '1.5rem' };
93
+ }
94
+ columnSize(index) {
95
+ return this.columnsWidth[index] || { width: '100%', height: '1.5rem' };
96
+ }
97
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
98
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TableLoadingComponent, isStandalone: true, selector: "lib-table-loading", inputs: { columns: "columns", rows: "rows", rowsWidth: "rowsWidth", columnsWidth: "columnsWidth", loadingType: "loadingType" }, ngImport: i0, template: "<div class=\"table-loading-container\">\r\n <p-table [value]=\"skeletonRows\" responsiveLayout=\"scroll\">\r\n <ng-template pTemplate=\"header\">\r\n <tr>\r\n <th *ngFor=\"let col of skeletonColumns\">\r\n <p-skeleton [width]=\"columnSize(col).width\" [height]=\"columnSize(col).height\"></p-skeleton>\r\n </th>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\">\r\n <tr>\r\n <td *ngFor=\"let col of skeletonColumns\">\r\n <p-skeleton [width]=\"rowSize(col).width\" [height]=\"rowSize(col).height\"></p-skeleton>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n</div>\r\n", styles: [".table-loading-container{width:100%;overflow-x:auto}:host ::ng-deep .p-datatable{min-width:600px}:host ::ng-deep .p-datatable-table{min-width:100%}:host ::ng-deep .p-datatable th,:host ::ng-deep .p-datatable td{min-width:100px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
78
99
  }
79
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableSkeletonComponent, decorators: [{
100
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableLoadingComponent, decorators: [{
80
101
  type: Component,
81
- args: [{ selector: 'app-table-skeleton', imports: [CommonModule, TableModule, Skeleton, CardModule], standalone: true, template: "<!-- Skeleton mientras carga -->\r\n<div class=\"flex flex-column gap-3\">\r\n <!-- Skeleton del header/t\u00EDtulo -->\r\n <div class=\"flex flex-column md:justify-content-between md:align-items-center mb-3 md:flex-row gap-3\"\r\n *ngIf=\"loadingType === 'all'\">\r\n <p-skeleton width=\"200px\" height=\"2rem\"></p-skeleton>\r\n <div class=\"w-full md:w-20rem\">\r\n <p-skeleton width=\"100%\" height=\"2rem\"></p-skeleton>\r\n </div>\r\n </div>\r\n\r\n <!-- Skeleton de la tabla con scroll horizontal -->\r\n <div class=\"table-skeleton-wrapper\">\r\n <div class=\"table-skeleton\">\r\n <!-- Header de la tabla -->\r\n <div class=\"table-row header-row\" *ngIf=\"loadingType === 'all'\">\r\n <div *ngFor=\"let col of skeletonColumns\" class=\"table-cell\">\r\n <p-skeleton height=\"1.2rem\"></p-skeleton>\r\n </div>\r\n </div>\r\n\r\n <!-- Filas de la tabla -->\r\n <div *ngIf=\"loadingType === 'all' || loadingType === 'data'\">\r\n <div *ngFor=\"let row of skeletonRows\" class=\"table-row body-row\">\r\n <div *ngFor=\"let col of skeletonColumns\" class=\"table-cell\">\r\n <p-skeleton height=\"1rem\"></p-skeleton>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Skeleton del paginador -->\r\n <div class=\"flex justify-content-center align-items-center\" *ngIf=\"loadingType === 'all'\">\r\n <div class=\"flex gap-2\">\r\n <p-skeleton size=\"2rem\" shape=\"circle\"></p-skeleton>\r\n <p-skeleton size=\"2rem\" shape=\"circle\"></p-skeleton>\r\n <p-skeleton size=\"2rem\" shape=\"circle\"></p-skeleton>\r\n <p-skeleton size=\"2rem\" shape=\"circle\"></p-skeleton>\r\n <p-skeleton size=\"2rem\" shape=\"circle\"></p-skeleton>\r\n\r\n </div>\r\n </div>\r\n</div>", styles: [".table-skeleton-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-skeleton-wrapper::-webkit-scrollbar{height:6px}.table-skeleton-wrapper::-webkit-scrollbar-track{background:var(--surface-100);border-radius:3px}.table-skeleton-wrapper::-webkit-scrollbar-thumb{background:var(--surface-300);border-radius:3px}.table-skeleton-wrapper::-webkit-scrollbar-thumb:hover{background:var(--surface-400)}.table-skeleton{min-width:600px;width:100%}.table-row{display:flex;width:100%;gap:2rem}.header-row{background-color:var(--surface-100);border-radius:4px 4px 0 0}.body-row{border-bottom:1px solid var(--surface-200)}.body-row:last-child{border-bottom:none}.table-cell{flex:1;padding:1rem 0;min-width:120px}.header-actions{flex-wrap:wrap;gap:.5rem}@media screen and (max-width: 768px){.table-skeleton{min-width:700px}.table-cell{min-width:100px;padding:.75rem}.header-actions{flex-direction:column}.header-actions p-skeleton{width:100%!important}}@media screen and (max-width: 480px){.table-skeleton{min-width:600px}.table-cell{min-width:80px;padding:.5rem}}\n"] }]
102
+ args: [{ selector: 'lib-table-loading', imports: [CommonModule, TableModule, Skeleton], template: "<div class=\"table-loading-container\">\r\n <p-table [value]=\"skeletonRows\" responsiveLayout=\"scroll\">\r\n <ng-template pTemplate=\"header\">\r\n <tr>\r\n <th *ngFor=\"let col of skeletonColumns\">\r\n <p-skeleton [width]=\"columnSize(col).width\" [height]=\"columnSize(col).height\"></p-skeleton>\r\n </th>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\">\r\n <tr>\r\n <td *ngFor=\"let col of skeletonColumns\">\r\n <p-skeleton [width]=\"rowSize(col).width\" [height]=\"rowSize(col).height\"></p-skeleton>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n</div>\r\n", styles: [".table-loading-container{width:100%;overflow-x:auto}:host ::ng-deep .p-datatable{min-width:600px}:host ::ng-deep .p-datatable-table{min-width:100%}:host ::ng-deep .p-datatable th,:host ::ng-deep .p-datatable td{min-width:100px;white-space:nowrap}\n"] }]
82
103
  }], propDecorators: { columns: [{
83
104
  type: Input
84
105
  }], rows: [{
85
106
  type: Input
107
+ }], rowsWidth: [{
108
+ type: Input
109
+ }], columnsWidth: [{
110
+ type: Input
86
111
  }], loadingType: [{
87
112
  type: Input
88
113
  }] } });
89
114
 
90
115
  class SfLoadingModule {
91
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
92
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: SfLoadingModule, declarations: [SfLoadingComponent], imports: [BlockUIModule,
116
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SfLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
117
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SfLoadingModule, declarations: [SfLoadingComponent], imports: [BlockUIModule,
93
118
  ProgressSpinnerModule,
94
119
  ProgressBarModule,
95
120
  CommonModule], exports: [SfLoadingComponent] });
96
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfLoadingModule, imports: [BlockUIModule,
121
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SfLoadingModule, imports: [BlockUIModule,
97
122
  ProgressSpinnerModule,
98
123
  ProgressBarModule,
99
124
  CommonModule] });
100
125
  }
101
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfLoadingModule, decorators: [{
126
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SfLoadingModule, decorators: [{
102
127
  type: NgModule,
103
128
  args: [{
104
129
  declarations: [
@@ -124,5 +149,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
124
149
  * Generated bundle index. Do not edit.
125
150
  */
126
151
 
127
- export { SfLoadingComponent, SfLoadingModule, TableSkeletonComponent };
152
+ export { SfLoadingComponent, SfLoadingModule, TableLoadingComponent };
128
153
  //# sourceMappingURL=sf-loading.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"sf-loading.mjs","sources":["../../../projects/sf-loading/src/lib/sf-loading.component.ts","../../../projects/sf-loading/src/lib/sf-loading.compontent.html","../../../projects/sf-loading/src/lib/components/table-skeleton/table-skeleton.component.ts","../../../projects/sf-loading/src/lib/components/table-skeleton/table-skeleton.component.html","../../../projects/sf-loading/src/lib/sf-loading.module.ts","../../../projects/sf-loading/src/public-api.ts","../../../projects/sf-loading/src/sf-loading.ts"],"sourcesContent":["import { AfterViewInit, Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sf-loading',\r\n templateUrl: 'sf-loading.compontent.html',\r\n styleUrls: ['sf-loading.component.css'],\r\n standalone: false\r\n})\r\nexport class SfLoadingComponent implements AfterViewInit, OnChanges{\r\n\r\n @Input() target:HTMLElement|undefined;\r\n @Input() progress?: number;\r\n @Input() texto: string | undefined;\r\n\r\n @Input() logo: string | undefined;\r\n\r\n @Input() enProceso = false;\r\n\r\n @ViewChild('block') block!: ElementRef<HTMLElement>;\r\n\r\n private prevPosition: string | undefined;\r\n\r\n\r\n constructor(){}\r\n\r\n ngOnChanges(): void {\r\n if (this.block) this.ngAfterViewInit()\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n if (this.enProceso){\r\n if (this.target){\r\n this.target.style.position = \"relative\";\r\n (this.target as Node).appendChild(this.block.nativeElement)\r\n }\r\n }else {\r\n if (this.target) {\r\n const hasBlockChild = (this.target as Node).contains(this.block.nativeElement);\r\n if (hasBlockChild) (this.target as Node).removeChild(this.block.nativeElement)\r\n }\r\n }\r\n }\r\n}\r\n","<div #block [ngClass]=\"{'full-width': !this.target && enProceso}\">\r\n <div *ngIf=\"enProceso\" class=\"blocking-overlay\">\r\n <img *ngIf=\"logo\" [src]=\"logo\" class=\"icon-block\">\r\n <p-progressSpinner *ngIf=\"!logo\"></p-progressSpinner>\r\n <p *ngIf=\"texto\">{{texto}}</p>\r\n <p-progressBar *ngIf=\"progress !== undefined\" [value]=\"progress\" [style]=\"{'height': '20px', 'width': '50vw'}\"></p-progressBar>\r\n </div>\r\n <div *ngIf=\"!enProceso\"></div>\r\n</div>\r\n","import { CommonModule } from '@angular/common';\r\nimport { Component, Input, OnInit } from '@angular/core';\r\nimport { TableModule } from 'primeng/table';\r\nimport { Skeleton } from 'primeng/skeleton';\r\nimport { CardModule } from 'primeng/card';\r\n\r\n@Component({\r\n selector: 'app-table-skeleton',\r\n imports: [CommonModule, TableModule, Skeleton, CardModule],\r\n templateUrl: './table-skeleton.component.html',\r\n styleUrls: ['./table-skeleton.component.scss'],\r\n standalone: true\r\n})\r\nexport class TableSkeletonComponent implements OnInit {\r\n @Input() columns: number = 5;\r\n @Input() rows: number = 10;\r\n skeletonRows: number[] = [];\r\n skeletonColumns: number[] = [];\r\n @Input() loadingType: string = '';\r\n \r\n ngOnInit() {\r\n this.updateSkeletonColumns();\r\n }\r\n \r\n updateSkeletonColumns() {\r\n this.skeletonRows = Array.from({ length: this.rows }, (_, i) => i);\r\n this.skeletonColumns = Array.from({ length: this.columns }, (_, i) => i);\r\n }\r\n\r\n}\r\n","<!-- Skeleton mientras carga -->\r\n<div class=\"flex flex-column gap-3\">\r\n <!-- Skeleton del header/título -->\r\n <div class=\"flex flex-column md:justify-content-between md:align-items-center mb-3 md:flex-row gap-3\"\r\n *ngIf=\"loadingType === 'all'\">\r\n <p-skeleton width=\"200px\" height=\"2rem\"></p-skeleton>\r\n <div class=\"w-full md:w-20rem\">\r\n <p-skeleton width=\"100%\" height=\"2rem\"></p-skeleton>\r\n </div>\r\n </div>\r\n\r\n <!-- Skeleton de la tabla con scroll horizontal -->\r\n <div class=\"table-skeleton-wrapper\">\r\n <div class=\"table-skeleton\">\r\n <!-- Header de la tabla -->\r\n <div class=\"table-row header-row\" *ngIf=\"loadingType === 'all'\">\r\n <div *ngFor=\"let col of skeletonColumns\" class=\"table-cell\">\r\n <p-skeleton height=\"1.2rem\"></p-skeleton>\r\n </div>\r\n </div>\r\n\r\n <!-- Filas de la tabla -->\r\n <div *ngIf=\"loadingType === 'all' || loadingType === 'data'\">\r\n <div *ngFor=\"let row of skeletonRows\" class=\"table-row body-row\">\r\n <div *ngFor=\"let col of skeletonColumns\" class=\"table-cell\">\r\n <p-skeleton height=\"1rem\"></p-skeleton>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Skeleton del paginador -->\r\n <div class=\"flex justify-content-center align-items-center\" *ngIf=\"loadingType === 'all'\">\r\n <div class=\"flex gap-2\">\r\n <p-skeleton size=\"2rem\" shape=\"circle\"></p-skeleton>\r\n <p-skeleton size=\"2rem\" shape=\"circle\"></p-skeleton>\r\n <p-skeleton size=\"2rem\" shape=\"circle\"></p-skeleton>\r\n <p-skeleton size=\"2rem\" shape=\"circle\"></p-skeleton>\r\n <p-skeleton size=\"2rem\" shape=\"circle\"></p-skeleton>\r\n\r\n </div>\r\n </div>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { SfLoadingComponent } from './sf-loading.component';\r\nimport { BlockUIModule } from 'primeng/blockui';\r\nimport { ProgressSpinnerModule } from 'primeng/progressspinner';\r\nimport { CommonModule } from '@angular/common';\r\nimport { ProgressBarModule } from 'primeng/progressbar';\r\n\r\n\r\n@NgModule({\r\n declarations: [\r\n SfLoadingComponent\r\n ],\r\n imports: [\r\n BlockUIModule\r\n ,ProgressSpinnerModule\r\n ,ProgressBarModule\r\n ,CommonModule\r\n ],\r\n exports: [\r\n SfLoadingComponent\r\n ]\r\n})\r\nexport class SfLoadingModule { }\r\n","/*\r\n * Public API Surface of sf-loading\r\n */\r\n\r\nexport * from './lib/sf-loading.component';\r\nexport * from './lib/components/table-skeleton/table-skeleton.component';\r\nexport * from './lib/sf-loading.module';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"sf-loading.mjs","sources":["../../../projects/sf-loading/src/lib/sf-loading.component.ts","../../../projects/sf-loading/src/lib/sf-loading.compontent.html","../../../projects/sf-loading/src/lib/components/skeletons/table-loading/table-loading.component.ts","../../../projects/sf-loading/src/lib/components/skeletons/table-loading/table-loading.component.html","../../../projects/sf-loading/src/lib/sf-loading.module.ts","../../../projects/sf-loading/src/public-api.ts","../../../projects/sf-loading/src/sf-loading.ts"],"sourcesContent":["import { AfterViewInit, Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sf-loading',\r\n templateUrl: 'sf-loading.compontent.html',\r\n styleUrls: ['sf-loading.component.css'],\r\n standalone: false\r\n})\r\nexport class SfLoadingComponent implements AfterViewInit, OnChanges{\r\n\r\n @Input() target:HTMLElement|undefined;\r\n @Input() progress?: number;\r\n @Input() texto: string | undefined;\r\n\r\n @Input() logo: string | undefined;\r\n\r\n @Input() enProceso = false;\r\n\r\n @ViewChild('block') block!: ElementRef<HTMLElement>;\r\n\r\n private prevPosition: string | undefined;\r\n\r\n\r\n constructor(){}\r\n\r\n ngOnChanges(): void {\r\n if (this.block) this.ngAfterViewInit()\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n if (this.enProceso){\r\n if (this.target){\r\n this.target.style.position = \"relative\";\r\n (this.target as Node).appendChild(this.block.nativeElement)\r\n }\r\n }else {\r\n if (this.target) {\r\n const hasBlockChild = (this.target as Node).contains(this.block.nativeElement);\r\n if (hasBlockChild) (this.target as Node).removeChild(this.block.nativeElement)\r\n }\r\n }\r\n }\r\n}\r\n","<div #block [ngClass]=\"{'full-width': !this.target && enProceso}\">\r\n <div *ngIf=\"enProceso\" class=\"blocking-overlay\">\r\n <img *ngIf=\"logo\" [src]=\"logo\" class=\"icon-block\">\r\n <p-progressSpinner *ngIf=\"!logo\"></p-progressSpinner>\r\n <p *ngIf=\"texto\">{{texto}}</p>\r\n <p-progressBar *ngIf=\"progress !== undefined\" [value]=\"progress\" [style]=\"{'height': '20px', 'width': '50vw'}\"></p-progressBar>\r\n </div>\r\n <div *ngIf=\"!enProceso\"></div>\r\n</div>\r\n","import { CommonModule } from '@angular/common';\r\nimport { Component, Input, OnInit } from '@angular/core';\r\nimport { Skeleton } from 'primeng/skeleton';\r\nimport { TableModule } from 'primeng/table';\r\n\r\n@Component({\r\n selector: 'lib-table-loading',\r\n imports: [CommonModule, TableModule, Skeleton],\r\n templateUrl: './table-loading.component.html',\r\n styleUrl: './table-loading.component.css',\r\n})\r\nexport class TableLoadingComponent implements OnInit {\r\n @Input() columns: number = 5;\r\n @Input() rows: number = 10;\r\n @Input() rowsWidth: { width: string; height: string }[] = [\r\n { width: '100%', height: '1.5rem' },\r\n { width: '100%', height: '1.5rem' },\r\n { width: '100%', height: '1.5rem' },\r\n { width: '100%', height: '1.5rem' },\r\n { width: '100%', height: '1.5rem' },\r\n ];\r\n @Input() columnsWidth: { width: string; height: string }[] = [\r\n { width: '100%', height: '1.5rem' },\r\n { width: '100%', height: '1.5rem' },\r\n { width: '100%', height: '1.5rem' },\r\n { width: '100%', height: '1.5rem' },\r\n { width: '100%', height: '1.5rem' },\r\n ];\r\n skeletonRows: number[] = [];\r\n skeletonColumns: number[] = [];\r\n @Input() loadingType: string = '';\r\n\r\n ngOnInit() {\r\n this.updateSkeletonColumns();\r\n }\r\n\r\n updateSkeletonColumns() {\r\n this.skeletonRows = Array.from({ length: this.rows }, (_, i) => i);\r\n this.skeletonColumns = Array.from({ length: this.columns }, (_, i) => i);\r\n }\r\n\r\n rowSize(index: number): { width: string; height: string } {\r\n return this.rowsWidth[index] || { width: '100%', height: '1.5rem' };\r\n }\r\n\r\n columnSize(index: number): { width: string; height: string } {\r\n return this.columnsWidth[index] || { width: '100%', height: '1.5rem' };\r\n }\r\n}\r\n","<div class=\"table-loading-container\">\r\n <p-table [value]=\"skeletonRows\" responsiveLayout=\"scroll\">\r\n <ng-template pTemplate=\"header\">\r\n <tr>\r\n <th *ngFor=\"let col of skeletonColumns\">\r\n <p-skeleton [width]=\"columnSize(col).width\" [height]=\"columnSize(col).height\"></p-skeleton>\r\n </th>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\">\r\n <tr>\r\n <td *ngFor=\"let col of skeletonColumns\">\r\n <p-skeleton [width]=\"rowSize(col).width\" [height]=\"rowSize(col).height\"></p-skeleton>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { SfLoadingComponent } from './sf-loading.component';\r\nimport { BlockUIModule } from 'primeng/blockui';\r\nimport { ProgressSpinnerModule } from 'primeng/progressspinner';\r\nimport { CommonModule } from '@angular/common';\r\nimport { ProgressBarModule } from 'primeng/progressbar';\r\n\r\n\r\n@NgModule({\r\n declarations: [\r\n SfLoadingComponent\r\n ],\r\n imports: [\r\n BlockUIModule\r\n ,ProgressSpinnerModule\r\n ,ProgressBarModule\r\n ,CommonModule\r\n ],\r\n exports: [\r\n SfLoadingComponent\r\n ]\r\n})\r\nexport class SfLoadingModule { }\r\n","/*\r\n * Public API Surface of sf-loading\r\n */\r\n\r\nexport * from './lib/sf-loading.component';\r\nexport * from './lib/components/skeletons/table-loading/table-loading.component';\r\nexport * from './lib/sf-loading.module';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1"],"mappings":"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"}
@@ -0,0 +1,29 @@
1
+ import { OnInit } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ export declare class TableLoadingComponent implements OnInit {
4
+ columns: number;
5
+ rows: number;
6
+ rowsWidth: {
7
+ width: string;
8
+ height: string;
9
+ }[];
10
+ columnsWidth: {
11
+ width: string;
12
+ height: string;
13
+ }[];
14
+ skeletonRows: number[];
15
+ skeletonColumns: number[];
16
+ loadingType: string;
17
+ ngOnInit(): void;
18
+ updateSkeletonColumns(): void;
19
+ rowSize(index: number): {
20
+ width: string;
21
+ height: string;
22
+ };
23
+ columnSize(index: number): {
24
+ width: string;
25
+ height: string;
26
+ };
27
+ static ɵfac: i0.ɵɵFactoryDeclaration<TableLoadingComponent, never>;
28
+ static ɵcmp: i0.ɵɵComponentDeclaration<TableLoadingComponent, "lib-table-loading", never, { "columns": { "alias": "columns"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "rowsWidth": { "alias": "rowsWidth"; "required": false; }; "columnsWidth": { "alias": "columnsWidth"; "required": false; }; "loadingType": { "alias": "loadingType"; "required": false; }; }, {}, never, never, true, never>;
29
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sf-loading",
3
- "version": "13.0.1",
3
+ "version": "13.0.2",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^19.2.0",
6
6
  "@angular/core": "^19.2.0",
package/public-api.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export * from './lib/sf-loading.component';
2
- export * from './lib/components/table-skeleton/table-skeleton.component';
2
+ export * from './lib/components/skeletons/table-loading/table-loading.component';
3
3
  export * from './lib/sf-loading.module';
@@ -1,13 +0,0 @@
1
- import { OnInit } from '@angular/core';
2
- import * as i0 from "@angular/core";
3
- export declare class TableSkeletonComponent implements OnInit {
4
- columns: number;
5
- rows: number;
6
- skeletonRows: number[];
7
- skeletonColumns: number[];
8
- loadingType: string;
9
- ngOnInit(): void;
10
- updateSkeletonColumns(): void;
11
- static ɵfac: i0.ɵɵFactoryDeclaration<TableSkeletonComponent, never>;
12
- static ɵcmp: i0.ɵɵComponentDeclaration<TableSkeletonComponent, "app-table-skeleton", never, { "columns": { "alias": "columns"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "loadingType": { "alias": "loadingType"; "required": false; }; }, {}, never, never, true, never>;
13
- }