tickera-angular-components 0.0.1-dev.187 → 0.0.1-dev.188
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.
|
@@ -5578,14 +5578,25 @@ class DynamicTableComponent {
|
|
|
5578
5578
|
this.pageSizeChange.emit(newSize); // El padre recibe el nuevo tamaño y refetch desde la página 1
|
|
5579
5579
|
}
|
|
5580
5580
|
}
|
|
5581
|
+
rowInjectors = new Map();
|
|
5582
|
+
ngOnChanges(changes) {
|
|
5583
|
+
if (changes['data']) {
|
|
5584
|
+
this.rowInjectors.clear();
|
|
5585
|
+
}
|
|
5586
|
+
}
|
|
5581
5587
|
createInjector(row) {
|
|
5582
|
-
|
|
5583
|
-
|
|
5584
|
-
|
|
5585
|
-
|
|
5588
|
+
let rowInjector = this.rowInjectors.get(row);
|
|
5589
|
+
if (!rowInjector) {
|
|
5590
|
+
rowInjector = Injector.create({
|
|
5591
|
+
providers: [{ provide: 'ROW_DATA', useValue: row }],
|
|
5592
|
+
parent: this.injector,
|
|
5593
|
+
});
|
|
5594
|
+
this.rowInjectors.set(row, rowInjector);
|
|
5595
|
+
}
|
|
5596
|
+
return rowInjector;
|
|
5586
5597
|
}
|
|
5587
5598
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
5588
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DynamicTableComponent, isStandalone: true, selector: "dynamic-table", inputs: { title: "title", data: "data", headers: "headers", searcherPlaceholder: "searcherPlaceholder", columnComponents: "columnComponents", isLoading: "isLoading", totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage", searchValue: "searchValue", showPagination: "showPagination", showSearch: "showSearch", showTitle: "showTitle" }, outputs: { pageChange: "pageChange", searchChange: "searchChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"dynamic-table\">\n @if (showTitle || showSearch) {\n <div class=\"dynamic-table-toolbar\">\n @if (showTitle) {\n <h2 class=\"dynamic-table-title\">{{ title }}</h2>\n }\n\n @if (showSearch) {\n <input\n [placeholder]=\"searcherPlaceholder\"\n (input)=\"onSearch($event)\"\n type=\"search\"\n class=\"dynamic-table-search form-input\"\n />\n }\n </div>\n }\n\n <div class=\"dynamic-table-scroll\">\n <table class=\"dynamic-table-table\">\n <thead class=\"dynamic-table-head\">\n <tr>\n @for (header of headers; track header.key) {\n <th class=\"dynamic-table-head-cell\">\n {{ header.label }}\n </th>\n }\n </tr>\n </thead>\n\n <tbody class=\"dynamic-table-body\">\n @if (isLoading) {\n <tr class=\"dynamic-table-row\">\n @for (header of headers; track header.key) {\n <td class=\"dynamic-table-cell\">\n <div class=\"dynamic-table-skeleton\"></div>\n </td>\n }\n </tr>\n }\n\n @for (row of data; track row) {\n <tr class=\"dynamic-table-row\">\n @for (header of headers; track header.key) {\n <td class=\"dynamic-table-cell dynamic-table-cell--nowrap\">\n @if (columnComponents[header.key]) {\n <ng-container\n *ngComponentOutlet=\"columnComponents[header.key]; injector: createInjector(row)\"\n ></ng-container>\n } @else {\n <span class=\"dynamic-table-cell--text\" [title]=\"row[header.key]\">\n {{ row[header.key] || '---' }}\n </span>\n }\n </td>\n }\n </tr>\n }\n\n @if ((!data || data.length < 1) && !isLoading) {\n <tr>\n <td [attr.colspan]=\"headers.length\" class=\"dynamic-table-empty\">\n @if (searchValue.length > 0) {\n No se encontraron sedes que coincidan con <q>{{ searchValue }}</q>\n <br />\n Revisa la ortograf\u00EDa o limpia la b\u00FAsqueda\n } @else {\n No se encontraron a\u00FAn registros almacenados en base de datos.\n }\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n @if (showPagination) {\n <div class=\"dynamic-table-pagination\">\n <div class=\"dynamic-table-pagination-size\">\n <label for=\"page-size-select\" class=\"dynamic-table-pagination-size-label\">\n Items por p\u00E1gina\n </label>\n <select\n id=\"page-size-select\"\n class=\"dynamic-table-pagination-size-select\"\n [value]=\"itemsPerPage\"\n (change)=\"changePageSize($event)\"\n >\n @for (option of pageSizeOptions; track option) {\n <option [value]=\"option\" [selected]=\"option === itemsPerPage\">{{ option }}</option>\n }\n </select>\n </div>\n\n <div class=\"dynamic-table-pagination-info\">\n Mostrando p\u00E1gina\n <span class=\"dynamic-table-pagination-strong\">{{ currentPage }}</span> de\n <span class=\"dynamic-table-pagination-strong\">{{ totalPages }}</span>\n <span class=\"dynamic-table-pagination-total\">({{ totalItems }} registros totales)</span>\n </div>\n\n <div class=\"dynamic-table-pagination-actions\">\n <button\n (click)=\"changePage(-1)\"\n [disabled]=\"totalPages <= 1 || currentPage === 1\"\n class=\"dynamic-table-pagination-button\"\n >\n Anterior\n </button>\n\n <button\n (click)=\"changePage(1)\"\n [disabled]=\"totalPages <= 1 || currentPage >= totalPages\"\n class=\"dynamic-table-pagination-button\"\n >\n Siguiente\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [".dynamic-table{background-color:#fff;border-radius:.5rem;overflow:hidden;border:1px solid #e5e7eb}@media(prefers-color-scheme:dark){.dynamic-table{background-color:#1f2937;border-color:#374151}}.dynamic-table-toolbar{padding:1rem;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:flex-start}@media(prefers-color-scheme:dark){.dynamic-table-toolbar{border-color:#374151}}.dynamic-table-title{font-size:1.125rem;font-weight:600;margin:0}@media(prefers-color-scheme:dark){.dynamic-table-title{color:#fff}}.dynamic-table-search{margin-left:auto;max-width:24rem}.dynamic-table-scroll{overflow-x:auto}.dynamic-table-table{width:100%;text-align:left;border-collapse:collapse}.dynamic-table-head{background-color:#f3f4f6;color:#4b5563;font-size:.75rem}@media(prefers-color-scheme:dark){.dynamic-table-head{background-color:#374151;color:#d1d5db}}.dynamic-table-head-cell{text-overflow:ellipsis;max-width:200px;padding:.75rem;border-bottom:1px solid #d1d5db;white-space:nowrap}@media(prefers-color-scheme:dark){.dynamic-table-head-cell{border-color:#4b5563}}.dynamic-table-body{color:#374151;font-size:.75rem}@media(prefers-color-scheme:dark){.dynamic-table-body{color:#e5e7eb}}.dynamic-table-row{border-bottom:1px solid #e5e7eb;transition:background-color .15s ease-in-out}.dynamic-table-row:last-child{border-bottom:none}.dynamic-table-row:nth-child(2n){background-color:#f3f4f6}.dynamic-table-row:hover{background-color:#e5e7eb}@media(prefers-color-scheme:dark){.dynamic-table-row{border-color:#374151}.dynamic-table-row:nth-child(2n){background-color:#37415180}.dynamic-table-row:hover{background-color:#374151}}.dynamic-table-cell{padding:.75rem}.dynamic-table-cell--nowrap{white-space:nowrap}.dynamic-table-cell--text{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:280px}.dynamic-table-skeleton{height:1.25rem;width:100%;background-color:#e5e7eb;border-radius:.375rem;animation:dynamic-table-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@media(prefers-color-scheme:dark){.dynamic-table-skeleton{background-color:#4b5563}}.dynamic-table-empty{padding:1.5rem;text-align:center;color:#9ca3af;font-style:italic}@media(prefers-color-scheme:dark){.dynamic-table-empty{color:#6b7280}}.dynamic-table-pagination{padding:1rem;display:flex;align-items:center;justify-content:space-between;background-color:#f9fafb;border-top:1px solid #d1d5db}@media(prefers-color-scheme:dark){.dynamic-table-pagination{background-color:#1f293780;border-color:#374151}}.dynamic-table-pagination-info{font-size:.875rem;color:#6b7280}@media(prefers-color-scheme:dark){.dynamic-table-pagination-info{color:#9ca3af}}.dynamic-table-pagination-strong{font-weight:600;color:#1f2937}@media(prefers-color-scheme:dark){.dynamic-table-pagination-strong{color:#fff}}.dynamic-table-pagination-total{margin-left:.25rem}.dynamic-table-pagination-actions{display:flex;gap:.5rem}.dynamic-table-pagination-size{display:flex;align-items:center;gap:.5rem}.dynamic-table-pagination-size-label{font-size:.875rem;color:#6b7280}@media(prefers-color-scheme:dark){.dynamic-table-pagination-size-label{color:#9ca3af}}.dynamic-table-pagination-size-select{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.5rem;background-color:#fff;font-size:.875rem;font-weight:500;color:#1f2937;cursor:pointer;transition:all .15s ease-in-out}.dynamic-table-pagination-size-select:hover{background-color:#f3f4f6}.dynamic-table-pagination-size-select:focus{outline:2px solid #4f46e5;outline-offset:-2px}@media(prefers-color-scheme:dark){.dynamic-table-pagination-size-select{background-color:#374151;border-color:#4b5563;color:#fff}.dynamic-table-pagination-size-select:hover{background-color:#4b5563}.dynamic-table-pagination-size-select:focus{outline-color:#6366f1}}.dynamic-table-pagination-button{display:flex;align-items:center;padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.5rem;background-color:#fff;font-size:.875rem;font-weight:500;transition:all .15s ease-in-out}.dynamic-table-pagination-button:hover{background-color:#f3f4f6}.dynamic-table-pagination-button:disabled{opacity:.4;cursor:not-allowed}@media(prefers-color-scheme:dark){.dynamic-table-pagination-button{background-color:#374151;border-color:#4b5563;color:#fff}.dynamic-table-pagination-button:hover{background-color:#4b5563}}@keyframes dynamic-table-pulse{0%,to{opacity:1}50%{opacity:.5}}\n", ".form-input-label{color:#374151;display:block;font-size:.875rem;font-weight:600;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.form-input-label{color:#d1d5db}}.form-input{background-color:#fff;border:1px solid #d1d5db;border-radius:.375rem;color:#111827;display:block;outline:0;padding:.375rem .75rem;width:100%}.form-input::placeholder{color:#9ca3af}.form-input:focus{border-color:#1f2937}.form-input.error{outline-color:#ef4444}@media(prefers-color-scheme:dark){.form-input.error{background-color:#374151;outline-color:#ef4444}}.form-input.disabled{background-color:#e5e7eb;color:#6b7280;cursor:not-allowed}@media(prefers-color-scheme:dark){.form-input.disabled{background-color:#374151;color:#d1d5db}}@media screen and (min-width:768px){.form-input{font-size:.875rem}}.form-input-required{color:#ef4444}.form-input-error-message{color:#ef4444;font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
|
|
5599
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DynamicTableComponent, isStandalone: true, selector: "dynamic-table", inputs: { title: "title", data: "data", headers: "headers", searcherPlaceholder: "searcherPlaceholder", columnComponents: "columnComponents", isLoading: "isLoading", totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage", searchValue: "searchValue", showPagination: "showPagination", showSearch: "showSearch", showTitle: "showTitle" }, outputs: { pageChange: "pageChange", searchChange: "searchChange", pageSizeChange: "pageSizeChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-table\">\n @if (showTitle || showSearch) {\n <div class=\"dynamic-table-toolbar\">\n @if (showTitle) {\n <h2 class=\"dynamic-table-title\">{{ title }}</h2>\n }\n\n @if (showSearch) {\n <input\n [placeholder]=\"searcherPlaceholder\"\n (input)=\"onSearch($event)\"\n type=\"search\"\n class=\"dynamic-table-search form-input\"\n />\n }\n </div>\n }\n\n <div class=\"dynamic-table-scroll\">\n <table class=\"dynamic-table-table\">\n <thead class=\"dynamic-table-head\">\n <tr>\n @for (header of headers; track header.key) {\n <th class=\"dynamic-table-head-cell\">\n {{ header.label }}\n </th>\n }\n </tr>\n </thead>\n\n <tbody class=\"dynamic-table-body\">\n @if (isLoading) {\n <tr class=\"dynamic-table-row\">\n @for (header of headers; track header.key) {\n <td class=\"dynamic-table-cell\">\n <div class=\"dynamic-table-skeleton\"></div>\n </td>\n }\n </tr>\n }\n\n @for (row of data; track row) {\n <tr class=\"dynamic-table-row\">\n @for (header of headers; track header.key) {\n <td class=\"dynamic-table-cell dynamic-table-cell--nowrap\">\n @if (columnComponents[header.key]) {\n <ng-container\n *ngComponentOutlet=\"columnComponents[header.key]; injector: createInjector(row)\"\n ></ng-container>\n } @else {\n <span class=\"dynamic-table-cell--text\" [title]=\"row[header.key]\">\n {{ row[header.key] || '---' }}\n </span>\n }\n </td>\n }\n </tr>\n }\n\n @if ((!data || data.length < 1) && !isLoading) {\n <tr>\n <td [attr.colspan]=\"headers.length\" class=\"dynamic-table-empty\">\n @if (searchValue.length > 0) {\n No se encontraron sedes que coincidan con <q>{{ searchValue }}</q>\n <br />\n Revisa la ortograf\u00EDa o limpia la b\u00FAsqueda\n } @else {\n No se encontraron a\u00FAn registros almacenados en base de datos.\n }\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n @if (showPagination) {\n <div class=\"dynamic-table-pagination\">\n <div class=\"dynamic-table-pagination-size\">\n <label for=\"page-size-select\" class=\"dynamic-table-pagination-size-label\">\n Items por p\u00E1gina\n </label>\n <select\n id=\"page-size-select\"\n class=\"dynamic-table-pagination-size-select\"\n [value]=\"itemsPerPage\"\n (change)=\"changePageSize($event)\"\n >\n @for (option of pageSizeOptions; track option) {\n <option [value]=\"option\" [selected]=\"option === itemsPerPage\">{{ option }}</option>\n }\n </select>\n </div>\n\n <div class=\"dynamic-table-pagination-info\">\n Mostrando p\u00E1gina\n <span class=\"dynamic-table-pagination-strong\">{{ currentPage }}</span> de\n <span class=\"dynamic-table-pagination-strong\">{{ totalPages }}</span>\n <span class=\"dynamic-table-pagination-total\">({{ totalItems }} registros totales)</span>\n </div>\n\n <div class=\"dynamic-table-pagination-actions\">\n <button\n (click)=\"changePage(-1)\"\n [disabled]=\"totalPages <= 1 || currentPage === 1\"\n class=\"dynamic-table-pagination-button\"\n >\n Anterior\n </button>\n\n <button\n (click)=\"changePage(1)\"\n [disabled]=\"totalPages <= 1 || currentPage >= totalPages\"\n class=\"dynamic-table-pagination-button\"\n >\n Siguiente\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [".dynamic-table{background-color:#fff;border-radius:.5rem;overflow:hidden;border:1px solid #e5e7eb}@media(prefers-color-scheme:dark){.dynamic-table{background-color:#1f2937;border-color:#374151}}.dynamic-table-toolbar{padding:1rem;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:flex-start}@media(prefers-color-scheme:dark){.dynamic-table-toolbar{border-color:#374151}}.dynamic-table-title{font-size:1.125rem;font-weight:600;margin:0}@media(prefers-color-scheme:dark){.dynamic-table-title{color:#fff}}.dynamic-table-search{margin-left:auto;max-width:24rem}.dynamic-table-scroll{overflow-x:auto}.dynamic-table-table{width:100%;text-align:left;border-collapse:collapse}.dynamic-table-head{background-color:#f3f4f6;color:#4b5563;font-size:.75rem}@media(prefers-color-scheme:dark){.dynamic-table-head{background-color:#374151;color:#d1d5db}}.dynamic-table-head-cell{text-overflow:ellipsis;max-width:200px;padding:.75rem;border-bottom:1px solid #d1d5db;white-space:nowrap}@media(prefers-color-scheme:dark){.dynamic-table-head-cell{border-color:#4b5563}}.dynamic-table-body{color:#374151;font-size:.75rem}@media(prefers-color-scheme:dark){.dynamic-table-body{color:#e5e7eb}}.dynamic-table-row{border-bottom:1px solid #e5e7eb;transition:background-color .15s ease-in-out}.dynamic-table-row:last-child{border-bottom:none}.dynamic-table-row:nth-child(2n){background-color:#f3f4f6}.dynamic-table-row:hover{background-color:#e5e7eb}@media(prefers-color-scheme:dark){.dynamic-table-row{border-color:#374151}.dynamic-table-row:nth-child(2n){background-color:#37415180}.dynamic-table-row:hover{background-color:#374151}}.dynamic-table-cell{padding:.75rem}.dynamic-table-cell--nowrap{white-space:nowrap}.dynamic-table-cell--text{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:280px}.dynamic-table-skeleton{height:1.25rem;width:100%;background-color:#e5e7eb;border-radius:.375rem;animation:dynamic-table-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@media(prefers-color-scheme:dark){.dynamic-table-skeleton{background-color:#4b5563}}.dynamic-table-empty{padding:1.5rem;text-align:center;color:#9ca3af;font-style:italic}@media(prefers-color-scheme:dark){.dynamic-table-empty{color:#6b7280}}.dynamic-table-pagination{padding:1rem;display:flex;align-items:center;justify-content:space-between;background-color:#f9fafb;border-top:1px solid #d1d5db}@media(prefers-color-scheme:dark){.dynamic-table-pagination{background-color:#1f293780;border-color:#374151}}.dynamic-table-pagination-info{font-size:.875rem;color:#6b7280}@media(prefers-color-scheme:dark){.dynamic-table-pagination-info{color:#9ca3af}}.dynamic-table-pagination-strong{font-weight:600;color:#1f2937}@media(prefers-color-scheme:dark){.dynamic-table-pagination-strong{color:#fff}}.dynamic-table-pagination-total{margin-left:.25rem}.dynamic-table-pagination-actions{display:flex;gap:.5rem}.dynamic-table-pagination-size{display:flex;align-items:center;gap:.5rem}.dynamic-table-pagination-size-label{font-size:.875rem;color:#6b7280}@media(prefers-color-scheme:dark){.dynamic-table-pagination-size-label{color:#9ca3af}}.dynamic-table-pagination-size-select{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.5rem;background-color:#fff;font-size:.875rem;font-weight:500;color:#1f2937;cursor:pointer;transition:all .15s ease-in-out}.dynamic-table-pagination-size-select:hover{background-color:#f3f4f6}.dynamic-table-pagination-size-select:focus{outline:2px solid #4f46e5;outline-offset:-2px}@media(prefers-color-scheme:dark){.dynamic-table-pagination-size-select{background-color:#374151;border-color:#4b5563;color:#fff}.dynamic-table-pagination-size-select:hover{background-color:#4b5563}.dynamic-table-pagination-size-select:focus{outline-color:#6366f1}}.dynamic-table-pagination-button{display:flex;align-items:center;padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.5rem;background-color:#fff;font-size:.875rem;font-weight:500;transition:all .15s ease-in-out}.dynamic-table-pagination-button:hover{background-color:#f3f4f6}.dynamic-table-pagination-button:disabled{opacity:.4;cursor:not-allowed}@media(prefers-color-scheme:dark){.dynamic-table-pagination-button{background-color:#374151;border-color:#4b5563;color:#fff}.dynamic-table-pagination-button:hover{background-color:#4b5563}}@keyframes dynamic-table-pulse{0%,to{opacity:1}50%{opacity:.5}}\n", ".form-input-label{color:#374151;display:block;font-size:.875rem;font-weight:600;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.form-input-label{color:#d1d5db}}.form-input{background-color:#fff;border:1px solid #d1d5db;border-radius:.375rem;color:#111827;display:block;outline:0;padding:.375rem .75rem;width:100%}.form-input::placeholder{color:#9ca3af}.form-input:focus{border-color:#1f2937}.form-input.error{outline-color:#ef4444}@media(prefers-color-scheme:dark){.form-input.error{background-color:#374151;outline-color:#ef4444}}.form-input.disabled{background-color:#e5e7eb;color:#6b7280;cursor:not-allowed}@media(prefers-color-scheme:dark){.form-input.disabled{background-color:#374151;color:#d1d5db}}@media screen and (min-width:768px){.form-input{font-size:.875rem}}.form-input-required{color:#ef4444}.form-input-error-message{color:#ef4444;font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
|
|
5589
5600
|
}
|
|
5590
5601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
5591
5602
|
type: Component,
|