@cqa-lib/cqa-ui 1.0.25 → 1.0.27
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/esm2020/lib/dashboards/test-distribution-card/test-distribution-card.component.mjs +3 -15
- package/esm2020/lib/templates/table-template.component.mjs +21 -9
- package/fesm2015/cqa-lib-cqa-ui.mjs +24 -24
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +22 -22
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/dashboards/test-distribution-card/test-distribution-card.component.d.ts +0 -8
- package/lib/templates/table-template.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -2586,30 +2586,18 @@ class TestDistributionCardComponent {
|
|
|
2586
2586
|
}
|
|
2587
2587
|
return '#4F46E5'; // default
|
|
2588
2588
|
}
|
|
2589
|
-
/**
|
|
2590
|
-
* Filter items to only show those with value > 0
|
|
2591
|
-
*/
|
|
2592
|
-
get visibleItems() {
|
|
2593
|
-
return this.items.filter(item => item.value > 0);
|
|
2594
|
-
}
|
|
2595
2589
|
/**
|
|
2596
2590
|
* Filter segments to only show those with value > 0
|
|
2597
2591
|
*/
|
|
2598
2592
|
get visibleSegments() {
|
|
2599
2593
|
return this.segments.filter(segment => segment.value > 0);
|
|
2600
2594
|
}
|
|
2601
|
-
/**
|
|
2602
|
-
* Filter children items to only show those with value > 0
|
|
2603
|
-
*/
|
|
2604
|
-
getVisibleChildren(children) {
|
|
2605
|
-
return children?.filter(ch => ch.value > 0) || [];
|
|
2606
|
-
}
|
|
2607
2595
|
}
|
|
2608
2596
|
TestDistributionCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDistributionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2609
|
-
TestDistributionCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDistributionCardComponent, selector: "cqa-test-distribution-card", inputs: { title: "title", segments: "segments", items: "items" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-border-default cqa-py-[14.5px] cqa-px-[17px] cqa-shadow-card\">\n <!-- Title -->\n <h3 class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-mb-2\">{{ title }}</h3>\n\n <!-- Stacked segments pill -->\n <div class=\"cqa-w-full cqa-h-[24px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-flex cqa-mb-2\">\n <ng-container *ngFor=\"let s of visibleSegments; let i = index; let last = last\">\n <div\n class=\"cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-text-white cqa-text-[12px] cqa-leading-[16px]\"\n [ngClass]=\"[\n segmentColor(s, i === 0 ? 'cqa-bg-[#4F46E5]' : i === segments.length - 1 ? 'cqa-bg-[#059669]' : 'cqa-bg-[#9333EA]'),\n i === 0 ? 'cqa-rounded-l-full' : '',\n last ? 'cqa-rounded-r-full' : ''\n ]\" [style.width]=\"segmentWidth(s)\">\n {{ s.label }}\n </div>\n </ng-container>\n </div>\n\n <!-- Items list -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <div *ngFor=\"let it of
|
|
2597
|
+
TestDistributionCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDistributionCardComponent, selector: "cqa-test-distribution-card", inputs: { title: "title", segments: "segments", items: "items" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-border-default cqa-py-[14.5px] cqa-px-[17px] cqa-shadow-card\">\n <!-- Title -->\n <h3 class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-mb-2\">{{ title }}</h3>\n\n <!-- Stacked segments pill -->\n <div class=\"cqa-w-full cqa-h-[24px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-flex cqa-mb-2\">\n <ng-container *ngFor=\"let s of visibleSegments; let i = index; let last = last\">\n <div\n class=\"cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-text-white cqa-text-[12px] cqa-leading-[16px]\"\n [ngClass]=\"[\n segmentColor(s, i === 0 ? 'cqa-bg-[#4F46E5]' : i === segments.length - 1 ? 'cqa-bg-[#059669]' : 'cqa-bg-[#9333EA]'),\n i === 0 ? 'cqa-rounded-l-full' : '',\n last ? 'cqa-rounded-r-full' : ''\n ]\" [style.width]=\"segmentWidth(s)\">\n {{ s.label }}\n </div>\n </ng-container>\n </div>\n\n <!-- Items list -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <!-- Parent row -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-[4px] cqa-h-[12px] cqa-rounded-full\" [style.background-color]=\"getItemIconColor(it)\"></span>\n <div class=\"cqa-ml-[8px] cqa-mr-[6px]\">\n <mat-icon *ngIf=\"it.icon\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-[14px] cqa-leading-[14px]\" [style.color]=\"getItemIconColor(it)\">\n {{ it.icon }}\n </mat-icon>\n </div>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-dialog-muted\">{{ it.label }}</span>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-4 cqa-font-bold\">{{ it.value | number }}</div>\n </div>\n\n <!-- Children rows -->\n <div *ngIf=\"it.children?.length\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngFor=\"let ch of it.children\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-1 cqa-rounded-[4px] cqa-bg-[#F9FAFB]\">\n <div class=\"cqa-flex cqa-items-center cqa-text-[10px] cqa-leading-[15px] cqa-text-[#4B5563]\">\n <ng-container *ngIf=\"getChildIcon(ch.label) as icon\">\n <ng-container [ngSwitch]=\"icon\">\n <svg *ngSwitchCase=\"'apple'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M16.365 1.43c0 1.182-.435 2.014-1.086 2.845-.823.99-1.982 1.707-3.078 1.6-.13-1.115.433-2.154 1.09-2.87.825-.925 2.196-1.59 3.07-1.575-.003.003.003 0 .003 0zm3.217 6.094c-.086-.067-2.684-1.598-5.468-.507-1.332.53-2.429.542-3.788.006-1.997-.8-3.635.156-3.735.208-.083.044-1.948 1.143-2.4 3.667-.43 2.375.6 4.92 1.4 6.52.723 1.421 1.704 3.126 3.067 3.07 1.35-.053 1.78-.883 3.323-.883 1.542 0 1.92.883 3.36.853 1.44-.026 2.352-1.443 3.073-2.855.674-1.324.963-2.603.983-2.668-.021-.009-1.88-.72-1.903-2.854-.021-1.786 1.463-2.64 1.534-2.682z\"/>\n </svg>\n <svg *ngSwitchCase=\"'android'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M17.6 9.48l1.42-2.46a.5.5 0 10-.86-.5l-1.44 2.52A11 11 0 0016 7h-8c-.24 0-.48.01-.72.04L5.84 6.5a.5.5 0 00-.86.5l1.42 2.46A7 7 0 004 15h.5a1.5 1.5 0 001.5-1.5V10h1v9.5A1.5 1.5 0 008.5 21h1a1.5 1.5 0 001.5-1.5V17h2v2.5A1.5 1.5 0 0014.5 21h1a1.5 1.5 0 001.5-1.5V10h1v3.5A1.5 1.5 0 0019.5 15H20a7 7 0 00-2.4-5.52zM9 5a.75.75 0 11-1.5 0A.75.75 0 019 5zm7.5 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z\"/>\n </svg>\n </ng-container>\n </ng-container>\n <div class=\"cqa-pr-1\" [ngClass]=\"getChildIcon(ch.label) ? 'cqa-pl-0' : 'cqa-pl-2'\">{{ ch.label }}</div>\n </div>\n <span class=\"cqa-font-bold cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px]\">{{ ch.value }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2610
2598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDistributionCardComponent, decorators: [{
|
|
2611
2599
|
type: Component,
|
|
2612
|
-
args: [{ selector: 'cqa-test-distribution-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-border-default cqa-py-[14.5px] cqa-px-[17px] cqa-shadow-card\">\n <!-- Title -->\n <h3 class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-mb-2\">{{ title }}</h3>\n\n <!-- Stacked segments pill -->\n <div class=\"cqa-w-full cqa-h-[24px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-flex cqa-mb-2\">\n <ng-container *ngFor=\"let s of visibleSegments; let i = index; let last = last\">\n <div\n class=\"cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-text-white cqa-text-[12px] cqa-leading-[16px]\"\n [ngClass]=\"[\n segmentColor(s, i === 0 ? 'cqa-bg-[#4F46E5]' : i === segments.length - 1 ? 'cqa-bg-[#059669]' : 'cqa-bg-[#9333EA]'),\n i === 0 ? 'cqa-rounded-l-full' : '',\n last ? 'cqa-rounded-r-full' : ''\n ]\" [style.width]=\"segmentWidth(s)\">\n {{ s.label }}\n </div>\n </ng-container>\n </div>\n\n <!-- Items list -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <div *ngFor=\"let it of
|
|
2600
|
+
args: [{ selector: 'cqa-test-distribution-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-border-default cqa-py-[14.5px] cqa-px-[17px] cqa-shadow-card\">\n <!-- Title -->\n <h3 class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-mb-2\">{{ title }}</h3>\n\n <!-- Stacked segments pill -->\n <div class=\"cqa-w-full cqa-h-[24px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-flex cqa-mb-2\">\n <ng-container *ngFor=\"let s of visibleSegments; let i = index; let last = last\">\n <div\n class=\"cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-text-white cqa-text-[12px] cqa-leading-[16px]\"\n [ngClass]=\"[\n segmentColor(s, i === 0 ? 'cqa-bg-[#4F46E5]' : i === segments.length - 1 ? 'cqa-bg-[#059669]' : 'cqa-bg-[#9333EA]'),\n i === 0 ? 'cqa-rounded-l-full' : '',\n last ? 'cqa-rounded-r-full' : ''\n ]\" [style.width]=\"segmentWidth(s)\">\n {{ s.label }}\n </div>\n </ng-container>\n </div>\n\n <!-- Items list -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <!-- Parent row -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-[4px] cqa-h-[12px] cqa-rounded-full\" [style.background-color]=\"getItemIconColor(it)\"></span>\n <div class=\"cqa-ml-[8px] cqa-mr-[6px]\">\n <mat-icon *ngIf=\"it.icon\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-[14px] cqa-leading-[14px]\" [style.color]=\"getItemIconColor(it)\">\n {{ it.icon }}\n </mat-icon>\n </div>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-dialog-muted\">{{ it.label }}</span>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-4 cqa-font-bold\">{{ it.value | number }}</div>\n </div>\n\n <!-- Children rows -->\n <div *ngIf=\"it.children?.length\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngFor=\"let ch of it.children\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-1 cqa-rounded-[4px] cqa-bg-[#F9FAFB]\">\n <div class=\"cqa-flex cqa-items-center cqa-text-[10px] cqa-leading-[15px] cqa-text-[#4B5563]\">\n <ng-container *ngIf=\"getChildIcon(ch.label) as icon\">\n <ng-container [ngSwitch]=\"icon\">\n <svg *ngSwitchCase=\"'apple'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M16.365 1.43c0 1.182-.435 2.014-1.086 2.845-.823.99-1.982 1.707-3.078 1.6-.13-1.115.433-2.154 1.09-2.87.825-.925 2.196-1.59 3.07-1.575-.003.003.003 0 .003 0zm3.217 6.094c-.086-.067-2.684-1.598-5.468-.507-1.332.53-2.429.542-3.788.006-1.997-.8-3.635.156-3.735.208-.083.044-1.948 1.143-2.4 3.667-.43 2.375.6 4.92 1.4 6.52.723 1.421 1.704 3.126 3.067 3.07 1.35-.053 1.78-.883 3.323-.883 1.542 0 1.92.883 3.36.853 1.44-.026 2.352-1.443 3.073-2.855.674-1.324.963-2.603.983-2.668-.021-.009-1.88-.72-1.903-2.854-.021-1.786 1.463-2.64 1.534-2.682z\"/>\n </svg>\n <svg *ngSwitchCase=\"'android'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M17.6 9.48l1.42-2.46a.5.5 0 10-.86-.5l-1.44 2.52A11 11 0 0016 7h-8c-.24 0-.48.01-.72.04L5.84 6.5a.5.5 0 00-.86.5l1.42 2.46A7 7 0 004 15h.5a1.5 1.5 0 001.5-1.5V10h1v9.5A1.5 1.5 0 008.5 21h1a1.5 1.5 0 001.5-1.5V17h2v2.5A1.5 1.5 0 0014.5 21h1a1.5 1.5 0 001.5-1.5V10h1v3.5A1.5 1.5 0 0019.5 15H20a7 7 0 00-2.4-5.52zM9 5a.75.75 0 11-1.5 0A.75.75 0 019 5zm7.5 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z\"/>\n </svg>\n </ng-container>\n </ng-container>\n <div class=\"cqa-pr-1\" [ngClass]=\"getChildIcon(ch.label) ? 'cqa-pl-0' : 'cqa-pl-2'\">{{ ch.label }}</div>\n </div>\n <span class=\"cqa-font-bold cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px]\">{{ ch.value }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
2613
2601
|
}], propDecorators: { title: [{
|
|
2614
2602
|
type: Input
|
|
2615
2603
|
}], segments: [{
|
|
@@ -3725,13 +3713,18 @@ class TableTemplateComponent {
|
|
|
3725
3713
|
}
|
|
3726
3714
|
}
|
|
3727
3715
|
onFiltersChanged(current) {
|
|
3728
|
-
|
|
3716
|
+
// Defer applying filters and updating chips until Apply Filter is clicked
|
|
3717
|
+
this.pendingFilters = current;
|
|
3718
|
+
}
|
|
3719
|
+
onFiltersApplied(applied) {
|
|
3720
|
+
const effective = applied ?? this.pendingFilters ?? {};
|
|
3721
|
+
this.filteredRows = this.data.filter(r => this.passFilters(effective, r));
|
|
3729
3722
|
this.pageIndex = 0;
|
|
3730
3723
|
this.applyPagination();
|
|
3731
3724
|
const chips = [];
|
|
3732
|
-
if (
|
|
3733
|
-
for (const key of Object.keys(
|
|
3734
|
-
const value =
|
|
3725
|
+
if (effective) {
|
|
3726
|
+
for (const key of Object.keys(effective)) {
|
|
3727
|
+
const value = effective[key];
|
|
3735
3728
|
if (value == null || value === '' || (Array.isArray(value) && value.length === 0))
|
|
3736
3729
|
continue;
|
|
3737
3730
|
let text = '';
|
|
@@ -3757,8 +3750,15 @@ class TableTemplateComponent {
|
|
|
3757
3750
|
this.chips = chips;
|
|
3758
3751
|
this.filterApplied = this.chips.length > 0;
|
|
3759
3752
|
}
|
|
3760
|
-
|
|
3761
|
-
//
|
|
3753
|
+
handleResetFilterClick() {
|
|
3754
|
+
// Clear chips and reset filtered data when reset is clicked
|
|
3755
|
+
this.pendingFilters = undefined;
|
|
3756
|
+
this.chips = [];
|
|
3757
|
+
this.filterApplied = false;
|
|
3758
|
+
this.filteredRows = [...this.data];
|
|
3759
|
+
this.pageIndex = 0;
|
|
3760
|
+
this.applyPagination();
|
|
3761
|
+
this.onResetFilterClick.emit();
|
|
3762
3762
|
}
|
|
3763
3763
|
onPaginate(e) {
|
|
3764
3764
|
this.pageIndex = e.pageIndex;
|
|
@@ -3824,10 +3824,10 @@ class TableTemplateComponent {
|
|
|
3824
3824
|
}
|
|
3825
3825
|
}
|
|
3826
3826
|
TableTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3827
|
-
TableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableTemplateComponent, selector: "cqa-table-template", inputs: { searchPlaceholder: "searchPlaceholder", searchValue: "searchValue", showClear: "showClear", showSearchBar: "showSearchBar", filterConfig: "filterConfig", showFilterPanel: "showFilterPanel", showFilterButton: "showFilterButton", otherButtonLabel: "otherButtonLabel", otherButtonVariant: "otherButtonVariant", showOtherButton: "showOtherButton", showActionButton: "showActionButton", showSettingsButton: "showSettingsButton", showAutoRefreshButton: "showAutoRefreshButton", data: "data", isEmptyState: "isEmptyState", emptyStateConfig: "emptyStateConfig", actions: "actions", chips: "chips", filterApplied: "filterApplied", columns: "columns", selectedAutoRefreshInterval: "selectedAutoRefreshInterval", pageIndex: "pageIndex", pageSize: "pageSize", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading" }, outputs: { onSearchChange: "onSearchChange", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n <cqa-search-bar\n *ngIf=\"showSearchBar\"\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n [showClear]=\"showClear\"\n (valueChange)=\"valueChange($event)\"\n (search)=\"search($event)\"\n (cleared)=\"cleared()\"\n ></cqa-search-bar>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n <cqa-button\n *ngIf=\"showFilterButton\"\n variant=\"grey-solid\"\n icon=\"add\"\n [text]=\"'Filter'\"\n (clicked)=\"toggleFilter()\"\n >\n <span>Filter</span>\n </cqa-button>\n <cqa-column-visibility\n *ngIf=\"showSettingsButton\"\n [columns]=\"visibilityColumns\"\n [columnVisibility]=\"columnVisibility\"\n [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n ></cqa-column-visibility>\n <cqa-button *ngIf=\"showAutoRefreshButton\" variant=\"grey-solid\" icon=\"refresh\"></cqa-button>\n <cqa-button *ngIf=\"showOtherButton\" [variant]=\"otherButtonVariant\" [text]=\"otherButtonLabel\"></cqa-button>\n </div>\n </div>\n\n <cqa-selected-filters \n *ngIf=\"showFilterPanel\"\n [filterApplied]=\"filterApplied\"\n [chips]=\"chips\"\n (removeChip)=\"onRemoveChip($event)\"\n (clearAll)=\"onClearAllChips()\"\n (onClearAll)=\"onClearAll.emit()\"\n >\n </cqa-selected-filters>\n\n <cqa-dynamic-filter\n *ngIf=\"showFilterPanel\"\n [config]=\"filterConfig\"\n [showFilterPanel]=\"showFilterPanel\"\n (filtersChanged)=\"onFiltersChanged($event)\"\n (filtersApplied)=\"onFiltersApplied($event)\"\n (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n (onResetFilterClick)=\"
|
|
3827
|
+
TableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableTemplateComponent, selector: "cqa-table-template", inputs: { searchPlaceholder: "searchPlaceholder", searchValue: "searchValue", showClear: "showClear", showSearchBar: "showSearchBar", filterConfig: "filterConfig", showFilterPanel: "showFilterPanel", showFilterButton: "showFilterButton", otherButtonLabel: "otherButtonLabel", otherButtonVariant: "otherButtonVariant", showOtherButton: "showOtherButton", showActionButton: "showActionButton", showSettingsButton: "showSettingsButton", showAutoRefreshButton: "showAutoRefreshButton", data: "data", isEmptyState: "isEmptyState", emptyStateConfig: "emptyStateConfig", actions: "actions", chips: "chips", filterApplied: "filterApplied", columns: "columns", selectedAutoRefreshInterval: "selectedAutoRefreshInterval", pageIndex: "pageIndex", pageSize: "pageSize", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading" }, outputs: { onSearchChange: "onSearchChange", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n <cqa-search-bar\n *ngIf=\"showSearchBar\"\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n [showClear]=\"showClear\"\n (valueChange)=\"valueChange($event)\"\n (search)=\"search($event)\"\n (cleared)=\"cleared()\"\n ></cqa-search-bar>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n <cqa-button\n *ngIf=\"showFilterButton\"\n variant=\"grey-solid\"\n icon=\"add\"\n [text]=\"'Filter'\"\n (clicked)=\"toggleFilter()\"\n >\n <span>Filter</span>\n </cqa-button>\n <cqa-column-visibility\n *ngIf=\"showSettingsButton\"\n [columns]=\"visibilityColumns\"\n [columnVisibility]=\"columnVisibility\"\n [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n ></cqa-column-visibility>\n <cqa-button *ngIf=\"showAutoRefreshButton\" variant=\"grey-solid\" icon=\"refresh\"></cqa-button>\n <cqa-button *ngIf=\"showOtherButton\" [variant]=\"otherButtonVariant\" [text]=\"otherButtonLabel\"></cqa-button>\n </div>\n </div>\n\n <cqa-selected-filters \n *ngIf=\"showFilterPanel\"\n [filterApplied]=\"filterApplied\"\n [chips]=\"chips\"\n (removeChip)=\"onRemoveChip($event)\"\n (clearAll)=\"onClearAllChips()\"\n (onClearAll)=\"onClearAll.emit()\"\n >\n </cqa-selected-filters>\n\n <cqa-dynamic-filter\n *ngIf=\"showFilterPanel\"\n [config]=\"filterConfig\"\n [showFilterPanel]=\"showFilterPanel\"\n (filtersChanged)=\"onFiltersChanged($event)\"\n (filtersApplied)=\"onFiltersApplied($event)\"\n (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n (onResetFilterClick)=\"handleResetFilterClick()\"\n >\n </cqa-dynamic-filter>\n\n <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative\">\n <ng-container *ngIf=\"!isEmptyState && pagedRows && pagedRows.length > 0; else storyEmptyTpl\">\n <app-dynamic-table\n [columns]=\"computedColumns\"\n [data]=\"pagedRows\"\n [isTableLoading]=\"isTableLoading\"\n [isTableDataLoading]=\"isTableDataLoading\">\n <ng-template #emptyTableTpl>\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n </div>\n </ng-template>\n </app-dynamic-table>\n </ng-container>\n\n <ng-template #storyEmptyTpl>\n <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n <cqa-empty-state\n *ngIf=\"isEmptyState\"\n [title]=\"emptyStateConfig.title\"\n [description]=\"emptyStateConfig.description\"\n [imageUrl]=\"emptyStateConfig.imageUrl\"\n [actions]=\"emptyStateConfig.actions\"\n (actionClick)=\"onEmptyAction($event)\"\n >\n </cqa-empty-state>\n </div>\n </ng-template>\n\n </div>\n\n <cqa-pagination\n [totalElements]=\"filteredRows.length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageItemCount]=\"pagedRows.length\"\n (paginate)=\"onPaginate($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n >\n </cqa-pagination>\n\n <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n <cqa-table-action-toolbar\n [selectedItems]=\"currentSelectedItems\"\n [actions]=\"actions\"\n (actionClick)=\"actionClick($event)\"\n ></cqa-table-action-toolbar>\n </div>\n \n </div>\n</div>\n\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }, { type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: ["isStepGroup", "columns", "columnVisibility", "selectedAutoRefreshInterval"], outputs: ["columnVisibilityChange", "autoRefreshChange"] }, { type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: ["filterApplied", "chips"], outputs: ["removeChip", "clearAll", "onClearAll"] }, { type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: ["config", "model", "showFilterPanel"], outputs: ["filtersApplied", "filtersChanged", "resetAction", "onApplyFilterClick", "onResetFilterClick"] }, { type: DynamicTableComponent, selector: "app-dynamic-table", inputs: ["data", "columns", "emptyState", "gridTemplateColumns", "screenWidth", "enableSelectAll", "enableLocalSort", "isTableLoading", "isTableDataLoading"], outputs: ["sortChange"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: PaginationComponent, selector: "cqa-pagination", inputs: ["totalElements", "totalPages", "pageIndex", "pageSize", "pageItemCount", "pageSizeOptions"], outputs: ["pageIndexChange", "pageSizeChange", "paginate"] }, { type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: ["selectedItems", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
3828
3828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, decorators: [{
|
|
3829
3829
|
type: Component,
|
|
3830
|
-
args: [{ selector: 'cqa-table-template', template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n <cqa-search-bar\n *ngIf=\"showSearchBar\"\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n [showClear]=\"showClear\"\n (valueChange)=\"valueChange($event)\"\n (search)=\"search($event)\"\n (cleared)=\"cleared()\"\n ></cqa-search-bar>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n <cqa-button\n *ngIf=\"showFilterButton\"\n variant=\"grey-solid\"\n icon=\"add\"\n [text]=\"'Filter'\"\n (clicked)=\"toggleFilter()\"\n >\n <span>Filter</span>\n </cqa-button>\n <cqa-column-visibility\n *ngIf=\"showSettingsButton\"\n [columns]=\"visibilityColumns\"\n [columnVisibility]=\"columnVisibility\"\n [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n ></cqa-column-visibility>\n <cqa-button *ngIf=\"showAutoRefreshButton\" variant=\"grey-solid\" icon=\"refresh\"></cqa-button>\n <cqa-button *ngIf=\"showOtherButton\" [variant]=\"otherButtonVariant\" [text]=\"otherButtonLabel\"></cqa-button>\n </div>\n </div>\n\n <cqa-selected-filters \n *ngIf=\"showFilterPanel\"\n [filterApplied]=\"filterApplied\"\n [chips]=\"chips\"\n (removeChip)=\"onRemoveChip($event)\"\n (clearAll)=\"onClearAllChips()\"\n (onClearAll)=\"onClearAll.emit()\"\n >\n </cqa-selected-filters>\n\n <cqa-dynamic-filter\n *ngIf=\"showFilterPanel\"\n [config]=\"filterConfig\"\n [showFilterPanel]=\"showFilterPanel\"\n (filtersChanged)=\"onFiltersChanged($event)\"\n (filtersApplied)=\"onFiltersApplied($event)\"\n (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n (onResetFilterClick)=\"
|
|
3830
|
+
args: [{ selector: 'cqa-table-template', template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n <cqa-search-bar\n *ngIf=\"showSearchBar\"\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n [showClear]=\"showClear\"\n (valueChange)=\"valueChange($event)\"\n (search)=\"search($event)\"\n (cleared)=\"cleared()\"\n ></cqa-search-bar>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n <cqa-button\n *ngIf=\"showFilterButton\"\n variant=\"grey-solid\"\n icon=\"add\"\n [text]=\"'Filter'\"\n (clicked)=\"toggleFilter()\"\n >\n <span>Filter</span>\n </cqa-button>\n <cqa-column-visibility\n *ngIf=\"showSettingsButton\"\n [columns]=\"visibilityColumns\"\n [columnVisibility]=\"columnVisibility\"\n [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n ></cqa-column-visibility>\n <cqa-button *ngIf=\"showAutoRefreshButton\" variant=\"grey-solid\" icon=\"refresh\"></cqa-button>\n <cqa-button *ngIf=\"showOtherButton\" [variant]=\"otherButtonVariant\" [text]=\"otherButtonLabel\"></cqa-button>\n </div>\n </div>\n\n <cqa-selected-filters \n *ngIf=\"showFilterPanel\"\n [filterApplied]=\"filterApplied\"\n [chips]=\"chips\"\n (removeChip)=\"onRemoveChip($event)\"\n (clearAll)=\"onClearAllChips()\"\n (onClearAll)=\"onClearAll.emit()\"\n >\n </cqa-selected-filters>\n\n <cqa-dynamic-filter\n *ngIf=\"showFilterPanel\"\n [config]=\"filterConfig\"\n [showFilterPanel]=\"showFilterPanel\"\n (filtersChanged)=\"onFiltersChanged($event)\"\n (filtersApplied)=\"onFiltersApplied($event)\"\n (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n (onResetFilterClick)=\"handleResetFilterClick()\"\n >\n </cqa-dynamic-filter>\n\n <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative\">\n <ng-container *ngIf=\"!isEmptyState && pagedRows && pagedRows.length > 0; else storyEmptyTpl\">\n <app-dynamic-table\n [columns]=\"computedColumns\"\n [data]=\"pagedRows\"\n [isTableLoading]=\"isTableLoading\"\n [isTableDataLoading]=\"isTableDataLoading\">\n <ng-template #emptyTableTpl>\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n </div>\n </ng-template>\n </app-dynamic-table>\n </ng-container>\n\n <ng-template #storyEmptyTpl>\n <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n <cqa-empty-state\n *ngIf=\"isEmptyState\"\n [title]=\"emptyStateConfig.title\"\n [description]=\"emptyStateConfig.description\"\n [imageUrl]=\"emptyStateConfig.imageUrl\"\n [actions]=\"emptyStateConfig.actions\"\n (actionClick)=\"onEmptyAction($event)\"\n >\n </cqa-empty-state>\n </div>\n </ng-template>\n\n </div>\n\n <cqa-pagination\n [totalElements]=\"filteredRows.length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageItemCount]=\"pagedRows.length\"\n (paginate)=\"onPaginate($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n >\n </cqa-pagination>\n\n <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n <cqa-table-action-toolbar\n [selectedItems]=\"currentSelectedItems\"\n [actions]=\"actions\"\n (actionClick)=\"actionClick($event)\"\n ></cqa-table-action-toolbar>\n </div>\n \n </div>\n</div>\n\n", styles: [] }]
|
|
3831
3831
|
}], propDecorators: { searchPlaceholder: [{
|
|
3832
3832
|
type: Input
|
|
3833
3833
|
}], searchValue: [{
|