@meshmakers/octo-ui 3.3.740 → 3.3.760

package/fesm2022/meshmakers-octo-ui.mjs

@@ -2532,6 +2532,11 @@ class CkTypeSelectorInputComponent {
                 this.selectCkType(ckType);
             }
         }
+        else if (!value && this.selectedCkType) {
+            this.selectedCkType = null;
+            this.onChange(null);
+            this.ckTypeCleared.emit();
+        }
     }
     onFocus() {
         const currentValue = this.searchFormControl.value;
@@ -9749,15 +9754,13 @@ class CreateEditorComponent {
         return entity;
     }
     /**
-     * Resets the form and prepares the state for the selected type.
-     * Naming (intentional, not swapped): CkTypeDto has ckTypeId { fullName } and rtCkTypeId.
+     * Handles type selection from the CkTypeSelectorInput.
+     * CkTypeSelectorItem has fullName and rtCkTypeId.
      * - selectedRtCkTypeId = fullName → used as [ckId] for attributes-group (getCkAttributesDetailed expects type id).
-     * - selectedCkTypeId = DTO's rtCkTypeId → used in create mutation payload as entity.ckTypeId.
+     * - selectedCkTypeId = rtCkTypeId → used in create mutation payload as entity.ckTypeId.
      */
-    onTypeChange(selectedType) {
-        if (selectedType === null || selectedType === undefined)
-            return;
-        const rtCkTypeId = selectedType.ckTypeId.fullName;
+    onCkTypeSelected(selectedType) {
+        const rtCkTypeId = selectedType.fullName;
         const ckTypeId = selectedType.rtCkTypeId;
         if (ckTypeId && rtCkTypeId) {
             this.form.set(this.formBuilder.group({}));
@@ -9770,6 +9773,11 @@ class CreateEditorComponent {
             this.selectedCkTypeId.set(null);
         }
     }
+    onCkTypeCleared() {
+        this.form.set(null);
+        this.selectedRtCkTypeId.set(null);
+        this.selectedCkTypeId.set(null);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CreateEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CreateEditorComponent, isStandalone: true, selector: "mm-create-editor-component", inputs: { createInput: { classPropertyName: "createInput", publicName: "createInput", isSignal: true, isRequired: true, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createOutput: "createOutput", cancelRequested: "cancelRequested" }, ngImport: i0, template: `
     <div class="entity-editor-container">
@@ -9792,15 +9800,15 @@ class CreateEditorComponent {
 
           <div class="info-item">
             <label>{{ resolvedMessages().entityType }}</label>
-            <kendo-dropdownlist
-              [data]="createInput()!.ckTypes || []"
-              textField="rtCkTypeId"
-              valueField="rtCkTypeId"
-              [valuePrimitive]="false"
-              [attr.placeholder]="resolvedMessages().selectType"
-              (valueChange)="onTypeChange($event)"
+            <mm-ck-type-selector-input
+              [placeholder]="resolvedMessages().selectType"
+              [allowAbstract]="false"
+              [derivedFromRtCkTypeId]="createInput()!.derivedFromRtCkTypeId"
+              [dialogTitle]="resolvedMessages().selectType"
+              (ckTypeSelected)="onCkTypeSelected($event)"
+              (ckTypeCleared)="onCkTypeCleared()"
             >
-            </kendo-dropdownlist>
+            </mm-ck-type-selector-input>
           </div>
         </kendo-card-body>
       </kendo-card>
@@ -9836,7 +9844,7 @@ class CreateEditorComponent {
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [".entity-editor-container{display:flex;flex-direction:column;gap:16px;width:100%}.entity-editor-container ::ng-deep kendo-card{display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr;gap:16px;width:100%!important}.entity-editor-container ::ng-deep kendo-card kendo-card-header{grid-column:span 2;grid-row:1}.entity-editor-container ::ng-deep kendo-card kendo-card-body{grid-row:2;grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:16px}.entity-editor-container ::ng-deep kendo-card kendo-card-body .info-item{display:flex;flex-direction:column}.entity-editor-container ::ng-deep kendo-card kendo-card-body .info-item :first-child{grid-column:1}.entity-editor-container ::ng-deep kendo-card kendo-card-body .info-item :nth-child(2){grid-column:2}.entity-editor-container ::ng-deep kendo-card kendo-card-body .info-item label{color:var(--kendo-color-subtle, rgba(0, 0, 0, .7));margin-bottom:8px;text-transform:uppercase}.entity-editor-container .attributes-form-container ::ng-deep kendo-card:not(.basic-info-card) kendo-card-body{display:flex;flex-direction:column;gap:16px}.entity-editor-container .select-type-prompt{grid-column:span 2;text-transform:uppercase;color:var(--kendo-color-primary, #0f6dff);background-color:var(--kendo-color-surface-alt, rgba(0, 0, 0, .05));padding:16px;border-radius:8px;text-align:center;border:1px dashed var(--kendo-color-border, rgba(0, 0, 0, .1))}.entity-editor-container .entity-editor-actions{display:flex;flex-direction:row;gap:16px}.entity-editor-container .entity-editor-actions button:disabled{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$3.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "component", type: i1$3.CardBodyComponent, selector: "kendo-card-body" }, { kind: "component", type: i1$3.CardHeaderComponent, selector: "kendo-card-header" }, { kind: "component", type: i5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: AttributesGroupComponent, selector: "mm-attributes-group", inputs: ["ckId", "parentFormGroup", "isRecord", "initialValues"] }] });
+  `, isInline: true, styles: [".entity-editor-container{display:flex;flex-direction:column;gap:16px;width:100%}.entity-editor-container ::ng-deep kendo-card{display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr;gap:16px;width:100%!important}.entity-editor-container ::ng-deep kendo-card kendo-card-header{grid-column:span 2;grid-row:1}.entity-editor-container ::ng-deep kendo-card kendo-card-body{grid-row:2;grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:16px}.entity-editor-container ::ng-deep kendo-card kendo-card-body .info-item{display:flex;flex-direction:column}.entity-editor-container ::ng-deep kendo-card kendo-card-body .info-item :first-child{grid-column:1}.entity-editor-container ::ng-deep kendo-card kendo-card-body .info-item :nth-child(2){grid-column:2}.entity-editor-container ::ng-deep kendo-card kendo-card-body .info-item label{color:var(--kendo-color-subtle, rgba(0, 0, 0, .7));margin-bottom:8px;text-transform:uppercase}.entity-editor-container .attributes-form-container ::ng-deep kendo-card:not(.basic-info-card) kendo-card-body{display:flex;flex-direction:column;gap:16px}.entity-editor-container .select-type-prompt{grid-column:span 2;text-transform:uppercase;color:var(--kendo-color-primary, #0f6dff);background-color:var(--kendo-color-surface-alt, rgba(0, 0, 0, .05));padding:16px;border-radius:8px;text-align:center;border:1px dashed var(--kendo-color-border, rgba(0, 0, 0, .1))}.entity-editor-container .entity-editor-actions{display:flex;flex-direction:row;gap:16px}.entity-editor-container .entity-editor-actions button:disabled{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$3.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "component", type: i1$3.CardBodyComponent, selector: "kendo-card-body" }, { kind: "component", type: i1$3.CardHeaderComponent, selector: "kendo-card-header" }, { kind: "component", type: i5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: AttributesGroupComponent, selector: "mm-attributes-group", inputs: ["ckId", "parentFormGroup", "isRecord", "initialValues"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CreateEditorComponent, decorators: [{
             type: Component,
@@ -9846,8 +9854,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         KENDO_INPUTS,
                         KENDO_LABEL,
                         KENDO_BUTTONS,
-                        KENDO_DROPDOWNS,
                         KENDO_DATEINPUTS,
+                        CkTypeSelectorInputComponent,
                         AttributesGroupComponent,
                     ], template: `
     <div class="entity-editor-container">
@@ -9870,15 +9878,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 
           <div class="info-item">
             <label>{{ resolvedMessages().entityType }}</label>
-            <kendo-dropdownlist
-              [data]="createInput()!.ckTypes || []"
-              textField="rtCkTypeId"
-              valueField="rtCkTypeId"
-              [valuePrimitive]="false"
-              [attr.placeholder]="resolvedMessages().selectType"
-              (valueChange)="onTypeChange($event)"
+            <mm-ck-type-selector-input
+              [placeholder]="resolvedMessages().selectType"
+              [allowAbstract]="false"
+              [derivedFromRtCkTypeId]="createInput()!.derivedFromRtCkTypeId"
+              [dialogTitle]="resolvedMessages().selectType"
+              (ckTypeSelected)="onCkTypeSelected($event)"
+              (ckTypeCleared)="onCkTypeCleared()"
             >
-            </kendo-dropdownlist>
+            </mm-ck-type-selector-input>
           </div>
         </kendo-card-body>
       </kendo-card>
@@ -10511,9 +10519,9 @@ class RuntimeBrowserDetailsComponent {
     /**
      * Activates the creation UI and provides necessary data
      * @param parentNode The tree node under which the new entity will be created, or null for root-level creation
-     * @param allowedTypes List of compatible entity types for the new node
+     * @param derivedFromRtCkTypeId Base type ID to filter the type selector (e.g. 'Basic/TreeNode' or 'Basic/Tree')
      */
-    enterCreateMode(parentNode, allowedTypes) {
+    enterCreateMode(parentNode, derivedFromRtCkTypeId) {
         const rtEntityDto = parentNode;
         this.createInput = {
             parent: {
@@ -10521,7 +10529,7 @@ class RuntimeBrowserDetailsComponent {
                 rtId: rtEntityDto?.item.rtId,
                 name: parentNode?.text ?? "",
             },
-            ckTypes: allowedTypes,
+            derivedFromRtCkTypeId,
         };
         // Toggle the UI state to show the creation form
         this.isCreateModeEnabled = true;
@@ -11507,7 +11515,6 @@ class RuntimeBrowserComponent {
     notificationService = inject(NotificationService);
     isSelectedItemAnRtEntity = false;
     isLoading = false;
-    isCreating = false;
     isEditing = false;
     messages = input({}, ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
     resolvedMessages = computed(() => ({
@@ -11584,7 +11591,7 @@ class RuntimeBrowserComponent {
         return !this.isLoading;
     }
     get isCreateButtonEnabled() {
-        return !this.isLoading && !this.isCreating;
+        return !this.isLoading;
     }
     get isDeleteButtonEnabled() {
         return !this.isLoading && this.isSelectedItemAnRtEntity;
@@ -11991,28 +11998,10 @@ class RuntimeBrowserComponent {
     /**
      * Main action to initiate the creation of a new node
      */
-    async onCreate() {
-        // Anti-spam validation: prevent multiple clicks
-        if (this.isCreating) {
-            return;
-        }
-        try {
-            this.isCreating = true;
-            // Fetch available Construction Kit types from the API
-            const result = await firstValueFrom(this.ckTypesGQL.fetch());
-            const allTypes = (result.data?.constructionKit?.types?.items ?? []).filter((type) => type != null);
-            const isRootLevel = !this.selectedItem;
-            const filteredTypes = this.getCompatibleTreeTypes(allTypes, isRootLevel);
-            // Transition the details panel into Create Mode
-            // Pass null as parent if no item is selected (creates root-level entity)
-            this.detailsPanel?.enterCreateMode(this.selectedItem || null, filteredTypes);
-        }
-        catch (err) {
-            console.error('Failed to load types for creation:', err);
-        }
-        finally {
-            this.isCreating = false;
-        }
+    onCreate() {
+        const isRootLevel = !this.selectedItem;
+        const derivedFromRtCkTypeId = isRootLevel ? 'Basic/Tree' : 'Basic/TreeNode';
+        this.detailsPanel?.enterCreateMode(this.selectedItem || null, derivedFromRtCkTypeId);
     }
     async onEdit() {
         // Anti-spam validation: prevent multiple clicks
@@ -12041,60 +12030,6 @@ class RuntimeBrowserComponent {
             this.isEditing = false;
         }
     }
-    /**
-     * Filters the list of types to find compatible types for entity creation.
-     * For root-level creation, only allows Basic/Tree types.
-     * For child creation, allows non-abstract TreeNode types.
-     *
-     * @param types - All available CK types
-     * @param isRootLevel - If true, only Basic/Tree types are allowed
-     * @returns Filtered list of compatible types
-     */
-    getCompatibleTreeTypes(types, isRootLevel = false) {
-        // For root-level creation, only allow Basic/Tree types
-        if (isRootLevel) {
-            return types.filter((type) => {
-                const isBasicTree = type?.rtCkTypeId === 'Basic/Tree';
-                return isBasicTree;
-            });
-        }
-        // For child creation, allow non-abstract TreeNode types
-        const filtered = types.filter((type) => {
-            const isNotAbstract = type?.isAbstract === false;
-            const isTreeNodeFamily = this.isTreeNodeType(type);
-            return isNotAbstract && isTreeNodeFamily;
-        });
-        // If no TreeNode types found, fallback to all non-abstract types
-        if (filtered.length === 0) {
-            return types.filter((type) => type?.isAbstract === false);
-        }
-        return filtered;
-    }
-    /**
-     * Checks if a specific type or its base type belongs to the TreeNode hierarchy
-     */
-    isTreeNodeType(type) {
-        const typeFullName = type?.ckTypeId?.fullName || '';
-        const baseTypeFullName = type?.baseType?.ckTypeId?.fullName || '';
-        const getShortName = (fullName) => {
-            if (!fullName) {
-                return '';
-            }
-            // Handle both dot notation (System.Entity) and slash notation (System/Entity)
-            const parts = fullName.includes('/')
-                ? fullName.split('/')
-                : fullName.split('.');
-            return parts[parts.length - 1] || '';
-        };
-        const typeName = getShortName(typeFullName);
-        const baseTypeName = getShortName(baseTypeFullName);
-        // Check if type name ends with TreeNode or is TreeNode
-        const isTreeNode = typeName === 'TreeNode' || baseTypeName === 'TreeNode';
-        // Also check if full name contains TreeNode (for cases like Basic/TreeNode)
-        const containsTreeNode = typeFullName.includes('TreeNode') ||
-            baseTypeFullName.includes('TreeNode');
-        return isTreeNode || containsTreeNode;
-    }
     /**
      * Handles entitySaved from the details panel: refreshes the tree, then reloads the detail view
      * when the save was an update so the user sees fresh data.