@valtimo/admin-settings 13.46.0 → 13.47.0

package/lib/components/admin-settings/admin-settings.component.d.ts

@@ -5,6 +5,7 @@ export declare class AdminSettingsComponent {
     private readonly _router;
     readonly ADMIN_SETTINGS_TABS: {
         readonly APPEARANCE: "appearance";
+        readonly MENU_CONFIGURATION: "menu-configuration";
         readonly FEATURE_TOGGLES: "feature-toggles";
     };
     readonly activeTabKey$: import("rxjs").Observable<any>;

package/lib/components/admin-settings-menu-configuration/admin-settings-menu-configuration.component.d.ts

@@ -0,0 +1,172 @@
+import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
+import { OnDestroy, OnInit } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { AdminSettingsService } from '@valtimo/components';
+import { ConfigService } from '@valtimo/shared';
+import { ExternalPluginMenuPage, ExternalPluginPageService } from '@valtimo/plugin';
+import { IconService } from 'carbon-components-angular';
+import { BuilderNode, PaletteGroup, PaletteItem } from '../../models';
+import * as i0 from "@angular/core";
+export declare class AdminSettingsMenuConfigurationComponent implements OnInit, OnDestroy {
+    private readonly fb;
+    private readonly adminSettingsService;
+    private readonly pluginPageService;
+    private readonly configService;
+    private readonly translateService;
+    private readonly iconService;
+    protected readonly testIds: {
+        readonly saveButton: "menuConfigurationSaveButton";
+        readonly resetButton: "menuConfigurationResetButton";
+        readonly structureList: "menuConfigurationStructureList";
+        readonly editorTitleInput: "menuConfigurationEditorTitleInput";
+        readonly editorLinkInput: "menuConfigurationEditorLinkInput";
+        readonly editorSaveButton: "menuConfigurationEditorSaveButton";
+        readonly editorCancelButton: "menuConfigurationEditorCancelButton";
+    };
+    readonly $loading: import("@angular/core").WritableSignal<boolean>;
+    readonly $saving: import("@angular/core").WritableSignal<boolean>;
+    readonly $saved: import("@angular/core").WritableSignal<boolean>;
+    readonly $structure: import("@angular/core").WritableSignal<BuilderNode[]>;
+    /** Drives the post-save "reload now?" confirmation modal. */
+    private readonly _$reloadModalOpen;
+    readonly reloadModalOpen$: import("rxjs").Observable<boolean>;
+    readonly $pluginPages: import("@angular/core").WritableSignal<ExternalPluginMenuPage[]>;
+    /** True while a drag is in progress, so the panels can desaturate the sections that cannot receive it. */
+    readonly $dragging: import("@angular/core").WritableSignal<boolean>;
+    readonly $editorOpen: import("@angular/core").WritableSignal<boolean>;
+    readonly $editorKind: import("@angular/core").WritableSignal<"catalog" | "group" | "section-header" | "custom-link" | "plugin-page">;
+    /** True while editing a required item (Admin/Settings) — its Include-function field is suppressed. */
+    readonly $editorRequired: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * Bumped whenever ngx-translate (re)loads, so the translated palette/section labels — resolved
+     * imperatively via `translateService.instant` inside computeds — recompute once translations arrive
+     * (a plain computed would otherwise keep the raw keys captured on first, pre-load evaluation).
+     */
+    private readonly _$translationTick;
+    readonly $paletteGroups: import("@angular/core").Signal<PaletteGroup[]>;
+    /**
+     * All structure drop-list ids (root + every container), so each list — including palette lists and
+     * the nested container lists — connects to every structure list **by id**. CDK resolves these ids
+     * globally, so connections work regardless of DOM/DI nesting (a `cdkDropListGroup` would not see a
+     * nested list whose template is declared outside the group element).
+     */
+    readonly $structureListIds: import("@angular/core").Signal<string[]>;
+    readonly includeFunctionKeys: string[];
+    readonly editorForm: import("@angular/forms").FormGroup<{
+        title: import("@angular/forms").FormControl<string>;
+        link: import("@angular/forms").FormControl<string>;
+        icon: import("@angular/forms").FormControl<string>;
+        includeFunction: import("@angular/forms").FormControl<string>;
+        section: import("@angular/forms").FormControl<string>;
+    }>;
+    /** Sections an item can be placed in via the editor: top level + each container present in the tree. */
+    readonly $sectionOptions: import("@angular/core").Signal<{
+        value: string;
+        label: string;
+    }[]>;
+    /** Kinds that can be freely placed in any section (and so get the editor's Section selector). */
+    private readonly SECTION_CAPABLE_KINDS;
+    readonly $editorShowSection: import("@angular/core").Signal<boolean>;
+    /** Tracks the editor's currently selected section so the icon field can react to placement changes. */
+    private readonly _$editorSection;
+    /**
+     * The icon only surfaces in the rendered menu for top-level entries, so the editor hides the icon
+     * field for section headers and for any item placed inside a section (a sub-menu item).
+     */
+    readonly $editorShowIcon: import("@angular/core").Signal<boolean>;
+    private _editingUid;
+    private _pendingPaletteItem;
+    private _uidCounter;
+    readonly topEnterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean;
+    readonly adminEnterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean;
+    readonly developmentEnterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean;
+    readonly groupEnterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean;
+    readonly paletteEnterPredicate: () => boolean;
+    /** Last known pointer position during a drag, used to resolve nested drop-list ambiguity. */
+    private _pointer;
+    private readonly _trackPointer;
+    /**
+     * True when a `.valtimo-drag-drop-list` nested *inside* `drop` currently sits under the pointer.
+     * Such a deeper list is the more specific target, so `drop` should decline the item — this keeps a
+     * reorder inside a section from being hijacked by the enclosing (ancestor) list.
+     */
+    private _pointerOverDeeperList;
+    constructor(fb: FormBuilder, adminSettingsService: AdminSettingsService, pluginPageService: ExternalPluginPageService, configService: ConfigService, translateService: TranslateService, iconService: IconService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    load(): void;
+    onReset(): void;
+    onDragStarted(): void;
+    onDragEnded(): void;
+    private _removePointerListeners;
+    onDrop(event: CdkDragDrop<BuilderNode[]>): void;
+    onAddPaletteItem(item: PaletteItem): void;
+    openEditor(node: BuilderNode): void;
+    openNewItemEditor(item: PaletteItem): void;
+    onEditorSave(): void;
+    closeEditor(): void;
+    /** Commits a (new or edited) node into the chosen section, moving it if its section changed. */
+    private _placeNode;
+    private _syncLinkControl;
+    onRemove(node: BuilderNode): void;
+    onSave(): void;
+    /** Reload the app so the freshly saved menu takes effect. */
+    onReloadConfirm(): void;
+    /** Dismiss the reload modal, leaving a persistent inline reminder that a reload is still pending. */
+    onReloadDismiss(): void;
+    /** Dismiss the persistent "menu saved" reminder. */
+    onDismissSavedNotification(): void;
+    isContainer(node: BuilderNode): boolean;
+    isRequired(node: BuilderNode): boolean;
+    hasRuntimeSubmenu(node: BuilderNode): boolean;
+    displayTitle(node: BuilderNode): string;
+    childrenOf(node: BuilderNode): BuilderNode[];
+    containerListId(node: BuilderNode): string;
+    containerEnterPredicate(node: BuilderNode): (drag: CdkDrag, drop: CdkDropList) => boolean;
+    iconClassOf(node: BuilderNode): string | null;
+    /**
+     * Which plugin configuration a placed page belongs to. Every configuration of one plugin
+     * contributes a page with the same title, so the row is otherwise indistinguishable from its
+     * siblings. Empty for every other kind, and for a page whose configuration no longer exists.
+     */
+    configurationTitleOf(node: BuilderNode): string;
+    trackByUid: (_: number, node: BuilderNode) => string;
+    private _displayIconClass;
+    private _editableTitle;
+    private _placementOf;
+    private _containerAccepts;
+    private _paletteItemToNode;
+    private _defaultTargetFor;
+    /** A container's stable section id: catalog `itemId` for Admin/Development, `_uid` for a custom section. */
+    private _sectionValue;
+    /** The array that backs a section id (`'root'`, a catalog `itemId`, or a group `_uid`), creating children if needed. */
+    private _targetForSection;
+    /** Which section a node currently lives in: `'root'` or the containing section's id. */
+    private _findSectionOf;
+    private _buildPaletteGroups;
+    private _localizedPluginTitle;
+    private _pluginKey;
+    /**
+     * The MDI icon selector works with the full MDI class token (e.g. `mdi-view-dashboard`) — its
+     * preview binds the value straight onto an element class and `POPULAR_MDI_ICONS` is `mdi-*` keyed
+     * — so we keep the `mdi-` prefix here (stripping it broke the preview and double-prefixed on save).
+     */
+    private _mdiKeyFromIconClass;
+    /** Builds the menu `iconClass` from the selector's MDI class token (`mdi-view-dashboard` → `icon mdi mdi-view-dashboard`). */
+    private _iconClassFromMdiKey;
+    /** The editable children array of a branch node (catalog group or custom section), else null. */
+    private _childArray;
+    private _withUid;
+    private _assignUids;
+    private _walk;
+    private _findByUid;
+    private _removeByUid;
+    /** Deep-clones array references so the OnPush drag-drop lists re-render after an in-place mutation. */
+    private _bump;
+    private _clone;
+    /** Produces the persisted structure without the transient `_uid` fields. */
+    private _stripUids;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdminSettingsMenuConfigurationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdminSettingsMenuConfigurationComponent, "valtimo-admin-settings-menu-configuration", never, {}, {}, never, never, true, never>;
+}

package/lib/constants/admin-settings.constants.d.ts

@@ -1,5 +1,6 @@
 declare const ADMIN_SETTINGS_TABS: {
     readonly APPEARANCE: "appearance";
+    readonly MENU_CONFIGURATION: "menu-configuration";
     readonly FEATURE_TOGGLES: "feature-toggles";
 };
 export { ADMIN_SETTINGS_TABS };

package/lib/constants/index.d.ts

@@ -1,3 +1,4 @@
 export * from './accent-colors.constants';
 export * from './admin-settings.constants';
 export * from './feature-toggle.constants';
+export * from './menu-configuration.test-ids';

package/lib/constants/menu-configuration.test-ids.d.ts

@@ -0,0 +1,10 @@
+declare const MENU_CONFIGURATION_TEST_IDS: {
+    readonly saveButton: "menuConfigurationSaveButton";
+    readonly resetButton: "menuConfigurationResetButton";
+    readonly structureList: "menuConfigurationStructureList";
+    readonly editorTitleInput: "menuConfigurationEditorTitleInput";
+    readonly editorLinkInput: "menuConfigurationEditorLinkInput";
+    readonly editorSaveButton: "menuConfigurationEditorSaveButton";
+    readonly editorCancelButton: "menuConfigurationEditorCancelButton";
+};
+export { MENU_CONFIGURATION_TEST_IDS };

package/lib/models/index.d.ts

@@ -1,4 +1,5 @@
 export * from './accent-colors.model';
 export * from './feature-toggle.model';
+export * from './menu-configuration.model';
 export * from './reindex.model';
 export * from './search-engine.model';

package/lib/models/menu-configuration.model.d.ts

@@ -0,0 +1,22 @@
+import { MenuConfigurationItem } from '@valtimo/components';
+import { ExternalPluginMenuPage } from '@valtimo/plugin';
+/** A draggable entry in the right-hand "Available items" palette. */
+interface PaletteItem {
+    paletteType: 'catalog' | 'group' | 'section-header' | 'custom-link' | 'plugin-page';
+    label: string;
+    /** Secondary line under the label, for entries whose label alone does not identify them. */
+    sublabel?: string;
+    icon?: string;
+    itemId?: string;
+    page?: ExternalPluginMenuPage;
+}
+interface PaletteGroup {
+    categoryKey: string;
+    items: PaletteItem[];
+}
+/** Builder node = a stored config node plus a transient `_uid` for stable identity across redraws. */
+type BuilderNode = MenuConfigurationItem & {
+    _uid: string;
+    children?: BuilderNode[];
+};
+export { PaletteItem, PaletteGroup, BuilderNode };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@valtimo/admin-settings",
   "license": "EUPL-1.2",
-  "version": "13.46.0",
+  "version": "13.47.0",
   "peerDependencies": {
     "@angular/common": "19.2.25",
     "@angular/core": "19.2.25"