sf-loading 13.0.0 → 13.0.1
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.
package/fesm2022/sf-loading.mjs
CHANGED
|
@@ -6,6 +6,9 @@ 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
|
+
import { Skeleton } from 'primeng/skeleton';
|
|
11
|
+
import { CardModule } from 'primeng/card';
|
|
9
12
|
import { BlockUIModule } from 'primeng/blockui';
|
|
10
13
|
|
|
11
14
|
class SfLoadingComponent {
|
|
@@ -36,10 +39,10 @@ class SfLoadingComponent {
|
|
|
36
39
|
}
|
|
37
40
|
}
|
|
38
41
|
}
|
|
39
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
40
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
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"] }] });
|
|
41
44
|
}
|
|
42
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
45
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfLoadingComponent, decorators: [{
|
|
43
46
|
type: Component,
|
|
44
47
|
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"] }]
|
|
45
48
|
}], ctorParameters: () => [], propDecorators: { target: [{
|
|
@@ -57,18 +60,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
57
60
|
args: ['block']
|
|
58
61
|
}] } });
|
|
59
62
|
|
|
63
|
+
class TableSkeletonComponent {
|
|
64
|
+
columns = 5;
|
|
65
|
+
rows = 10;
|
|
66
|
+
skeletonRows = [];
|
|
67
|
+
skeletonColumns = [];
|
|
68
|
+
loadingType = '';
|
|
69
|
+
ngOnInit() {
|
|
70
|
+
this.updateSkeletonColumns();
|
|
71
|
+
}
|
|
72
|
+
updateSkeletonColumns() {
|
|
73
|
+
this.skeletonRows = Array.from({ length: this.rows }, (_, i) => i);
|
|
74
|
+
this.skeletonColumns = Array.from({ length: this.columns }, (_, i) => i);
|
|
75
|
+
}
|
|
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 }] });
|
|
78
|
+
}
|
|
79
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableSkeletonComponent, decorators: [{
|
|
80
|
+
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"] }]
|
|
82
|
+
}], propDecorators: { columns: [{
|
|
83
|
+
type: Input
|
|
84
|
+
}], rows: [{
|
|
85
|
+
type: Input
|
|
86
|
+
}], loadingType: [{
|
|
87
|
+
type: Input
|
|
88
|
+
}] } });
|
|
89
|
+
|
|
60
90
|
class SfLoadingModule {
|
|
61
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
62
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
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,
|
|
63
93
|
ProgressSpinnerModule,
|
|
64
94
|
ProgressBarModule,
|
|
65
95
|
CommonModule], exports: [SfLoadingComponent] });
|
|
66
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
96
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfLoadingModule, imports: [BlockUIModule,
|
|
67
97
|
ProgressSpinnerModule,
|
|
68
98
|
ProgressBarModule,
|
|
69
99
|
CommonModule] });
|
|
70
100
|
}
|
|
71
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SfLoadingModule, decorators: [{
|
|
72
102
|
type: NgModule,
|
|
73
103
|
args: [{
|
|
74
104
|
declarations: [
|
|
@@ -94,5 +124,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
94
124
|
* Generated bundle index. Do not edit.
|
|
95
125
|
*/
|
|
96
126
|
|
|
97
|
-
export { SfLoadingComponent, SfLoadingModule };
|
|
127
|
+
export { SfLoadingComponent, SfLoadingModule, TableSkeletonComponent };
|
|
98
128
|
//# 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/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 { 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/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/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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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
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
|
+
}
|
package/package.json
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sf-loading",
|
|
3
|
-
"version": "13.0.
|
|
3
|
+
"version": "13.0.1",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": "^19.2.0",
|
|
6
|
-
"@angular/core": "^19.2.0"
|
|
6
|
+
"@angular/core": "^19.2.0",
|
|
7
|
+
"primeflex": "^4.0.0",
|
|
8
|
+
"primeng": "^19.1.4",
|
|
9
|
+
"primeicons": "^7.0.0"
|
|
7
10
|
},
|
|
8
11
|
"dependencies": {
|
|
9
12
|
"tslib": "^2.3.0"
|
package/public-api.d.ts
CHANGED