Initial commit

lib/extensions/megaMenu/MegaMenu.module.scss.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+    mmSlideIn: string;
+    mmFadeIn: string;
+};
+export default styles;

lib/extensions/megaMenu/MegaMenu.module.scss.js

@@ -0,0 +1,10 @@
+/* tslint:disable */
+require('./MegaMenu.module.css');
+var styles = {
+    mmSlideIn: 'mmSlideIn_09a8e1a7',
+    mmFadeIn: 'mmFadeIn_09a8e1a7',
+};
+export default styles;
+/* tslint:enable */ 
+
+//# sourceMappingURL=MegaMenu.module.scss.js.map

lib/extensions/megaMenu/MegaMenu.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["extensions/megaMenu/MegaMenu.module.scss.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,CAAC,uBAAuB,CAAC,CAAC;AACjC,IAAM,MAAM,GAAG;IACb,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE,mBAAmB;CAC9B,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,mBAAmB","file":"extensions/megaMenu/MegaMenu.module.scss.js","sourcesContent":["/* tslint:disable */\r\nrequire('./MegaMenu.module.css');\r\nconst styles = {\r\n  mmSlideIn: 'mmSlideIn_09a8e1a7',\r\n  mmFadeIn: 'mmFadeIn_09a8e1a7',\r\n};\r\n\r\nexport default styles;\r\n/* tslint:enable */"],"sourceRoot":"..\\..\\..\\src"}

lib/extensions/megaMenu/MegaMenuApplicationCustomizer.d.ts

@@ -0,0 +1,27 @@
+import { BaseApplicationCustomizer } from '@microsoft/sp-application-base';
+import './MegaMenu.module.scss';
+export declare const UserCustomActionMegaMenuId: string;
+/**
+ * Properties for the MegaMenu Application Customizer
+ */
+export interface IMegaMenuApplicationCustomizerProperties {
+    /**
+     * The name of the termset to load menu items from
+     */
+    termSetName: string;
+    /**
+     * Optional URL to an external CSS file
+     */
+    cssUrl?: string;
+}
+/** A Custom Action which can be run during execution of a Client Side Application */
+export default class MegaMenuApplicationCustomizer extends BaseApplicationCustomizer<IMegaMenuApplicationCustomizerProperties> {
+    private _topPlaceholder;
+    onInit(): Promise<void>;
+    private _renderPlaceHolders();
+    private _updateCallback;
+    private _renderMegaMenu(termSetName);
+    private _getOrCreateContainer(id, placeholder);
+    private _loadExternalCss(cssUrl);
+    private _onDispose();
+}

lib/extensions/megaMenu/MegaMenuApplicationCustomizer.js

@@ -0,0 +1,188 @@
+// tslint:disable:max-line-length
+// tslint:disable:match-default-export-name
+// tslint:disable:typedef
+// tslint:disable:variable-name
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [0, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { override } from '@microsoft/decorators';
+import { Log } from '@microsoft/sp-core-library';
+import { BaseApplicationCustomizer, PlaceholderName } from '@microsoft/sp-application-base';
+import * as strings from 'MegaMenuApplicationCustomizerStrings';
+import { TaxonomyNavigationService } from '../../services/TaxonomyNavigationService';
+import { MegaMenuRenderer } from './MegaMenuRenderer';
+// Import SCSS module
+import './MegaMenu.module.scss';
+var LOG_SOURCE = 'MegaMenuApplicationCustomizer';
+export var UserCustomActionMegaMenuId = 'abc3361f-bb2d-491f-aba3-cd51c19a299b';
+/** A Custom Action which can be run during execution of a Client Side Application */
+var MegaMenuApplicationCustomizer = (function (_super) {
+    __extends(MegaMenuApplicationCustomizer, _super);
+    function MegaMenuApplicationCustomizer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._updateCallback = function (data) {
+            _this._loadExternalCss(data.cssUrl);
+            _this._renderMegaMenu(data.termSetName);
+        };
+        return _this;
+    }
+    MegaMenuApplicationCustomizer.prototype.onInit = function () {
+        Log.info(LOG_SOURCE, "Initialized " + strings.Title);
+        // Load external CSS if provided
+        if (this.properties.cssUrl) {
+            this._loadExternalCss(this.properties.cssUrl);
+        }
+        // Wait for the page to be ready
+        this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
+        // Initial render
+        this._renderPlaceHolders();
+        return Promise.resolve();
+    };
+    MegaMenuApplicationCustomizer.prototype._renderPlaceHolders = function () {
+        console.log('Available placeholders: ', this.context.placeholderProvider.placeholderNames.map(function (name) { return PlaceholderName[name]; }).join(', '));
+        // Handling the top placeholder
+        if (!this._topPlaceholder) {
+            this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top, { onDispose: this._onDispose });
+            // The extension should not assume that the expected placeholder is available.
+            if (!this._topPlaceholder) {
+                console.error('The expected placeholder (Top) was not found.');
+                return;
+            }
+            if (!this.properties.termSetName) {
+                console.error('TermSetName property is required but not provided.');
+                1;
+                return;
+            }
+            this._renderMegaMenu(this.properties.termSetName);
+        }
+    };
+    MegaMenuApplicationCustomizer.prototype._renderMegaMenu = function (termSetName) {
+        return __awaiter(this, void 0, void 0, function () {
+            var taxonomyService, menuItems, renderer, container, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!this._topPlaceholder) {
+                            return [2 /*return*/];
+                        }
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        taxonomyService = new TaxonomyNavigationService(this.context, termSetName);
+                        return [4 /*yield*/, taxonomyService.getMenuItems()];
+                    case 2:
+                        menuItems = _a.sent();
+                        renderer = new MegaMenuRenderer(this.context, menuItems, this._updateCallback);
+                        container = this._getOrCreateContainer('CustomHeader', this._topPlaceholder);
+                        if (container) {
+                            renderer.render(container);
+                        }
+                        else {
+                            renderer.render(this._topPlaceholder.domElement);
+                        }
+                        Log.info(LOG_SOURCE, "MegaMenu rendered successfully with " + menuItems.length + " top-level items");
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _a.sent();
+                        console.error('Error rendering MegaMenu:', error_1);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    MegaMenuApplicationCustomizer.prototype._getOrCreateContainer = function (id, placeholder) {
+        var container = document.getElementById(id);
+        if (container) {
+            var div = document.createElement('div');
+            container.appendChild(div);
+            return div;
+        }
+        else {
+            return placeholder.domElement;
+        }
+    };
+    MegaMenuApplicationCustomizer.prototype._loadExternalCss = function (cssUrl) {
+        var externalCssLinkId = 'mega-menu-additional-css-34FAB720';
+        var link = document.getElementById(externalCssLinkId);
+        if (cssUrl && cssUrl.trim() !== '') {
+            // update previous link, if present
+            if (!link) {
+                var head = document.getElementsByTagName('head')[0];
+                link = document.createElement('link');
+                link.rel = 'stylesheet';
+                link.type = 'text/css';
+                link.id = externalCssLinkId;
+                link.onload = function () {
+                    Log.info(LOG_SOURCE, "External CSS loaded successfully from: " + cssUrl);
+                };
+                link.onerror = function () {
+                    console.warn("Failed to load external CSS from: " + cssUrl);
+                };
+                head.appendChild(link);
+            }
+            link.href = cssUrl;
+        }
+        else if (link) {
+            link.remove();
+        }
+    };
+    MegaMenuApplicationCustomizer.prototype._onDispose = function () {
+        console.log('[MegaMenuApplicationCustomizer._onDispose] Disposed custom top placeholder.');
+    };
+    __decorate([
+        override
+    ], MegaMenuApplicationCustomizer.prototype, "onInit", null);
+    return MegaMenuApplicationCustomizer;
+}(BaseApplicationCustomizer));
+export default MegaMenuApplicationCustomizer;
+
+//# sourceMappingURL=MegaMenuApplicationCustomizer.js.map

lib/extensions/megaMenu/MegaMenuApplicationCustomizer.manifest.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-extension-manifest.schema.json",
+
+  "id": "abc3361f-bb2d-491f-aba3-cd51c19a299b",
+  "alias": "MegaMenuApplicationCustomizer",
+  "componentType": "Extension",
+  "extensionType": "ApplicationCustomizer",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false
+}

lib/extensions/megaMenu/MegaMenuRenderer.d.ts

@@ -0,0 +1,28 @@
+import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
+import { IMenuItem } from '../../services/IMenuItem';
+import { IMegaMenuApplicationCustomizerProperties } from './MegaMenuApplicationCustomizer';
+export declare class MegaMenuRenderer {
+    private context;
+    private menuItems;
+    private updateCallback;
+    private _settingsPanel?;
+    constructor(context: ApplicationCustomizerContext, menuItems: IMenuItem[], updateCallback: (data: IMegaMenuApplicationCustomizerProperties) => void);
+    render(container: HTMLElement): void;
+    private createSettingsItem();
+    private openSettings();
+    private createTopLevelItem(item);
+    private createTopLevelElement(item);
+    private createMegaMenu(parentItem);
+    private createCategorySection(item);
+    private attachEventListeners();
+    private attachKeyboardNavigation(heading, megaMenu);
+    private attachMouseEvents(heading, megaMenu);
+    private attachFocusManagement(heading, megaMenu);
+    private attachGlobalKeyboardNavigation();
+    private openMegaMenu(trigger, menu);
+    private closeMegaMenu(trigger, menu);
+    private toggleMegaMenu(trigger, menu);
+    private closeAllMegaMenus();
+    private focusFirstLink(megaMenu);
+    private createScreenReaderAnnouncer();
+}

lib/extensions/megaMenu/MegaMenuRenderer.js

@@ -0,0 +1,372 @@
+// tslint:disable:max-line-length
+// tslint:disable:match-default-export-name
+// tslint:disable:typedef
+// tslint:disable:variable-name
+import { SPPermission } from '@microsoft/sp-page-context';
+import { MegaMenuSettingsPanel } from './MegaMenuSettings';
+var MegaMenuRenderer = (function () {
+    function MegaMenuRenderer(context, menuItems, updateCallback) {
+        this.context = context;
+        this.menuItems = menuItems;
+        this.updateCallback = updateCallback;
+    }
+    MegaMenuRenderer.prototype.render = function (container) {
+        var _this = this;
+        // Clear any existing content
+        container.innerHTML = '';
+        container.id = 'CustomNavigation';
+        // Create the main nav element
+        var nav = document.createElement('nav');
+        nav.id = 'Mega-Menu';
+        nav.className = 'mega-menu-main';
+        nav.setAttribute('role', 'navigation');
+        nav.setAttribute('aria-label', 'Hauptnavigation');
+        // Create the top-level menubar
+        var topLevelUl = document.createElement('ul');
+        topLevelUl.setAttribute('role', 'menubar');
+        // Process each top-level menu item
+        this.menuItems.forEach(function (topLevelItem) {
+            var topLevelLi = _this.createTopLevelItem(topLevelItem);
+            topLevelUl.appendChild(topLevelLi);
+        });
+        // Only if current user has ManageWeb permissions in this website can they access the settings
+        if (this.context.pageContext.web.permissions.hasPermission(SPPermission.manageWeb)) {
+            topLevelUl.appendChild(this.createSettingsItem());
+        }
+        nav.appendChild(topLevelUl);
+        container.appendChild(nav);
+        // Attach accessibility event listeners after rendering
+        this.attachEventListeners();
+        this.createScreenReaderAnnouncer();
+    };
+    MegaMenuRenderer.prototype.createSettingsItem = function () {
+        var _this = this;
+        var li = document.createElement('li');
+        li.setAttribute('role', 'none');
+        // Verwenden eines Links-ähnlichen Buttons damit Styling identisch zu Top-Level Items ist
+        var btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'menu-item-link menu-item-settings'; // reuse same base styles
+        btn.setAttribute('role', 'menuitem');
+        btn.setAttribute('tabindex', '0');
+        btn.setAttribute('aria-haspopup', 'false');
+        btn.setAttribute('aria-label', 'Einstellungen');
+        btn.title = 'Einstellungen';
+        // Nur EIN Icon: Wenn Fabric Icons geladen sind, zeigt ms-Icon das Symbol. Fallback via aria-label für Screenreader
+        var icon = document.createElement('span');
+        icon.className = 'ms-Icon ms-Icon--Settings menu-item-settings__icon';
+        icon.setAttribute('aria-hidden', 'true');
+        btn.appendChild(icon);
+        btn.addEventListener('click', function () { return _this.openSettings(); });
+        btn.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                _this.openSettings();
+            }
+        });
+        li.appendChild(btn);
+        return li;
+    };
+    MegaMenuRenderer.prototype.openSettings = function () {
+        if (!this._settingsPanel) {
+            this._settingsPanel = new MegaMenuSettingsPanel(this.context, this.updateCallback);
+        }
+        this._settingsPanel.open();
+    };
+    // Panel logic moved to MegaMenuSettingsPanel
+    MegaMenuRenderer.prototype.createTopLevelItem = function (item) {
+        var li = document.createElement('li');
+        li.setAttribute('role', 'none');
+        // Create the top-level element (link or span)
+        var topElement = this.createTopLevelElement(item);
+        li.appendChild(topElement);
+        // If the item has children, create the mega menu
+        if (item.hasChildren() && item.items && item.items.length > 0) {
+            var megaMenu = this.createMegaMenu(item);
+            li.appendChild(megaMenu);
+        }
+        return li;
+    };
+    MegaMenuRenderer.prototype.createTopLevelElement = function (item) {
+        var element;
+        if (item.url) {
+            // Create as link
+            element = document.createElement('a');
+            element.href = item.url;
+            element.className = 'menu-item-link';
+        }
+        else {
+            // Create as span (no link)
+            element = document.createElement('span');
+            element.className = 'menu-item-text';
+            element.setAttribute('tabindex', '0');
+        }
+        element.setAttribute('role', 'menuitem');
+        element.setAttribute('aria-haspopup', 'true');
+        element.setAttribute('aria-expanded', 'false');
+        element.textContent = item.label;
+        if (item.hoverText) {
+            element.title = item.hoverText;
+        }
+        return element;
+    };
+    MegaMenuRenderer.prototype.createMegaMenu = function (parentItem) {
+        var _this = this;
+        var megaMenuDiv = document.createElement('div');
+        megaMenuDiv.className = 'mega-menu';
+        megaMenuDiv.setAttribute('role', 'menu');
+        megaMenuDiv.setAttribute('aria-label', parentItem.label + " Unterkategorien");
+        var gridDiv = document.createElement('div');
+        gridDiv.className = 'mega-menu-grid';
+        // Process second-level items (categories)
+        if (parentItem.items) {
+            parentItem.items.forEach(function (secondLevelItem) {
+                var categoryDiv = _this.createCategorySection(secondLevelItem);
+                gridDiv.appendChild(categoryDiv);
+            });
+        }
+        megaMenuDiv.appendChild(gridDiv);
+        return megaMenuDiv;
+    };
+    MegaMenuRenderer.prototype.createCategorySection = function (item) {
+        var categoryDiv = document.createElement('div');
+        categoryDiv.className = 'mega-menu-category';
+        // Create the category header (h3)
+        var h3 = document.createElement('h3');
+        if (item.url) {
+            // Category header as link
+            var link = document.createElement('a');
+            link.href = item.url;
+            link.textContent = item.label;
+            if (item.hoverText) {
+                link.title = item.hoverText;
+            }
+            h3.appendChild(link);
+        }
+        else {
+            // Category header as span (no link)
+            var span = document.createElement('span');
+            span.textContent = item.label;
+            if (item.hoverText) {
+                span.title = item.hoverText;
+            }
+            h3.appendChild(span);
+        }
+        categoryDiv.appendChild(h3);
+        // Create the third-level items list if they exist
+        if (item.hasChildren() && item.items && item.items.length > 0) {
+            var ul_1 = document.createElement('ul');
+            item.items.forEach(function (thirdLevelItem) {
+                var li = document.createElement('li');
+                var link = document.createElement('a');
+                link.href = thirdLevelItem.url || '#';
+                link.textContent = thirdLevelItem.label;
+                if (thirdLevelItem.hoverText) {
+                    link.title = thirdLevelItem.hoverText;
+                }
+                li.appendChild(link);
+                ul_1.appendChild(li);
+            });
+            categoryDiv.appendChild(ul_1);
+        }
+        return categoryDiv;
+    };
+    MegaMenuRenderer.prototype.attachEventListeners = function () {
+        var headings = document.querySelectorAll('#Mega-Menu > ul > li > a, #Mega-Menu > ul > li > span[role="menuitem"]');
+        for (var i = 0; i < headings.length; i++) {
+            var heading = headings[i];
+            var megaMenu = heading.nextElementSibling;
+            if (megaMenu && megaMenu.classList.contains('mega-menu')) {
+                this.attachKeyboardNavigation(heading, megaMenu);
+                this.attachMouseEvents(heading, megaMenu);
+                this.attachFocusManagement(heading, megaMenu);
+            }
+        }
+        // Global keyboard navigation
+        this.attachGlobalKeyboardNavigation();
+    };
+    MegaMenuRenderer.prototype.attachKeyboardNavigation = function (heading, megaMenu) {
+        var _this = this;
+        heading.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter') {
+                // Enter: Navigation (nur bei Links ohne Mega-Menu-Override)
+                if (heading.tagName === 'A') {
+                    // Lasse normale Link-Navigation zu (KEIN preventDefault!)
+                    return;
+                }
+                else {
+                    // Bei span: Toggle Menu
+                    e.preventDefault();
+                    _this.toggleMegaMenu(heading, megaMenu);
+                }
+            }
+            else if (e.key === ' ') {
+                // Space: Toggle Dropdown (immer)
+                e.preventDefault();
+                _this.toggleMegaMenu(heading, megaMenu);
+            }
+            else if (e.key === 'ArrowDown') {
+                // Pfeil runter: Menü öffnen + erster Link
+                e.preventDefault();
+                _this.openMegaMenu(heading, megaMenu);
+                _this.focusFirstLink(megaMenu);
+            }
+            else if (e.key === 'ArrowUp') {
+                // Pfeil hoch: Menü schließen
+                e.preventDefault();
+                _this.closeMegaMenu(heading, megaMenu);
+            }
+            else if (e.key === 'Escape') {
+                // Escape: Menü schließen
+                e.preventDefault();
+                _this.closeMegaMenu(heading, megaMenu);
+                heading.focus();
+            }
+        });
+        // Click Event für Top-Level Links - NORMALE Navigation erlauben
+        if (heading.tagName === 'A') {
+            heading.addEventListener('click', function (e) {
+                // Links sollen normal navigieren, nicht das Mega-Menu toglen
+                // Wenn der User das Menu öffnen will, soll er Space oder Pfeil↓ nutzen
+                console.log('Link geklickt:', heading.href);
+                // KEIN preventDefault() - normale Link-Navigation
+            });
+        }
+        // Focus Management - KEIN automatisches Öffnen oder Schließen
+        heading.addEventListener('focus', function () {
+            console.log('Focus auf:', heading.textContent);
+            // Einfach nur fokussiert - keine automatischen Aktionen!
+        });
+    };
+    MegaMenuRenderer.prototype.attachMouseEvents = function (heading, megaMenu) {
+        var _this = this;
+        var parentLi = heading.parentElement;
+        parentLi.addEventListener('mouseenter', function () {
+            _this.openMegaMenu(heading, megaMenu);
+        });
+        parentLi.addEventListener('mouseleave', function () {
+            _this.closeMegaMenu(heading, megaMenu);
+        });
+    };
+    MegaMenuRenderer.prototype.attachFocusManagement = function (heading, megaMenu) {
+        var _this = this;
+        // Focus-Verlust-Behandlung - vereinfacht
+        megaMenu.addEventListener('focusout', function (e) {
+            // Kurz warten, um zu prüfen ob Focus innerhalb des Mega-Menus bleibt
+            setTimeout(function () {
+                var focusedElement = document.activeElement;
+                var isInsideThisMenu = megaMenu.contains(focusedElement);
+                var isOnThisTrigger = focusedElement === heading;
+                var isInAnyMegaMenu = focusedElement.closest('.mega-menu');
+                var isOnAnyTopLevel = focusedElement.closest('#Mega-Menu > ul > li > a, #Mega-Menu > ul > li > span');
+                // Nur schließen wenn Focus komplett außerhalb der Navigation ist
+                if (!isInsideThisMenu && !isOnThisTrigger && !isInAnyMegaMenu && !isOnAnyTopLevel) {
+                    console.log('Schließe Menu wegen Focus-Verlust');
+                    _this.closeMegaMenu(heading, megaMenu);
+                }
+            }, 150);
+        });
+    };
+    MegaMenuRenderer.prototype.attachGlobalKeyboardNavigation = function () {
+        var _this = this;
+        document.addEventListener('keydown', function (e) {
+            var activeElement = document.activeElement;
+            if (e.key === 'Escape') {
+                var openMenu = document.querySelector('.mega-menu[aria-expanded="true"]');
+                if (openMenu) {
+                    var triggerLink = openMenu.previousElementSibling;
+                    _this.closeMegaMenu(triggerLink, openMenu);
+                    triggerLink.focus();
+                }
+            }
+            // Tab-Navigation: Nur bei spezifischen Übergängen eingreifen
+            if (e.key === 'Tab') {
+                // Von Top-Level zum ersten Link im offenen Menu
+                if (!e.shiftKey) {
+                    var currentTopLevel = activeElement.closest('#Mega-Menu > ul > li > a, #Mega-Menu > ul > li > span');
+                    if (currentTopLevel) {
+                        var parentLi = currentTopLevel.closest('li');
+                        var megaMenu = parentLi.querySelector('.mega-menu.js-open');
+                        if (megaMenu) {
+                            // Nur eingreifen wenn wir vom Trigger weg-tabben
+                            e.preventDefault();
+                            var firstLink = megaMenu.querySelector('a');
+                            if (firstLink) {
+                                firstLink.focus();
+                            }
+                            return;
+                        }
+                    }
+                }
+                // Shift+Tab: Vom ersten Link im Menu zurück zum Trigger
+                if (e.shiftKey) {
+                    var megaMenu = activeElement.closest('.mega-menu');
+                    if (megaMenu && megaMenu.classList.contains('js-open')) {
+                        var allLinksInMenu = megaMenu.querySelectorAll('a');
+                        var firstLinkInMenu = allLinksInMenu[0];
+                        // Nur eingreifen wenn wir beim ersten Link sind
+                        if (activeElement === firstLinkInMenu) {
+                            e.preventDefault();
+                            var triggerElement = megaMenu.previousElementSibling;
+                            triggerElement.focus();
+                            return;
+                        }
+                    }
+                }
+                // Ansonsten: Normale Tab-Navigation nicht unterbrechen!
+            }
+        });
+    };
+    MegaMenuRenderer.prototype.openMegaMenu = function (trigger, menu) {
+        trigger.setAttribute('aria-expanded', 'true');
+        menu.setAttribute('aria-expanded', 'true');
+        menu.classList.add('js-open');
+        console.log('Menu geöffnet:', trigger.textContent);
+    };
+    MegaMenuRenderer.prototype.closeMegaMenu = function (trigger, menu) {
+        trigger.setAttribute('aria-expanded', 'false');
+        menu.setAttribute('aria-expanded', 'false');
+        menu.classList.remove('js-open');
+        console.log('Menu geschlossen:', trigger.textContent);
+    };
+    MegaMenuRenderer.prototype.toggleMegaMenu = function (trigger, menu) {
+        var isOpen = trigger.getAttribute('aria-expanded') === 'true';
+        if (isOpen) {
+            this.closeMegaMenu(trigger, menu);
+        }
+        else {
+            this.closeAllMegaMenus();
+            this.openMegaMenu(trigger, menu);
+        }
+    };
+    MegaMenuRenderer.prototype.closeAllMegaMenus = function () {
+        var allTriggers = document.querySelectorAll('#Mega-Menu > ul > li > a[aria-expanded="true"], #Mega-Menu > ul > li > span[aria-expanded="true"]');
+        for (var i = 0; i < allTriggers.length; i++) {
+            var trigger = allTriggers[i];
+            var menu = trigger.nextElementSibling;
+            if (menu) {
+                this.closeMegaMenu(trigger, menu);
+            }
+        }
+    };
+    // removed unused closeOtherMegaMenus (was previously declared but not used)
+    MegaMenuRenderer.prototype.focusFirstLink = function (megaMenu) {
+        var firstLink = megaMenu.querySelector('a');
+        if (firstLink) {
+            firstLink.focus();
+        }
+    };
+    MegaMenuRenderer.prototype.createScreenReaderAnnouncer = function () {
+        // Screenreader-Ankündigungen
+        var srAnnouncer = document.createElement('div');
+        srAnnouncer.setAttribute('aria-live', 'polite');
+        srAnnouncer.setAttribute('aria-atomic', 'true');
+        srAnnouncer.className = 'sr-only';
+        document.body.appendChild(srAnnouncer);
+        console.log('Screenreader-Ankündigungen sind jetzt bereit');
+    };
+    return MegaMenuRenderer;
+}());
+export { MegaMenuRenderer };
+
+//# sourceMappingURL=MegaMenuRenderer.js.map

lib/extensions/megaMenu/MegaMenuSettings.d.ts

@@ -0,0 +1,25 @@
+import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
+import { IMegaMenuApplicationCustomizerProperties } from './MegaMenuApplicationCustomizer';
+export declare class MegaMenuSettingsPanel {
+    private context;
+    private dataUpdated;
+    private _service;
+    private _ucaId;
+    private _panelElement;
+    private _overlayElement;
+    constructor(context: ApplicationCustomizerContext, dataUpdated: (data: IMegaMenuApplicationCustomizerProperties) => void);
+    open(): Promise<void>;
+    close(): void;
+    private readApplicationCustomizerProps();
+    private saveApplicationCustomizerProps(componentProps);
+    private _createPanel(props);
+    private _getMarkup(termSet, cssUrl);
+    private _save();
+    /**
+     * Hält den Fokus innerhalb des Settings-Panels gefangen (Focus Trapping).
+     * Wichtig für Accessibility: Verhindert, dass Tab-Navigation aus dem modalen Dialog herausführt.
+     * Bei Tab am letzten Element → springt zum ersten, bei Shift+Tab am ersten → springt zum letzten.
+     */
+    private _trapFocus(e);
+    private _escape(value);
+}

lib/extensions/megaMenu/MegaMenuSettings.js

@@ -0,0 +1,223 @@
+// tslint:disable:max-line-length export-name
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [0, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { UserCustomActionMegaMenuId } from './MegaMenuApplicationCustomizer';
+import { UserCustomActionService } from '../../services/UserCustomActionService/UserCustomActionService';
+import { UserCustomActionScope } from '../../services/UserCustomActionService/UserCustomActionScope';
+var MegaMenuSettingsPanel = (function () {
+    function MegaMenuSettingsPanel(context, dataUpdated) {
+        this.context = context;
+        this.dataUpdated = dataUpdated;
+        this._panelElement = undefined;
+        this._overlayElement = undefined;
+        this._service = new UserCustomActionService(this.context);
+    }
+    MegaMenuSettingsPanel.prototype.open = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var currentProps;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this._panelElement) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, this.readApplicationCustomizerProps()];
+                    case 1:
+                        currentProps = _a.sent();
+                        this._createPanel(currentProps);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    MegaMenuSettingsPanel.prototype.close = function () {
+        if (this._panelElement) {
+            this._panelElement.remove();
+            this._panelElement = undefined;
+        }
+        if (this._overlayElement) {
+            this._overlayElement.remove();
+            this._overlayElement = undefined;
+        }
+        // Fokus entfernen (kein sichtbarer Fokus-Rahmen nach Dialog-Schließung)
+        document.body.focus();
+        document.body.blur();
+    };
+    MegaMenuSettingsPanel.prototype.readApplicationCustomizerProps = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var ucas, candidates, uca;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this._service.getUserCustomActions(UserCustomActionScope.Site)];
+                    case 1:
+                        ucas = _a.sent();
+                        candidates = ucas.filter(function (uca) { return uca.ClientSideComponentId === UserCustomActionMegaMenuId; });
+                        if (candidates.length) {
+                            uca = candidates[0];
+                            this._ucaId = uca.Id;
+                            return [2 /*return*/, JSON.parse(uca.ClientSideComponentProperties)];
+                        }
+                        else {
+                            console.error('UserCustomAction für das Megamenü nicht gefunden. Alles ist sinnlos.');
+                            return [2 /*return*/, {
+                                    termSetName: '',
+                                    cssUrl: ''
+                                }];
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    MegaMenuSettingsPanel.prototype.saveApplicationCustomizerProps = function (componentProps) {
+        return __awaiter(this, void 0, void 0, function () {
+            var newUserCustomActionsProperty, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        newUserCustomActionsProperty = {
+                            ClientSideComponentProperties: JSON.stringify(componentProps)
+                        };
+                        return [4 /*yield*/, this._service.updateUserCustomAction(UserCustomActionScope.Site, this._ucaId, newUserCustomActionsProperty)];
+                    case 1:
+                        _a.sent();
+                        this.dataUpdated(componentProps);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        e_1 = _a.sent();
+                        console.error(e_1);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    MegaMenuSettingsPanel.prototype._createPanel = function (props) {
+        var _this = this;
+        var overlay = document.createElement('div');
+        overlay.className = 'mm-settings-overlay';
+        overlay.tabIndex = -1;
+        overlay.onclick = function () { return _this.close(); };
+        this._overlayElement = overlay;
+        var panel = document.createElement('div');
+        panel.className = 'mm-settings-panel';
+        panel.setAttribute('role', 'dialog');
+        panel.setAttribute('aria-modal', 'true');
+        panel.setAttribute('aria-label', 'MegaMenu Einstellungen');
+        panel.innerHTML = this._getMarkup(props.termSetName, props.cssUrl);
+        this._panelElement = panel;
+        document.body.appendChild(overlay);
+        document.body.appendChild(panel);
+        var closeBtn = panel.querySelector('.mm-settings-close');
+        var cancelBtn = panel.querySelector('.mm-settings-cancel');
+        var saveBtn = panel.querySelector('.mm-settings-save');
+        var firstInput = panel.querySelector('#mm-setting-termset');
+        if (closeBtn) {
+            closeBtn.onclick = function () { return _this.close(); };
+        }
+        if (cancelBtn) {
+            cancelBtn.onclick = function () { return _this.close(); };
+        }
+        if (saveBtn) {
+            saveBtn.onclick = function () { return _this._save(); };
+        }
+        panel.addEventListener('keydown', function (e) {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                _this.close();
+            }
+            else if (e.key === 'Tab') {
+                _this._trapFocus(e);
+            }
+        });
+        setTimeout(function () { if (firstInput) {
+            firstInput.focus();
+        } }, 0);
+    };
+    MegaMenuSettingsPanel.prototype._getMarkup = function (termSet, cssUrl) {
+        return "<div class='mm-settings-header'>\n            <h2 class='mm-settings-title'>Einstellungen</h2>\n            <button type='button' class='mm-settings-close' aria-label='Schlie\u00DFen'>\u00D7</button>\n            </div>\n            <div class='mm-settings-body'>\n              <div class='mm-settings-field'>\n                <label for='mm-setting-termset'>Name des Navigations-Termsets</label>\n                <input id='mm-setting-termset' type='text' value='" + this._escape(termSet) + "' />\n              </div>\n              <div class='mm-settings-field'>\n                <label for='mm-setting-css'>Pfad zu zus\u00E4tzlicher CSS-Datei</label>\n                <input id='mm-setting-css' type='text' value='" + this._escape(cssUrl) + "' />\n              </div>\n            </div>\n            <div class='mm-settings-footer'>\n              <button type='button' class='mm-settings-save ms-Button ms-Button--primary'><span>Speichern</span></button>\n              <button type='button' class='mm-settings-cancel ms-Button'><span>Abbrechen</span></button>\n            </div>";
+    };
+    MegaMenuSettingsPanel.prototype._save = function () {
+        if (!this._panelElement) {
+            return;
+        }
+        var termSetInput = this._panelElement.querySelector('#mm-setting-termset');
+        var cssInput = this._panelElement.querySelector('#mm-setting-css');
+        this.saveApplicationCustomizerProps({
+            termSetName: termSetInput && termSetInput.value ? termSetInput.value : '',
+            cssUrl: cssInput && cssInput.value ? cssInput.value : ''
+        });
+        this.close();
+    };
+    /**
+     * Hält den Fokus innerhalb des Settings-Panels gefangen (Focus Trapping).
+     * Wichtig für Accessibility: Verhindert, dass Tab-Navigation aus dem modalen Dialog herausführt.
+     * Bei Tab am letzten Element → springt zum ersten, bei Shift+Tab am ersten → springt zum letzten.
+     */
+    MegaMenuSettingsPanel.prototype._trapFocus = function (e) {
+        if (!this._panelElement) {
+            return;
+        }
+        var focusable = this._panelElement.querySelectorAll('button, input');
+        if (!focusable || focusable.length === 0) {
+            return;
+        }
+        var first = focusable[0];
+        var last = focusable[focusable.length - 1];
+        var active = document.activeElement;
+        if (e.shiftKey && active === first) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && active === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    };
+    MegaMenuSettingsPanel.prototype._escape = function (value) {
+        if (value) {
+            return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        }
+        else {
+            return '';
+        }
+    };
+    return MegaMenuSettingsPanel;
+}());
+export { MegaMenuSettingsPanel };
+
+//# sourceMappingURL=MegaMenuSettings.js.map

lib/extensions/megaMenu/loc/en-us.js

@@ -0,0 +1,5 @@
+define([], function() {
+  return {
+    "Title": "MegaMenuApplicationCustomizer"
+  }
+});