@brickclay-org/ui 0.0.66 → 0.0.68

package/fesm2022/brickclay-org-ui.mjs

@@ -2,13 +2,13 @@ import * as i0 from '@angular/core';
 import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, forwardRef, ViewChild, NgModule, ViewEncapsulation, Optional, Self, Directive, input, model, output, signal, computed, effect, inject, ElementRef, InjectionToken, createComponent, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass } from '@angular/common';
-import * as i1$1 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import moment from 'moment';
 import { Subject, filter } from 'rxjs';
-import * as i2 from '@angular/cdk/drag-drop';
+import * as i2$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1$2 from '@angular/cdk/scrolling';
+import * as i1$1 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
 import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 import { DIALOG_DATA, CdkDialogContainer, Dialog, DialogModule } from '@angular/cdk/dialog';
@@ -3096,13 +3096,13 @@ class BkTextarea {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTextarea, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTextarea, deps: [{ token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTextarea, isStandalone: true, selector: "bk-textarea", inputs: { autoComplete: "autoComplete", name: "name", id: "id", label: "label", placeholder: "placeholder", rows: "rows", hint: "hint", required: "required", maxlength: "maxlength", minlength: "minlength", hasError: "hasError", disabled: "disabled", errorMessage: "errorMessage", tabIndex: "tabIndex", readOnly: "readOnly", autoCapitalize: "autoCapitalize", inputMode: "inputMode" }, outputs: { input: "input", change: "change", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5 w-full\">\r\n\r\n  @if (label) {\r\n    <label\r\n      class=\"text-sm font-medium text-[#141414] block\" [for]=\"id\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"text-[#E7000B] ml-0.5\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <textarea\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      [inputMode]=\"inputMode\"\r\n      [value]=\"value\"\r\n      (input)=\"handleInput($event)\"\r\n      (change)=\"handleChange($event)\"\r\n      (blur)=\"handleBlur($event)\"\r\n      (focus)=\"handleFocus($event)\"\r\n      [placeholder]=\"placeholder\"\r\n\r\n      [autocomplete]=\"autoComplete\"\r\n\r\n      rows=\"{{rows}}\"\r\n      class=\"\r\n        w-full\r\n        px-3 py-2.5\r\n        text-sm\r\n        border border-[#E3E3E7] rounded-[4px]\r\n        outline-none\r\n        transition-colors duration-200\r\n        bg-white resize-y\r\n        placeholder:text-[#6B7080]\r\n      \"\r\n      [ngClass]=\"{\r\n        'border-[#FA727A] text-[#141414]': hasError && !disabled,\r\n\r\n        'focus:border-[#6B7080] text-[#141414]': !hasError && !disabled,\r\n\r\n        'bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed': disabled\r\n      }\"\r\n    ></textarea>\r\n  </div>\r\n\r\n  <div class=\"flex justify-between items-start font-normal text-sm\">\r\n\r\n    <div class=\"flex-1\">\r\n      @if (hasError) {\r\n        <span class=\"text-[#F34050]\">\r\n          {{ errorMessage }}\r\n        </span>\r\n      } @else if (hint) {\r\n        <span class=\"text-[#868997]\">\r\n          {{ hint }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    @if (maxlength) {\r\n      <div\r\n        class=\"text-[#868997] tabular-nums flex-shrink-0\"\r\n      >\r\n        {{ value.length }}/{{ maxlength }}\r\n      </div>\r\n    }\r\n\r\n\r\n  </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTextarea, decorators: [{
             type: Component,
             args: [{ selector: 'bk-textarea', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"flex flex-col gap-1.5 w-full\">\r\n\r\n  @if (label) {\r\n    <label\r\n      class=\"text-sm font-medium text-[#141414] block\" [for]=\"id\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"text-[#E7000B] ml-0.5\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <textarea\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      [inputMode]=\"inputMode\"\r\n      [value]=\"value\"\r\n      (input)=\"handleInput($event)\"\r\n      (change)=\"handleChange($event)\"\r\n      (blur)=\"handleBlur($event)\"\r\n      (focus)=\"handleFocus($event)\"\r\n      [placeholder]=\"placeholder\"\r\n\r\n      [autocomplete]=\"autoComplete\"\r\n\r\n      rows=\"{{rows}}\"\r\n      class=\"\r\n        w-full\r\n        px-3 py-2.5\r\n        text-sm\r\n        border border-[#E3E3E7] rounded-[4px]\r\n        outline-none\r\n        transition-colors duration-200\r\n        bg-white resize-y\r\n        placeholder:text-[#6B7080]\r\n      \"\r\n      [ngClass]=\"{\r\n        'border-[#FA727A] text-[#141414]': hasError && !disabled,\r\n\r\n        'focus:border-[#6B7080] text-[#141414]': !hasError && !disabled,\r\n\r\n        'bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed': disabled\r\n      }\"\r\n    ></textarea>\r\n  </div>\r\n\r\n  <div class=\"flex justify-between items-start font-normal text-sm\">\r\n\r\n    <div class=\"flex-1\">\r\n      @if (hasError) {\r\n        <span class=\"text-[#F34050]\">\r\n          {{ errorMessage }}\r\n        </span>\r\n      } @else if (hint) {\r\n        <span class=\"text-[#868997]\">\r\n          {{ hint }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    @if (maxlength) {\r\n      <div\r\n        class=\"text-[#868997] tabular-nums flex-shrink-0\"\r\n      >\r\n        {{ value.length }}/{{ maxlength }}\r\n      </div>\r\n    }\r\n\r\n\r\n  </div>\r\n\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i2.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -3503,7 +3503,7 @@ 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" }, outputs: { 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=\"h-[calc(100vh-260px)] overflow-y-auto\">\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-0 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                {{ getCellValue(row, col) }}\r\n              </td>\r\n            }\r\n          }\r\n\r\n       @if (actions.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 actions; track action.name) {\r\n                @if (action.hasPermission) {\r\n                                    \r\n                  <button \r\n                    bkTooltip=\"{{ action.tooltip }}\"\r\n                    bkTooltipPosition=\"top\"  \r\n                    class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                    (click)=\"emitAction(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            </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-[#FBFBFC] text-xs text-[#60646C] leading-5 font-semibold capitalize px-4 py-2 whitespace-nowrap;}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border border-[#EBEDF3] border-b-0;}.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: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }] });
+    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" }, outputs: { 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=\"h-[calc(100vh-260px)] overflow-y-auto\">\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-0 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                {{ getCellValue(row, col) }}\r\n              </td>\r\n            }\r\n          }\r\n\r\n       @if (actions.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 actions; track action.name) {\r\n                @if (action.hasPermission) {\r\n                                    \r\n                  <button \r\n                    bkTooltip=\"{{ action.tooltip }}\"\r\n                    bkTooltipPosition=\"top\"  \r\n                    class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                    (click)=\"emitAction(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            </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-[#FBFBFC] text-xs text-[#60646C] leading-5 font-semibold capitalize px-4 py-2 whitespace-nowrap;}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border border-[#EBEDF3] border-b-0;}.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: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkGrid, decorators: [{
             type: Component,
@@ -5539,7 +5539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  */
 class BkDialogContent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogContent, isStandalone: true, selector: "[bk-dialog-content], bk-dialog-content, [bkDialogContent]", host: { classAttribute: "bk-dialog-content" }, exportAs: ["bkDialogContent"], hostDirectives: [{ directive: i1$2.CdkScrollable }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogContent, isStandalone: true, selector: "[bk-dialog-content], bk-dialog-content, [bkDialogContent]", host: { classAttribute: "bk-dialog-content" }, exportAs: ["bkDialogContent"], hostDirectives: [{ directive: i1$1.CdkScrollable }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogContent, decorators: [{
             type: Directive,
@@ -6838,7 +6838,7 @@ class BkColumnSelect {
                 useExisting: forwardRef(() => BkColumnSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "formBoxRef", first: true, predicate: ["formBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\r\n\r\n  <bk-button [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"'../../../../assets/icons/columns-black.svg'\"\r\n    (click)=\"filterButtonClicked($event)\" [label]=\"'Columns'\" [buttonClass]=\"'!text-black'\"></bk-button>\r\n\r\n  <!-- Dropdown Box -->\r\n  @if(isOpened){\r\n\r\n  <div #formBox\r\n    class=\"absolute right-0 mt-2 w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl p-3 pe-1 z-[9999]\">\r\n    @if(searchable){\r\n      <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\"\r\n        [iconSrc]=\"'../../../../assets/icons/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n        placeholder=\"Search\"></bk-input>\r\n    }\r\n    <div class=\"flex flex-col gap-0.5 max-h-[360px] overflow-y-auto\">\r\n      @for (column of list; track column.columnName; let i = $index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-2\">\r\n        <bk-checkbox id=\"columnsFilterList-{{column.columnName}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"\r\n          (change)=\"onChangeColumnFilter()\">\r\n\r\n        </bk-checkbox>\r\n\r\n\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      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"column-select-option-empty\">No items found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n\r\n", styles: [".column-select-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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", "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", "autoComplete", "label", "placeholder", "hint", "required", "type", "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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\r\n\r\n  <bk-button [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"'../../../../assets/icons/columns-black.svg'\"\r\n    (click)=\"filterButtonClicked($event)\" [label]=\"'Columns'\" [buttonClass]=\"'!text-black'\"></bk-button>\r\n\r\n  <!-- Dropdown Box -->\r\n  @if(isOpened){\r\n\r\n  <div #formBox\r\n    class=\"absolute right-0 mt-2 w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl p-3 pe-1 z-[9999]\">\r\n    @if(searchable){\r\n      <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\"\r\n        [iconSrc]=\"'../../../../assets/icons/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n        placeholder=\"Search\"></bk-input>\r\n    }\r\n    <div class=\"flex flex-col gap-0.5 max-h-[360px] overflow-y-auto\">\r\n      @for (column of list; track column.columnName; let i = $index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-2\">\r\n        <bk-checkbox id=\"columnsFilterList-{{column.columnName}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"\r\n          (change)=\"onChangeColumnFilter()\">\r\n\r\n        </bk-checkbox>\r\n\r\n\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      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"column-select-option-empty\">No items found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n\r\n", styles: [".column-select-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}\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", "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", "autoComplete", "label", "placeholder", "hint", "required", "type", "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, decorators: [{
             type: Component,
@@ -6867,6 +6867,377 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+class BkFilePicker {
+    id = '';
+    name = '';
+    accept = '';
+    multi = false;
+    // @Input() maxFileSizeKB: number | null = null;
+    disable = false;
+    errorMessage = '';
+    hasError = false;
+    draggable = true;
+    set required(val) {
+        this._required = val;
+        this._onValidatorChange?.();
+    }
+    get required() {
+        return this._required;
+    }
+    _required = false;
+    change = new EventEmitter();
+    error = new EventEmitter();
+    cancel = new EventEmitter();
+    fileInputRef;
+    _value = null;
+    _onValidatorChange;
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this._value = value;
+        if (!value && this.fileInputRef?.nativeElement) {
+            this.fileInputRef.nativeElement.value = '';
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disable = isDisabled;
+    }
+    validate(control) {
+        if (this.required && !this._value) {
+            return { required: true };
+        }
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this._onValidatorChange = fn;
+    }
+    get pickerState() {
+        if (this.disable)
+            return 'disabled';
+        return 'default';
+    }
+    onContainerClick() {
+        if (this.disable)
+            return;
+        this.onTouched(); // ⭐ Touch on interaction start
+        this.fileInputRef?.nativeElement?.click();
+    }
+    onFileChange(event) {
+        // 1. Stop the native HTML change event from bubbling up to the <bk-file-picker> tag
+        event.stopPropagation();
+        const input = event.target;
+        const files = input.files;
+        // 2. Case: User clicked 'Cancel' or no files selected
+        // We update the form state (ngModel) but DO NOT emit the @Output() change
+        if (!files?.length) {
+            this._value = null;
+            this.onChange(null);
+            this.onTouched();
+            return; // Exit without emitting change
+        }
+        const fileList = Array.from(files);
+        // // 3. Case: File exceeds size limit
+        // if (this.maxFileSizeKB != null) {
+        //   const maxBytes = this.maxFileSizeKB * 1024;
+        //   const oversized = fileList.filter((f) => f.size > maxBytes);
+        //   if (oversized.length > 0) {
+        //     this.error.emit(`File size exceeds ${this.maxFileSizeKB} KB limit.`);
+        //     // Reset internal state and form control
+        //     this._value = null;
+        //     this.onChange(null);
+        //     this.onTouched();
+        //     // Reset the physical input so the same file can be picked again later
+        //     input.value = '';
+        //     return; // Exit without emitting change
+        //   }
+        // }
+        // 4. Case: Valid selection
+        const value = this.multi ? fileList : (fileList[0] ?? null);
+        this._value = value;
+        this.onChange(value); // Updates ngModel
+        this.onTouched();
+        // Only emit the custom @Output() now
+        this.change.emit(event);
+    }
+    onCancel() {
+        // Check if there is currently no file selected
+        if (!this._value) {
+            // Reset internal state and notify Angular Forms that the value is null
+            this._value = null;
+            this.onChange(null);
+            // Mark the control as touched to trigger 'required' error visibility
+            this.onTouched();
+            // Force Angular to re-run the 'validate()' function immediately
+            this._onValidatorChange?.();
+            // Clear the native file input value to ensure the browser reset is in sync
+            if (this.fileInputRef?.nativeElement) {
+                this.fileInputRef.nativeElement.value = '';
+            }
+            // Clear any previous error messages (e.g., size limit errors)
+            this.cancel.emit();
+        }
+    }
+    onDragOver(event) {
+        if (this.disable)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    onDrop(event) {
+        if (this.disable)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const input = this.fileInputRef?.nativeElement;
+        if (!input)
+            return;
+        const items = event.dataTransfer?.items;
+        if (!items?.length)
+            return;
+        const files = [];
+        for (let i = 0; i < items.length; i++) {
+            const file = items[i].getAsFile();
+            if (file)
+                files.push(file);
+        }
+        if (files.length === 0)
+            return;
+        const dt = new DataTransfer();
+        (this.multi ? files : [files[0]]).forEach((f) => dt.items.add(f));
+        input.files = dt.files;
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkFilePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkFilePicker, isStandalone: true, selector: "bk-file-picker", inputs: { id: "id", name: "name", accept: "accept", multi: "multi", disable: "disable", errorMessage: "errorMessage", hasError: "hasError", draggable: "draggable", required: "required" }, outputs: { change: "change", error: "error", cancel: "cancel" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => BkFilePicker),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => BkFilePicker),
+                multi: true,
+            },
+        ], 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> 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    }\">SVG, PNG, JPG or GIF (max. 800x400px)</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,
+            args: [{ selector: 'bk-file-picker', imports: [CommonModule], standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BkFilePicker),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => BkFilePicker),
+                            multi: true,
+                        },
+                    ], 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> 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    }\">SVG, PNG, JPG or GIF (max. 800x400px)</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: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], multi: [{
+                type: Input
+            }], disable: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], draggable: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], error: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], fileInputRef: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+
+class BkFileCard {
+    id = '';
+    state = 'uploading';
+    fileName = 'Tech design requirements.pdf';
+    fileSize = '200 KB';
+    progress = 65; // Progress percentage (0-100)
+    errorMessage = 'Upload failed, please try again';
+    remove = new EventEmitter();
+    /**
+     *
+     */
+    constructor() {
+    }
+    ngOnInit() {
+        if (!this.id) {
+            this.id = crypto.randomUUID();
+        }
+    }
+    onRemove() {
+        this.remove.emit(this.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkFileCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkFileCard, isStandalone: true, selector: "bk-file-card", inputs: { id: "id", state: "state", fileName: "fileName", fileSize: "fileSize", progress: "progress", errorMessage: "errorMessage" }, outputs: { remove: "remove" }, ngImport: i0, template: "\r\n  <div\r\n    class=\"file-uploader\"\r\n    [ngClass]=\"{\r\n      'file-uploader--uploading': state === 'uploading',\r\n      'file-uploader--uploaded': state === 'uploaded',\r\n      'file-uploader--failed': state === 'failed'\r\n    }\">\r\n    <!-- Icon Section -->\r\n    <div class=\"file-uploader__icon-container\">\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-uploader__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]=\"state === 'uploading' ? '#C7E2FF' : state === 'uploaded' ? '#C7E2FF' : '#FECACA'\"/>\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]=\"state === 'uploading' ? '#E5F3FF' : state === 'uploaded' ? '#E5F3FF' : '#FEE2E2'\"\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]=\"state === 'uploading' ? '#1434CB' : state === 'uploaded' ? '#1434CB' : '#EF4444'\"\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    </div>\r\n\r\n    <!-- Content Section -->\r\n    <div class=\"file-uploader__content\">\r\n      <!-- Row 1: File Info + Delete -->\r\n      <div class=\"file-uploader__row-1\">\r\n        <div class=\"file-uploader__file-info\">\r\n          <!-- Uploading State -->\r\n\r\n          @if (state === 'uploading' || state === 'uploaded') {\r\n            <ng-container>\r\n              <span class=\"file-uploader__file-name\">{{ fileName }}</span>\r\n              <span class=\"file-uploader__file-size\">{{ fileSize }}</span>\r\n            </ng-container>\r\n          }\r\n\r\n          @if(state === 'failed'){\r\n            <!-- Failed State -->\r\n            <ng-container>\r\n              <p class=\"file-uploader__error-message\">{{ errorMessage }}</p>\r\n              <span class=\"file-uploader__file-name file-uploader__file-name--failed\">{{ fileName }}</span>\r\n              <p class=\"file-uploader__error-message\">Try again</p>\r\n            </ng-container>\r\n          }\r\n        </div>\r\n        ../../../../assets/images/icons/global/bin-gray.svg\r\n        <img\r\n          src=\"../../assets/icons/bin-gray.svg\"\r\n          alt=\"Delete\"\r\n          bkTooltip=\"Delete\"\r\n          bkTooltipPosition=\"left\"\r\n          class=\"file-uploader__delete-icon\"\r\n          (click)=\"onRemove()\"\r\n          >\r\n      </div>\r\n\r\n      <!-- Row 2: Progress Bar + Percentage -->\r\n      <div class=\"file-uploader__row-2\">\r\n        @if (state === 'uploading') {\r\n           <!-- Uploading State -->\r\n           <ng-container>\r\n             <div class=\"file-uploader__progress-bar\">\r\n               <div\r\n                 class=\"file-uploader__progress-fill\"\r\n                 [style.width.%]=\"progress\"></div>\r\n             </div>\r\n             <span class=\"file-uploader__progress-text\">{{ progress }}%</span>\r\n           </ng-container>\r\n         }\r\n         @if(state === 'uploaded'){\r\n           <!-- Uploaded State -->\r\n           <ng-container>\r\n             <div class=\"file-uploader__progress-bar\">\r\n               <div class=\"file-uploader__progress-fill file-uploader__progress-fill--complete\"></div>\r\n             </div>\r\n       <img src=\"../../assets/icons/check-green.svg\" alt=\"\" class=\"file-uploader__checkmark\">\r\n           </ng-container>\r\n         }\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n", styles: [".file-uploader{@apply p-4 flex gap-4 border rounded-lg border-transparent bg-[white];}.file-uploader--uploading{@apply border-[#EFEFF1];}.file-uploader--uploaded{@apply border-[#1434CB];}.file-uploader--failed{@apply border-[#FDA4A8] bg-[#FFF1F1];}.file-uploader__icon-container,.file-uploader__icon{@apply flex-shrink-0;}.file-uploader__content{@apply flex flex-col flex-1 gap-0;}.file-uploader__row-1{@apply flex items-start justify-between;}.file-uploader__file-info{@apply flex flex-col;}.file-uploader__file-name{@apply font-medium text-sm text-[#1B223A];}.file-uploader__file-name--failed{@apply text-[#B41E32] font-normal mb-1;}.file-uploader__file-size{@apply text-[#1B223A] font-normal text-sm;}.file-uploader__row-2{@apply flex justify-between items-center gap-3 mt-1;}.file-uploader--failed .file-uploader__row-2{@apply mt-0;}.file-uploader__progress-bar{@apply flex-1 h-2 bg-[#EFEFF1] rounded-full overflow-hidden;}.file-uploader__progress-fill{@apply h-full bg-[#1336EF] transition-all duration-300 rounded-full;}.file-uploader__progress-fill--complete{@apply bg-[#22973F];}.file-uploader__progress-text{@apply text-sm text-[#6B7080] font-medium;}.file-uploader__checkmark{@apply flex-shrink-0 size-[14px];}.file-uploader__error-message{@apply text-[#B41E32] font-medium text-sm;}.file-uploader__delete-icon{@apply flex-shrink-0 cursor-pointer size-5;}\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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkFileCard, decorators: [{
+            type: Component,
+            args: [{ imports: [CommonModule, BKTooltipDirective], selector: 'bk-file-card', standalone: true, template: "\r\n  <div\r\n    class=\"file-uploader\"\r\n    [ngClass]=\"{\r\n      'file-uploader--uploading': state === 'uploading',\r\n      'file-uploader--uploaded': state === 'uploaded',\r\n      'file-uploader--failed': state === 'failed'\r\n    }\">\r\n    <!-- Icon Section -->\r\n    <div class=\"file-uploader__icon-container\">\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-uploader__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]=\"state === 'uploading' ? '#C7E2FF' : state === 'uploaded' ? '#C7E2FF' : '#FECACA'\"/>\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]=\"state === 'uploading' ? '#E5F3FF' : state === 'uploaded' ? '#E5F3FF' : '#FEE2E2'\"\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]=\"state === 'uploading' ? '#1434CB' : state === 'uploaded' ? '#1434CB' : '#EF4444'\"\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    </div>\r\n\r\n    <!-- Content Section -->\r\n    <div class=\"file-uploader__content\">\r\n      <!-- Row 1: File Info + Delete -->\r\n      <div class=\"file-uploader__row-1\">\r\n        <div class=\"file-uploader__file-info\">\r\n          <!-- Uploading State -->\r\n\r\n          @if (state === 'uploading' || state === 'uploaded') {\r\n            <ng-container>\r\n              <span class=\"file-uploader__file-name\">{{ fileName }}</span>\r\n              <span class=\"file-uploader__file-size\">{{ fileSize }}</span>\r\n            </ng-container>\r\n          }\r\n\r\n          @if(state === 'failed'){\r\n            <!-- Failed State -->\r\n            <ng-container>\r\n              <p class=\"file-uploader__error-message\">{{ errorMessage }}</p>\r\n              <span class=\"file-uploader__file-name file-uploader__file-name--failed\">{{ fileName }}</span>\r\n              <p class=\"file-uploader__error-message\">Try again</p>\r\n            </ng-container>\r\n          }\r\n        </div>\r\n        ../../../../assets/images/icons/global/bin-gray.svg\r\n        <img\r\n          src=\"../../assets/icons/bin-gray.svg\"\r\n          alt=\"Delete\"\r\n          bkTooltip=\"Delete\"\r\n          bkTooltipPosition=\"left\"\r\n          class=\"file-uploader__delete-icon\"\r\n          (click)=\"onRemove()\"\r\n          >\r\n      </div>\r\n\r\n      <!-- Row 2: Progress Bar + Percentage -->\r\n      <div class=\"file-uploader__row-2\">\r\n        @if (state === 'uploading') {\r\n           <!-- Uploading State -->\r\n           <ng-container>\r\n             <div class=\"file-uploader__progress-bar\">\r\n               <div\r\n                 class=\"file-uploader__progress-fill\"\r\n                 [style.width.%]=\"progress\"></div>\r\n             </div>\r\n             <span class=\"file-uploader__progress-text\">{{ progress }}%</span>\r\n           </ng-container>\r\n         }\r\n         @if(state === 'uploaded'){\r\n           <!-- Uploaded State -->\r\n           <ng-container>\r\n             <div class=\"file-uploader__progress-bar\">\r\n               <div class=\"file-uploader__progress-fill file-uploader__progress-fill--complete\"></div>\r\n             </div>\r\n       <img src=\"../../assets/icons/check-green.svg\" alt=\"\" class=\"file-uploader__checkmark\">\r\n           </ng-container>\r\n         }\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n", styles: [".file-uploader{@apply p-4 flex gap-4 border rounded-lg border-transparent bg-[white];}.file-uploader--uploading{@apply border-[#EFEFF1];}.file-uploader--uploaded{@apply border-[#1434CB];}.file-uploader--failed{@apply border-[#FDA4A8] bg-[#FFF1F1];}.file-uploader__icon-container,.file-uploader__icon{@apply flex-shrink-0;}.file-uploader__content{@apply flex flex-col flex-1 gap-0;}.file-uploader__row-1{@apply flex items-start justify-between;}.file-uploader__file-info{@apply flex flex-col;}.file-uploader__file-name{@apply font-medium text-sm text-[#1B223A];}.file-uploader__file-name--failed{@apply text-[#B41E32] font-normal mb-1;}.file-uploader__file-size{@apply text-[#1B223A] font-normal text-sm;}.file-uploader__row-2{@apply flex justify-between items-center gap-3 mt-1;}.file-uploader--failed .file-uploader__row-2{@apply mt-0;}.file-uploader__progress-bar{@apply flex-1 h-2 bg-[#EFEFF1] rounded-full overflow-hidden;}.file-uploader__progress-fill{@apply h-full bg-[#1336EF] transition-all duration-300 rounded-full;}.file-uploader__progress-fill--complete{@apply bg-[#22973F];}.file-uploader__progress-text{@apply text-sm text-[#6B7080] font-medium;}.file-uploader__checkmark{@apply flex-shrink-0 size-[14px];}.file-uploader__error-message{@apply text-[#B41E32] font-medium text-sm;}.file-uploader__delete-icon{@apply flex-shrink-0 cursor-pointer size-5;}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], fileName: [{
+                type: Input
+            }], fileSize: [{
+                type: Input
+            }], progress: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], remove: [{
+                type: Output
+            }] } });
+
+class BkPagination {
+    pageSize = 10;
+    total = 0;
+    changePageSize = new EventEmitter();
+    pageChanged = new EventEmitter();
+    pages = [];
+    activePage = 1;
+    activePageChange = new EventEmitter();
+    pager = 1;
+    isMenuHovered = false;
+    // ✅ Added
+    startingPage = 0;
+    endingPage = 0;
+    pageSizesList = [
+        { key: 25, value: 25 },
+        { key: 50, value: 50 },
+        { key: 75, value: 75 },
+        { key: 100, value: 100 },
+    ];
+    constructor() {
+        const pageCount = this.getPageCount();
+        this.pages = this.getArrayOfPage(pageCount);
+        // ✅ Added
+        this.updateStartEndPages();
+    }
+    ngOnChanges() {
+        const pageCount = this.getPageCount();
+        this.pages = this.getArrayOfPage(pageCount);
+        if (this.activePage > pageCount) {
+            this.activePage = pageCount || 1;
+            this.activePageChange.emit(this.activePage);
+        }
+        if (this.activePage < 1) {
+            this.activePage = 1;
+            this.activePageChange.emit(this.activePage);
+        }
+        // ✅ Added
+        this.updateStartEndPages();
+    }
+    getTotalPagesValue() {
+        const totalPages = Math.ceil(this.total / this.pageSize);
+        return totalPages;
+    }
+    // ✅ Added method
+    updateStartEndPages() {
+        this.startingPage = this.pages.length > 0 ? this.pages[0] : 0;
+        this.endingPage = this.pages.length > 0
+            ? Math.min(this.startingPage + 2, this.pages[this.pages.length - 1])
+            : 0;
+    }
+    getPageCount() {
+        let totalPage = 0;
+        if (!!this.total && !!this.pageSize)
+            if (this.total > 0 && this.pageSize > 0) {
+                const pageCount = this.total / this.pageSize;
+                const roundedPageCount = Math.floor(pageCount);
+                totalPage = roundedPageCount < pageCount ? roundedPageCount + 1 : roundedPageCount;
+            }
+        return totalPage;
+    }
+    getArrayOfPage(pageCount) {
+        const pageArray = [];
+        if (pageCount > 0) {
+            for (let i = 1; i <= pageCount; i++)
+                pageArray.push(i);
+        }
+        return pageArray;
+    }
+    paginate() {
+        var from = this.activePage === 1 ? this.activePage - 1 : this.activePage - 2;
+        return this.pages.slice(from, this.activePage + 4);
+    }
+    onClickPage(pageNumber) {
+        if (this.activePage !== pageNumber) {
+            if (pageNumber >= 1 && pageNumber <= this.pages.length) {
+                this.activePage = pageNumber;
+                this.pageChanged.emit(this.activePage);
+            }
+        }
+    }
+    changeSize(event) {
+        this.changePageSize.emit(this.pageSize);
+        // ✅ Recalculate pages on size change
+        const pageCount = this.getPageCount();
+        this.pages = this.getArrayOfPage(pageCount);
+        this.updateStartEndPages();
+    }
+    get startIndex() {
+        if (!this.total || this.total === 0)
+            return 0;
+        return (this.activePage - 1) * this.pageSize + 1;
+    }
+    get endIndex() {
+        if (!this.total || this.total === 0)
+            return 0;
+        const end = this.activePage * this.pageSize;
+        return end > this.total ? this.total : end;
+    }
+    get totalItems() {
+        return this.total || 0;
+    }
+    // ✅ Added getTotalPages()
+    getTotalPages() {
+        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    <div class=\"flex gap-3 items-center\">\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          >\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(startingPage)\"\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() | slice:0:2\">\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", "placeholder", "notFoundText", "loadingText", "clearAllText", "groupBy", "colorKey", "iconAlt", "label", "required", "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"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
+}
+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    <div class=\"flex gap-3 items-center\">\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          >\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(startingPage)\"\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() | slice:0:2\">\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: [{
+                type: Input
+            }], changePageSize: [{
+                type: Output
+            }], pageChanged: [{
+                type: Output
+            }], activePage: [{
+                type: Input
+            }], activePageChange: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -6876,5 +7247,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
 //# sourceMappingURL=brickclay-org-ui.mjs.map