@brickclay-org/ui 0.1.78 → 0.1.80

package/fesm2022/brickclay-org-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, forwardRef, HostListener, ViewChild, Input, Output, Injectable, NgModule, ViewEncapsulation, Optional, Self, Directive, ChangeDetectionStrategy, input, model, output, signal, computed, effect, inject, ElementRef, ViewChildren, InjectionToken, createComponent, NgZone, ContentChild } from '@angular/core';
+import { Component, EventEmitter, Output, Input, forwardRef, HostListener, ViewChild, Injectable, NgModule, ViewEncapsulation, Optional, Self, Directive, ChangeDetectionStrategy, input, model, output, signal, computed, effect, inject, ElementRef, ViewChildren, InjectionToken, createComponent, NgZone, ContentChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -42,6 +42,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   ` }]
         }] });
 
+/**
+ * A simple breadcrumb trail: an optional home icon, then `label`s separated by
+ * chevrons. Segments with a `url` render as buttons and emit `itemClick`;
+ * navigation itself is left to the consumer (same split as `bk-menu`), so this
+ * stays usable with any router or none.
+ */
+class BkBreadcrumb {
+    items = [];
+    /** Payload for the leading home icon; omit to hide it. */
+    homeUrl = '/';
+    itemClick = new EventEmitter();
+    onHomeClick() {
+        if (this.homeUrl == null)
+            return;
+        this.itemClick.emit({ label: 'Home', url: this.homeUrl });
+    }
+    onItemClick(item) {
+        if (!item.url)
+            return;
+        this.itemClick.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkBreadcrumb, isStandalone: true, selector: "bk-breadcrumb", inputs: { items: "items", homeUrl: "homeUrl" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<nav class=\"bk-breadcrumb\" aria-label=\"Breadcrumb\">\r\n  @if (homeUrl != null) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"bk-breadcrumb__home\"\r\n      aria-label=\"Home\"\r\n      (click)=\"onHomeClick()\">\r\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" class=\"bk-breadcrumb__icon\" aria-hidden=\"true\">\r\n        <path\r\n          d=\"M6.01331 1.89333L2.41998 4.69333C1.81998 5.16 1.33331 6.15333 1.33331 6.90666V11.8467C1.33331 13.3933 2.59331 14.66 4.13998 14.66H11.86C13.4066 14.66 14.6666 13.3933 14.6666 11.8533V7C14.6666 6.19333 14.1266 5.16 13.4666 4.7L9.34665 1.81333C8.41331 1.16 6.91331 1.19333 6.01331 1.89333Z\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.25\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\" />\r\n        <path\r\n          d=\"M7.99998 11.9933V9.99335\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.25\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </button>\r\n  }\r\n\r\n  @for (item of items; track $index) {\r\n    <svg class=\"bk-breadcrumb__chevron\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M6 12L10 8L6 4\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.25\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n    </svg>\r\n    @if (item.url) {\r\n      <button type=\"button\" class=\"bk-breadcrumb__link\" (click)=\"onItemClick(item)\">{{ item.label }}</button>\r\n    } @else {\r\n      <span class=\"bk-breadcrumb__current\">{{ item.label }}</span>\r\n    }\r\n  }\r\n</nav>\r\n", styles: [".bk-breadcrumb{@apply flex min-w-0 flex-wrap items-center gap-1.5 text-xs font-medium text-[#6B7080];}.bk-breadcrumb__home{@apply shrink-0 inline-flex items-center text-[#6B7080] hover:text-[#15191E] transition-colors cursor-pointer;}.bk-breadcrumb__icon{@apply size-4;}.bk-breadcrumb__chevron{@apply size-4 shrink-0 text-[#C4CADA];}.bk-breadcrumb__link{@apply text-[#6B7080] hover:text-[#15191E] hover:underline cursor-pointer;}.bk-breadcrumb__current{@apply text-[#15191E] font-medium truncate;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkBreadcrumb, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-breadcrumb', standalone: true, imports: [CommonModule], template: "<nav class=\"bk-breadcrumb\" aria-label=\"Breadcrumb\">\r\n  @if (homeUrl != null) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"bk-breadcrumb__home\"\r\n      aria-label=\"Home\"\r\n      (click)=\"onHomeClick()\">\r\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" class=\"bk-breadcrumb__icon\" aria-hidden=\"true\">\r\n        <path\r\n          d=\"M6.01331 1.89333L2.41998 4.69333C1.81998 5.16 1.33331 6.15333 1.33331 6.90666V11.8467C1.33331 13.3933 2.59331 14.66 4.13998 14.66H11.86C13.4066 14.66 14.6666 13.3933 14.6666 11.8533V7C14.6666 6.19333 14.1266 5.16 13.4666 4.7L9.34665 1.81333C8.41331 1.16 6.91331 1.19333 6.01331 1.89333Z\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.25\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\" />\r\n        <path\r\n          d=\"M7.99998 11.9933V9.99335\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.25\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </button>\r\n  }\r\n\r\n  @for (item of items; track $index) {\r\n    <svg class=\"bk-breadcrumb__chevron\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M6 12L10 8L6 4\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.25\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n    </svg>\r\n    @if (item.url) {\r\n      <button type=\"button\" class=\"bk-breadcrumb__link\" (click)=\"onItemClick(item)\">{{ item.label }}</button>\r\n    } @else {\r\n      <span class=\"bk-breadcrumb__current\">{{ item.label }}</span>\r\n    }\r\n  }\r\n</nav>\r\n", styles: [".bk-breadcrumb{@apply flex min-w-0 flex-wrap items-center gap-1.5 text-xs font-medium text-[#6B7080];}.bk-breadcrumb__home{@apply shrink-0 inline-flex items-center text-[#6B7080] hover:text-[#15191E] transition-colors cursor-pointer;}.bk-breadcrumb__icon{@apply size-4;}.bk-breadcrumb__chevron{@apply size-4 shrink-0 text-[#C4CADA];}.bk-breadcrumb__link{@apply text-[#6B7080] hover:text-[#15191E] hover:underline cursor-pointer;}.bk-breadcrumb__current{@apply text-[#15191E] font-medium truncate;}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], homeUrl: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }] } });
+
 class BkTimePicker {
     renderer;
     required = false;
@@ -3796,26 +3831,45 @@ class BkBadge {
     dot = 'none';
     removable = false;
     customClass = '';
+    /** Overrides `color`/`variant` with exact CSS colors — any valid CSS color value. */
+    customBg;
+    customBorder;
+    customText;
     clicked = new EventEmitter();
+    get hasCustomColor() {
+        return !!(this.customBg || this.customBorder || this.customText);
+    }
     get containerClasses() {
         // 1. Size Class
         const sizeClass = `badge-${this.size}`;
-        // 2. Color/Variant Class (Dynamic Generation)
-        const styleClass = `${this.color}-${this.variant}`;
+        // 2. Color/Variant Class (Dynamic Generation) — skipped when a custom color is supplied
+        const styleClass = this.hasCustomColor ? '' : `${this.color}-${this.variant}`;
         // 3. customClasses
         const customClass = `${this.customClass}`;
         return `badge ${sizeClass} ${styleClass} ${customClass}`;
     }
+    get customStyle() {
+        if (!this.hasCustomColor)
+            return {};
+        const style = {};
+        if (this.customBg)
+            style['background-color'] = this.customBg;
+        if (this.customBorder)
+            style['border-color'] = this.customBorder;
+        if (this.customText)
+            style['color'] = this.customText;
+        return style;
+    }
     onRemove(e) {
         e.stopPropagation();
         this.clicked.emit(this.label);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkBadge, isStandalone: true, selector: "bk-badge", inputs: { label: "label", variant: "variant", color: "color", size: "size", dot: "dot", removable: "removable", customClass: "customClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span [className]=\"containerClasses\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"badge-close\"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".badge{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-[4px];}.badge-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.badge-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.badge-md{@apply px-2 py-0.5 text-sm;}.badge-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.badge-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.badge-xsm .badge-close,.badge-sm .badge-close{@apply w-3 h-3;}.badge-md .badge-close,.badge-lg .badge-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkBadge, isStandalone: true, selector: "bk-badge", inputs: { label: "label", variant: "variant", color: "color", size: "size", dot: "dot", removable: "removable", customClass: "customClass", customBg: "customBg", customBorder: "customBorder", customText: "customText" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span [className]=\"containerClasses\" [ngStyle]=\"customStyle\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"badge-close\"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".badge{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-[4px];}.badge-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.badge-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.badge-md{@apply px-2 py-0.5 text-sm;}.badge-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.badge-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.badge-xsm .badge-close,.badge-sm .badge-close{@apply w-3 h-3;}.badge-md .badge-close,.badge-lg .badge-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Orange-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Warning-Solid{@apply bg-[#FACC15] border-[#FACC15] text-[#713F12];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Orange-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Warning-Light{@apply bg-[#FEFCE8] border-transparent text-[#A16207];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Orange-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Warning-Outline{@apply bg-[#FEFCE8] border-[#FACC15] text-[#A16207];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Orange-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Warning-Transparent{@apply bg-transparent border-[#FACC15] text-[#A16207];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkBadge, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-badge', standalone: true, imports: [CommonModule], template: "<span [className]=\"containerClasses\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"badge-close\"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".badge{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-[4px];}.badge-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.badge-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.badge-md{@apply px-2 py-0.5 text-sm;}.badge-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.badge-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.badge-xsm .badge-close,.badge-sm .badge-close{@apply w-3 h-3;}.badge-md .badge-close,.badge-lg .badge-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"] }]
+            args: [{ selector: 'bk-badge', standalone: true, imports: [CommonModule], template: "<span [className]=\"containerClasses\" [ngStyle]=\"customStyle\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"badge-close\"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".badge{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-[4px];}.badge-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.badge-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.badge-md{@apply px-2 py-0.5 text-sm;}.badge-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.badge-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.badge-xsm .badge-close,.badge-sm .badge-close{@apply w-3 h-3;}.badge-md .badge-close,.badge-lg .badge-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Orange-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Warning-Solid{@apply bg-[#FACC15] border-[#FACC15] text-[#713F12];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Orange-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Warning-Light{@apply bg-[#FEFCE8] border-transparent text-[#A16207];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Orange-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Warning-Outline{@apply bg-[#FEFCE8] border-[#FACC15] text-[#A16207];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Orange-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Warning-Transparent{@apply bg-transparent border-[#FACC15] text-[#A16207];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], variant: [{
@@ -3830,6 +3884,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], customClass: [{
                 type: Input
+            }], customBg: [{
+                type: Input
+            }], customBorder: [{
+                type: Input
+            }], customText: [{
+                type: Input
             }], clicked: [{
                 type: Output
             }] } });
@@ -3890,11 +3950,11 @@ class BkButton {
         return `btn ${variantClass} ${this.size} ${this.buttonClass}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkButton, isStandalone: true, selector: "bk-button", inputs: { variant: "variant", size: "size", shadow: "shadow", label: "label", leftIcon: "leftIcon", rightIcon: "rightIcon", iconAlt: "iconAlt", type: "type", loading: "loading", disabled: "disabled", buttonClass: "buttonClass", textClass: "textClass", spinnerClass: "spinnerClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n  [attr.type]=\"type\"\r\n  [disabled]=\"disabled || loading\"\r\n  (click)=\"onClick($event)\"\r\n  class=\"{{buttonClasses}}\"\r\n  [ngClass]=\"{ 'btn-shadow': shadow }\"\r\n>\r\n  @if (leftIcon) {\r\n    <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n      @if (label) {\r\n    <span [class]=\"textClass\">\r\n        {{ label }}\r\n    </span>\r\n      }\r\n    @if (loading) {\r\n      <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n    }\r\n\r\n\r\n  @if (rightIcon) {\r\n    <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded cursor-pointer;transition:none}.btn:hover,.btn:focus-visible,.btn:active{@apply transition-colors duration-200;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white !border-black focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] active:!border-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424] disabled:!border-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] border-[#D6D7DC] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.btn.xsm{@apply px-3 py-2 text-xs leading-[18px];}.btn.sm{@apply px-[14px] py-2 text-sm;}.btn.md{@apply px-4 py-2.5 text-sm;}.btn.lg{@apply px-[18px] py-2.5 text-base;}.btn.xl{@apply px-5 py-3 text-base;}.btn.xxl{@apply px-7 py-4 text-lg leading-[26px];}.btn.xxsm .icon{@apply size-[11px];}.btn.xsm .icon{@apply size-[15px];}.btn.sm .icon,.btn.md .icon,.btn.lg .icon,.btn.xl .icon{@apply size-4;}.btn.xxl .icon{@apply size-5;}.btn.spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.btn.xxsm .spinner{@apply size-[14px] border-[1.5px];}.btn.xsm .spinner,.btn.sm .spinner,.btn.md .spinner,.btn.lg .spinner,.btn.xl .spinner{@apply size-[15px] border-[1.5px];}.btn.xxl .spinner{@apply size-[24px] border-[2.34px];}.btn-shadow{box-shadow:0 1px 2px #1018280d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkButton, isStandalone: true, selector: "bk-button", inputs: { variant: "variant", size: "size", shadow: "shadow", label: "label", leftIcon: "leftIcon", rightIcon: "rightIcon", iconAlt: "iconAlt", type: "type", loading: "loading", disabled: "disabled", buttonClass: "buttonClass", textClass: "textClass", spinnerClass: "spinnerClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n  [attr.type]=\"type\"\r\n  [disabled]=\"disabled || loading\"\r\n  (click)=\"onClick($event)\"\r\n  class=\"{{buttonClasses}}\"\r\n  [ngClass]=\"{ 'btn-shadow': shadow }\"\r\n>\r\n  @if (leftIcon) {\r\n    <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n      @if (label) {\r\n    <span [class]=\"textClass\">\r\n        {{ label }}\r\n    </span>\r\n      }\r\n    @if (loading) {\r\n      <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n    }\r\n\r\n\r\n  @if (rightIcon) {\r\n    <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded cursor-pointer;transition:none}.btn:hover,.btn:focus-visible,.btn:active{@apply transition-colors duration-200;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white !border-black focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] active:!border-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424] disabled:!border-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] border-[#D6D7DC] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.btn.xsm{@apply px-3 py-2 text-xs leading-[18px];}.btn.sm{@apply px-[14px] py-2 text-sm;}.btn.md{@apply px-4 py-2.5 text-sm;}.btn.lg{@apply px-[18px] py-2.5 text-base;}.btn.xl{@apply px-5 py-3 text-base;}.btn.xxl{@apply px-7 py-4 text-lg leading-[26px];}.btn.xxsm .icon{@apply size-[11px];}.btn.xsm .icon{@apply size-[15px];}.btn.sm .icon,.btn.md .icon,.btn.lg .icon,.btn.xl .icon{@apply size-4;}.btn.xxl .icon{@apply size-5;}.btn .spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.btn.xxsm .spinner{@apply size-[14px] border-[1.5px];}.btn.xsm .spinner,.btn.sm .spinner,.btn.md .spinner,.btn.lg .spinner,.btn.xl .spinner{@apply size-[15px] border-[1.5px];}.btn.xxl .spinner{@apply size-[24px] border-[2.34px];}.btn-shadow{box-shadow:0 1px 2px #1018280d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkButton, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-button', standalone: true, imports: [CommonModule], template: "<button\r\n  [attr.type]=\"type\"\r\n  [disabled]=\"disabled || loading\"\r\n  (click)=\"onClick($event)\"\r\n  class=\"{{buttonClasses}}\"\r\n  [ngClass]=\"{ 'btn-shadow': shadow }\"\r\n>\r\n  @if (leftIcon) {\r\n    <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n      @if (label) {\r\n    <span [class]=\"textClass\">\r\n        {{ label }}\r\n    </span>\r\n      }\r\n    @if (loading) {\r\n      <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n    }\r\n\r\n\r\n  @if (rightIcon) {\r\n    <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded cursor-pointer;transition:none}.btn:hover,.btn:focus-visible,.btn:active{@apply transition-colors duration-200;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white !border-black focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] active:!border-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424] disabled:!border-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] border-[#D6D7DC] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.btn.xsm{@apply px-3 py-2 text-xs leading-[18px];}.btn.sm{@apply px-[14px] py-2 text-sm;}.btn.md{@apply px-4 py-2.5 text-sm;}.btn.lg{@apply px-[18px] py-2.5 text-base;}.btn.xl{@apply px-5 py-3 text-base;}.btn.xxl{@apply px-7 py-4 text-lg leading-[26px];}.btn.xxsm .icon{@apply size-[11px];}.btn.xsm .icon{@apply size-[15px];}.btn.sm .icon,.btn.md .icon,.btn.lg .icon,.btn.xl .icon{@apply size-4;}.btn.xxl .icon{@apply size-5;}.btn.spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.btn.xxsm .spinner{@apply size-[14px] border-[1.5px];}.btn.xsm .spinner,.btn.sm .spinner,.btn.md .spinner,.btn.lg .spinner,.btn.xl .spinner{@apply size-[15px] border-[1.5px];}.btn.xxl .spinner{@apply size-[24px] border-[2.34px];}.btn-shadow{box-shadow:0 1px 2px #1018280d}\n"] }]
+            args: [{ selector: 'bk-button', standalone: true, imports: [CommonModule], template: "<button\r\n  [attr.type]=\"type\"\r\n  [disabled]=\"disabled || loading\"\r\n  (click)=\"onClick($event)\"\r\n  class=\"{{buttonClasses}}\"\r\n  [ngClass]=\"{ 'btn-shadow': shadow }\"\r\n>\r\n  @if (leftIcon) {\r\n    <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n      @if (label) {\r\n    <span [class]=\"textClass\">\r\n        {{ label }}\r\n    </span>\r\n      }\r\n    @if (loading) {\r\n      <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n    }\r\n\r\n\r\n  @if (rightIcon) {\r\n    <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded cursor-pointer;transition:none}.btn:hover,.btn:focus-visible,.btn:active{@apply transition-colors duration-200;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white !border-black focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] active:!border-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424] disabled:!border-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] border-[#D6D7DC] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.btn.xsm{@apply px-3 py-2 text-xs leading-[18px];}.btn.sm{@apply px-[14px] py-2 text-sm;}.btn.md{@apply px-4 py-2.5 text-sm;}.btn.lg{@apply px-[18px] py-2.5 text-base;}.btn.xl{@apply px-5 py-3 text-base;}.btn.xxl{@apply px-7 py-4 text-lg leading-[26px];}.btn.xxsm .icon{@apply size-[11px];}.btn.xsm .icon{@apply size-[15px];}.btn.sm .icon,.btn.md .icon,.btn.lg .icon,.btn.xl .icon{@apply size-4;}.btn.xxl .icon{@apply size-5;}.btn .spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.btn.xxsm .spinner{@apply size-[14px] border-[1.5px];}.btn.xsm .spinner,.btn.sm .spinner,.btn.md .spinner,.btn.lg .spinner,.btn.xl .spinner{@apply size-[15px] border-[1.5px];}.btn.xxl .spinner{@apply size-[24px] border-[2.34px];}.btn-shadow{box-shadow:0 1px 2px #1018280d}\n"] }]
         }], propDecorators: { variant: [{
                 type: Input
             }], size: [{
@@ -4689,6 +4749,8 @@ class BkGrid {
     /** Custom illustration for the empty state. Falls back to a built-in SVG when omitted. */
     noRecordImgUrl;
     noRecordMessage = 'Data may be empty, or try adjusting your filter.';
+    /** Static row class or a function that returns a class per row. Row data may also include `class` via TableRows. */
+    rows;
     change = new EventEmitter();
     /* ================= Outputs ================= */
     actionClick = new EventEmitter();
@@ -4763,6 +4825,19 @@ class BkGrid {
         }
         return '';
     }
+    /* ================= Row Class ================= */
+    getRowClass(row) {
+        if (typeof this.rows === 'function') {
+            return this.rows(row) ?? row.class ?? '';
+        }
+        if (typeof this.rows === 'string') {
+            return this.rows;
+        }
+        return row.class ?? '';
+    }
+    getCellClasses(row, column) {
+        return [column.cellClass, this.getRowClass(row)].filter(Boolean).join(' ');
+    }
     /* ================= Actions ================= */
     getRowActions(row, column) {
         const source = column?.actions ?? this.actions;
@@ -4843,14 +4918,14 @@ class BkGrid {
         });
     }
     get noRecordImagePath() {
-        return this.noRecordImgUrl || '../../../../assets/icons/no-data-found.jpg';
+        return this.noRecordImgUrl || './assets/media/logos/no-data-found.jpg';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkGrid, isStandalone: true, selector: "bk-grid", inputs: { draggable: "draggable", columns: "columns", result: "result", actions: "actions", customClass: "customClass", actionIconClass: "actionIconClass", actionClass: "actionClass", showNoRecords: "showNoRecords", noRecordFoundHeight: "noRecordFoundHeight", noRecordImgUrl: "noRecordImgUrl", noRecordMessage: "noRecordMessage" }, outputs: { change: "change", actionClick: "actionClick", sortChange: "sortChange", dragDropChange: "dragDropChange" }, viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], ngImport: i0, template: "<div #tableScrollContainer cdkScrollable class=\"overflow-y-auto\" [ngClass]=\"customClass\">\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n    <!-- ================= HEADER ================= -->\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns; track col.header; let i = $index) {\r\n          @if (isColumnVisible(col)) {\r\n            <th\r\n              class=\"grid-header sticky top-[-1px]\"\r\n              [class.cursor-pointer]=\"col.sortable\"\r\n              [class.cursor-default]=\"!col.sortable\"\r\n              [class.action-sticky]=\"col.sticky\"\r\n              [class.z-10]=\"col.sticky\"\r\n              class=\"{{ col.headerClass }} {{ col.cellClass }}\"\r\n              (click)=\"sort(col, i)\"\r\n            >\r\n              <!-- [ngClass]=\"col.headerClass\"\r\n              [ngClass]=\"col.cellClass\" -->\r\n              <span\r\n                class=\"flex items-center gap-1\"\r\n                [ngClass]=\"\r\n                  sortColumn === col.field\r\n                    ? sortDirection === 'asc'\r\n                      ? 'grid-asc'\r\n                      : 'grid-desc'\r\n                    : ''\r\n                \"\r\n              >\r\n                {{ col.header }}\r\n                @if (col.sortable) {\r\n                  <span class=\"grid-sort-icon\"></span>\r\n                }\r\n              </span>\r\n            </th>\r\n          }\r\n        }\r\n\r\n        @if (actions.length) {\r\n          <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20 {{actionClass}}\">Action</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\"\r\n    >\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\"\r\n          [ngClass]=\"{ 'cursor-move ': draggable }\"\r\n        >\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span\r\n                    cdkDragHandle\r\n                    class=\"mr-2 text-gray-400\"\r\n                    [ngClass]=\"{ 'cursor-move': draggable }\"\r\n                    >\u2630</span\r\n                  >\r\n                }\r\n                @if (col.checkbox) {\r\n                  <bk-checkbox\r\n                    checkboxClass=\"sm\"\r\n                    [ngModel]=\"getCheckboxValue(row, col)\"\r\n                    (ngModelChange)=\"setCheckboxValue(row, col, $event)\"\r\n                    [disabled]=\"typeof col.checkboxDisabled === 'function' ? col.checkboxDisabled(row) : col.checkboxDisabled || false\"\r\n                    [bkTooltip]=\"typeof col.checkboxTooltip === 'function' ? col.checkboxTooltip(row) : col.checkboxTooltip || ''\"\r\n                    [bkTooltipPosition]=\"col.checkboxTooltipPosition || 'top'\"\r\n                  ></bk-checkbox>\r\n                } @else if (col.badges) {\r\n                  @let badge = getBadge(row, col);\r\n                  @if (badge) {\r\n                    <bk-badge\r\n                      [label]=\"badge.label\"\r\n                      [variant]=\"badge.variant\"\r\n                      [size]=\"badge.size\"\r\n                      [color]=\"badge.color\"\r\n                      [dot]=\"badge.dot\"\r\n                      [customClass]=\"badge.customClass\"\r\n                      [bkTooltip]=\"badge.toolTipLabel || ''\"\r\n                      [bkTooltipPosition]=\"badge.tooltipPosition || 'top'\"\r\n                    ></bk-badge>\r\n                  }\r\n                } @else if (col.icons) {\r\n                  @let iconsList = getIcons(row, col);\r\n                  <div class=\"flex justify-center items-center gap-2\">\r\n                    @for (icon of iconsList; track $index) {\r\n                      @if(icon.url){\r\n                        <img\r\n                        [src]=\"icon.url\"\r\n                        class=\"size-4\"\r\n                        [ngClass]=\"{ 'cursor-pointer': icon.url }\"\r\n                        [bkTooltip]=\"icon.toolTipLabel || []\"\r\n                        [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                } @else if (col.toolTipField) {\r\n                  <span\r\n                    [bkTooltip]=\"getTooltipValue(row, col)\"\r\n                    [bkTooltipPosition]=\"col.toolTipPosition || 'top'\"\r\n                  >\r\n                    {{ getCellValue(row, col) }}\r\n                  </span>\r\n                } @else {\r\n                  {{ getCellValue(row, col) }}\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n\r\n          @if (getRowActions(row).length) {\r\n            <td class=\"grid-cell action-sticky text-center\">\r\n              <div class=\"flex items-center justify-center gap-1.5\">\r\n                @for (action of getRowActions(row); track action.name) {\r\n                  @if (isActionVisible(action, row)) {\r\n                    <!-- <bk-icon-button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [size]=\"\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                      (clicked)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\">\r\n                    </bk-icon-button> -->\r\n                    <button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA] {{actionIconClass}}\"\r\n                      (click)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\"\r\n                    >\r\n                      <img [src]=\"action.icon\" width=\"14\" height=\"14\" alt=\"action-icon\" />\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n      @if (showNoRecords) {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\"\r\n            class=\"text-center py-10 {{ noRecordFoundHeight }}\"\r\n          >\r\n            <div class=\"flex flex-col justify-center items-center w-full h-auto\">\r\n              <img\r\n                [src]=\"noRecordImagePath\"\r\n                class=\"mb-3 w-96\"\r\n                alt=\"No data found\"\r\n              />\r\n\r\n              <span class=\"block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2\"\r\n                >{{ noRecordMessage }}</span\r\n              >\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n", styles: [".grid-header{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap;box-shadow:0 1px #ebedf3;-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}thead tr th:first-child{border-top-left-radius:.75rem}thead tr th:last-child{border-top-right-radius:.75rem}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border-x border-b border-[#EBEDF3];}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: BkBadge, selector: "bk-badge", inputs: ["label", "variant", "color", "size", "dot", "removable", "customClass"], outputs: ["clicked"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkGrid, isStandalone: true, selector: "bk-grid", inputs: { draggable: "draggable", columns: "columns", result: "result", actions: "actions", customClass: "customClass", actionIconClass: "actionIconClass", actionClass: "actionClass", showNoRecords: "showNoRecords", noRecordFoundHeight: "noRecordFoundHeight", noRecordImgUrl: "noRecordImgUrl", noRecordMessage: "noRecordMessage", rows: "rows" }, outputs: { change: "change", actionClick: "actionClick", sortChange: "sortChange", dragDropChange: "dragDropChange" }, viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], ngImport: i0, template: "<div #tableScrollContainer cdkScrollable class=\"overflow-y-auto\" [ngClass]=\"customClass\">\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n    <!-- ================= HEADER ================= -->\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns; track col.header; let i = $index) {\r\n          @if (isColumnVisible(col)) {\r\n            <th\r\n              class=\"grid-header sticky top-[-1px]\"\r\n              [class.cursor-pointer]=\"col.sortable\"\r\n              [class.cursor-default]=\"!col.sortable\"\r\n              [class.action-sticky]=\"col.sticky\"\r\n              [class.z-10]=\"col.sticky\"\r\n              class=\"{{ col.headerClass }} {{ col.cellClass }}\"\r\n              (click)=\"sort(col, i)\"\r\n            >\r\n              <!-- [ngClass]=\"col.headerClass\"\r\n              [ngClass]=\"col.cellClass\" -->\r\n              <span\r\n                class=\"flex items-center gap-1\"\r\n                [ngClass]=\"\r\n                  sortColumn === col.field\r\n                    ? sortDirection === 'asc'\r\n                      ? 'grid-asc'\r\n                      : 'grid-desc'\r\n                    : ''\r\n                \"\r\n              >\r\n                {{ col.header }}\r\n                @if (col.sortable) {\r\n                  <span class=\"grid-sort-icon\"></span>\r\n                }\r\n              </span>\r\n            </th>\r\n          }\r\n        }\r\n\r\n        @if (actions.length) {\r\n          <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20 {{actionClass}}\">Action</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\"\r\n    >\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\"\r\n          [ngClass]=\"{ 'cursor-move ': draggable }\"\r\n        >\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span\r\n                    cdkDragHandle\r\n                    class=\"mr-2 text-gray-400\"\r\n                    [ngClass]=\"{ 'cursor-move': draggable }\"\r\n                    >\u2630</span\r\n                  >\r\n                }\r\n                @if (col.checkbox) {\r\n                  <bk-checkbox\r\n                    checkboxClass=\"sm\"\r\n                    [ngModel]=\"getCheckboxValue(row, col)\"\r\n                    (ngModelChange)=\"setCheckboxValue(row, col, $event)\"\r\n                    [disabled]=\"typeof col.checkboxDisabled === 'function' ? col.checkboxDisabled(row) : col.checkboxDisabled || false\"\r\n                    [bkTooltip]=\"typeof col.checkboxTooltip === 'function' ? col.checkboxTooltip(row) : col.checkboxTooltip || ''\"\r\n                    [bkTooltipPosition]=\"col.checkboxTooltipPosition || 'top'\"\r\n                  ></bk-checkbox>\r\n                } @else if (col.badges) {\r\n                  @let badge = getBadge(row, col);\r\n                  @if (badge) {\r\n                    <bk-badge\r\n                      [label]=\"badge.label\"\r\n                      [variant]=\"badge.variant\"\r\n                      [size]=\"badge.size\"\r\n                      [color]=\"badge.color\"\r\n                      [dot]=\"badge.dot\"\r\n                      [customClass]=\"badge.customClass\"\r\n                      [bkTooltip]=\"badge.toolTipLabel || ''\"\r\n                      [bkTooltipPosition]=\"badge.tooltipPosition || 'top'\"\r\n                    ></bk-badge>\r\n                  }\r\n                } @else if (col.icons) {\r\n                  @let iconsList = getIcons(row, col);\r\n                  <div class=\"flex justify-center items-center gap-2\">\r\n                    @for (icon of iconsList; track $index) {\r\n                      @if(icon.url){\r\n                        <img\r\n                        [src]=\"icon.url\"\r\n                        class=\"size-4\"\r\n                        [ngClass]=\"{ 'cursor-pointer': icon.url }\"\r\n                        [bkTooltip]=\"icon.toolTipLabel || []\"\r\n                        [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                } @else if (col.toolTipField) {\r\n                  <span\r\n                    [bkTooltip]=\"getTooltipValue(row, col)\"\r\n                    [bkTooltipPosition]=\"col.toolTipPosition || 'top'\"\r\n                  >\r\n                    {{ getCellValue(row, col) }}\r\n                  </span>\r\n                } @else {\r\n                  {{ getCellValue(row, col) }}\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n\r\n          @if (getRowActions(row).length) {\r\n            <td class=\"grid-cell action-sticky text-center\">\r\n              <div class=\"flex items-center justify-center gap-1.5\">\r\n                @for (action of getRowActions(row); track action.name) {\r\n                  @if (isActionVisible(action, row)) {\r\n                    <!-- <bk-icon-button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [size]=\"\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                      (clicked)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\">\r\n                    </bk-icon-button> -->\r\n                    <button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA] {{actionIconClass}}\"\r\n                      (click)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\"\r\n                    >\r\n                      <img [src]=\"action.icon\" width=\"14\" height=\"14\" alt=\"action-icon\" />\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n      @if (showNoRecords) {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\"\r\n            class=\"text-center py-10 {{ noRecordFoundHeight }}\"\r\n          >\r\n            <div class=\"flex flex-col justify-center items-center w-full h-auto\">\r\n              <img\r\n                [src]=\"noRecordImagePath\"\r\n                class=\"mb-3 w-96\"\r\n                alt=\"No data found\"\r\n              />\r\n\r\n              <span class=\"block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2\"\r\n                >{{ noRecordMessage }}</span\r\n              >\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap;box-shadow:0 1px #ebedf3;-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}thead tr th:first-child{border-top-left-radius:.75rem}thead tr th:last-child{border-top-right-radius:.75rem}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border-x border-b border-[#EBEDF3];}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: BkBadge, selector: "bk-badge", inputs: ["label", "variant", "color", "size", "dot", "removable", "customClass", "customBg", "customBorder", "customText"], outputs: ["clicked"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkGrid, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-grid', standalone: true, imports: [CommonModule, DragDropModule, ScrollingModule, BkBadge, BKTooltipDirective, BkCheckbox, FormsModule], template: "<div #tableScrollContainer cdkScrollable class=\"overflow-y-auto\" [ngClass]=\"customClass\">\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n    <!-- ================= HEADER ================= -->\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns; track col.header; let i = $index) {\r\n          @if (isColumnVisible(col)) {\r\n            <th\r\n              class=\"grid-header sticky top-[-1px]\"\r\n              [class.cursor-pointer]=\"col.sortable\"\r\n              [class.cursor-default]=\"!col.sortable\"\r\n              [class.action-sticky]=\"col.sticky\"\r\n              [class.z-10]=\"col.sticky\"\r\n              class=\"{{ col.headerClass }} {{ col.cellClass }}\"\r\n              (click)=\"sort(col, i)\"\r\n            >\r\n              <!-- [ngClass]=\"col.headerClass\"\r\n              [ngClass]=\"col.cellClass\" -->\r\n              <span\r\n                class=\"flex items-center gap-1\"\r\n                [ngClass]=\"\r\n                  sortColumn === col.field\r\n                    ? sortDirection === 'asc'\r\n                      ? 'grid-asc'\r\n                      : 'grid-desc'\r\n                    : ''\r\n                \"\r\n              >\r\n                {{ col.header }}\r\n                @if (col.sortable) {\r\n                  <span class=\"grid-sort-icon\"></span>\r\n                }\r\n              </span>\r\n            </th>\r\n          }\r\n        }\r\n\r\n        @if (actions.length) {\r\n          <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20 {{actionClass}}\">Action</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\"\r\n    >\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\"\r\n          [ngClass]=\"{ 'cursor-move ': draggable }\"\r\n        >\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span\r\n                    cdkDragHandle\r\n                    class=\"mr-2 text-gray-400\"\r\n                    [ngClass]=\"{ 'cursor-move': draggable }\"\r\n                    >\u2630</span\r\n                  >\r\n                }\r\n                @if (col.checkbox) {\r\n                  <bk-checkbox\r\n                    checkboxClass=\"sm\"\r\n                    [ngModel]=\"getCheckboxValue(row, col)\"\r\n                    (ngModelChange)=\"setCheckboxValue(row, col, $event)\"\r\n                    [disabled]=\"typeof col.checkboxDisabled === 'function' ? col.checkboxDisabled(row) : col.checkboxDisabled || false\"\r\n                    [bkTooltip]=\"typeof col.checkboxTooltip === 'function' ? col.checkboxTooltip(row) : col.checkboxTooltip || ''\"\r\n                    [bkTooltipPosition]=\"col.checkboxTooltipPosition || 'top'\"\r\n                  ></bk-checkbox>\r\n                } @else if (col.badges) {\r\n                  @let badge = getBadge(row, col);\r\n                  @if (badge) {\r\n                    <bk-badge\r\n                      [label]=\"badge.label\"\r\n                      [variant]=\"badge.variant\"\r\n                      [size]=\"badge.size\"\r\n                      [color]=\"badge.color\"\r\n                      [dot]=\"badge.dot\"\r\n                      [customClass]=\"badge.customClass\"\r\n                      [bkTooltip]=\"badge.toolTipLabel || ''\"\r\n                      [bkTooltipPosition]=\"badge.tooltipPosition || 'top'\"\r\n                    ></bk-badge>\r\n                  }\r\n                } @else if (col.icons) {\r\n                  @let iconsList = getIcons(row, col);\r\n                  <div class=\"flex justify-center items-center gap-2\">\r\n                    @for (icon of iconsList; track $index) {\r\n                      @if(icon.url){\r\n                        <img\r\n                        [src]=\"icon.url\"\r\n                        class=\"size-4\"\r\n                        [ngClass]=\"{ 'cursor-pointer': icon.url }\"\r\n                        [bkTooltip]=\"icon.toolTipLabel || []\"\r\n                        [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                } @else if (col.toolTipField) {\r\n                  <span\r\n                    [bkTooltip]=\"getTooltipValue(row, col)\"\r\n                    [bkTooltipPosition]=\"col.toolTipPosition || 'top'\"\r\n                  >\r\n                    {{ getCellValue(row, col) }}\r\n                  </span>\r\n                } @else {\r\n                  {{ getCellValue(row, col) }}\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n\r\n          @if (getRowActions(row).length) {\r\n            <td class=\"grid-cell action-sticky text-center\">\r\n              <div class=\"flex items-center justify-center gap-1.5\">\r\n                @for (action of getRowActions(row); track action.name) {\r\n                  @if (isActionVisible(action, row)) {\r\n                    <!-- <bk-icon-button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [size]=\"\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                      (clicked)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\">\r\n                    </bk-icon-button> -->\r\n                    <button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA] {{actionIconClass}}\"\r\n                      (click)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\"\r\n                    >\r\n                      <img [src]=\"action.icon\" width=\"14\" height=\"14\" alt=\"action-icon\" />\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n      @if (showNoRecords) {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\"\r\n            class=\"text-center py-10 {{ noRecordFoundHeight }}\"\r\n          >\r\n            <div class=\"flex flex-col justify-center items-center w-full h-auto\">\r\n              <img\r\n                [src]=\"noRecordImagePath\"\r\n                class=\"mb-3 w-96\"\r\n                alt=\"No data found\"\r\n              />\r\n\r\n              <span class=\"block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2\"\r\n                >{{ noRecordMessage }}</span\r\n              >\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n", styles: [".grid-header{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap;box-shadow:0 1px #ebedf3;-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}thead tr th:first-child{border-top-left-radius:.75rem}thead tr th:last-child{border-top-right-radius:.75rem}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border-x border-b border-[#EBEDF3];}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'bk-grid', standalone: true, imports: [CommonModule, DragDropModule, ScrollingModule, BkBadge, BKTooltipDirective, BkCheckbox, FormsModule], template: "<div #tableScrollContainer cdkScrollable class=\"overflow-y-auto\" [ngClass]=\"customClass\">\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n    <!-- ================= HEADER ================= -->\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns; track col.header; let i = $index) {\r\n          @if (isColumnVisible(col)) {\r\n            <th\r\n              class=\"grid-header sticky top-[-1px]\"\r\n              [class.cursor-pointer]=\"col.sortable\"\r\n              [class.cursor-default]=\"!col.sortable\"\r\n              [class.action-sticky]=\"col.sticky\"\r\n              [class.z-10]=\"col.sticky\"\r\n              class=\"{{ col.headerClass }} {{ col.cellClass }}\"\r\n              (click)=\"sort(col, i)\"\r\n            >\r\n              <!-- [ngClass]=\"col.headerClass\"\r\n              [ngClass]=\"col.cellClass\" -->\r\n              <span\r\n                class=\"flex items-center gap-1\"\r\n                [ngClass]=\"\r\n                  sortColumn === col.field\r\n                    ? sortDirection === 'asc'\r\n                      ? 'grid-asc'\r\n                      : 'grid-desc'\r\n                    : ''\r\n                \"\r\n              >\r\n                {{ col.header }}\r\n                @if (col.sortable) {\r\n                  <span class=\"grid-sort-icon\"></span>\r\n                }\r\n              </span>\r\n            </th>\r\n          }\r\n        }\r\n\r\n        @if (actions.length) {\r\n          <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20 {{actionClass}}\">Action</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\"\r\n    >\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\"\r\n          [ngClass]=\"{ 'cursor-move ': draggable }\"\r\n        >\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span\r\n                    cdkDragHandle\r\n                    class=\"mr-2 text-gray-400\"\r\n                    [ngClass]=\"{ 'cursor-move': draggable }\"\r\n                    >\u2630</span\r\n                  >\r\n                }\r\n                @if (col.checkbox) {\r\n                  <bk-checkbox\r\n                    checkboxClass=\"sm\"\r\n                    [ngModel]=\"getCheckboxValue(row, col)\"\r\n                    (ngModelChange)=\"setCheckboxValue(row, col, $event)\"\r\n                    [disabled]=\"typeof col.checkboxDisabled === 'function' ? col.checkboxDisabled(row) : col.checkboxDisabled || false\"\r\n                    [bkTooltip]=\"typeof col.checkboxTooltip === 'function' ? col.checkboxTooltip(row) : col.checkboxTooltip || ''\"\r\n                    [bkTooltipPosition]=\"col.checkboxTooltipPosition || 'top'\"\r\n                  ></bk-checkbox>\r\n                } @else if (col.badges) {\r\n                  @let badge = getBadge(row, col);\r\n                  @if (badge) {\r\n                    <bk-badge\r\n                      [label]=\"badge.label\"\r\n                      [variant]=\"badge.variant\"\r\n                      [size]=\"badge.size\"\r\n                      [color]=\"badge.color\"\r\n                      [dot]=\"badge.dot\"\r\n                      [customClass]=\"badge.customClass\"\r\n                      [bkTooltip]=\"badge.toolTipLabel || ''\"\r\n                      [bkTooltipPosition]=\"badge.tooltipPosition || 'top'\"\r\n                    ></bk-badge>\r\n                  }\r\n                } @else if (col.icons) {\r\n                  @let iconsList = getIcons(row, col);\r\n                  <div class=\"flex justify-center items-center gap-2\">\r\n                    @for (icon of iconsList; track $index) {\r\n                      @if(icon.url){\r\n                        <img\r\n                        [src]=\"icon.url\"\r\n                        class=\"size-4\"\r\n                        [ngClass]=\"{ 'cursor-pointer': icon.url }\"\r\n                        [bkTooltip]=\"icon.toolTipLabel || []\"\r\n                        [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                } @else if (col.toolTipField) {\r\n                  <span\r\n                    [bkTooltip]=\"getTooltipValue(row, col)\"\r\n                    [bkTooltipPosition]=\"col.toolTipPosition || 'top'\"\r\n                  >\r\n                    {{ getCellValue(row, col) }}\r\n                  </span>\r\n                } @else {\r\n                  {{ getCellValue(row, col) }}\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n\r\n          @if (getRowActions(row).length) {\r\n            <td class=\"grid-cell action-sticky text-center\">\r\n              <div class=\"flex items-center justify-center gap-1.5\">\r\n                @for (action of getRowActions(row); track action.name) {\r\n                  @if (isActionVisible(action, row)) {\r\n                    <!-- <bk-icon-button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [size]=\"\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                      (clicked)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\">\r\n                    </bk-icon-button> -->\r\n                    <button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA] {{actionIconClass}}\"\r\n                      (click)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\"\r\n                    >\r\n                      <img [src]=\"action.icon\" width=\"14\" height=\"14\" alt=\"action-icon\" />\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n      @if (showNoRecords) {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\"\r\n            class=\"text-center py-10 {{ noRecordFoundHeight }}\"\r\n          >\r\n            <div class=\"flex flex-col justify-center items-center w-full h-auto\">\r\n              <img\r\n                [src]=\"noRecordImagePath\"\r\n                class=\"mb-3 w-96\"\r\n                alt=\"No data found\"\r\n              />\r\n\r\n              <span class=\"block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2\"\r\n                >{{ noRecordMessage }}</span\r\n              >\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap;box-shadow:0 1px #ebedf3;-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}thead tr th:first-child{border-top-left-radius:.75rem}thead tr th:last-child{border-top-right-radius:.75rem}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border-x border-b border-[#EBEDF3];}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], propDecorators: { draggable: [{
                 type: Input
             }], columns: [{
@@ -4873,6 +4948,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], noRecordMessage: [{
                 type: Input
+            }], rows: [{
+                type: Input
             }], change: [{
                 type: Output
             }], actionClick: [{
@@ -6069,6 +6146,9 @@ class BkInput {
     iconAlt = 'icon';
     showIcon = true;
     phone = false;
+    currency = false;
+    currencyDecimals = 2;
+    allowNegative = false;
     countryCode = 'US';
     countryOptions = [
         { code: 'US', name: 'US', mask: '(000) 000-0000', prefix: '+1 ', placeholder: '(000) 000-0000' },
@@ -6111,11 +6191,16 @@ class BkInput {
             const country = this.countryOptions.find(c => c.code === this.countryCode);
             return country?.placeholder || '';
         }
+        if (this.currency && !this.placeholder) {
+            return this.currencyDecimals > 0 ? `0.${'0'.repeat(this.currencyDecimals)}` : '0';
+        }
         return this.placeholder;
     }
     get maskValue() {
         if (this.mask)
             return this.mask;
+        if (this.currency)
+            return `separator.${this.currencyDecimals}`;
         if (this.phone) {
             const country = this.countryOptions.find(c => c.code === this.countryCode);
             return country?.mask || '';
@@ -6129,6 +6214,19 @@ class BkInput {
         }
         return '';
     }
+    // Stable reference: NgxMaskDirective's `decimalMarker` is a signal input, so a getter
+    // that returns a fresh array literal every change-detection cycle would look "changed"
+    // on every tick and retrigger the directive endlessly, freezing the page.
+    defaultDecimalMarker = ['.', ','];
+    get maskThousandSeparator() {
+        return this.currency ? ',' : ' ';
+    }
+    get maskDecimalMarker() {
+        return this.currency ? '.' : this.defaultDecimalMarker;
+    }
+    get maskAllowNegativeNumbers() {
+        return this.currency && this.allowNegative;
+    }
     // =================== CVA Callbacks ===================
     onChange = (value) => { };
     onTouched = () => { };
@@ -6150,6 +6248,14 @@ class BkInput {
         }
         return viewValue;
     }
+    parseCurrencyValue(viewVal) {
+        if (!viewVal)
+            return '';
+        let v = viewVal;
+        if (this.maskThousandSeparator)
+            v = v.split(this.maskThousandSeparator).join('');
+        return v.trim();
+    }
     writeValue(value) {
         const str = (value === null || value === undefined) ? '' : String(value);
         this.value = str;
@@ -6229,10 +6335,12 @@ class BkInput {
         // Keep the displayed value masked.
         this.inputValue = viewVal;
         // Decide what to write to the model.
-        const modelRaw = this.applyDropSpecialCharacters(viewVal);
+        const modelRaw = this.currency
+            ? this.parseCurrencyValue(viewVal)
+            : this.applyDropSpecialCharacters(viewVal);
         this.value = modelRaw;
-        const out = this.type === 'number'
-            ? (modelRaw === '' ? null : Number(modelRaw))
+        const out = this.type === 'number' || this.currency
+            ? (modelRaw === '' || modelRaw === '-' ? null : Number(modelRaw))
             : modelRaw;
         this.isPropagatingViewValue = true;
         this.onChange(out);
@@ -6344,14 +6452,14 @@ class BkInput {
         this.pendingMaskedValue = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkInput, isStandalone: true, selector: "bk-input", inputs: { id: "id", name: "name", mask: "mask", dropSpecialCharacters: "dropSpecialCharacters", autoComplete: "autoComplete", label: "label", placeholder: "placeholder", hint: "hint", required: "required", type: "type", size: "size", value: "value", hasError: "hasError", showErrorIcon: "showErrorIcon", errorMessage: "errorMessage", disabled: "disabled", tabIndex: "tabIndex", readOnly: "readOnly", autoCapitalize: "autoCapitalize", inputMode: "inputMode", iconSrc: "iconSrc", iconAlt: "iconAlt", showIcon: "showIcon", phone: "phone", countryCode: "countryCode", countryOptions: "countryOptions", iconOrientation: "iconOrientation", password: "password", showPassword: "showPassword", pattern: "pattern", max: "max", min: "min", step: "step", maxlength: "maxlength", minlength: "minlength" }, outputs: { input: "input", change: "change", focus: "focus", blur: "blur", clicked: "clicked" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkInput, isStandalone: true, selector: "bk-input", inputs: { id: "id", name: "name", mask: "mask", dropSpecialCharacters: "dropSpecialCharacters", autoComplete: "autoComplete", label: "label", placeholder: "placeholder", hint: "hint", required: "required", type: "type", size: "size", value: "value", hasError: "hasError", showErrorIcon: "showErrorIcon", errorMessage: "errorMessage", disabled: "disabled", tabIndex: "tabIndex", readOnly: "readOnly", autoCapitalize: "autoCapitalize", inputMode: "inputMode", iconSrc: "iconSrc", iconAlt: "iconAlt", showIcon: "showIcon", phone: "phone", currency: "currency", currencyDecimals: "currencyDecimals", allowNegative: "allowNegative", countryCode: "countryCode", countryOptions: "countryOptions", iconOrientation: "iconOrientation", password: "password", showPassword: "showPassword", pattern: "pattern", max: "max", min: "min", step: "step", maxlength: "maxlength", minlength: "minlength" }, outputs: { input: "input", change: "change", focus: "focus", blur: "blur", clicked: "clicked" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             provideNgxMask(),
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BkInput),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "maskDirective", first: true, predicate: NgxMaskDirective, descendants: true }], ngImport: i0, template: "<div class=\"input-container\" [class.input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\" [ngClass]=\"{\r\n    'input-wrapper--url': type === 'url',\r\n    'input-wrapper--phone': phone,\r\n    'input-wrapper--password': password,\r\n    'input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'input-search-icon--left': iconOrientation === 'left',\r\n        'input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"input-search-icon input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div #selectRef class=\"input-phone-selector\" [ngClass]=\"{\r\n        'input-phone-selector--default': inputState === 'default',\r\n        'input-phone-selector--focused': inputState === 'focused',\r\n        'input-phone-selector--filled': inputState === 'filled',\r\n        'input-phone-selector--error': inputState === 'error',\r\n        'input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n    }\r\n\r\n    @if(phone && isDropdownOpen){\r\n      <div #dropdownRef class=\"input-phone-dropdown\" (click)=\"$event.stopPropagation()\">\r\n        <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country); $event.stopPropagation()\">\r\n          {{ country.name }}\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"input-url-prefix\" [ngClass]=\"{\r\n        'input-url-prefix--default': inputState === 'default',\r\n        'input-url-prefix--focused': inputState === 'focused',\r\n        'input-url-prefix--filled': inputState === 'filled',\r\n        'input-url-prefix--error': inputState === 'error',\r\n        'input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--icon-left{@apply pl-[48px];}.input-field--icon-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply absolute left-0 top-full mt-1 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg z-50 max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}.input-container ::-webkit-scrollbar{width:4px}.input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.input-container--sm .input-label{@apply text-xs;}.input-container--sm .input-hint,.input-container--sm .input-error{@apply text-[11px];}.input-container--sm .input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.input-container--sm .input-field--icon,.input-container--sm .input-field--icon-left{@apply pl-8;}.input-container--sm .input-field--icon-right,.input-container--sm .input-field--password{@apply pr-8;}.input-container--sm .input-field--phone,.input-container--sm .input-field--url{@apply pl-16;}.input-container--sm .input-field--icon.input-field--url,.input-container--sm .input-field--phone.input-field--icon{@apply pl-24;}.input-container--sm .input-search-icon{@apply w-4 h-4;}.input-container--sm .input-search-icon--left{@apply left-2;}.input-container--sm .input-search-icon--right{@apply right-2;}.input-container--sm .input-password-toggle{@apply right-2 w-4 h-4;}.input-container--sm .input-password-icon{@apply w-4 h-4;}.input-container--sm .input-phone-selector{@apply px-2;}.input-container--sm .input-phone-selector-text{@apply text-[11px];}.input-container--sm .input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.input-container--sm .input-phone-dropdown{@apply w-[68px] mt-0.5;}.input-container--sm .input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.input-container--sm .input-phone-selector-arrow{@apply w-3 h-3;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: FormsModule }] });
+        ], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "maskDirective", first: true, predicate: NgxMaskDirective, descendants: true }], ngImport: i0, template: "<div class=\"input-container\" [class.input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\" [ngClass]=\"{\r\n    'input-wrapper--url': type === 'url',\r\n    'input-wrapper--phone': phone,\r\n    'input-wrapper--password': password,\r\n    'input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'input-search-icon--left': iconOrientation === 'left',\r\n        'input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"input-search-icon input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div #selectRef class=\"input-phone-selector\" [ngClass]=\"{\r\n        'input-phone-selector--default': inputState === 'default',\r\n        'input-phone-selector--focused': inputState === 'focused',\r\n        'input-phone-selector--filled': inputState === 'filled',\r\n        'input-phone-selector--error': inputState === 'error',\r\n        'input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n    }\r\n\r\n    @if(phone && isDropdownOpen){\r\n      <div #dropdownRef class=\"input-phone-dropdown\" (click)=\"$event.stopPropagation()\">\r\n        <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country); $event.stopPropagation()\">\r\n          {{ country.name }}\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"input-currency-icon\" [ngClass]=\"{\r\n        'input-currency-icon--default': inputState === 'default',\r\n        'input-currency-icon--focused': inputState === 'focused',\r\n        'input-currency-icon--filled': inputState === 'filled',\r\n        'input-currency-icon--error': inputState === 'error',\r\n        'input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"input-url-prefix\" [ngClass]=\"{\r\n        'input-url-prefix--default': inputState === 'default',\r\n        'input-url-prefix--focused': inputState === 'focused',\r\n        'input-url-prefix--filled': inputState === 'filled',\r\n        'input-url-prefix--error': inputState === 'error',\r\n        'input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--currency{@apply pl-[3.5rem];}.input-field--icon-left{@apply pl-[48px];}.input-field--icon-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply absolute left-0 top-full mt-1 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg z-50 max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-currency-icon img{@apply w-5 h-5;}.input-currency-icon--default{@apply border-[#E3E3E7];}.input-currency-icon--focused{@apply border-[#6B7080];}.input-currency-icon--filled{@apply border-[#E3E3E7];}.input-currency-icon--error{@apply border-[#E7000B];}.input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}.input-container ::-webkit-scrollbar{width:4px}.input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.input-container--sm .input-label{@apply text-xs;}.input-container--sm .input-hint,.input-container--sm .input-error{@apply text-[11px];}.input-container--sm .input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.input-container--sm .input-field--icon,.input-container--sm .input-field--icon-left{@apply pl-8;}.input-container--sm .input-field--icon-right,.input-container--sm .input-field--password{@apply pr-8;}.input-container--sm .input-field--phone,.input-container--sm .input-field--url{@apply pl-16;}.input-container--sm .input-field--currency{@apply pl-9;}.input-container--sm .input-currency-icon{@apply w-8;}.input-container--sm .input-currency-icon img{@apply w-4 h-4;}.input-container--sm .input-field--icon.input-field--url,.input-container--sm .input-field--phone.input-field--icon{@apply pl-24;}.input-container--sm .input-search-icon{@apply w-4 h-4;}.input-container--sm .input-search-icon--left{@apply left-2;}.input-container--sm .input-search-icon--right{@apply right-2;}.input-container--sm .input-password-toggle{@apply right-2 w-4 h-4;}.input-container--sm .input-password-icon{@apply w-4 h-4;}.input-container--sm .input-phone-selector{@apply px-2;}.input-container--sm .input-phone-selector-text{@apply text-[11px];}.input-container--sm .input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.input-container--sm .input-phone-dropdown{@apply w-[68px] mt-0.5;}.input-container--sm .input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.input-container--sm .input-phone-selector-arrow{@apply w-3 h-3;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, decorators: [{
             type: Component,
@@ -6362,7 +6470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkInput),
                             multi: true
                         }
-                    ], template: "<div class=\"input-container\" [class.input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\" [ngClass]=\"{\r\n    'input-wrapper--url': type === 'url',\r\n    'input-wrapper--phone': phone,\r\n    'input-wrapper--password': password,\r\n    'input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'input-search-icon--left': iconOrientation === 'left',\r\n        'input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"input-search-icon input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div #selectRef class=\"input-phone-selector\" [ngClass]=\"{\r\n        'input-phone-selector--default': inputState === 'default',\r\n        'input-phone-selector--focused': inputState === 'focused',\r\n        'input-phone-selector--filled': inputState === 'filled',\r\n        'input-phone-selector--error': inputState === 'error',\r\n        'input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n    }\r\n\r\n    @if(phone && isDropdownOpen){\r\n      <div #dropdownRef class=\"input-phone-dropdown\" (click)=\"$event.stopPropagation()\">\r\n        <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country); $event.stopPropagation()\">\r\n          {{ country.name }}\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"input-url-prefix\" [ngClass]=\"{\r\n        'input-url-prefix--default': inputState === 'default',\r\n        'input-url-prefix--focused': inputState === 'focused',\r\n        'input-url-prefix--filled': inputState === 'filled',\r\n        'input-url-prefix--error': inputState === 'error',\r\n        'input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--icon-left{@apply pl-[48px];}.input-field--icon-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply absolute left-0 top-full mt-1 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg z-50 max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}.input-container ::-webkit-scrollbar{width:4px}.input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.input-container--sm .input-label{@apply text-xs;}.input-container--sm .input-hint,.input-container--sm .input-error{@apply text-[11px];}.input-container--sm .input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.input-container--sm .input-field--icon,.input-container--sm .input-field--icon-left{@apply pl-8;}.input-container--sm .input-field--icon-right,.input-container--sm .input-field--password{@apply pr-8;}.input-container--sm .input-field--phone,.input-container--sm .input-field--url{@apply pl-16;}.input-container--sm .input-field--icon.input-field--url,.input-container--sm .input-field--phone.input-field--icon{@apply pl-24;}.input-container--sm .input-search-icon{@apply w-4 h-4;}.input-container--sm .input-search-icon--left{@apply left-2;}.input-container--sm .input-search-icon--right{@apply right-2;}.input-container--sm .input-password-toggle{@apply right-2 w-4 h-4;}.input-container--sm .input-password-icon{@apply w-4 h-4;}.input-container--sm .input-phone-selector{@apply px-2;}.input-container--sm .input-phone-selector-text{@apply text-[11px];}.input-container--sm .input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.input-container--sm .input-phone-dropdown{@apply w-[68px] mt-0.5;}.input-container--sm .input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.input-container--sm .input-phone-selector-arrow{@apply w-3 h-3;}\n"] }]
+                    ], template: "<div class=\"input-container\" [class.input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\" [ngClass]=\"{\r\n    'input-wrapper--url': type === 'url',\r\n    'input-wrapper--phone': phone,\r\n    'input-wrapper--password': password,\r\n    'input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'input-search-icon--left': iconOrientation === 'left',\r\n        'input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"input-search-icon input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div #selectRef class=\"input-phone-selector\" [ngClass]=\"{\r\n        'input-phone-selector--default': inputState === 'default',\r\n        'input-phone-selector--focused': inputState === 'focused',\r\n        'input-phone-selector--filled': inputState === 'filled',\r\n        'input-phone-selector--error': inputState === 'error',\r\n        'input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n    }\r\n\r\n    @if(phone && isDropdownOpen){\r\n      <div #dropdownRef class=\"input-phone-dropdown\" (click)=\"$event.stopPropagation()\">\r\n        <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country); $event.stopPropagation()\">\r\n          {{ country.name }}\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"input-currency-icon\" [ngClass]=\"{\r\n        'input-currency-icon--default': inputState === 'default',\r\n        'input-currency-icon--focused': inputState === 'focused',\r\n        'input-currency-icon--filled': inputState === 'filled',\r\n        'input-currency-icon--error': inputState === 'error',\r\n        'input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"input-url-prefix\" [ngClass]=\"{\r\n        'input-url-prefix--default': inputState === 'default',\r\n        'input-url-prefix--focused': inputState === 'focused',\r\n        'input-url-prefix--filled': inputState === 'filled',\r\n        'input-url-prefix--error': inputState === 'error',\r\n        'input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--currency{@apply pl-[3.5rem];}.input-field--icon-left{@apply pl-[48px];}.input-field--icon-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply absolute left-0 top-full mt-1 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg z-50 max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-currency-icon img{@apply w-5 h-5;}.input-currency-icon--default{@apply border-[#E3E3E7];}.input-currency-icon--focused{@apply border-[#6B7080];}.input-currency-icon--filled{@apply border-[#E3E3E7];}.input-currency-icon--error{@apply border-[#E7000B];}.input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}.input-container ::-webkit-scrollbar{width:4px}.input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.input-container--sm .input-label{@apply text-xs;}.input-container--sm .input-hint,.input-container--sm .input-error{@apply text-[11px];}.input-container--sm .input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.input-container--sm .input-field--icon,.input-container--sm .input-field--icon-left{@apply pl-8;}.input-container--sm .input-field--icon-right,.input-container--sm .input-field--password{@apply pr-8;}.input-container--sm .input-field--phone,.input-container--sm .input-field--url{@apply pl-16;}.input-container--sm .input-field--currency{@apply pl-9;}.input-container--sm .input-currency-icon{@apply w-8;}.input-container--sm .input-currency-icon img{@apply w-4 h-4;}.input-container--sm .input-field--icon.input-field--url,.input-container--sm .input-field--phone.input-field--icon{@apply pl-24;}.input-container--sm .input-search-icon{@apply w-4 h-4;}.input-container--sm .input-search-icon--left{@apply left-2;}.input-container--sm .input-search-icon--right{@apply right-2;}.input-container--sm .input-password-toggle{@apply right-2 w-4 h-4;}.input-container--sm .input-password-icon{@apply w-4 h-4;}.input-container--sm .input-phone-selector{@apply px-2;}.input-container--sm .input-phone-selector-text{@apply text-[11px];}.input-container--sm .input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.input-container--sm .input-phone-dropdown{@apply w-[68px] mt-0.5;}.input-container--sm .input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.input-container--sm .input-phone-selector-arrow{@apply w-3 h-3;}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -6411,6 +6519,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], phone: [{
                 type: Input
+            }], currency: [{
+                type: Input
+            }], currencyDecimals: [{
+                type: Input
+            }], allowNegative: [{
+                type: Input
             }], countryCode: [{
                 type: Input
             }], countryOptions: [{
@@ -6706,8 +6820,13 @@ class BkTabs {
      * Optional — defaults to false, so navigation stays free unless opted in.
      */
     lockNavigationOnError = false;
-    /** Fallback error icon used when a tab has `showErrorIcon` but no `errorIcon`. */
-    defaultErrorIcon = '../../assets/icons/alert-circle-red.svg';
+    /**
+     * Fallback error icon used when a tab has `showErrorIcon` but no `errorIcon`.
+     * Inlined as a data URI (rather than an asset path) so it renders correctly
+     * in any consuming app without requiring that app to wire up a build step
+     * that copies this library's assets into its own output.
+     */
+    defaultErrorIcon = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIzLjU3MDA3IiB5PSIzLjU2OTk1IiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHJ4PSIyMCIgZmlsbD0iI0ZFRTJFMiIvPjxyZWN0IHg9IjMuNTcwMDciIHk9IjMuNTY5OTUiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcng9IjIwIiBzdHJva2U9IiNGRUUyRTIiIHN0cm9rZS13aWR0aD0iNy4xNCIvPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8xXzE0OTA5NCkiPjxwYXRoIGQ9Ik0yMy41NzAyIDIwLjIzNjZWMjMuNTY5OU0yMy41NzAyIDI2LjkwMzJIMjMuNTc4NU0zMS45MDM1IDIzLjU2OTlDMzEuOTAzNSAyOC4xNzIzIDI4LjE3MjUgMzEuOTAzMiAyMy41NzAyIDMxLjkwMzJDMTguOTY3OCAzMS45MDMyIDE1LjIzNjggMjguMTcyMyAxNS4yMzY4IDIzLjU2OTlDMTUuMjM2OCAxOC45Njc1IDE4Ljk2NzggMTUuMjM2NiAyMy41NzAyIDE1LjIzNjZDMjguMTcyNSAxNS4yMzY2IDMxLjkwMzUgMTguOTY3NSAzMS45MDM1IDIzLjU2OTlaIiBzdHJva2U9IiNFRjQ0NDQiIHN0cm9rZS13aWR0aD0iMS42NjY2NyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDBfMV8xNDkwOTQiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzLjU3MDEgMTMuNTY5OSkiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=';
     // Convenience getters for template class bindings
     get isVertical() {
         return this.orientation === 'vertical';
@@ -6765,11 +6884,11 @@ class BkTabs {
         return tab.icon;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTabs, isStandalone: true, selector: "bk-tabs", inputs: { list: "list", activeTabId: "activeTabId", disabled: "disabled", orientation: "orientation", variant: "variant", colors: "colors", lockNavigationOnError: "lockNavigationOnError" }, outputs: { change: "change" }, ngImport: i0, template: "<div\r\n  class=\"tabs-container\"\r\n  [class.tabs-container--segmented]=\"isSegmented\"\r\n  [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n  <ul\r\n    class=\"tabs-list\"\r\n    [class.tabs-list--segmented]=\"isSegmented\"\r\n    [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n    [class.tabs-list--vertical]=\"isVertical && !isSegmented\"\r\n    [attr.aria-orientation]=\"orientation\"\r\n    role=\"tablist\">\r\n    @for (tab of list; track tab.id; let i = $index) {\r\n      <li class=\"tabs-item\" role=\"presentation\">\r\n        <!--\r\n          Tooltip logic:\r\n          - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n          - No icon + error state      \u2192 tooltip on the button\r\n          - No icon + no error         \u2192 no tooltip\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          [id]=\"'tab-' + tab.id\"\r\n          [attr.aria-selected]=\"isActive(tab.id)\"\r\n          [attr.aria-controls]=\"'panel-' + tab.id\"\r\n          [disabled]=\"tab.disabled || isLocked(tab)\"\r\n          [class.tabs-button--active]=\"isActive(tab.id)\"\r\n          [class.tabs-button--error]=\"tab.error\"\r\n          [class.tabs-button--disabled]=\"disabled || tab.disabled || isLocked(tab)\"\r\n          [class.tabs-button--icon-right]=\"tab.direction === 'right'\"\r\n          [class.tabs-button--segmented]=\"isSegmented\"\r\n          [ngClass]=\"[\r\n            isSegmented ? segmentedTabClass(tab) : '',\r\n            (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n          ]\"\r\n          [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n          [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n          class=\"tabs-button\"\r\n          (click)=\"setActiveTab(tab)\"\r\n          role=\"tab\">\r\n          <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n            class=\"tabs-icon\">\r\n          <span class=\"tabs-label\">{{ tab.label }}</span>\r\n          <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n            class=\"tabs-icon\">\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-[4px] list-none m-0 px-0 py-0.5;}.tabs-item{@apply min-w-0;}.tabs-list--vertical{@apply grid-cols-1 grid-flow-row auto-rows-max;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-100 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button:hover:not(:disabled):not(.tabs-button--active){@apply text-[#141414] bg-[#EDEEF0];}.tabs-list--vertical .tabs-button{@apply py-[9px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--error{@apply bg-[#C10007] text-white border-0;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;max-width:1rem;opacity:1;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.tabs-icon--hidden{max-width:0;opacity:0}.tabs-label{@apply whitespace-nowrap;}.tabs-container--segmented{@apply p-[3px] rounded-md w-full md:w-auto overflow-x-auto;background:#54578e12}.tabs-list--segmented{@apply grid grid-flow-col items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;grid-auto-columns:minmax(max-content,1fr);color:#6b7080}.tabs-button--segmented{@apply border border-transparent px-3 sm:min-w-[5rem] py-1.5 w-full text-center justify-center rounded;color:#6b7080}.tabs-button--segmented:hover:not(:disabled):not(.tabs-button--active){border-color:#42578a26;background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--active{background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--error{background:#fee2e2;border-color:#fca5a5;color:#c10007}.tabs-button--segmented.tabs-button--error.tabs-button--active{background:#fff;border-color:#c10007;color:#c10007}.tabs-button--segmented.tabs-button--error:hover:not(:disabled):not(.tabs-button--active){background:#fee2e2;border-color:#c10007;color:#c10007}.tabs-list--segmented-vertical{@apply grid-cols-1 grid-flow-row auto-rows-max gap-1;}.tabs-list--segmented-vertical .tabs-button--segmented{@apply justify-start text-left;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTabs, isStandalone: true, selector: "bk-tabs", inputs: { list: "list", activeTabId: "activeTabId", disabled: "disabled", orientation: "orientation", variant: "variant", colors: "colors", lockNavigationOnError: "lockNavigationOnError" }, outputs: { change: "change" }, ngImport: i0, template: "<div\r\n  class=\"tabs-container\"\r\n  [class.tabs-container--segmented]=\"isSegmented\"\r\n  [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n  <ul\r\n    class=\"tabs-list\"\r\n    [class.tabs-list--segmented]=\"isSegmented\"\r\n    [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n    [class.tabs-list--vertical]=\"isVertical && !isSegmented\"\r\n    [attr.aria-orientation]=\"orientation\"\r\n    role=\"tablist\">\r\n    @for (tab of list; track tab.id; let i = $index) {\r\n      <li class=\"tabs-item\" role=\"presentation\">\r\n        <!--\r\n          Tooltip logic:\r\n          - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n          - No icon + error state      \u2192 tooltip on the button\r\n          - No icon + no error         \u2192 no tooltip\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          [id]=\"'tab-' + tab.id\"\r\n          [attr.aria-selected]=\"isActive(tab.id)\"\r\n          [attr.aria-controls]=\"'panel-' + tab.id\"\r\n          [disabled]=\"tab.disabled || isLocked(tab)\"\r\n          [class.tabs-button--active]=\"isActive(tab.id)\"\r\n          [class.tabs-button--error]=\"tab.error\"\r\n          [class.tabs-button--disabled]=\"disabled || tab.disabled || isLocked(tab)\"\r\n          [class.tabs-button--icon-right]=\"tab.direction === 'right'\"\r\n          [class.tabs-button--segmented]=\"isSegmented\"\r\n          [ngClass]=\"[\r\n            isSegmented ? segmentedTabClass(tab) : '',\r\n            (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n          ]\"\r\n          [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n          [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n          class=\"tabs-button\"\r\n          (click)=\"setActiveTab(tab)\"\r\n          role=\"tab\">\r\n          <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n            class=\"tabs-icon\">\r\n          <span class=\"tabs-label\">{{ tab.label }}</span>\r\n          <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n            class=\"tabs-icon\">\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-[4px] list-none m-0 px-0 py-0.5;}.tabs-item{@apply min-w-0;}.tabs-list--vertical{@apply grid-cols-1 grid-flow-row auto-rows-max;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-100 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button:hover:not(:disabled):not(.tabs-button--active){@apply text-[#141414] bg-[#EDEEF0];}.tabs-list--vertical .tabs-button{@apply py-[9px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--error{@apply bg-[#C10007] text-white border-0;}.tabs-button--error:not(.tabs-button--segmented):hover{@apply !bg-[#C10007] !text-white;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;max-width:1rem;opacity:1;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.tabs-icon--hidden{max-width:0;opacity:0}.tabs-label{@apply whitespace-nowrap;}.tabs-container--segmented{@apply p-[3px] rounded-md w-full md:w-auto overflow-x-auto;background:#54578e12}.tabs-list--segmented{@apply grid grid-flow-col items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;grid-auto-columns:minmax(max-content,1fr);color:#6b7080}.tabs-button--segmented{@apply border border-transparent px-3 sm:min-w-[5rem] py-1.5 w-full text-center justify-center rounded;color:#6b7080}.tabs-button--segmented:hover:not(:disabled):not(.tabs-button--active){border-color:#42578a26;background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--active{background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--error{background:#fee2e2;border-color:#fca5a5;color:#c10007}.tabs-button--segmented.tabs-button--error.tabs-button--active{background:#fff;border-color:#c10007;color:#c10007}.tabs-button--segmented.tabs-button--error:hover:not(:disabled):not(.tabs-button--active){background:#fee2e2;border-color:#c10007;color:#c10007}.tabs-list--segmented-vertical{@apply grid-cols-1 grid-flow-row auto-rows-max gap-1;}.tabs-list--segmented-vertical .tabs-button--segmented{@apply justify-start text-left;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-tabs', standalone: true, imports: [CommonModule, BKTooltipDirective], template: "<div\r\n  class=\"tabs-container\"\r\n  [class.tabs-container--segmented]=\"isSegmented\"\r\n  [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n  <ul\r\n    class=\"tabs-list\"\r\n    [class.tabs-list--segmented]=\"isSegmented\"\r\n    [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n    [class.tabs-list--vertical]=\"isVertical && !isSegmented\"\r\n    [attr.aria-orientation]=\"orientation\"\r\n    role=\"tablist\">\r\n    @for (tab of list; track tab.id; let i = $index) {\r\n      <li class=\"tabs-item\" role=\"presentation\">\r\n        <!--\r\n          Tooltip logic:\r\n          - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n          - No icon + error state      \u2192 tooltip on the button\r\n          - No icon + no error         \u2192 no tooltip\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          [id]=\"'tab-' + tab.id\"\r\n          [attr.aria-selected]=\"isActive(tab.id)\"\r\n          [attr.aria-controls]=\"'panel-' + tab.id\"\r\n          [disabled]=\"tab.disabled || isLocked(tab)\"\r\n          [class.tabs-button--active]=\"isActive(tab.id)\"\r\n          [class.tabs-button--error]=\"tab.error\"\r\n          [class.tabs-button--disabled]=\"disabled || tab.disabled || isLocked(tab)\"\r\n          [class.tabs-button--icon-right]=\"tab.direction === 'right'\"\r\n          [class.tabs-button--segmented]=\"isSegmented\"\r\n          [ngClass]=\"[\r\n            isSegmented ? segmentedTabClass(tab) : '',\r\n            (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n          ]\"\r\n          [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n          [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n          class=\"tabs-button\"\r\n          (click)=\"setActiveTab(tab)\"\r\n          role=\"tab\">\r\n          <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n            class=\"tabs-icon\">\r\n          <span class=\"tabs-label\">{{ tab.label }}</span>\r\n          <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n            class=\"tabs-icon\">\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-[4px] list-none m-0 px-0 py-0.5;}.tabs-item{@apply min-w-0;}.tabs-list--vertical{@apply grid-cols-1 grid-flow-row auto-rows-max;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-100 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button:hover:not(:disabled):not(.tabs-button--active){@apply text-[#141414] bg-[#EDEEF0];}.tabs-list--vertical .tabs-button{@apply py-[9px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--error{@apply bg-[#C10007] text-white border-0;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;max-width:1rem;opacity:1;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.tabs-icon--hidden{max-width:0;opacity:0}.tabs-label{@apply whitespace-nowrap;}.tabs-container--segmented{@apply p-[3px] rounded-md w-full md:w-auto overflow-x-auto;background:#54578e12}.tabs-list--segmented{@apply grid grid-flow-col items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;grid-auto-columns:minmax(max-content,1fr);color:#6b7080}.tabs-button--segmented{@apply border border-transparent px-3 sm:min-w-[5rem] py-1.5 w-full text-center justify-center rounded;color:#6b7080}.tabs-button--segmented:hover:not(:disabled):not(.tabs-button--active){border-color:#42578a26;background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--active{background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--error{background:#fee2e2;border-color:#fca5a5;color:#c10007}.tabs-button--segmented.tabs-button--error.tabs-button--active{background:#fff;border-color:#c10007;color:#c10007}.tabs-button--segmented.tabs-button--error:hover:not(:disabled):not(.tabs-button--active){background:#fee2e2;border-color:#c10007;color:#c10007}.tabs-list--segmented-vertical{@apply grid-cols-1 grid-flow-row auto-rows-max gap-1;}.tabs-list--segmented-vertical .tabs-button--segmented{@apply justify-start text-left;}\n"] }]
+            args: [{ selector: 'bk-tabs', standalone: true, imports: [CommonModule, BKTooltipDirective], template: "<div\r\n  class=\"tabs-container\"\r\n  [class.tabs-container--segmented]=\"isSegmented\"\r\n  [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n  <ul\r\n    class=\"tabs-list\"\r\n    [class.tabs-list--segmented]=\"isSegmented\"\r\n    [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n    [class.tabs-list--vertical]=\"isVertical && !isSegmented\"\r\n    [attr.aria-orientation]=\"orientation\"\r\n    role=\"tablist\">\r\n    @for (tab of list; track tab.id; let i = $index) {\r\n      <li class=\"tabs-item\" role=\"presentation\">\r\n        <!--\r\n          Tooltip logic:\r\n          - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n          - No icon + error state      \u2192 tooltip on the button\r\n          - No icon + no error         \u2192 no tooltip\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          [id]=\"'tab-' + tab.id\"\r\n          [attr.aria-selected]=\"isActive(tab.id)\"\r\n          [attr.aria-controls]=\"'panel-' + tab.id\"\r\n          [disabled]=\"tab.disabled || isLocked(tab)\"\r\n          [class.tabs-button--active]=\"isActive(tab.id)\"\r\n          [class.tabs-button--error]=\"tab.error\"\r\n          [class.tabs-button--disabled]=\"disabled || tab.disabled || isLocked(tab)\"\r\n          [class.tabs-button--icon-right]=\"tab.direction === 'right'\"\r\n          [class.tabs-button--segmented]=\"isSegmented\"\r\n          [ngClass]=\"[\r\n            isSegmented ? segmentedTabClass(tab) : '',\r\n            (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n          ]\"\r\n          [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n          [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n          class=\"tabs-button\"\r\n          (click)=\"setActiveTab(tab)\"\r\n          role=\"tab\">\r\n          <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n            class=\"tabs-icon\">\r\n          <span class=\"tabs-label\">{{ tab.label }}</span>\r\n          <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n            class=\"tabs-icon\">\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-[4px] list-none m-0 px-0 py-0.5;}.tabs-item{@apply min-w-0;}.tabs-list--vertical{@apply grid-cols-1 grid-flow-row auto-rows-max;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-100 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button:hover:not(:disabled):not(.tabs-button--active){@apply text-[#141414] bg-[#EDEEF0];}.tabs-list--vertical .tabs-button{@apply py-[9px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--error{@apply bg-[#C10007] text-white border-0;}.tabs-button--error:not(.tabs-button--segmented):hover{@apply !bg-[#C10007] !text-white;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;max-width:1rem;opacity:1;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.tabs-icon--hidden{max-width:0;opacity:0}.tabs-label{@apply whitespace-nowrap;}.tabs-container--segmented{@apply p-[3px] rounded-md w-full md:w-auto overflow-x-auto;background:#54578e12}.tabs-list--segmented{@apply grid grid-flow-col items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;grid-auto-columns:minmax(max-content,1fr);color:#6b7080}.tabs-button--segmented{@apply border border-transparent px-3 sm:min-w-[5rem] py-1.5 w-full text-center justify-center rounded;color:#6b7080}.tabs-button--segmented:hover:not(:disabled):not(.tabs-button--active){border-color:#42578a26;background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--active{background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--error{background:#fee2e2;border-color:#fca5a5;color:#c10007}.tabs-button--segmented.tabs-button--error.tabs-button--active{background:#fff;border-color:#c10007;color:#c10007}.tabs-button--segmented.tabs-button--error:hover:not(:disabled):not(.tabs-button--active){background:#fee2e2;border-color:#c10007;color:#c10007}.tabs-list--segmented-vertical{@apply grid-cols-1 grid-flow-row auto-rows-max gap-1;}.tabs-list--segmented-vertical .tabs-button--segmented{@apply justify-start text-left;}\n"] }]
         }], propDecorators: { list: [{
                 type: Input
             }], activeTabId: [{
@@ -9329,7 +9448,7 @@ class BkColumnSelect {
                 useExisting: forwardRef(() => BkColumnSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "formBoxRef", first: true, predicate: ["formBox"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\r\n\r\n  <bk-button #trigger [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"lefticon\"\r\n    (click)=\"filterButtonClicked($event)\" [label]=\"label\" [buttonClass]=\"`text-black ${buttonClass}`\"></bk-button>\r\n\r\n  <!-- Dropdown Box -->\r\n  @if(isOpened){\r\n\r\n  <div #formBox\r\n    class=\"absolute {{ panelPositionClass }} w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl z-[9999]\">\r\n    @if(searchable){\r\n      <div class=\"px-3 py-1\">\r\n        <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\" [size]=\"'sm'\"\r\n        [iconSrc]=\"'../../../../assets/icons/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n        placeholder=\"Search\"></bk-input>\r\n      </div>\r\n    }\r\n    <div class=\"column-select-options-list\">\r\n      @for (column of list; track column.columnName; let i = $index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-1 hover:bg-gray-100 cursor-pointer\">\r\n        <bk-checkbox [label]=\"column.columnName\" id=\"columnsFilterList-{{column.columnName}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"  labelClass=\"!text-left\"\r\n          (change)=\"onChangeColumnFilter()\">\r\n\r\n        </bk-checkbox>\r\n\r\n        <!-- <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n          for=\"columnsFilterList-{{column.columnName}}\">\r\n          {{column.columnName}}\r\n        </label> -->\r\n\r\n      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"column-select-option-empty\">No records found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".column-select-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.column-select-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:225px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkButton, selector: "bk-button", inputs: ["variant", "size", "shadow", "label", "leftIcon", "rightIcon", "iconAlt", "type", "loading", "disabled", "buttonClass", "textClass", "spinnerClass"], outputs: ["clicked"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "component", type: BkInput, selector: "bk-input", inputs: ["id", "name", "mask", "dropSpecialCharacters", "autoComplete", "label", "placeholder", "hint", "required", "type", "size", "value", "hasError", "showErrorIcon", "errorMessage", "disabled", "tabIndex", "readOnly", "autoCapitalize", "inputMode", "iconSrc", "iconAlt", "showIcon", "phone", "countryCode", "countryOptions", "iconOrientation", "password", "showPassword", "pattern", "max", "min", "step", "maxlength", "minlength"], outputs: ["input", "change", "focus", "blur", "clicked"] }] });
+        ], viewQueries: [{ propertyName: "formBoxRef", first: true, predicate: ["formBox"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\r\n\r\n  <bk-button #trigger [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"lefticon\"\r\n    (click)=\"filterButtonClicked($event)\" [label]=\"label\" [buttonClass]=\"`text-black ${buttonClass}`\"></bk-button>\r\n\r\n  <!-- Dropdown Box -->\r\n  @if(isOpened){\r\n\r\n  <div #formBox\r\n    class=\"absolute {{ panelPositionClass }} w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl z-[9999]\">\r\n    @if(searchable){\r\n      <div class=\"px-3 py-1\">\r\n        <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\" [size]=\"'sm'\"\r\n        [iconSrc]=\"'../../../../assets/icons/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n        placeholder=\"Search\"></bk-input>\r\n      </div>\r\n    }\r\n    <div class=\"column-select-options-list\">\r\n      @for (column of list; track column.columnName; let i = $index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-1 hover:bg-gray-100 cursor-pointer\">\r\n        <bk-checkbox [label]=\"column.columnName\" id=\"columnsFilterList-{{column.columnName}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"  labelClass=\"!text-left\"\r\n          (change)=\"onChangeColumnFilter()\">\r\n\r\n        </bk-checkbox>\r\n\r\n        <!-- <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n          for=\"columnsFilterList-{{column.columnName}}\">\r\n          {{column.columnName}}\r\n        </label> -->\r\n\r\n      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"column-select-option-empty\">No records found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".column-select-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.column-select-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:225px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkButton, selector: "bk-button", inputs: ["variant", "size", "shadow", "label", "leftIcon", "rightIcon", "iconAlt", "type", "loading", "disabled", "buttonClass", "textClass", "spinnerClass"], outputs: ["clicked"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "component", type: BkInput, selector: "bk-input", inputs: ["id", "name", "mask", "dropSpecialCharacters", "autoComplete", "label", "placeholder", "hint", "required", "type", "size", "value", "hasError", "showErrorIcon", "errorMessage", "disabled", "tabIndex", "readOnly", "autoCapitalize", "inputMode", "iconSrc", "iconAlt", "showIcon", "phone", "currency", "currencyDecimals", "allowNegative", "countryCode", "countryOptions", "iconOrientation", "password", "showPassword", "pattern", "max", "min", "step", "maxlength", "minlength"], outputs: ["input", "change", "focus", "blur", "clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, decorators: [{
             type: Component,
@@ -9628,6 +9747,35 @@ class BkPagination {
     pages = [];
     activePage = 1;
     activePageChange = new EventEmitter();
+    /** Gates the "Rows per page" block. `true`/`false` shows or hides the label and the
+     *  select together; `{ label?, input? }` hides just one of the two (the other keeps
+     *  its own default of shown). */
+    showPageSize = true;
+    /** Gates the "Showing X to Y of Z Records" text. */
+    showRecordsText = true;
+    /** Gates the "N-M of P" page-count text. */
+    showPageCount = true;
+    /** Extra classes (Tailwind or custom), applied in two places at once:
+     *  - the flex row wrapping the top-level blocks (page size / records text / nav) —
+     *    not the outer padding/border element — so e.g. `justify-end` controls their
+     *    arrangement when some are hidden.
+     *  - the nav itself, which only has room to act on when it's the sole visible
+     *    block (it then grows to fill the row) — there, the same class instead spreads
+     *    *its* two children, e.g. `justify-between` between the page-count text and
+     *    the page-number list. */
+    customClass = '';
+    /** Whether the "Rows per page" label renders, normalizing `showPageSize`'s boolean-or-object shape. */
+    get showPageSizeLabel() {
+        return typeof this.showPageSize === 'boolean' ? this.showPageSize : this.showPageSize?.label !== false;
+    }
+    /** Whether the bk-select renders, normalizing `showPageSize`'s boolean-or-object shape. */
+    get showPageSizeInput() {
+        return typeof this.showPageSize === 'boolean' ? this.showPageSize : this.showPageSize?.input !== false;
+    }
+    /** True once neither half is shown — the whole page-size block drops out, same as `showPageSize=false` today. */
+    get pageSizeHidden() {
+        return !this.showPageSizeLabel && !this.showPageSizeInput;
+    }
     pager = 1;
     isMenuHovered = false;
     // ✅ Added
@@ -9745,11 +9893,11 @@ class BkPagination {
         return this.getPageCount();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkPagination, isStandalone: true, selector: "bk-pagination", inputs: { pageSize: "pageSize", total: "total", activePage: "activePage" }, outputs: { changePageSize: "changePageSize", pageChanged: "pageChanged", activePageChange: "activePageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"md:px-4 px-2 md:py-3 py-2 border-t border-[#EBEDF3] rounded-b-xl\">\r\n  <div class=\"flex flex-row items-center justify-between md:gap-3 gap-1\">\r\n\r\n    <!-- Page size dropdown -->\r\n\r\n\r\n    <div class=\"flex gap-3 items-center pagination\">\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">Rows per page</p>\r\n        <bk-select\r\n          [items]=\"pageSizesList\"\r\n          [searchable]=\"false\"\r\n          bindLabel=\"key\"\r\n          bindValue=\"value\"\r\n          [clearable]=\"false\"\r\n          [(ngModel)]=\"pageSize\"\r\n          [dropdownPosition]=\"'top'\"\r\n          (change)=\"changeSize($event)\"\r\n          [variation]=\"'sm'\"\r\n          [isResponsive]=\"false\"\r\n          class=\"!min-w-[90px] lg:!min-w-[131px]\"\r\n          >\r\n        </bk-select>\r\n    </div>\r\n\r\n    <!-- showing entries -->\r\n    <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n      Showing <span>{{ startIndex }}</span> to\r\n      <span>{{ endIndex > totalItems ? totalItems : endIndex }}</span> of\r\n      <span>{{ totalItems }}</span> Records\r\n    </p>\r\n\r\n    <!-- Pagination main -->\r\n    <nav class=\"flex gap-1.5 items-center\">\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n        <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) mobile version -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:hidden block\">\r\n      <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n      <ul class=\"flex items-center space-x-1 text-[13px] text-[#B9BBC6]\">\r\n\r\n        <!-- Previous -->\r\n        <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n            @if(activePage === 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-gray.svg\"\r\n                alt=\"Left Arrow Disabled\"\r\n              />\r\n            }\r\n            @if(activePage !== 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-black.svg\"\r\n                alt=\"Left Arrow\"\r\n              />\r\n            }\r\n          </a>\r\n        </li>\r\n        <!-- Previous -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage - 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n          @if(activePage === 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-gray.svg\"\r\n              alt=\"Left Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-black.svg\"\r\n              alt=\"Left Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Page Numbers -->\r\n        <li *ngFor=\"let item of paginate()\">\r\n          <a\r\n            (click)=\"onClickPage(item)\"\r\n            href=\"javascript:void(0)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 leading-6 rounded-lg\"\r\n            [ngClass]=\"item === activePage\r\n              ? 'text-[#15191E] bg-[#F8F8FA] hover:bg-[#F8F8FA]'\r\n              : 'hover:bg-[#F8F8FA] hover:text-[#15191E]'\">\r\n            {{ item }}\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Next -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage + 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/pagination-right-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n                src=\"../../assets/icons/pagination-right-black.svg\"\r\n                alt=\"Right Arrow\"\r\n              />\r\n          }\r\n          </a>\r\n        </li>\r\n        <!-- next double arrow  -->\r\n                 <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(getTotalPages())\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-black.svg\"\r\n              alt=\"Right Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkSelect, selector: "bk-select", inputs: ["items", "bindLabel", "bindValue", "bindIcon", "isResponsive", "placeholder", "notFoundText", "loadingText", "clearAllText", "groupBy", "colorKey", "showDots", "showAvatar", "avatarKey", "iconAlt", "label", "required", "variation", "iconSrc", "multiple", "maxLabels", "searchable", "allSelect", "clearable", "readonly", "disabled", "loading", "closeOnSelect", "dropdownPosition", "hasError", "errorMessage", "appendToBody", "compareWith"], outputs: ["disabledChange", "open", "close", "focus", "blur", "search", "clear", "change", "scrollToEnd"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkPagination, isStandalone: true, selector: "bk-pagination", inputs: { pageSize: "pageSize", total: "total", activePage: "activePage", showPageSize: "showPageSize", showRecordsText: "showRecordsText", showPageCount: "showPageCount", customClass: "customClass" }, outputs: { changePageSize: "changePageSize", pageChanged: "pageChanged", activePageChange: "activePageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"md:px-4 px-2 md:py-3 py-2 border-t border-[#EBEDF3] rounded-b-xl\">\r\n  <div class=\"flex flex-row items-center justify-between md:gap-3 gap-1 {{ customClass }}\">\r\n\r\n    <!-- Page size dropdown -->\r\n\r\n    @if (!pageSizeHidden) {\r\n    <div class=\"flex gap-3 items-center pagination\">\r\n      @if (showPageSizeLabel) {\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">Rows per page</p>\r\n      }\r\n      @if (showPageSizeInput) {\r\n        <bk-select\r\n          [items]=\"pageSizesList\"\r\n          [searchable]=\"false\"\r\n          bindLabel=\"key\"\r\n          bindValue=\"value\"\r\n          [clearable]=\"false\"\r\n          [(ngModel)]=\"pageSize\"\r\n          [dropdownPosition]=\"'top'\"\r\n          (change)=\"changeSize($event)\"\r\n          [variation]=\"'sm'\"\r\n          [isResponsive]=\"false\"\r\n          class=\"!min-w-[90px] lg:!min-w-[131px]\"\r\n          >\r\n        </bk-select>\r\n      }\r\n    </div>\r\n    }\r\n\r\n    <!-- showing entries -->\r\n    @if (showRecordsText) {\r\n    <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n      Showing <span>{{ startIndex }}</span> to\r\n      <span>{{ endIndex > totalItems ? totalItems : endIndex }}</span> of\r\n      <span>{{ totalItems }}</span> Records\r\n    </p>\r\n    }\r\n\r\n    <!-- Pagination main -->\r\n    <!-- With 2+ top-level blocks visible, the parent row's justify-between already\r\n         pins this to the end on its own; customClass on the row (e.g. \"justify-end\")\r\n         controls arrangement among those blocks.\r\n         Hidden down to just this one, there's nothing left for the row to distribute\r\n         against, so it grows to fill the row (flex-1) instead \u2014 letting customClass\r\n         act here on its own two children (page count text vs. the page-number list)\r\n         via e.g. \"justify-between\" or \"justify-around\". -->\r\n    <nav\r\n      class=\"flex gap-1.5 items-center {{ customClass }}\"\r\n      [class.flex-1]=\"pageSizeHidden && !showRecordsText\"\r\n    >\r\n\r\n      @if (showPageCount) {\r\n      <!-- Page count -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n        <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n\r\n      <!-- Page count mobile version -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:hidden block\">\r\n      <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n      }\r\n\r\n      <ul class=\"flex items-center space-x-1 text-[13px] text-[#B9BBC6]\">\r\n\r\n        <!-- Previous -->\r\n        <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n            @if(activePage === 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-gray.svg\"\r\n                alt=\"Left Arrow Disabled\"\r\n              />\r\n            }\r\n            @if(activePage !== 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-black.svg\"\r\n                alt=\"Left Arrow\"\r\n              />\r\n            }\r\n          </a>\r\n        </li>\r\n        <!-- Previous -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage - 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n          @if(activePage === 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-gray.svg\"\r\n              alt=\"Left Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-black.svg\"\r\n              alt=\"Left Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Page Numbers -->\r\n        <li *ngFor=\"let item of paginate()\">\r\n          <a\r\n            (click)=\"onClickPage(item)\"\r\n            href=\"javascript:void(0)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 leading-6 rounded-lg\"\r\n            [ngClass]=\"item === activePage\r\n              ? 'text-[#15191E] bg-[#F8F8FA] hover:bg-[#F8F8FA]'\r\n              : 'hover:bg-[#F8F8FA] hover:text-[#15191E]'\">\r\n            {{ item }}\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Next -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage + 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/pagination-right-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n                src=\"../../assets/icons/pagination-right-black.svg\"\r\n                alt=\"Right Arrow\"\r\n              />\r\n          }\r\n          </a>\r\n        </li>\r\n        <!-- next double arrow  -->\r\n                 <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(getTotalPages())\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-black.svg\"\r\n              alt=\"Right Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkSelect, selector: "bk-select", inputs: ["items", "bindLabel", "bindValue", "bindIcon", "isResponsive", "placeholder", "notFoundText", "loadingText", "clearAllText", "groupBy", "colorKey", "showDots", "showAvatar", "avatarKey", "iconAlt", "label", "required", "variation", "iconSrc", "multiple", "maxLabels", "searchable", "allSelect", "clearable", "readonly", "disabled", "loading", "closeOnSelect", "dropdownPosition", "hasError", "errorMessage", "appendToBody", "compareWith"], outputs: ["disabledChange", "open", "close", "focus", "blur", "search", "clear", "change", "scrollToEnd"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkPagination, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-pagination', imports: [CommonModule, FormsModule, BkSelect], standalone: true, template: "<div class=\"md:px-4 px-2 md:py-3 py-2 border-t border-[#EBEDF3] rounded-b-xl\">\r\n  <div class=\"flex flex-row items-center justify-between md:gap-3 gap-1\">\r\n\r\n    <!-- Page size dropdown -->\r\n\r\n\r\n    <div class=\"flex gap-3 items-center pagination\">\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">Rows per page</p>\r\n        <bk-select\r\n          [items]=\"pageSizesList\"\r\n          [searchable]=\"false\"\r\n          bindLabel=\"key\"\r\n          bindValue=\"value\"\r\n          [clearable]=\"false\"\r\n          [(ngModel)]=\"pageSize\"\r\n          [dropdownPosition]=\"'top'\"\r\n          (change)=\"changeSize($event)\"\r\n          [variation]=\"'sm'\"\r\n          [isResponsive]=\"false\"\r\n          class=\"!min-w-[90px] lg:!min-w-[131px]\"\r\n          >\r\n        </bk-select>\r\n    </div>\r\n\r\n    <!-- showing entries -->\r\n    <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n      Showing <span>{{ startIndex }}</span> to\r\n      <span>{{ endIndex > totalItems ? totalItems : endIndex }}</span> of\r\n      <span>{{ totalItems }}</span> Records\r\n    </p>\r\n\r\n    <!-- Pagination main -->\r\n    <nav class=\"flex gap-1.5 items-center\">\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n        <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) mobile version -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:hidden block\">\r\n      <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n      <ul class=\"flex items-center space-x-1 text-[13px] text-[#B9BBC6]\">\r\n\r\n        <!-- Previous -->\r\n        <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n            @if(activePage === 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-gray.svg\"\r\n                alt=\"Left Arrow Disabled\"\r\n              />\r\n            }\r\n            @if(activePage !== 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-black.svg\"\r\n                alt=\"Left Arrow\"\r\n              />\r\n            }\r\n          </a>\r\n        </li>\r\n        <!-- Previous -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage - 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n          @if(activePage === 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-gray.svg\"\r\n              alt=\"Left Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-black.svg\"\r\n              alt=\"Left Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Page Numbers -->\r\n        <li *ngFor=\"let item of paginate()\">\r\n          <a\r\n            (click)=\"onClickPage(item)\"\r\n            href=\"javascript:void(0)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 leading-6 rounded-lg\"\r\n            [ngClass]=\"item === activePage\r\n              ? 'text-[#15191E] bg-[#F8F8FA] hover:bg-[#F8F8FA]'\r\n              : 'hover:bg-[#F8F8FA] hover:text-[#15191E]'\">\r\n            {{ item }}\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Next -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage + 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/pagination-right-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n                src=\"../../assets/icons/pagination-right-black.svg\"\r\n                alt=\"Right Arrow\"\r\n              />\r\n          }\r\n          </a>\r\n        </li>\r\n        <!-- next double arrow  -->\r\n                 <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(getTotalPages())\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-black.svg\"\r\n              alt=\"Right Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'bk-pagination', imports: [CommonModule, FormsModule, BkSelect], standalone: true, template: "<div class=\"md:px-4 px-2 md:py-3 py-2 border-t border-[#EBEDF3] rounded-b-xl\">\r\n  <div class=\"flex flex-row items-center justify-between md:gap-3 gap-1 {{ customClass }}\">\r\n\r\n    <!-- Page size dropdown -->\r\n\r\n    @if (!pageSizeHidden) {\r\n    <div class=\"flex gap-3 items-center pagination\">\r\n      @if (showPageSizeLabel) {\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">Rows per page</p>\r\n      }\r\n      @if (showPageSizeInput) {\r\n        <bk-select\r\n          [items]=\"pageSizesList\"\r\n          [searchable]=\"false\"\r\n          bindLabel=\"key\"\r\n          bindValue=\"value\"\r\n          [clearable]=\"false\"\r\n          [(ngModel)]=\"pageSize\"\r\n          [dropdownPosition]=\"'top'\"\r\n          (change)=\"changeSize($event)\"\r\n          [variation]=\"'sm'\"\r\n          [isResponsive]=\"false\"\r\n          class=\"!min-w-[90px] lg:!min-w-[131px]\"\r\n          >\r\n        </bk-select>\r\n      }\r\n    </div>\r\n    }\r\n\r\n    <!-- showing entries -->\r\n    @if (showRecordsText) {\r\n    <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n      Showing <span>{{ startIndex }}</span> to\r\n      <span>{{ endIndex > totalItems ? totalItems : endIndex }}</span> of\r\n      <span>{{ totalItems }}</span> Records\r\n    </p>\r\n    }\r\n\r\n    <!-- Pagination main -->\r\n    <!-- With 2+ top-level blocks visible, the parent row's justify-between already\r\n         pins this to the end on its own; customClass on the row (e.g. \"justify-end\")\r\n         controls arrangement among those blocks.\r\n         Hidden down to just this one, there's nothing left for the row to distribute\r\n         against, so it grows to fill the row (flex-1) instead \u2014 letting customClass\r\n         act here on its own two children (page count text vs. the page-number list)\r\n         via e.g. \"justify-between\" or \"justify-around\". -->\r\n    <nav\r\n      class=\"flex gap-1.5 items-center {{ customClass }}\"\r\n      [class.flex-1]=\"pageSizeHidden && !showRecordsText\"\r\n    >\r\n\r\n      @if (showPageCount) {\r\n      <!-- Page count -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n        <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n\r\n      <!-- Page count mobile version -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:hidden block\">\r\n      <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n      }\r\n\r\n      <ul class=\"flex items-center space-x-1 text-[13px] text-[#B9BBC6]\">\r\n\r\n        <!-- Previous -->\r\n        <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n            @if(activePage === 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-gray.svg\"\r\n                alt=\"Left Arrow Disabled\"\r\n              />\r\n            }\r\n            @if(activePage !== 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-black.svg\"\r\n                alt=\"Left Arrow\"\r\n              />\r\n            }\r\n          </a>\r\n        </li>\r\n        <!-- Previous -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage - 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n          @if(activePage === 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-gray.svg\"\r\n              alt=\"Left Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-black.svg\"\r\n              alt=\"Left Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Page Numbers -->\r\n        <li *ngFor=\"let item of paginate()\">\r\n          <a\r\n            (click)=\"onClickPage(item)\"\r\n            href=\"javascript:void(0)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 leading-6 rounded-lg\"\r\n            [ngClass]=\"item === activePage\r\n              ? 'text-[#15191E] bg-[#F8F8FA] hover:bg-[#F8F8FA]'\r\n              : 'hover:bg-[#F8F8FA] hover:text-[#15191E]'\">\r\n            {{ item }}\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Next -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage + 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/pagination-right-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n                src=\"../../assets/icons/pagination-right-black.svg\"\r\n                alt=\"Right Arrow\"\r\n              />\r\n          }\r\n          </a>\r\n        </li>\r\n        <!-- next double arrow  -->\r\n                 <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(getTotalPages())\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-black.svg\"\r\n              alt=\"Right Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { pageSize: [{
                 type: Input
             }], total: [{
@@ -9762,6 +9910,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], activePageChange: [{
                 type: Output
+            }], showPageSize: [{
+                type: Input
+            }], showRecordsText: [{
+                type: Input
+            }], showPageCount: [{
+                type: Input
+            }], customClass: [{
+                type: Input
             }] } });
 
 class BkLoader {
@@ -11145,9 +11301,13 @@ class BkTable {
      * job either way.
      */
     showLoadingOverlay = input(true, ...(ngDevMode ? [{ debugName: "showLoadingOverlay" }] : []));
-    /** Shown when there are no rows to render. */
-    noResultText = input('Data may be empty, or try adjusting your filter.', ...(ngDevMode ? [{ debugName: "noResultText" }] : []));
-    noResultImage = input('./assets/media/logos/no-data-found.jpg', ...(ngDevMode ? [{ debugName: "noResultImage" }] : []));
+    /**
+     * Shown when there are no rows to render. Pass either `text` or `image` (or
+     * both) to override just that piece — anything left out keeps the default.
+     */
+    noResult = input({}, ...(ngDevMode ? [{ debugName: "noResult" }] : []));
+    noResultText = computed(() => this.noResult().text ?? 'Data may be empty, or try adjusting your filter.', ...(ngDevMode ? [{ debugName: "noResultText" }] : []));
+    noResultImage = computed(() => this.noResult().image ?? './assets/icons/no-data-found.jpg', ...(ngDevMode ? [{ debugName: "noResultImage" }] : []));
     /**
      * Set once `noResultImage()` fails to load, so the template can drop the
      * `<img>` instead of leaving the browser's broken-image glyph sitting next
@@ -11555,14 +11715,14 @@ class BkTable {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTable, isStandalone: true, selector: "bk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showLoadingOverlay: { classPropertyName: "showLoadingOverlay", publicName: "showLoadingOverlay", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null }, noResultImage: { classPropertyName: "noResultImage", publicName: "noResultImage", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null }, frontPagination: { classPropertyName: "frontPagination", publicName: "frontPagination", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, virtualItemSize: { classPropertyName: "virtualItemSize", publicName: "virtualItemSize", isSignal: true, isRequired: false, transformFunction: null }, virtualTrackBy: { classPropertyName: "virtualTrackBy", publicName: "virtualTrackBy", isSignal: true, isRequired: false, transformFunction: null }, stableColumnWidth: { classPropertyName: "stableColumnWidth", publicName: "stableColumnWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageIndex: "pageIndexChange", pageSize: "pageSizeChange", queryParams: "queryParams", currentPageDataChange: "currentPageDataChange" }, host: { classAttribute: "bk-table-host" }, queries: [{ propertyName: "titleContent", first: true, predicate: BkTableTitle, descendants: true }, { propertyName: "footerContent", first: true, predicate: BkTableFooter, descendants: true }, { propertyName: "virtualScroll", first: true, predicate: BkVirtualScroll, descendants: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "virtualHead", first: true, predicate: ["virtualHead"], descendants: true }], exportAs: ["bkTable"], ngImport: i0, template: "<!--\r\n  Projection slots live inside <ng-template> rather than directly in the\r\n  branches below. A given <ng-content> can only be declared once \u00E2\u20AC\u201D repeating\r\n  the same selector in both the virtual and normal branches would leave one of\r\n  them permanently empty. Wrapping each slot in a template declares it once and\r\n  lets an outlet place it wherever it is needed.\r\n-->\r\n<ng-template #headSlot><ng-content select=\"thead\"></ng-content></ng-template>\r\n<ng-template #bodySlot><ng-content select=\"tbody\"></ng-content></ng-template>\r\n<ng-template #footSlot><ng-content select=\"tfoot\"></ng-content></ng-template>\r\n\r\n<div\r\n  class=\"bk-table-wrapper\"\r\n  [class.bk-table-bordered]=\"bordered()\"\r\n  [ngClass]=\"sizeClass()\"\r\n>\r\n  <!--\r\n    The frame is one box, and it is the only box that draws an outline or a\r\n    corner. Radius on the header cells and border on the table (or on the title\r\n    bar) means two boxes describing the same corner from different places, and\r\n    they disagree the moment a title bar appears above the header. Everything\r\n    inside here draws separators only; `overflow: hidden` clips them to the curve.\r\n  -->\r\n  <div class=\"bk-table-frame\">\r\n    @if (hasTitle()) {\r\n      <div class=\"bk-table-title-bar\">\r\n        @if (title()) {\r\n          {{ title() }}\r\n        }\r\n        <ng-content select=\"[bkTableTitle]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"bk-table-container\" [ngStyle]=\"containerStyle()\">\r\n      @if (isVirtual() && virtualScroll) {\r\n        <!--\r\n          Header and body are two separate tables here, which they are not in any\r\n          other mode. The CDK viewport scrolls by translating its content wrapper,\r\n          and a transformed ancestor takes over as the containing block for\r\n          sticky descendants \u00E2\u20AC\u201D so a header inside the viewport gets dragged along\r\n          by the very transform it is supposed to stay still against. Lifting it\r\n          out is the only way it stays put.\r\n\r\n          The cost is that the two tables can no longer size each other, so a\r\n          shared <colgroup> holds their columns in alignment and the body's\r\n          horizontal scroll is mirrored onto the header by hand.\r\n        -->\r\n        <div #virtualHead class=\"bk-table-virtual-head\">\r\n          <table class=\"bk-table\" [ngStyle]=\"tableStyle()\">\r\n            <colgroup>\r\n              @for (width of colWidths(); track $index) {\r\n                <col [style.width]=\"width\" />\r\n              }\r\n            </colgroup>\r\n            <ng-container [ngTemplateOutlet]=\"headSlot\"></ng-container>\r\n          </table>\r\n        </div>\r\n\r\n        <cdk-virtual-scroll-viewport\r\n          class=\"bk-table-viewport\"\r\n          [itemSize]=\"virtualItemSize()\"\r\n          [style.height]=\"scroll().y || '400px'\"\r\n          (scroll)=\"onViewportScroll($event)\"\r\n        >\r\n          <table class=\"bk-table\" [ngStyle]=\"tableStyle()\">\r\n            <colgroup>\r\n              @for (width of colWidths(); track $index) {\r\n                <col [style.width]=\"width\" />\r\n              }\r\n            </colgroup>\r\n            <tbody>\r\n              <ng-container\r\n                *cdkVirtualFor=\"\r\n                  let row of renderData();\r\n                  let i = index;\r\n                  trackBy: virtualTrackBy()\r\n                \"\r\n                [ngTemplateOutlet]=\"virtualScroll.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\r\n              ></ng-container>\r\n            </tbody>\r\n            <ng-container [ngTemplateOutlet]=\"footSlot\"></ng-container>\r\n          </table>\r\n        </cdk-virtual-scroll-viewport>\r\n      } @else {\r\n        <table class=\"bk-table\" [ngStyle]=\"tableStyle()\">\r\n          <ng-container [ngTemplateOutlet]=\"headSlot\"></ng-container>\r\n          <ng-container [ngTemplateOutlet]=\"bodySlot\"></ng-container>\r\n          <ng-container [ngTemplateOutlet]=\"footSlot\"></ng-container>\r\n        </table>\r\n      }\r\n\r\n      @if (loading() && showLoadingOverlay()) {\r\n        <div class=\"bk-table-loading\">\r\n          <span class=\"bk-table-spinner\"></span>\r\n        </div>\r\n      }\r\n\r\n      @if (isEmpty()) {\r\n        <div class=\"bk-table-empty\">\r\n          @if (!emptyImageFailed()) {\r\n            <img\r\n              [src]=\"noResultImage()\"\r\n              class=\"bk-table-empty-img\"\r\n              alt=\"No data found\"\r\n              (error)=\"onEmptyImageError()\"\r\n            />\r\n          }\r\n          <span class=\"bk-table-empty-text\">{{ noResultText() }}</span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (hasFooter()) {\r\n      <div class=\"bk-table-footer-bar\">\r\n        @if (footer()) {\r\n          {{ footer() }}\r\n        }\r\n        <ng-content select=\"[bkTableFooter]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <!-- Inside the frame: the pager belongs to the table it drives, and the\r\n         frame's bottom edge is what closes the card around both.\r\n\r\n         `!isEmpty()`, not `totalCount() > 0`: in server mode `totalCount()`\r\n         is just the `total` input, which can say more rows exist than are\r\n         actually on screen right now (a search with no matches but a stale\r\n         total, a page past the end) \u2014 the pager has nothing to page through\r\n         either way, so it goes by what's actually rendered. -->\r\n    @if (showPagination() && !isEmpty()) {\r\n      <div class=\"bk-table-pagination\">\r\n        <bk-pagination\r\n          [total]=\"totalCount()\"\r\n          [pageSize]=\"pageSize()\"\r\n          [activePage]=\"pageIndex()\"\r\n          (pageChanged)=\"onPageIndexChange($event)\"\r\n          (changePageSize)=\"onPageSizeChange($event)\"\r\n        ></bk-pagination>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".bk-table-host{display:block}.bk-table-wrapper{@apply w-full;}.bk-table-frame{border:1px solid #ebedf3;border-radius:.75rem;overflow:hidden}.bk-table-title-bar,.bk-table-footer-bar{@apply text-[13px] font-semibold text-[#15191E] bg-[#F9FAFA] px-4 py-2.5;}.bk-table-title-bar{border-bottom:1px solid #ebedf3}.bk-table-footer-bar{border-top:1px solid #ebedf3}.bk-table-container{@apply relative overflow-auto;}.bk-table{@apply min-w-full text-left;border-collapse:separate;border-spacing:0}.bk-th{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap align-middle;border-bottom:1px solid #ebedf3;position:sticky;top:0;z-index:2}.bk-table thead tr:nth-child(2) .bk-th{top:var(--bk-thead-row-1, 38px);z-index:1}.bk-th-content{@apply flex items-center justify-between gap-1;}.bk-th-align-right .bk-th-content{@apply justify-end;}.bk-th-align-center .bk-th-content{@apply justify-center;}.bk-th-label{@apply inline-flex items-center gap-1;}.bk-th-sortable .bk-th-label{@apply cursor-pointer select-none;}.bk-th-selection{@apply flex items-center gap-1;}.bk-cell-selection{@apply px-3;}.bk-th-selection-caret{@apply inline-flex items-center justify-center size-4 rounded hover:bg-[#EFF1F4];}.bk-td{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 align-middle bg-white;border-bottom:1px solid #ebedf3}.bk-td-content{@apply inline-flex items-center gap-1 align-middle;}.bk-td-content-block{@apply block w-full;}.bk-table tbody tr:hover .bk-td{@apply bg-[#FBFBFC];}.bk-table-lg .bk-th{@apply px-5 py-3.5 text-[13px];}.bk-table-lg .bk-td{@apply px-5 py-3.5 text-sm leading-5;}.bk-table-md .bk-th{@apply px-3 py-2;}.bk-table-md .bk-td{@apply px-3 py-1.5;}.bk-table-sm .bk-th{@apply px-2 py-1.5 text-[11px];}.bk-table-sm .bk-td{@apply px-2 py-1 text-xs;}.bk-table-lg .bk-cell-selection{@apply px-4;}.bk-table-md .bk-cell-selection{@apply px-2.5;}.bk-table-sm .bk-cell-selection{@apply px-2;}.bk-table-bordered .bk-th,.bk-table-bordered .bk-td{border-right:1px solid #ebedf3}.bk-table-bordered .bk-th:last-child,.bk-table-bordered .bk-td:last-child{border-right:0}.bk-table tbody tr:last-child>.bk-td{border-bottom:0}.bk-table-underfilled .bk-table tbody tr:last-child>.bk-td{border-bottom:1px solid #ebedf3}.bk-cell-sticky{position:sticky;z-index:1}.bk-th.bk-cell-sticky{z-index:3}.bk-cell-sticky-left:after,.bk-cell-sticky-right:before{content:\"\";@apply absolute top-0 bottom-0 w-2 pointer-events-none;}.bk-cell-sticky-left:after{right:-8px;background-image:linear-gradient(to right,rgba(0,0,0,.05),transparent)}.bk-cell-sticky-right:before{left:-8px;background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.bk-cell-ellipsis{@apply overflow-hidden text-ellipsis whitespace-nowrap;max-width:0}.bk-td-content-ellipsis{@apply flex w-full;}.bk-td-ellipsis-text{@apply overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1;}.bk-cell-break-word{@apply whitespace-normal;word-break:break-all}.bk-td-indent{@apply inline-block;}.bk-td-expand,.bk-td-expand-spacer{@apply inline-flex items-center justify-center size-4 shrink-0;}.bk-td-expand{@apply rounded text-[#78829D] hover:bg-[#EFF1F4] transition-transform duration-200;transform:rotate(-90deg)}.bk-td-expand-open{transform:rotate(0)}.bk-expanded-row>.bk-td,.bk-expanded-row>td{@apply bg-[#FBFBFC];}.bk-td-flush{@apply p-3;}.bk-table-flush .bk-table-frame{border:0;border-radius:0}.bk-table-summary .bk-td{@apply bg-[#F9FAFA] font-semibold;border-top:1px solid #ebedf3;border-bottom:0}.bk-table-summary-fixed .bk-td{position:sticky;bottom:0;z-index:2}.bk-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.bk-sort-icon:before,.bk-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover}.bk-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.bk-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.bk-sort-asc:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.bk-sort-asc:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.bk-sort-desc:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.bk-sort-desc:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.bk-sort-priority{@apply inline-flex items-center justify-center min-w-4 h-4 px-1 rounded bg-[#EFF1F4] text-[10px] font-semibold text-[#4B5675];}.bk-filter-trigger{@apply inline-flex items-center justify-center size-5 rounded text-[#78829D] hover:bg-[#EFF1F4];}.bk-filter-active{@apply text-black;}.bk-filter-menu{@apply min-w-[180px];}.bk-filter-list{@apply flex flex-col gap-2 max-h-60 overflow-y-auto py-1;}.bk-filter-option{@apply text-[13px] text-[#15191E];}.bk-filter-actions{@apply flex items-center justify-between gap-2 pt-2 mt-2;border-top:1px solid #ebedf3}.bk-filter-btn{@apply text-xs font-semibold px-2.5 py-1 rounded;}.bk-filter-btn-link{@apply text-[#60646C] hover:bg-[#F1F2F4];}.bk-filter-btn-primary{@apply bg-black text-white hover:bg-[#2A2E36];}.bk-table-menu{@apply min-w-[160px] flex flex-col;}.bk-table-menu-item{@apply w-full text-left text-[13px] text-[#15191E] px-2 py-1.5 rounded hover:bg-[#F1F2F4];}.bk-table-loading{@apply absolute inset-0 flex items-center justify-center bg-white/60 z-10;}.bk-table-spinner{@apply block size-8 rounded-full border-2 border-[#EBEDF3] border-t-black;animation:bk-table-spin .8s linear infinite}@keyframes bk-table-spin{to{transform:rotate(360deg)}}.bk-table-empty{@apply absolute inset-x-0 bottom-0 flex flex-col justify-center items-center py-10;top:var(--bk-thead-row-1, 38px)}.bk-table-empty-img{@apply mb-3 w-96 max-w-full;}.bk-table-empty-text{@apply block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2;}.bk-table-pagination{@apply contents;}.bk-table-viewport{@apply w-full;}.bk-table-virtual-head{@apply w-full overflow-hidden;}.bk-table-virtual-head .bk-th{position:static}.bk-checkbox-indeterminate .checkbox{@apply bg-black border-black;}.bk-checkbox-indeterminate .checkbox:after{content:\"\";@apply absolute w-2 h-0.5 bg-white rounded-sm;}.cdk-drag-preview{display:table;table-layout:fixed;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.bk-drag-handle{@apply cursor-move inline-flex items-center justify-center text-[#C4CADA] hover:text-[#78829D] mr-2 align-middle;}.bk-tree-drop-line{@apply absolute pointer-events-none rounded-full;height:2px;background:#15191e;z-index:5}.bk-table tbody tr.bk-tree-drop-inside .bk-td{background:#f1f2f4;box-shadow:inset 0 0 0 1px #15191e59}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: BkPagination, selector: "bk-pagination", inputs: ["pageSize", "total", "activePage"], outputs: ["changePageSize", "pageChanged", "activePageChange"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTable, isStandalone: true, selector: "bk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showLoadingOverlay: { classPropertyName: "showLoadingOverlay", publicName: "showLoadingOverlay", isSignal: true, isRequired: false, transformFunction: null }, noResult: { classPropertyName: "noResult", publicName: "noResult", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null }, frontPagination: { classPropertyName: "frontPagination", publicName: "frontPagination", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, virtualItemSize: { classPropertyName: "virtualItemSize", publicName: "virtualItemSize", isSignal: true, isRequired: false, transformFunction: null }, virtualTrackBy: { classPropertyName: "virtualTrackBy", publicName: "virtualTrackBy", isSignal: true, isRequired: false, transformFunction: null }, stableColumnWidth: { classPropertyName: "stableColumnWidth", publicName: "stableColumnWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageIndex: "pageIndexChange", pageSize: "pageSizeChange", queryParams: "queryParams", currentPageDataChange: "currentPageDataChange" }, host: { classAttribute: "bk-table-host" }, queries: [{ propertyName: "titleContent", first: true, predicate: BkTableTitle, descendants: true }, { propertyName: "footerContent", first: true, predicate: BkTableFooter, descendants: true }, { propertyName: "virtualScroll", first: true, predicate: BkVirtualScroll, descendants: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "virtualHead", first: true, predicate: ["virtualHead"], descendants: true }], exportAs: ["bkTable"], ngImport: i0, template: "<!--\r\n  Projection slots live inside <ng-template> rather than directly in the\r\n  branches below. A given <ng-content> can only be declared once \u00E2\u20AC\u201D repeating\r\n  the same selector in both the virtual and normal branches would leave one of\r\n  them permanently empty. Wrapping each slot in a template declares it once and\r\n  lets an outlet place it wherever it is needed.\r\n-->\r\n<ng-template #headSlot><ng-content select=\"thead\"></ng-content></ng-template>\r\n<ng-template #bodySlot><ng-content select=\"tbody\"></ng-content></ng-template>\r\n<ng-template #footSlot><ng-content select=\"tfoot\"></ng-content></ng-template>\r\n\r\n<div\r\n  class=\"bk-table-wrapper\"\r\n  [class.bk-table-bordered]=\"bordered()\"\r\n  [ngClass]=\"sizeClass()\"\r\n>\r\n  <!--\r\n    The frame is one box, and it is the only box that draws an outline or a\r\n    corner. Radius on the header cells and border on the table (or on the title\r\n    bar) means two boxes describing the same corner from different places, and\r\n    they disagree the moment a title bar appears above the header. Everything\r\n    inside here draws separators only; `overflow: hidden` clips them to the curve.\r\n  -->\r\n  <div class=\"bk-table-frame\">\r\n    @if (hasTitle()) {\r\n      <div class=\"bk-table-title-bar\">\r\n        @if (title()) {\r\n          {{ title() }}\r\n        }\r\n        <ng-content select=\"[bkTableTitle]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"bk-table-container\" [ngStyle]=\"containerStyle()\">\r\n      @if (isVirtual() && virtualScroll) {\r\n        <!--\r\n          Header and body are two separate tables here, which they are not in any\r\n          other mode. The CDK viewport scrolls by translating its content wrapper,\r\n          and a transformed ancestor takes over as the containing block for\r\n          sticky descendants \u00E2\u20AC\u201D so a header inside the viewport gets dragged along\r\n          by the very transform it is supposed to stay still against. Lifting it\r\n          out is the only way it stays put.\r\n\r\n          The cost is that the two tables can no longer size each other, so a\r\n          shared <colgroup> holds their columns in alignment and the body's\r\n          horizontal scroll is mirrored onto the header by hand.\r\n        -->\r\n        <div #virtualHead class=\"bk-table-virtual-head\">\r\n          <table class=\"bk-table\" [ngStyle]=\"tableStyle()\">\r\n            <colgroup>\r\n              @for (width of colWidths(); track $index) {\r\n                <col [style.width]=\"width\" />\r\n              }\r\n            </colgroup>\r\n            <ng-container [ngTemplateOutlet]=\"headSlot\"></ng-container>\r\n          </table>\r\n        </div>\r\n\r\n        <cdk-virtual-scroll-viewport\r\n          class=\"bk-table-viewport\"\r\n          [itemSize]=\"virtualItemSize()\"\r\n          [style.height]=\"scroll().y || '400px'\"\r\n          (scroll)=\"onViewportScroll($event)\"\r\n        >\r\n          <table class=\"bk-table\" [ngStyle]=\"tableStyle()\">\r\n            <colgroup>\r\n              @for (width of colWidths(); track $index) {\r\n                <col [style.width]=\"width\" />\r\n              }\r\n            </colgroup>\r\n            <tbody>\r\n              <ng-container\r\n                *cdkVirtualFor=\"\r\n                  let row of renderData();\r\n                  let i = index;\r\n                  trackBy: virtualTrackBy()\r\n                \"\r\n                [ngTemplateOutlet]=\"virtualScroll.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\r\n              ></ng-container>\r\n            </tbody>\r\n            <ng-container [ngTemplateOutlet]=\"footSlot\"></ng-container>\r\n          </table>\r\n        </cdk-virtual-scroll-viewport>\r\n      } @else {\r\n        <table class=\"bk-table\" [ngStyle]=\"tableStyle()\">\r\n          <ng-container [ngTemplateOutlet]=\"headSlot\"></ng-container>\r\n          <ng-container [ngTemplateOutlet]=\"bodySlot\"></ng-container>\r\n          <ng-container [ngTemplateOutlet]=\"footSlot\"></ng-container>\r\n        </table>\r\n      }\r\n\r\n      @if (loading() && showLoadingOverlay()) {\r\n        <div class=\"bk-table-loading\">\r\n          <span class=\"bk-table-spinner\"></span>\r\n        </div>\r\n      }\r\n\r\n      @if (isEmpty()) {\r\n        <div class=\"bk-table-empty\">\r\n          @if (!emptyImageFailed()) {\r\n            <img\r\n              [src]=\"noResultImage()\"\r\n              class=\"bk-table-empty-img\"\r\n              alt=\"No data found\"\r\n              (error)=\"onEmptyImageError()\"\r\n            />\r\n          }\r\n          <span class=\"bk-table-empty-text\">{{ noResultText() }}</span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (hasFooter()) {\r\n      <div class=\"bk-table-footer-bar\">\r\n        @if (footer()) {\r\n          {{ footer() }}\r\n        }\r\n        <ng-content select=\"[bkTableFooter]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <!-- Inside the frame: the pager belongs to the table it drives, and the\r\n         frame's bottom edge is what closes the card around both.\r\n\r\n         `!isEmpty()`, not `totalCount() > 0`: in server mode `totalCount()`\r\n         is just the `total` input, which can say more rows exist than are\r\n         actually on screen right now (a search with no matches but a stale\r\n         total, a page past the end) \u2014 the pager has nothing to page through\r\n         either way, so it goes by what's actually rendered. -->\r\n    @if (showPagination() && !isEmpty()) {\r\n      <div class=\"bk-table-pagination\">\r\n        <bk-pagination\r\n          [total]=\"totalCount()\"\r\n          [pageSize]=\"pageSize()\"\r\n          [activePage]=\"pageIndex()\"\r\n          (pageChanged)=\"onPageIndexChange($event)\"\r\n          (changePageSize)=\"onPageSizeChange($event)\"\r\n        ></bk-pagination>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".bk-table-host{display:block}.bk-table-wrapper{@apply w-full;}.bk-table-frame{border:1px solid #ebedf3;border-radius:.75rem;overflow:hidden}.bk-table-title-bar,.bk-table-footer-bar{@apply text-[13px] font-semibold text-[#15191E] bg-[#F9FAFA] px-4 py-2.5;}.bk-table-title-bar{border-bottom:1px solid #ebedf3}.bk-table-footer-bar{border-top:1px solid #ebedf3}.bk-table-container{@apply relative overflow-auto;}.bk-table{@apply min-w-full text-left;border-collapse:separate;border-spacing:0}.bk-th{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap align-middle;border-bottom:1px solid #ebedf3;position:sticky;top:0;z-index:2}.bk-table thead tr:nth-child(2) .bk-th{top:var(--bk-thead-row-1, 38px);z-index:1}.bk-th-content{@apply flex items-center justify-between gap-1;}.bk-th-align-right .bk-th-content{@apply justify-end;}.bk-th-align-center .bk-th-content{@apply justify-center;}.bk-th-label{@apply inline-flex items-center gap-1;}.bk-th-sortable .bk-th-label{@apply cursor-pointer select-none;}.bk-th-selection{@apply flex items-center gap-1;}.bk-cell-selection{@apply px-3;}.bk-th-selection-caret{@apply inline-flex items-center justify-center size-4 rounded hover:bg-[#EFF1F4];}.bk-td{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 align-middle bg-white;border-bottom:1px solid #ebedf3}.bk-td-content{@apply inline-flex items-center gap-1 align-middle;}.bk-td-content-block{@apply block w-full;}.bk-table tbody tr:hover .bk-td{@apply bg-[#FBFBFC];}.bk-table-lg .bk-th{@apply px-5 py-3.5 text-[13px];}.bk-table-lg .bk-td{@apply px-5 py-3.5 text-sm leading-5;}.bk-table-md .bk-th{@apply px-3 py-2;}.bk-table-md .bk-td{@apply px-3 py-1.5;}.bk-table-sm .bk-th{@apply px-2 py-1.5 text-[11px];}.bk-table-sm .bk-td{@apply px-2 py-1 text-xs;}.bk-table-lg .bk-cell-selection{@apply px-4;}.bk-table-md .bk-cell-selection{@apply px-2.5;}.bk-table-sm .bk-cell-selection{@apply px-2;}.bk-table-bordered .bk-th,.bk-table-bordered .bk-td{border-right:1px solid #ebedf3}.bk-table-bordered .bk-th:last-child,.bk-table-bordered .bk-td:last-child{border-right:0}.bk-table tbody tr:last-child>.bk-td{border-bottom:0}.bk-table-underfilled .bk-table tbody tr:last-child>.bk-td{border-bottom:1px solid #ebedf3}.bk-cell-sticky{position:sticky;z-index:1}.bk-th.bk-cell-sticky{z-index:3}.bk-cell-sticky-left:after,.bk-cell-sticky-right:before{content:\"\";@apply absolute top-0 bottom-0 w-2 pointer-events-none;}.bk-cell-sticky-left:after{right:-8px;background-image:linear-gradient(to right,rgba(0,0,0,.05),transparent)}.bk-cell-sticky-right:before{left:-8px;background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.bk-cell-ellipsis{@apply overflow-hidden text-ellipsis whitespace-nowrap;max-width:0}.bk-td-content-ellipsis{@apply flex w-full;}.bk-td-ellipsis-text{@apply overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1;}.bk-cell-break-word{@apply whitespace-normal;word-break:break-all}.bk-td-indent{@apply inline-block;}.bk-td-expand,.bk-td-expand-spacer{@apply inline-flex items-center justify-center size-4 shrink-0;}.bk-td-expand{@apply rounded text-[#78829D] hover:bg-[#EFF1F4] transition-transform duration-200;transform:rotate(-90deg)}.bk-td-expand-open{transform:rotate(0)}.bk-expanded-row>.bk-td,.bk-expanded-row>td{@apply bg-[#FBFBFC];}.bk-td-flush{@apply p-3;}.bk-table-flush .bk-table-frame{border:0;border-radius:0}.bk-table-summary .bk-td{@apply bg-[#F9FAFA] font-semibold;border-top:1px solid #ebedf3;border-bottom:0}.bk-table-summary-fixed .bk-td{position:sticky;bottom:0;z-index:2}.bk-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.bk-sort-icon:before,.bk-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover}.bk-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.bk-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.bk-sort-asc:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.bk-sort-asc:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.bk-sort-desc:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.bk-sort-desc:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.bk-sort-priority{@apply inline-flex items-center justify-center min-w-4 h-4 px-1 rounded bg-[#EFF1F4] text-[10px] font-semibold text-[#4B5675];}.bk-filter-trigger{@apply inline-flex items-center justify-center size-5 rounded text-[#78829D] hover:bg-[#EFF1F4];}.bk-filter-active{@apply text-black;}.bk-filter-menu{@apply min-w-[180px];}.bk-filter-list{@apply flex flex-col gap-2 max-h-60 overflow-y-auto py-1;}.bk-filter-option{@apply text-[13px] text-[#15191E];}.bk-filter-actions{@apply flex items-center justify-between gap-2 pt-2 mt-2;border-top:1px solid #ebedf3}.bk-filter-btn{@apply text-xs font-semibold px-2.5 py-1 rounded;}.bk-filter-btn-link{@apply text-[#60646C] hover:bg-[#F1F2F4];}.bk-filter-btn-primary{@apply bg-black text-white hover:bg-[#2A2E36];}.bk-table-menu{@apply min-w-[160px] flex flex-col;}.bk-table-menu-item{@apply w-full text-left text-[13px] text-[#15191E] px-2 py-1.5 rounded hover:bg-[#F1F2F4];}.bk-table-loading{@apply absolute inset-0 flex items-center justify-center bg-white/60 z-10;}.bk-table-spinner{@apply block size-8 rounded-full border-2 border-[#EBEDF3] border-t-black;animation:bk-table-spin .8s linear infinite}@keyframes bk-table-spin{to{transform:rotate(360deg)}}.bk-table-empty{@apply absolute inset-x-0 bottom-0 flex flex-col justify-center items-center py-10;top:var(--bk-thead-row-1, 38px)}.bk-table-empty-img{@apply mb-3 w-96 max-w-full;}.bk-table-empty-text{@apply block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2;}.bk-table-pagination{@apply contents;}.bk-table-viewport{@apply w-full;}.bk-table-virtual-head{@apply w-full overflow-hidden;}.bk-table-virtual-head .bk-th{position:static}.bk-checkbox-indeterminate .checkbox{@apply bg-black border-black;}.bk-checkbox-indeterminate .checkbox:after{content:\"\";@apply absolute w-2 h-0.5 bg-white rounded-sm;}.cdk-drag-preview{display:table;table-layout:fixed;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.bk-drag-handle{@apply cursor-move inline-flex items-center justify-center text-[#C4CADA] hover:text-[#78829D] mr-2 align-middle;}.bk-tree-drop-line{@apply absolute pointer-events-none rounded-full;height:2px;background:#15191e;z-index:5}.bk-table tbody tr.bk-tree-drop-inside .bk-td{background:#f1f2f4;box-shadow:inset 0 0 0 1px #15191e59}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: BkPagination, selector: "bk-pagination", inputs: ["pageSize", "total", "activePage", "showPageSize", "showRecordsText", "showPageCount", "customClass"], outputs: ["changePageSize", "pageChanged", "activePageChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTable, decorators: [{
             type: Component,
             args: [{ selector: 'bk-table', standalone: true, exportAs: 'bkTable', imports: [CommonModule, ScrollingModule, BkPagination], encapsulation: ViewEncapsulation.None, host: {
                         class: 'bk-table-host'
                     }, template: "<!--\r\n  Projection slots live inside <ng-template> rather than directly in the\r\n  branches below. A given <ng-content> can only be declared once \u00E2\u20AC\u201D repeating\r\n  the same selector in both the virtual and normal branches would leave one of\r\n  them permanently empty. Wrapping each slot in a template declares it once and\r\n  lets an outlet place it wherever it is needed.\r\n-->\r\n<ng-template #headSlot><ng-content select=\"thead\"></ng-content></ng-template>\r\n<ng-template #bodySlot><ng-content select=\"tbody\"></ng-content></ng-template>\r\n<ng-template #footSlot><ng-content select=\"tfoot\"></ng-content></ng-template>\r\n\r\n<div\r\n  class=\"bk-table-wrapper\"\r\n  [class.bk-table-bordered]=\"bordered()\"\r\n  [ngClass]=\"sizeClass()\"\r\n>\r\n  <!--\r\n    The frame is one box, and it is the only box that draws an outline or a\r\n    corner. Radius on the header cells and border on the table (or on the title\r\n    bar) means two boxes describing the same corner from different places, and\r\n    they disagree the moment a title bar appears above the header. Everything\r\n    inside here draws separators only; `overflow: hidden` clips them to the curve.\r\n  -->\r\n  <div class=\"bk-table-frame\">\r\n    @if (hasTitle()) {\r\n      <div class=\"bk-table-title-bar\">\r\n        @if (title()) {\r\n          {{ title() }}\r\n        }\r\n        <ng-content select=\"[bkTableTitle]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"bk-table-container\" [ngStyle]=\"containerStyle()\">\r\n      @if (isVirtual() && virtualScroll) {\r\n        <!--\r\n          Header and body are two separate tables here, which they are not in any\r\n          other mode. The CDK viewport scrolls by translating its content wrapper,\r\n          and a transformed ancestor takes over as the containing block for\r\n          sticky descendants \u00E2\u20AC\u201D so a header inside the viewport gets dragged along\r\n          by the very transform it is supposed to stay still against. Lifting it\r\n          out is the only way it stays put.\r\n\r\n          The cost is that the two tables can no longer size each other, so a\r\n          shared <colgroup> holds their columns in alignment and the body's\r\n          horizontal scroll is mirrored onto the header by hand.\r\n        -->\r\n        <div #virtualHead class=\"bk-table-virtual-head\">\r\n          <table class=\"bk-table\" [ngStyle]=\"tableStyle()\">\r\n            <colgroup>\r\n              @for (width of colWidths(); track $index) {\r\n                <col [style.width]=\"width\" />\r\n              }\r\n            </colgroup>\r\n            <ng-container [ngTemplateOutlet]=\"headSlot\"></ng-container>\r\n          </table>\r\n        </div>\r\n\r\n        <cdk-virtual-scroll-viewport\r\n          class=\"bk-table-viewport\"\r\n          [itemSize]=\"virtualItemSize()\"\r\n          [style.height]=\"scroll().y || '400px'\"\r\n          (scroll)=\"onViewportScroll($event)\"\r\n        >\r\n          <table class=\"bk-table\" [ngStyle]=\"tableStyle()\">\r\n            <colgroup>\r\n              @for (width of colWidths(); track $index) {\r\n                <col [style.width]=\"width\" />\r\n              }\r\n            </colgroup>\r\n            <tbody>\r\n              <ng-container\r\n                *cdkVirtualFor=\"\r\n                  let row of renderData();\r\n                  let i = index;\r\n                  trackBy: virtualTrackBy()\r\n                \"\r\n                [ngTemplateOutlet]=\"virtualScroll.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\r\n              ></ng-container>\r\n            </tbody>\r\n            <ng-container [ngTemplateOutlet]=\"footSlot\"></ng-container>\r\n          </table>\r\n        </cdk-virtual-scroll-viewport>\r\n      } @else {\r\n        <table class=\"bk-table\" [ngStyle]=\"tableStyle()\">\r\n          <ng-container [ngTemplateOutlet]=\"headSlot\"></ng-container>\r\n          <ng-container [ngTemplateOutlet]=\"bodySlot\"></ng-container>\r\n          <ng-container [ngTemplateOutlet]=\"footSlot\"></ng-container>\r\n        </table>\r\n      }\r\n\r\n      @if (loading() && showLoadingOverlay()) {\r\n        <div class=\"bk-table-loading\">\r\n          <span class=\"bk-table-spinner\"></span>\r\n        </div>\r\n      }\r\n\r\n      @if (isEmpty()) {\r\n        <div class=\"bk-table-empty\">\r\n          @if (!emptyImageFailed()) {\r\n            <img\r\n              [src]=\"noResultImage()\"\r\n              class=\"bk-table-empty-img\"\r\n              alt=\"No data found\"\r\n              (error)=\"onEmptyImageError()\"\r\n            />\r\n          }\r\n          <span class=\"bk-table-empty-text\">{{ noResultText() }}</span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (hasFooter()) {\r\n      <div class=\"bk-table-footer-bar\">\r\n        @if (footer()) {\r\n          {{ footer() }}\r\n        }\r\n        <ng-content select=\"[bkTableFooter]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <!-- Inside the frame: the pager belongs to the table it drives, and the\r\n         frame's bottom edge is what closes the card around both.\r\n\r\n         `!isEmpty()`, not `totalCount() > 0`: in server mode `totalCount()`\r\n         is just the `total` input, which can say more rows exist than are\r\n         actually on screen right now (a search with no matches but a stale\r\n         total, a page past the end) \u2014 the pager has nothing to page through\r\n         either way, so it goes by what's actually rendered. -->\r\n    @if (showPagination() && !isEmpty()) {\r\n      <div class=\"bk-table-pagination\">\r\n        <bk-pagination\r\n          [total]=\"totalCount()\"\r\n          [pageSize]=\"pageSize()\"\r\n          [activePage]=\"pageIndex()\"\r\n          (pageChanged)=\"onPageIndexChange($event)\"\r\n          (changePageSize)=\"onPageSizeChange($event)\"\r\n        ></bk-pagination>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".bk-table-host{display:block}.bk-table-wrapper{@apply w-full;}.bk-table-frame{border:1px solid #ebedf3;border-radius:.75rem;overflow:hidden}.bk-table-title-bar,.bk-table-footer-bar{@apply text-[13px] font-semibold text-[#15191E] bg-[#F9FAFA] px-4 py-2.5;}.bk-table-title-bar{border-bottom:1px solid #ebedf3}.bk-table-footer-bar{border-top:1px solid #ebedf3}.bk-table-container{@apply relative overflow-auto;}.bk-table{@apply min-w-full text-left;border-collapse:separate;border-spacing:0}.bk-th{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap align-middle;border-bottom:1px solid #ebedf3;position:sticky;top:0;z-index:2}.bk-table thead tr:nth-child(2) .bk-th{top:var(--bk-thead-row-1, 38px);z-index:1}.bk-th-content{@apply flex items-center justify-between gap-1;}.bk-th-align-right .bk-th-content{@apply justify-end;}.bk-th-align-center .bk-th-content{@apply justify-center;}.bk-th-label{@apply inline-flex items-center gap-1;}.bk-th-sortable .bk-th-label{@apply cursor-pointer select-none;}.bk-th-selection{@apply flex items-center gap-1;}.bk-cell-selection{@apply px-3;}.bk-th-selection-caret{@apply inline-flex items-center justify-center size-4 rounded hover:bg-[#EFF1F4];}.bk-td{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 align-middle bg-white;border-bottom:1px solid #ebedf3}.bk-td-content{@apply inline-flex items-center gap-1 align-middle;}.bk-td-content-block{@apply block w-full;}.bk-table tbody tr:hover .bk-td{@apply bg-[#FBFBFC];}.bk-table-lg .bk-th{@apply px-5 py-3.5 text-[13px];}.bk-table-lg .bk-td{@apply px-5 py-3.5 text-sm leading-5;}.bk-table-md .bk-th{@apply px-3 py-2;}.bk-table-md .bk-td{@apply px-3 py-1.5;}.bk-table-sm .bk-th{@apply px-2 py-1.5 text-[11px];}.bk-table-sm .bk-td{@apply px-2 py-1 text-xs;}.bk-table-lg .bk-cell-selection{@apply px-4;}.bk-table-md .bk-cell-selection{@apply px-2.5;}.bk-table-sm .bk-cell-selection{@apply px-2;}.bk-table-bordered .bk-th,.bk-table-bordered .bk-td{border-right:1px solid #ebedf3}.bk-table-bordered .bk-th:last-child,.bk-table-bordered .bk-td:last-child{border-right:0}.bk-table tbody tr:last-child>.bk-td{border-bottom:0}.bk-table-underfilled .bk-table tbody tr:last-child>.bk-td{border-bottom:1px solid #ebedf3}.bk-cell-sticky{position:sticky;z-index:1}.bk-th.bk-cell-sticky{z-index:3}.bk-cell-sticky-left:after,.bk-cell-sticky-right:before{content:\"\";@apply absolute top-0 bottom-0 w-2 pointer-events-none;}.bk-cell-sticky-left:after{right:-8px;background-image:linear-gradient(to right,rgba(0,0,0,.05),transparent)}.bk-cell-sticky-right:before{left:-8px;background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.bk-cell-ellipsis{@apply overflow-hidden text-ellipsis whitespace-nowrap;max-width:0}.bk-td-content-ellipsis{@apply flex w-full;}.bk-td-ellipsis-text{@apply overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1;}.bk-cell-break-word{@apply whitespace-normal;word-break:break-all}.bk-td-indent{@apply inline-block;}.bk-td-expand,.bk-td-expand-spacer{@apply inline-flex items-center justify-center size-4 shrink-0;}.bk-td-expand{@apply rounded text-[#78829D] hover:bg-[#EFF1F4] transition-transform duration-200;transform:rotate(-90deg)}.bk-td-expand-open{transform:rotate(0)}.bk-expanded-row>.bk-td,.bk-expanded-row>td{@apply bg-[#FBFBFC];}.bk-td-flush{@apply p-3;}.bk-table-flush .bk-table-frame{border:0;border-radius:0}.bk-table-summary .bk-td{@apply bg-[#F9FAFA] font-semibold;border-top:1px solid #ebedf3;border-bottom:0}.bk-table-summary-fixed .bk-td{position:sticky;bottom:0;z-index:2}.bk-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.bk-sort-icon:before,.bk-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover}.bk-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.bk-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.bk-sort-asc:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.bk-sort-asc:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.bk-sort-desc:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.bk-sort-desc:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.bk-sort-priority{@apply inline-flex items-center justify-center min-w-4 h-4 px-1 rounded bg-[#EFF1F4] text-[10px] font-semibold text-[#4B5675];}.bk-filter-trigger{@apply inline-flex items-center justify-center size-5 rounded text-[#78829D] hover:bg-[#EFF1F4];}.bk-filter-active{@apply text-black;}.bk-filter-menu{@apply min-w-[180px];}.bk-filter-list{@apply flex flex-col gap-2 max-h-60 overflow-y-auto py-1;}.bk-filter-option{@apply text-[13px] text-[#15191E];}.bk-filter-actions{@apply flex items-center justify-between gap-2 pt-2 mt-2;border-top:1px solid #ebedf3}.bk-filter-btn{@apply text-xs font-semibold px-2.5 py-1 rounded;}.bk-filter-btn-link{@apply text-[#60646C] hover:bg-[#F1F2F4];}.bk-filter-btn-primary{@apply bg-black text-white hover:bg-[#2A2E36];}.bk-table-menu{@apply min-w-[160px] flex flex-col;}.bk-table-menu-item{@apply w-full text-left text-[13px] text-[#15191E] px-2 py-1.5 rounded hover:bg-[#F1F2F4];}.bk-table-loading{@apply absolute inset-0 flex items-center justify-center bg-white/60 z-10;}.bk-table-spinner{@apply block size-8 rounded-full border-2 border-[#EBEDF3] border-t-black;animation:bk-table-spin .8s linear infinite}@keyframes bk-table-spin{to{transform:rotate(360deg)}}.bk-table-empty{@apply absolute inset-x-0 bottom-0 flex flex-col justify-center items-center py-10;top:var(--bk-thead-row-1, 38px)}.bk-table-empty-img{@apply mb-3 w-96 max-w-full;}.bk-table-empty-text{@apply block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2;}.bk-table-pagination{@apply contents;}.bk-table-viewport{@apply w-full;}.bk-table-virtual-head{@apply w-full overflow-hidden;}.bk-table-virtual-head .bk-th{position:static}.bk-checkbox-indeterminate .checkbox{@apply bg-black border-black;}.bk-checkbox-indeterminate .checkbox:after{content:\"\";@apply absolute w-2 h-0.5 bg-white rounded-sm;}.cdk-drag-preview{display:table;table-layout:fixed;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.bk-drag-handle{@apply cursor-move inline-flex items-center justify-center text-[#C4CADA] hover:text-[#78829D] mr-2 align-middle;}.bk-tree-drop-line{@apply absolute pointer-events-none rounded-full;height:2px;background:#15191e;z-index:5}.bk-table tbody tr.bk-tree-drop-inside .bk-td{background:#f1f2f4;box-shadow:inset 0 0 0 1px #15191e59}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showLoadingOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoadingOverlay", required: false }] }], noResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultText", required: false }] }], noResultImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultImage", required: false }] }], showPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPagination", required: false }] }], frontPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "frontPagination", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], virtualItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualItemSize", required: false }] }], virtualTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualTrackBy", required: false }] }], viewport: [{
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showLoadingOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoadingOverlay", required: false }] }], noResult: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResult", required: false }] }], showPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPagination", required: false }] }], frontPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "frontPagination", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], virtualItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualItemSize", required: false }] }], virtualTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualTrackBy", required: false }] }], viewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
             }], stableColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "stableColumnWidth", required: false }] }], queryParams: [{ type: i0.Output, args: ["queryParams"] }], currentPageDataChange: [{ type: i0.Output, args: ["currentPageDataChange"] }], titleContent: [{
@@ -12503,5 +12663,5 @@ const BK_TABLE = [
  * Generated bundle index. Do not edit.
  */
 
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BK_TABLE, BkAvatar, BkAvatarGroup, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDragHandle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkPopover, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTable, BkTableDrag, BkTableFooter, BkTableSummary, BkTableTitle, BkTabs, BkTd, BkTextarea, BkTh, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkTrExpand, BkTreeDrag, BkValidator, BkVirtualScroll, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, NEUTRAL_APPEARANCE, POPOVER_PLACEMENTS, computePopoverPosition, containsBkTreeNode, deriveAppearance, flattenBkTreeData, getDialogBackdropAnimation, getDialogPanelAnimation, joinPlacement, moveBkTreeNode, normalizeBkTableSize, parseColor, splitPlacement };
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BK_TABLE, BkAvatar, BkAvatarGroup, BkAvatarUploader, BkBadge, BkBreadcrumb, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDragHandle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkPopover, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTable, BkTableDrag, BkTableFooter, BkTableSummary, BkTableTitle, BkTabs, BkTd, BkTextarea, BkTh, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkTrExpand, BkTreeDrag, BkValidator, BkVirtualScroll, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, NEUTRAL_APPEARANCE, POPOVER_PLACEMENTS, computePopoverPosition, containsBkTreeNode, deriveAppearance, flattenBkTreeData, getDialogBackdropAnimation, getDialogPanelAnimation, joinPlacement, moveBkTreeNode, normalizeBkTableSize, parseColor, splitPlacement };
 //# sourceMappingURL=brickclay-org-ui.mjs.map