eru-grid 0.0.22-l → 0.0.22-m

package/fesm2022/eru-grid.mjs

@@ -3753,6 +3753,61 @@ class DataCellComponent {
         // currentValue is now automatically synchronized via effect in constructor
     }
     isActive = computed(() => this.eruGridStore().activeCell() === this.el.nativeElement, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    // Audio cell: the file server ignores HTTP range requests (returns 200, not
+    // 206), so the native <audio> timeline can't seek when streaming the URL
+    // directly. On first play we download the whole file as a blob and swap the
+    // element's source to a local object URL, which is fully buffered and so
+    // seekable. Blobs are cached by URL in a shared (static) map so each file
+    // downloads at most ONCE per session — reused across rows and across the
+    // grid's virtual-scroll cell recycling (no re-download on scroll).
+    static audioBlobCache = new Map();
+    // The audio element currently playing — used to enforce single playback so
+    // starting one recording pauses any other that's already playing.
+    static currentAudio = null;
+    audioBlobUrl = signal(null, ...(ngDevMode ? [{ debugName: "audioBlobUrl" }] : []));
+    audioBuffering = false;
+    async onAudioPlay(audioEl) {
+        // Single playback: pause whatever else was playing before this one started.
+        const previous = DataCellComponent.currentAudio;
+        if (previous && previous !== audioEl) {
+            previous.pause();
+        }
+        DataCellComponent.currentAudio = audioEl;
+        // Already backed by a local blob → native seeking works, nothing to do.
+        if (this.audioBlobUrl() || this.audioBuffering) {
+            return;
+        }
+        const url = this.value();
+        if (!url) {
+            return;
+        }
+        const key = String(url);
+        // Reuse the in-flight or completed download for this URL.
+        let blobPromise = DataCellComponent.audioBlobCache.get(key);
+        if (!blobPromise) {
+            blobPromise = fetch(key)
+                .then((resp) => resp.blob())
+                .then((blob) => URL.createObjectURL(blob));
+            DataCellComponent.audioBlobCache.set(key, blobPromise);
+        }
+        this.audioBuffering = true;
+        audioEl.pause();
+        try {
+            const objUrl = await blobPromise;
+            this.audioBlobUrl.set(objUrl);
+            // Let the [src] binding update to the blob URL, then start playback.
+            setTimeout(() => audioEl.play().catch(() => { }), 0);
+        }
+        catch {
+            // Download failed → drop the cache entry so a later play can retry, and
+            // fall back to direct (non-seekable) streaming.
+            DataCellComponent.audioBlobCache.delete(key);
+            audioEl.play().catch(() => { });
+        }
+        finally {
+            this.audioBuffering = false;
+        }
+    }
     setActive(active) {
         if (active && this.isEditable() && this.mode() === 'table') {
             this.eruGridStore().setActiveCell(this.el.nativeElement);
@@ -4445,7 +4500,7 @@ class DataCellComponent {
                 useValue: cellValidators
             },
             ...MATERIAL_PROVIDERS
-        ], viewQueries: [{ propertyName: "attachmentTrigger", first: true, predicate: ["attachmentTrigger"], descendants: true }, { propertyName: "singleSelectTrigger", first: true, predicate: ["singleSelectTrigger"], descendants: true }, { propertyName: "multiSelectTrigger", first: true, predicate: ["multiSelectTrigger"], descendants: true }, { propertyName: "peopleTrigger", first: true, predicate: ["peopleTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\n  @switch (columnDatatype()) {\n  @case ('textbox') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'input-' + columnName()+ id()\" [name]=\"'input-' + columnName()+ id()\"\n      [(ngModel)]=\"currentValue\" (blur)=\"onTextboxBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\"><a class=\"drillable-link\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</a></span>\n    } @else {\n      {{currentValue()}}\n    }\n  </div>\n  }\n  }\n  @case ('currency') {\n  @if(isActive()){\n      <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'currency-' + columnName()+ id()\" [name]=\"'currency-' + columnName()+ id()\"\n      [ngModel]=\"currentValue()\" (ngModelChange)=\"setField($event)\" placeholder=\"Number\" (blur)=\"onNumberBlur()\">\n      <span matTextPrefix>$</span>\n    </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text cell-display-number\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{formatNumberSignal()}}</span>\n    } @else {\n      {{formatNumberSignal()}}\n    }\n  </div>\n  }\n  }\n  @case ('number') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'number-' + columnName()+ id()\" [name]=\"'number-' + columnName()+ id()\"\n      [ngModel]=\"currentValue()\" (ngModelChange)=\"setField($event)\" placeholder=\"Number\" (blur)=\"onNumberBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text cell-display-number\" (dblclick)=\"setActive(true)\"\n[class.cell-display-text-editable]=\"isEditable()\"\n  >\n    @if (drillable() && currentValue() !== 0) {\n      <span class=\"drillable-value\" ><a class=\"drillable-link\" (click)=\"onDrillableClick($event)\">{{formatNumberSignal()}}</a></span>\n    } @else {\n      {{formatNumberSignal()}}\n    }\n  </div>\n  }\n  }\n  @case ('location') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'location-' + columnName()+ id()\" [name]=\"'location-' + columnName()+ id()\"\n      [(ngModel)]=\"currentValue\" placeholder=\"location\" (blur)=\"onLocationBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\"><a class=\"drillable-link\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</a></span>\n    } @else {\n      {{currentValue()}}\n    }\n  </div>\n  }\n  }\n  @case ('email') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"email\" [id]=\"'email-' + columnName()+ id()\" [name]=\"'email-' + columnName()+ id()\"\n      [(ngModel)]=\"currentValue\" placeholder=\"email\" matTooltipPosition=\"below\" (blur)=\"onEmailBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n    } @else {\n      {{currentValue()}}\n    }\n  </div>\n  }\n  }\n      @case ('dropdown_multi_select') {\n      <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" #multiSelectTrigger\n      [class.cell-display-text-editable]=\"isEditable()\">\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}</span>\n        } @else {\n          {{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}\n        }\n      </div>\n    }\n\n  @case ('dropdown_single_select') {\n    <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" [cdkMenuTriggerFor]=\"singleSelectTrigger\" #singleSelectTrigger\n    [class.cell-display-text-editable]=\"isEditable()\">\n      @if (drillable()) {\n        <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n      } @else {\n        {{currentValue()}}\n      }\n    </div>\n  }\n\n  @case ('checkbox') {\n  <div class=\"cell-form-field cell-checkbox\">\n    <mat-checkbox [(ngModel)]=\"currentValue\">\n    </mat-checkbox>\n  </div>\n  }\n\n  @case ('people') {\n    <div class=\"assignee-avatars \" (dblclick)=\"toggleOverlayMenu($event)\" #peopleTrigger>\n      @if (isAssigneeArray(currentValue()) && currentValue().length > 0) {\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            @for (assignee of currentValue(); track $index) {\n             @if ($index < 3) {\n                <div class=\"avatar-circle\" [style.z-index]=\"currentValue().length - $index\">\n                  {{ getInitials(assignee) }}\n                </div>\n              }\n            }\n            @if (currentValue().length > 3) {\n              <div class=\"avatar-circle count-circle\" [style.z-index]=\"1\">\n                +{{ currentValue().length - 3 }}\n              </div>\n            }\n          </span>\n        } @else {\n          @for (assignee of currentValue(); track $index) {\n           @if ($index < 3) {\n              <div class=\"avatar-circle\" [style.z-index]=\"currentValue().length - $index\">\n                {{ getInitials(assignee) }}\n              </div>\n            }\n          }\n          @if (currentValue().length > 3) {\n            <div class=\"avatar-circle count-circle\" [style.z-index]=\"1\">\n              +{{ currentValue().length - 3 }}\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n\n\n  @case ('date') {\n  <div class=\"cell-date-container\">\n    @if(isActive()){\n      <input type=\"text\" [id]=\"'date-' + columnName()+ id()\" [name]=\"'date-' + columnName()+ id()\"\n      [matDatepicker]=\"picker\" appCustomDatePicker class=\"inputRef date-picker\" [ngModel]=\"currentValue()\"\n      (ngModelChange)=\"onDateChange($event)\" (click)=\"picker.open()\" readonly>\n    <mat-datepicker-toggle hidden matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n      } @else {\n      <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n      [class.cell-display-text-editable]=\"isEditable()\">\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n        } @else {\n          {{currentValue()}}\n        }\n      </div>\n      }\n  </div>\n  }\n\n\n  @case ('priority') {\n  <button mat-stroked-button [cdkMenuTriggerFor]=\"prioritySelectMenu\" class=\"dropdown-trigger\">\n    <div class=\"cell-priority-content\">\n      <div [innerHTML]=\"getPriorityIcon()\"></div>\n      @if (drillable()) {\n        <div class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</div>\n      } @else {\n        <div>{{currentValue()}}</div>\n      }\n    </div>\n  </button>\n  }\n  @case ('progress') {\n  @if(isActive()){\n  <div class=\"progress-input-container\">\n    <mat-slider class=\"progress-slider\" [min]=\"0\" [max]=\"100\" [step]=\"1\" [discrete]=\"true\">\n      <input matSliderThumb [ngModel]=\"currentValue()\" (ngModelChange)=\"setProgressValue($event)\">\n    </mat-slider>\n    <span class=\"progress-value\">{{currentValue()}}%</span>\n  </div>\n  } @else {\n  <div class=\"progress-bar-container\" [attr.data-progress]=\"currentValue()\">\n    <div class=\"progress-bar\" [style.width.%]=\"currentValue()\"></div>\n    @if (drillable()) {\n      <span class=\"progress-text drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}%</span>\n    } @else {\n      <span class=\"progress-text\">{{currentValue()}}%</span>\n    }\n  </div>\n  }\n  }\n\n  @case ('rating') {\n  @if(isActive()){\n  <div class=\"rating-input-container\">\n    @for (star of getRatingStars(); track star) {\n    <span class=\"rating-star\" [class.active]=\"currentValue() >= star\" (click)=\"setRatingValue(star)\"\n      (mouseenter)=\"hoverRating = star\" (mouseleave)=\"hoverRating = 0\">\n      {{getEmojiForRating(star)}}\n    </span>\n    }\n    <span class=\"rating-value\">{{currentValue()}}/{{columnCellConfiguration()?.end_value || 5}}</span>\n  </div>\n  } @else {\n  <div class=\"rating-display-container\">\n    @for (star of getRatingStars(); track star) {\n    <span class=\"rating-star\" [class.active]=\"currentValue() >= star\">\n      {{getEmojiForRating(star)}}\n    </span>\n    }\n    @if (drillable()) {\n      <span class=\"drillable-value\"><a class=\"drillable-link\"(click)=\"onDrillableClick($event)\">{{currentValue()}}/{{columnCellConfiguration()?.end_value || 5}}</a></span>\n    }\n  </div>\n  }\n  }\n\n  @case ('status') {\n  <button mat-stroked-button [cdkMenuTriggerFor]=\"statusSelectMenu\" class=\"status-dropdown-trigger\"\n    [style.background-color]=\"getStatusColor(currentValue()).background\"\n    [style.border-color]=\"getStatusColor(currentValue()).border\" [style.color]=\"getStatusColor(currentValue()).text\"\n    [style.height.px]=\"30\">\n    <div class=\"status-button-content\">\n      @if(getStatusButtonDisplay(currentValue()).color) {\n\n      }\n      @if (drillable()) {\n        <span class=\"status-text drillable-value\" (click)=\"onDrillableClick($event)\">\n          {{getStatusButtonDisplay(currentValue()).text}}\n        </span>\n      } @else {\n        <span class=\"status-text\">\n          {{getStatusButtonDisplay(currentValue()).text}}\n        </span>\n      }\n    </div>\n  </button>\n  }\n\n  @case ('tag') {\n  <div class=\"tag-container\" [cdkMenuTriggerFor]=\"tagSelectMenu\">\n\n    <div class=\"tag-display\">\n      @if (drillable()) {\n        <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n          @for (tag of getTagDisplay(currentValue()).displayTags; track tag) {\n          @if (columnCellConfiguration()) {\n          <span class=\"tag\" [style.background]=\"getTagColor(tag).background\" [style.color]=\"getTagColor(tag).color\">\n            {{tag}}\n          </span>\n          } @else {\n          <span class=\"tag cell-fallback-tag\">\n            {{tag}}\n          </span>\n          }\n          }\n          @if(getTagDisplay(currentValue()).moreCount > 0) {\n          <span class=\"tag-more\">\n            + {{getTagDisplay(currentValue()).moreCount}} more\n          </span>\n          }\n        </span>\n      } @else {\n        @for (tag of getTagDisplay(currentValue()).displayTags; track tag) {\n        @if (columnCellConfiguration()) {\n        <span class=\"tag\" [style.background]=\"getTagColor(tag).background\" [style.color]=\"getTagColor(tag).color\">\n          {{tag}}\n        </span>\n        } @else {\n        <span class=\"tag cell-fallback-tag\">\n          {{tag}}\n        </span>\n        }\n        }\n        @if(getTagDisplay(currentValue()).moreCount > 0) {\n        <span class=\"tag-more\">\n          + {{getTagDisplay(currentValue()).moreCount}} more\n        </span>\n        }\n      }\n    </div>\n\n  </div>\n  }\n\n  @case ('phone') {\n  <app-mobile-input [(ngModel)]=\"currentValue\"\n    [defaultCountry]=\"columnCellConfiguration()?.default_country || 'US'\"></app-mobile-input>\n  }\n\n  @case ('attachment') {\n  <div class=\"attachment-cell-wrapper\" (dblclick)=\"toggleOverlayMenu($event)\" cdkOverlayOrigin #attachmentTrigger=\"cdkOverlayOrigin\">\n    @if(currentValue()?.length > 0){\n    <div class=\"cell-attachment-container\">\n      @if (drillable()) {\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 (drillable()) {\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    \n    \n  </div>\n  }\n  @default {\n  <div class=\"cell-default-display\">\n    @if (drillable()) {\n      <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{value()}}</span>\n    } @else {\n      {{value()}}\n    }\n  </div>\n  }\n  }\n\n</div>\n\n<ng-template #prioritySelectMenu>\n  <div class=\"dropdown-menu\" cdkMenu [style.min-width.px]=\"fieldSize()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" [(ngModel)]=\"optionSearchText\">\n      </mat-form-field>\n\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox\">\n        <li [cdkOption]=\"''\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option notext-overflow cell-priority-content\">\n          <div [innerHTML]=\"sanitize.bypassSecurityTrustHtml(option.icon)\"></div>\n          <div>{{option.label}}</div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template cdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"singleSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_single_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_single_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" (click)=\"$event.stopPropagation()\" [(ngModel)]=\"optionSearchText\">\n      </mat-form-field>\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox\">\n        <li [cdkOption]=\"'None'\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        <li [cdkOption]=\"'option 1'\" class=\"listbox-option notext-overflow\">\n          option 1\n        </li>\n        <li [cdkOption]=\"'option 2'\" class=\"listbox-option notext-overflow\">\n          option 2\n        </li>\n        <li [cdkOption]=\"'option 3'\" class=\"listbox-option notext-overflow\">\n          option 3\n        </li>\n        <li [cdkOption]=\"'option 4'\" class=\"listbox-option notext-overflow\">\n          option 4\n        </li><li [cdkOption]=\"'option 5'\" class=\"listbox-option notext-overflow\">\n          option 5\n        </li><li [cdkOption]=\"'option 6'\" class=\"listbox-option notext-overflow\">\n          option 6\n        </li><li [cdkOption]=\"'option 7'\" class=\"listbox-option notext-overflow\">\n          option 7\n        </li><li [cdkOption]=\"'option 1'\" class=\"listbox-option notext-overflow\">\n          option 1\n        </li><li [cdkOption]=\"'option 9'\" class=\"listbox-option notext-overflow\">\n          option 9\n        </li><li [cdkOption]=\"'option 10'\" class=\"listbox-option notext-overflow\">\n          option 10\n        </li><li [cdkOption]=\"'option 11'\" class=\"listbox-option notext-overflow\">\n          option 11\n        </li><li [cdkOption]=\"'option 12'\" class=\"listbox-option notext-overflow\">\n          option 12\n        </li><li [cdkOption]=\"'option 13'\" class=\"listbox-option notext-overflow\">\n          option 13\n        </li><li [cdkOption]=\"'option 14'\" class=\"listbox-option notext-overflow\">\n          option 14\n        </li><li [cdkOption]=\"'option 15'\" class=\"listbox-option notext-overflow\">\n          option 15\n        </li><li [cdkOption]=\"'option 16'\" class=\"listbox-option notext-overflow\">\n          option 16\n        </li><li [cdkOption]=\"'option 17'\" class=\"listbox-option notext-overflow\">\n          option 17\n        </li><li [cdkOption]=\"'option 18'\" class=\"listbox-option notext-overflow\">\n          option 18\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option notext-overflow\">\n          {{option.label}}\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template \ncdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"multiSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_multi_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_multi_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n          <div class=\"listbox-container\">\n        <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n          <input matInput type=\"search\" placeholder=\"Search...\" [ngModel]=\"optionSearchText()\"\n           (ngModelChange)=\"optionSearchText.set($event)\" (click)=\"$event.stopPropagation()\">\n        </mat-form-field>\n        \n        <!-- Select All Checkbox -->\n        <div class=\"select-all-container\" (click)=\"$event.stopPropagation()\">\n          <mat-checkbox \n            [checked]=\"isAllSelected()\" \n            [indeterminate]=\"isIndeterminate()\"\n            (change)=\"toggleSelectAll($event.checked)\">\n            <span class=\"select-all-text\">Select All</span>\n          </mat-checkbox>\n        </div>\n        \n        <ul cdkListboxMultiple=\"true\" cdkListboxUseActiveDescendant cdkListbox [ngModel]=\"currentValue()\"\n          (ngModelChange)=\"selectedMultiSelect($event)\" aria-labelledby=\"listbox-labssel\" class=\"listbox\" (click)=\"$event.stopPropagation()\">\n        <li [cdkOption]=\"'None'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('None')\" (click)=\"$event.stopPropagation();appendMultiSelect('None')\"></mat-checkbox>\n            <span class=\"option-text\">None</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 1'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 1')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 1')\"></mat-checkbox>\n            <span class=\"option-text\">option 1</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 2'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 2')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 2')\"></mat-checkbox>\n            <span class=\"option-text\">option 2</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 3'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 3')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 3')\"></mat-checkbox>\n            <span class=\"option-text\">option 3</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 4'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 4')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 4')\"></mat-checkbox>\n            <span class=\"option-text\">option 4</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 5'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 5')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 5')\"></mat-checkbox>\n            <span class=\"option-text\">option 5</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 6'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 6')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 6')\"></mat-checkbox>\n            <span class=\"option-text\">option 6</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 7'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 7')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 7')\"></mat-checkbox>\n            <span class=\"option-text\">option 7</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 8'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 8')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 8')\"></mat-checkbox>\n            <span class=\"option-text\">option 8</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 9'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 9')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 9')\"></mat-checkbox>\n            <span class=\"option-text\">option 9</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 10'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 10')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 10')\"></mat-checkbox>\n            <span class=\"option-text\">option 10</span>\n          </div>\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected(option.value)\" (click)=\"$event.stopPropagation();appendMultiSelect(option.value)\"></mat-checkbox>\n            <span class=\"option-text\">{{option.label}}</span>\n          </div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template cdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"peopleTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('people')\"\n(detach)=\"isOpen = showOverlayMenu('people')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" [ngModel]=\"optionSearchText()\" (click)=\"$event.stopPropagation()\"\n          (ngModelChange)=\"optionSearchText.set($event)\">\n      </mat-form-field>\n      <ul cdkListboxMultiple=\"true\" cdkListboxUseActiveDescendant cdkListbox [ngModel]=\"currentValue()\"\n        (ngModelChange)=\"selectedMultiSelect($event)\" aria-labelledby=\"listbox-labssel\" class=\"listbox\">\n        <li [cdkOption]=\"'person0@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person0@domain.com') }}</div>\n            <span class=\"option-text\">person0&#64;domain.com</span>\n            @if (isOptionSelected('person0@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person1@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person1@domain.com') }}</div>\n            <span class=\"option-text\">person1&#64;domain.com</span>\n            @if (isOptionSelected('person1@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person2@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person2@domain.com') }}</div>\n            <span class=\"option-text\">person2&#64;domain.com</span>\n            @if (isOptionSelected('person2@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person3@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person3@domain.com') }}</div>\n            <span class=\"option-text\">person3&#64;domain.com</span>\n            @if (isOptionSelected('person3@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person4@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person4@domain.com') }}</div>\n            <span class=\"option-text\">person4&#64;domain.com</span>\n            @if (isOptionSelected('person4@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person5@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person5@domain.com') }}</div>\n            <span class=\"option-text\">person5&#64;domain.com</span>\n            @if (isOptionSelected('person5@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"multi-listbox-option notext-overflow listbox-option_people\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials(option.value) }}</div>\n            <span class=\"option-text\">{{option.label}}</span>\n            @if (isOptionSelected(option.value)) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #statusSelectMenu>\n  <div class=\"dropdown-menu status-dropdown-menu\" cdkMenu [style.min-width.px]=\"fieldSize()\"\n    (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" [(ngModel)]=\"optionSearchText\">\n      </mat-form-field>\n\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox status-listbox\">\n        <li [cdkOption]=\"''\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        @for (option of getStatusOptions(); track option.value) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option status-option\"\n          [style.background-color]=\"getStatusColor(option.value).background\"\n          [style.border-color]=\"getStatusColor(option.value).border\" [style.color]=\"getStatusColor(option.value).text\">\n          @if(option.color) {\n          <span class=\"status-color-indicator\" [style.background-color]=\"option.color\"></span>\n          }\n          {{option.label}}\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tagSelectMenu>\n  <div class=\"dropdown-menu tag-dropdown-menu\" [style.min-width.px]=\"fieldSize()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search or add tag...\" [ngModel]=\"optionSearchText()\"\n          (ngModelChange)=\"optionSearchText.set($event)\" (keyup.enter)=\"addNewTag(optionSearchText())\"\n          [style.min-width.px]=\"fieldSize()\">\n      </mat-form-field>\n\n      <ul cdkListboxMultiple=\"true\" cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedMultiSelect($event)\"\n        class=\"listbox tag-listbox\" [style.min-width.px]=\"fieldSize()\">\n        <!-- Predefined tags -->\n        @for (option of getTagOptions(); track option.value) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option tag-option\">\n          {{option.label}}\n        </li>\n        }\n\n        <!-- New tag input -->\n\n\n\n      </ul>\n\n    </div>\n  </div>\n</ng-template>\n\n<!-- Attachment Menu - Positioned relative to the cell -->\n<ng-template \ncdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"attachmentTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('attachment')\"\n(detach)=\"isOpen = showOverlayMenu('attachment')\">\n  <div class=\"attachment-menu-overlay\" [style.width.px]=\"currentColumnWidth()\" [style.min-width.px]=\"300\">\n    <div class=\"attachment-container\">\n    <!-- Header Section -->\n    <div class=\"attachment-header\">\n      <span class=\"attachment-title\">Add or Drag files</span>\n      <button mat-flat-button \n              (click)=\"fileInput.click()\" \n              class=\"attachment-upload-btn\">\n        Upload\n      </button>\n    </div>\n    \n    <!-- Drop zone -->\n    <div class=\"attachment-drop-zone\" \n         (drop)=\"onFileDrop($event)\" \n         (dragover)=\"onDragOver($event)\" \n         (dragleave)=\"onDragLeave($event)\"\n         (paste)=\"onPaste($event)\"\n         (click)=\"fileInput.click()\"\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 #fileInput \n           type=\"file\" \n           multiple \n           (change)=\"fileInputChange($event)\" \n           style=\"display: none;\">\n    \n    <!-- File list -->\n    <div class=\"attachment-file-list\" *ngIf=\"currentValue()?.length > 0\">\n      <div class=\"attachment-file-item\" *ngFor=\"let file of currentValue(); trackBy: trackByFile\">\n        <div class=\"file-info\">\n          <span class=\"file-icon\">\uD83D\uDCC4</span>\n          <span class=\"file-name\">{{ file?.split('_')?.[2] || file }}</span>\n        </div>\n        <div class=\"file-actions\">\n          <button class=\"action-btn\" (click)=\"viewFile(file)\" title=\"View\">\uD83D\uDC41\uFE0F</button>\n          <button class=\"action-btn\" (click)=\"deleteFile(file)\" title=\"Delete\">\uD83D\uDDD1\uFE0F</button>\n        </div>\n              </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:block;height:100%;width:100%;position:relative;overflow:hidden!important}.container{height:calc(100% - 2px);width:calc(100% - 2px);position:relative!important;overflow:hidden!important;max-width:100%!important;box-sizing:border-box!important}.container .cell-display-text{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.inputRef{height:inherit;width:inherit;border:none}.inputRef:focus{outline:none}.cell-checkbox{text-align:center}.cell-form-field{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-outline,.cell-form-field .mat-mdc-form-field-subscript-wrapper,.cell-form-field .mat-mdc-form-field-text-suffix{display:none!important}.cell-form-field .mat-mdc-form-field-wrapper,.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{width:100%!important;height:100%!important;padding:0!important;margin:0!important;min-height:auto!important;border-top:none!important}.cell-form-field input[matInput]{width:100%!important;height:100%!important;padding:2px!important;margin:0!important;border:none!important;outline:none!important;background:transparent!important;font-size:14px!important;line-height:normal!important;box-sizing:border-box!important;max-width:none!important;min-width:0!important;flex:none!important}.dropdown-menu{width:100%}.attachment-menu,.dropdown-menu,.dropdown-menu.attachment-menu,[cdkMenu].attachment-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border-radius:8px!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important}.attachment-menu.cdk-overlay-pane,.dropdown-menu.cdk-overlay-pane,.dropdown-menu.attachment-menu.cdk-overlay-pane,[cdkMenu].attachment-menu.cdk-overlay-pane{background:var(--grid-surface)!important;background-color:var(--grid-surface)!important}.attachment-menu .attachment-container,.dropdown-menu .attachment-container,.dropdown-menu.attachment-menu .attachment-container,[cdkMenu].attachment-menu .attachment-container{padding:4px;background:var(--grid-surface, #fef7ff);border-radius:8px}.attachment-menu .attachment-header,.dropdown-menu .attachment-header,.dropdown-menu.attachment-menu .attachment-header,[cdkMenu].attachment-menu .attachment-header{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:24px!important;padding:0!important}.attachment-menu .attachment-header .attachment-title,.dropdown-menu .attachment-header .attachment-title,.dropdown-menu.attachment-menu .attachment-header .attachment-title,[cdkMenu].attachment-menu .attachment-header .attachment-title{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:16px!important;font-weight:500!important;color:var(--grid-on-surface, #1d1b20)!important;margin:0!important}.attachment-menu .attachment-header .attachment-upload-btn,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button,.dropdown-menu .attachment-header .attachment-upload-btn,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button{background:var(--grid-primary, #6750a4)!important;background-color:var(--grid-primary, #6750a4)!important;color:var(--grid-on-primary, #ffffff)!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-weight:500!important;padding:8px 20px!important;border-radius:6px!important;border:none!important;cursor:pointer!important;font-size:14px!important;letter-spacing:.5px!important;box-shadow:var(--grid-elevation-1, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15))!important;transition:background-color .2s ease!important}.attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label,.dropdown-menu .attachment-header .attachment-upload-btn .mdc-button__label,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label{color:var(--grid-on-primary, #ffffff)!important}.attachment-menu .attachment-header .attachment-upload-btn:hover,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover,.dropdown-menu .attachment-header .attachment-upload-btn:hover,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn:hover,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn:hover,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover{opacity:.9!important}.attachment-menu .attachment-header .attachment-upload-btn:before,.attachment-menu .attachment-header .attachment-upload-btn:after,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after,.dropdown-menu .attachment-header .attachment-upload-btn:before,.dropdown-menu .attachment-header .attachment-upload-btn:after,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn:before,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn:after,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn:before,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn:after,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after{display:none!important}.attachment-menu .attachment-drop-zone,.dropdown-menu .attachment-drop-zone,.dropdown-menu.attachment-menu .attachment-drop-zone,[cdkMenu].attachment-menu .attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0)!important;border-radius:8px!important;padding:10px!important;text-align:center!important;cursor:pointer!important;transition:all .3s ease!important;background:var(--grid-surface-variant, #e7e0ec)!important;margin:16px 0!important}.attachment-menu .attachment-drop-zone:hover,.dropdown-menu .attachment-drop-zone:hover,.dropdown-menu.attachment-menu .attachment-drop-zone:hover,[cdkMenu].attachment-menu .attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important}.attachment-menu .attachment-drop-zone.dragging,.dropdown-menu .attachment-drop-zone.dragging,.dropdown-menu.attachment-menu .attachment-drop-zone.dragging,[cdkMenu].attachment-menu .attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important;transform:scale(1.01)!important}.attachment-menu .attachment-drop-zone .attachment-drop-content,.dropdown-menu .attachment-drop-zone .attachment-drop-content,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-content,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-content{display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important}.attachment-menu .attachment-drop-zone .attachment-drop-icon,.dropdown-menu .attachment-drop-zone .attachment-drop-icon,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-icon,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-icon{font-size:48px!important;color:var(--grid-primary, #6750a4)!important;font-weight:300!important;line-height:1!important}.attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,.dropdown-menu .attachment-drop-zone .attachment-drop-text .primary-text,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;font-weight:400!important;margin:0!important}.attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.dropdown-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:12px!important;color:var(--grid-on-surface-variant, #49454f)!important;margin-top:4px!important;display:block!important}.attachment-menu .attachment-file-list,.dropdown-menu .attachment-file-list,.dropdown-menu.attachment-menu .attachment-file-list,[cdkMenu].attachment-menu .attachment-file-list{display:block!important;margin-top:16px!important;border-top:1px solid var(--grid-outline-variant, #cac4d0)!important;padding-top:16px!important}.attachment-menu .attachment-file-list .attachment-file-item,.dropdown-menu .attachment-file-list .attachment-file-item,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 0!important;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)!important}.attachment-menu .attachment-file-list .attachment-file-item:last-child,.dropdown-menu .attachment-file-list .attachment-file-item:last-child,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item:last-child,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item:last-child{border-bottom:none!important}.attachment-menu .attachment-file-list .attachment-file-item .file-info,.dropdown-menu .attachment-file-list .attachment-file-item .file-info,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-info,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-info{display:flex!important;align-items:center!important;gap:8px!important;flex:1!important}.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.dropdown-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon{font-size:16px!important;color:var(--grid-on-surface-variant, #49454f)!important}.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,.dropdown-menu .attachment-file-list .attachment-file-item .file-info .file-name,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;word-break:break-word!important}.attachment-menu .attachment-file-list .attachment-file-item .file-actions,.dropdown-menu .attachment-file-list .attachment-file-item .file-actions,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-actions,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-actions{display:flex!important;gap:4px!important}.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.dropdown-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn{width:24px!important;height:24px!important;border:none!important;background:transparent!important;cursor:pointer!important;border-radius:4px!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;transition:background-color .2s ease!important}.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.dropdown-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu,.cdk-overlay-container .attachment-menu,.cdk-overlay-pane .attachment-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important;border-radius:8px!important;font-family:var(--grid-font-family, \"Poppins\")!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-container,.cdk-overlay-container .attachment-menu .attachment-container,.cdk-overlay-pane .attachment-menu .attachment-container{padding:4px;background:var(--grid-surface, #fef7ff)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header,.cdk-overlay-container .attachment-menu .attachment-header,.cdk-overlay-pane .attachment-menu .attachment-header{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:24px!important;padding:0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-title,.cdk-overlay-container .attachment-menu .attachment-header .attachment-title,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-title{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:16px!important;font-weight:500!important;color:var(--grid-on-surface, #1d1b20)!important;margin:0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn,.cdk-overlay-container .attachment-menu .attachment-header .attachment-upload-btn,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn{background:var(--grid-primary, #6750a4)!important;background-color:var(--grid-primary, #6750a4)!important;color:var(--grid-on-primary, #ffffff)!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-weight:500!important;padding:8px 20px!important;border-radius:6px!important;border:none!important;cursor:pointer!important;font-size:14px!important;letter-spacing:.5px!important;box-shadow:var(--grid-elevation-1, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15))!important;transition:background-color .2s ease!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn:hover,.cdk-overlay-container .attachment-menu .attachment-header .attachment-upload-btn:hover,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn:hover{opacity:.9!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.cdk-overlay-container .attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label{color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone,.cdk-overlay-container .attachment-menu .attachment-drop-zone,.cdk-overlay-pane .attachment-menu .attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0)!important;border-radius:8px!important;padding:40px 20px!important;text-align:center!important;cursor:pointer!important;transition:all .3s ease!important;background:var(--grid-surface-variant, #e7e0ec)!important;margin:16px 0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone:hover,.cdk-overlay-container .attachment-menu .attachment-drop-zone:hover,.cdk-overlay-pane .attachment-menu .attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone.dragging,.cdk-overlay-container .attachment-menu .attachment-drop-zone.dragging,.cdk-overlay-pane .attachment-menu .attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important;transform:scale(1.01)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-content,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-content,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-content{display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-icon,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-icon,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-icon{font-size:48px!important;color:var(--grid-primary, #6750a4)!important;font-weight:300!important;line-height:1!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;font-weight:400!important;margin:0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:12px!important;color:var(--grid-on-surface-variant, #49454f)!important;margin-top:4px!important;display:block!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list,.cdk-overlay-container .attachment-menu .attachment-file-list,.cdk-overlay-pane .attachment-menu .attachment-file-list{display:block!important;margin-top:16px!important;border-top:1px solid var(--grid-outline-variant, #cac4d0)!important;padding-top:16px!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 0!important;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item:last-child,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item:last-child,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item:last-child{border-bottom:none!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-info,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info{display:flex!important;align-items:center!important;gap:8px!important;flex:1!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon{font-size:16px!important;color:var(--grid-on-surface-variant, #49454f)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;word-break:break-word!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-actions,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions{display:flex!important;gap:4px!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn{width:24px!important;height:24px!important;border:none!important;background:transparent!important;cursor:pointer!important;border-radius:4px!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;transition:background-color .2s ease!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu,.cdk-overlay-container .attachment-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important}.attachment-cell-wrapper{position:relative;display:block;width:100%;height:100%;text-align:center;overflow:visible}.attachment-menu-overlay{position:absolute;z-index:1000;background:var(--grid-surface, #fef7ff);border:1px solid var(--grid-outline-variant, #cac4d0);box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15));border-radius:8px;font-family:var(--grid-font-family, \"Poppins\");color:var(--grid-on-surface, #1d1b20);overflow:visible;z-index:9999}.attachment-menu-overlay .attachment-container{padding:16px;background:var(--grid-surface, #fef7ff)}.attachment-menu-overlay .attachment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding:0}.attachment-menu-overlay .attachment-header .attachment-title{font-family:var(--grid-font-family, \"Poppins\");font-size:16px;font-weight:500;color:var(--grid-on-surface, #1d1b20);margin:0}.attachment-menu-overlay .attachment-header .attachment-upload-btn{background:var(--grid-primary, #6750a4);background-color:var(--grid-primary, #6750a4);color:var(--grid-on-primary, #ffffff);font-family:var(--grid-font-family, \"Poppins\");font-weight:500;padding:8px 20px;border-radius:6px;border:none;cursor:pointer;font-size:14px;letter-spacing:.5px;box-shadow:var(--grid-elevation-1, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15));transition:background-color .2s ease}.attachment-menu-overlay .attachment-header .attachment-upload-btn:hover{opacity:.9}.attachment-menu-overlay .attachment-header .attachment-upload-btn .mdc-button__label{color:var(--grid-on-primary, #ffffff)}.attachment-menu-overlay .attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0);border-radius:8px;padding:10px;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--grid-surface-variant, #e7e0ec);margin:16px 0}.attachment-menu-overlay .attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7)}.attachment-menu-overlay .attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7);transform:scale(1.01)}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-content{display:flex;flex-direction:column;align-items:center;gap:12px}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-icon{font-size:48px;color:var(--grid-primary, #6750a4);font-weight:300;line-height:1}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:14px;color:var(--grid-on-surface-variant, #49454f);font-weight:400;margin:0}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-top:4px;display:block}.attachment-menu-overlay .attachment-file-list{display:block;margin-top:16px;border-top:1px solid var(--grid-outline-variant, #cac4d0);padding-top:16px}.attachment-menu-overlay .attachment-file-list .attachment-file-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)}.attachment-menu-overlay .attachment-file-list .attachment-file-item:last-child{border-bottom:none}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-info{display:flex;align-items:center;gap:8px;flex:1}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-info .file-icon{font-size:16px;color:var(--grid-on-surface-variant, #49454f)}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-info .file-name{font-family:var(--grid-font-family, \"Poppins\");font-size:14px;color:var(--grid-on-surface, #1d1b20);word-break:break-word}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-actions{display:flex;gap:4px}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-actions .action-btn{width:24px;height:24px;border:none;background:transparent;cursor:pointer;border-radius:4px;font-size:14px;color:var(--grid-on-surface-variant, #49454f);transition:background-color .2s ease}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-actions .action-btn:hover{background:var(--grid-surface-container, #f3edf7)}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu,.cdk-overlay-container .dropdown-menu,.cdk-overlay-pane .dropdown-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important;border-radius:8px!important;font-family:var(--grid-font-family, \"Poppins\")!important;color:var(--grid-on-surface, #1d1b20)!important;overflow:hidden!important;box-sizing:border-box!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-container,.cdk-overlay-container .dropdown-menu .listbox-container,.cdk-overlay-pane .dropdown-menu .listbox-container{padding:8px!important;background:var(--grid-surface, #fef7ff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field,.cdk-overlay-container .dropdown-menu .search-form-field,.cdk-overlay-pane .dropdown-menu .search-form-field{width:100%!important;margin-bottom:8px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-form-field,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field{width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-text-field-wrapper,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-text-field-wrapper,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-text-field-wrapper{background:var(--grid-surface, #fffbfe)!important;border-radius:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-focus-overlay,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-form-field-focus-overlay,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-focus-overlay{background:var(--grid-surface, #fffbfe)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-subscript-wrapper,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-form-field-subscript-wrapper,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-subscript-wrapper{display:none!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field input,.cdk-overlay-container .dropdown-menu .search-form-field input,.cdk-overlay-pane .dropdown-menu .search-form-field input{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container,.cdk-overlay-container .dropdown-menu .select-all-container,.cdk-overlay-pane .dropdown-menu .select-all-container{padding:8px 12px!important;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)!important;margin-bottom:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container .select-all-text,.cdk-overlay-container .dropdown-menu .select-all-container .select-all-text,.cdk-overlay-pane .dropdown-menu .select-all-container .select-all-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;font-weight:500!important;color:var(--grid-on-surface, #1d1b20)!important;margin-left:8px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-container .dropdown-menu .select-all-container mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark{color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--grid-primary, #6750a4)!important;border-color:var(--grid-primary, #6750a4)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-indeterminate .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-indeterminate .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-indeterminate .mdc-checkbox__background{background-color:var(--grid-primary, #6750a4)!important;border-color:var(--grid-primary, #6750a4)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox,.cdk-overlay-container .dropdown-menu .listbox,.cdk-overlay-pane .dropdown-menu .listbox{list-style:none!important;margin:0!important;padding:0!important;max-height:200px!important;overflow-y:auto!important;background:var(--grid-surface, #fef7ff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar{width:8px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-track,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar-track,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-track{background:var(--grid-surface-variant, #e7e0ec)!important;border-radius:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar-thumb,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb{background:var(--grid-primary, #6750a4)!important;border-radius:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb:hover,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar-thumb:hover,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb:hover{background:var(--grid-primary, #6750a4)!important;opacity:.8!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option,.cdk-overlay-container .dropdown-menu .multi-listbox-option,.cdk-overlay-pane .dropdown-menu .multi-listbox-option{padding:4px 8px!important;margin:2px 0!important;border-radius:4px!important;cursor:pointer!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;transition:background-color .2s ease!important;border:none!important;text-align:left!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option:hover,.cdk-overlay-container .dropdown-menu .multi-listbox-option:hover,.cdk-overlay-pane .dropdown-menu .multi-listbox-option:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option.notext-overflow,.cdk-overlay-container .dropdown-menu .multi-listbox-option.notext-overflow,.cdk-overlay-pane .dropdown-menu .multi-listbox-option.notext-overflow{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content .option-text,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content .option-text,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content .option-text{flex:1!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:inherit!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox{flex-shrink:0!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__background{border-color:var(--grid-outline, #79757f)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark{color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--grid-primary, #6750a4)!important;border-color:var(--grid-primary, #6750a4)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option,.cdk-overlay-container .dropdown-menu .listbox-option,.cdk-overlay-pane .dropdown-menu .listbox-option{padding:4px 8px!important;margin:2px 0!important;border-radius:4px!important;cursor:pointer!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;transition:background-color .2s ease!important;border:none!important;text-align:left!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option:hover,.cdk-overlay-container .dropdown-menu .listbox-option:hover,.cdk-overlay-pane .dropdown-menu .listbox-option:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-active,.cdk-overlay-container .dropdown-menu .listbox-option.cdk-option-active,.cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-active,.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-selected,.cdk-overlay-container .dropdown-menu .listbox-option.cdk-option-selected,.cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-selected{background:var(--grid-primary, #6750a4)!important;color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option.notext-overflow,.cdk-overlay-container .dropdown-menu .listbox-option.notext-overflow,.cdk-overlay-pane .dropdown-menu .listbox-option.notext-overflow{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option .option-content,.cdk-overlay-container .dropdown-menu .listbox-option .option-content,.cdk-overlay-pane .dropdown-menu .listbox-option .option-content{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option .option-content .option-text,.cdk-overlay-container .dropdown-menu .listbox-option .option-content .option-text,.cdk-overlay-pane .dropdown-menu .listbox-option .option-content .option-text{flex:1!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:inherit!important}.cell-display-text-editable{cursor:pointer!important}.cell-display-text{width:100%!important;height:100%!important;min-height:20px!important;display:block!important;padding:4px 8px!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:var(--grid-font-size-body, 12px)!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;border:none!important;outline:none!important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;box-sizing:border-box!important;transition:background-color .2s ease!important;line-height:1.4!important}.cell-display-text,.cell-display-text>*{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.cell-display-text:empty:before{content:\"Click to select\"!important;color:var(--grid-on-surface-variant, #49454f)!important;font-style:italic!important}.cell-display-number{text-align:var(--grid-number-text-align, right)}.aggregation .cell-display-number{text-align:var(--grid-aggregation-text-align, right)}.assignee-avatars{display:flex;align-items:center;padding:4px 8px;min-height:20px}.avatar-circle{width:28px;height:28px;border-radius:50%;background-color:var(--grid-primary, #6750a4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;border:2px solid var(--grid-surface, #fef7ff);margin-left:-8px;position:relative;z-index:1}.avatar-circle:first-child{margin-left:0}.avatar-circle.count-circle{background-color:var(--grid-surface-variant, #e7e0ec);color:var(--grid-on-surface-variant, #49454f);font-size:11px;font-weight:500}.no-assignees{color:var(--grid-on-surface-variant, #49454f);font-style:italic;font-size:12px}.option-content{display:flex;align-items:center;gap:8px;width:100%}.option-avatar{width:24px;height:24px;border-radius:50%;background-color:var(--grid-primary, #6750a4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0}.option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.checkmark{color:var(--grid-primary, #6750a4);font-weight:700;font-size:14px;flex-shrink:0}.drillable-value{color:var(--grid-primary, #6750a4);text-decoration:underline;text-decoration-color:var(--grid-primary, #6750a4);text-decoration-thickness:1px;text-underline-offset:2px;transition:all .2s ease}.drillable-link{cursor:pointer;padding:4px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: i1.MatCommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.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: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i7.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i7.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.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"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CustomDatePickerDirective, selector: "[appCustomDatePicker]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "component", type: MobileInputComponent, selector: "app-mobile-input", inputs: ["defaultCountry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "attachmentTrigger", first: true, predicate: ["attachmentTrigger"], descendants: true }, { propertyName: "singleSelectTrigger", first: true, predicate: ["singleSelectTrigger"], descendants: true }, { propertyName: "multiSelectTrigger", first: true, predicate: ["multiSelectTrigger"], descendants: true }, { propertyName: "peopleTrigger", first: true, predicate: ["peopleTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\n  @switch (columnDatatype()) {\n  @case ('textbox') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'input-' + columnName()+ id()\" [name]=\"'input-' + columnName()+ id()\"\n      [(ngModel)]=\"currentValue\" (blur)=\"onTextboxBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\"><a class=\"drillable-link\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</a></span>\n    } @else {\n      {{currentValue()}}\n    }\n  </div>\n  }\n  }\n  @case ('currency') {\n  @if(isActive()){\n      <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'currency-' + columnName()+ id()\" [name]=\"'currency-' + columnName()+ id()\"\n      [ngModel]=\"currentValue()\" (ngModelChange)=\"setField($event)\" placeholder=\"Number\" (blur)=\"onNumberBlur()\">\n      <span matTextPrefix>$</span>\n    </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text cell-display-number\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{formatNumberSignal()}}</span>\n    } @else {\n      {{formatNumberSignal()}}\n    }\n  </div>\n  }\n  }\n  @case ('number') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'number-' + columnName()+ id()\" [name]=\"'number-' + columnName()+ id()\"\n      [ngModel]=\"currentValue()\" (ngModelChange)=\"setField($event)\" placeholder=\"Number\" (blur)=\"onNumberBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text cell-display-number\" (dblclick)=\"setActive(true)\"\n[class.cell-display-text-editable]=\"isEditable()\"\n  >\n    @if (drillable() && currentValue() !== 0) {\n      <span class=\"drillable-value\" ><a class=\"drillable-link\" (click)=\"onDrillableClick($event)\">{{formatNumberSignal()}}</a></span>\n    } @else {\n      {{formatNumberSignal()}}\n    }\n  </div>\n  }\n  }\n  @case ('location') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'location-' + columnName()+ id()\" [name]=\"'location-' + columnName()+ id()\"\n      [(ngModel)]=\"currentValue\" placeholder=\"location\" (blur)=\"onLocationBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\"><a class=\"drillable-link\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</a></span>\n    } @else {\n      {{currentValue()}}\n    }\n  </div>\n  }\n  }\n  @case ('email') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"email\" [id]=\"'email-' + columnName()+ id()\" [name]=\"'email-' + columnName()+ id()\"\n      [(ngModel)]=\"currentValue\" placeholder=\"email\" matTooltipPosition=\"below\" (blur)=\"onEmailBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n    } @else {\n      {{currentValue()}}\n    }\n  </div>\n  }\n  }\n      @case ('dropdown_multi_select') {\n      <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" #multiSelectTrigger\n      [class.cell-display-text-editable]=\"isEditable()\">\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}</span>\n        } @else {\n          {{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}\n        }\n      </div>\n    }\n\n  @case ('dropdown_single_select') {\n    <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" [cdkMenuTriggerFor]=\"singleSelectTrigger\" #singleSelectTrigger\n    [class.cell-display-text-editable]=\"isEditable()\">\n      @if (drillable()) {\n        <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n      } @else {\n        {{currentValue()}}\n      }\n    </div>\n  }\n\n  @case ('checkbox') {\n  <div class=\"cell-form-field cell-checkbox\">\n    <mat-checkbox [(ngModel)]=\"currentValue\">\n    </mat-checkbox>\n  </div>\n  }\n\n  @case ('people') {\n    <div class=\"assignee-avatars \" (dblclick)=\"toggleOverlayMenu($event)\" #peopleTrigger>\n      @if (isAssigneeArray(currentValue()) && currentValue().length > 0) {\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            @for (assignee of currentValue(); track $index) {\n             @if ($index < 3) {\n                <div class=\"avatar-circle\" [style.z-index]=\"currentValue().length - $index\">\n                  {{ getInitials(assignee) }}\n                </div>\n              }\n            }\n            @if (currentValue().length > 3) {\n              <div class=\"avatar-circle count-circle\" [style.z-index]=\"1\">\n                +{{ currentValue().length - 3 }}\n              </div>\n            }\n          </span>\n        } @else {\n          @for (assignee of currentValue(); track $index) {\n           @if ($index < 3) {\n              <div class=\"avatar-circle\" [style.z-index]=\"currentValue().length - $index\">\n                {{ getInitials(assignee) }}\n              </div>\n            }\n          }\n          @if (currentValue().length > 3) {\n            <div class=\"avatar-circle count-circle\" [style.z-index]=\"1\">\n              +{{ currentValue().length - 3 }}\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n\n\n  @case ('date') {\n  <div class=\"cell-date-container\">\n    @if(isActive()){\n      <input type=\"text\" [id]=\"'date-' + columnName()+ id()\" [name]=\"'date-' + columnName()+ id()\"\n      [matDatepicker]=\"picker\" appCustomDatePicker class=\"inputRef date-picker\" [ngModel]=\"currentValue()\"\n      (ngModelChange)=\"onDateChange($event)\" (click)=\"picker.open()\" readonly>\n    <mat-datepicker-toggle hidden matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n      } @else {\n      <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n      [class.cell-display-text-editable]=\"isEditable()\">\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n        } @else {\n          {{currentValue()}}\n        }\n      </div>\n      }\n  </div>\n  }\n\n\n  @case ('priority') {\n  <button mat-stroked-button [cdkMenuTriggerFor]=\"prioritySelectMenu\" class=\"dropdown-trigger\">\n    <div class=\"cell-priority-content\">\n      <div [innerHTML]=\"getPriorityIcon()\"></div>\n      @if (drillable()) {\n        <div class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</div>\n      } @else {\n        <div>{{currentValue()}}</div>\n      }\n    </div>\n  </button>\n  }\n  @case ('progress') {\n  @if(isActive()){\n  <div class=\"progress-input-container\">\n    <mat-slider class=\"progress-slider\" [min]=\"0\" [max]=\"100\" [step]=\"1\" [discrete]=\"true\">\n      <input matSliderThumb [ngModel]=\"currentValue()\" (ngModelChange)=\"setProgressValue($event)\">\n    </mat-slider>\n    <span class=\"progress-value\">{{currentValue()}}%</span>\n  </div>\n  } @else {\n  <div class=\"progress-bar-container\" [attr.data-progress]=\"currentValue()\">\n    <div class=\"progress-bar\" [style.width.%]=\"currentValue()\"></div>\n    @if (drillable()) {\n      <span class=\"progress-text drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}%</span>\n    } @else {\n      <span class=\"progress-text\">{{currentValue()}}%</span>\n    }\n  </div>\n  }\n  }\n\n  @case ('rating') {\n  @if(isActive()){\n  <div class=\"rating-input-container\">\n    @for (star of getRatingStars(); track star) {\n    <span class=\"rating-star\" [class.active]=\"currentValue() >= star\" (click)=\"setRatingValue(star)\"\n      (mouseenter)=\"hoverRating = star\" (mouseleave)=\"hoverRating = 0\">\n      {{getEmojiForRating(star)}}\n    </span>\n    }\n    <span class=\"rating-value\">{{currentValue()}}/{{columnCellConfiguration()?.end_value || 5}}</span>\n  </div>\n  } @else {\n  <div class=\"rating-display-container\">\n    @for (star of getRatingStars(); track star) {\n    <span class=\"rating-star\" [class.active]=\"currentValue() >= star\">\n      {{getEmojiForRating(star)}}\n    </span>\n    }\n    @if (drillable()) {\n      <span class=\"drillable-value\"><a class=\"drillable-link\"(click)=\"onDrillableClick($event)\">{{currentValue()}}/{{columnCellConfiguration()?.end_value || 5}}</a></span>\n    }\n  </div>\n  }\n  }\n\n  @case ('status') {\n  <button mat-stroked-button [cdkMenuTriggerFor]=\"statusSelectMenu\" class=\"status-dropdown-trigger\"\n    [style.background-color]=\"getStatusColor(currentValue()).background\"\n    [style.border-color]=\"getStatusColor(currentValue()).border\" [style.color]=\"getStatusColor(currentValue()).text\"\n    [style.height.px]=\"30\">\n    <div class=\"status-button-content\">\n      @if(getStatusButtonDisplay(currentValue()).color) {\n\n      }\n      @if (drillable()) {\n        <span class=\"status-text drillable-value\" (click)=\"onDrillableClick($event)\">\n          {{getStatusButtonDisplay(currentValue()).text}}\n        </span>\n      } @else {\n        <span class=\"status-text\">\n          {{getStatusButtonDisplay(currentValue()).text}}\n        </span>\n      }\n    </div>\n  </button>\n  }\n\n  @case ('tag') {\n  <div class=\"tag-container\" [cdkMenuTriggerFor]=\"tagSelectMenu\">\n\n    <div class=\"tag-display\">\n      @if (drillable()) {\n        <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n          @for (tag of getTagDisplay(currentValue()).displayTags; track tag) {\n          @if (columnCellConfiguration()) {\n          <span class=\"tag\" [style.background]=\"getTagColor(tag).background\" [style.color]=\"getTagColor(tag).color\">\n            {{tag}}\n          </span>\n          } @else {\n          <span class=\"tag cell-fallback-tag\">\n            {{tag}}\n          </span>\n          }\n          }\n          @if(getTagDisplay(currentValue()).moreCount > 0) {\n          <span class=\"tag-more\">\n            + {{getTagDisplay(currentValue()).moreCount}} more\n          </span>\n          }\n        </span>\n      } @else {\n        @for (tag of getTagDisplay(currentValue()).displayTags; track tag) {\n        @if (columnCellConfiguration()) {\n        <span class=\"tag\" [style.background]=\"getTagColor(tag).background\" [style.color]=\"getTagColor(tag).color\">\n          {{tag}}\n        </span>\n        } @else {\n        <span class=\"tag cell-fallback-tag\">\n          {{tag}}\n        </span>\n        }\n        }\n        @if(getTagDisplay(currentValue()).moreCount > 0) {\n        <span class=\"tag-more\">\n          + {{getTagDisplay(currentValue()).moreCount}} more\n        </span>\n        }\n      }\n    </div>\n\n  </div>\n  }\n\n  @case ('phone') {\n  <app-mobile-input [(ngModel)]=\"currentValue\"\n    [defaultCountry]=\"columnCellConfiguration()?.default_country || 'US'\"></app-mobile-input>\n  }\n\n  @case ('attachment') {\n  <div class=\"attachment-cell-wrapper\" (dblclick)=\"toggleOverlayMenu($event)\" cdkOverlayOrigin #attachmentTrigger=\"cdkOverlayOrigin\">\n    @if(currentValue()?.length > 0){\n    <div class=\"cell-attachment-container\">\n      @if (drillable()) {\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 (drillable()) {\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    \n    \n  </div>\n  }\n\n  @case ('audio') {\n  @if (value()) {\n  <audio #aud class=\"cell-audio\" controls preload=\"none\" [src]=\"audioBlobUrl() || value()\"\n    (play)=\"onAudioPlay(aud)\"></audio>\n  }\n  }\n\n  @default {\n  <div class=\"cell-default-display\">\n    @if (drillable()) {\n      <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{value()}}</span>\n    } @else {\n      {{value()}}\n    }\n  </div>\n  }\n  }\n\n</div>\n\n<ng-template #prioritySelectMenu>\n  <div class=\"dropdown-menu\" cdkMenu [style.min-width.px]=\"fieldSize()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" [(ngModel)]=\"optionSearchText\">\n      </mat-form-field>\n\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox\">\n        <li [cdkOption]=\"''\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option notext-overflow cell-priority-content\">\n          <div [innerHTML]=\"sanitize.bypassSecurityTrustHtml(option.icon)\"></div>\n          <div>{{option.label}}</div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template cdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"singleSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_single_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_single_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" (click)=\"$event.stopPropagation()\" [(ngModel)]=\"optionSearchText\">\n      </mat-form-field>\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox\">\n        <li [cdkOption]=\"'None'\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        <li [cdkOption]=\"'option 1'\" class=\"listbox-option notext-overflow\">\n          option 1\n        </li>\n        <li [cdkOption]=\"'option 2'\" class=\"listbox-option notext-overflow\">\n          option 2\n        </li>\n        <li [cdkOption]=\"'option 3'\" class=\"listbox-option notext-overflow\">\n          option 3\n        </li>\n        <li [cdkOption]=\"'option 4'\" class=\"listbox-option notext-overflow\">\n          option 4\n        </li><li [cdkOption]=\"'option 5'\" class=\"listbox-option notext-overflow\">\n          option 5\n        </li><li [cdkOption]=\"'option 6'\" class=\"listbox-option notext-overflow\">\n          option 6\n        </li><li [cdkOption]=\"'option 7'\" class=\"listbox-option notext-overflow\">\n          option 7\n        </li><li [cdkOption]=\"'option 1'\" class=\"listbox-option notext-overflow\">\n          option 1\n        </li><li [cdkOption]=\"'option 9'\" class=\"listbox-option notext-overflow\">\n          option 9\n        </li><li [cdkOption]=\"'option 10'\" class=\"listbox-option notext-overflow\">\n          option 10\n        </li><li [cdkOption]=\"'option 11'\" class=\"listbox-option notext-overflow\">\n          option 11\n        </li><li [cdkOption]=\"'option 12'\" class=\"listbox-option notext-overflow\">\n          option 12\n        </li><li [cdkOption]=\"'option 13'\" class=\"listbox-option notext-overflow\">\n          option 13\n        </li><li [cdkOption]=\"'option 14'\" class=\"listbox-option notext-overflow\">\n          option 14\n        </li><li [cdkOption]=\"'option 15'\" class=\"listbox-option notext-overflow\">\n          option 15\n        </li><li [cdkOption]=\"'option 16'\" class=\"listbox-option notext-overflow\">\n          option 16\n        </li><li [cdkOption]=\"'option 17'\" class=\"listbox-option notext-overflow\">\n          option 17\n        </li><li [cdkOption]=\"'option 18'\" class=\"listbox-option notext-overflow\">\n          option 18\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option notext-overflow\">\n          {{option.label}}\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template \ncdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"multiSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_multi_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_multi_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n          <div class=\"listbox-container\">\n        <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n          <input matInput type=\"search\" placeholder=\"Search...\" [ngModel]=\"optionSearchText()\"\n           (ngModelChange)=\"optionSearchText.set($event)\" (click)=\"$event.stopPropagation()\">\n        </mat-form-field>\n        \n        <!-- Select All Checkbox -->\n        <div class=\"select-all-container\" (click)=\"$event.stopPropagation()\">\n          <mat-checkbox \n            [checked]=\"isAllSelected()\" \n            [indeterminate]=\"isIndeterminate()\"\n            (change)=\"toggleSelectAll($event.checked)\">\n            <span class=\"select-all-text\">Select All</span>\n          </mat-checkbox>\n        </div>\n        \n        <ul cdkListboxMultiple=\"true\" cdkListboxUseActiveDescendant cdkListbox [ngModel]=\"currentValue()\"\n          (ngModelChange)=\"selectedMultiSelect($event)\" aria-labelledby=\"listbox-labssel\" class=\"listbox\" (click)=\"$event.stopPropagation()\">\n        <li [cdkOption]=\"'None'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('None')\" (click)=\"$event.stopPropagation();appendMultiSelect('None')\"></mat-checkbox>\n            <span class=\"option-text\">None</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 1'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 1')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 1')\"></mat-checkbox>\n            <span class=\"option-text\">option 1</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 2'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 2')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 2')\"></mat-checkbox>\n            <span class=\"option-text\">option 2</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 3'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 3')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 3')\"></mat-checkbox>\n            <span class=\"option-text\">option 3</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 4'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 4')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 4')\"></mat-checkbox>\n            <span class=\"option-text\">option 4</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 5'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 5')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 5')\"></mat-checkbox>\n            <span class=\"option-text\">option 5</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 6'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 6')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 6')\"></mat-checkbox>\n            <span class=\"option-text\">option 6</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 7'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 7')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 7')\"></mat-checkbox>\n            <span class=\"option-text\">option 7</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 8'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 8')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 8')\"></mat-checkbox>\n            <span class=\"option-text\">option 8</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 9'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 9')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 9')\"></mat-checkbox>\n            <span class=\"option-text\">option 9</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 10'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 10')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 10')\"></mat-checkbox>\n            <span class=\"option-text\">option 10</span>\n          </div>\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected(option.value)\" (click)=\"$event.stopPropagation();appendMultiSelect(option.value)\"></mat-checkbox>\n            <span class=\"option-text\">{{option.label}}</span>\n          </div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template cdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"peopleTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('people')\"\n(detach)=\"isOpen = showOverlayMenu('people')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" [ngModel]=\"optionSearchText()\" (click)=\"$event.stopPropagation()\"\n          (ngModelChange)=\"optionSearchText.set($event)\">\n      </mat-form-field>\n      <ul cdkListboxMultiple=\"true\" cdkListboxUseActiveDescendant cdkListbox [ngModel]=\"currentValue()\"\n        (ngModelChange)=\"selectedMultiSelect($event)\" aria-labelledby=\"listbox-labssel\" class=\"listbox\">\n        <li [cdkOption]=\"'person0@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person0@domain.com') }}</div>\n            <span class=\"option-text\">person0&#64;domain.com</span>\n            @if (isOptionSelected('person0@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person1@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person1@domain.com') }}</div>\n            <span class=\"option-text\">person1&#64;domain.com</span>\n            @if (isOptionSelected('person1@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person2@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person2@domain.com') }}</div>\n            <span class=\"option-text\">person2&#64;domain.com</span>\n            @if (isOptionSelected('person2@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person3@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person3@domain.com') }}</div>\n            <span class=\"option-text\">person3&#64;domain.com</span>\n            @if (isOptionSelected('person3@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person4@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person4@domain.com') }}</div>\n            <span class=\"option-text\">person4&#64;domain.com</span>\n            @if (isOptionSelected('person4@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person5@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person5@domain.com') }}</div>\n            <span class=\"option-text\">person5&#64;domain.com</span>\n            @if (isOptionSelected('person5@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"multi-listbox-option notext-overflow listbox-option_people\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials(option.value) }}</div>\n            <span class=\"option-text\">{{option.label}}</span>\n            @if (isOptionSelected(option.value)) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #statusSelectMenu>\n  <div class=\"dropdown-menu status-dropdown-menu\" cdkMenu [style.min-width.px]=\"fieldSize()\"\n    (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" [(ngModel)]=\"optionSearchText\">\n      </mat-form-field>\n\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox status-listbox\">\n        <li [cdkOption]=\"''\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        @for (option of getStatusOptions(); track option.value) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option status-option\"\n          [style.background-color]=\"getStatusColor(option.value).background\"\n          [style.border-color]=\"getStatusColor(option.value).border\" [style.color]=\"getStatusColor(option.value).text\">\n          @if(option.color) {\n          <span class=\"status-color-indicator\" [style.background-color]=\"option.color\"></span>\n          }\n          {{option.label}}\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tagSelectMenu>\n  <div class=\"dropdown-menu tag-dropdown-menu\" [style.min-width.px]=\"fieldSize()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search or add tag...\" [ngModel]=\"optionSearchText()\"\n          (ngModelChange)=\"optionSearchText.set($event)\" (keyup.enter)=\"addNewTag(optionSearchText())\"\n          [style.min-width.px]=\"fieldSize()\">\n      </mat-form-field>\n\n      <ul cdkListboxMultiple=\"true\" cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedMultiSelect($event)\"\n        class=\"listbox tag-listbox\" [style.min-width.px]=\"fieldSize()\">\n        <!-- Predefined tags -->\n        @for (option of getTagOptions(); track option.value) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option tag-option\">\n          {{option.label}}\n        </li>\n        }\n\n        <!-- New tag input -->\n\n\n\n      </ul>\n\n    </div>\n  </div>\n</ng-template>\n\n<!-- Attachment Menu - Positioned relative to the cell -->\n<ng-template \ncdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"attachmentTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('attachment')\"\n(detach)=\"isOpen = showOverlayMenu('attachment')\">\n  <div class=\"attachment-menu-overlay\" [style.width.px]=\"currentColumnWidth()\" [style.min-width.px]=\"300\">\n    <div class=\"attachment-container\">\n    <!-- Header Section -->\n    <div class=\"attachment-header\">\n      <span class=\"attachment-title\">Add or Drag files</span>\n      <button mat-flat-button \n              (click)=\"fileInput.click()\" \n              class=\"attachment-upload-btn\">\n        Upload\n      </button>\n    </div>\n    \n    <!-- Drop zone -->\n    <div class=\"attachment-drop-zone\" \n         (drop)=\"onFileDrop($event)\" \n         (dragover)=\"onDragOver($event)\" \n         (dragleave)=\"onDragLeave($event)\"\n         (paste)=\"onPaste($event)\"\n         (click)=\"fileInput.click()\"\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 #fileInput \n           type=\"file\" \n           multiple \n           (change)=\"fileInputChange($event)\" \n           style=\"display: none;\">\n    \n    <!-- File list -->\n    <div class=\"attachment-file-list\" *ngIf=\"currentValue()?.length > 0\">\n      <div class=\"attachment-file-item\" *ngFor=\"let file of currentValue(); trackBy: trackByFile\">\n        <div class=\"file-info\">\n          <span class=\"file-icon\">\uD83D\uDCC4</span>\n          <span class=\"file-name\">{{ file?.split('_')?.[2] || file }}</span>\n        </div>\n        <div class=\"file-actions\">\n          <button class=\"action-btn\" (click)=\"viewFile(file)\" title=\"View\">\uD83D\uDC41\uFE0F</button>\n          <button class=\"action-btn\" (click)=\"deleteFile(file)\" title=\"Delete\">\uD83D\uDDD1\uFE0F</button>\n        </div>\n              </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:block;height:100%;width:100%;position:relative;overflow:hidden!important}.container{height:calc(100% - 2px);width:calc(100% - 2px);position:relative!important;overflow:hidden!important;max-width:100%!important;box-sizing:border-box!important}.container .cell-display-text{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.inputRef{height:inherit;width:inherit;border:none}.inputRef:focus{outline:none}.cell-checkbox{text-align:center}.cell-form-field{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-outline,.cell-form-field .mat-mdc-form-field-subscript-wrapper,.cell-form-field .mat-mdc-form-field-text-suffix{display:none!important}.cell-form-field .mat-mdc-form-field-wrapper,.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{width:100%!important;height:100%!important;padding:0!important;margin:0!important;min-height:auto!important;border-top:none!important}.cell-form-field input[matInput]{width:100%!important;height:100%!important;padding:2px!important;margin:0!important;border:none!important;outline:none!important;background:transparent!important;font-size:14px!important;line-height:normal!important;box-sizing:border-box!important;max-width:none!important;min-width:0!important;flex:none!important}.dropdown-menu{width:100%}.attachment-menu,.dropdown-menu,.dropdown-menu.attachment-menu,[cdkMenu].attachment-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border-radius:8px!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important}.attachment-menu.cdk-overlay-pane,.dropdown-menu.cdk-overlay-pane,.dropdown-menu.attachment-menu.cdk-overlay-pane,[cdkMenu].attachment-menu.cdk-overlay-pane{background:var(--grid-surface)!important;background-color:var(--grid-surface)!important}.attachment-menu .attachment-container,.dropdown-menu .attachment-container,.dropdown-menu.attachment-menu .attachment-container,[cdkMenu].attachment-menu .attachment-container{padding:4px;background:var(--grid-surface, #fef7ff);border-radius:8px}.attachment-menu .attachment-header,.dropdown-menu .attachment-header,.dropdown-menu.attachment-menu .attachment-header,[cdkMenu].attachment-menu .attachment-header{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:24px!important;padding:0!important}.attachment-menu .attachment-header .attachment-title,.dropdown-menu .attachment-header .attachment-title,.dropdown-menu.attachment-menu .attachment-header .attachment-title,[cdkMenu].attachment-menu .attachment-header .attachment-title{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:16px!important;font-weight:500!important;color:var(--grid-on-surface, #1d1b20)!important;margin:0!important}.attachment-menu .attachment-header .attachment-upload-btn,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button,.dropdown-menu .attachment-header .attachment-upload-btn,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button{background:var(--grid-primary, #6750a4)!important;background-color:var(--grid-primary, #6750a4)!important;color:var(--grid-on-primary, #ffffff)!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-weight:500!important;padding:8px 20px!important;border-radius:6px!important;border:none!important;cursor:pointer!important;font-size:14px!important;letter-spacing:.5px!important;box-shadow:var(--grid-elevation-1, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15))!important;transition:background-color .2s ease!important}.attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label,.dropdown-menu .attachment-header .attachment-upload-btn .mdc-button__label,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label{color:var(--grid-on-primary, #ffffff)!important}.attachment-menu .attachment-header .attachment-upload-btn:hover,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover,.dropdown-menu .attachment-header .attachment-upload-btn:hover,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn:hover,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn:hover,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover{opacity:.9!important}.attachment-menu .attachment-header .attachment-upload-btn:before,.attachment-menu .attachment-header .attachment-upload-btn:after,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after,.dropdown-menu .attachment-header .attachment-upload-btn:before,.dropdown-menu .attachment-header .attachment-upload-btn:after,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn:before,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn:after,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn:before,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn:after,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after{display:none!important}.attachment-menu .attachment-drop-zone,.dropdown-menu .attachment-drop-zone,.dropdown-menu.attachment-menu .attachment-drop-zone,[cdkMenu].attachment-menu .attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0)!important;border-radius:8px!important;padding:10px!important;text-align:center!important;cursor:pointer!important;transition:all .3s ease!important;background:var(--grid-surface-variant, #e7e0ec)!important;margin:16px 0!important}.attachment-menu .attachment-drop-zone:hover,.dropdown-menu .attachment-drop-zone:hover,.dropdown-menu.attachment-menu .attachment-drop-zone:hover,[cdkMenu].attachment-menu .attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important}.attachment-menu .attachment-drop-zone.dragging,.dropdown-menu .attachment-drop-zone.dragging,.dropdown-menu.attachment-menu .attachment-drop-zone.dragging,[cdkMenu].attachment-menu .attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important;transform:scale(1.01)!important}.attachment-menu .attachment-drop-zone .attachment-drop-content,.dropdown-menu .attachment-drop-zone .attachment-drop-content,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-content,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-content{display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important}.attachment-menu .attachment-drop-zone .attachment-drop-icon,.dropdown-menu .attachment-drop-zone .attachment-drop-icon,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-icon,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-icon{font-size:48px!important;color:var(--grid-primary, #6750a4)!important;font-weight:300!important;line-height:1!important}.attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,.dropdown-menu .attachment-drop-zone .attachment-drop-text .primary-text,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;font-weight:400!important;margin:0!important}.attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.dropdown-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:12px!important;color:var(--grid-on-surface-variant, #49454f)!important;margin-top:4px!important;display:block!important}.attachment-menu .attachment-file-list,.dropdown-menu .attachment-file-list,.dropdown-menu.attachment-menu .attachment-file-list,[cdkMenu].attachment-menu .attachment-file-list{display:block!important;margin-top:16px!important;border-top:1px solid var(--grid-outline-variant, #cac4d0)!important;padding-top:16px!important}.attachment-menu .attachment-file-list .attachment-file-item,.dropdown-menu .attachment-file-list .attachment-file-item,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 0!important;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)!important}.attachment-menu .attachment-file-list .attachment-file-item:last-child,.dropdown-menu .attachment-file-list .attachment-file-item:last-child,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item:last-child,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item:last-child{border-bottom:none!important}.attachment-menu .attachment-file-list .attachment-file-item .file-info,.dropdown-menu .attachment-file-list .attachment-file-item .file-info,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-info,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-info{display:flex!important;align-items:center!important;gap:8px!important;flex:1!important}.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.dropdown-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon{font-size:16px!important;color:var(--grid-on-surface-variant, #49454f)!important}.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,.dropdown-menu .attachment-file-list .attachment-file-item .file-info .file-name,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;word-break:break-word!important}.attachment-menu .attachment-file-list .attachment-file-item .file-actions,.dropdown-menu .attachment-file-list .attachment-file-item .file-actions,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-actions,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-actions{display:flex!important;gap:4px!important}.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.dropdown-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn{width:24px!important;height:24px!important;border:none!important;background:transparent!important;cursor:pointer!important;border-radius:4px!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;transition:background-color .2s ease!important}.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.dropdown-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu,.cdk-overlay-container .attachment-menu,.cdk-overlay-pane .attachment-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important;border-radius:8px!important;font-family:var(--grid-font-family, \"Poppins\")!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-container,.cdk-overlay-container .attachment-menu .attachment-container,.cdk-overlay-pane .attachment-menu .attachment-container{padding:4px;background:var(--grid-surface, #fef7ff)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header,.cdk-overlay-container .attachment-menu .attachment-header,.cdk-overlay-pane .attachment-menu .attachment-header{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:24px!important;padding:0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-title,.cdk-overlay-container .attachment-menu .attachment-header .attachment-title,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-title{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:16px!important;font-weight:500!important;color:var(--grid-on-surface, #1d1b20)!important;margin:0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn,.cdk-overlay-container .attachment-menu .attachment-header .attachment-upload-btn,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn{background:var(--grid-primary, #6750a4)!important;background-color:var(--grid-primary, #6750a4)!important;color:var(--grid-on-primary, #ffffff)!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-weight:500!important;padding:8px 20px!important;border-radius:6px!important;border:none!important;cursor:pointer!important;font-size:14px!important;letter-spacing:.5px!important;box-shadow:var(--grid-elevation-1, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15))!important;transition:background-color .2s ease!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn:hover,.cdk-overlay-container .attachment-menu .attachment-header .attachment-upload-btn:hover,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn:hover{opacity:.9!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.cdk-overlay-container .attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label{color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone,.cdk-overlay-container .attachment-menu .attachment-drop-zone,.cdk-overlay-pane .attachment-menu .attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0)!important;border-radius:8px!important;padding:40px 20px!important;text-align:center!important;cursor:pointer!important;transition:all .3s ease!important;background:var(--grid-surface-variant, #e7e0ec)!important;margin:16px 0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone:hover,.cdk-overlay-container .attachment-menu .attachment-drop-zone:hover,.cdk-overlay-pane .attachment-menu .attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone.dragging,.cdk-overlay-container .attachment-menu .attachment-drop-zone.dragging,.cdk-overlay-pane .attachment-menu .attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important;transform:scale(1.01)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-content,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-content,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-content{display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-icon,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-icon,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-icon{font-size:48px!important;color:var(--grid-primary, #6750a4)!important;font-weight:300!important;line-height:1!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;font-weight:400!important;margin:0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:12px!important;color:var(--grid-on-surface-variant, #49454f)!important;margin-top:4px!important;display:block!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list,.cdk-overlay-container .attachment-menu .attachment-file-list,.cdk-overlay-pane .attachment-menu .attachment-file-list{display:block!important;margin-top:16px!important;border-top:1px solid var(--grid-outline-variant, #cac4d0)!important;padding-top:16px!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 0!important;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item:last-child,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item:last-child,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item:last-child{border-bottom:none!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-info,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info{display:flex!important;align-items:center!important;gap:8px!important;flex:1!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon{font-size:16px!important;color:var(--grid-on-surface-variant, #49454f)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;word-break:break-word!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-actions,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions{display:flex!important;gap:4px!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn{width:24px!important;height:24px!important;border:none!important;background:transparent!important;cursor:pointer!important;border-radius:4px!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;transition:background-color .2s ease!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu,.cdk-overlay-container .attachment-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important}.attachment-cell-wrapper{position:relative;display:block;width:100%;height:100%;text-align:center;overflow:visible}.attachment-menu-overlay{position:absolute;z-index:1000;background:var(--grid-surface, #fef7ff);border:1px solid var(--grid-outline-variant, #cac4d0);box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15));border-radius:8px;font-family:var(--grid-font-family, \"Poppins\");color:var(--grid-on-surface, #1d1b20);overflow:visible;z-index:9999}.attachment-menu-overlay .attachment-container{padding:16px;background:var(--grid-surface, #fef7ff)}.attachment-menu-overlay .attachment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding:0}.attachment-menu-overlay .attachment-header .attachment-title{font-family:var(--grid-font-family, \"Poppins\");font-size:16px;font-weight:500;color:var(--grid-on-surface, #1d1b20);margin:0}.attachment-menu-overlay .attachment-header .attachment-upload-btn{background:var(--grid-primary, #6750a4);background-color:var(--grid-primary, #6750a4);color:var(--grid-on-primary, #ffffff);font-family:var(--grid-font-family, \"Poppins\");font-weight:500;padding:8px 20px;border-radius:6px;border:none;cursor:pointer;font-size:14px;letter-spacing:.5px;box-shadow:var(--grid-elevation-1, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15));transition:background-color .2s ease}.attachment-menu-overlay .attachment-header .attachment-upload-btn:hover{opacity:.9}.attachment-menu-overlay .attachment-header .attachment-upload-btn .mdc-button__label{color:var(--grid-on-primary, #ffffff)}.attachment-menu-overlay .attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0);border-radius:8px;padding:10px;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--grid-surface-variant, #e7e0ec);margin:16px 0}.attachment-menu-overlay .attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7)}.attachment-menu-overlay .attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7);transform:scale(1.01)}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-content{display:flex;flex-direction:column;align-items:center;gap:12px}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-icon{font-size:48px;color:var(--grid-primary, #6750a4);font-weight:300;line-height:1}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:14px;color:var(--grid-on-surface-variant, #49454f);font-weight:400;margin:0}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-top:4px;display:block}.attachment-menu-overlay .attachment-file-list{display:block;margin-top:16px;border-top:1px solid var(--grid-outline-variant, #cac4d0);padding-top:16px}.attachment-menu-overlay .attachment-file-list .attachment-file-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)}.attachment-menu-overlay .attachment-file-list .attachment-file-item:last-child{border-bottom:none}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-info{display:flex;align-items:center;gap:8px;flex:1}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-info .file-icon{font-size:16px;color:var(--grid-on-surface-variant, #49454f)}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-info .file-name{font-family:var(--grid-font-family, \"Poppins\");font-size:14px;color:var(--grid-on-surface, #1d1b20);word-break:break-word}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-actions{display:flex;gap:4px}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-actions .action-btn{width:24px;height:24px;border:none;background:transparent;cursor:pointer;border-radius:4px;font-size:14px;color:var(--grid-on-surface-variant, #49454f);transition:background-color .2s ease}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-actions .action-btn:hover{background:var(--grid-surface-container, #f3edf7)}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu,.cdk-overlay-container .dropdown-menu,.cdk-overlay-pane .dropdown-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important;border-radius:8px!important;font-family:var(--grid-font-family, \"Poppins\")!important;color:var(--grid-on-surface, #1d1b20)!important;overflow:hidden!important;box-sizing:border-box!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-container,.cdk-overlay-container .dropdown-menu .listbox-container,.cdk-overlay-pane .dropdown-menu .listbox-container{padding:8px!important;background:var(--grid-surface, #fef7ff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field,.cdk-overlay-container .dropdown-menu .search-form-field,.cdk-overlay-pane .dropdown-menu .search-form-field{width:100%!important;margin-bottom:8px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-form-field,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field{width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-text-field-wrapper,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-text-field-wrapper,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-text-field-wrapper{background:var(--grid-surface, #fffbfe)!important;border-radius:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-focus-overlay,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-form-field-focus-overlay,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-focus-overlay{background:var(--grid-surface, #fffbfe)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-subscript-wrapper,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-form-field-subscript-wrapper,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-subscript-wrapper{display:none!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field input,.cdk-overlay-container .dropdown-menu .search-form-field input,.cdk-overlay-pane .dropdown-menu .search-form-field input{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container,.cdk-overlay-container .dropdown-menu .select-all-container,.cdk-overlay-pane .dropdown-menu .select-all-container{padding:8px 12px!important;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)!important;margin-bottom:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container .select-all-text,.cdk-overlay-container .dropdown-menu .select-all-container .select-all-text,.cdk-overlay-pane .dropdown-menu .select-all-container .select-all-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;font-weight:500!important;color:var(--grid-on-surface, #1d1b20)!important;margin-left:8px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-container .dropdown-menu .select-all-container mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark{color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--grid-primary, #6750a4)!important;border-color:var(--grid-primary, #6750a4)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-indeterminate .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-indeterminate .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-indeterminate .mdc-checkbox__background{background-color:var(--grid-primary, #6750a4)!important;border-color:var(--grid-primary, #6750a4)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox,.cdk-overlay-container .dropdown-menu .listbox,.cdk-overlay-pane .dropdown-menu .listbox{list-style:none!important;margin:0!important;padding:0!important;max-height:200px!important;overflow-y:auto!important;background:var(--grid-surface, #fef7ff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar{width:8px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-track,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar-track,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-track{background:var(--grid-surface-variant, #e7e0ec)!important;border-radius:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar-thumb,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb{background:var(--grid-primary, #6750a4)!important;border-radius:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb:hover,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar-thumb:hover,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb:hover{background:var(--grid-primary, #6750a4)!important;opacity:.8!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option,.cdk-overlay-container .dropdown-menu .multi-listbox-option,.cdk-overlay-pane .dropdown-menu .multi-listbox-option{padding:4px 8px!important;margin:2px 0!important;border-radius:4px!important;cursor:pointer!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;transition:background-color .2s ease!important;border:none!important;text-align:left!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option:hover,.cdk-overlay-container .dropdown-menu .multi-listbox-option:hover,.cdk-overlay-pane .dropdown-menu .multi-listbox-option:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option.notext-overflow,.cdk-overlay-container .dropdown-menu .multi-listbox-option.notext-overflow,.cdk-overlay-pane .dropdown-menu .multi-listbox-option.notext-overflow{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content .option-text,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content .option-text,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content .option-text{flex:1!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:inherit!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox{flex-shrink:0!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__background{border-color:var(--grid-outline, #79757f)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark{color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--grid-primary, #6750a4)!important;border-color:var(--grid-primary, #6750a4)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option,.cdk-overlay-container .dropdown-menu .listbox-option,.cdk-overlay-pane .dropdown-menu .listbox-option{padding:4px 8px!important;margin:2px 0!important;border-radius:4px!important;cursor:pointer!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;transition:background-color .2s ease!important;border:none!important;text-align:left!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option:hover,.cdk-overlay-container .dropdown-menu .listbox-option:hover,.cdk-overlay-pane .dropdown-menu .listbox-option:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-active,.cdk-overlay-container .dropdown-menu .listbox-option.cdk-option-active,.cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-active,.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-selected,.cdk-overlay-container .dropdown-menu .listbox-option.cdk-option-selected,.cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-selected{background:var(--grid-primary, #6750a4)!important;color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option.notext-overflow,.cdk-overlay-container .dropdown-menu .listbox-option.notext-overflow,.cdk-overlay-pane .dropdown-menu .listbox-option.notext-overflow{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option .option-content,.cdk-overlay-container .dropdown-menu .listbox-option .option-content,.cdk-overlay-pane .dropdown-menu .listbox-option .option-content{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option .option-content .option-text,.cdk-overlay-container .dropdown-menu .listbox-option .option-content .option-text,.cdk-overlay-pane .dropdown-menu .listbox-option .option-content .option-text{flex:1!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:inherit!important}.cell-display-text-editable{cursor:pointer!important}.cell-display-text{width:100%!important;height:100%!important;min-height:20px!important;display:block!important;padding:4px 8px!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:var(--grid-font-size-body, 12px)!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;border:none!important;outline:none!important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;box-sizing:border-box!important;transition:background-color .2s ease!important;line-height:1.4!important}.cell-display-text,.cell-display-text>*{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.cell-display-text:empty:before{content:\"Click to select\"!important;color:var(--grid-on-surface-variant, #49454f)!important;font-style:italic!important}.cell-display-number{text-align:var(--grid-number-text-align, right)}.aggregation .cell-display-number{text-align:var(--grid-aggregation-text-align, right)}.assignee-avatars{display:flex;align-items:center;padding:4px 8px;min-height:20px}.avatar-circle{width:28px;height:28px;border-radius:50%;background-color:var(--grid-primary, #6750a4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;border:2px solid var(--grid-surface, #fef7ff);margin-left:-8px;position:relative;z-index:1}.avatar-circle:first-child{margin-left:0}.avatar-circle.count-circle{background-color:var(--grid-surface-variant, #e7e0ec);color:var(--grid-on-surface-variant, #49454f);font-size:11px;font-weight:500}.no-assignees{color:var(--grid-on-surface-variant, #49454f);font-style:italic;font-size:12px}.option-content{display:flex;align-items:center;gap:8px;width:100%}.option-avatar{width:24px;height:24px;border-radius:50%;background-color:var(--grid-primary, #6750a4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0}.option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.checkmark{color:var(--grid-primary, #6750a4);font-weight:700;font-size:14px;flex-shrink:0}.drillable-value{color:var(--grid-primary, #6750a4);text-decoration:underline;text-decoration-color:var(--grid-primary, #6750a4);text-decoration-thickness:1px;text-underline-offset:2px;transition:all .2s ease}.drillable-link{cursor:pointer;padding:4px}.cell-audio{width:100%;height:30px;display:block}.cell-audio::-webkit-media-controls-mute-button,.cell-audio::-webkit-media-controls-volume-slider,.cell-audio::-webkit-media-controls-volume-control-container,.cell-audio::-webkit-media-controls-current-time-display,.cell-audio::-webkit-media-controls-time-remaining-display{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: i1.MatCommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.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: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i7.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i7.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.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"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CustomDatePickerDirective, selector: "[appCustomDatePicker]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "component", type: MobileInputComponent, selector: "app-mobile-input", inputs: ["defaultCountry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataCellComponent, decorators: [{
             type: Component,
@@ -4481,7 +4536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         ...MATERIAL_PROVIDERS
                     ], host: {
                         'class': 'data-cell-component'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"container\">\n  @switch (columnDatatype()) {\n  @case ('textbox') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'input-' + columnName()+ id()\" [name]=\"'input-' + columnName()+ id()\"\n      [(ngModel)]=\"currentValue\" (blur)=\"onTextboxBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\"><a class=\"drillable-link\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</a></span>\n    } @else {\n      {{currentValue()}}\n    }\n  </div>\n  }\n  }\n  @case ('currency') {\n  @if(isActive()){\n      <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'currency-' + columnName()+ id()\" [name]=\"'currency-' + columnName()+ id()\"\n      [ngModel]=\"currentValue()\" (ngModelChange)=\"setField($event)\" placeholder=\"Number\" (blur)=\"onNumberBlur()\">\n      <span matTextPrefix>$</span>\n    </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text cell-display-number\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{formatNumberSignal()}}</span>\n    } @else {\n      {{formatNumberSignal()}}\n    }\n  </div>\n  }\n  }\n  @case ('number') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'number-' + columnName()+ id()\" [name]=\"'number-' + columnName()+ id()\"\n      [ngModel]=\"currentValue()\" (ngModelChange)=\"setField($event)\" placeholder=\"Number\" (blur)=\"onNumberBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text cell-display-number\" (dblclick)=\"setActive(true)\"\n[class.cell-display-text-editable]=\"isEditable()\"\n  >\n    @if (drillable() && currentValue() !== 0) {\n      <span class=\"drillable-value\" ><a class=\"drillable-link\" (click)=\"onDrillableClick($event)\">{{formatNumberSignal()}}</a></span>\n    } @else {\n      {{formatNumberSignal()}}\n    }\n  </div>\n  }\n  }\n  @case ('location') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'location-' + columnName()+ id()\" [name]=\"'location-' + columnName()+ id()\"\n      [(ngModel)]=\"currentValue\" placeholder=\"location\" (blur)=\"onLocationBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\"><a class=\"drillable-link\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</a></span>\n    } @else {\n      {{currentValue()}}\n    }\n  </div>\n  }\n  }\n  @case ('email') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"email\" [id]=\"'email-' + columnName()+ id()\" [name]=\"'email-' + columnName()+ id()\"\n      [(ngModel)]=\"currentValue\" placeholder=\"email\" matTooltipPosition=\"below\" (blur)=\"onEmailBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n    } @else {\n      {{currentValue()}}\n    }\n  </div>\n  }\n  }\n      @case ('dropdown_multi_select') {\n      <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" #multiSelectTrigger\n      [class.cell-display-text-editable]=\"isEditable()\">\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}</span>\n        } @else {\n          {{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}\n        }\n      </div>\n    }\n\n  @case ('dropdown_single_select') {\n    <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" [cdkMenuTriggerFor]=\"singleSelectTrigger\" #singleSelectTrigger\n    [class.cell-display-text-editable]=\"isEditable()\">\n      @if (drillable()) {\n        <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n      } @else {\n        {{currentValue()}}\n      }\n    </div>\n  }\n\n  @case ('checkbox') {\n  <div class=\"cell-form-field cell-checkbox\">\n    <mat-checkbox [(ngModel)]=\"currentValue\">\n    </mat-checkbox>\n  </div>\n  }\n\n  @case ('people') {\n    <div class=\"assignee-avatars \" (dblclick)=\"toggleOverlayMenu($event)\" #peopleTrigger>\n      @if (isAssigneeArray(currentValue()) && currentValue().length > 0) {\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            @for (assignee of currentValue(); track $index) {\n             @if ($index < 3) {\n                <div class=\"avatar-circle\" [style.z-index]=\"currentValue().length - $index\">\n                  {{ getInitials(assignee) }}\n                </div>\n              }\n            }\n            @if (currentValue().length > 3) {\n              <div class=\"avatar-circle count-circle\" [style.z-index]=\"1\">\n                +{{ currentValue().length - 3 }}\n              </div>\n            }\n          </span>\n        } @else {\n          @for (assignee of currentValue(); track $index) {\n           @if ($index < 3) {\n              <div class=\"avatar-circle\" [style.z-index]=\"currentValue().length - $index\">\n                {{ getInitials(assignee) }}\n              </div>\n            }\n          }\n          @if (currentValue().length > 3) {\n            <div class=\"avatar-circle count-circle\" [style.z-index]=\"1\">\n              +{{ currentValue().length - 3 }}\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n\n\n  @case ('date') {\n  <div class=\"cell-date-container\">\n    @if(isActive()){\n      <input type=\"text\" [id]=\"'date-' + columnName()+ id()\" [name]=\"'date-' + columnName()+ id()\"\n      [matDatepicker]=\"picker\" appCustomDatePicker class=\"inputRef date-picker\" [ngModel]=\"currentValue()\"\n      (ngModelChange)=\"onDateChange($event)\" (click)=\"picker.open()\" readonly>\n    <mat-datepicker-toggle hidden matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n      } @else {\n      <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n      [class.cell-display-text-editable]=\"isEditable()\">\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n        } @else {\n          {{currentValue()}}\n        }\n      </div>\n      }\n  </div>\n  }\n\n\n  @case ('priority') {\n  <button mat-stroked-button [cdkMenuTriggerFor]=\"prioritySelectMenu\" class=\"dropdown-trigger\">\n    <div class=\"cell-priority-content\">\n      <div [innerHTML]=\"getPriorityIcon()\"></div>\n      @if (drillable()) {\n        <div class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</div>\n      } @else {\n        <div>{{currentValue()}}</div>\n      }\n    </div>\n  </button>\n  }\n  @case ('progress') {\n  @if(isActive()){\n  <div class=\"progress-input-container\">\n    <mat-slider class=\"progress-slider\" [min]=\"0\" [max]=\"100\" [step]=\"1\" [discrete]=\"true\">\n      <input matSliderThumb [ngModel]=\"currentValue()\" (ngModelChange)=\"setProgressValue($event)\">\n    </mat-slider>\n    <span class=\"progress-value\">{{currentValue()}}%</span>\n  </div>\n  } @else {\n  <div class=\"progress-bar-container\" [attr.data-progress]=\"currentValue()\">\n    <div class=\"progress-bar\" [style.width.%]=\"currentValue()\"></div>\n    @if (drillable()) {\n      <span class=\"progress-text drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}%</span>\n    } @else {\n      <span class=\"progress-text\">{{currentValue()}}%</span>\n    }\n  </div>\n  }\n  }\n\n  @case ('rating') {\n  @if(isActive()){\n  <div class=\"rating-input-container\">\n    @for (star of getRatingStars(); track star) {\n    <span class=\"rating-star\" [class.active]=\"currentValue() >= star\" (click)=\"setRatingValue(star)\"\n      (mouseenter)=\"hoverRating = star\" (mouseleave)=\"hoverRating = 0\">\n      {{getEmojiForRating(star)}}\n    </span>\n    }\n    <span class=\"rating-value\">{{currentValue()}}/{{columnCellConfiguration()?.end_value || 5}}</span>\n  </div>\n  } @else {\n  <div class=\"rating-display-container\">\n    @for (star of getRatingStars(); track star) {\n    <span class=\"rating-star\" [class.active]=\"currentValue() >= star\">\n      {{getEmojiForRating(star)}}\n    </span>\n    }\n    @if (drillable()) {\n      <span class=\"drillable-value\"><a class=\"drillable-link\"(click)=\"onDrillableClick($event)\">{{currentValue()}}/{{columnCellConfiguration()?.end_value || 5}}</a></span>\n    }\n  </div>\n  }\n  }\n\n  @case ('status') {\n  <button mat-stroked-button [cdkMenuTriggerFor]=\"statusSelectMenu\" class=\"status-dropdown-trigger\"\n    [style.background-color]=\"getStatusColor(currentValue()).background\"\n    [style.border-color]=\"getStatusColor(currentValue()).border\" [style.color]=\"getStatusColor(currentValue()).text\"\n    [style.height.px]=\"30\">\n    <div class=\"status-button-content\">\n      @if(getStatusButtonDisplay(currentValue()).color) {\n\n      }\n      @if (drillable()) {\n        <span class=\"status-text drillable-value\" (click)=\"onDrillableClick($event)\">\n          {{getStatusButtonDisplay(currentValue()).text}}\n        </span>\n      } @else {\n        <span class=\"status-text\">\n          {{getStatusButtonDisplay(currentValue()).text}}\n        </span>\n      }\n    </div>\n  </button>\n  }\n\n  @case ('tag') {\n  <div class=\"tag-container\" [cdkMenuTriggerFor]=\"tagSelectMenu\">\n\n    <div class=\"tag-display\">\n      @if (drillable()) {\n        <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n          @for (tag of getTagDisplay(currentValue()).displayTags; track tag) {\n          @if (columnCellConfiguration()) {\n          <span class=\"tag\" [style.background]=\"getTagColor(tag).background\" [style.color]=\"getTagColor(tag).color\">\n            {{tag}}\n          </span>\n          } @else {\n          <span class=\"tag cell-fallback-tag\">\n            {{tag}}\n          </span>\n          }\n          }\n          @if(getTagDisplay(currentValue()).moreCount > 0) {\n          <span class=\"tag-more\">\n            + {{getTagDisplay(currentValue()).moreCount}} more\n          </span>\n          }\n        </span>\n      } @else {\n        @for (tag of getTagDisplay(currentValue()).displayTags; track tag) {\n        @if (columnCellConfiguration()) {\n        <span class=\"tag\" [style.background]=\"getTagColor(tag).background\" [style.color]=\"getTagColor(tag).color\">\n          {{tag}}\n        </span>\n        } @else {\n        <span class=\"tag cell-fallback-tag\">\n          {{tag}}\n        </span>\n        }\n        }\n        @if(getTagDisplay(currentValue()).moreCount > 0) {\n        <span class=\"tag-more\">\n          + {{getTagDisplay(currentValue()).moreCount}} more\n        </span>\n        }\n      }\n    </div>\n\n  </div>\n  }\n\n  @case ('phone') {\n  <app-mobile-input [(ngModel)]=\"currentValue\"\n    [defaultCountry]=\"columnCellConfiguration()?.default_country || 'US'\"></app-mobile-input>\n  }\n\n  @case ('attachment') {\n  <div class=\"attachment-cell-wrapper\" (dblclick)=\"toggleOverlayMenu($event)\" cdkOverlayOrigin #attachmentTrigger=\"cdkOverlayOrigin\">\n    @if(currentValue()?.length > 0){\n    <div class=\"cell-attachment-container\">\n      @if (drillable()) {\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 (drillable()) {\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    \n    \n  </div>\n  }\n  @default {\n  <div class=\"cell-default-display\">\n    @if (drillable()) {\n      <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{value()}}</span>\n    } @else {\n      {{value()}}\n    }\n  </div>\n  }\n  }\n\n</div>\n\n<ng-template #prioritySelectMenu>\n  <div class=\"dropdown-menu\" cdkMenu [style.min-width.px]=\"fieldSize()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" [(ngModel)]=\"optionSearchText\">\n      </mat-form-field>\n\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox\">\n        <li [cdkOption]=\"''\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option notext-overflow cell-priority-content\">\n          <div [innerHTML]=\"sanitize.bypassSecurityTrustHtml(option.icon)\"></div>\n          <div>{{option.label}}</div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template cdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"singleSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_single_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_single_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" (click)=\"$event.stopPropagation()\" [(ngModel)]=\"optionSearchText\">\n      </mat-form-field>\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox\">\n        <li [cdkOption]=\"'None'\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        <li [cdkOption]=\"'option 1'\" class=\"listbox-option notext-overflow\">\n          option 1\n        </li>\n        <li [cdkOption]=\"'option 2'\" class=\"listbox-option notext-overflow\">\n          option 2\n        </li>\n        <li [cdkOption]=\"'option 3'\" class=\"listbox-option notext-overflow\">\n          option 3\n        </li>\n        <li [cdkOption]=\"'option 4'\" class=\"listbox-option notext-overflow\">\n          option 4\n        </li><li [cdkOption]=\"'option 5'\" class=\"listbox-option notext-overflow\">\n          option 5\n        </li><li [cdkOption]=\"'option 6'\" class=\"listbox-option notext-overflow\">\n          option 6\n        </li><li [cdkOption]=\"'option 7'\" class=\"listbox-option notext-overflow\">\n          option 7\n        </li><li [cdkOption]=\"'option 1'\" class=\"listbox-option notext-overflow\">\n          option 1\n        </li><li [cdkOption]=\"'option 9'\" class=\"listbox-option notext-overflow\">\n          option 9\n        </li><li [cdkOption]=\"'option 10'\" class=\"listbox-option notext-overflow\">\n          option 10\n        </li><li [cdkOption]=\"'option 11'\" class=\"listbox-option notext-overflow\">\n          option 11\n        </li><li [cdkOption]=\"'option 12'\" class=\"listbox-option notext-overflow\">\n          option 12\n        </li><li [cdkOption]=\"'option 13'\" class=\"listbox-option notext-overflow\">\n          option 13\n        </li><li [cdkOption]=\"'option 14'\" class=\"listbox-option notext-overflow\">\n          option 14\n        </li><li [cdkOption]=\"'option 15'\" class=\"listbox-option notext-overflow\">\n          option 15\n        </li><li [cdkOption]=\"'option 16'\" class=\"listbox-option notext-overflow\">\n          option 16\n        </li><li [cdkOption]=\"'option 17'\" class=\"listbox-option notext-overflow\">\n          option 17\n        </li><li [cdkOption]=\"'option 18'\" class=\"listbox-option notext-overflow\">\n          option 18\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option notext-overflow\">\n          {{option.label}}\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template \ncdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"multiSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_multi_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_multi_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n          <div class=\"listbox-container\">\n        <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n          <input matInput type=\"search\" placeholder=\"Search...\" [ngModel]=\"optionSearchText()\"\n           (ngModelChange)=\"optionSearchText.set($event)\" (click)=\"$event.stopPropagation()\">\n        </mat-form-field>\n        \n        <!-- Select All Checkbox -->\n        <div class=\"select-all-container\" (click)=\"$event.stopPropagation()\">\n          <mat-checkbox \n            [checked]=\"isAllSelected()\" \n            [indeterminate]=\"isIndeterminate()\"\n            (change)=\"toggleSelectAll($event.checked)\">\n            <span class=\"select-all-text\">Select All</span>\n          </mat-checkbox>\n        </div>\n        \n        <ul cdkListboxMultiple=\"true\" cdkListboxUseActiveDescendant cdkListbox [ngModel]=\"currentValue()\"\n          (ngModelChange)=\"selectedMultiSelect($event)\" aria-labelledby=\"listbox-labssel\" class=\"listbox\" (click)=\"$event.stopPropagation()\">\n        <li [cdkOption]=\"'None'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('None')\" (click)=\"$event.stopPropagation();appendMultiSelect('None')\"></mat-checkbox>\n            <span class=\"option-text\">None</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 1'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 1')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 1')\"></mat-checkbox>\n            <span class=\"option-text\">option 1</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 2'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 2')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 2')\"></mat-checkbox>\n            <span class=\"option-text\">option 2</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 3'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 3')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 3')\"></mat-checkbox>\n            <span class=\"option-text\">option 3</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 4'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 4')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 4')\"></mat-checkbox>\n            <span class=\"option-text\">option 4</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 5'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 5')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 5')\"></mat-checkbox>\n            <span class=\"option-text\">option 5</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 6'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 6')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 6')\"></mat-checkbox>\n            <span class=\"option-text\">option 6</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 7'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 7')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 7')\"></mat-checkbox>\n            <span class=\"option-text\">option 7</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 8'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 8')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 8')\"></mat-checkbox>\n            <span class=\"option-text\">option 8</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 9'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 9')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 9')\"></mat-checkbox>\n            <span class=\"option-text\">option 9</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 10'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 10')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 10')\"></mat-checkbox>\n            <span class=\"option-text\">option 10</span>\n          </div>\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected(option.value)\" (click)=\"$event.stopPropagation();appendMultiSelect(option.value)\"></mat-checkbox>\n            <span class=\"option-text\">{{option.label}}</span>\n          </div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template cdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"peopleTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('people')\"\n(detach)=\"isOpen = showOverlayMenu('people')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" [ngModel]=\"optionSearchText()\" (click)=\"$event.stopPropagation()\"\n          (ngModelChange)=\"optionSearchText.set($event)\">\n      </mat-form-field>\n      <ul cdkListboxMultiple=\"true\" cdkListboxUseActiveDescendant cdkListbox [ngModel]=\"currentValue()\"\n        (ngModelChange)=\"selectedMultiSelect($event)\" aria-labelledby=\"listbox-labssel\" class=\"listbox\">\n        <li [cdkOption]=\"'person0@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person0@domain.com') }}</div>\n            <span class=\"option-text\">person0&#64;domain.com</span>\n            @if (isOptionSelected('person0@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person1@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person1@domain.com') }}</div>\n            <span class=\"option-text\">person1&#64;domain.com</span>\n            @if (isOptionSelected('person1@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person2@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person2@domain.com') }}</div>\n            <span class=\"option-text\">person2&#64;domain.com</span>\n            @if (isOptionSelected('person2@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person3@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person3@domain.com') }}</div>\n            <span class=\"option-text\">person3&#64;domain.com</span>\n            @if (isOptionSelected('person3@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person4@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person4@domain.com') }}</div>\n            <span class=\"option-text\">person4&#64;domain.com</span>\n            @if (isOptionSelected('person4@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person5@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person5@domain.com') }}</div>\n            <span class=\"option-text\">person5&#64;domain.com</span>\n            @if (isOptionSelected('person5@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"multi-listbox-option notext-overflow listbox-option_people\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials(option.value) }}</div>\n            <span class=\"option-text\">{{option.label}}</span>\n            @if (isOptionSelected(option.value)) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #statusSelectMenu>\n  <div class=\"dropdown-menu status-dropdown-menu\" cdkMenu [style.min-width.px]=\"fieldSize()\"\n    (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" [(ngModel)]=\"optionSearchText\">\n      </mat-form-field>\n\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox status-listbox\">\n        <li [cdkOption]=\"''\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        @for (option of getStatusOptions(); track option.value) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option status-option\"\n          [style.background-color]=\"getStatusColor(option.value).background\"\n          [style.border-color]=\"getStatusColor(option.value).border\" [style.color]=\"getStatusColor(option.value).text\">\n          @if(option.color) {\n          <span class=\"status-color-indicator\" [style.background-color]=\"option.color\"></span>\n          }\n          {{option.label}}\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tagSelectMenu>\n  <div class=\"dropdown-menu tag-dropdown-menu\" [style.min-width.px]=\"fieldSize()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search or add tag...\" [ngModel]=\"optionSearchText()\"\n          (ngModelChange)=\"optionSearchText.set($event)\" (keyup.enter)=\"addNewTag(optionSearchText())\"\n          [style.min-width.px]=\"fieldSize()\">\n      </mat-form-field>\n\n      <ul cdkListboxMultiple=\"true\" cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedMultiSelect($event)\"\n        class=\"listbox tag-listbox\" [style.min-width.px]=\"fieldSize()\">\n        <!-- Predefined tags -->\n        @for (option of getTagOptions(); track option.value) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option tag-option\">\n          {{option.label}}\n        </li>\n        }\n\n        <!-- New tag input -->\n\n\n\n      </ul>\n\n    </div>\n  </div>\n</ng-template>\n\n<!-- Attachment Menu - Positioned relative to the cell -->\n<ng-template \ncdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"attachmentTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('attachment')\"\n(detach)=\"isOpen = showOverlayMenu('attachment')\">\n  <div class=\"attachment-menu-overlay\" [style.width.px]=\"currentColumnWidth()\" [style.min-width.px]=\"300\">\n    <div class=\"attachment-container\">\n    <!-- Header Section -->\n    <div class=\"attachment-header\">\n      <span class=\"attachment-title\">Add or Drag files</span>\n      <button mat-flat-button \n              (click)=\"fileInput.click()\" \n              class=\"attachment-upload-btn\">\n        Upload\n      </button>\n    </div>\n    \n    <!-- Drop zone -->\n    <div class=\"attachment-drop-zone\" \n         (drop)=\"onFileDrop($event)\" \n         (dragover)=\"onDragOver($event)\" \n         (dragleave)=\"onDragLeave($event)\"\n         (paste)=\"onPaste($event)\"\n         (click)=\"fileInput.click()\"\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 #fileInput \n           type=\"file\" \n           multiple \n           (change)=\"fileInputChange($event)\" \n           style=\"display: none;\">\n    \n    <!-- File list -->\n    <div class=\"attachment-file-list\" *ngIf=\"currentValue()?.length > 0\">\n      <div class=\"attachment-file-item\" *ngFor=\"let file of currentValue(); trackBy: trackByFile\">\n        <div class=\"file-info\">\n          <span class=\"file-icon\">\uD83D\uDCC4</span>\n          <span class=\"file-name\">{{ file?.split('_')?.[2] || file }}</span>\n        </div>\n        <div class=\"file-actions\">\n          <button class=\"action-btn\" (click)=\"viewFile(file)\" title=\"View\">\uD83D\uDC41\uFE0F</button>\n          <button class=\"action-btn\" (click)=\"deleteFile(file)\" title=\"Delete\">\uD83D\uDDD1\uFE0F</button>\n        </div>\n              </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:block;height:100%;width:100%;position:relative;overflow:hidden!important}.container{height:calc(100% - 2px);width:calc(100% - 2px);position:relative!important;overflow:hidden!important;max-width:100%!important;box-sizing:border-box!important}.container .cell-display-text{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.inputRef{height:inherit;width:inherit;border:none}.inputRef:focus{outline:none}.cell-checkbox{text-align:center}.cell-form-field{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-outline,.cell-form-field .mat-mdc-form-field-subscript-wrapper,.cell-form-field .mat-mdc-form-field-text-suffix{display:none!important}.cell-form-field .mat-mdc-form-field-wrapper,.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{width:100%!important;height:100%!important;padding:0!important;margin:0!important;min-height:auto!important;border-top:none!important}.cell-form-field input[matInput]{width:100%!important;height:100%!important;padding:2px!important;margin:0!important;border:none!important;outline:none!important;background:transparent!important;font-size:14px!important;line-height:normal!important;box-sizing:border-box!important;max-width:none!important;min-width:0!important;flex:none!important}.dropdown-menu{width:100%}.attachment-menu,.dropdown-menu,.dropdown-menu.attachment-menu,[cdkMenu].attachment-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border-radius:8px!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important}.attachment-menu.cdk-overlay-pane,.dropdown-menu.cdk-overlay-pane,.dropdown-menu.attachment-menu.cdk-overlay-pane,[cdkMenu].attachment-menu.cdk-overlay-pane{background:var(--grid-surface)!important;background-color:var(--grid-surface)!important}.attachment-menu .attachment-container,.dropdown-menu .attachment-container,.dropdown-menu.attachment-menu .attachment-container,[cdkMenu].attachment-menu .attachment-container{padding:4px;background:var(--grid-surface, #fef7ff);border-radius:8px}.attachment-menu .attachment-header,.dropdown-menu .attachment-header,.dropdown-menu.attachment-menu .attachment-header,[cdkMenu].attachment-menu .attachment-header{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:24px!important;padding:0!important}.attachment-menu .attachment-header .attachment-title,.dropdown-menu .attachment-header .attachment-title,.dropdown-menu.attachment-menu .attachment-header .attachment-title,[cdkMenu].attachment-menu .attachment-header .attachment-title{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:16px!important;font-weight:500!important;color:var(--grid-on-surface, #1d1b20)!important;margin:0!important}.attachment-menu .attachment-header .attachment-upload-btn,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button,.dropdown-menu .attachment-header .attachment-upload-btn,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button{background:var(--grid-primary, #6750a4)!important;background-color:var(--grid-primary, #6750a4)!important;color:var(--grid-on-primary, #ffffff)!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-weight:500!important;padding:8px 20px!important;border-radius:6px!important;border:none!important;cursor:pointer!important;font-size:14px!important;letter-spacing:.5px!important;box-shadow:var(--grid-elevation-1, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15))!important;transition:background-color .2s ease!important}.attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label,.dropdown-menu .attachment-header .attachment-upload-btn .mdc-button__label,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label{color:var(--grid-on-primary, #ffffff)!important}.attachment-menu .attachment-header .attachment-upload-btn:hover,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover,.dropdown-menu .attachment-header .attachment-upload-btn:hover,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn:hover,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn:hover,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover{opacity:.9!important}.attachment-menu .attachment-header .attachment-upload-btn:before,.attachment-menu .attachment-header .attachment-upload-btn:after,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after,.dropdown-menu .attachment-header .attachment-upload-btn:before,.dropdown-menu .attachment-header .attachment-upload-btn:after,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn:before,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn:after,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn:before,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn:after,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after{display:none!important}.attachment-menu .attachment-drop-zone,.dropdown-menu .attachment-drop-zone,.dropdown-menu.attachment-menu .attachment-drop-zone,[cdkMenu].attachment-menu .attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0)!important;border-radius:8px!important;padding:10px!important;text-align:center!important;cursor:pointer!important;transition:all .3s ease!important;background:var(--grid-surface-variant, #e7e0ec)!important;margin:16px 0!important}.attachment-menu .attachment-drop-zone:hover,.dropdown-menu .attachment-drop-zone:hover,.dropdown-menu.attachment-menu .attachment-drop-zone:hover,[cdkMenu].attachment-menu .attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important}.attachment-menu .attachment-drop-zone.dragging,.dropdown-menu .attachment-drop-zone.dragging,.dropdown-menu.attachment-menu .attachment-drop-zone.dragging,[cdkMenu].attachment-menu .attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important;transform:scale(1.01)!important}.attachment-menu .attachment-drop-zone .attachment-drop-content,.dropdown-menu .attachment-drop-zone .attachment-drop-content,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-content,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-content{display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important}.attachment-menu .attachment-drop-zone .attachment-drop-icon,.dropdown-menu .attachment-drop-zone .attachment-drop-icon,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-icon,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-icon{font-size:48px!important;color:var(--grid-primary, #6750a4)!important;font-weight:300!important;line-height:1!important}.attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,.dropdown-menu .attachment-drop-zone .attachment-drop-text .primary-text,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;font-weight:400!important;margin:0!important}.attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.dropdown-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:12px!important;color:var(--grid-on-surface-variant, #49454f)!important;margin-top:4px!important;display:block!important}.attachment-menu .attachment-file-list,.dropdown-menu .attachment-file-list,.dropdown-menu.attachment-menu .attachment-file-list,[cdkMenu].attachment-menu .attachment-file-list{display:block!important;margin-top:16px!important;border-top:1px solid var(--grid-outline-variant, #cac4d0)!important;padding-top:16px!important}.attachment-menu .attachment-file-list .attachment-file-item,.dropdown-menu .attachment-file-list .attachment-file-item,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 0!important;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)!important}.attachment-menu .attachment-file-list .attachment-file-item:last-child,.dropdown-menu .attachment-file-list .attachment-file-item:last-child,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item:last-child,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item:last-child{border-bottom:none!important}.attachment-menu .attachment-file-list .attachment-file-item .file-info,.dropdown-menu .attachment-file-list .attachment-file-item .file-info,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-info,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-info{display:flex!important;align-items:center!important;gap:8px!important;flex:1!important}.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.dropdown-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon{font-size:16px!important;color:var(--grid-on-surface-variant, #49454f)!important}.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,.dropdown-menu .attachment-file-list .attachment-file-item .file-info .file-name,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;word-break:break-word!important}.attachment-menu .attachment-file-list .attachment-file-item .file-actions,.dropdown-menu .attachment-file-list .attachment-file-item .file-actions,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-actions,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-actions{display:flex!important;gap:4px!important}.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.dropdown-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn{width:24px!important;height:24px!important;border:none!important;background:transparent!important;cursor:pointer!important;border-radius:4px!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;transition:background-color .2s ease!important}.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.dropdown-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu,.cdk-overlay-container .attachment-menu,.cdk-overlay-pane .attachment-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important;border-radius:8px!important;font-family:var(--grid-font-family, \"Poppins\")!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-container,.cdk-overlay-container .attachment-menu .attachment-container,.cdk-overlay-pane .attachment-menu .attachment-container{padding:4px;background:var(--grid-surface, #fef7ff)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header,.cdk-overlay-container .attachment-menu .attachment-header,.cdk-overlay-pane .attachment-menu .attachment-header{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:24px!important;padding:0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-title,.cdk-overlay-container .attachment-menu .attachment-header .attachment-title,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-title{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:16px!important;font-weight:500!important;color:var(--grid-on-surface, #1d1b20)!important;margin:0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn,.cdk-overlay-container .attachment-menu .attachment-header .attachment-upload-btn,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn{background:var(--grid-primary, #6750a4)!important;background-color:var(--grid-primary, #6750a4)!important;color:var(--grid-on-primary, #ffffff)!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-weight:500!important;padding:8px 20px!important;border-radius:6px!important;border:none!important;cursor:pointer!important;font-size:14px!important;letter-spacing:.5px!important;box-shadow:var(--grid-elevation-1, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15))!important;transition:background-color .2s ease!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn:hover,.cdk-overlay-container .attachment-menu .attachment-header .attachment-upload-btn:hover,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn:hover{opacity:.9!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.cdk-overlay-container .attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label{color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone,.cdk-overlay-container .attachment-menu .attachment-drop-zone,.cdk-overlay-pane .attachment-menu .attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0)!important;border-radius:8px!important;padding:40px 20px!important;text-align:center!important;cursor:pointer!important;transition:all .3s ease!important;background:var(--grid-surface-variant, #e7e0ec)!important;margin:16px 0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone:hover,.cdk-overlay-container .attachment-menu .attachment-drop-zone:hover,.cdk-overlay-pane .attachment-menu .attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone.dragging,.cdk-overlay-container .attachment-menu .attachment-drop-zone.dragging,.cdk-overlay-pane .attachment-menu .attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important;transform:scale(1.01)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-content,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-content,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-content{display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-icon,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-icon,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-icon{font-size:48px!important;color:var(--grid-primary, #6750a4)!important;font-weight:300!important;line-height:1!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;font-weight:400!important;margin:0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:12px!important;color:var(--grid-on-surface-variant, #49454f)!important;margin-top:4px!important;display:block!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list,.cdk-overlay-container .attachment-menu .attachment-file-list,.cdk-overlay-pane .attachment-menu .attachment-file-list{display:block!important;margin-top:16px!important;border-top:1px solid var(--grid-outline-variant, #cac4d0)!important;padding-top:16px!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 0!important;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item:last-child,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item:last-child,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item:last-child{border-bottom:none!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-info,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info{display:flex!important;align-items:center!important;gap:8px!important;flex:1!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon{font-size:16px!important;color:var(--grid-on-surface-variant, #49454f)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;word-break:break-word!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-actions,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions{display:flex!important;gap:4px!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn{width:24px!important;height:24px!important;border:none!important;background:transparent!important;cursor:pointer!important;border-radius:4px!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;transition:background-color .2s ease!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu,.cdk-overlay-container .attachment-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important}.attachment-cell-wrapper{position:relative;display:block;width:100%;height:100%;text-align:center;overflow:visible}.attachment-menu-overlay{position:absolute;z-index:1000;background:var(--grid-surface, #fef7ff);border:1px solid var(--grid-outline-variant, #cac4d0);box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15));border-radius:8px;font-family:var(--grid-font-family, \"Poppins\");color:var(--grid-on-surface, #1d1b20);overflow:visible;z-index:9999}.attachment-menu-overlay .attachment-container{padding:16px;background:var(--grid-surface, #fef7ff)}.attachment-menu-overlay .attachment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding:0}.attachment-menu-overlay .attachment-header .attachment-title{font-family:var(--grid-font-family, \"Poppins\");font-size:16px;font-weight:500;color:var(--grid-on-surface, #1d1b20);margin:0}.attachment-menu-overlay .attachment-header .attachment-upload-btn{background:var(--grid-primary, #6750a4);background-color:var(--grid-primary, #6750a4);color:var(--grid-on-primary, #ffffff);font-family:var(--grid-font-family, \"Poppins\");font-weight:500;padding:8px 20px;border-radius:6px;border:none;cursor:pointer;font-size:14px;letter-spacing:.5px;box-shadow:var(--grid-elevation-1, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15));transition:background-color .2s ease}.attachment-menu-overlay .attachment-header .attachment-upload-btn:hover{opacity:.9}.attachment-menu-overlay .attachment-header .attachment-upload-btn .mdc-button__label{color:var(--grid-on-primary, #ffffff)}.attachment-menu-overlay .attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0);border-radius:8px;padding:10px;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--grid-surface-variant, #e7e0ec);margin:16px 0}.attachment-menu-overlay .attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7)}.attachment-menu-overlay .attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7);transform:scale(1.01)}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-content{display:flex;flex-direction:column;align-items:center;gap:12px}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-icon{font-size:48px;color:var(--grid-primary, #6750a4);font-weight:300;line-height:1}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:14px;color:var(--grid-on-surface-variant, #49454f);font-weight:400;margin:0}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-top:4px;display:block}.attachment-menu-overlay .attachment-file-list{display:block;margin-top:16px;border-top:1px solid var(--grid-outline-variant, #cac4d0);padding-top:16px}.attachment-menu-overlay .attachment-file-list .attachment-file-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)}.attachment-menu-overlay .attachment-file-list .attachment-file-item:last-child{border-bottom:none}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-info{display:flex;align-items:center;gap:8px;flex:1}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-info .file-icon{font-size:16px;color:var(--grid-on-surface-variant, #49454f)}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-info .file-name{font-family:var(--grid-font-family, \"Poppins\");font-size:14px;color:var(--grid-on-surface, #1d1b20);word-break:break-word}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-actions{display:flex;gap:4px}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-actions .action-btn{width:24px;height:24px;border:none;background:transparent;cursor:pointer;border-radius:4px;font-size:14px;color:var(--grid-on-surface-variant, #49454f);transition:background-color .2s ease}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-actions .action-btn:hover{background:var(--grid-surface-container, #f3edf7)}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu,.cdk-overlay-container .dropdown-menu,.cdk-overlay-pane .dropdown-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important;border-radius:8px!important;font-family:var(--grid-font-family, \"Poppins\")!important;color:var(--grid-on-surface, #1d1b20)!important;overflow:hidden!important;box-sizing:border-box!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-container,.cdk-overlay-container .dropdown-menu .listbox-container,.cdk-overlay-pane .dropdown-menu .listbox-container{padding:8px!important;background:var(--grid-surface, #fef7ff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field,.cdk-overlay-container .dropdown-menu .search-form-field,.cdk-overlay-pane .dropdown-menu .search-form-field{width:100%!important;margin-bottom:8px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-form-field,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field{width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-text-field-wrapper,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-text-field-wrapper,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-text-field-wrapper{background:var(--grid-surface, #fffbfe)!important;border-radius:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-focus-overlay,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-form-field-focus-overlay,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-focus-overlay{background:var(--grid-surface, #fffbfe)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-subscript-wrapper,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-form-field-subscript-wrapper,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-subscript-wrapper{display:none!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field input,.cdk-overlay-container .dropdown-menu .search-form-field input,.cdk-overlay-pane .dropdown-menu .search-form-field input{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container,.cdk-overlay-container .dropdown-menu .select-all-container,.cdk-overlay-pane .dropdown-menu .select-all-container{padding:8px 12px!important;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)!important;margin-bottom:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container .select-all-text,.cdk-overlay-container .dropdown-menu .select-all-container .select-all-text,.cdk-overlay-pane .dropdown-menu .select-all-container .select-all-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;font-weight:500!important;color:var(--grid-on-surface, #1d1b20)!important;margin-left:8px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-container .dropdown-menu .select-all-container mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark{color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--grid-primary, #6750a4)!important;border-color:var(--grid-primary, #6750a4)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-indeterminate .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-indeterminate .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-indeterminate .mdc-checkbox__background{background-color:var(--grid-primary, #6750a4)!important;border-color:var(--grid-primary, #6750a4)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox,.cdk-overlay-container .dropdown-menu .listbox,.cdk-overlay-pane .dropdown-menu .listbox{list-style:none!important;margin:0!important;padding:0!important;max-height:200px!important;overflow-y:auto!important;background:var(--grid-surface, #fef7ff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar{width:8px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-track,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar-track,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-track{background:var(--grid-surface-variant, #e7e0ec)!important;border-radius:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar-thumb,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb{background:var(--grid-primary, #6750a4)!important;border-radius:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb:hover,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar-thumb:hover,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb:hover{background:var(--grid-primary, #6750a4)!important;opacity:.8!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option,.cdk-overlay-container .dropdown-menu .multi-listbox-option,.cdk-overlay-pane .dropdown-menu .multi-listbox-option{padding:4px 8px!important;margin:2px 0!important;border-radius:4px!important;cursor:pointer!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;transition:background-color .2s ease!important;border:none!important;text-align:left!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option:hover,.cdk-overlay-container .dropdown-menu .multi-listbox-option:hover,.cdk-overlay-pane .dropdown-menu .multi-listbox-option:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option.notext-overflow,.cdk-overlay-container .dropdown-menu .multi-listbox-option.notext-overflow,.cdk-overlay-pane .dropdown-menu .multi-listbox-option.notext-overflow{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content .option-text,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content .option-text,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content .option-text{flex:1!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:inherit!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox{flex-shrink:0!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__background{border-color:var(--grid-outline, #79757f)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark{color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--grid-primary, #6750a4)!important;border-color:var(--grid-primary, #6750a4)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option,.cdk-overlay-container .dropdown-menu .listbox-option,.cdk-overlay-pane .dropdown-menu .listbox-option{padding:4px 8px!important;margin:2px 0!important;border-radius:4px!important;cursor:pointer!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;transition:background-color .2s ease!important;border:none!important;text-align:left!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option:hover,.cdk-overlay-container .dropdown-menu .listbox-option:hover,.cdk-overlay-pane .dropdown-menu .listbox-option:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-active,.cdk-overlay-container .dropdown-menu .listbox-option.cdk-option-active,.cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-active,.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-selected,.cdk-overlay-container .dropdown-menu .listbox-option.cdk-option-selected,.cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-selected{background:var(--grid-primary, #6750a4)!important;color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option.notext-overflow,.cdk-overlay-container .dropdown-menu .listbox-option.notext-overflow,.cdk-overlay-pane .dropdown-menu .listbox-option.notext-overflow{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option .option-content,.cdk-overlay-container .dropdown-menu .listbox-option .option-content,.cdk-overlay-pane .dropdown-menu .listbox-option .option-content{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option .option-content .option-text,.cdk-overlay-container .dropdown-menu .listbox-option .option-content .option-text,.cdk-overlay-pane .dropdown-menu .listbox-option .option-content .option-text{flex:1!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:inherit!important}.cell-display-text-editable{cursor:pointer!important}.cell-display-text{width:100%!important;height:100%!important;min-height:20px!important;display:block!important;padding:4px 8px!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:var(--grid-font-size-body, 12px)!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;border:none!important;outline:none!important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;box-sizing:border-box!important;transition:background-color .2s ease!important;line-height:1.4!important}.cell-display-text,.cell-display-text>*{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.cell-display-text:empty:before{content:\"Click to select\"!important;color:var(--grid-on-surface-variant, #49454f)!important;font-style:italic!important}.cell-display-number{text-align:var(--grid-number-text-align, right)}.aggregation .cell-display-number{text-align:var(--grid-aggregation-text-align, right)}.assignee-avatars{display:flex;align-items:center;padding:4px 8px;min-height:20px}.avatar-circle{width:28px;height:28px;border-radius:50%;background-color:var(--grid-primary, #6750a4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;border:2px solid var(--grid-surface, #fef7ff);margin-left:-8px;position:relative;z-index:1}.avatar-circle:first-child{margin-left:0}.avatar-circle.count-circle{background-color:var(--grid-surface-variant, #e7e0ec);color:var(--grid-on-surface-variant, #49454f);font-size:11px;font-weight:500}.no-assignees{color:var(--grid-on-surface-variant, #49454f);font-style:italic;font-size:12px}.option-content{display:flex;align-items:center;gap:8px;width:100%}.option-avatar{width:24px;height:24px;border-radius:50%;background-color:var(--grid-primary, #6750a4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0}.option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.checkmark{color:var(--grid-primary, #6750a4);font-weight:700;font-size:14px;flex-shrink:0}.drillable-value{color:var(--grid-primary, #6750a4);text-decoration:underline;text-decoration-color:var(--grid-primary, #6750a4);text-decoration-thickness:1px;text-underline-offset:2px;transition:all .2s ease}.drillable-link{cursor:pointer;padding:4px}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"container\">\n  @switch (columnDatatype()) {\n  @case ('textbox') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'input-' + columnName()+ id()\" [name]=\"'input-' + columnName()+ id()\"\n      [(ngModel)]=\"currentValue\" (blur)=\"onTextboxBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\"><a class=\"drillable-link\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</a></span>\n    } @else {\n      {{currentValue()}}\n    }\n  </div>\n  }\n  }\n  @case ('currency') {\n  @if(isActive()){\n      <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'currency-' + columnName()+ id()\" [name]=\"'currency-' + columnName()+ id()\"\n      [ngModel]=\"currentValue()\" (ngModelChange)=\"setField($event)\" placeholder=\"Number\" (blur)=\"onNumberBlur()\">\n      <span matTextPrefix>$</span>\n    </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text cell-display-number\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{formatNumberSignal()}}</span>\n    } @else {\n      {{formatNumberSignal()}}\n    }\n  </div>\n  }\n  }\n  @case ('number') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'number-' + columnName()+ id()\" [name]=\"'number-' + columnName()+ id()\"\n      [ngModel]=\"currentValue()\" (ngModelChange)=\"setField($event)\" placeholder=\"Number\" (blur)=\"onNumberBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text cell-display-number\" (dblclick)=\"setActive(true)\"\n[class.cell-display-text-editable]=\"isEditable()\"\n  >\n    @if (drillable() && currentValue() !== 0) {\n      <span class=\"drillable-value\" ><a class=\"drillable-link\" (click)=\"onDrillableClick($event)\">{{formatNumberSignal()}}</a></span>\n    } @else {\n      {{formatNumberSignal()}}\n    }\n  </div>\n  }\n  }\n  @case ('location') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"text\" [id]=\"'location-' + columnName()+ id()\" [name]=\"'location-' + columnName()+ id()\"\n      [(ngModel)]=\"currentValue\" placeholder=\"location\" (blur)=\"onLocationBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\"><a class=\"drillable-link\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</a></span>\n    } @else {\n      {{currentValue()}}\n    }\n  </div>\n  }\n  }\n  @case ('email') {\n  @if(isActive()){\n  <mat-form-field appearance=\"outline\" class=\"cell-form-field\">\n    <input matInput type=\"email\" [id]=\"'email-' + columnName()+ id()\" [name]=\"'email-' + columnName()+ id()\"\n      [(ngModel)]=\"currentValue\" placeholder=\"email\" matTooltipPosition=\"below\" (blur)=\"onEmailBlur()\">\n  </mat-form-field>\n  } @else {\n  <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n  [class.cell-display-text-editable]=\"isEditable()\">\n    @if (drillable()) {\n      <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n    } @else {\n      {{currentValue()}}\n    }\n  </div>\n  }\n  }\n      @case ('dropdown_multi_select') {\n      <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" #multiSelectTrigger\n      [class.cell-display-text-editable]=\"isEditable()\">\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}</span>\n        } @else {\n          {{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}\n        }\n      </div>\n    }\n\n  @case ('dropdown_single_select') {\n    <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" [cdkMenuTriggerFor]=\"singleSelectTrigger\" #singleSelectTrigger\n    [class.cell-display-text-editable]=\"isEditable()\">\n      @if (drillable()) {\n        <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n      } @else {\n        {{currentValue()}}\n      }\n    </div>\n  }\n\n  @case ('checkbox') {\n  <div class=\"cell-form-field cell-checkbox\">\n    <mat-checkbox [(ngModel)]=\"currentValue\">\n    </mat-checkbox>\n  </div>\n  }\n\n  @case ('people') {\n    <div class=\"assignee-avatars \" (dblclick)=\"toggleOverlayMenu($event)\" #peopleTrigger>\n      @if (isAssigneeArray(currentValue()) && currentValue().length > 0) {\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            @for (assignee of currentValue(); track $index) {\n             @if ($index < 3) {\n                <div class=\"avatar-circle\" [style.z-index]=\"currentValue().length - $index\">\n                  {{ getInitials(assignee) }}\n                </div>\n              }\n            }\n            @if (currentValue().length > 3) {\n              <div class=\"avatar-circle count-circle\" [style.z-index]=\"1\">\n                +{{ currentValue().length - 3 }}\n              </div>\n            }\n          </span>\n        } @else {\n          @for (assignee of currentValue(); track $index) {\n           @if ($index < 3) {\n              <div class=\"avatar-circle\" [style.z-index]=\"currentValue().length - $index\">\n                {{ getInitials(assignee) }}\n              </div>\n            }\n          }\n          @if (currentValue().length > 3) {\n            <div class=\"avatar-circle count-circle\" [style.z-index]=\"1\">\n              +{{ currentValue().length - 3 }}\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n\n\n  @case ('date') {\n  <div class=\"cell-date-container\">\n    @if(isActive()){\n      <input type=\"text\" [id]=\"'date-' + columnName()+ id()\" [name]=\"'date-' + columnName()+ id()\"\n      [matDatepicker]=\"picker\" appCustomDatePicker class=\"inputRef date-picker\" [ngModel]=\"currentValue()\"\n      (ngModelChange)=\"onDateChange($event)\" (click)=\"picker.open()\" readonly>\n    <mat-datepicker-toggle hidden matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n      } @else {\n      <div class=\"cell-display-text\" (dblclick)=\"setActive(true)\"\n      [class.cell-display-text-editable]=\"isEditable()\">\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n        } @else {\n          {{currentValue()}}\n        }\n      </div>\n      }\n  </div>\n  }\n\n\n  @case ('priority') {\n  <button mat-stroked-button [cdkMenuTriggerFor]=\"prioritySelectMenu\" class=\"dropdown-trigger\">\n    <div class=\"cell-priority-content\">\n      <div [innerHTML]=\"getPriorityIcon()\"></div>\n      @if (drillable()) {\n        <div class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</div>\n      } @else {\n        <div>{{currentValue()}}</div>\n      }\n    </div>\n  </button>\n  }\n  @case ('progress') {\n  @if(isActive()){\n  <div class=\"progress-input-container\">\n    <mat-slider class=\"progress-slider\" [min]=\"0\" [max]=\"100\" [step]=\"1\" [discrete]=\"true\">\n      <input matSliderThumb [ngModel]=\"currentValue()\" (ngModelChange)=\"setProgressValue($event)\">\n    </mat-slider>\n    <span class=\"progress-value\">{{currentValue()}}%</span>\n  </div>\n  } @else {\n  <div class=\"progress-bar-container\" [attr.data-progress]=\"currentValue()\">\n    <div class=\"progress-bar\" [style.width.%]=\"currentValue()\"></div>\n    @if (drillable()) {\n      <span class=\"progress-text drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}%</span>\n    } @else {\n      <span class=\"progress-text\">{{currentValue()}}%</span>\n    }\n  </div>\n  }\n  }\n\n  @case ('rating') {\n  @if(isActive()){\n  <div class=\"rating-input-container\">\n    @for (star of getRatingStars(); track star) {\n    <span class=\"rating-star\" [class.active]=\"currentValue() >= star\" (click)=\"setRatingValue(star)\"\n      (mouseenter)=\"hoverRating = star\" (mouseleave)=\"hoverRating = 0\">\n      {{getEmojiForRating(star)}}\n    </span>\n    }\n    <span class=\"rating-value\">{{currentValue()}}/{{columnCellConfiguration()?.end_value || 5}}</span>\n  </div>\n  } @else {\n  <div class=\"rating-display-container\">\n    @for (star of getRatingStars(); track star) {\n    <span class=\"rating-star\" [class.active]=\"currentValue() >= star\">\n      {{getEmojiForRating(star)}}\n    </span>\n    }\n    @if (drillable()) {\n      <span class=\"drillable-value\"><a class=\"drillable-link\"(click)=\"onDrillableClick($event)\">{{currentValue()}}/{{columnCellConfiguration()?.end_value || 5}}</a></span>\n    }\n  </div>\n  }\n  }\n\n  @case ('status') {\n  <button mat-stroked-button [cdkMenuTriggerFor]=\"statusSelectMenu\" class=\"status-dropdown-trigger\"\n    [style.background-color]=\"getStatusColor(currentValue()).background\"\n    [style.border-color]=\"getStatusColor(currentValue()).border\" [style.color]=\"getStatusColor(currentValue()).text\"\n    [style.height.px]=\"30\">\n    <div class=\"status-button-content\">\n      @if(getStatusButtonDisplay(currentValue()).color) {\n\n      }\n      @if (drillable()) {\n        <span class=\"status-text drillable-value\" (click)=\"onDrillableClick($event)\">\n          {{getStatusButtonDisplay(currentValue()).text}}\n        </span>\n      } @else {\n        <span class=\"status-text\">\n          {{getStatusButtonDisplay(currentValue()).text}}\n        </span>\n      }\n    </div>\n  </button>\n  }\n\n  @case ('tag') {\n  <div class=\"tag-container\" [cdkMenuTriggerFor]=\"tagSelectMenu\">\n\n    <div class=\"tag-display\">\n      @if (drillable()) {\n        <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n          @for (tag of getTagDisplay(currentValue()).displayTags; track tag) {\n          @if (columnCellConfiguration()) {\n          <span class=\"tag\" [style.background]=\"getTagColor(tag).background\" [style.color]=\"getTagColor(tag).color\">\n            {{tag}}\n          </span>\n          } @else {\n          <span class=\"tag cell-fallback-tag\">\n            {{tag}}\n          </span>\n          }\n          }\n          @if(getTagDisplay(currentValue()).moreCount > 0) {\n          <span class=\"tag-more\">\n            + {{getTagDisplay(currentValue()).moreCount}} more\n          </span>\n          }\n        </span>\n      } @else {\n        @for (tag of getTagDisplay(currentValue()).displayTags; track tag) {\n        @if (columnCellConfiguration()) {\n        <span class=\"tag\" [style.background]=\"getTagColor(tag).background\" [style.color]=\"getTagColor(tag).color\">\n          {{tag}}\n        </span>\n        } @else {\n        <span class=\"tag cell-fallback-tag\">\n          {{tag}}\n        </span>\n        }\n        }\n        @if(getTagDisplay(currentValue()).moreCount > 0) {\n        <span class=\"tag-more\">\n          + {{getTagDisplay(currentValue()).moreCount}} more\n        </span>\n        }\n      }\n    </div>\n\n  </div>\n  }\n\n  @case ('phone') {\n  <app-mobile-input [(ngModel)]=\"currentValue\"\n    [defaultCountry]=\"columnCellConfiguration()?.default_country || 'US'\"></app-mobile-input>\n  }\n\n  @case ('attachment') {\n  <div class=\"attachment-cell-wrapper\" (dblclick)=\"toggleOverlayMenu($event)\" cdkOverlayOrigin #attachmentTrigger=\"cdkOverlayOrigin\">\n    @if(currentValue()?.length > 0){\n    <div class=\"cell-attachment-container\">\n      @if (drillable()) {\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 (drillable()) {\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    \n    \n  </div>\n  }\n\n  @case ('audio') {\n  @if (value()) {\n  <audio #aud class=\"cell-audio\" controls preload=\"none\" [src]=\"audioBlobUrl() || value()\"\n    (play)=\"onAudioPlay(aud)\"></audio>\n  }\n  }\n\n  @default {\n  <div class=\"cell-default-display\">\n    @if (drillable()) {\n      <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{value()}}</span>\n    } @else {\n      {{value()}}\n    }\n  </div>\n  }\n  }\n\n</div>\n\n<ng-template #prioritySelectMenu>\n  <div class=\"dropdown-menu\" cdkMenu [style.min-width.px]=\"fieldSize()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" [(ngModel)]=\"optionSearchText\">\n      </mat-form-field>\n\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox\">\n        <li [cdkOption]=\"''\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option notext-overflow cell-priority-content\">\n          <div [innerHTML]=\"sanitize.bypassSecurityTrustHtml(option.icon)\"></div>\n          <div>{{option.label}}</div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template cdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"singleSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_single_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_single_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" (click)=\"$event.stopPropagation()\" [(ngModel)]=\"optionSearchText\">\n      </mat-form-field>\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox\">\n        <li [cdkOption]=\"'None'\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        <li [cdkOption]=\"'option 1'\" class=\"listbox-option notext-overflow\">\n          option 1\n        </li>\n        <li [cdkOption]=\"'option 2'\" class=\"listbox-option notext-overflow\">\n          option 2\n        </li>\n        <li [cdkOption]=\"'option 3'\" class=\"listbox-option notext-overflow\">\n          option 3\n        </li>\n        <li [cdkOption]=\"'option 4'\" class=\"listbox-option notext-overflow\">\n          option 4\n        </li><li [cdkOption]=\"'option 5'\" class=\"listbox-option notext-overflow\">\n          option 5\n        </li><li [cdkOption]=\"'option 6'\" class=\"listbox-option notext-overflow\">\n          option 6\n        </li><li [cdkOption]=\"'option 7'\" class=\"listbox-option notext-overflow\">\n          option 7\n        </li><li [cdkOption]=\"'option 1'\" class=\"listbox-option notext-overflow\">\n          option 1\n        </li><li [cdkOption]=\"'option 9'\" class=\"listbox-option notext-overflow\">\n          option 9\n        </li><li [cdkOption]=\"'option 10'\" class=\"listbox-option notext-overflow\">\n          option 10\n        </li><li [cdkOption]=\"'option 11'\" class=\"listbox-option notext-overflow\">\n          option 11\n        </li><li [cdkOption]=\"'option 12'\" class=\"listbox-option notext-overflow\">\n          option 12\n        </li><li [cdkOption]=\"'option 13'\" class=\"listbox-option notext-overflow\">\n          option 13\n        </li><li [cdkOption]=\"'option 14'\" class=\"listbox-option notext-overflow\">\n          option 14\n        </li><li [cdkOption]=\"'option 15'\" class=\"listbox-option notext-overflow\">\n          option 15\n        </li><li [cdkOption]=\"'option 16'\" class=\"listbox-option notext-overflow\">\n          option 16\n        </li><li [cdkOption]=\"'option 17'\" class=\"listbox-option notext-overflow\">\n          option 17\n        </li><li [cdkOption]=\"'option 18'\" class=\"listbox-option notext-overflow\">\n          option 18\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option notext-overflow\">\n          {{option.label}}\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template \ncdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"multiSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_multi_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_multi_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n          <div class=\"listbox-container\">\n        <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n          <input matInput type=\"search\" placeholder=\"Search...\" [ngModel]=\"optionSearchText()\"\n           (ngModelChange)=\"optionSearchText.set($event)\" (click)=\"$event.stopPropagation()\">\n        </mat-form-field>\n        \n        <!-- Select All Checkbox -->\n        <div class=\"select-all-container\" (click)=\"$event.stopPropagation()\">\n          <mat-checkbox \n            [checked]=\"isAllSelected()\" \n            [indeterminate]=\"isIndeterminate()\"\n            (change)=\"toggleSelectAll($event.checked)\">\n            <span class=\"select-all-text\">Select All</span>\n          </mat-checkbox>\n        </div>\n        \n        <ul cdkListboxMultiple=\"true\" cdkListboxUseActiveDescendant cdkListbox [ngModel]=\"currentValue()\"\n          (ngModelChange)=\"selectedMultiSelect($event)\" aria-labelledby=\"listbox-labssel\" class=\"listbox\" (click)=\"$event.stopPropagation()\">\n        <li [cdkOption]=\"'None'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('None')\" (click)=\"$event.stopPropagation();appendMultiSelect('None')\"></mat-checkbox>\n            <span class=\"option-text\">None</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 1'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 1')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 1')\"></mat-checkbox>\n            <span class=\"option-text\">option 1</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 2'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 2')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 2')\"></mat-checkbox>\n            <span class=\"option-text\">option 2</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 3'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 3')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 3')\"></mat-checkbox>\n            <span class=\"option-text\">option 3</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 4'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 4')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 4')\"></mat-checkbox>\n            <span class=\"option-text\">option 4</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 5'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 5')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 5')\"></mat-checkbox>\n            <span class=\"option-text\">option 5</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 6'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 6')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 6')\"></mat-checkbox>\n            <span class=\"option-text\">option 6</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 7'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 7')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 7')\"></mat-checkbox>\n            <span class=\"option-text\">option 7</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 8'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 8')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 8')\"></mat-checkbox>\n            <span class=\"option-text\">option 8</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 9'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 9')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 9')\"></mat-checkbox>\n            <span class=\"option-text\">option 9</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 10'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 10')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 10')\"></mat-checkbox>\n            <span class=\"option-text\">option 10</span>\n          </div>\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected(option.value)\" (click)=\"$event.stopPropagation();appendMultiSelect(option.value)\"></mat-checkbox>\n            <span class=\"option-text\">{{option.label}}</span>\n          </div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template cdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"peopleTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('people')\"\n(detach)=\"isOpen = showOverlayMenu('people')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" [ngModel]=\"optionSearchText()\" (click)=\"$event.stopPropagation()\"\n          (ngModelChange)=\"optionSearchText.set($event)\">\n      </mat-form-field>\n      <ul cdkListboxMultiple=\"true\" cdkListboxUseActiveDescendant cdkListbox [ngModel]=\"currentValue()\"\n        (ngModelChange)=\"selectedMultiSelect($event)\" aria-labelledby=\"listbox-labssel\" class=\"listbox\">\n        <li [cdkOption]=\"'person0@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person0@domain.com') }}</div>\n            <span class=\"option-text\">person0&#64;domain.com</span>\n            @if (isOptionSelected('person0@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person1@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person1@domain.com') }}</div>\n            <span class=\"option-text\">person1&#64;domain.com</span>\n            @if (isOptionSelected('person1@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person2@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person2@domain.com') }}</div>\n            <span class=\"option-text\">person2&#64;domain.com</span>\n            @if (isOptionSelected('person2@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person3@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person3@domain.com') }}</div>\n            <span class=\"option-text\">person3&#64;domain.com</span>\n            @if (isOptionSelected('person3@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person4@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person4@domain.com') }}</div>\n            <span class=\"option-text\">person4&#64;domain.com</span>\n            @if (isOptionSelected('person4@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        <li [cdkOption]=\"'person5@domain.com'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials('person5@domain.com') }}</div>\n            <span class=\"option-text\">person5&#64;domain.com</span>\n            @if (isOptionSelected('person5@domain.com')) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"multi-listbox-option notext-overflow listbox-option_people\">\n          <div class=\"option-content\">\n            <div class=\"option-avatar\">{{ getInitials(option.value) }}</div>\n            <span class=\"option-text\">{{option.label}}</span>\n            @if (isOptionSelected(option.value)) {\n              <span class=\"checkmark\">\u2713</span>\n            }\n          </div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #statusSelectMenu>\n  <div class=\"dropdown-menu status-dropdown-menu\" cdkMenu [style.min-width.px]=\"fieldSize()\"\n    (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" [(ngModel)]=\"optionSearchText\">\n      </mat-form-field>\n\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox status-listbox\">\n        <li [cdkOption]=\"''\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        @for (option of getStatusOptions(); track option.value) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option status-option\"\n          [style.background-color]=\"getStatusColor(option.value).background\"\n          [style.border-color]=\"getStatusColor(option.value).border\" [style.color]=\"getStatusColor(option.value).text\">\n          @if(option.color) {\n          <span class=\"status-color-indicator\" [style.background-color]=\"option.color\"></span>\n          }\n          {{option.label}}\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #tagSelectMenu>\n  <div class=\"dropdown-menu tag-dropdown-menu\" [style.min-width.px]=\"fieldSize()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search or add tag...\" [ngModel]=\"optionSearchText()\"\n          (ngModelChange)=\"optionSearchText.set($event)\" (keyup.enter)=\"addNewTag(optionSearchText())\"\n          [style.min-width.px]=\"fieldSize()\">\n      </mat-form-field>\n\n      <ul cdkListboxMultiple=\"true\" cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedMultiSelect($event)\"\n        class=\"listbox tag-listbox\" [style.min-width.px]=\"fieldSize()\">\n        <!-- Predefined tags -->\n        @for (option of getTagOptions(); track option.value) {\n        <li [cdkOption]=\"option.value\" class=\"listbox-option tag-option\">\n          {{option.label}}\n        </li>\n        }\n\n        <!-- New tag input -->\n\n\n\n      </ul>\n\n    </div>\n  </div>\n</ng-template>\n\n<!-- Attachment Menu - Positioned relative to the cell -->\n<ng-template \ncdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"attachmentTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('attachment')\"\n(detach)=\"isOpen = showOverlayMenu('attachment')\">\n  <div class=\"attachment-menu-overlay\" [style.width.px]=\"currentColumnWidth()\" [style.min-width.px]=\"300\">\n    <div class=\"attachment-container\">\n    <!-- Header Section -->\n    <div class=\"attachment-header\">\n      <span class=\"attachment-title\">Add or Drag files</span>\n      <button mat-flat-button \n              (click)=\"fileInput.click()\" \n              class=\"attachment-upload-btn\">\n        Upload\n      </button>\n    </div>\n    \n    <!-- Drop zone -->\n    <div class=\"attachment-drop-zone\" \n         (drop)=\"onFileDrop($event)\" \n         (dragover)=\"onDragOver($event)\" \n         (dragleave)=\"onDragLeave($event)\"\n         (paste)=\"onPaste($event)\"\n         (click)=\"fileInput.click()\"\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 #fileInput \n           type=\"file\" \n           multiple \n           (change)=\"fileInputChange($event)\" \n           style=\"display: none;\">\n    \n    <!-- File list -->\n    <div class=\"attachment-file-list\" *ngIf=\"currentValue()?.length > 0\">\n      <div class=\"attachment-file-item\" *ngFor=\"let file of currentValue(); trackBy: trackByFile\">\n        <div class=\"file-info\">\n          <span class=\"file-icon\">\uD83D\uDCC4</span>\n          <span class=\"file-name\">{{ file?.split('_')?.[2] || file }}</span>\n        </div>\n        <div class=\"file-actions\">\n          <button class=\"action-btn\" (click)=\"viewFile(file)\" title=\"View\">\uD83D\uDC41\uFE0F</button>\n          <button class=\"action-btn\" (click)=\"deleteFile(file)\" title=\"Delete\">\uD83D\uDDD1\uFE0F</button>\n        </div>\n              </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [":host{display:block;height:100%;width:100%;position:relative;overflow:hidden!important}.container{height:calc(100% - 2px);width:calc(100% - 2px);position:relative!important;overflow:hidden!important;max-width:100%!important;box-sizing:border-box!important}.container .cell-display-text{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.inputRef{height:inherit;width:inherit;border:none}.inputRef:focus{outline:none}.cell-checkbox{text-align:center}.cell-form-field{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-outline,.cell-form-field .mat-mdc-form-field-subscript-wrapper,.cell-form-field .mat-mdc-form-field-text-suffix{display:none!important}.cell-form-field .mat-mdc-form-field-wrapper,.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{width:100%!important;height:100%!important;padding:0!important;margin:0!important;min-height:auto!important;border-top:none!important}.cell-form-field input[matInput]{width:100%!important;height:100%!important;padding:2px!important;margin:0!important;border:none!important;outline:none!important;background:transparent!important;font-size:14px!important;line-height:normal!important;box-sizing:border-box!important;max-width:none!important;min-width:0!important;flex:none!important}.dropdown-menu{width:100%}.attachment-menu,.dropdown-menu,.dropdown-menu.attachment-menu,[cdkMenu].attachment-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border-radius:8px!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important}.attachment-menu.cdk-overlay-pane,.dropdown-menu.cdk-overlay-pane,.dropdown-menu.attachment-menu.cdk-overlay-pane,[cdkMenu].attachment-menu.cdk-overlay-pane{background:var(--grid-surface)!important;background-color:var(--grid-surface)!important}.attachment-menu .attachment-container,.dropdown-menu .attachment-container,.dropdown-menu.attachment-menu .attachment-container,[cdkMenu].attachment-menu .attachment-container{padding:4px;background:var(--grid-surface, #fef7ff);border-radius:8px}.attachment-menu .attachment-header,.dropdown-menu .attachment-header,.dropdown-menu.attachment-menu .attachment-header,[cdkMenu].attachment-menu .attachment-header{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:24px!important;padding:0!important}.attachment-menu .attachment-header .attachment-title,.dropdown-menu .attachment-header .attachment-title,.dropdown-menu.attachment-menu .attachment-header .attachment-title,[cdkMenu].attachment-menu .attachment-header .attachment-title{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:16px!important;font-weight:500!important;color:var(--grid-on-surface, #1d1b20)!important;margin:0!important}.attachment-menu .attachment-header .attachment-upload-btn,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button,.dropdown-menu .attachment-header .attachment-upload-btn,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button{background:var(--grid-primary, #6750a4)!important;background-color:var(--grid-primary, #6750a4)!important;color:var(--grid-on-primary, #ffffff)!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-weight:500!important;padding:8px 20px!important;border-radius:6px!important;border:none!important;cursor:pointer!important;font-size:14px!important;letter-spacing:.5px!important;box-shadow:var(--grid-elevation-1, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15))!important;transition:background-color .2s ease!important}.attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label,.dropdown-menu .attachment-header .attachment-upload-btn .mdc-button__label,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button .mdc-button__label,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button .mdc-button__label{color:var(--grid-on-primary, #ffffff)!important}.attachment-menu .attachment-header .attachment-upload-btn:hover,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover,.dropdown-menu .attachment-header .attachment-upload-btn:hover,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn:hover,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn:hover,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:hover,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:hover{opacity:.9!important}.attachment-menu .attachment-header .attachment-upload-btn:before,.attachment-menu .attachment-header .attachment-upload-btn:after,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after,.dropdown-menu .attachment-header .attachment-upload-btn:before,.dropdown-menu .attachment-header .attachment-upload-btn:after,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,.dropdown-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn:before,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn:after,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,.dropdown-menu.attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn:before,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn:after,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:before,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-raised-button:after,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:before,[cdkMenu].attachment-menu .attachment-header .attachment-upload-btn.mat-mdc-button:after{display:none!important}.attachment-menu .attachment-drop-zone,.dropdown-menu .attachment-drop-zone,.dropdown-menu.attachment-menu .attachment-drop-zone,[cdkMenu].attachment-menu .attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0)!important;border-radius:8px!important;padding:10px!important;text-align:center!important;cursor:pointer!important;transition:all .3s ease!important;background:var(--grid-surface-variant, #e7e0ec)!important;margin:16px 0!important}.attachment-menu .attachment-drop-zone:hover,.dropdown-menu .attachment-drop-zone:hover,.dropdown-menu.attachment-menu .attachment-drop-zone:hover,[cdkMenu].attachment-menu .attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important}.attachment-menu .attachment-drop-zone.dragging,.dropdown-menu .attachment-drop-zone.dragging,.dropdown-menu.attachment-menu .attachment-drop-zone.dragging,[cdkMenu].attachment-menu .attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important;transform:scale(1.01)!important}.attachment-menu .attachment-drop-zone .attachment-drop-content,.dropdown-menu .attachment-drop-zone .attachment-drop-content,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-content,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-content{display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important}.attachment-menu .attachment-drop-zone .attachment-drop-icon,.dropdown-menu .attachment-drop-zone .attachment-drop-icon,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-icon,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-icon{font-size:48px!important;color:var(--grid-primary, #6750a4)!important;font-weight:300!important;line-height:1!important}.attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,.dropdown-menu .attachment-drop-zone .attachment-drop-text .primary-text,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;font-weight:400!important;margin:0!important}.attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.dropdown-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.dropdown-menu.attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,[cdkMenu].attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:12px!important;color:var(--grid-on-surface-variant, #49454f)!important;margin-top:4px!important;display:block!important}.attachment-menu .attachment-file-list,.dropdown-menu .attachment-file-list,.dropdown-menu.attachment-menu .attachment-file-list,[cdkMenu].attachment-menu .attachment-file-list{display:block!important;margin-top:16px!important;border-top:1px solid var(--grid-outline-variant, #cac4d0)!important;padding-top:16px!important}.attachment-menu .attachment-file-list .attachment-file-item,.dropdown-menu .attachment-file-list .attachment-file-item,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 0!important;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)!important}.attachment-menu .attachment-file-list .attachment-file-item:last-child,.dropdown-menu .attachment-file-list .attachment-file-item:last-child,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item:last-child,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item:last-child{border-bottom:none!important}.attachment-menu .attachment-file-list .attachment-file-item .file-info,.dropdown-menu .attachment-file-list .attachment-file-item .file-info,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-info,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-info{display:flex!important;align-items:center!important;gap:8px!important;flex:1!important}.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.dropdown-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon{font-size:16px!important;color:var(--grid-on-surface-variant, #49454f)!important}.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,.dropdown-menu .attachment-file-list .attachment-file-item .file-info .file-name,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;word-break:break-word!important}.attachment-menu .attachment-file-list .attachment-file-item .file-actions,.dropdown-menu .attachment-file-list .attachment-file-item .file-actions,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-actions,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-actions{display:flex!important;gap:4px!important}.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.dropdown-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn{width:24px!important;height:24px!important;border:none!important;background:transparent!important;cursor:pointer!important;border-radius:4px!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;transition:background-color .2s ease!important}.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.dropdown-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.dropdown-menu.attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,[cdkMenu].attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu,.cdk-overlay-container .attachment-menu,.cdk-overlay-pane .attachment-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important;border-radius:8px!important;font-family:var(--grid-font-family, \"Poppins\")!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-container,.cdk-overlay-container .attachment-menu .attachment-container,.cdk-overlay-pane .attachment-menu .attachment-container{padding:4px;background:var(--grid-surface, #fef7ff)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header,.cdk-overlay-container .attachment-menu .attachment-header,.cdk-overlay-pane .attachment-menu .attachment-header{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:24px!important;padding:0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-title,.cdk-overlay-container .attachment-menu .attachment-header .attachment-title,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-title{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:16px!important;font-weight:500!important;color:var(--grid-on-surface, #1d1b20)!important;margin:0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn,.cdk-overlay-container .attachment-menu .attachment-header .attachment-upload-btn,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn{background:var(--grid-primary, #6750a4)!important;background-color:var(--grid-primary, #6750a4)!important;color:var(--grid-on-primary, #ffffff)!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-weight:500!important;padding:8px 20px!important;border-radius:6px!important;border:none!important;cursor:pointer!important;font-size:14px!important;letter-spacing:.5px!important;box-shadow:var(--grid-elevation-1, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15))!important;transition:background-color .2s ease!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn:hover,.cdk-overlay-container .attachment-menu .attachment-header .attachment-upload-btn:hover,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn:hover{opacity:.9!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.cdk-overlay-container .attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label,.cdk-overlay-pane .attachment-menu .attachment-header .attachment-upload-btn .mdc-button__label{color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone,.cdk-overlay-container .attachment-menu .attachment-drop-zone,.cdk-overlay-pane .attachment-menu .attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0)!important;border-radius:8px!important;padding:40px 20px!important;text-align:center!important;cursor:pointer!important;transition:all .3s ease!important;background:var(--grid-surface-variant, #e7e0ec)!important;margin:16px 0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone:hover,.cdk-overlay-container .attachment-menu .attachment-drop-zone:hover,.cdk-overlay-pane .attachment-menu .attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone.dragging,.cdk-overlay-container .attachment-menu .attachment-drop-zone.dragging,.cdk-overlay-pane .attachment-menu .attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4)!important;background:var(--grid-surface-container, #f3edf7)!important;transform:scale(1.01)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-content,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-content,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-content{display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-icon,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-icon,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-icon{font-size:48px!important;color:var(--grid-primary, #6750a4)!important;font-weight:300!important;line-height:1!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;font-weight:400!important;margin:0!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.cdk-overlay-container .attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text,.cdk-overlay-pane .attachment-menu .attachment-drop-zone .attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:12px!important;color:var(--grid-on-surface-variant, #49454f)!important;margin-top:4px!important;display:block!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list,.cdk-overlay-container .attachment-menu .attachment-file-list,.cdk-overlay-pane .attachment-menu .attachment-file-list{display:block!important;margin-top:16px!important;border-top:1px solid var(--grid-outline-variant, #cac4d0)!important;padding-top:16px!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 0!important;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item:last-child,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item:last-child,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item:last-child{border-bottom:none!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-info,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info{display:flex!important;align-items:center!important;gap:8px!important;flex:1!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-icon{font-size:16px!important;color:var(--grid-on-surface-variant, #49454f)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-info .file-name{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;word-break:break-word!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-actions,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions{display:flex!important;gap:4px!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn{width:24px!important;height:24px!important;border:none!important;background:transparent!important;cursor:pointer!important;border-radius:4px!important;font-size:14px!important;color:var(--grid-on-surface-variant, #49454f)!important;transition:background-color .2s ease!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.cdk-overlay-container .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover,.cdk-overlay-pane .attachment-menu .attachment-file-list .attachment-file-item .file-actions .action-btn:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .attachment-menu,.cdk-overlay-container .attachment-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important}.attachment-cell-wrapper{position:relative;display:block;width:100%;height:100%;text-align:center;overflow:visible}.attachment-menu-overlay{position:absolute;z-index:1000;background:var(--grid-surface, #fef7ff);border:1px solid var(--grid-outline-variant, #cac4d0);box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15));border-radius:8px;font-family:var(--grid-font-family, \"Poppins\");color:var(--grid-on-surface, #1d1b20);overflow:visible;z-index:9999}.attachment-menu-overlay .attachment-container{padding:16px;background:var(--grid-surface, #fef7ff)}.attachment-menu-overlay .attachment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding:0}.attachment-menu-overlay .attachment-header .attachment-title{font-family:var(--grid-font-family, \"Poppins\");font-size:16px;font-weight:500;color:var(--grid-on-surface, #1d1b20);margin:0}.attachment-menu-overlay .attachment-header .attachment-upload-btn{background:var(--grid-primary, #6750a4);background-color:var(--grid-primary, #6750a4);color:var(--grid-on-primary, #ffffff);font-family:var(--grid-font-family, \"Poppins\");font-weight:500;padding:8px 20px;border-radius:6px;border:none;cursor:pointer;font-size:14px;letter-spacing:.5px;box-shadow:var(--grid-elevation-1, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15));transition:background-color .2s ease}.attachment-menu-overlay .attachment-header .attachment-upload-btn:hover{opacity:.9}.attachment-menu-overlay .attachment-header .attachment-upload-btn .mdc-button__label{color:var(--grid-on-primary, #ffffff)}.attachment-menu-overlay .attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0);border-radius:8px;padding:10px;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--grid-surface-variant, #e7e0ec);margin:16px 0}.attachment-menu-overlay .attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7)}.attachment-menu-overlay .attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7);transform:scale(1.01)}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-content{display:flex;flex-direction:column;align-items:center;gap:12px}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-icon{font-size:48px;color:var(--grid-primary, #6750a4);font-weight:300;line-height:1}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:14px;color:var(--grid-on-surface-variant, #49454f);font-weight:400;margin:0}.attachment-menu-overlay .attachment-drop-zone .attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-top:4px;display:block}.attachment-menu-overlay .attachment-file-list{display:block;margin-top:16px;border-top:1px solid var(--grid-outline-variant, #cac4d0);padding-top:16px}.attachment-menu-overlay .attachment-file-list .attachment-file-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)}.attachment-menu-overlay .attachment-file-list .attachment-file-item:last-child{border-bottom:none}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-info{display:flex;align-items:center;gap:8px;flex:1}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-info .file-icon{font-size:16px;color:var(--grid-on-surface-variant, #49454f)}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-info .file-name{font-family:var(--grid-font-family, \"Poppins\");font-size:14px;color:var(--grid-on-surface, #1d1b20);word-break:break-word}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-actions{display:flex;gap:4px}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-actions .action-btn{width:24px;height:24px;border:none;background:transparent;cursor:pointer;border-radius:4px;font-size:14px;color:var(--grid-on-surface-variant, #49454f);transition:background-color .2s ease}.attachment-menu-overlay .attachment-file-list .attachment-file-item .file-actions .action-btn:hover{background:var(--grid-surface-container, #f3edf7)}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu,.cdk-overlay-container .dropdown-menu,.cdk-overlay-pane .dropdown-menu{background:var(--grid-surface, #fef7ff)!important;background-color:var(--grid-surface, #fef7ff)!important;border:1px solid var(--grid-outline-variant, #cac4d0)!important;box-shadow:var(--grid-elevation-2, 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15))!important;border-radius:8px!important;font-family:var(--grid-font-family, \"Poppins\")!important;color:var(--grid-on-surface, #1d1b20)!important;overflow:hidden!important;box-sizing:border-box!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-container,.cdk-overlay-container .dropdown-menu .listbox-container,.cdk-overlay-pane .dropdown-menu .listbox-container{padding:8px!important;background:var(--grid-surface, #fef7ff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field,.cdk-overlay-container .dropdown-menu .search-form-field,.cdk-overlay-pane .dropdown-menu .search-form-field{width:100%!important;margin-bottom:8px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-form-field,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field{width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-text-field-wrapper,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-text-field-wrapper,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-text-field-wrapper{background:var(--grid-surface, #fffbfe)!important;border-radius:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-focus-overlay,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-form-field-focus-overlay,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-focus-overlay{background:var(--grid-surface, #fffbfe)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-subscript-wrapper,.cdk-overlay-container .dropdown-menu .search-form-field .mat-mdc-form-field-subscript-wrapper,.cdk-overlay-pane .dropdown-menu .search-form-field .mat-mdc-form-field-subscript-wrapper{display:none!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .search-form-field input,.cdk-overlay-container .dropdown-menu .search-form-field input,.cdk-overlay-pane .dropdown-menu .search-form-field input{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container,.cdk-overlay-container .dropdown-menu .select-all-container,.cdk-overlay-pane .dropdown-menu .select-all-container{padding:8px 12px!important;border-bottom:1px solid var(--grid-outline-variant, #cac4d0)!important;margin-bottom:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container .select-all-text,.cdk-overlay-container .dropdown-menu .select-all-container .select-all-text,.cdk-overlay-pane .dropdown-menu .select-all-container .select-all-text{font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;font-weight:500!important;color:var(--grid-on-surface, #1d1b20)!important;margin-left:8px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-container .dropdown-menu .select-all-container mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark{color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--grid-primary, #6750a4)!important;border-color:var(--grid-primary, #6750a4)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-indeterminate .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-indeterminate .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .select-all-container mat-checkbox.mat-mdc-checkbox-indeterminate .mdc-checkbox__background{background-color:var(--grid-primary, #6750a4)!important;border-color:var(--grid-primary, #6750a4)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox,.cdk-overlay-container .dropdown-menu .listbox,.cdk-overlay-pane .dropdown-menu .listbox{list-style:none!important;margin:0!important;padding:0!important;max-height:200px!important;overflow-y:auto!important;background:var(--grid-surface, #fef7ff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar{width:8px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-track,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar-track,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-track{background:var(--grid-surface-variant, #e7e0ec)!important;border-radius:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar-thumb,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb{background:var(--grid-primary, #6750a4)!important;border-radius:4px!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb:hover,.cdk-overlay-container .dropdown-menu .listbox::-webkit-scrollbar-thumb:hover,.cdk-overlay-pane .dropdown-menu .listbox::-webkit-scrollbar-thumb:hover{background:var(--grid-primary, #6750a4)!important;opacity:.8!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option,.cdk-overlay-container .dropdown-menu .multi-listbox-option,.cdk-overlay-pane .dropdown-menu .multi-listbox-option{padding:4px 8px!important;margin:2px 0!important;border-radius:4px!important;cursor:pointer!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;transition:background-color .2s ease!important;border:none!important;text-align:left!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option:hover,.cdk-overlay-container .dropdown-menu .multi-listbox-option:hover,.cdk-overlay-pane .dropdown-menu .multi-listbox-option:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option.notext-overflow,.cdk-overlay-container .dropdown-menu .multi-listbox-option.notext-overflow,.cdk-overlay-pane .dropdown-menu .multi-listbox-option.notext-overflow{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content .option-text,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content .option-text,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content .option-text{flex:1!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:inherit!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox{flex-shrink:0!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__background{border-color:var(--grid-outline, #79757f)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox .mdc-checkbox .mdc-checkbox__checkmark{color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-container .dropdown-menu .multi-listbox-option .option-content mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,.cdk-overlay-pane .dropdown-menu .multi-listbox-option .option-content mat-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--grid-primary, #6750a4)!important;border-color:var(--grid-primary, #6750a4)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option,.cdk-overlay-container .dropdown-menu .listbox-option,.cdk-overlay-pane .dropdown-menu .listbox-option{padding:4px 8px!important;margin:2px 0!important;border-radius:4px!important;cursor:pointer!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;transition:background-color .2s ease!important;border:none!important;text-align:left!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option:hover,.cdk-overlay-container .dropdown-menu .listbox-option:hover,.cdk-overlay-pane .dropdown-menu .listbox-option:hover{background:var(--grid-surface-container, #f3edf7)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-active,.cdk-overlay-container .dropdown-menu .listbox-option.cdk-option-active,.cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-active,.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-selected,.cdk-overlay-container .dropdown-menu .listbox-option.cdk-option-selected,.cdk-overlay-pane .dropdown-menu .listbox-option.cdk-option-selected{background:var(--grid-primary, #6750a4)!important;color:var(--grid-on-primary, #ffffff)!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option.notext-overflow,.cdk-overlay-container .dropdown-menu .listbox-option.notext-overflow,.cdk-overlay-pane .dropdown-menu .listbox-option.notext-overflow{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option .option-content,.cdk-overlay-container .dropdown-menu .listbox-option .option-content,.cdk-overlay-pane .dropdown-menu .listbox-option .option-content{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important}.cdk-overlay-container .cdk-overlay-pane .dropdown-menu .listbox-option .option-content .option-text,.cdk-overlay-container .dropdown-menu .listbox-option .option-content .option-text,.cdk-overlay-pane .dropdown-menu .listbox-option .option-content .option-text{flex:1!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:14px!important;color:inherit!important}.cell-display-text-editable{cursor:pointer!important}.cell-display-text{width:100%!important;height:100%!important;min-height:20px!important;display:block!important;padding:4px 8px!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:var(--grid-font-size-body, 12px)!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;border:none!important;outline:none!important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;box-sizing:border-box!important;transition:background-color .2s ease!important;line-height:1.4!important}.cell-display-text,.cell-display-text>*{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.cell-display-text:empty:before{content:\"Click to select\"!important;color:var(--grid-on-surface-variant, #49454f)!important;font-style:italic!important}.cell-display-number{text-align:var(--grid-number-text-align, right)}.aggregation .cell-display-number{text-align:var(--grid-aggregation-text-align, right)}.assignee-avatars{display:flex;align-items:center;padding:4px 8px;min-height:20px}.avatar-circle{width:28px;height:28px;border-radius:50%;background-color:var(--grid-primary, #6750a4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;border:2px solid var(--grid-surface, #fef7ff);margin-left:-8px;position:relative;z-index:1}.avatar-circle:first-child{margin-left:0}.avatar-circle.count-circle{background-color:var(--grid-surface-variant, #e7e0ec);color:var(--grid-on-surface-variant, #49454f);font-size:11px;font-weight:500}.no-assignees{color:var(--grid-on-surface-variant, #49454f);font-style:italic;font-size:12px}.option-content{display:flex;align-items:center;gap:8px;width:100%}.option-avatar{width:24px;height:24px;border-radius:50%;background-color:var(--grid-primary, #6750a4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0}.option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.checkmark{color:var(--grid-primary, #6750a4);font-weight:700;font-size:14px;flex-shrink:0}.drillable-value{color:var(--grid-primary, #6750a4);text-decoration:underline;text-decoration-color:var(--grid-primary, #6750a4);text-decoration-thickness:1px;text-underline-offset:2px;transition:all .2s ease}.drillable-link{cursor:pointer;padding:4px}.cell-audio{width:100%;height:30px;display:block}.cell-audio::-webkit-media-controls-mute-button,.cell-audio::-webkit-media-controls-volume-slider,.cell-audio::-webkit-media-controls-volume-control-container,.cell-audio::-webkit-media-controls-current-time-display,.cell-audio::-webkit-media-controls-time-remaining-display{display:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { attachmentTrigger: [{
                 type: ViewChild,
                 args: ['attachmentTrigger']