eru-grid 0.0.70 → 0.0.71

package/fesm2022/eru-grid.mjs

@@ -109,7 +109,7 @@ const INHERITED_FIELD_KEYS = [
     'start_value', 'end_value', 'emoji_value', 'is_perc',
     // Attachment constraints and destination
     'max_files', 'allowed_file_types', 'max_file_size',
-    'storage_name', 'folder_name', 'default_upload',
+    'storage_name', 'folder_name', 'default_upload', 'show_delete',
     // Phone
     'default_country',
     // Cardinality and picker behaviour
@@ -11012,6 +11012,7 @@ class AttachmentComponent {
     eruGridStore = input(null, ...(ngDevMode ? [{ debugName: "eruGridStore" }] : []));
     // Pending view-file requests (fileName -> requestKey)
     pendingViewRequests = new Map();
+    pending_upload_requests = new Map();
     // Outputs
     valueChange = new EventEmitter();
     blur = new EventEmitter();
@@ -11066,10 +11067,18 @@ class AttachmentComponent {
             // Read dynamicData() first to register the reactive dependency,
             // otherwise the effect won't re-run when studio sets the response.
             const dynamicDataMap = store.dynamicData();
-            if (this.pendingViewRequests.size === 0)
-                return;
             if (!dynamicDataMap)
                 return;
+            this.pending_upload_requests.forEach((requestKey, fileName) => {
+                if (!dynamicDataMap.has(requestKey))
+                    return;
+                const data = dynamicDataMap.get(requestKey);
+                this.pending_upload_requests.delete(fileName);
+                store.removeDynamicData(requestKey);
+                untracked(() => this.applyUploadResponse(fileName, data));
+            });
+            if (this.pendingViewRequests.size === 0)
+                return;
             this.pendingViewRequests.forEach((requestKey, fileName) => {
                 if (dynamicDataMap.has(requestKey)) {
                     const data = dynamicDataMap.get(requestKey);
@@ -11240,6 +11249,37 @@ class AttachmentComponent {
             folder_name: cfg.folderName ?? '',
             default_upload: cfg.defaultUpload !== false,
         });
+        if (cfg.defaultUpload === false)
+            return;
+        const store = this.eruGridStore();
+        if (!store)
+            return;
+        const requestKey = `ds_upload_file_grid:${fileName}`;
+        const request = { key: requestKey, file: base64String, file_name: fileName };
+        if (cfg.storageName)
+            request.storage_name = cfg.storageName;
+        if (cfg.folderName)
+            request.folder_name = cfg.folderName;
+        this.pending_upload_requests.set(fileName, requestKey);
+        store.setDynamicDataRequest(request);
+    }
+    applyUploadResponse(fileName, data) {
+        const files = this.currentValue();
+        if (!data || data.error) {
+            const remaining = files.filter(f => f !== fileName);
+            this.currentValue.set(remaining);
+            this.valueChange.emit(remaining.length > 0 ? remaining : null);
+            this.rejectFile(`${fileName}: ${data?.error || 'upload failed'}`);
+            this.cdr.markForCheck();
+            return;
+        }
+        const stored_name = String(data.file_name || '').trim();
+        if (!stored_name || stored_name === fileName)
+            return;
+        const updated = files.map(f => f === fileName ? stored_name : f);
+        this.currentValue.set(updated);
+        this.valueChange.emit(updated);
+        this.cdr.markForCheck();
     }
     viewFile(file, event) {
         if (event) {
@@ -11253,7 +11293,13 @@ class AttachmentComponent {
             return;
         const requestKey = `ds_view_file_grid:${file}`;
         this.pendingViewRequests.set(file, requestKey);
-        store.setDynamicDataRequest(requestKey);
+        const cfg = this.config();
+        const request = { key: requestKey };
+        if (cfg.storageName)
+            request.storage_name = cfg.storageName;
+        if (cfg.folderName)
+            request.folder_name = cfg.folderName;
+        store.setDynamicDataRequest(request);
     }
     openBase64InNewTab(base64, fileType, fileName) {
         try {
@@ -11296,7 +11342,7 @@ class AttachmentComponent {
         return file;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AttachmentComponent, isStandalone: true, selector: "eru-attachment", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isDrillable: { classPropertyName: "isDrillable", publicName: "isDrillable", isSignal: true, isRequired: false, transformFunction: null }, columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, eruGridStore: { classPropertyName: "eruGridStore", publicName: "eruGridStore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus", drilldownClick: "drilldownClick", editModeChange: "editModeChange", fileAdded: "fileAdded", fileUpload: "fileUpload", fileDeleted: "fileDeleted", fileViewed: "fileViewed" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"attachment-overlay-container\">\n  <div \n    class=\"attachment-cell-wrapper\"\n    cdkOverlayOrigin \n    #attachmentTrigger=\"cdkOverlayOrigin\"\n    [class.attachment-display-editable]=\"isEditable() && !isActive()\"\n    [class.attachment-display-viewable]=\"!isEditable() && hasFiles()\"\n    (dblclick)=\"onActivate()\">\n    @if(hasFiles()) {\n      <div class=\"cell-attachment-container\">\n        @if (isDrillable() && !isActive()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M19 12.5C19 14.985 15.866 17 12 17C8.134 17 5 14.985 5 12.5C5 10.015 8.134 8 12 8C15.866 8 19 10.015 19 12.5Z\"\n                stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M13.75 12.5001C13.7716 13.1394 13.4429 13.7397 12.8925 14.0657C12.3422 14.3918 11.6578 14.3918 11.1075 14.0657C10.5571 13.7397 10.2284 13.1394 10.25 12.5001C10.2284 11.8608 10.5571 11.2606 11.1075 10.9345C11.6578 10.6084 12.3422 10.6084 12.8925 10.9345C13.4429 11.2606 13.7716 11.8608 13.75 12.5001V12.5001Z\"\n                stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </span>\n        } @else {\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M19 12.5C19 14.985 15.866 17 12 17C8.134 17 5 14.985 5 12.5C5 10.015 8.134 8 12 8C15.866 8 19 10.015 19 12.5Z\"\n              stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M13.75 12.5001C13.7716 13.1394 13.4429 13.7397 12.8925 14.0657C12.3422 14.3918 11.6578 14.3918 11.1075 14.0657C10.5571 13.7397 10.2284 13.1394 10.25 12.5001C10.2284 11.8608 10.5571 11.2606 11.1075 10.9345C11.6578 10.6084 12.3422 10.6084 12.8925 10.9345C13.4429 11.2606 13.7716 11.8608 13.75 12.5001V12.5001Z\"\n              stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n      </div>\n    } @else {\n      <div class=\"cell-attachment-container\">\n        @if (isDrillable() && !isActive()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M14.67 11.053L10.68 15.315C10.3416 15.6932 9.85986 15.9119 9.35236 15.9178C8.84487 15.9237 8.35821 15.7162 8.01104 15.346C7.24412 14.5454 7.257 13.2788 8.04004 12.494L13.399 6.763C13.9902 6.10491 14.8315 5.72677 15.7161 5.72163C16.6006 5.71649 17.4463 6.08482 18.045 6.736C19.3222 8.14736 19.3131 10.2995 18.024 11.7L12.342 17.771C11.5334 18.5827 10.4265 19.0261 9.28113 18.9971C8.13575 18.9682 7.05268 18.4695 6.28604 17.618C4.5337 15.6414 4.57705 12.6549 6.38604 10.73L11.753 5\"\n                stroke=\"#363B44\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </span>\n        } @else {\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M14.67 11.053L10.68 15.315C10.3416 15.6932 9.85986 15.9119 9.35236 15.9178C8.84487 15.9237 8.35821 15.7162 8.01104 15.346C7.24412 14.5454 7.257 13.2788 8.04004 12.494L13.399 6.763C13.9902 6.10491 14.8315 5.72677 15.7161 5.72163C16.6006 5.71649 17.4463 6.08482 18.045 6.736C19.3222 8.14736 19.3131 10.2995 18.024 11.7L12.342 17.771C11.5334 18.5827 10.4265 19.0261 9.28113 18.9971C8.13575 18.9682 7.05268 18.4695 6.28604 17.618C4.5337 15.6414 4.57705 12.6549 6.38604 10.73L11.753 5\"\n              stroke=\"#363B44\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n      </div>\n    }\n  </div>\n\n  <ng-template \n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"attachmentTrigger\"\n    [cdkConnectedOverlayOpen]=\"isOverlayOpen() && (isActive() || !isEditable())\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'attachment-backdrop'\"\n    (backdropClick)=\"onOverlayBackdropClick()\"\n    (detach)=\"closeOverlay()\">\n    <div \n      class=\"attachment-menu-overlay\" \n      [style.width.px]=\"columnWidth() || config().columnWidth || 300\" \n      [style.min-width.px]=\"300\"\n      (click)=\"onOverlayClick($event)\">\n      <div class=\"attachment-container\" (click)=\"$event.stopPropagation()\">\n        @if (rejectionMessage()) {\n          <div class=\"attachment-rejection\" role=\"alert\">{{ rejectionMessage() }}</div>\n        }\n        @if (isEditable()) {\n          <!-- Header Section -->\n          <div class=\"attachment-header\">\n            <span class=\"attachment-title\">Add or Drag files</span>\n            <button\n              mat-flat-button\n              (click)=\"onUploadClick(); $event.stopPropagation()\"\n              class=\"attachment-upload-btn\"\n              [disabled]=\"config().disabled\">\n              Upload\n            </button>\n          </div>\n\n          <!-- Drop zone -->\n          <div\n            class=\"attachment-drop-zone\"\n            (drop)=\"onFileDrop($event)\"\n            (dragover)=\"onDragOver($event)\"\n            (dragleave)=\"onDragLeave($event)\"\n            (paste)=\"onPaste($event)\"\n            (click)=\"onUploadClick(); $event.stopPropagation()\"\n            [class.dragging]=\"isDragging()\">\n            <div class=\"attachment-drop-content\">\n              <div class=\"attachment-drop-icon\">+</div>\n              <div class=\"attachment-drop-text\">\n                <div class=\"primary-text\">Click to upload or drag files here</div>\n                <div class=\"secondary-text\">Support multiple files</div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Hidden file input -->\n          <input\n            #fileInput\n            type=\"file\"\n            multiple\n            (change)=\"onFileInputChange($event)\"\n            style=\"display: none;\">\n        } @else {\n          <!-- Read-only header -->\n          <div class=\"attachment-header\">\n            <span class=\"attachment-title\">Attachments</span>\n          </div>\n        }\n\n        <!-- File list -->\n        @if (hasFiles()) {\n          <div class=\"attachment-file-list\">\n            @for (file of currentValue(); track $index) {\n              <div class=\"attachment-file-item\">\n                <div class=\"file-info\">\n                  <mat-icon class=\"file-status-icon done-icon\">check_circle</mat-icon>\n                  <span class=\"file-name\">{{ getFileName(file) }}</span>\n                </div>\n                <div class=\"file-actions\">\n                  <button\n                    mat-icon-button\n                    class=\"file-action-btn\"\n                    (click)=\"viewFile(file, $event)\"\n                    title=\"View\"\n                    type=\"button\">\n                    <mat-icon>visibility</mat-icon>\n                  </button>\n                  @if (isEditable()) {\n                    <button\n                      mat-icon-button\n                      class=\"file-action-btn\"\n                      (click)=\"deleteFile(file, $event)\"\n                      title=\"Delete\"\n                      type=\"button\">\n                      <mat-icon>delete_outline</mat-icon>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n</div>\n\n", styles: [".attachment-rejection{padding:8px 10px;margin-bottom:8px;border-radius:6px;background:#fef2f2;color:var(--cell-color, #b91c1c);font-size:var(--cell-font-size, 12px);line-height:1.4}.attachment-overlay-container{width:100%;height:100%}.attachment-cell-wrapper{display:flex;align-items:center;justify-content:center;padding:4px;min-height:32px;cursor:default}.attachment-cell-wrapper.attachment-display-editable{cursor:pointer}.attachment-cell-wrapper.attachment-display-editable:hover{background-color:#0000000a}.attachment-cell-wrapper.attachment-display-viewable{cursor:pointer}.attachment-cell-wrapper.attachment-display-viewable:hover{background-color:#0000000a}.cell-attachment-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.drillable-value{display:flex;align-items:center;justify-content:center;cursor:pointer}.drillable-value svg{text-decoration:none}.drillable-value:hover{opacity:.8}.attachment-backdrop{background:transparent}.attachment-menu-overlay{background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;position:relative;z-index:1000}.attachment-container{padding:16px}.attachment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.attachment-title{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));font-weight:var(--cell-font-weight, 500);color:var(--cell-color, var(--grid-on-surface, #1c1b1f))}.attachment-upload-btn{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px))!important;min-width:50px}.attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0);border-radius:8px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--grid-surface-variant, #e7e0ec);margin:16px 0}.attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7)}.attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7);transform:scale(1.01)}.attachment-drop-content{display:flex;flex-direction:column;align-items:center;gap:12px}.attachment-drop-icon{font-size:var(--cell-font-size, 48px);color:var(--cell-color, var(--grid-primary, #6750a4));font-weight:var(--cell-font-weight, 300);line-height:1}.attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:var(--cell-font-size, 14px);color:var(--cell-color, var(--grid-on-surface-variant, #49454f));font-weight:var(--cell-font-weight, 400);margin:0}.attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:var(--cell-font-size, 12px);color:var(--cell-color, var(--grid-on-surface-variant, #49454f));margin-top:4px;display:block}.attachment-file-list{display:block;margin-top:16px;max-height:300px;overflow-y:auto}.attachment-file-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:4px;margin-bottom:8px;background:var(--grid-surface-variant, #e7e0ec);transition:background-color .2s}.attachment-file-item:hover{background:var(--grid-surface-container, #f3edf7)}.file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.file-status-icon{font-size:var(--cell-font-size, 18px)!important;width:18px!important;height:18px!important;flex-shrink:0}.file-status-icon.done-icon{color:var(--cell-color, #22C55E)}.file-name{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));color:var(--cell-color, var(--grid-on-surface, #1c1b1f));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-actions{display:flex;gap:8px;flex-shrink:0}.file-action-btn{width:28px!important;height:28px!important;padding:0!important;display:flex!important;align-items:center;justify-content:center}.file-action-btn .mat-icon{font-size:var(--cell-font-size, 18px);width:18px;height:18px;color:var(--cell-color, var(--grid-on-surface-variant, #49454f))}.file-action-btn:hover .mat-icon{color:var(--cell-color, var(--grid-on-surface, #1c1b1f))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AttachmentComponent, isStandalone: true, selector: "eru-attachment", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isDrillable: { classPropertyName: "isDrillable", publicName: "isDrillable", isSignal: true, isRequired: false, transformFunction: null }, columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, eruGridStore: { classPropertyName: "eruGridStore", publicName: "eruGridStore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus", drilldownClick: "drilldownClick", editModeChange: "editModeChange", fileAdded: "fileAdded", fileUpload: "fileUpload", fileDeleted: "fileDeleted", fileViewed: "fileViewed" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"attachment-overlay-container\">\n  <div \n    class=\"attachment-cell-wrapper\"\n    cdkOverlayOrigin \n    #attachmentTrigger=\"cdkOverlayOrigin\"\n    [class.attachment-display-editable]=\"isEditable() && !isActive()\"\n    [class.attachment-display-viewable]=\"!isEditable() && hasFiles()\"\n    (dblclick)=\"onActivate()\">\n    @if(hasFiles()) {\n      <div class=\"cell-attachment-container\">\n        @if (isDrillable() && !isActive()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M19 12.5C19 14.985 15.866 17 12 17C8.134 17 5 14.985 5 12.5C5 10.015 8.134 8 12 8C15.866 8 19 10.015 19 12.5Z\"\n                stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M13.75 12.5001C13.7716 13.1394 13.4429 13.7397 12.8925 14.0657C12.3422 14.3918 11.6578 14.3918 11.1075 14.0657C10.5571 13.7397 10.2284 13.1394 10.25 12.5001C10.2284 11.8608 10.5571 11.2606 11.1075 10.9345C11.6578 10.6084 12.3422 10.6084 12.8925 10.9345C13.4429 11.2606 13.7716 11.8608 13.75 12.5001V12.5001Z\"\n                stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </span>\n        } @else {\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M19 12.5C19 14.985 15.866 17 12 17C8.134 17 5 14.985 5 12.5C5 10.015 8.134 8 12 8C15.866 8 19 10.015 19 12.5Z\"\n              stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M13.75 12.5001C13.7716 13.1394 13.4429 13.7397 12.8925 14.0657C12.3422 14.3918 11.6578 14.3918 11.1075 14.0657C10.5571 13.7397 10.2284 13.1394 10.25 12.5001C10.2284 11.8608 10.5571 11.2606 11.1075 10.9345C11.6578 10.6084 12.3422 10.6084 12.8925 10.9345C13.4429 11.2606 13.7716 11.8608 13.75 12.5001V12.5001Z\"\n              stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n      </div>\n    } @else {\n      <div class=\"cell-attachment-container\">\n        @if (isDrillable() && !isActive()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M14.67 11.053L10.68 15.315C10.3416 15.6932 9.85986 15.9119 9.35236 15.9178C8.84487 15.9237 8.35821 15.7162 8.01104 15.346C7.24412 14.5454 7.257 13.2788 8.04004 12.494L13.399 6.763C13.9902 6.10491 14.8315 5.72677 15.7161 5.72163C16.6006 5.71649 17.4463 6.08482 18.045 6.736C19.3222 8.14736 19.3131 10.2995 18.024 11.7L12.342 17.771C11.5334 18.5827 10.4265 19.0261 9.28113 18.9971C8.13575 18.9682 7.05268 18.4695 6.28604 17.618C4.5337 15.6414 4.57705 12.6549 6.38604 10.73L11.753 5\"\n                stroke=\"#363B44\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </span>\n        } @else {\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M14.67 11.053L10.68 15.315C10.3416 15.6932 9.85986 15.9119 9.35236 15.9178C8.84487 15.9237 8.35821 15.7162 8.01104 15.346C7.24412 14.5454 7.257 13.2788 8.04004 12.494L13.399 6.763C13.9902 6.10491 14.8315 5.72677 15.7161 5.72163C16.6006 5.71649 17.4463 6.08482 18.045 6.736C19.3222 8.14736 19.3131 10.2995 18.024 11.7L12.342 17.771C11.5334 18.5827 10.4265 19.0261 9.28113 18.9971C8.13575 18.9682 7.05268 18.4695 6.28604 17.618C4.5337 15.6414 4.57705 12.6549 6.38604 10.73L11.753 5\"\n              stroke=\"#363B44\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n      </div>\n    }\n  </div>\n\n  <ng-template \n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"attachmentTrigger\"\n    [cdkConnectedOverlayOpen]=\"isOverlayOpen() && (isActive() || !isEditable())\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'attachment-backdrop'\"\n    (backdropClick)=\"onOverlayBackdropClick()\"\n    (detach)=\"closeOverlay()\">\n    <div \n      class=\"attachment-menu-overlay\" \n      [style.width.px]=\"columnWidth() || config().columnWidth || 300\" \n      [style.min-width.px]=\"300\"\n      (click)=\"onOverlayClick($event)\">\n      <div class=\"attachment-container\" (click)=\"$event.stopPropagation()\">\n        @if (rejectionMessage()) {\n          <div class=\"attachment-rejection\" role=\"alert\">{{ rejectionMessage() }}</div>\n        }\n        @if (isEditable()) {\n          <!-- Header Section -->\n          <div class=\"attachment-header\">\n            <span class=\"attachment-title\">Add or Drag files</span>\n            <button\n              mat-flat-button\n              (click)=\"onUploadClick(); $event.stopPropagation()\"\n              class=\"attachment-upload-btn\"\n              [disabled]=\"config().disabled\">\n              Upload\n            </button>\n          </div>\n\n          <!-- Drop zone -->\n          <div\n            class=\"attachment-drop-zone\"\n            (drop)=\"onFileDrop($event)\"\n            (dragover)=\"onDragOver($event)\"\n            (dragleave)=\"onDragLeave($event)\"\n            (paste)=\"onPaste($event)\"\n            (click)=\"onUploadClick(); $event.stopPropagation()\"\n            [class.dragging]=\"isDragging()\">\n            <div class=\"attachment-drop-content\">\n              <div class=\"attachment-drop-icon\">+</div>\n              <div class=\"attachment-drop-text\">\n                <div class=\"primary-text\">Click to upload or drag files here</div>\n                <div class=\"secondary-text\">Support multiple files</div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Hidden file input -->\n          <input\n            #fileInput\n            type=\"file\"\n            multiple\n            (change)=\"onFileInputChange($event)\"\n            style=\"display: none;\">\n        } @else {\n          <!-- Read-only header -->\n          <div class=\"attachment-header\">\n            <span class=\"attachment-title\">Attachments</span>\n          </div>\n        }\n\n        <!-- File list -->\n        @if (hasFiles()) {\n          <div class=\"attachment-file-list\">\n            @for (file of currentValue(); track $index) {\n              <div class=\"attachment-file-item\">\n                <div class=\"file-info\">\n                  <mat-icon class=\"file-status-icon done-icon\">check_circle</mat-icon>\n                  <span class=\"file-name\">{{ getFileName(file) }}</span>\n                </div>\n                <div class=\"file-actions\">\n                  <button\n                    mat-icon-button\n                    class=\"file-action-btn\"\n                    (click)=\"viewFile(file, $event)\"\n                    title=\"View\"\n                    type=\"button\">\n                    <mat-icon>visibility</mat-icon>\n                  </button>\n                  @if (isEditable() && config().showDelete !== false) {\n                    <button\n                      mat-icon-button\n                      class=\"file-action-btn\"\n                      (click)=\"deleteFile(file, $event)\"\n                      title=\"Delete\"\n                      type=\"button\">\n                      <mat-icon>delete_outline</mat-icon>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n</div>\n\n", styles: [".attachment-rejection{padding:8px 10px;margin-bottom:8px;border-radius:6px;background:#fef2f2;color:var(--cell-color, #b91c1c);font-size:var(--cell-font-size, 12px);line-height:1.4}.attachment-overlay-container{width:100%;height:100%}.attachment-cell-wrapper{display:flex;align-items:center;justify-content:center;padding:4px;min-height:32px;cursor:default}.attachment-cell-wrapper.attachment-display-editable{cursor:pointer}.attachment-cell-wrapper.attachment-display-editable:hover{background-color:#0000000a}.attachment-cell-wrapper.attachment-display-viewable{cursor:pointer}.attachment-cell-wrapper.attachment-display-viewable:hover{background-color:#0000000a}.cell-attachment-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.drillable-value{display:flex;align-items:center;justify-content:center;cursor:pointer}.drillable-value svg{text-decoration:none}.drillable-value:hover{opacity:.8}.attachment-backdrop{background:transparent}.attachment-menu-overlay{background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;position:relative;z-index:1000}.attachment-container{padding:16px}.attachment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.attachment-title{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));font-weight:var(--cell-font-weight, 500);color:var(--cell-color, var(--grid-on-surface, #1c1b1f))}.attachment-upload-btn{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px))!important;min-width:50px}.attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0);border-radius:8px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--grid-surface-variant, #e7e0ec);margin:16px 0}.attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7)}.attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7);transform:scale(1.01)}.attachment-drop-content{display:flex;flex-direction:column;align-items:center;gap:12px}.attachment-drop-icon{font-size:var(--cell-font-size, 48px);color:var(--cell-color, var(--grid-primary, #6750a4));font-weight:var(--cell-font-weight, 300);line-height:1}.attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:var(--cell-font-size, 14px);color:var(--cell-color, var(--grid-on-surface-variant, #49454f));font-weight:var(--cell-font-weight, 400);margin:0}.attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:var(--cell-font-size, 12px);color:var(--cell-color, var(--grid-on-surface-variant, #49454f));margin-top:4px;display:block}.attachment-file-list{display:block;margin-top:16px;max-height:300px;overflow-y:auto}.attachment-file-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:4px;margin-bottom:8px;background:var(--grid-surface-variant, #e7e0ec);transition:background-color .2s}.attachment-file-item:hover{background:var(--grid-surface-container, #f3edf7)}.file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.file-status-icon{font-size:var(--cell-font-size, 18px)!important;width:18px!important;height:18px!important;flex-shrink:0}.file-status-icon.done-icon{color:var(--cell-color, #22C55E)}.file-name{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));color:var(--cell-color, var(--grid-on-surface, #1c1b1f));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-actions{display:flex;gap:8px;flex-shrink:0}.file-action-btn{width:28px!important;height:28px!important;padding:0!important;display:flex!important;align-items:center;justify-content:center}.file-action-btn .mat-icon{font-size:var(--cell-font-size, 18px);width:18px;height:18px;color:var(--cell-color, var(--grid-on-surface-variant, #49454f))}.file-action-btn:hover .mat-icon{color:var(--cell-color, var(--grid-on-surface, #1c1b1f))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AttachmentComponent, decorators: [{
             type: Component,
@@ -11307,7 +11353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         MatButtonModule,
                         MatIconModule,
                         OverlayModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"attachment-overlay-container\">\n  <div \n    class=\"attachment-cell-wrapper\"\n    cdkOverlayOrigin \n    #attachmentTrigger=\"cdkOverlayOrigin\"\n    [class.attachment-display-editable]=\"isEditable() && !isActive()\"\n    [class.attachment-display-viewable]=\"!isEditable() && hasFiles()\"\n    (dblclick)=\"onActivate()\">\n    @if(hasFiles()) {\n      <div class=\"cell-attachment-container\">\n        @if (isDrillable() && !isActive()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M19 12.5C19 14.985 15.866 17 12 17C8.134 17 5 14.985 5 12.5C5 10.015 8.134 8 12 8C15.866 8 19 10.015 19 12.5Z\"\n                stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M13.75 12.5001C13.7716 13.1394 13.4429 13.7397 12.8925 14.0657C12.3422 14.3918 11.6578 14.3918 11.1075 14.0657C10.5571 13.7397 10.2284 13.1394 10.25 12.5001C10.2284 11.8608 10.5571 11.2606 11.1075 10.9345C11.6578 10.6084 12.3422 10.6084 12.8925 10.9345C13.4429 11.2606 13.7716 11.8608 13.75 12.5001V12.5001Z\"\n                stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </span>\n        } @else {\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M19 12.5C19 14.985 15.866 17 12 17C8.134 17 5 14.985 5 12.5C5 10.015 8.134 8 12 8C15.866 8 19 10.015 19 12.5Z\"\n              stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M13.75 12.5001C13.7716 13.1394 13.4429 13.7397 12.8925 14.0657C12.3422 14.3918 11.6578 14.3918 11.1075 14.0657C10.5571 13.7397 10.2284 13.1394 10.25 12.5001C10.2284 11.8608 10.5571 11.2606 11.1075 10.9345C11.6578 10.6084 12.3422 10.6084 12.8925 10.9345C13.4429 11.2606 13.7716 11.8608 13.75 12.5001V12.5001Z\"\n              stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n      </div>\n    } @else {\n      <div class=\"cell-attachment-container\">\n        @if (isDrillable() && !isActive()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M14.67 11.053L10.68 15.315C10.3416 15.6932 9.85986 15.9119 9.35236 15.9178C8.84487 15.9237 8.35821 15.7162 8.01104 15.346C7.24412 14.5454 7.257 13.2788 8.04004 12.494L13.399 6.763C13.9902 6.10491 14.8315 5.72677 15.7161 5.72163C16.6006 5.71649 17.4463 6.08482 18.045 6.736C19.3222 8.14736 19.3131 10.2995 18.024 11.7L12.342 17.771C11.5334 18.5827 10.4265 19.0261 9.28113 18.9971C8.13575 18.9682 7.05268 18.4695 6.28604 17.618C4.5337 15.6414 4.57705 12.6549 6.38604 10.73L11.753 5\"\n                stroke=\"#363B44\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </span>\n        } @else {\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M14.67 11.053L10.68 15.315C10.3416 15.6932 9.85986 15.9119 9.35236 15.9178C8.84487 15.9237 8.35821 15.7162 8.01104 15.346C7.24412 14.5454 7.257 13.2788 8.04004 12.494L13.399 6.763C13.9902 6.10491 14.8315 5.72677 15.7161 5.72163C16.6006 5.71649 17.4463 6.08482 18.045 6.736C19.3222 8.14736 19.3131 10.2995 18.024 11.7L12.342 17.771C11.5334 18.5827 10.4265 19.0261 9.28113 18.9971C8.13575 18.9682 7.05268 18.4695 6.28604 17.618C4.5337 15.6414 4.57705 12.6549 6.38604 10.73L11.753 5\"\n              stroke=\"#363B44\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n      </div>\n    }\n  </div>\n\n  <ng-template \n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"attachmentTrigger\"\n    [cdkConnectedOverlayOpen]=\"isOverlayOpen() && (isActive() || !isEditable())\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'attachment-backdrop'\"\n    (backdropClick)=\"onOverlayBackdropClick()\"\n    (detach)=\"closeOverlay()\">\n    <div \n      class=\"attachment-menu-overlay\" \n      [style.width.px]=\"columnWidth() || config().columnWidth || 300\" \n      [style.min-width.px]=\"300\"\n      (click)=\"onOverlayClick($event)\">\n      <div class=\"attachment-container\" (click)=\"$event.stopPropagation()\">\n        @if (rejectionMessage()) {\n          <div class=\"attachment-rejection\" role=\"alert\">{{ rejectionMessage() }}</div>\n        }\n        @if (isEditable()) {\n          <!-- Header Section -->\n          <div class=\"attachment-header\">\n            <span class=\"attachment-title\">Add or Drag files</span>\n            <button\n              mat-flat-button\n              (click)=\"onUploadClick(); $event.stopPropagation()\"\n              class=\"attachment-upload-btn\"\n              [disabled]=\"config().disabled\">\n              Upload\n            </button>\n          </div>\n\n          <!-- Drop zone -->\n          <div\n            class=\"attachment-drop-zone\"\n            (drop)=\"onFileDrop($event)\"\n            (dragover)=\"onDragOver($event)\"\n            (dragleave)=\"onDragLeave($event)\"\n            (paste)=\"onPaste($event)\"\n            (click)=\"onUploadClick(); $event.stopPropagation()\"\n            [class.dragging]=\"isDragging()\">\n            <div class=\"attachment-drop-content\">\n              <div class=\"attachment-drop-icon\">+</div>\n              <div class=\"attachment-drop-text\">\n                <div class=\"primary-text\">Click to upload or drag files here</div>\n                <div class=\"secondary-text\">Support multiple files</div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Hidden file input -->\n          <input\n            #fileInput\n            type=\"file\"\n            multiple\n            (change)=\"onFileInputChange($event)\"\n            style=\"display: none;\">\n        } @else {\n          <!-- Read-only header -->\n          <div class=\"attachment-header\">\n            <span class=\"attachment-title\">Attachments</span>\n          </div>\n        }\n\n        <!-- File list -->\n        @if (hasFiles()) {\n          <div class=\"attachment-file-list\">\n            @for (file of currentValue(); track $index) {\n              <div class=\"attachment-file-item\">\n                <div class=\"file-info\">\n                  <mat-icon class=\"file-status-icon done-icon\">check_circle</mat-icon>\n                  <span class=\"file-name\">{{ getFileName(file) }}</span>\n                </div>\n                <div class=\"file-actions\">\n                  <button\n                    mat-icon-button\n                    class=\"file-action-btn\"\n                    (click)=\"viewFile(file, $event)\"\n                    title=\"View\"\n                    type=\"button\">\n                    <mat-icon>visibility</mat-icon>\n                  </button>\n                  @if (isEditable()) {\n                    <button\n                      mat-icon-button\n                      class=\"file-action-btn\"\n                      (click)=\"deleteFile(file, $event)\"\n                      title=\"Delete\"\n                      type=\"button\">\n                      <mat-icon>delete_outline</mat-icon>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n</div>\n\n", styles: [".attachment-rejection{padding:8px 10px;margin-bottom:8px;border-radius:6px;background:#fef2f2;color:var(--cell-color, #b91c1c);font-size:var(--cell-font-size, 12px);line-height:1.4}.attachment-overlay-container{width:100%;height:100%}.attachment-cell-wrapper{display:flex;align-items:center;justify-content:center;padding:4px;min-height:32px;cursor:default}.attachment-cell-wrapper.attachment-display-editable{cursor:pointer}.attachment-cell-wrapper.attachment-display-editable:hover{background-color:#0000000a}.attachment-cell-wrapper.attachment-display-viewable{cursor:pointer}.attachment-cell-wrapper.attachment-display-viewable:hover{background-color:#0000000a}.cell-attachment-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.drillable-value{display:flex;align-items:center;justify-content:center;cursor:pointer}.drillable-value svg{text-decoration:none}.drillable-value:hover{opacity:.8}.attachment-backdrop{background:transparent}.attachment-menu-overlay{background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;position:relative;z-index:1000}.attachment-container{padding:16px}.attachment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.attachment-title{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));font-weight:var(--cell-font-weight, 500);color:var(--cell-color, var(--grid-on-surface, #1c1b1f))}.attachment-upload-btn{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px))!important;min-width:50px}.attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0);border-radius:8px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--grid-surface-variant, #e7e0ec);margin:16px 0}.attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7)}.attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7);transform:scale(1.01)}.attachment-drop-content{display:flex;flex-direction:column;align-items:center;gap:12px}.attachment-drop-icon{font-size:var(--cell-font-size, 48px);color:var(--cell-color, var(--grid-primary, #6750a4));font-weight:var(--cell-font-weight, 300);line-height:1}.attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:var(--cell-font-size, 14px);color:var(--cell-color, var(--grid-on-surface-variant, #49454f));font-weight:var(--cell-font-weight, 400);margin:0}.attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:var(--cell-font-size, 12px);color:var(--cell-color, var(--grid-on-surface-variant, #49454f));margin-top:4px;display:block}.attachment-file-list{display:block;margin-top:16px;max-height:300px;overflow-y:auto}.attachment-file-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:4px;margin-bottom:8px;background:var(--grid-surface-variant, #e7e0ec);transition:background-color .2s}.attachment-file-item:hover{background:var(--grid-surface-container, #f3edf7)}.file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.file-status-icon{font-size:var(--cell-font-size, 18px)!important;width:18px!important;height:18px!important;flex-shrink:0}.file-status-icon.done-icon{color:var(--cell-color, #22C55E)}.file-name{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));color:var(--cell-color, var(--grid-on-surface, #1c1b1f));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-actions{display:flex;gap:8px;flex-shrink:0}.file-action-btn{width:28px!important;height:28px!important;padding:0!important;display:flex!important;align-items:center;justify-content:center}.file-action-btn .mat-icon{font-size:var(--cell-font-size, 18px);width:18px;height:18px;color:var(--cell-color, var(--grid-on-surface-variant, #49454f))}.file-action-btn:hover .mat-icon{color:var(--cell-color, var(--grid-on-surface, #1c1b1f))}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"attachment-overlay-container\">\n  <div \n    class=\"attachment-cell-wrapper\"\n    cdkOverlayOrigin \n    #attachmentTrigger=\"cdkOverlayOrigin\"\n    [class.attachment-display-editable]=\"isEditable() && !isActive()\"\n    [class.attachment-display-viewable]=\"!isEditable() && hasFiles()\"\n    (dblclick)=\"onActivate()\">\n    @if(hasFiles()) {\n      <div class=\"cell-attachment-container\">\n        @if (isDrillable() && !isActive()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M19 12.5C19 14.985 15.866 17 12 17C8.134 17 5 14.985 5 12.5C5 10.015 8.134 8 12 8C15.866 8 19 10.015 19 12.5Z\"\n                stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M13.75 12.5001C13.7716 13.1394 13.4429 13.7397 12.8925 14.0657C12.3422 14.3918 11.6578 14.3918 11.1075 14.0657C10.5571 13.7397 10.2284 13.1394 10.25 12.5001C10.2284 11.8608 10.5571 11.2606 11.1075 10.9345C11.6578 10.6084 12.3422 10.6084 12.8925 10.9345C13.4429 11.2606 13.7716 11.8608 13.75 12.5001V12.5001Z\"\n                stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </span>\n        } @else {\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M19 12.5C19 14.985 15.866 17 12 17C8.134 17 5 14.985 5 12.5C5 10.015 8.134 8 12 8C15.866 8 19 10.015 19 12.5Z\"\n              stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M13.75 12.5001C13.7716 13.1394 13.4429 13.7397 12.8925 14.0657C12.3422 14.3918 11.6578 14.3918 11.1075 14.0657C10.5571 13.7397 10.2284 13.1394 10.25 12.5001C10.2284 11.8608 10.5571 11.2606 11.1075 10.9345C11.6578 10.6084 12.3422 10.6084 12.8925 10.9345C13.4429 11.2606 13.7716 11.8608 13.75 12.5001V12.5001Z\"\n              stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n      </div>\n    } @else {\n      <div class=\"cell-attachment-container\">\n        @if (isDrillable() && !isActive()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M14.67 11.053L10.68 15.315C10.3416 15.6932 9.85986 15.9119 9.35236 15.9178C8.84487 15.9237 8.35821 15.7162 8.01104 15.346C7.24412 14.5454 7.257 13.2788 8.04004 12.494L13.399 6.763C13.9902 6.10491 14.8315 5.72677 15.7161 5.72163C16.6006 5.71649 17.4463 6.08482 18.045 6.736C19.3222 8.14736 19.3131 10.2995 18.024 11.7L12.342 17.771C11.5334 18.5827 10.4265 19.0261 9.28113 18.9971C8.13575 18.9682 7.05268 18.4695 6.28604 17.618C4.5337 15.6414 4.57705 12.6549 6.38604 10.73L11.753 5\"\n                stroke=\"#363B44\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </span>\n        } @else {\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M14.67 11.053L10.68 15.315C10.3416 15.6932 9.85986 15.9119 9.35236 15.9178C8.84487 15.9237 8.35821 15.7162 8.01104 15.346C7.24412 14.5454 7.257 13.2788 8.04004 12.494L13.399 6.763C13.9902 6.10491 14.8315 5.72677 15.7161 5.72163C16.6006 5.71649 17.4463 6.08482 18.045 6.736C19.3222 8.14736 19.3131 10.2995 18.024 11.7L12.342 17.771C11.5334 18.5827 10.4265 19.0261 9.28113 18.9971C8.13575 18.9682 7.05268 18.4695 6.28604 17.618C4.5337 15.6414 4.57705 12.6549 6.38604 10.73L11.753 5\"\n              stroke=\"#363B44\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n      </div>\n    }\n  </div>\n\n  <ng-template \n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"attachmentTrigger\"\n    [cdkConnectedOverlayOpen]=\"isOverlayOpen() && (isActive() || !isEditable())\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'attachment-backdrop'\"\n    (backdropClick)=\"onOverlayBackdropClick()\"\n    (detach)=\"closeOverlay()\">\n    <div \n      class=\"attachment-menu-overlay\" \n      [style.width.px]=\"columnWidth() || config().columnWidth || 300\" \n      [style.min-width.px]=\"300\"\n      (click)=\"onOverlayClick($event)\">\n      <div class=\"attachment-container\" (click)=\"$event.stopPropagation()\">\n        @if (rejectionMessage()) {\n          <div class=\"attachment-rejection\" role=\"alert\">{{ rejectionMessage() }}</div>\n        }\n        @if (isEditable()) {\n          <!-- Header Section -->\n          <div class=\"attachment-header\">\n            <span class=\"attachment-title\">Add or Drag files</span>\n            <button\n              mat-flat-button\n              (click)=\"onUploadClick(); $event.stopPropagation()\"\n              class=\"attachment-upload-btn\"\n              [disabled]=\"config().disabled\">\n              Upload\n            </button>\n          </div>\n\n          <!-- Drop zone -->\n          <div\n            class=\"attachment-drop-zone\"\n            (drop)=\"onFileDrop($event)\"\n            (dragover)=\"onDragOver($event)\"\n            (dragleave)=\"onDragLeave($event)\"\n            (paste)=\"onPaste($event)\"\n            (click)=\"onUploadClick(); $event.stopPropagation()\"\n            [class.dragging]=\"isDragging()\">\n            <div class=\"attachment-drop-content\">\n              <div class=\"attachment-drop-icon\">+</div>\n              <div class=\"attachment-drop-text\">\n                <div class=\"primary-text\">Click to upload or drag files here</div>\n                <div class=\"secondary-text\">Support multiple files</div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Hidden file input -->\n          <input\n            #fileInput\n            type=\"file\"\n            multiple\n            (change)=\"onFileInputChange($event)\"\n            style=\"display: none;\">\n        } @else {\n          <!-- Read-only header -->\n          <div class=\"attachment-header\">\n            <span class=\"attachment-title\">Attachments</span>\n          </div>\n        }\n\n        <!-- File list -->\n        @if (hasFiles()) {\n          <div class=\"attachment-file-list\">\n            @for (file of currentValue(); track $index) {\n              <div class=\"attachment-file-item\">\n                <div class=\"file-info\">\n                  <mat-icon class=\"file-status-icon done-icon\">check_circle</mat-icon>\n                  <span class=\"file-name\">{{ getFileName(file) }}</span>\n                </div>\n                <div class=\"file-actions\">\n                  <button\n                    mat-icon-button\n                    class=\"file-action-btn\"\n                    (click)=\"viewFile(file, $event)\"\n                    title=\"View\"\n                    type=\"button\">\n                    <mat-icon>visibility</mat-icon>\n                  </button>\n                  @if (isEditable() && config().showDelete !== false) {\n                    <button\n                      mat-icon-button\n                      class=\"file-action-btn\"\n                      (click)=\"deleteFile(file, $event)\"\n                      title=\"Delete\"\n                      type=\"button\">\n                      <mat-icon>delete_outline</mat-icon>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n</div>\n\n", styles: [".attachment-rejection{padding:8px 10px;margin-bottom:8px;border-radius:6px;background:#fef2f2;color:var(--cell-color, #b91c1c);font-size:var(--cell-font-size, 12px);line-height:1.4}.attachment-overlay-container{width:100%;height:100%}.attachment-cell-wrapper{display:flex;align-items:center;justify-content:center;padding:4px;min-height:32px;cursor:default}.attachment-cell-wrapper.attachment-display-editable{cursor:pointer}.attachment-cell-wrapper.attachment-display-editable:hover{background-color:#0000000a}.attachment-cell-wrapper.attachment-display-viewable{cursor:pointer}.attachment-cell-wrapper.attachment-display-viewable:hover{background-color:#0000000a}.cell-attachment-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.drillable-value{display:flex;align-items:center;justify-content:center;cursor:pointer}.drillable-value svg{text-decoration:none}.drillable-value:hover{opacity:.8}.attachment-backdrop{background:transparent}.attachment-menu-overlay{background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;position:relative;z-index:1000}.attachment-container{padding:16px}.attachment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.attachment-title{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));font-weight:var(--cell-font-weight, 500);color:var(--cell-color, var(--grid-on-surface, #1c1b1f))}.attachment-upload-btn{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px))!important;min-width:50px}.attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0);border-radius:8px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--grid-surface-variant, #e7e0ec);margin:16px 0}.attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7)}.attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7);transform:scale(1.01)}.attachment-drop-content{display:flex;flex-direction:column;align-items:center;gap:12px}.attachment-drop-icon{font-size:var(--cell-font-size, 48px);color:var(--cell-color, var(--grid-primary, #6750a4));font-weight:var(--cell-font-weight, 300);line-height:1}.attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:var(--cell-font-size, 14px);color:var(--cell-color, var(--grid-on-surface-variant, #49454f));font-weight:var(--cell-font-weight, 400);margin:0}.attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:var(--cell-font-size, 12px);color:var(--cell-color, var(--grid-on-surface-variant, #49454f));margin-top:4px;display:block}.attachment-file-list{display:block;margin-top:16px;max-height:300px;overflow-y:auto}.attachment-file-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:4px;margin-bottom:8px;background:var(--grid-surface-variant, #e7e0ec);transition:background-color .2s}.attachment-file-item:hover{background:var(--grid-surface-container, #f3edf7)}.file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.file-status-icon{font-size:var(--cell-font-size, 18px)!important;width:18px!important;height:18px!important;flex-shrink:0}.file-status-icon.done-icon{color:var(--cell-color, #22C55E)}.file-name{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));color:var(--cell-color, var(--grid-on-surface, #1c1b1f));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-actions{display:flex;gap:8px;flex-shrink:0}.file-action-btn{width:28px!important;height:28px!important;padding:0!important;display:flex!important;align-items:center;justify-content:center}.file-action-btn .mat-icon{font-size:var(--cell-font-size, 18px);width:18px;height:18px;color:var(--cell-color, var(--grid-on-surface-variant, #49454f))}.file-action-btn:hover .mat-icon{color:var(--cell-color, var(--grid-on-surface, #1c1b1f))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], isEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditable", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], isDrillable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDrillable", required: false }] }], columnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnWidth", required: false }] }], eruGridStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "eruGridStore", required: false }] }], valueChange: [{
                 type: Output
             }], blur: [{
@@ -11736,6 +11782,13 @@ class DataCellComponent {
     // Currency component configuration
     // Event handlers
     onValueChange(value) {
+        if (!this.isActive() && this.columnDatatype() === 'attachment') {
+            const previous = this.currentValue();
+            this.currentValue.set(value);
+            if (this.hasValueChanged(previous, value))
+                this.notifyStoreOfValueChange(previous, value);
+            return;
+        }
         this.currentValue.set(value);
         // Some types need immediate validation feedback
         const typesNeedingValidation = ['textbox', 'email', 'textarea', 'website', 'location'];
@@ -12080,7 +12133,8 @@ class DataCellComponent {
             columnWidth: config?.column_width || this.currentColumnWidth(),
             storageName: config?.storage_name || '',
             folderName: this.resolvedFolderName(config?.folder_name),
-            defaultUpload: config?.default_upload !== false
+            defaultUpload: config?.default_upload !== false,
+            showDelete: config?.show_delete !== false
         };
     }, ...(ngDevMode ? [{ debugName: "getAttachmentConfig" }] : []));
     /**
@@ -13931,6 +13985,7 @@ const DATATYPE_FIELDS = {
         { key: 'default_upload', label: 'Default upload', control: 'checkbox', defaultValue: true },
         { key: 'storage_name', label: 'Storage name', control: 'text', showWhen: f => f.default_upload !== false },
         { key: 'folder_name', label: 'Folder from field', control: 'text', showWhen: f => f.default_upload !== false },
+        { key: 'show_delete', label: 'Show delete', control: 'checkbox', defaultValue: true },
     ],
     phone: [{ key: 'default_country', label: 'Default country (ISO)', control: 'text' }],
     people: [