@brickclay-org/ui 0.0.66 → 0.0.67

package/fesm2022/brickclay-org-ui.mjs

@@ -6867,6 +6867,252 @@ 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
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -6876,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