valtech-components 2.0.410 → 2.0.412
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/esm2022/lib/components/molecules/prompter/prompter.component.mjs +34 -16
- package/esm2022/lib/components/organisms/data-table/data-table.component.mjs +11 -5
- package/fesm2022/valtech-components.mjs +38 -14
- package/fesm2022/valtech-components.mjs.map +1 -1
- package/lib/components/molecules/prompter/prompter.component.d.ts +7 -15
- package/lib/components/organisms/data-table/data-table.component.d.ts +3 -0
- package/package.json +1 -1
|
@@ -7521,32 +7521,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
7521
7521
|
* val-prompter
|
|
7522
7522
|
*
|
|
7523
7523
|
* Displays a prompt/info box with text, actions (buttons/links), and custom styles.
|
|
7524
|
+
* Supports reactive i18n content via contentClass and contentKey props.
|
|
7524
7525
|
*
|
|
7525
|
-
* @example
|
|
7526
|
-
* <val-prompter [props]="{ content: 'Message', buttons: [...],
|
|
7526
|
+
* @example Static content:
|
|
7527
|
+
* <val-prompter [props]="{ content: 'Message', buttons: [...], color: 'primary', size: 'medium' }"></val-prompter>
|
|
7528
|
+
*
|
|
7529
|
+
* @example Reactive i18n content:
|
|
7530
|
+
* <val-prompter [props]="{
|
|
7531
|
+
* contentClass: 'homePage',
|
|
7532
|
+
* contentKey: 'cookieMessage',
|
|
7533
|
+
* content: 'Fallback message',
|
|
7534
|
+
* buttons: [...],
|
|
7535
|
+
* color: 'primary',
|
|
7536
|
+
* size: 'medium'
|
|
7537
|
+
* }"></val-prompter>
|
|
7527
7538
|
*
|
|
7528
7539
|
* @input props: PrompterMetadata - Configuration for the prompter (content, buttons, hrefs, color, size, etc.)
|
|
7529
7540
|
* @output onClick - Emits when an action is clicked
|
|
7530
7541
|
*/
|
|
7531
7542
|
class PrompterComponent {
|
|
7532
|
-
constructor(
|
|
7533
|
-
this.langService =
|
|
7543
|
+
constructor() {
|
|
7544
|
+
this.langService = inject(LangService);
|
|
7534
7545
|
this.onClick = new EventEmitter();
|
|
7535
7546
|
}
|
|
7536
7547
|
ngOnInit() {
|
|
7537
|
-
|
|
7548
|
+
this.setupContent();
|
|
7549
|
+
}
|
|
7550
|
+
/**
|
|
7551
|
+
* Set up content Observable.
|
|
7552
|
+
* Follows the same pattern as val-text and val-button for consistency.
|
|
7553
|
+
*/
|
|
7554
|
+
setupContent() {
|
|
7538
7555
|
if (this.props.contentClass && this.props.contentKey) {
|
|
7539
|
-
|
|
7540
|
-
);
|
|
7556
|
+
// Reactive content - Observable connected to currentLang$
|
|
7557
|
+
this.displayContent$ = this.langService.getContent(this.props.contentClass, this.props.contentKey, this.props.content);
|
|
7541
7558
|
}
|
|
7542
7559
|
else {
|
|
7560
|
+
// Static content wrapped in Observable
|
|
7543
7561
|
this.displayContent$ = of(this.props.content);
|
|
7544
7562
|
}
|
|
7545
7563
|
}
|
|
7546
7564
|
clickHandler(token) {
|
|
7547
7565
|
this.onClick.emit(token);
|
|
7548
7566
|
}
|
|
7549
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PrompterComponent, deps: [
|
|
7567
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PrompterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7550
7568
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PrompterComponent, isStandalone: true, selector: "val-prompter", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
|
|
7551
7569
|
<val-box
|
|
7552
7570
|
class="teleprompter-container"
|
|
@@ -7557,7 +7575,7 @@ class PrompterComponent {
|
|
|
7557
7575
|
<div>
|
|
7558
7576
|
<val-text
|
|
7559
7577
|
[props]="{
|
|
7560
|
-
content:
|
|
7578
|
+
content: displayContent$ | async,
|
|
7561
7579
|
color: '',
|
|
7562
7580
|
bold: true,
|
|
7563
7581
|
size: props.size,
|
|
@@ -7595,7 +7613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
7595
7613
|
<div>
|
|
7596
7614
|
<val-text
|
|
7597
7615
|
[props]="{
|
|
7598
|
-
content:
|
|
7616
|
+
content: displayContent$ | async,
|
|
7599
7617
|
color: '',
|
|
7600
7618
|
bold: true,
|
|
7601
7619
|
size: props.size,
|
|
@@ -7620,7 +7638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
7620
7638
|
</div>
|
|
7621
7639
|
</val-box>
|
|
7622
7640
|
`, styles: ["@charset \"UTF-8\";:root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.container{display:flex;align-items:center;justify-content:space-between;flex-direction:column}@media (min-width: 768px){.container{flex-direction:row}}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .5rem;width:max-content}.actions-container{display:flex;align-items:center}\n"] }]
|
|
7623
|
-
}],
|
|
7641
|
+
}], propDecorators: { props: [{
|
|
7624
7642
|
type: Input
|
|
7625
7643
|
}], onClick: [{
|
|
7626
7644
|
type: Output
|
|
@@ -19465,7 +19483,10 @@ class DataTableComponent {
|
|
|
19465
19483
|
this.displayedData = [];
|
|
19466
19484
|
this.currentSort = null;
|
|
19467
19485
|
this.selectedRows = new Set();
|
|
19486
|
+
/** Cached visible columns for performance */
|
|
19487
|
+
this._visibleColumns = [];
|
|
19468
19488
|
this.langService = inject(LangService);
|
|
19489
|
+
this.cdr = inject(ChangeDetectorRef);
|
|
19469
19490
|
}
|
|
19470
19491
|
ngOnInit() {
|
|
19471
19492
|
this.initializeState();
|
|
@@ -19478,6 +19499,8 @@ class DataTableComponent {
|
|
|
19478
19499
|
}
|
|
19479
19500
|
}
|
|
19480
19501
|
initializeState() {
|
|
19502
|
+
// Cache visible columns for performance
|
|
19503
|
+
this._visibleColumns = this.props.columns.filter(c => c.visible !== false);
|
|
19481
19504
|
// Initialize sort
|
|
19482
19505
|
this.currentSort = this.props.sort || null;
|
|
19483
19506
|
// Initialize selection
|
|
@@ -19498,6 +19521,7 @@ class DataTableComponent {
|
|
|
19498
19521
|
data = data.slice(start, end);
|
|
19499
19522
|
}
|
|
19500
19523
|
this.displayedData = data;
|
|
19524
|
+
this.cdr.markForCheck();
|
|
19501
19525
|
}
|
|
19502
19526
|
sortData(data) {
|
|
19503
19527
|
if (!this.currentSort)
|
|
@@ -19529,7 +19553,7 @@ class DataTableComponent {
|
|
|
19529
19553
|
});
|
|
19530
19554
|
}
|
|
19531
19555
|
get visibleColumns() {
|
|
19532
|
-
return this.
|
|
19556
|
+
return this._visibleColumns;
|
|
19533
19557
|
}
|
|
19534
19558
|
get totalColumns() {
|
|
19535
19559
|
let count = this.visibleColumns.length;
|
|
@@ -20061,11 +20085,11 @@ class DataTableComponent {
|
|
|
20061
20085
|
</div>
|
|
20062
20086
|
}
|
|
20063
20087
|
</div>
|
|
20064
|
-
`, isInline: true, styles: [":host{display:block}.data-table-container{position:relative;background:var(--ion-background-color);border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000f;border:1px solid var(--ion-color-light-shade);overflow:hidden}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:10}.loading-message{font-size:14px;color:var(--ion-color-medium-shade)}.table-wrapper{overflow-x:auto;max-height:var(--max-height)}.table-wrapper.is-loading{opacity:.6;pointer-events:none}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:12px 16px;text-align:left;vertical-align:middle}thead{background:var(--ion-color-light)}thead th{font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--ion-color-medium-shade);white-space:nowrap;position:relative;border-bottom:2px solid var(--ion-color-light-shade)}thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s ease}thead th.sortable:hover{background:var(--ion-color-light-tint)}thead th.sorted{color:var(--ion-color-primary);background:transparent}.header-content{display:flex;align-items:center;gap:8px}.sort-icons{display:flex;flex-direction:column;gap:0}.sort-icons ion-icon{font-size:12px;color:var(--ion-color-medium);margin:-2px 0}.sort-icons ion-icon.active{color:var(--ion-color-primary)}tbody tr{border-bottom:1px solid var(--ion-color-light-tint);transition:background .15s ease}tbody tr:last-child{border-bottom:none}tbody tr.clickable{cursor:pointer}tbody tr.selected{background:rgba(var(--ion-color-primary-rgb),.08)}tbody td{color:var(--ion-color-dark);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.selection-cell{width:48px;text-align:center;padding:8px}.selection-cell ion-checkbox{margin:0}.selection-cell input[type=radio]{width:18px;height:18px;cursor:pointer}.row-number-cell{width:60px;text-align:center;color:var(--ion-color-medium);font-size:12px}.actions-cell{text-align:center;white-space:nowrap}.sticky-start{position:sticky;left:0;background:inherit;z-index:1}.sticky-end{position:sticky;right:0;background:inherit;z-index:1}.empty-row td{padding:48px 16px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ion-color-medium)}.empty-icon{font-size:48px;margin-bottom:16px;opacity:.5}.empty-title{font-size:16px;font-weight:600;margin:0 0 8px;color:var(--ion-color-dark)}.empty-description{font-size:14px;margin:0;max-width:300px}.pagination-container{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--ion-color-light-shade);background:var(--ion-color-light);flex-wrap:wrap;gap:12px}.pagination-info{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--ion-color-medium-shade)}.page-size-select{--padding-start: 8px;--padding-end: 8px;font-size:13px;min-width:120px}.pagination-controls{display:flex;align-items:center;gap:4px}.pagination-controls ion-button{--padding-start: 8px;--padding-end: 8px}.page-indicator{padding:0 12px;font-size:13px;color:var(--ion-color-dark);font-weight:500}.bordered table,.bordered th,.bordered td{border:1px solid var(--ion-color-medium-tint)}.striped tbody tr:nth-child(2n){background:var(--ion-color-light-shade)}.striped tbody tr:nth-child(2n).selected{background:var(--ion-color-primary-tint)}.hoverable tbody tr:hover:not(.empty-row){background:var(--ion-color-light-tint)}.hoverable tbody tr:hover:not(.empty-row).selected{background:rgba(var(--ion-color-primary-rgb),.12)}.sticky-header .table-wrapper{overflow-y:auto}.sticky-header thead{position:sticky;top:0;z-index:5}.size-small th,.size-small td{padding:8px 12px;font-size:12px}.size-small .selection-cell{width:40px;padding:6px}.size-small .row-number-cell{width:48px;font-size:11px}.size-small .pagination-container{padding:8px 12px}.size-small .pagination-info,.size-small .page-indicator{font-size:12px}.size-large th,.size-large td{padding:16px 20px;font-size:15px}.size-large .selection-cell{width:56px;padding:12px}.size-large .row-number-cell{width:72px;font-size:14px}.size-large .pagination-container{padding:16px 20px}.size-large .pagination-info,.size-large .page-indicator{font-size:14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 768px){.pagination-container{flex-direction:column;align-items:stretch}.pagination-info{justify-content:space-between}.pagination-controls{justify-content:center}}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border-bottom:1px solid var(--ion-color-light-shade);background:var(--ion-background-color);flex-wrap:wrap}.table-toolbar:empty{display:none}@media (max-width: 576px){.table-toolbar{flex-direction:column;align-items:stretch}}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:500;white-space:nowrap}.status-badge--success{background:rgba(var(--ion-color-success-rgb),.15);color:var(--ion-color-success-shade)}.status-badge--warning{background:rgba(var(--ion-color-warning-rgb),.15);color:var(--ion-color-warning-shade)}.status-badge--danger{background:rgba(var(--ion-color-danger-rgb),.15);color:var(--ion-color-danger-shade)}.status-badge--primary{background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade)}.status-badge--secondary{background:rgba(var(--ion-color-secondary-rgb),.15);color:var(--ion-color-secondary-shade)}.status-badge--medium{background:rgba(var(--ion-color-medium-rgb),.15);color:var(--ion-color-medium-shade)}.status-badge--tertiary{background:rgba(var(--ion-color-tertiary-rgb),.15);color:var(--ion-color-tertiary-shade)}.action-buttons{display:flex;gap:4px;justify-content:center}.action-buttons ion-button{--padding-start: 6px;--padding-end: 6px;margin:0}.action-buttons ion-button ion-icon{font-size:18px}.card-list{display:none;padding:8px;gap:12px}.data-card{background:var(--ion-background-color);border:1px solid var(--ion-color-light-shade);border-radius:12px;padding:16px;margin-bottom:12px}.data-card.selected{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.04)}.data-card.clickable{cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}.data-card.clickable:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--ion-color-light-shade)}.card-selection{display:flex;align-items:center}.card-body{display:flex;flex-direction:column;gap:8px}.card-field{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.card-field__label{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--ion-color-medium-shade);flex-shrink:0}.card-field__value{font-size:14px;color:var(--ion-color-dark);text-align:right;word-break:break-word}.card-actions{display:flex;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--ion-color-light-shade)}@media (max-width: 768px){.responsive-cards .table-wrapper{display:none}.responsive-cards .card-list{display:block}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }] }); }
|
|
20088
|
+
`, isInline: true, styles: [":host{display:block}.data-table-container{position:relative;background:var(--ion-background-color);border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000f;border:1px solid var(--ion-color-light-shade);overflow:hidden}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:10}.loading-message{font-size:14px;color:var(--ion-color-medium-shade)}.table-wrapper{overflow-x:auto;max-height:var(--max-height)}.table-wrapper.is-loading{opacity:.6;pointer-events:none}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:12px 16px;text-align:left;vertical-align:middle}thead{background:var(--ion-color-light)}thead th{font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--ion-color-medium-shade);white-space:nowrap;position:relative;border-bottom:2px solid var(--ion-color-light-shade)}thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s ease}thead th.sortable:hover{background:var(--ion-color-light-tint)}thead th.sorted{color:var(--ion-color-primary);background:transparent}.header-content{display:flex;align-items:center;gap:8px}.sort-icons{display:flex;flex-direction:column;gap:0}.sort-icons ion-icon{font-size:12px;color:var(--ion-color-medium);margin:-2px 0}.sort-icons ion-icon.active{color:var(--ion-color-primary)}tbody tr{border-bottom:1px solid var(--ion-color-light-tint);transition:background .15s ease}tbody tr:last-child{border-bottom:none}tbody tr.clickable{cursor:pointer}tbody tr.selected{background:rgba(var(--ion-color-primary-rgb),.08)}tbody td{color:var(--ion-color-dark);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.selection-cell{width:48px;text-align:center;padding:8px}.selection-cell ion-checkbox{margin:0}.selection-cell input[type=radio]{width:18px;height:18px;cursor:pointer}.row-number-cell{width:60px;text-align:center;color:var(--ion-color-medium);font-size:12px}.actions-cell{text-align:center;white-space:nowrap}.sticky-start{position:sticky;left:0;background:inherit;z-index:1}.sticky-end{position:sticky;right:0;background:inherit;z-index:1}.empty-row td{padding:48px 16px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ion-color-medium)}.empty-icon{font-size:48px;margin-bottom:16px;opacity:.5}.empty-title{font-size:16px;font-weight:600;margin:0 0 8px;color:var(--ion-color-dark)}.empty-description{font-size:14px;margin:0;max-width:300px}.pagination-container{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--ion-color-light-shade);background:var(--ion-color-light);flex-wrap:wrap;gap:12px}.pagination-info{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--ion-color-medium-shade)}.page-size-select{--padding-start: 8px;--padding-end: 8px;font-size:13px;min-width:120px}.pagination-controls{display:flex;align-items:center;gap:4px}.pagination-controls ion-button{--padding-start: 8px;--padding-end: 8px}.page-indicator{padding:0 12px;font-size:13px;color:var(--ion-color-dark);font-weight:500}.bordered table,.bordered th,.bordered td{border:1px solid var(--ion-color-medium-tint)}.striped tbody tr:nth-child(2n){background:var(--ion-color-light-shade)}.striped tbody tr:nth-child(2n).selected{background:var(--ion-color-primary-tint)}.hoverable tbody tr:hover:not(.empty-row){background:var(--ion-color-light-tint)}.hoverable tbody tr:hover:not(.empty-row).selected{background:rgba(var(--ion-color-primary-rgb),.12)}.sticky-header .table-wrapper{overflow-y:auto}.sticky-header thead{position:sticky;top:0;z-index:5}.size-small th,.size-small td{padding:8px 12px;font-size:12px}.size-small .selection-cell{width:40px;padding:6px}.size-small .row-number-cell{width:48px;font-size:11px}.size-small .pagination-container{padding:8px 12px}.size-small .pagination-info,.size-small .page-indicator{font-size:12px}.size-large th,.size-large td{padding:16px 20px;font-size:15px}.size-large .selection-cell{width:56px;padding:12px}.size-large .row-number-cell{width:72px;font-size:14px}.size-large .pagination-container{padding:16px 20px}.size-large .pagination-info,.size-large .page-indicator{font-size:14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 768px){.pagination-container{flex-direction:column;align-items:stretch}.pagination-info{justify-content:space-between}.pagination-controls{justify-content:center}}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border-bottom:1px solid var(--ion-color-light-shade);background:var(--ion-background-color);flex-wrap:wrap}.table-toolbar:empty{display:none}@media (max-width: 576px){.table-toolbar{flex-direction:column;align-items:stretch}}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:500;white-space:nowrap}.status-badge--success{background:rgba(var(--ion-color-success-rgb),.15);color:var(--ion-color-success-shade)}.status-badge--warning{background:rgba(var(--ion-color-warning-rgb),.15);color:var(--ion-color-warning-shade)}.status-badge--danger{background:rgba(var(--ion-color-danger-rgb),.15);color:var(--ion-color-danger-shade)}.status-badge--primary{background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade)}.status-badge--secondary{background:rgba(var(--ion-color-secondary-rgb),.15);color:var(--ion-color-secondary-shade)}.status-badge--medium{background:rgba(var(--ion-color-medium-rgb),.15);color:var(--ion-color-medium-shade)}.status-badge--tertiary{background:rgba(var(--ion-color-tertiary-rgb),.15);color:var(--ion-color-tertiary-shade)}.action-buttons{display:flex;gap:4px;justify-content:center}.action-buttons ion-button{--padding-start: 6px;--padding-end: 6px;margin:0}.action-buttons ion-button ion-icon{font-size:18px}.card-list{display:none;padding:8px;gap:12px}.data-card{background:var(--ion-background-color);border:1px solid var(--ion-color-light-shade);border-radius:12px;padding:16px;margin-bottom:12px}.data-card.selected{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.04)}.data-card.clickable{cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}.data-card.clickable:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--ion-color-light-shade)}.card-selection{display:flex;align-items:center}.card-body{display:flex;flex-direction:column;gap:8px}.card-field{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.card-field__label{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--ion-color-medium-shade);flex-shrink:0}.card-field__value{font-size:14px;color:var(--ion-color-dark);text-align:right;word-break:break-word}.card-actions{display:flex;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--ion-color-light-shade)}@media (max-width: 768px){.responsive-cards .table-wrapper{display:none}.responsive-cards .card-list{display:block}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
20065
20089
|
}
|
|
20066
20090
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
20067
20091
|
type: Component,
|
|
20068
|
-
args: [{ selector: 'val-data-table', standalone: true, imports: [
|
|
20092
|
+
args: [{ selector: 'val-data-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
20069
20093
|
CommonModule,
|
|
20070
20094
|
FormsModule,
|
|
20071
20095
|
IonButton,
|