tickera-angular-components 0.0.1-dev.130 → 0.0.1-dev.132
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.
|
@@ -4482,7 +4482,7 @@ class DeleteConfirmationComponent {
|
|
|
4482
4482
|
this.deleteConfirmationService.close();
|
|
4483
4483
|
}
|
|
4484
4484
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeleteConfirmationComponent, deps: [{ token: i1$2.FormBuilder }, { token: DeleteConfirmationService }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4485
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DeleteConfirmationComponent, isStandalone: true, selector: "delete-confirmation", ngImport: i0, template: "@if (isOpen()) {\n <app-modal\n [title]=\"title\"\n [isOpen]=\"isOpen\"\n (closeModal)=\"onCloseModal()\"\n [interactiveClose]=\"
|
|
4485
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DeleteConfirmationComponent, isStandalone: true, selector: "delete-confirmation", ngImport: i0, template: "@if (isOpen()) {\n <app-modal\n [title]=\"title\"\n [isOpen]=\"isOpen\"\n (closeModal)=\"onCloseModal()\"\n [interactiveClose]=\"false\"\n >\n <form\n [formGroup]=\"deleteConfirmationForm\"\n method=\"POST\"\n class=\"delete-confirmation-content\"\n (ngSubmit)=\"onConfirmDelete()\"\n >\n <app-alert\n type=\"warning\"\n [text]=\"'deleteConfirmation.warning' | transloco\"\n size=\"sm\"\n [closeable]=\"false\"\n />\n\n <p class=\"delete-confirmation-instructions\">\n {{ 'deleteConfirmation.instructions' | transloco }}\n\n <span class=\"delete-confirmation-highlight\">\n {{ confirmationText }}\n </span>\n </p>\n\n <form-input\n name=\"confirmationText\"\n type=\"text\"\n class=\"delete-confirmation-field\"\n [required]=\"true\"\n [autocomplete]=\"false\"\n formControlName=\"confirmationText\"\n [placeholder]=\"\n transloco.translate('deleteConfirmation.placeholder', { text: confirmationText })\n \"\n />\n\n <div class=\"delete-confirmation-actions\">\n <app-button\n variant=\"tertiary\"\n [text]=\"'deleteConfirmation.cancel' | transloco\"\n (click)=\"onCloseModal()\"\n size=\"sm\"\n />\n\n <app-button\n type=\"submit\"\n variant=\"primary\"\n [text]=\"'deleteConfirmation.delete' | transloco\"\n [disabled]=\"!isConfirmationValid\"\n size=\"sm\"\n />\n </div>\n </form>\n </app-modal>\n}\n", styles: [".delete-confirmation-content{display:flex;flex-direction:column;gap:1rem;animation:slideUp .3s ease-out}.delete-confirmation-instructions{font-size:.75rem;color:#4b5563;margin:0}@media(prefers-color-scheme:dark){.delete-confirmation-instructions{color:#9ca3af}}.delete-confirmation-highlight{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;margin-top:.25rem;background-color:#e5e7eb;color:#dc2626;font-weight:600;font-size:.875rem;border-radius:.375rem}@media(prefers-color-scheme:dark){.delete-confirmation-highlight{background-color:#374151}}.delete-confirmation-field{flex:1}.delete-confirmation-actions{display:flex;gap:.75rem}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: FormInputComponent, selector: "form-input", inputs: ["label", "type", "name", "id", "placeholder", "required", "readonly", "maxlength", "minlength", "max", "min", "step", "pattern", "fieldGroupClass", "autocomplete"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "interactiveClose", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
|
|
4486
4486
|
}
|
|
4487
4487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeleteConfirmationComponent, decorators: [{
|
|
4488
4488
|
type: Component,
|
|
@@ -4494,7 +4494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
4494
4494
|
FormInputComponent,
|
|
4495
4495
|
AppModalComponent,
|
|
4496
4496
|
AppAlertComponent,
|
|
4497
|
-
], encapsulation: ViewEncapsulation.None, template: "@if (isOpen()) {\n <app-modal\n [title]=\"title\"\n [isOpen]=\"isOpen\"\n (closeModal)=\"onCloseModal()\"\n [interactiveClose]=\"
|
|
4497
|
+
], encapsulation: ViewEncapsulation.None, template: "@if (isOpen()) {\n <app-modal\n [title]=\"title\"\n [isOpen]=\"isOpen\"\n (closeModal)=\"onCloseModal()\"\n [interactiveClose]=\"false\"\n >\n <form\n [formGroup]=\"deleteConfirmationForm\"\n method=\"POST\"\n class=\"delete-confirmation-content\"\n (ngSubmit)=\"onConfirmDelete()\"\n >\n <app-alert\n type=\"warning\"\n [text]=\"'deleteConfirmation.warning' | transloco\"\n size=\"sm\"\n [closeable]=\"false\"\n />\n\n <p class=\"delete-confirmation-instructions\">\n {{ 'deleteConfirmation.instructions' | transloco }}\n\n <span class=\"delete-confirmation-highlight\">\n {{ confirmationText }}\n </span>\n </p>\n\n <form-input\n name=\"confirmationText\"\n type=\"text\"\n class=\"delete-confirmation-field\"\n [required]=\"true\"\n [autocomplete]=\"false\"\n formControlName=\"confirmationText\"\n [placeholder]=\"\n transloco.translate('deleteConfirmation.placeholder', { text: confirmationText })\n \"\n />\n\n <div class=\"delete-confirmation-actions\">\n <app-button\n variant=\"tertiary\"\n [text]=\"'deleteConfirmation.cancel' | transloco\"\n (click)=\"onCloseModal()\"\n size=\"sm\"\n />\n\n <app-button\n type=\"submit\"\n variant=\"primary\"\n [text]=\"'deleteConfirmation.delete' | transloco\"\n [disabled]=\"!isConfirmationValid\"\n size=\"sm\"\n />\n </div>\n </form>\n </app-modal>\n}\n", styles: [".delete-confirmation-content{display:flex;flex-direction:column;gap:1rem;animation:slideUp .3s ease-out}.delete-confirmation-instructions{font-size:.75rem;color:#4b5563;margin:0}@media(prefers-color-scheme:dark){.delete-confirmation-instructions{color:#9ca3af}}.delete-confirmation-highlight{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;margin-top:.25rem;background-color:#e5e7eb;color:#dc2626;font-weight:600;font-size:.875rem;border-radius:.375rem}@media(prefers-color-scheme:dark){.delete-confirmation-highlight{background-color:#374151}}.delete-confirmation-field{flex:1}.delete-confirmation-actions{display:flex;gap:.75rem}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
|
|
4498
4498
|
}], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: DeleteConfirmationService }, { type: i2.TranslocoService }] });
|
|
4499
4499
|
|
|
4500
4500
|
class AppBadgeComponent {
|
|
@@ -4591,11 +4591,11 @@ class DynamicTableComponent {
|
|
|
4591
4591
|
});
|
|
4592
4592
|
}
|
|
4593
4593
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
4594
|
-
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", 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 type=\"search\"\n (input)=\"onSearch($event)\"\n placeholder=\"Buscar...\"\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\">\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\">{{ 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;padding:.375rem .75rem;outline:1;outline-offset:1;outline-color:#d1d5db;width:100%}.form-input::placeholder{color:#9ca3af}.form-input:focus{outline:2;outline-offset:2;outline-color:#4f46e5}.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"] }] });
|
|
4594
|
+
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", 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 type=\"search\"\n (input)=\"onSearch($event)\"\n placeholder=\"Buscar...\"\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\">{{ 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;padding:.375rem .75rem;outline:1;outline-offset:1;outline-color:#d1d5db;width:100%}.form-input::placeholder{color:#9ca3af}.form-input:focus{outline:2;outline-offset:2;outline-color:#4f46e5}.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"] }] });
|
|
4595
4595
|
}
|
|
4596
4596
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
4597
4597
|
type: Component,
|
|
4598
|
-
args: [{ selector: 'dynamic-table', standalone: true, imports: [CommonModule], 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 type=\"search\"\n (input)=\"onSearch($event)\"\n placeholder=\"Buscar...\"\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\">\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\">{{ 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;padding:.375rem .75rem;outline:1;outline-offset:1;outline-color:#d1d5db;width:100%}.form-input::placeholder{color:#9ca3af}.form-input:focus{outline:2;outline-offset:2;outline-color:#4f46e5}.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"] }]
|
|
4598
|
+
args: [{ selector: 'dynamic-table', standalone: true, imports: [CommonModule], 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 type=\"search\"\n (input)=\"onSearch($event)\"\n placeholder=\"Buscar...\"\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\">{{ 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;padding:.375rem .75rem;outline:1;outline-offset:1;outline-color:#d1d5db;width:100%}.form-input::placeholder{color:#9ca3af}.form-input:focus{outline:2;outline-offset:2;outline-color:#4f46e5}.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"] }]
|
|
4599
4599
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { title: [{
|
|
4600
4600
|
type: Input
|
|
4601
4601
|
}], data: [{
|