ui-core-abv 0.6.13 → 0.6.16
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/ui-core-abv.mjs
CHANGED
|
@@ -263,7 +263,10 @@ const DICTIONARY_EN = {
|
|
|
263
263
|
},
|
|
264
264
|
excel_table: {
|
|
265
265
|
load_file: 'Upload excel',
|
|
266
|
+
empty_message: 'You have not yet selected a file',
|
|
266
267
|
clear_file: 'Clear',
|
|
268
|
+
see_more: 'See more',
|
|
269
|
+
counter_text: 'Viewing {{shown}} items of {{total}} total',
|
|
267
270
|
},
|
|
268
271
|
step_form: {
|
|
269
272
|
back: 'Back',
|
|
@@ -370,6 +373,9 @@ const DICTIONARY_ES = {
|
|
|
370
373
|
excel_table: {
|
|
371
374
|
load_file: 'Cargar excel',
|
|
372
375
|
clear_file: 'Limpiar',
|
|
376
|
+
empty_message: 'Aun no se ha seleccionado un archivo',
|
|
377
|
+
see_more: 'Ver mas',
|
|
378
|
+
counter_text: 'Viendo {{shown}} elementos de {{total}} totales',
|
|
373
379
|
},
|
|
374
380
|
step_form: {
|
|
375
381
|
back: 'Volver',
|
|
@@ -4000,7 +4006,7 @@ class UicDropdownContainerComponent {
|
|
|
4000
4006
|
provide: DROPDOWN_OVERLAY_CONTROLS,
|
|
4001
4007
|
useExisting: forwardRef(() => UicDropdownContainerComponent),
|
|
4002
4008
|
},
|
|
4003
|
-
], queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "\
|
|
4009
|
+
], queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n <div class=\"ui-dropdown-panel\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
4004
4010
|
}
|
|
4005
4011
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDropdownContainerComponent, decorators: [{
|
|
4006
4012
|
type: Component,
|
|
@@ -4009,7 +4015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4009
4015
|
provide: DROPDOWN_OVERLAY_CONTROLS,
|
|
4010
4016
|
useExisting: forwardRef(() => UicDropdownContainerComponent),
|
|
4011
4017
|
},
|
|
4012
|
-
], template: "\
|
|
4018
|
+
], template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n <div class=\"ui-dropdown-panel\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"] }]
|
|
4013
4019
|
}], propDecorators: { buttonLabel: [{
|
|
4014
4020
|
type: Input
|
|
4015
4021
|
}], disabled: [{
|
|
@@ -4595,11 +4601,11 @@ class UicModalComponent {
|
|
|
4595
4601
|
this.modalRef.closeFloating(null);
|
|
4596
4602
|
}
|
|
4597
4603
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
4598
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \
|
|
4604
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \n <div @pushTop class=\"uic_modal\" \n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n (click)=\"$event.stopPropagation()\">\n \n @if ( myConfig.title) {\n <div class=\"uic_modal-header\">\n {{myConfig.title}}\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n </div>\n }\n <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n </div>\n</div>\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
|
|
4599
4605
|
}
|
|
4600
4606
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
|
|
4601
4607
|
type: Component,
|
|
4602
|
-
args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \
|
|
4608
|
+
args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \n <div @pushTop class=\"uic_modal\" \n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n (click)=\"$event.stopPropagation()\">\n \n @if ( myConfig.title) {\n <div class=\"uic_modal-header\">\n {{myConfig.title}}\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n </div>\n }\n <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n </div>\n</div>\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"] }]
|
|
4603
4609
|
}], ctorParameters: () => [{ type: UiModalRef, decorators: [{
|
|
4604
4610
|
type: Inject,
|
|
4605
4611
|
args: [UiModalRef]
|
|
@@ -5434,11 +5440,11 @@ class UicSkeletonCardsComponent {
|
|
|
5434
5440
|
return this.cards > 0 ? this.cards : 0;
|
|
5435
5441
|
}
|
|
5436
5442
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5437
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSkeletonCardsComponent, isStandalone: true, selector: "ui-skeleton-cards", inputs: { cards: "cards", gap: "gap", minCardWidthPx: "minCardWidthPx" }, ngImport: i0, template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\
|
|
5443
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSkeletonCardsComponent, isStandalone: true, selector: "ui-skeleton-cards", inputs: { cards: "cards", gap: "gap", minCardWidthPx: "minCardWidthPx" }, ngImport: i0, template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\n @for (card of [].constructor(cardsCount); track $index) {\n <div class=\"skeleton-card skeleton-gradient\"></div>\n }\n</div>\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
5438
5444
|
}
|
|
5439
5445
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonCardsComponent, decorators: [{
|
|
5440
5446
|
type: Component,
|
|
5441
|
-
args: [{ selector: 'ui-skeleton-cards', imports: [CommonModule], template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\
|
|
5447
|
+
args: [{ selector: 'ui-skeleton-cards', imports: [CommonModule], template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\n @for (card of [].constructor(cardsCount); track $index) {\n <div class=\"skeleton-card skeleton-gradient\"></div>\n }\n</div>\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
|
|
5442
5448
|
}], propDecorators: { cards: [{
|
|
5443
5449
|
type: Input
|
|
5444
5450
|
}], gap: [{
|
|
@@ -6349,11 +6355,44 @@ class UicExcelTableComponent {
|
|
|
6349
6355
|
this.hostElement = hostElement;
|
|
6350
6356
|
}
|
|
6351
6357
|
title = '';
|
|
6358
|
+
_visibleRowsStep = 50;
|
|
6359
|
+
_record = [];
|
|
6360
|
+
visibleRowsCount = 0;
|
|
6361
|
+
set visibleRowsStep(value) {
|
|
6362
|
+
const numericValue = Number(value);
|
|
6363
|
+
this._visibleRowsStep = Number.isFinite(numericValue) && numericValue > 0
|
|
6364
|
+
? Math.floor(numericValue)
|
|
6365
|
+
: 50;
|
|
6366
|
+
this.syncVisibleRows(false);
|
|
6367
|
+
}
|
|
6368
|
+
get visibleRowsStep() {
|
|
6369
|
+
return this._visibleRowsStep;
|
|
6370
|
+
}
|
|
6371
|
+
set record(value) {
|
|
6372
|
+
const normalizedRows = Array.isArray(value)
|
|
6373
|
+
? value.map((row) => ({ ...row }))
|
|
6374
|
+
: [];
|
|
6375
|
+
this._record = normalizedRows;
|
|
6376
|
+
this.rows = normalizedRows;
|
|
6377
|
+
this.headers = this.buildHeadersFromRows(this.rows);
|
|
6378
|
+
this.jsonData = [...this.rows];
|
|
6379
|
+
this.syncVisibleRows(false);
|
|
6380
|
+
}
|
|
6381
|
+
get record() {
|
|
6382
|
+
return this._record;
|
|
6383
|
+
}
|
|
6352
6384
|
headers = [];
|
|
6353
6385
|
rows = [];
|
|
6354
6386
|
jsonData = [];
|
|
6355
6387
|
fileName = '';
|
|
6388
|
+
recordChange = new EventEmitter();
|
|
6356
6389
|
jsonDataChange = new EventEmitter();
|
|
6390
|
+
get visibleRows() {
|
|
6391
|
+
return this.rows.slice(0, this.visibleRowsCount);
|
|
6392
|
+
}
|
|
6393
|
+
get canShowMoreRows() {
|
|
6394
|
+
return this.visibleRowsCount < this.rows.length;
|
|
6395
|
+
}
|
|
6357
6396
|
onFileSelected(event) {
|
|
6358
6397
|
const input = event.target;
|
|
6359
6398
|
if (!input.files || input.files.length === 0) {
|
|
@@ -6395,8 +6434,7 @@ class UicExcelTableComponent {
|
|
|
6395
6434
|
});
|
|
6396
6435
|
return record;
|
|
6397
6436
|
});
|
|
6398
|
-
this.
|
|
6399
|
-
this.jsonDataChange.emit(this.jsonData);
|
|
6437
|
+
this.emitTableDataChanges(true);
|
|
6400
6438
|
};
|
|
6401
6439
|
reader.readAsArrayBuffer(file);
|
|
6402
6440
|
input.value = '';
|
|
@@ -6404,8 +6442,7 @@ class UicExcelTableComponent {
|
|
|
6404
6442
|
resetData() {
|
|
6405
6443
|
this.headers = [];
|
|
6406
6444
|
this.rows = [];
|
|
6407
|
-
this.
|
|
6408
|
-
this.jsonDataChange.emit(this.jsonData);
|
|
6445
|
+
this.emitTableDataChanges(true);
|
|
6409
6446
|
}
|
|
6410
6447
|
deleteColum(headerKey) {
|
|
6411
6448
|
this.headers = this.headers.filter((header) => header !== headerKey);
|
|
@@ -6413,11 +6450,7 @@ class UicExcelTableComponent {
|
|
|
6413
6450
|
const { [headerKey]: _removed, ...rest } = row;
|
|
6414
6451
|
return rest;
|
|
6415
6452
|
});
|
|
6416
|
-
this.
|
|
6417
|
-
const { [headerKey]: _removed, ...rest } = row;
|
|
6418
|
-
return rest;
|
|
6419
|
-
});
|
|
6420
|
-
this.jsonDataChange.emit(this.jsonData);
|
|
6453
|
+
this.emitTableDataChanges();
|
|
6421
6454
|
}
|
|
6422
6455
|
addEmptyRow(position, direction = 'bottom') {
|
|
6423
6456
|
const emptyRow = {};
|
|
@@ -6432,16 +6465,20 @@ class UicExcelTableComponent {
|
|
|
6432
6465
|
emptyRow,
|
|
6433
6466
|
...this.rows.slice(insertIndex)
|
|
6434
6467
|
];
|
|
6435
|
-
this.
|
|
6436
|
-
this.jsonDataChange.emit(this.jsonData);
|
|
6468
|
+
this.emitTableDataChanges();
|
|
6437
6469
|
}
|
|
6438
6470
|
deleteRow(position) {
|
|
6439
6471
|
if (position < 0 || position >= this.rows.length) {
|
|
6440
6472
|
return;
|
|
6441
6473
|
}
|
|
6442
6474
|
this.rows = this.rows.filter((_, index) => index !== position);
|
|
6443
|
-
this.
|
|
6444
|
-
|
|
6475
|
+
this.emitTableDataChanges();
|
|
6476
|
+
}
|
|
6477
|
+
onCellBlur() {
|
|
6478
|
+
this.emitTableDataChanges();
|
|
6479
|
+
}
|
|
6480
|
+
showMoreRows() {
|
|
6481
|
+
this.visibleRowsCount = Math.min(this.visibleRowsCount + this.visibleRowsStep, this.rows.length);
|
|
6445
6482
|
}
|
|
6446
6483
|
onCellKeydown(event, row, col) {
|
|
6447
6484
|
if (event.key === 'Escape') {
|
|
@@ -6466,7 +6503,7 @@ class UicExcelTableComponent {
|
|
|
6466
6503
|
return;
|
|
6467
6504
|
}
|
|
6468
6505
|
event.preventDefault();
|
|
6469
|
-
if (targetRow < 0 || targetRow >= this.
|
|
6506
|
+
if (targetRow < 0 || targetRow >= this.visibleRowsCount || targetCol < 0 || targetCol >= this.headers.length) {
|
|
6470
6507
|
return;
|
|
6471
6508
|
}
|
|
6472
6509
|
this.focusCell(targetRow, targetCol);
|
|
@@ -6475,8 +6512,36 @@ class UicExcelTableComponent {
|
|
|
6475
6512
|
const cellInput = this.hostElement.nativeElement.querySelector(`input[data-row="${row}"][data-col="${col}"]`);
|
|
6476
6513
|
cellInput?.focus();
|
|
6477
6514
|
}
|
|
6515
|
+
emitTableDataChanges(resetVisibleRows = false) {
|
|
6516
|
+
const nextValue = this.rows.map((row) => ({ ...row }));
|
|
6517
|
+
this.jsonData = nextValue;
|
|
6518
|
+
this._record = nextValue;
|
|
6519
|
+
this.syncVisibleRows(resetVisibleRows);
|
|
6520
|
+
this.recordChange.emit(nextValue);
|
|
6521
|
+
this.jsonDataChange.emit(nextValue);
|
|
6522
|
+
}
|
|
6523
|
+
buildHeadersFromRows(rows) {
|
|
6524
|
+
const keys = new Set();
|
|
6525
|
+
rows.forEach((row) => {
|
|
6526
|
+
Object.keys(row).forEach((key) => keys.add(key));
|
|
6527
|
+
});
|
|
6528
|
+
return Array.from(keys);
|
|
6529
|
+
}
|
|
6530
|
+
syncVisibleRows(reset) {
|
|
6531
|
+
const totalRows = this.rows.length;
|
|
6532
|
+
if (totalRows === 0) {
|
|
6533
|
+
this.visibleRowsCount = 0;
|
|
6534
|
+
return;
|
|
6535
|
+
}
|
|
6536
|
+
const initialVisibleRows = Math.min(this.visibleRowsStep, totalRows);
|
|
6537
|
+
if (reset || this.visibleRowsCount === 0) {
|
|
6538
|
+
this.visibleRowsCount = initialVisibleRows;
|
|
6539
|
+
return;
|
|
6540
|
+
}
|
|
6541
|
+
this.visibleRowsCount = Math.min(this.visibleRowsCount, totalRows);
|
|
6542
|
+
}
|
|
6478
6543
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicExcelTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6479
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicExcelTableComponent, isStandalone: true, selector: "ui-excel-table", inputs: { title: "title" }, outputs: { jsonDataChange: "jsonDataChange" }, ngImport: i0, template: "<input\r\n#fileInput\r\ntype=\"file\"\r\naccept=\".xlsx,.xls,.csv\"\r\n(change)=\"onFileSelected($event)\"\r\nhidden\r\n/>\r\n\r\n<div class=\"xls-
|
|
6544
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicExcelTableComponent, isStandalone: true, selector: "ui-excel-table", inputs: { title: "title", visibleRowsStep: "visibleRowsStep", record: "record" }, outputs: { recordChange: "recordChange", jsonDataChange: "jsonDataChange" }, ngImport: i0, template: "<input\r\n#fileInput\r\ntype=\"file\"\r\naccept=\".xlsx,.xls,.csv\"\r\n(change)=\"onFileSelected($event)\"\r\nhidden\r\n/>\r\n\r\n<div class=\"xls-title\">\r\n @if (title) {\r\n <h1 style=\"flex: 1 1;\">{{title}}</h1>\r\n }\r\n <div class=\"xls-buttons\">\r\n <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"resetData()\">{{'excel_table.clear_file' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" size=\"m\" (click)=\"fileInput.click()\">{{'excel_table.load_file' | uicTranslate}}</ui-button>\r\n </div>\r\n</div>\r\n<div class=\"xlstable-overflow\">\r\n @if (headers.length > 0) {\r\n <table class=\"xls-table\">\r\n <thead>\r\n <tr>\r\n <th style=\"width: 30px;\"></th>\r\n @for (header of headers; track $index) {\r\n <th>\r\n <div class=\"hea-th\">\r\n {{ header }} \r\n <ui-button (click)=\"deleteColum(header)\" icon=\"ri-delete-bin-line\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\"></ui-button> \r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of visibleRows; track $index; let i = $index) {\r\n <tr>\r\n <td> <ui-action-button [options]=\"[{id:'TOP',label:'Agregar arriba'},{id:'BOTTOM',label:'Agregar abajo'},{id:'DELETE',label:'Eliminar fila'}]\" (optionSelected)=\"$event.id === 'DELETE' ? deleteRow(i) : addEmptyRow(i,$event.id)\"></ui-action-button> </td>\r\n @for (header of headers; track $index; let col = $index) {\r\n <td>\r\n <input\r\n [attr.data-row]=\"i\"\n [attr.data-col]=\"col\"\n [(ngModel)]=\"row[header]\"\n (blur)=\"onCellBlur()\"\n (keydown)=\"onCellKeydown($event, i, col)\"\n >\n </td>\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n @if (canShowMoreRows) {\r\n <div class=\"show-more\">\r\n <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"showMoreRows()\">\r\n {{'excel_table.see_more' | uicTranslate}}\r\n </ui-button>\r\n </div>\r\n }\r\n <div class=\"table-counter\">\r\n {{'excel_table.counter_text' | uicTranslate:{shown: visibleRows.length, total: rows.length} }}\r\n </div>\r\n } @else{\r\n <div class=\"empty-msg\"> {{'excel_table.empty_message' | uicTranslate}} </div>\r\n }\r\n</div>\r\n", styles: [".xls-title{display:flex;gap:10px;justify-content:space-between;margin-bottom:10px;border:solid 1px var(--grey-200);border-radius:10px;padding:5px}.xls-buttons{display:flex;gap:10px}.empty-msg{text-align:center;color:var(--grey-500);padding:20px;font-weight:300;font-size:14px}.xls-table{width:max-content;min-width:100%;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:2px;line-height:14px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table td{background-color:var(--grey-100)}.xls-table td input{padding:3px;border:solid 1px white;border-radius:3px;background-color:#fff;font-weight:300;width:calc(100% - 8px)}.xls-table td input:hover{border-color:var(--primary-400)}.xls-table td input:focus{border-color:var(--primary-600)}.xls-table th{line-height:28px;white-space:nowrap;background-color:var(--grey-400);color:#fff;text-align:left;padding:0 5px;border:solid 1px white}.xlstable-overflow{overflow-x:auto;overflow-y:hidden;width:100%}.show-more{display:flex;justify-content:center;margin-top:10px}.table-counter{margin-top:8px;text-align:right;font-size:11px;color:var(--grey-500);font-weight:400}.hea-th{display:flex;justify-content:space-between;width:100%;align-items:center}.hea-th i{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
6480
6545
|
}
|
|
6481
6546
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicExcelTableComponent, decorators: [{
|
|
6482
6547
|
type: Component,
|
|
@@ -6486,9 +6551,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6486
6551
|
UicActionButtonComponent,
|
|
6487
6552
|
FormsModule,
|
|
6488
6553
|
UicTranslatePipe
|
|
6489
|
-
], template: "<input\r\n#fileInput\r\ntype=\"file\"\r\naccept=\".xlsx,.xls,.csv\"\r\n(change)=\"onFileSelected($event)\"\r\nhidden\r\n/>\r\n\r\n<div class=\"xls-
|
|
6554
|
+
], template: "<input\r\n#fileInput\r\ntype=\"file\"\r\naccept=\".xlsx,.xls,.csv\"\r\n(change)=\"onFileSelected($event)\"\r\nhidden\r\n/>\r\n\r\n<div class=\"xls-title\">\r\n @if (title) {\r\n <h1 style=\"flex: 1 1;\">{{title}}</h1>\r\n }\r\n <div class=\"xls-buttons\">\r\n <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"resetData()\">{{'excel_table.clear_file' | uicTranslate}}</ui-button>\r\n <ui-button color=\"black\" size=\"m\" (click)=\"fileInput.click()\">{{'excel_table.load_file' | uicTranslate}}</ui-button>\r\n </div>\r\n</div>\r\n<div class=\"xlstable-overflow\">\r\n @if (headers.length > 0) {\r\n <table class=\"xls-table\">\r\n <thead>\r\n <tr>\r\n <th style=\"width: 30px;\"></th>\r\n @for (header of headers; track $index) {\r\n <th>\r\n <div class=\"hea-th\">\r\n {{ header }} \r\n <ui-button (click)=\"deleteColum(header)\" icon=\"ri-delete-bin-line\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\"></ui-button> \r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of visibleRows; track $index; let i = $index) {\r\n <tr>\r\n <td> <ui-action-button [options]=\"[{id:'TOP',label:'Agregar arriba'},{id:'BOTTOM',label:'Agregar abajo'},{id:'DELETE',label:'Eliminar fila'}]\" (optionSelected)=\"$event.id === 'DELETE' ? deleteRow(i) : addEmptyRow(i,$event.id)\"></ui-action-button> </td>\r\n @for (header of headers; track $index; let col = $index) {\r\n <td>\r\n <input\r\n [attr.data-row]=\"i\"\n [attr.data-col]=\"col\"\n [(ngModel)]=\"row[header]\"\n (blur)=\"onCellBlur()\"\n (keydown)=\"onCellKeydown($event, i, col)\"\n >\n </td>\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n @if (canShowMoreRows) {\r\n <div class=\"show-more\">\r\n <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"showMoreRows()\">\r\n {{'excel_table.see_more' | uicTranslate}}\r\n </ui-button>\r\n </div>\r\n }\r\n <div class=\"table-counter\">\r\n {{'excel_table.counter_text' | uicTranslate:{shown: visibleRows.length, total: rows.length} }}\r\n </div>\r\n } @else{\r\n <div class=\"empty-msg\"> {{'excel_table.empty_message' | uicTranslate}} </div>\r\n }\r\n</div>\r\n", styles: [".xls-title{display:flex;gap:10px;justify-content:space-between;margin-bottom:10px;border:solid 1px var(--grey-200);border-radius:10px;padding:5px}.xls-buttons{display:flex;gap:10px}.empty-msg{text-align:center;color:var(--grey-500);padding:20px;font-weight:300;font-size:14px}.xls-table{width:max-content;min-width:100%;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:2px;line-height:14px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table td{background-color:var(--grey-100)}.xls-table td input{padding:3px;border:solid 1px white;border-radius:3px;background-color:#fff;font-weight:300;width:calc(100% - 8px)}.xls-table td input:hover{border-color:var(--primary-400)}.xls-table td input:focus{border-color:var(--primary-600)}.xls-table th{line-height:28px;white-space:nowrap;background-color:var(--grey-400);color:#fff;text-align:left;padding:0 5px;border:solid 1px white}.xlstable-overflow{overflow-x:auto;overflow-y:hidden;width:100%}.show-more{display:flex;justify-content:center;margin-top:10px}.table-counter{margin-top:8px;text-align:right;font-size:11px;color:var(--grey-500);font-weight:400}.hea-th{display:flex;justify-content:space-between;width:100%;align-items:center}.hea-th i{cursor:pointer}\n"] }]
|
|
6490
6555
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { title: [{
|
|
6491
6556
|
type: Input
|
|
6557
|
+
}], visibleRowsStep: [{
|
|
6558
|
+
type: Input
|
|
6559
|
+
}], record: [{
|
|
6560
|
+
type: Input
|
|
6561
|
+
}], recordChange: [{
|
|
6562
|
+
type: Output
|
|
6492
6563
|
}], jsonDataChange: [{
|
|
6493
6564
|
type: Output
|
|
6494
6565
|
}] } });
|
|
@@ -6646,11 +6717,11 @@ class UicProgressBarComponent {
|
|
|
6646
6717
|
});
|
|
6647
6718
|
}
|
|
6648
6719
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6649
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { progress: "progress", color: "color", height: "height" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\n <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\n</div>\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] });
|
|
6720
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { progress: "progress", color: "color", height: "height" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\r\n <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] });
|
|
6650
6721
|
}
|
|
6651
6722
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicProgressBarComponent, decorators: [{
|
|
6652
6723
|
type: Component,
|
|
6653
|
-
args: [{ selector: 'ui-progress-bar', imports: [], template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\n <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\n</div>\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] }]
|
|
6724
|
+
args: [{ selector: 'ui-progress-bar', imports: [], template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\r\n <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] }]
|
|
6654
6725
|
}], propDecorators: { progress: [{
|
|
6655
6726
|
type: Input
|
|
6656
6727
|
}], color: [{
|