@memberjunction/ng-conversations 2.107.0 → 2.109.0

package/dist/lib/components/collection/artifact-collection-picker-modal.component.js

@@ -0,0 +1,725 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RunView, Metadata } from '@memberjunction/core';
+import { DialogModule } from '@progress/kendo-angular-dialog';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/toast.service";
+import * as i2 from "../../services/collection-permission.service";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/forms";
+import * as i5 from "@progress/kendo-angular-dialog";
+import * as i6 from "@progress/kendo-angular-buttons";
+const _forTrack0 = ($index, $item) => $item.collection.ID;
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_2_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "i", 20);
+    i0.ɵɵelementStart(1, "button", 18);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_2_For_5_Template_button_click_1_listener() { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.navigateToCollection(item_r5.collection)); });
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r5 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", item_r5.collection.Name, " ");
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 4)(1, "button", 18);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.navigateToRoot()); });
+    i0.ɵɵelement(2, "i", 19);
+    i0.ɵɵtext(3, " Root ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(4, ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_2_For_5_Template, 3, 1, null, null, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r1.navigationPath);
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 23);
+    i0.ɵɵelementStart(1, "p");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("No collections found matching \"", ctx_r1.searchQuery, "\"");
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 24);
+    i0.ɵɵelementStart(1, "p");
+    i0.ɵɵtext(2, "No sub-collections available");
+    i0.ɵɵelementEnd();
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 25);
+    i0.ɵɵelementStart(1, "p");
+    i0.ɵɵtext(2, "No collections available");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 26);
+    i0.ɵɵtext(4, "Create a new collection to get started");
+    i0.ɵɵelementEnd();
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵtemplate(1, ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_1_Conditional_1_Template, 3, 1)(2, ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_1_Conditional_2_Template, 3, 0)(3, ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_1_Conditional_3_Template, 5, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.searchQuery ? 1 : ctx_r1.currentParentId ? 2 : 3);
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_2_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 33);
+    i0.ɵɵelement(1, "i", 35);
+    i0.ɵɵtext(2, " Already added ");
+    i0.ɵɵelementEnd();
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_2_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 36);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_2_For_1_Conditional_7_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r8); const node_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.drillIntoCollection(node_r7.collection)); });
+    i0.ɵɵelement(1, "i", 37);
+    i0.ɵɵelementEnd();
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_2_For_1_Template_div_click_0_listener() { const node_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleSelection(node_r7)); });
+    i0.ɵɵelementStart(1, "div", 29)(2, "input", 30);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_2_For_1_Template_input_click_2_listener($event) { const node_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.toggleSelection(node_r7)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(3, "i", 31);
+    i0.ɵɵelementStart(4, "span", 32);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_2_For_1_Conditional_6_Template, 3, 0, "span", 33)(7, ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_2_For_1_Conditional_7_Template, 2, 0, "button", 34);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const node_r7 = ctx.$implicit;
+    i0.ɵɵclassProp("already-added", node_r7.alreadyContainsArtifact);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("checked", node_r7.selected)("disabled", node_r7.alreadyContainsArtifact);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("color", node_r7.collection.Color || "#0076B6");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(node_r7.collection.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(node_r7.alreadyContainsArtifact ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(node_r7.hasChildren ? 7 : -1);
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_2_For_1_Template, 8, 9, "div", 27, _forTrack0);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r1.displayedCollections);
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵtemplate(1, ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_1_Template, 4, 1, "div", 22)(2, ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Conditional_2_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.displayedCollections.length === 0 ? 1 : 2);
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵelement(1, "i", 38);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Loading collections...");
+    i0.ɵɵelementEnd()();
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelement(1, "i", 39);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.errorMessage);
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "i", 35);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r1.selectedCollections.length, " collection(s) selected");
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 40);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.showCreateForm = true); });
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵtext(2, " Create New Collection ");
+    i0.ɵɵelementEnd();
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_15_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 38);
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_15_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Create ");
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "input", 42, 0);
+    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_15_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.newCollectionName, $event) || (ctx_r1.newCollectionName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.enter", function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_15_Template_input_keydown_enter_1_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createCollection()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 43)(4, "button", 44);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_15_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createCollection()); });
+    i0.ɵɵtemplate(5, ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_15_Conditional_5_Template, 1, 0, "i", 38)(6, ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_15_Conditional_6_Template, 1, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 45);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_15_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.showCreateForm = false; return i0.ɵɵresetView(ctx_r1.newCollectionName = ""); });
+    i0.ɵɵtext(8, " Cancel ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.newCollectionName);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r1.isCreatingCollection || !ctx_r1.newCollectionName.trim());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isCreatingCollection ? 5 : 6);
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 38);
+    i0.ɵɵtext(1, " Saving... ");
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 46);
+    i0.ɵɵtext(1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Save to ", ctx_r1.selectedCollections.length, " Collection(s) ");
+} }
+function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 2);
+    i0.ɵɵlistener("close", function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
+    i0.ɵɵelementStart(1, "div", 3);
+    i0.ɵɵtemplate(2, ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_2_Template, 6, 0, "div", 4);
+    i0.ɵɵelementStart(3, "div", 5);
+    i0.ɵɵelement(4, "i", 6);
+    i0.ɵɵelementStart(5, "input", 7);
+    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.searchQuery, $event) || (ctx_r1.searchQuery = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("input", function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Template_input_input_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchChange()); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(6, ArtifactCollectionPickerModalComponent_kendo_dialog_0_div_6_Template, 3, 1, "div", 8)(7, ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_7_Template, 4, 0, "div", 9)(8, ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_8_Template, 4, 1, "div", 10)(9, ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_9_Template, 4, 1, "div", 11);
+    i0.ɵɵelementStart(10, "div", 12)(11, "div", 13)(12, "span");
+    i0.ɵɵtext(13, "OR CREATE NEW");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(14, ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_14_Template, 3, 0, "button", 14)(15, ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_15_Template, 9, 3, "div", 15);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "kendo-dialog-actions")(17, "button", 16);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
+    i0.ɵɵtext(18, " Cancel ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "button", 17);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_kendo_dialog_0_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSave()); });
+    i0.ɵɵtemplate(20, ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_20_Template, 2, 0)(21, ArtifactCollectionPickerModalComponent_kendo_dialog_0_Conditional_21_Template, 2, 1);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("width", 700)("minWidth", 500);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.navigationPath.length > 0 ? 2 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.searchQuery);
+    i0.ɵɵproperty("disabled", ctx_r1.isLoading);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.isLoading && !ctx_r1.errorMessage);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isLoading ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.errorMessage ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.selectedCollections.length > 0 ? 9 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(!ctx_r1.showCreateForm ? 14 : 15);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("primary", true)("disabled", ctx_r1.selectedCollections.length === 0 || ctx_r1.isSaving);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isSaving ? 20 : 21);
+} }
+/**
+ * Modal for selecting collections to save artifacts to.
+ * Features:
+ * - Permission-aware: only shows collections where user has Edit permission
+ * - Hierarchical navigation: start with root collections, drill down as needed
+ * - Search by name
+ * - Multi-selection support
+ * - Create new collection with proper permission logic
+ */
+export class ArtifactCollectionPickerModalComponent {
+    toastService;
+    permissionService;
+    isOpen = false;
+    environmentId;
+    currentUser;
+    excludeCollectionIds = []; // Collections to exclude (e.g., already contains artifact)
+    saved = new EventEmitter(); // Emits selected collection IDs
+    cancelled = new EventEmitter();
+    allCollections = [];
+    displayedCollections = [];
+    selectedCollections = [];
+    userPermissions = new Map();
+    navigationPath = []; // Breadcrumb trail
+    currentParentId = null;
+    currentParentCollection = undefined;
+    searchQuery = '';
+    isLoading = false;
+    isSaving = false;
+    errorMessage = '';
+    // Create collection form state
+    showCreateForm = false;
+    newCollectionName = '';
+    isCreatingCollection = false;
+    constructor(toastService, permissionService) {
+        this.toastService = toastService;
+        this.permissionService = permissionService;
+    }
+    async ngOnInit() {
+        if (this.isOpen) {
+            await this.loadCollections();
+        }
+    }
+    async ngOnChanges(changes) {
+        if (changes['isOpen'] && this.isOpen) {
+            this.reset();
+            await this.loadCollections();
+        }
+    }
+    reset() {
+        this.allCollections = [];
+        this.displayedCollections = [];
+        this.selectedCollections = [];
+        this.userPermissions.clear();
+        this.navigationPath = [];
+        this.currentParentId = null;
+        this.currentParentCollection = undefined;
+        this.searchQuery = '';
+        this.errorMessage = '';
+    }
+    async loadCollections() {
+        try {
+            this.isLoading = true;
+            this.errorMessage = '';
+            // Load all collections in environment
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'MJ: Collections',
+                ExtraFilter: `EnvironmentID='${this.environmentId}'`,
+                OrderBy: 'Name ASC',
+                ResultType: 'entity_object'
+            }, this.currentUser);
+            if (!result.Success) {
+                this.errorMessage = result.ErrorMessage || 'Failed to load collections';
+                return;
+            }
+            this.allCollections = result.Results || [];
+            // Load user permissions for all collections
+            await this.loadUserPermissions();
+            // Filter to collections with Edit permission
+            // Include collections that already contain the artifact (will be shown as disabled)
+            const editableCollections = this.allCollections.filter(c => {
+                return this.canEdit(c);
+            });
+            // Show root collections initially
+            this.displayRootCollections(editableCollections);
+        }
+        catch (error) {
+            console.error('Error loading collections:', error);
+            this.errorMessage = 'An error occurred while loading collections';
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async loadUserPermissions() {
+        // Load permissions for collections not owned by current user
+        const nonOwnedCollections = this.allCollections.filter(c => c.OwnerID && c.OwnerID !== this.currentUser.ID);
+        if (nonOwnedCollections.length === 0) {
+            return;
+        }
+        const collectionIds = nonOwnedCollections.map(c => c.ID);
+        const permissions = await this.permissionService.checkBulkPermissions(collectionIds, this.currentUser.ID, this.currentUser);
+        permissions.forEach((permission, collectionId) => {
+            this.userPermissions.set(collectionId, permission);
+        });
+    }
+    displayRootCollections(editableCollections) {
+        const rootCollections = editableCollections.filter(c => !c.ParentID);
+        this.displayedCollections = rootCollections.map(c => this.createNode(c, editableCollections));
+    }
+    displayChildCollections(parentId, editableCollections) {
+        const childCollections = editableCollections.filter(c => c.ParentID === parentId);
+        this.displayedCollections = childCollections.map(c => this.createNode(c, editableCollections));
+    }
+    createNode(collection, allEditableCollections) {
+        const hasChildren = allEditableCollections.some(c => c.ParentID === collection.ID);
+        const alreadyContainsArtifact = this.excludeCollectionIds.includes(collection.ID);
+        return {
+            collection,
+            selected: this.selectedCollections.some(sc => sc.ID === collection.ID),
+            hasChildren,
+            alreadyContainsArtifact
+        };
+    }
+    canEdit(collection) {
+        // Backwards compatibility: treat null OwnerID as owned by current user
+        if (!collection.OwnerID || collection.OwnerID === this.currentUser.ID) {
+            return true;
+        }
+        // Check permission record
+        const permission = this.userPermissions.get(collection.ID);
+        return permission?.canEdit || false;
+    }
+    toggleSelection(node) {
+        // Don't allow selection of collections that already contain the artifact
+        if (node.alreadyContainsArtifact) {
+            return;
+        }
+        const index = this.selectedCollections.findIndex(c => c.ID === node.collection.ID);
+        if (index >= 0) {
+            this.selectedCollections.splice(index, 1);
+            node.selected = false;
+        }
+        else {
+            this.selectedCollections.push(node.collection);
+            node.selected = true;
+        }
+    }
+    drillIntoCollection(collection) {
+        // Add current location to navigation path
+        const editableCollections = this.allCollections.filter(c => {
+            return this.canEdit(c);
+        });
+        const node = this.createNode(collection, editableCollections);
+        this.navigationPath.push(node);
+        this.currentParentId = collection.ID;
+        this.currentParentCollection = collection;
+        // Display child collections
+        this.displayChildCollections(collection.ID, editableCollections);
+        // Clear search when drilling down
+        this.searchQuery = '';
+    }
+    navigateToRoot() {
+        this.navigationPath = [];
+        this.currentParentId = null;
+        this.currentParentCollection = undefined;
+        const editableCollections = this.allCollections.filter(c => {
+            return this.canEdit(c);
+        });
+        this.displayRootCollections(editableCollections);
+        this.searchQuery = '';
+    }
+    navigateToCollection(collection) {
+        // Find the index of this collection in the navigation path
+        const index = this.navigationPath.findIndex(n => n.collection.ID === collection.ID);
+        if (index >= 0) {
+            // Trim navigation path to this level
+            this.navigationPath = this.navigationPath.slice(0, index + 1);
+            this.currentParentId = collection.ID;
+            this.currentParentCollection = collection;
+            const editableCollections = this.allCollections.filter(c => {
+                return this.canEdit(c);
+            });
+            this.displayChildCollections(collection.ID, editableCollections);
+            this.searchQuery = '';
+        }
+    }
+    onSearchChange() {
+        if (!this.searchQuery.trim()) {
+            // Reset to current navigation context
+            if (this.currentParentId) {
+                const editableCollections = this.allCollections.filter(c => {
+                    return this.canEdit(c);
+                });
+                this.displayChildCollections(this.currentParentId, editableCollections);
+            }
+            else {
+                const editableCollections = this.allCollections.filter(c => {
+                    return this.canEdit(c);
+                });
+                this.displayRootCollections(editableCollections);
+            }
+            return;
+        }
+        // Search across all editable collections
+        const query = this.searchQuery.toLowerCase();
+        const editableCollections = this.allCollections.filter(c => {
+            return this.canEdit(c) && c.Name.toLowerCase().includes(query);
+        });
+        this.displayedCollections = editableCollections.map(c => this.createNode(c, editableCollections));
+    }
+    async createCollection() {
+        if (!this.newCollectionName.trim()) {
+            this.toastService.warning('Please enter a collection name');
+            return;
+        }
+        try {
+            this.isCreatingCollection = true;
+            const md = new Metadata();
+            const collection = await md.GetEntityObject('MJ: Collections', this.currentUser);
+            collection.Name = this.newCollectionName.trim();
+            collection.EnvironmentID = this.environmentId;
+            // Set parent and owner based on current navigation context
+            if (this.currentParentCollection) {
+                // Creating sub-collection - inherit parent's owner
+                collection.ParentID = this.currentParentCollection.ID;
+                collection.OwnerID = this.currentParentCollection.OwnerID || this.currentUser.ID;
+            }
+            else {
+                // Creating root collection - current user becomes owner
+                collection.OwnerID = this.currentUser.ID;
+            }
+            const saved = await collection.Save();
+            if (saved) {
+                // Create owner permission or copy parent permissions
+                if (this.currentParentCollection) {
+                    // Copy permissions from parent
+                    await this.permissionService.copyParentPermissions(this.currentParentCollection.ID, collection.ID, this.currentUser);
+                }
+                else {
+                    // Create owner permission
+                    await this.permissionService.createOwnerPermission(collection.ID, this.currentUser.ID, this.currentUser);
+                }
+                this.toastService.success('Collection created successfully');
+                // Reset form
+                this.showCreateForm = false;
+                this.newCollectionName = '';
+                // Reload collections to include the new one
+                await this.loadCollections();
+                // Auto-select the newly created collection
+                this.selectedCollections.push(collection);
+            }
+            else {
+                this.toastService.error(collection.LatestResult?.Message || 'Failed to create collection');
+            }
+        }
+        catch (error) {
+            console.error('Error creating collection:', error);
+            this.toastService.error('An error occurred while creating the collection');
+        }
+        finally {
+            this.isCreatingCollection = false;
+        }
+    }
+    async onSave() {
+        if (this.selectedCollections.length === 0) {
+            this.toastService.warning('Please select at least one collection');
+            return;
+        }
+        this.isSaving = true;
+        // Emit the selected collection IDs
+        const collectionIds = this.selectedCollections.map(c => c.ID);
+        this.saved.emit(collectionIds);
+        // Note: Parent component will handle the actual saving and close the modal
+    }
+    onCancel() {
+        this.cancelled.emit();
+    }
+    static ɵfac = function ArtifactCollectionPickerModalComponent_Factory(t) { return new (t || ArtifactCollectionPickerModalComponent)(i0.ɵɵdirectiveInject(i1.ToastService), i0.ɵɵdirectiveInject(i2.CollectionPermissionService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ArtifactCollectionPickerModalComponent, selectors: [["mj-artifact-collection-picker-modal"]], inputs: { isOpen: "isOpen", environmentId: "environmentId", currentUser: "currentUser", excludeCollectionIds: "excludeCollectionIds" }, outputs: { saved: "saved", cancelled: "cancelled" }, standalone: true, features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 1, vars: 1, consts: [["newCollectionInput", ""], ["title", "Save to Collection", 3, "width", "minWidth", "close", 4, "ngIf"], ["title", "Save to Collection", 3, "close", "width", "minWidth"], [1, "picker-modal"], [1, "breadcrumb-nav"], [1, "search-bar"], [1, "fas", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search collections...", 1, "k-textbox", "search-input", 3, "ngModelChange", "input", "ngModel", "disabled"], ["class", "collections-list", 4, "ngIf"], [1, "loading-state"], [1, "error-state"], [1, "selected-summary"], [1, "create-section"], [1, "divider"], [1, "btn-create-collection"], [1, "create-form"], ["kendoButton", "", 3, "click"], ["kendoButton", "", 3, "click", "primary", "disabled"], [1, "breadcrumb-btn", 3, "click"], [1, "fas", "fa-home"], [1, "fas", "fa-chevron-right", "breadcrumb-separator"], [1, "collections-list"], [1, "empty-state"], [1, "fas", "fa-search"], [1, "fas", "fa-folder-open"], [1, "fas", "fa-folder"], [1, "hint"], [1, "collection-item", 3, "already-added"], [1, "collection-item", 3, "click"], [1, "collection-checkbox"], ["type", "checkbox", 3, "click", "checked", "disabled"], [1, "fas", "fa-folder", "collection-icon"], [1, "collection-name"], [1, "already-added-badge"], ["title", "View sub-collections", 1, "drill-down-btn"], [1, "fas", "fa-check-circle"], ["title", "View sub-collections", 1, "drill-down-btn", 3, "click"], [1, "fas", "fa-chevron-right"], [1, "fas", "fa-spinner", "fa-spin"], [1, "fas", "fa-exclamation-triangle"], [1, "btn-create-collection", 3, "click"], [1, "fas", "fa-plus"], ["type", "text", "placeholder", "Enter collection name", 1, "k-textbox", "create-input", 3, "ngModelChange", "keydown.enter", "ngModel"], [1, "create-actions"], ["kendoButton", "", 1, "btn-create", 3, "click", "disabled"], ["kendoButton", "", 1, "btn-cancel", 3, "click"], [1, "fas", "fa-save"]], template: function ArtifactCollectionPickerModalComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, ArtifactCollectionPickerModalComponent_kendo_dialog_0_Template, 22, 13, "kendo-dialog", 1);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.isOpen);
+        } }, dependencies: [CommonModule, i3.NgIf, FormsModule, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgModel, DialogModule, i5.DialogComponent, i5.DialogActionsComponent, ButtonsModule, i6.ButtonComponent, InputsModule], styles: [".picker-modal[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      padding: 20px 0;\n      min-height: 400px;\n      max-height: 600px;\n    }\n\n    .breadcrumb-nav[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      overflow-x: auto;\n    }\n\n    .breadcrumb-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 4px 8px;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: #0076B6;\n      cursor: pointer;\n      white-space: nowrap;\n      font-size: 14px;\n    }\n\n    .breadcrumb-btn[_ngcontent-%COMP%]:hover {\n      background: #E5E7EB;\n    }\n\n    .breadcrumb-separator[_ngcontent-%COMP%] {\n      color: #9CA3AF;\n      font-size: 12px;\n    }\n\n    .search-bar[_ngcontent-%COMP%] {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    .search-icon[_ngcontent-%COMP%] {\n      position: absolute;\n      left: 12px;\n      color: #9CA3AF;\n      pointer-events: none;\n    }\n\n    .search-input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding-left: 36px;\n    }\n\n    .collections-list[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      min-height: 250px;\n      max-height: 350px;\n    }\n\n    .collection-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      border-bottom: 1px solid #F3F4F6;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .collection-item[_ngcontent-%COMP%]:hover {\n      background: #F9FAFB;\n    }\n\n    .collection-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .collection-item.already-added[_ngcontent-%COMP%] {\n      background: #F9FAFB;\n      opacity: 0.7;\n      cursor: not-allowed;\n    }\n\n    .collection-item.already-added[_ngcontent-%COMP%]:hover {\n      background: #F9FAFB;\n    }\n\n    .collection-checkbox[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n    }\n\n    .collection-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n    }\n\n    .collection-icon[_ngcontent-%COMP%] {\n      font-size: 18px;\n      flex-shrink: 0;\n    }\n\n    .collection-name[_ngcontent-%COMP%] {\n      flex: 1;\n      font-size: 14px;\n      color: #1F2937;\n    }\n\n    .already-added-badge[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 8px;\n      background: #DBEAFE;\n      border: 1px solid #93C5FD;\n      border-radius: 12px;\n      color: #1E40AF;\n      font-size: 12px;\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .already-added-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #2563EB;\n    }\n\n    .drill-down-btn[_ngcontent-%COMP%] {\n      padding: 6px 10px;\n      background: transparent;\n      border: 1px solid #D1D5DB;\n      border-radius: 4px;\n      color: #6B7280;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .drill-down-btn[_ngcontent-%COMP%]:hover {\n      background: #F3F4F6;\n      border-color: #9CA3AF;\n      color: #374151;\n    }\n\n    .empty-state[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 48px 24px;\n      color: #6B7280;\n      text-align: center;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      margin-bottom: 16px;\n      opacity: 0.4;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 4px 0;\n      font-size: 14px;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   .hint[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: #9CA3AF;\n    }\n\n    .loading-state[_ngcontent-%COMP%], .error-state[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 48px 24px;\n      gap: 12px;\n      color: #6B7280;\n    }\n\n    .loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .error-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n    }\n\n    .error-state[_ngcontent-%COMP%] {\n      color: #DC2626;\n    }\n\n    .selected-summary[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: #DBEAFE;\n      border: 1px solid #93C5FD;\n      border-radius: 6px;\n      color: #1E40AF;\n      font-size: 14px;\n      font-weight: 500;\n    }\n\n    .selected-summary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2563EB;\n    }\n\n    .create-section[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .divider[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      text-align: center;\n      color: #9CA3AF;\n      font-size: 12px;\n      font-weight: 500;\n    }\n\n    .divider[_ngcontent-%COMP%]::before, \n   .divider[_ngcontent-%COMP%]::after {\n      content: '';\n      flex: 1;\n      border-bottom: 1px solid #E5E7EB;\n    }\n\n    .divider[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      padding: 0 12px;\n    }\n\n    .btn-create-collection[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      padding: 10px 16px;\n      background: #F9FAFB;\n      border: 2px dashed #D1D5DB;\n      border-radius: 6px;\n      color: #0076B6;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .btn-create-collection[_ngcontent-%COMP%]:hover {\n      background: #F3F4F6;\n      border-color: #0076B6;\n    }\n\n    .btn-create-collection[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n    }\n\n    .create-form[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 16px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n    }\n\n    .create-input[_ngcontent-%COMP%] {\n      width: 100%;\n    }\n\n    .create-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n    }\n\n    .btn-create[_ngcontent-%COMP%], .btn-cancel[_ngcontent-%COMP%] {\n      padding: 8px 16px;\n      font-size: 14px;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactCollectionPickerModalComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-artifact-collection-picker-modal', standalone: true, imports: [
+                    CommonModule,
+                    FormsModule,
+                    DialogModule,
+                    ButtonsModule,
+                    InputsModule
+                ], template: `
+    <kendo-dialog
+      *ngIf="isOpen"
+      title="Save to Collection"
+      (close)="onCancel()"
+      [width]="700"
+      [minWidth]="500">
+      <div class="picker-modal">
+        <!-- Breadcrumb Navigation -->
+        @if (navigationPath.length > 0) {
+          <div class="breadcrumb-nav">
+            <button class="breadcrumb-btn" (click)="navigateToRoot()">
+              <i class="fas fa-home"></i> Root
+            </button>
+            @for (item of navigationPath; track item.collection.ID) {
+              <i class="fas fa-chevron-right breadcrumb-separator"></i>
+              <button class="breadcrumb-btn" (click)="navigateToCollection(item.collection)">
+                {{ item.collection.Name }}
+              </button>
+            }
+          </div>
+        }
+
+        <!-- Search Bar -->
+        <div class="search-bar">
+          <i class="fas fa-search search-icon"></i>
+          <input
+            type="text"
+            class="k-textbox search-input"
+            [(ngModel)]="searchQuery"
+            (input)="onSearchChange()"
+            placeholder="Search collections..."
+            [disabled]="isLoading">
+        </div>
+
+        <!-- Collections List -->
+        <div class="collections-list" *ngIf="!isLoading && !errorMessage">
+          @if (displayedCollections.length === 0) {
+            <div class="empty-state">
+              @if (searchQuery) {
+                <i class="fas fa-search"></i>
+                <p>No collections found matching "{{ searchQuery }}"</p>
+              } @else if (currentParentId) {
+                <i class="fas fa-folder-open"></i>
+                <p>No sub-collections available</p>
+              } @else {
+                <i class="fas fa-folder"></i>
+                <p>No collections available</p>
+                <p class="hint">Create a new collection to get started</p>
+              }
+            </div>
+          } @else {
+            @for (node of displayedCollections; track node.collection.ID) {
+              <div class="collection-item"
+                   [class.already-added]="node.alreadyContainsArtifact"
+                   (click)="toggleSelection(node)">
+                <div class="collection-checkbox">
+                  <input
+                    type="checkbox"
+                    [checked]="node.selected"
+                    [disabled]="node.alreadyContainsArtifact"
+                    (click)="$event.stopPropagation(); toggleSelection(node)">
+                </div>
+                <i class="fas fa-folder collection-icon" [style.color]="node.collection.Color || '#0076B6'"></i>
+                <span class="collection-name">{{ node.collection.Name }}</span>
+                @if (node.alreadyContainsArtifact) {
+                  <span class="already-added-badge">
+                    <i class="fas fa-check-circle"></i> Already added
+                  </span>
+                }
+                @if (node.hasChildren) {
+                  <button
+                    class="drill-down-btn"
+                    (click)="$event.stopPropagation(); drillIntoCollection(node.collection)"
+                    title="View sub-collections">
+                    <i class="fas fa-chevron-right"></i>
+                  </button>
+                }
+              </div>
+            }
+          }
+        </div>
+
+        <!-- Loading State -->
+        @if (isLoading) {
+          <div class="loading-state">
+            <i class="fas fa-spinner fa-spin"></i>
+            <span>Loading collections...</span>
+          </div>
+        }
+
+        <!-- Error State -->
+        @if (errorMessage) {
+          <div class="error-state">
+            <i class="fas fa-exclamation-triangle"></i>
+            <span>{{ errorMessage }}</span>
+          </div>
+        }
+
+        <!-- Selected Collections Summary -->
+        @if (selectedCollections.length > 0) {
+          <div class="selected-summary">
+            <i class="fas fa-check-circle"></i>
+            <span>{{ selectedCollections.length }} collection(s) selected</span>
+          </div>
+        }
+
+        <!-- Create New Collection Section -->
+        <div class="create-section">
+          <div class="divider">
+            <span>OR CREATE NEW</span>
+          </div>
+          @if (!showCreateForm) {
+            <button class="btn-create-collection" (click)="showCreateForm = true">
+              <i class="fas fa-plus"></i>
+              Create New Collection
+            </button>
+          } @else {
+            <div class="create-form">
+              <input
+                type="text"
+                class="k-textbox create-input"
+                [(ngModel)]="newCollectionName"
+                placeholder="Enter collection name"
+                (keydown.enter)="createCollection()"
+                #newCollectionInput>
+              <div class="create-actions">
+                <button class="btn-create" kendoButton (click)="createCollection()" [disabled]="isCreatingCollection || !newCollectionName.trim()">
+                  @if (isCreatingCollection) {
+                    <i class="fas fa-spinner fa-spin"></i>
+                  } @else {
+                    Create
+                  }
+                </button>
+                <button class="btn-cancel" kendoButton (click)="showCreateForm = false; newCollectionName = ''">
+                  Cancel
+                </button>
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+
+      <kendo-dialog-actions>
+        <button kendoButton (click)="onCancel()">
+          Cancel
+        </button>
+        <button kendoButton
+                [primary]="true"
+                (click)="onSave()"
+                [disabled]="selectedCollections.length === 0 || isSaving">
+          @if (isSaving) {
+            <i class="fas fa-spinner fa-spin"></i> Saving...
+          } @else {
+            <i class="fas fa-save"></i> Save to {{ selectedCollections.length }} Collection(s)
+          }
+        </button>
+      </kendo-dialog-actions>
+    </kendo-dialog>
+  `, styles: ["\n    .picker-modal {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      padding: 20px 0;\n      min-height: 400px;\n      max-height: 600px;\n    }\n\n    .breadcrumb-nav {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      overflow-x: auto;\n    }\n\n    .breadcrumb-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 4px 8px;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: #0076B6;\n      cursor: pointer;\n      white-space: nowrap;\n      font-size: 14px;\n    }\n\n    .breadcrumb-btn:hover {\n      background: #E5E7EB;\n    }\n\n    .breadcrumb-separator {\n      color: #9CA3AF;\n      font-size: 12px;\n    }\n\n    .search-bar {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    .search-icon {\n      position: absolute;\n      left: 12px;\n      color: #9CA3AF;\n      pointer-events: none;\n    }\n\n    .search-input {\n      width: 100%;\n      padding-left: 36px;\n    }\n\n    .collections-list {\n      flex: 1;\n      overflow-y: auto;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      min-height: 250px;\n      max-height: 350px;\n    }\n\n    .collection-item {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      border-bottom: 1px solid #F3F4F6;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .collection-item:hover {\n      background: #F9FAFB;\n    }\n\n    .collection-item:last-child {\n      border-bottom: none;\n    }\n\n    .collection-item.already-added {\n      background: #F9FAFB;\n      opacity: 0.7;\n      cursor: not-allowed;\n    }\n\n    .collection-item.already-added:hover {\n      background: #F9FAFB;\n    }\n\n    .collection-checkbox {\n      display: flex;\n      align-items: center;\n    }\n\n    .collection-checkbox input[type=\"checkbox\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n    }\n\n    .collection-icon {\n      font-size: 18px;\n      flex-shrink: 0;\n    }\n\n    .collection-name {\n      flex: 1;\n      font-size: 14px;\n      color: #1F2937;\n    }\n\n    .already-added-badge {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 8px;\n      background: #DBEAFE;\n      border: 1px solid #93C5FD;\n      border-radius: 12px;\n      color: #1E40AF;\n      font-size: 12px;\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .already-added-badge i {\n      font-size: 12px;\n      color: #2563EB;\n    }\n\n    .drill-down-btn {\n      padding: 6px 10px;\n      background: transparent;\n      border: 1px solid #D1D5DB;\n      border-radius: 4px;\n      color: #6B7280;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .drill-down-btn:hover {\n      background: #F3F4F6;\n      border-color: #9CA3AF;\n      color: #374151;\n    }\n\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 48px 24px;\n      color: #6B7280;\n      text-align: center;\n    }\n\n    .empty-state i {\n      font-size: 48px;\n      margin-bottom: 16px;\n      opacity: 0.4;\n    }\n\n    .empty-state p {\n      margin: 4px 0;\n      font-size: 14px;\n    }\n\n    .empty-state .hint {\n      font-size: 13px;\n      color: #9CA3AF;\n    }\n\n    .loading-state, .error-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 48px 24px;\n      gap: 12px;\n      color: #6B7280;\n    }\n\n    .loading-state i, .error-state i {\n      font-size: 32px;\n    }\n\n    .error-state {\n      color: #DC2626;\n    }\n\n    .selected-summary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: #DBEAFE;\n      border: 1px solid #93C5FD;\n      border-radius: 6px;\n      color: #1E40AF;\n      font-size: 14px;\n      font-weight: 500;\n    }\n\n    .selected-summary i {\n      color: #2563EB;\n    }\n\n    .create-section {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .divider {\n      display: flex;\n      align-items: center;\n      text-align: center;\n      color: #9CA3AF;\n      font-size: 12px;\n      font-weight: 500;\n    }\n\n    .divider::before,\n    .divider::after {\n      content: '';\n      flex: 1;\n      border-bottom: 1px solid #E5E7EB;\n    }\n\n    .divider span {\n      padding: 0 12px;\n    }\n\n    .btn-create-collection {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      padding: 10px 16px;\n      background: #F9FAFB;\n      border: 2px dashed #D1D5DB;\n      border-radius: 6px;\n      color: #0076B6;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .btn-create-collection:hover {\n      background: #F3F4F6;\n      border-color: #0076B6;\n    }\n\n    .btn-create-collection i {\n      font-size: 16px;\n    }\n\n    .create-form {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 16px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n    }\n\n    .create-input {\n      width: 100%;\n    }\n\n    .create-actions {\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n    }\n\n    .btn-create, .btn-cancel {\n      padding: 8px 16px;\n      font-size: 14px;\n    }\n  "] }]
+    }], () => [{ type: i1.ToastService }, { type: i2.CollectionPermissionService }], { isOpen: [{
+            type: Input
+        }], environmentId: [{
+            type: Input
+        }], currentUser: [{
+            type: Input
+        }], excludeCollectionIds: [{
+            type: Input
+        }], saved: [{
+            type: Output
+        }], cancelled: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactCollectionPickerModalComponent, { className: "ArtifactCollectionPickerModalComponent", filePath: "src/lib/components/collection/artifact-collection-picker-modal.component.ts", lineNumber: 492 }); })();
+//# sourceMappingURL=artifact-collection-picker-modal.component.js.map