@brickclay-org/ui 0.1.17 → 0.1.18

package/fesm2022/brickclay-org-ui.mjs

@@ -3656,6 +3656,8 @@ class BkGrid {
     result;
     actions = [];
     customClass = 'h-[calc(100vh-260px)]';
+    showNoRecords = false;
+    noRecordFoundHeight = '';
     change = new EventEmitter();
     /* ================= Outputs ================= */
     actionClick = new EventEmitter();
@@ -3723,6 +3725,13 @@ class BkGrid {
             return [];
         return typeof column.icons === 'function' ? column.icons(row) : column.icons;
     }
+    /* ================= Tooltip ================= */
+    getTooltipValue(row, column) {
+        if (column.toolTipField) {
+            return String(row[column.toolTipField] ?? '');
+        }
+        return '';
+    }
     /* ================= Actions ================= */
     getRowActions(row, column) {
         const source = column?.actions ?? this.actions;
@@ -3803,11 +3812,11 @@ class BkGrid {
         });
     }
     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" }, outputs: { change: "change", actionClick: "actionClick", sortChange: "sortChange", dragDropChange: "dragDropChange" }, viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], ngImport: i0, template: "<div\r\n  #tableScrollContainer\r\n  cdkScrollable\r\n  class=\"overflow-y-auto\"\r\n  [ngClass]=\"customClass\"\r\n  >\r\n\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n\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] cursor-pointer\"\r\n            [class.action-sticky]=\"col.sticky\"\r\n            [class.z-10]=\"col.sticky\"\r\n            [ngClass]=\"col.headerClass\"\r\n            [ngClass]=\"col.cellClass\"\r\n            (click)=\"sort(col,i)\"\r\n          >\r\n            <span class=\"flex items-center gap-1\"\r\n              [ngClass]=\"sortColumn === col.field\r\n                ? (sortDirection === 'asc' ? 'grid-asc' : 'grid-desc')\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\">\r\n          Action\r\n        </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=\"\" [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 cdkDragHandle class=\"mr-2 text-gray-400\" [ngClass]=\"{ 'cursor-move': draggable }\">\u2630</span>\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                  ></bk-checkbox>\r\n                }\r\n                @else if(col.badges){\r\n                  @let badge = getBadge(row, col);\r\n                    @if (badge) {\r\n                       <bk-badge [label]=\"badge.label\" [variant]=\"badge.variant\"\r\n                       [size]=\"badge.size\" [color]=\"badge.color\" [dot]=\"badge.dot\"\r\n                       [customClass]=\"badge.customClass\"\r\n                       [bkTooltip]=\"badge.toolTipLabel || ''\"\r\n                       [bkTooltipPosition]=\"badge.tooltipPosition || 'top'\"></bk-badge>\r\n                    }\r\n\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                    <img [src]=\"icon.url\" class=\"size-4 cursor-pointer\" [bkTooltip]=\"icon.toolTipLabel || []\" [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\" />\r\n                    }\r\n                  </div>\r\n                }\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\r\n              @for (action of getRowActions(row); track action.name) {\r\n                @if (isActionVisible(action, row)) {\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]\"\r\n                    (click)=\"emitAction(action, row)\"\r\n                    [disabled]=\"isActionDisabled(action, row)\"\r\n                  >\r\n                    <img\r\n                      [src]=\"action.icon\"\r\n                      width=\"14\"\r\n                      height=\"14\"\r\n                      alt=\"action-icon\"\r\n                    />\r\n                  </button>\r\n                }\r\n              }\r\n\r\n            </div>\r\n          </td>\r\n        }\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.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2.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.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.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"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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", showNoRecords: "showNoRecords", noRecordFoundHeight: "noRecordFoundHeight" }, 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              [ngClass]=\"col.headerClass\"\r\n              [ngClass]=\"col.cellClass\"\r\n              (click)=\"sort(col, i)\"\r\n            >\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\">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                  ></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                    <img [src]=\"icon.url\" class=\"size-4 cursor-pointer\" [bkTooltip]=\"icon.toolTipLabel || []\" [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\" />\r\n                    }\r\n                  </div>\r\n                }\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                }\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                    <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]\"\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 [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\" class=\"text-center py-10 {{noRecordFoundHeight}}\">\r\n            No records found\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.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2.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.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.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"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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\r\n  #tableScrollContainer\r\n  cdkScrollable\r\n  class=\"overflow-y-auto\"\r\n  [ngClass]=\"customClass\"\r\n  >\r\n\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n\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] cursor-pointer\"\r\n            [class.action-sticky]=\"col.sticky\"\r\n            [class.z-10]=\"col.sticky\"\r\n            [ngClass]=\"col.headerClass\"\r\n            [ngClass]=\"col.cellClass\"\r\n            (click)=\"sort(col,i)\"\r\n          >\r\n            <span class=\"flex items-center gap-1\"\r\n              [ngClass]=\"sortColumn === col.field\r\n                ? (sortDirection === 'asc' ? 'grid-asc' : 'grid-desc')\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\">\r\n          Action\r\n        </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=\"\" [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 cdkDragHandle class=\"mr-2 text-gray-400\" [ngClass]=\"{ 'cursor-move': draggable }\">\u2630</span>\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                  ></bk-checkbox>\r\n                }\r\n                @else if(col.badges){\r\n                  @let badge = getBadge(row, col);\r\n                    @if (badge) {\r\n                       <bk-badge [label]=\"badge.label\" [variant]=\"badge.variant\"\r\n                       [size]=\"badge.size\" [color]=\"badge.color\" [dot]=\"badge.dot\"\r\n                       [customClass]=\"badge.customClass\"\r\n                       [bkTooltip]=\"badge.toolTipLabel || ''\"\r\n                       [bkTooltipPosition]=\"badge.tooltipPosition || 'top'\"></bk-badge>\r\n                    }\r\n\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                    <img [src]=\"icon.url\" class=\"size-4 cursor-pointer\" [bkTooltip]=\"icon.toolTipLabel || []\" [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\" />\r\n                    }\r\n                  </div>\r\n                }\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\r\n              @for (action of getRowActions(row); track action.name) {\r\n                @if (isActionVisible(action, row)) {\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]\"\r\n                    (click)=\"emitAction(action, row)\"\r\n                    [disabled]=\"isActionDisabled(action, row)\"\r\n                  >\r\n                    <img\r\n                      [src]=\"action.icon\"\r\n                      width=\"14\"\r\n                      height=\"14\"\r\n                      alt=\"action-icon\"\r\n                    />\r\n                  </button>\r\n                }\r\n              }\r\n\r\n            </div>\r\n          </td>\r\n        }\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"] }]
+            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              [ngClass]=\"col.headerClass\"\r\n              [ngClass]=\"col.cellClass\"\r\n              (click)=\"sort(col, i)\"\r\n            >\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\">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                  ></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                    <img [src]=\"icon.url\" class=\"size-4 cursor-pointer\" [bkTooltip]=\"icon.toolTipLabel || []\" [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\" />\r\n                    }\r\n                  </div>\r\n                }\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                }\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                    <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]\"\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 [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\" class=\"text-center py-10 {{noRecordFoundHeight}}\">\r\n            No records found\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: [{
@@ -3818,6 +3827,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], customClass: [{
                 type: Input
+            }], showNoRecords: [{
+                type: Input
+            }], noRecordFoundHeight: [{
+                type: Input
             }], change: [{
                 type: Output
             }], actionClick: [{
@@ -7453,7 +7466,7 @@ class BkFilePicker {
                 useExisting: forwardRef(() => BkFilePicker),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"file-picker-wrapper\">\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    [id]=\"id\"\r\n    [name]=\"name\"\r\n    [accept]=\"accept\"\r\n    [multiple]=\"multi\"\r\n    [disabled]=\"disable\"\r\n    [required]=\"required\"\r\n    class=\"file-picker__input\"\r\n    (cancel)=\"onCancel()\"\r\n    (change)=\"onFileChange($event)\"\r\n  />\r\n\r\n  <div\r\n    class=\"file-picker\"\r\n  [ngClass]=\"{\r\n    'file-picker--default': pickerState === 'default',\r\n    'file-picker--active': pickerState === 'active',\r\n    'file-picker--disabled': pickerState === 'disabled',\r\n    'file-picker-has-error': hasError\r\n  }\"\r\n  (click)=\"onContainerClick()\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  role=\"button\"\r\n  [attr.aria-disabled]=\"disable\"\r\n  tabindex=\"0\"\r\n>\r\n  <svg\r\n    width=\"48\"\r\n    height=\"48\"\r\n    viewBox=\"0 0 48 48\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    class=\"file-picker__icon\">\r\n    <rect\r\n      x=\"3.57007\"\r\n      y=\"3.56995\"\r\n      width=\"40\"\r\n      height=\"40\"\r\n      rx=\"20\"\r\n      [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\r\n    <rect\r\n      x=\"3.57007\"\r\n      y=\"3.56995\"\r\n      width=\"40\"\r\n      height=\"40\"\r\n      rx=\"20\"\r\n      [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\r\n      stroke-width=\"7.14\"/>\r\n    <g clip-path=\"url(#clip0_1_149094)\">\r\n      <path\r\n        d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\r\n        [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\r\n        stroke-width=\"1.66667\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_1_149094\">\r\n        <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n  <p\r\n    class=\"file-picker__text-primary\"\r\n    [ngClass]=\"{\r\n      'file-picker__text-primary--default': pickerState === 'default',\r\n      'file-picker__text-primary--active': pickerState === 'active',\r\n      'file-picker__text-primary--disabled': pickerState === 'disabled'\r\n    }\">\r\n    <span\r\n      [ngClass]=\"{\r\n        'file-picker__text-primary-bold--default': pickerState === 'default',\r\n        'file-picker__text-primary-bold--active': pickerState === 'active',\r\n        'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\r\n      }\">Click to upload</span>{{draggable ? ' or drag and drop' : '' }}\r\n  </p>\r\n  <p\r\n    class=\"file-picker__text-secondary\"\r\n    [ngClass]=\"{\r\n      'file-picker__text-secondary--default': pickerState === 'default',\r\n      'file-picker__text-secondary--active': pickerState === 'active',\r\n      'file-picker__text-secondary--disabled': pickerState === 'disabled'\r\n    }\">{{description}}</p>\r\n  </div>\r\n\r\n  @if (hasError) {\r\n    @if (errorMessage) {\r\n      <p class=\"file-picker-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".file-picker-wrapper{@apply relative w-full;}.file-picker__input{@apply absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none;}.file-picker{@apply py-4 px-6 inline-flex flex-col justify-center items-center rounded-lg cursor-pointer transition-all duration-200 w-full relative;}.file-picker-has-error{@apply border-[#d11e14];}.file-picker-error{@apply text-xs text-[#E7000B] font-normal;}.file-picker--default{@apply border border-[#E5F3FF] bg-white;}.file-picker--active{@apply border border-[#E5F3FF] bg-[#F4FAFF];}.file-picker--disabled{@apply border border-[#D6D7DC] bg-[#F4F4F6] opacity-60 cursor-not-allowed;}.file-picker__icon{@apply mb-3;}.file-picker__text-primary{@apply font-normal text-sm tracking-normal mb-1;}.file-picker__text-primary--default,.file-picker__text-primary--active{@apply text-[#1B223A];}.file-picker__text-primary--disabled{@apply text-[#A1A3AE];}.file-picker__text-primary-bold--default,.file-picker__text-primary-bold--active{@apply font-medium text-[#102BA5];}.file-picker__text-primary-bold--disabled{@apply font-medium text-[#A1A3AE];}.file-picker__text-secondary{@apply font-normal text-xs leading-[18px];}.file-picker__text-secondary--default,.file-picker__text-secondary--active{@apply text-[#6B7080];}.file-picker__text-secondary--disabled{@apply text-[#A1A3AE];}.file-picker__file-item{@apply p-4 border border-[#EFEFF1] rounded-lg bg-white flex items-start justify-between mb-1;}.file-picker__file-content{@apply flex gap-4;}.file-picker__file-info-title{@apply font-medium text-sm text-[#1B223A];}.file-picker__file-info-size{@apply text-[#1B223A] font-normal text-sm;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"file-picker-wrapper\">\n  <input\n    #fileInput\n    type=\"file\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [accept]=\"accept\"\n    [multiple]=\"multi\"\n    [disabled]=\"disable\"\n    [required]=\"required\"\n    class=\"file-picker__input\"\n    (cancel)=\"onCancel()\"\n    (change)=\"onFileChange($event)\"\n  />\n\n  <div\n    class=\"file-picker\"\n  [ngClass]=\"{\n    'file-picker--default': pickerState === 'default',\n    'file-picker--active': pickerState === 'active',\n    'file-picker--disabled': pickerState === 'disabled',\n    'file-picker-has-error': hasError\n  }\"\n  (click)=\"onContainerClick()\"\n  (dragover)=\"onDragOver($event)\"\n  (drop)=\"onDrop($event)\"\n  role=\"button\"\n  [attr.aria-disabled]=\"disable\"\n  tabindex=\"0\"\n>\n  <svg\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    class=\"file-picker__icon\">\n    <rect\n      x=\"3.57007\"\n      y=\"3.56995\"\n      width=\"40\"\n      height=\"40\"\n      rx=\"20\"\n      [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\n    <rect\n      x=\"3.57007\"\n      y=\"3.56995\"\n      width=\"40\"\n      height=\"40\"\n      rx=\"20\"\n      [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\n      stroke-width=\"7.14\"/>\n    <g clip-path=\"url(#clip0_1_149094)\">\n      <path\n        d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\n        [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\n        stroke-width=\"1.66667\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"/>\n    </g>\n    <defs>\n      <clipPath id=\"clip0_1_149094\">\n        <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\n      </clipPath>\n    </defs>\n  </svg>\n  <p\n    class=\"file-picker__text-primary\"\n    [ngClass]=\"{\n      'file-picker__text-primary--default': pickerState === 'default',\n      'file-picker__text-primary--active': pickerState === 'active',\n      'file-picker__text-primary--disabled': pickerState === 'disabled'\n    }\">\n    <span\n      [ngClass]=\"{\n        'file-picker__text-primary-bold--default': pickerState === 'default',\n        'file-picker__text-primary-bold--active': pickerState === 'active',\n        'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\n      }\">Click to upload</span>{{draggable ? ' or drag and drop' : '' }}\n  </p>\n  <p\n    class=\"file-picker__text-secondary\"\n    [ngClass]=\"{\n      'file-picker__text-secondary--default': pickerState === 'default',\n      'file-picker__text-secondary--active': pickerState === 'active',\n      'file-picker__text-secondary--disabled': pickerState === 'disabled'\n    }\">{{description}}</p>\n  </div>\n\n  @if (hasError) {\n    @if (errorMessage) {\n      <p class=\"file-picker-error\">{{ errorMessage }}</p>\n    }\n  }\n</div>\n", styles: [".file-picker-wrapper{@apply relative w-full;}.file-picker__input{@apply absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none;}.file-picker{@apply py-4 px-6 inline-flex flex-col justify-center items-center rounded-lg cursor-pointer transition-all duration-200 w-full relative;}.file-picker-has-error{@apply border-[#d11e14];}.file-picker-error{@apply text-xs text-[#E7000B] font-normal;}.file-picker--default{@apply border border-[#E5F3FF] bg-white;}.file-picker--active{@apply border border-[#E5F3FF] bg-[#F4FAFF];}.file-picker--disabled{@apply border border-[#D6D7DC] bg-[#F4F4F6] opacity-60 cursor-not-allowed;}.file-picker__icon{@apply mb-3;}.file-picker__text-primary{@apply font-normal text-sm tracking-normal mb-1;}.file-picker__text-primary--default,.file-picker__text-primary--active{@apply text-[#1B223A];}.file-picker__text-primary--disabled{@apply text-[#A1A3AE];}.file-picker__text-primary-bold--default,.file-picker__text-primary-bold--active{@apply font-medium text-[#102BA5];}.file-picker__text-primary-bold--disabled{@apply font-medium text-[#A1A3AE];}.file-picker__text-secondary{@apply font-normal text-xs leading-[18px];}.file-picker__text-secondary--default,.file-picker__text-secondary--active{@apply text-[#6B7080];}.file-picker__text-secondary--disabled{@apply text-[#A1A3AE];}.file-picker__file-item{@apply p-4 border border-[#EFEFF1] rounded-lg bg-white flex items-start justify-between mb-1;}.file-picker__file-content{@apply flex gap-4;}.file-picker__file-info-title{@apply font-medium text-sm text-[#1B223A];}.file-picker__file-info-size{@apply text-[#1B223A] font-normal text-sm;}\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: BkFilePicker, decorators: [{
             type: Component,
@@ -7468,7 +7481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkFilePicker),
                             multi: true,
                         },
-                    ], template: "<div class=\"file-picker-wrapper\">\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    [id]=\"id\"\r\n    [name]=\"name\"\r\n    [accept]=\"accept\"\r\n    [multiple]=\"multi\"\r\n    [disabled]=\"disable\"\r\n    [required]=\"required\"\r\n    class=\"file-picker__input\"\r\n    (cancel)=\"onCancel()\"\r\n    (change)=\"onFileChange($event)\"\r\n  />\r\n\r\n  <div\r\n    class=\"file-picker\"\r\n  [ngClass]=\"{\r\n    'file-picker--default': pickerState === 'default',\r\n    'file-picker--active': pickerState === 'active',\r\n    'file-picker--disabled': pickerState === 'disabled',\r\n    'file-picker-has-error': hasError\r\n  }\"\r\n  (click)=\"onContainerClick()\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  role=\"button\"\r\n  [attr.aria-disabled]=\"disable\"\r\n  tabindex=\"0\"\r\n>\r\n  <svg\r\n    width=\"48\"\r\n    height=\"48\"\r\n    viewBox=\"0 0 48 48\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    class=\"file-picker__icon\">\r\n    <rect\r\n      x=\"3.57007\"\r\n      y=\"3.56995\"\r\n      width=\"40\"\r\n      height=\"40\"\r\n      rx=\"20\"\r\n      [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\r\n    <rect\r\n      x=\"3.57007\"\r\n      y=\"3.56995\"\r\n      width=\"40\"\r\n      height=\"40\"\r\n      rx=\"20\"\r\n      [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\r\n      stroke-width=\"7.14\"/>\r\n    <g clip-path=\"url(#clip0_1_149094)\">\r\n      <path\r\n        d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\r\n        [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\r\n        stroke-width=\"1.66667\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_1_149094\">\r\n        <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n  <p\r\n    class=\"file-picker__text-primary\"\r\n    [ngClass]=\"{\r\n      'file-picker__text-primary--default': pickerState === 'default',\r\n      'file-picker__text-primary--active': pickerState === 'active',\r\n      'file-picker__text-primary--disabled': pickerState === 'disabled'\r\n    }\">\r\n    <span\r\n      [ngClass]=\"{\r\n        'file-picker__text-primary-bold--default': pickerState === 'default',\r\n        'file-picker__text-primary-bold--active': pickerState === 'active',\r\n        'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\r\n      }\">Click to upload</span>{{draggable ? ' or drag and drop' : '' }}\r\n  </p>\r\n  <p\r\n    class=\"file-picker__text-secondary\"\r\n    [ngClass]=\"{\r\n      'file-picker__text-secondary--default': pickerState === 'default',\r\n      'file-picker__text-secondary--active': pickerState === 'active',\r\n      'file-picker__text-secondary--disabled': pickerState === 'disabled'\r\n    }\">{{description}}</p>\r\n  </div>\r\n\r\n  @if (hasError) {\r\n    @if (errorMessage) {\r\n      <p class=\"file-picker-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".file-picker-wrapper{@apply relative w-full;}.file-picker__input{@apply absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none;}.file-picker{@apply py-4 px-6 inline-flex flex-col justify-center items-center rounded-lg cursor-pointer transition-all duration-200 w-full relative;}.file-picker-has-error{@apply border-[#d11e14];}.file-picker-error{@apply text-xs text-[#E7000B] font-normal;}.file-picker--default{@apply border border-[#E5F3FF] bg-white;}.file-picker--active{@apply border border-[#E5F3FF] bg-[#F4FAFF];}.file-picker--disabled{@apply border border-[#D6D7DC] bg-[#F4F4F6] opacity-60 cursor-not-allowed;}.file-picker__icon{@apply mb-3;}.file-picker__text-primary{@apply font-normal text-sm tracking-normal mb-1;}.file-picker__text-primary--default,.file-picker__text-primary--active{@apply text-[#1B223A];}.file-picker__text-primary--disabled{@apply text-[#A1A3AE];}.file-picker__text-primary-bold--default,.file-picker__text-primary-bold--active{@apply font-medium text-[#102BA5];}.file-picker__text-primary-bold--disabled{@apply font-medium text-[#A1A3AE];}.file-picker__text-secondary{@apply font-normal text-xs leading-[18px];}.file-picker__text-secondary--default,.file-picker__text-secondary--active{@apply text-[#6B7080];}.file-picker__text-secondary--disabled{@apply text-[#A1A3AE];}.file-picker__file-item{@apply p-4 border border-[#EFEFF1] rounded-lg bg-white flex items-start justify-between mb-1;}.file-picker__file-content{@apply flex gap-4;}.file-picker__file-info-title{@apply font-medium text-sm text-[#1B223A];}.file-picker__file-info-size{@apply text-[#1B223A] font-normal text-sm;}\n"] }]
+                    ], template: "<div class=\"file-picker-wrapper\">\n  <input\n    #fileInput\n    type=\"file\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [accept]=\"accept\"\n    [multiple]=\"multi\"\n    [disabled]=\"disable\"\n    [required]=\"required\"\n    class=\"file-picker__input\"\n    (cancel)=\"onCancel()\"\n    (change)=\"onFileChange($event)\"\n  />\n\n  <div\n    class=\"file-picker\"\n  [ngClass]=\"{\n    'file-picker--default': pickerState === 'default',\n    'file-picker--active': pickerState === 'active',\n    'file-picker--disabled': pickerState === 'disabled',\n    'file-picker-has-error': hasError\n  }\"\n  (click)=\"onContainerClick()\"\n  (dragover)=\"onDragOver($event)\"\n  (drop)=\"onDrop($event)\"\n  role=\"button\"\n  [attr.aria-disabled]=\"disable\"\n  tabindex=\"0\"\n>\n  <svg\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    class=\"file-picker__icon\">\n    <rect\n      x=\"3.57007\"\n      y=\"3.56995\"\n      width=\"40\"\n      height=\"40\"\n      rx=\"20\"\n      [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\n    <rect\n      x=\"3.57007\"\n      y=\"3.56995\"\n      width=\"40\"\n      height=\"40\"\n      rx=\"20\"\n      [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\n      stroke-width=\"7.14\"/>\n    <g clip-path=\"url(#clip0_1_149094)\">\n      <path\n        d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\n        [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\n        stroke-width=\"1.66667\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"/>\n    </g>\n    <defs>\n      <clipPath id=\"clip0_1_149094\">\n        <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\n      </clipPath>\n    </defs>\n  </svg>\n  <p\n    class=\"file-picker__text-primary\"\n    [ngClass]=\"{\n      'file-picker__text-primary--default': pickerState === 'default',\n      'file-picker__text-primary--active': pickerState === 'active',\n      'file-picker__text-primary--disabled': pickerState === 'disabled'\n    }\">\n    <span\n      [ngClass]=\"{\n        'file-picker__text-primary-bold--default': pickerState === 'default',\n        'file-picker__text-primary-bold--active': pickerState === 'active',\n        'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\n      }\">Click to upload</span>{{draggable ? ' or drag and drop' : '' }}\n  </p>\n  <p\n    class=\"file-picker__text-secondary\"\n    [ngClass]=\"{\n      'file-picker__text-secondary--default': pickerState === 'default',\n      'file-picker__text-secondary--active': pickerState === 'active',\n      'file-picker__text-secondary--disabled': pickerState === 'disabled'\n    }\">{{description}}</p>\n  </div>\n\n  @if (hasError) {\n    @if (errorMessage) {\n      <p class=\"file-picker-error\">{{ errorMessage }}</p>\n    }\n  }\n</div>\n", styles: [".file-picker-wrapper{@apply relative w-full;}.file-picker__input{@apply absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none;}.file-picker{@apply py-4 px-6 inline-flex flex-col justify-center items-center rounded-lg cursor-pointer transition-all duration-200 w-full relative;}.file-picker-has-error{@apply border-[#d11e14];}.file-picker-error{@apply text-xs text-[#E7000B] font-normal;}.file-picker--default{@apply border border-[#E5F3FF] bg-white;}.file-picker--active{@apply border border-[#E5F3FF] bg-[#F4FAFF];}.file-picker--disabled{@apply border border-[#D6D7DC] bg-[#F4F4F6] opacity-60 cursor-not-allowed;}.file-picker__icon{@apply mb-3;}.file-picker__text-primary{@apply font-normal text-sm tracking-normal mb-1;}.file-picker__text-primary--default,.file-picker__text-primary--active{@apply text-[#1B223A];}.file-picker__text-primary--disabled{@apply text-[#A1A3AE];}.file-picker__text-primary-bold--default,.file-picker__text-primary-bold--active{@apply font-medium text-[#102BA5];}.file-picker__text-primary-bold--disabled{@apply font-medium text-[#A1A3AE];}.file-picker__text-secondary{@apply font-normal text-xs leading-[18px];}.file-picker__text-secondary--default,.file-picker__text-secondary--active{@apply text-[#6B7080];}.file-picker__text-secondary--disabled{@apply text-[#A1A3AE];}.file-picker__file-item{@apply p-4 border border-[#EFEFF1] rounded-lg bg-white flex items-start justify-between mb-1;}.file-picker__file-content{@apply flex gap-4;}.file-picker__file-info-title{@apply font-medium text-sm text-[#1B223A];}.file-picker__file-info-size{@apply text-[#1B223A] font-normal text-sm;}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{