@cqa-lib/cqa-ui 1.0.30 → 1.0.32

package/fesm2020/cqa-lib-cqa-ui.mjs

@@ -2650,12 +2650,45 @@ class FailedTestCasesCardComponent {
     onCardClick() {
         this.cardClick.emit();
     }
+    onCopyTitle(event) {
+        event.stopPropagation(); // Prevent card click from firing
+        if (navigator.clipboard && this.title) {
+            navigator.clipboard.writeText(this.title).catch((err) => {
+                console.error('Failed to copy title:', err);
+                // Fallback for older browsers
+                this.fallbackCopyToClipboard(this.title);
+            });
+        }
+        else {
+            // Fallback for browsers without clipboard API
+            this.fallbackCopyToClipboard(this.title);
+        }
+    }
+    fallbackCopyToClipboard(text) {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        textArea.style.position = 'fixed';
+        textArea.style.left = '-999999px';
+        textArea.style.top = '-999999px';
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        try {
+            document.execCommand('copy');
+        }
+        catch (err) {
+            console.error('Fallback copy failed:', err);
+        }
+        finally {
+            document.body.removeChild(textArea);
+        }
+    }
 }
 FailedTestCasesCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedTestCasesCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FailedTestCasesCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedTestCasesCardComponent, selector: "cqa-failed-test-cases-card", inputs: { title: "title", failures: "failures", failuresLabel: "failuresLabel", pillClass: "pillClass", rootCause: "rootCause", rootCauseLabel: "rootCauseLabel", showRootCause: "showRootCause", lastFailed: "lastFailed", lastFailedLabel: "lastFailedLabel", cardClass: "cardClass", leftAccentClass: "leftAccentClass", tags: "tags" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-bg-[#FEF2F240] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-border-l-[#EF4444] cqa-rounded-[10px] cqa-p-[10px] cqa-pl-[20px] cqa-cursor-pointer cqa-transition-shadow cqa-duration-200 hover:cqa-shadow-md\"\n    [ngClass]=\"[leftAccentClass, cardClass]\"\n    (click)=\"onCardClick()\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\">\n        <!-- Title -->\n        <h3 class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-text-[#1A1A1A]\">{{ title }}</h3>\n\n        <!-- Failures pill -->\n        <span class=\"cqa-px-[11px] cqa-py-[3px] cqa-rounded-full cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-tracking-[0.3px]\"\n          [ngClass]=\"pillClass\">\n          {{ failures | number }} {{ failuresLabel }}\n        </span>\n      </div>\n\n      <!-- Tags -->\n      <div *ngIf=\"tags?.length\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <span\n          *ngFor=\"let tag of tags\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-border-solid cqa-rounded-full cqa-bg-white cqa-border cqa-border-[#E5E7EB] cqa-text-[#1F1F24] cqa-text-[11px] cqa-leading-[14px] cqa-font-semibold cqa-px-[10px] cqa-py-[4px]\">\n          {{ tag }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-mt-2\">\n      <!-- Root cause -->\n      <div *ngIf=\"showRootCause\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#F15F5F] cqa-flex-1 cqa-min-w-0 cqa-mr-2 cqa-truncate\">\n        <span class=\"cqa-font-semibold\">{{ rootCauseLabel }}: </span>{{ rootCauseDisplay }}\n      </div>\n\n      <!-- Timestamp -->\n      <div *ngIf=\"lastFailed\"\n        class=\"cqa-py-[3px] cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-dialog-muted\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\n      </div>\n    </div>\n  </div>\n</div>", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FailedTestCasesCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedTestCasesCardComponent, selector: "cqa-failed-test-cases-card", inputs: { title: "title", failures: "failures", failuresLabel: "failuresLabel", pillClass: "pillClass", rootCause: "rootCause", rootCauseLabel: "rootCauseLabel", showRootCause: "showRootCause", lastFailed: "lastFailed", lastFailedLabel: "lastFailedLabel", cardClass: "cardClass", leftAccentClass: "leftAccentClass", tags: "tags" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-bg-[#FEF2F240] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-border-l-[#EF4444] cqa-rounded-[10px] cqa-p-[10px] cqa-pl-[20px] cqa-cursor-pointer cqa-transition-shadow cqa-duration-200 hover:cqa-shadow-md\"\n    [ngClass]=\"[leftAccentClass, cardClass]\"\n    (click)=\"onCardClick()\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\">\n        <!-- Title with Copy Button -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n          <h3 class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-text-[#1A1A1A] cqa-truncate\">{{ title }}</h3>\n          <button\n            type=\"button\"\n            class=\"cqa-inline-flex cqa-cursor-pointer cqa-outline-none cqa-bg-transparent cqa-border-none cqa-p-1 cqa-items-center cqa-justify-center cqa-min-w-[20px] cqa-min-h-[20px] cqa-flex-shrink-0 cqa-text-[#6B7280] hover:cqa-text-[#1A1A1A] cqa-transition-colors\"\n            (click)=\"onCopyTitle($event)\"\n            [attr.aria-label]=\"'Copy title'\"\n            title=\"Copy title\"\n          >\n            <mat-icon class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\">content_copy</mat-icon>\n          </button>\n        </div>\n\n        <!-- Failures pill -->\n        <span class=\"cqa-px-[11px] cqa-py-[3px] cqa-rounded-full cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-tracking-[0.3px]\"\n          [ngClass]=\"pillClass\">\n          {{ failures | number }} {{ failuresLabel }}\n        </span>\n      </div>\n\n      <!-- Tags -->\n      <div *ngIf=\"tags?.length\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <span\n          *ngFor=\"let tag of tags\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-border-solid cqa-rounded-full cqa-bg-white cqa-border cqa-border-[#E5E7EB] cqa-text-[#1F1F24] cqa-text-[11px] cqa-leading-[14px] cqa-font-semibold cqa-px-[10px] cqa-py-[4px]\">\n          {{ tag }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-mt-2\">\n      <!-- Root cause -->\n      <div *ngIf=\"showRootCause\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#F15F5F] cqa-flex-1 cqa-min-w-0 cqa-mr-2 cqa-truncate\">\n        <span class=\"cqa-font-semibold\">{{ rootCauseLabel }}: </span>{{ rootCauseDisplay }}\n      </div>\n\n      <!-- Timestamp -->\n      <div *ngIf=\"lastFailed\"\n        class=\"cqa-py-[3px] cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-dialog-muted\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedTestCasesCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-failed-test-cases-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-bg-[#FEF2F240] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-border-l-[#EF4444] cqa-rounded-[10px] cqa-p-[10px] cqa-pl-[20px] cqa-cursor-pointer cqa-transition-shadow cqa-duration-200 hover:cqa-shadow-md\"\n    [ngClass]=\"[leftAccentClass, cardClass]\"\n    (click)=\"onCardClick()\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\">\n        <!-- Title -->\n        <h3 class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-text-[#1A1A1A]\">{{ title }}</h3>\n\n        <!-- Failures pill -->\n        <span class=\"cqa-px-[11px] cqa-py-[3px] cqa-rounded-full cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-tracking-[0.3px]\"\n          [ngClass]=\"pillClass\">\n          {{ failures | number }} {{ failuresLabel }}\n        </span>\n      </div>\n\n      <!-- Tags -->\n      <div *ngIf=\"tags?.length\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <span\n          *ngFor=\"let tag of tags\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-border-solid cqa-rounded-full cqa-bg-white cqa-border cqa-border-[#E5E7EB] cqa-text-[#1F1F24] cqa-text-[11px] cqa-leading-[14px] cqa-font-semibold cqa-px-[10px] cqa-py-[4px]\">\n          {{ tag }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-mt-2\">\n      <!-- Root cause -->\n      <div *ngIf=\"showRootCause\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#F15F5F] cqa-flex-1 cqa-min-w-0 cqa-mr-2 cqa-truncate\">\n        <span class=\"cqa-font-semibold\">{{ rootCauseLabel }}: </span>{{ rootCauseDisplay }}\n      </div>\n\n      <!-- Timestamp -->\n      <div *ngIf=\"lastFailed\"\n        class=\"cqa-py-[3px] cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-dialog-muted\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-failed-test-cases-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-bg-[#FEF2F240] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-border-l-[#EF4444] cqa-rounded-[10px] cqa-p-[10px] cqa-pl-[20px] cqa-cursor-pointer cqa-transition-shadow cqa-duration-200 hover:cqa-shadow-md\"\n    [ngClass]=\"[leftAccentClass, cardClass]\"\n    (click)=\"onCardClick()\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\">\n        <!-- Title with Copy Button -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n          <h3 class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-text-[#1A1A1A] cqa-truncate\">{{ title }}</h3>\n          <button\n            type=\"button\"\n            class=\"cqa-inline-flex cqa-cursor-pointer cqa-outline-none cqa-bg-transparent cqa-border-none cqa-p-1 cqa-items-center cqa-justify-center cqa-min-w-[20px] cqa-min-h-[20px] cqa-flex-shrink-0 cqa-text-[#6B7280] hover:cqa-text-[#1A1A1A] cqa-transition-colors\"\n            (click)=\"onCopyTitle($event)\"\n            [attr.aria-label]=\"'Copy title'\"\n            title=\"Copy title\"\n          >\n            <mat-icon class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\">content_copy</mat-icon>\n          </button>\n        </div>\n\n        <!-- Failures pill -->\n        <span class=\"cqa-px-[11px] cqa-py-[3px] cqa-rounded-full cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-tracking-[0.3px]\"\n          [ngClass]=\"pillClass\">\n          {{ failures | number }} {{ failuresLabel }}\n        </span>\n      </div>\n\n      <!-- Tags -->\n      <div *ngIf=\"tags?.length\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <span\n          *ngFor=\"let tag of tags\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-border-solid cqa-rounded-full cqa-bg-white cqa-border cqa-border-[#E5E7EB] cqa-text-[#1F1F24] cqa-text-[11px] cqa-leading-[14px] cqa-font-semibold cqa-px-[10px] cqa-py-[4px]\">\n          {{ tag }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-mt-2\">\n      <!-- Root cause -->\n      <div *ngIf=\"showRootCause\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#F15F5F] cqa-flex-1 cqa-min-w-0 cqa-mr-2 cqa-truncate\">\n        <span class=\"cqa-font-semibold\">{{ rootCauseLabel }}: </span>{{ rootCauseDisplay }}\n      </div>\n\n      <!-- Timestamp -->\n      <div *ngIf=\"lastFailed\"\n        class=\"cqa-py-[3px] cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-dialog-muted\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], propDecorators: { title: [{
                 type: Input
             }], failures: [{
@@ -2688,20 +2721,34 @@ class SelectedFiltersComponent {
     constructor() {
         this.filterApplied = false;
         this.chips = [];
+        /** Optional defaults that cannot be removed by the user */
+        this.defaultChips = [];
+        /** Allows consumers to override styling for default chips */
+        this.defaultChipClass = 'cqa-border-[#CBD5F5] cqa-bg-[#F4F6FE]';
         this.removeChip = new EventEmitter();
         this.clearAll = new EventEmitter();
         this.onClearAll = new EventEmitter();
     }
+    get hasSelectedChips() {
+        return Array.isArray(this.chips) && this.chips.length > 0;
+    }
+    get hasAnyChips() {
+        return this.hasSelectedChips || (Array.isArray(this.defaultChips) && this.defaultChips.length > 0);
+    }
 }
 SelectedFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectedFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectedFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: { filterApplied: "filterApplied", chips: "chips" }, outputs: { removeChip: "removeChip", clearAll: "clearAll", onClearAll: "onClearAll" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-wrap cqa-justify-end cqa-gap-2 cqa-mb-3\"\n    *ngIf=\"filterApplied && (chips?.length || 0)\">\n    <div\n      class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-rounded-full cqa-border cqa-border-success-100 cqa-bg-primary-surface\"\n      *ngFor=\"let chip of chips\" >\n      <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-primary\">{{ chip.label || chip.key\n        }}:</span>\n      <span class=\"cqa-text-[12px] cqa-leading-[16px]\">{{ chip.text }}</span>\n      <button type=\"button\"\n        class=\"cqa-ml-1 cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-border cqa-border-transparent hover:cqa-bg-[#EEF2FF]\"\n        (click)=\"removeChip.emit(chip)\" aria-label=\"Remove filter\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M8.625 2.875L3.375 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M3.375 2.875L8.625 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n\n    <button type=\"button\" class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-grey-300 hover:cqa-underline\"\n      (click)=\"clearAll.emit(); onClearAll.emit()\">\n      Clear All\n    </button>\n  </div>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SelectedFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: { filterApplied: "filterApplied", chips: "chips", defaultChips: "defaultChips", defaultChipClass: "defaultChipClass" }, outputs: { removeChip: "removeChip", clearAll: "clearAll", onClearAll: "onClearAll" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <!-- Hidden element to ensure Tailwind detects default chip classes -->\n  <div class=\"cqa-border-[#CBD5F5] cqa-bg-[#F4F6FE] cqa-hidden\"></div>\n  <div class=\"cqa-w-full cqa-flex cqa-flex-wrap cqa-justify-end cqa-gap-2 cqa-mb-3\"\n    *ngIf=\"filterApplied && hasAnyChips\">\n    <!-- Default (non-removable) chips -->\n    <div\n      class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-rounded-full cqa-border cqa-text-[#4B5563] cqa-border-[#CBD5F5] cqa-bg-[#F4F6FE]\"\n      [ngClass]=\"defaultChipClass\"\n      *ngFor=\"let chip of defaultChips\">\n      <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium\">{{ chip.label || chip.key }}:</span>\n      <span class=\"cqa-text-[12px] cqa-leading-[16px]\">{{ chip.text }}</span>\n    </div>\n\n    <!-- User-selected chips -->\n    <div\n      class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-rounded-full cqa-border cqa-border-success-100 cqa-bg-primary-surface\"\n      *ngFor=\"let chip of chips\">\n      <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-primary\">{{ chip.label || chip.key\n        }}:</span>\n      <span class=\"cqa-text-[12px] cqa-leading-[16px]\">{{ chip.text }}</span>\n      <button type=\"button\"\n        class=\"cqa-ml-1 cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-border cqa-border-transparent hover:cqa-bg-[#EEF2FF]\"\n        (click)=\"removeChip.emit(chip)\" aria-label=\"Remove filter\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M8.625 2.875L3.375 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M3.375 2.875L8.625 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n\n    <button type=\"button\" class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-grey-300 hover:cqa-underline\"\n      *ngIf=\"hasSelectedChips\"\n      (click)=\"clearAll.emit(); onClearAll.emit()\">\n      Clear All\n    </button>\n  </div>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectedFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-selected-filters', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-wrap cqa-justify-end cqa-gap-2 cqa-mb-3\"\n    *ngIf=\"filterApplied && (chips?.length || 0)\">\n    <div\n      class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-rounded-full cqa-border cqa-border-success-100 cqa-bg-primary-surface\"\n      *ngFor=\"let chip of chips\" >\n      <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-primary\">{{ chip.label || chip.key\n        }}:</span>\n      <span class=\"cqa-text-[12px] cqa-leading-[16px]\">{{ chip.text }}</span>\n      <button type=\"button\"\n        class=\"cqa-ml-1 cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-border cqa-border-transparent hover:cqa-bg-[#EEF2FF]\"\n        (click)=\"removeChip.emit(chip)\" aria-label=\"Remove filter\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M8.625 2.875L3.375 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M3.375 2.875L8.625 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n\n    <button type=\"button\" class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-grey-300 hover:cqa-underline\"\n      (click)=\"clearAll.emit(); onClearAll.emit()\">\n      Clear All\n    </button>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-selected-filters', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <!-- Hidden element to ensure Tailwind detects default chip classes -->\n  <div class=\"cqa-border-[#CBD5F5] cqa-bg-[#F4F6FE] cqa-hidden\"></div>\n  <div class=\"cqa-w-full cqa-flex cqa-flex-wrap cqa-justify-end cqa-gap-2 cqa-mb-3\"\n    *ngIf=\"filterApplied && hasAnyChips\">\n    <!-- Default (non-removable) chips -->\n    <div\n      class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-rounded-full cqa-border cqa-text-[#4B5563] cqa-border-[#CBD5F5] cqa-bg-[#F4F6FE]\"\n      [ngClass]=\"defaultChipClass\"\n      *ngFor=\"let chip of defaultChips\">\n      <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium\">{{ chip.label || chip.key }}:</span>\n      <span class=\"cqa-text-[12px] cqa-leading-[16px]\">{{ chip.text }}</span>\n    </div>\n\n    <!-- User-selected chips -->\n    <div\n      class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-rounded-full cqa-border cqa-border-success-100 cqa-bg-primary-surface\"\n      *ngFor=\"let chip of chips\">\n      <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-primary\">{{ chip.label || chip.key\n        }}:</span>\n      <span class=\"cqa-text-[12px] cqa-leading-[16px]\">{{ chip.text }}</span>\n      <button type=\"button\"\n        class=\"cqa-ml-1 cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-border cqa-border-transparent hover:cqa-bg-[#EEF2FF]\"\n        (click)=\"removeChip.emit(chip)\" aria-label=\"Remove filter\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M8.625 2.875L3.375 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M3.375 2.875L8.625 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n\n    <button type=\"button\" class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-grey-300 hover:cqa-underline\"\n      *ngIf=\"hasSelectedChips\"\n      (click)=\"clearAll.emit(); onClearAll.emit()\">\n      Clear All\n    </button>\n  </div>\n</div>", styles: [] }]
         }], propDecorators: { filterApplied: [{
                 type: Input
             }], chips: [{
                 type: Input
+            }], defaultChips: [{
+                type: Input
+            }], defaultChipClass: [{
+                type: Input
             }], removeChip: [{
                 type: Output
             }], clearAll: [{
@@ -3900,7 +3947,7 @@ class TableTemplateComponent {
     }
 }
 TableTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick" }, 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\" (clicked)=\"handleRefreshClick()\"></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", "buttonLayout"], 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"] }] });
+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", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick" }, 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\" (clicked)=\"handleRefreshClick()\"></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", "defaultChips", "defaultChipClass"], outputs: ["removeChip", "clearAll", "onClearAll"] }, { type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: ["config", "model", "showFilterPanel", "buttonLayout"], 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, decorators: [{
             type: Component,
             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\" (clicked)=\"handleRefreshClick()\"></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: [] }]