@brickclay-org/ui 0.0.65 → 0.0.67

package/fesm2022/brickclay-org-ui.mjs

@@ -6742,65 +6742,113 @@ class BkColumnSelect {
     columnFilterService;
     searchable = false;
     cacheKey;
-    columns;
+    columns = [];
     isOpened = false;
-    formBoxRef;
-    change = new EventEmitter();
     isOpenedChange = new EventEmitter();
+    formBoxRef;
+    /** Value bound via ngModel – only updated when user ticks/unticks a checkbox, never on search. */
     columnsFilterList = [];
     search = '';
+    onChangeCallback = () => { };
+    onTouchedCallback = () => { };
     constructor(columnFilterService) {
         this.columnFilterService = columnFilterService;
     }
-    ngOnInit() {
-        this.getColumnsFilterList();
+    writeValue(value) {
+        const isEmpty = !value || !Array.isArray(value) || value.length === 0;
+        if (isEmpty && this.shouldLoadFromService()) {
+            this.loadColumnsFilterListFromService();
+        }
+        else {
+            this.columnsFilterList = Array.isArray(value) ? value : [];
+        }
     }
     ngOnChanges(changes) {
-        if (changes['columns'] && !changes['columns'].firstChange) {
-            this.getColumnsFilterList();
+        const columnsChanged = changes['columns'] && !changes['columns'].firstChange;
+        const cacheKeyChanged = changes['cacheKey'] && !changes['cacheKey'].firstChange;
+        if ((columnsChanged || cacheKeyChanged) && this.columnsFilterList.length === 0 && this.shouldLoadFromService()) {
+            this.loadColumnsFilterListFromService();
         }
     }
-    getColumnsFilterList() {
+    shouldLoadFromService() {
+        return !!this.cacheKey && !!this.columns?.length;
+    }
+    loadColumnsFilterListFromService() {
         this.columnsFilterList = this.columnFilterService.getColumnsFilterList(this.cacheKey, this.columns);
-        this.change.emit(this.columnsFilterList);
+        this.onChangeCallback(this.columnsFilterList);
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Optional: disable button/dropdown when control is disabled
     }
     filterButtonClicked(event) {
         event.stopPropagation();
-        this.isOpenedChange.emit(!this.isOpened);
+        const willOpen = !this.isOpened;
+        if (!willOpen) {
+            this.clearSearch();
+            this.onTouchedCallback();
+        }
+        this.isOpenedChange.emit(willOpen);
     }
-    onChangeColumnFilter(evt) {
+    /** Called only on checkbox tick/untick – not on search. Emits via CVA so ngModel updates. */
+    onChangeColumnFilter() {
         this.columnFilterService.updateColumnFilterList(this.cacheKey, this.columnsFilterList);
-        this.change.emit(this.columnsFilterList);
+        this.onChangeCallback(this.columnsFilterList);
+        this.onTouchedCallback();
+    }
+    clearSearch() {
+        this.search = '';
+    }
+    closeDropdown() {
+        this.clearSearch();
+        this.onTouchedCallback();
+        this.isOpened = false;
+        this.isOpenedChange.emit(this.isOpened);
     }
     onClick(event) {
-        // Check if the click target is inside the form_box
-        if ((this.isOpened) &&
-            this.formBoxRef.nativeElement.contains(event.target)) {
-            return; // Do nothing if click occurred inside the form_box
+        if (!this.isOpened) {
+            return;
+        }
+        const formBox = this.formBoxRef?.nativeElement;
+        if (formBox && formBox.contains(event.target)) {
+            return;
         }
-        // Check if the click target is .ng-value-icon
         if (event.target instanceof HTMLElement &&
             event.target.classList.contains('ng-value-icon')) {
-            // Do nothing if click is on .ng-value-icon
             return;
         }
-        // Check if the click target is the button
-        if (!(event.target instanceof HTMLElement) ||
-            !event.target.closest('.btn-light-primary-custom')) {
-            // Close the popup if the click is not on the button
-            this.isOpened = false;
-            this.isOpenedChange.emit(this.isOpened);
+        if (event.target instanceof HTMLElement &&
+            event.target.closest('.btn-light-primary-custom')) {
+            return;
         }
+        this.closeDropdown();
     }
     get list() {
         return this.columnsFilterList.filter((x) => x.columnName.toLowerCase().includes(this.search.toLowerCase()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, deps: [{ token: BkColumnFilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkColumnSelect, isStandalone: true, selector: "bk-column-select", inputs: { searchable: "searchable", cacheKey: "cacheKey", columns: "columns", isOpened: "isOpened" }, outputs: { change: "change", isOpenedChange: "isOpenedChange" }, host: { listeners: { "document:click": "onClick($event)" } }, 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 class=\"w-full\" [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 $index;let i=$index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-2\">\r\n        <bk-checkbox id=\"columnsFilterList-{{i}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"\r\n          (change)=\"onChangeColumnFilter($event)\">\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-{{i}}\">\r\n          {{column.columnName}}\r\n        </label>\r\n      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"text-sm font-medium text-gray-500 mt-3 text-center\">No Records Found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [""], 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkColumnSelect, isStandalone: true, selector: "bk-column-select", inputs: { searchable: "searchable", cacheKey: "cacheKey", columns: "columns", isOpened: "isOpened" }, outputs: { isOpenedChange: "isOpenedChange" }, host: { listeners: { "document:click": "onClick($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-column-select', imports: [FormsModule, BkButton, BkCheckbox, BkInput], standalone: true, 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 class=\"w-full\" [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 $index;let i=$index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-2\">\r\n        <bk-checkbox id=\"columnsFilterList-{{i}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"\r\n          (change)=\"onChangeColumnFilter($event)\">\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-{{i}}\">\r\n          {{column.columnName}}\r\n        </label>\r\n      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"text-sm font-medium text-gray-500 mt-3 text-center\">No Records Found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'bk-column-select', imports: [FormsModule, BkButton, BkCheckbox, BkInput], standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BkColumnSelect),
+                            multi: true,
+                        },
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: BkColumnFilterService }], propDecorators: { searchable: [{
                 type: Input
             }], cacheKey: [{
@@ -6809,18 +6857,262 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], isOpened: [{
                 type: Input
+            }], isOpenedChange: [{
+                type: Output
             }], formBoxRef: [{
                 type: ViewChild,
                 args: ['formBox']
-            }], change: [{
-                type: Output
-            }], isOpenedChange: [{
-                type: Output
             }], onClick: [{
                 type: HostListener,
                 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
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -6830,5 +7122,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, 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