@ardimedia/angular-portal-azure 0.2.346 → 0.3.1

package/fesm2022/ardimedia-angular-portal-azure.mjs

@@ -0,0 +1,1576 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, inject, makeEnvironmentProviders, APP_INITIALIZER, input, output, Component, ElementRef, Injector, effect, afterNextRender } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+function clearStatusBar() {
+    return { text: '', style: 'none' };
+}
+function statusBarInfo(text) {
+    return { text, style: 'info' };
+}
+function statusBarError(text) {
+    return { text, style: 'error' };
+}
+function statusBarSuccess(text) {
+    return { text, style: 'success' };
+}
+
+/** Creates a blade definition with sensible defaults */
+function createBlade(path, title, width = 315) {
+    return {
+        path: path.toLowerCase(),
+        title,
+        subtitle: '',
+        width,
+        isInnerHtml: true,
+        commands: [],
+        statusBar: clearStatusBar(),
+    };
+}
+
+/** Creates a command with sensible defaults (visible, enabled, no-op action) */
+function createCommand(key, label, action, icon) {
+    return { key, label, visible: true, enabled: true, icon, action };
+}
+
+/** Creates a data blade definition with sensible defaults */
+function createDataBlade(path, title, width = 315) {
+    return {
+        ...createBlade(path, title, width),
+        item: {},
+        items: [],
+        lifecycle: {},
+    };
+}
+/**
+ * Execute a load-item operation with lifecycle hooks and status bar updates.
+ * Replaces the BladeData.loadItem() template method from v0.2.346.
+ */
+async function executeLoadItem(blade, loadFn) {
+    blade.lifecycle.onLoadItem?.();
+    blade.statusBar = statusBarInfo('Laden...');
+    try {
+        const result = await loadFn();
+        blade.item = result;
+        blade.statusBar = clearStatusBar();
+        blade.lifecycle.onLoadedItem?.();
+        return result;
+    }
+    catch (ex) {
+        blade.statusBar = statusBarError(ex.message || 'Fehler beim Laden');
+        blade.lifecycle.onLoadItemError?.(ex);
+    }
+}
+/**
+ * Execute a load-items operation with lifecycle hooks and status bar updates.
+ */
+async function executeLoadItems(blade, loadFn) {
+    blade.lifecycle.onLoadItems?.();
+    blade.statusBar = statusBarInfo('Laden...');
+    try {
+        const result = await loadFn();
+        blade.items = result;
+        blade.statusBar = clearStatusBar();
+        blade.lifecycle.onLoadedItems?.();
+        return result;
+    }
+    catch (ex) {
+        blade.statusBar = statusBarError(ex.message || 'Fehler beim Laden');
+        blade.lifecycle.onLoadItemsError?.(ex);
+    }
+}
+/**
+ * Execute a save-item operation with lifecycle hooks and status bar updates.
+ */
+async function executeSaveItem(blade, saveFn) {
+    if (blade.lifecycle.isFormValid && !blade.lifecycle.isFormValid()) {
+        return;
+    }
+    blade.lifecycle.onSaveItem?.();
+    blade.statusBar = statusBarInfo('Speichern...');
+    try {
+        const result = await saveFn();
+        blade.item = result;
+        blade.statusBar = statusBarSuccess('Gespeichert');
+        blade.lifecycle.onSavedItem?.();
+        return result;
+    }
+    catch (ex) {
+        blade.statusBar = statusBarError(ex.message || 'Fehler beim Speichern');
+        blade.lifecycle.onSaveItemError?.(ex);
+    }
+}
+/**
+ * Execute a delete-item operation with lifecycle hooks and status bar updates.
+ * Returns true if the blade should be closed after deletion.
+ */
+async function executeDeleteItem(blade, deleteFn) {
+    blade.lifecycle.onDeleteItem?.();
+    blade.statusBar = statusBarInfo('Loeschen...');
+    try {
+        await deleteFn();
+        blade.statusBar = statusBarSuccess('Geloescht');
+        const shouldClose = blade.lifecycle.onDeletedItem?.() ?? true;
+        return shouldClose;
+    }
+    catch (ex) {
+        blade.statusBar = statusBarError(ex.message || 'Fehler beim Loeschen');
+        blade.lifecycle.onDeleteItemError?.(ex);
+        return false;
+    }
+}
+
+function createNavItem(title, bladePath, cssClass) {
+    return { title, bladePath, cssClass, isVisible: true };
+}
+
+/**
+ * Tile size enum matching v0.2.346 TileSizes.
+ * The names are used in CSS class names (e.g. 'fxs-tilesize-normal').
+ */
+var TileSize;
+(function (TileSize) {
+    TileSize["Small"] = "small";
+    TileSize["Mini"] = "mini";
+    TileSize["Normal"] = "normal";
+    TileSize["HeroWide"] = "herowide";
+})(TileSize || (TileSize = {}));
+/** Pixel dimensions for each tile size */
+const TILE_DIMENSIONS = {
+    [TileSize.Small]: { width: 90, height: 90 },
+    [TileSize.Mini]: { width: 180, height: 90 },
+    [TileSize.Normal]: { width: 180, height: 180 },
+    [TileSize.HeroWide]: { width: 540, height: 360 },
+};
+function createTile(title, bladePath, size = TileSize.Normal) {
+    return { title, bladePath, size };
+}
+
+/** Computed full name from first and last name */
+function getUserDisplayName(account) {
+    return `${account.firstName || ''} ${account.lastName || ''}`.trim();
+}
+
+function createNotificationPanel() {
+    return {
+        path: '',
+        width: 250,
+        isVisible: false,
+        backgroundColor: '#32383f',
+    };
+}
+
+/**
+ * Lay out tiles in a flowing grid pattern matching v0.2.346's Tiles.addTile() algorithm.
+ * Tiles wrap after 540px width (3 normal tiles or 1 hero-wide tile).
+ */
+function layoutTiles(tiles) {
+    const maxWidth = 720;
+    let nextLeft = 0;
+    let nextTop = 0;
+    let columnHeightMax = 0;
+    return tiles.map((tile) => {
+        const dim = TILE_DIMENSIONS[tile.size];
+        // Wrap to next row if tile exceeds max width
+        if (nextLeft + dim.width > maxWidth && nextLeft > 0) {
+            nextLeft = 0;
+            nextTop += columnHeightMax;
+            columnHeightMax = 0;
+        }
+        const positioned = {
+            ...tile,
+            left: nextLeft,
+            top: nextTop,
+        };
+        nextLeft += dim.width;
+        if (dim.height > columnHeightMax) {
+            columnHeightMax = dim.height;
+        }
+        return positioned;
+    });
+}
+function createPanorama(title) {
+    return {
+        title,
+        isVisible: true,
+        isTilesLoaded: false,
+        showTiles: true,
+        hideTileIfOnlyOne: true,
+        tiles: [],
+    };
+}
+
+function createAvatarMenu() {
+    return {
+        userAccount: { userName: '', firstName: '', lastName: '' },
+        isOpen: false,
+        items: [],
+    };
+}
+
+/**
+ * Multi-word search filter for grid/list blades.
+ * Ported from BladeGrid.onFilter() in v0.2.346.
+ *
+ * Splits the search string by spaces and checks if ALL words
+ * are found in ANY string property of the item.
+ */
+function filterItems(items, searchText) {
+    if (!searchText || !searchText.trim()) {
+        return items;
+    }
+    const words = searchText.toLowerCase().split(/\s+/).filter(Boolean);
+    return items.filter((item) => {
+        const allValues = getAllStringValues(item).toLowerCase();
+        return words.every((word) => allValues.includes(word));
+    });
+}
+/** Concatenate all string property values of an object into one searchable string */
+function getAllStringValues(obj) {
+    if (obj === null || obj === undefined)
+        return '';
+    if (typeof obj === 'string')
+        return obj;
+    if (typeof obj !== 'object')
+        return String(obj);
+    return Object.values(obj)
+        .filter((v) => typeof v === 'string')
+        .join(' ');
+}
+
+/**
+ * Central state service for the angular-portal-azure library.
+ * Replaces v0.2.346's PortalService + Panorama + AreaNotification state.
+ *
+ * All state is managed via Angular signals for reactive updates.
+ */
+class PortalService {
+    /** The blade stack — ordered left-to-right */
+    blades = signal([], ...(ngDevMode ? [{ debugName: "blades" }] : []));
+    /** Panorama (startboard/dashboard) state */
+    panorama = signal(createPanorama(''), ...(ngDevMode ? [{ debugName: "panorama" }] : []));
+    /** Notification panel state */
+    notification = signal(createNotificationPanel(), ...(ngDevMode ? [{ debugName: "notification" }] : []));
+    /** Avatar menu state */
+    avatarMenu = signal(createAvatarMenu(), ...(ngDevMode ? [{ debugName: "avatarMenu" }] : []));
+    /** Shared parameter for passing data between blades */
+    parameter = signal({ action: 'none', itemId: 0 }, ...(ngDevMode ? [{ debugName: "parameter" }] : []));
+    /** Portal theme identifier */
+    theme = signal('azure-blue', ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    /** Whether the panorama is visible (true when no blades are open) */
+    isPanoramaVisible = computed(() => this.blades().length === 0, ...(ngDevMode ? [{ debugName: "isPanoramaVisible" }] : []));
+    /** Number of open blades */
+    bladeCount = computed(() => this.blades().length, ...(ngDevMode ? [{ debugName: "bladeCount" }] : []));
+    /** Positioned tiles with layout coordinates */
+    positionedTiles = computed(() => {
+        const pano = this.panorama();
+        return pano.tiles;
+    }, ...(ngDevMode ? [{ debugName: "positionedTiles" }] : []));
+    /**
+     * Initialize the portal with configuration.
+     * Called by providePortalAzure() during app bootstrap.
+     */
+    configure(config) {
+        this.panorama.update((p) => ({
+            ...p,
+            title: config.title,
+            tiles: config.tiles ? layoutTiles(config.tiles) : [],
+            isTilesLoaded: !!config.tiles,
+            showTiles: true,
+        }));
+        if (config.userAccount) {
+            this.avatarMenu.update((m) => ({
+                ...m,
+                userAccount: config.userAccount,
+            }));
+        }
+        if (config.theme) {
+            this.theme.set(config.theme);
+        }
+    }
+    /** Update the portal title */
+    setTitle(title) {
+        this.panorama.update((p) => ({ ...p, title }));
+    }
+    /** Update the user account */
+    setUserAccount(userAccount) {
+        this.avatarMenu.update((m) => ({ ...m, userAccount }));
+    }
+    /** Set tiles on the startboard */
+    setTiles(tiles) {
+        this.panorama.update((p) => ({
+            ...p,
+            tiles: layoutTiles(tiles),
+            isTilesLoaded: true,
+        }));
+    }
+    /** Set blade parameter for inter-blade communication */
+    setParameter(param) {
+        this.parameter.update((p) => ({ ...p, ...param }));
+    }
+    /** Clear the blade parameter back to defaults */
+    clearParameter() {
+        this.parameter.set({ action: 'none', itemId: 0 });
+    }
+    // --- Notification panel ---
+    /** Show the notification panel */
+    showNotification(path, width = 250) {
+        this.notification.update((n) => ({
+            ...n,
+            path,
+            width,
+            isVisible: true,
+        }));
+    }
+    /** Hide the notification panel */
+    hideNotification() {
+        this.notification.update((n) => ({
+            ...n,
+            path: '',
+            isVisible: false,
+        }));
+    }
+    // --- Avatar menu ---
+    /** Toggle avatar menu open/close */
+    toggleAvatarMenu() {
+        this.avatarMenu.update((m) => ({ ...m, isOpen: !m.isOpen }));
+    }
+    /** Close avatar menu */
+    closeAvatarMenu() {
+        this.avatarMenu.update((m) => ({ ...m, isOpen: false }));
+    }
+    /** Set avatar menu items */
+    setAvatarMenuItems(items) {
+        this.avatarMenu.update((m) => ({ ...m, items }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PortalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PortalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PortalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Blade stack management service.
+ * Replaces v0.2.346's AreaBlades class.
+ *
+ * Manages the blade stack: adding, removing, cascade-closing,
+ * and panorama visibility toggling.
+ */
+class BladeService {
+    portal = inject(PortalService);
+    /**
+     * Set the first blade (e.g., when opening a top-level item from a tile).
+     * Clears all existing blades, hides panorama, and adds the new blade.
+     *
+     * Ported from AreaBlades.setFirstBlade() in v0.2.346.
+     */
+    setFirstBlade(path, title = '', width = 315) {
+        this.portal.blades.set([]);
+        const blade = createBlade(path.toLowerCase(), title, width);
+        this.portal.blades.set([blade]);
+        return blade;
+    }
+    /**
+     * Add a blade to the stack. If senderPath is provided, all blades
+     * after the sender are removed first (cascade close).
+     *
+     * Ported from AreaBlades.addBlade() in v0.2.346.
+     */
+    addBlade(path, senderPath = '', title = '', width = 315) {
+        if (!path)
+            return undefined;
+        const normalizedPath = path.toLowerCase();
+        const blades = this.portal.blades();
+        // Check if blade already exists
+        const existing = blades.find((b) => b.path === normalizedPath);
+        if (existing) {
+            return existing;
+        }
+        // Cascade close: remove blades after the sender
+        if (senderPath) {
+            this.clearChild(senderPath);
+        }
+        const blade = createBlade(normalizedPath, title, width);
+        this.portal.blades.update((b) => [...b, blade]);
+        return blade;
+    }
+    /**
+     * Open a blade from a navigation event (e.g., tile click, nav item click).
+     * Wraps addBlade with AddBladeEventArgs for compatibility.
+     */
+    openBlade(args, title = '', width = 315) {
+        return this.addBlade(args.path, args.pathSender, title, width);
+    }
+    /**
+     * Clear all blades. Shows panorama if appropriate.
+     * Ported from AreaBlades.clearAll() in v0.2.346.
+     */
+    clearAll() {
+        this.portal.blades.set([]);
+    }
+    /**
+     * Remove a specific blade and all blades to its right.
+     * This is what happens when a blade is closed.
+     *
+     * Ported from AreaBlades.clearPath() in v0.2.346.
+     */
+    clearPath(path) {
+        const normalizedPath = path.toLowerCase();
+        const blades = this.portal.blades();
+        const index = blades.findIndex((b) => b.path === normalizedPath);
+        if (index >= 0) {
+            this.portal.blades.set(blades.slice(0, index));
+        }
+        else {
+            // Check notification area
+            const notif = this.portal.notification();
+            if (notif.path === normalizedPath) {
+                this.portal.hideNotification();
+            }
+        }
+    }
+    /**
+     * Remove all blades AFTER a given path (keeps the blade itself).
+     * Used for cascade close when a blade opens a child.
+     *
+     * Ported from AreaBlades.clearChild() in v0.2.346.
+     */
+    clearChild(path) {
+        if (!path)
+            return;
+        const normalizedPath = path.toLowerCase();
+        const blades = this.portal.blades();
+        const index = blades.findIndex((b) => b.path === normalizedPath);
+        if (index >= 0) {
+            this.portal.blades.set(blades.slice(0, index + 1));
+        }
+    }
+    /**
+     * Remove blades at and beyond a specific 1-based level.
+     * Ported from AreaBlades.clearLevel() in v0.2.346.
+     */
+    clearLevel(level) {
+        const adjustedLevel = level <= 0 ? 1 : level;
+        const blades = this.portal.blades();
+        if (adjustedLevel <= blades.length) {
+            this.portal.blades.set(blades.slice(0, adjustedLevel - 1));
+        }
+    }
+    /**
+     * Remove only the last (rightmost) blade.
+     * Ported from AreaBlades.clearLastLevel() in v0.2.346.
+     */
+    clearLastLevel() {
+        const blades = this.portal.blades();
+        if (blades.length > 0) {
+            this.portal.blades.set(blades.slice(0, -1));
+        }
+    }
+    /**
+     * Close a specific blade by its definition reference.
+     * Removes the blade and all blades to its right.
+     */
+    closeBlade(blade) {
+        this.clearPath(blade.path);
+    }
+    /**
+     * Get a blade by path, if it exists in the stack.
+     */
+    getBlade(path) {
+        return this.portal.blades().find((b) => b.path === path.toLowerCase());
+    }
+    /**
+     * Check if a blade with the given path is currently open.
+     */
+    isBladOpen(path) {
+        return this.portal.blades().some((b) => b.path === path.toLowerCase());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BladeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BladeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BladeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Provide the angular-portal-azure library configuration.
+ *
+ * Usage in app.config.ts:
+ * ```typescript
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     providePortalAzure({
+ *       title: 'My Portal',
+ *       tiles: [...],
+ *       theme: 'azure-blue',
+ *     }),
+ *   ],
+ * };
+ * ```
+ *
+ * New in v0.3.0 — no equivalent in v0.2.346 (which used PortalShell constructor).
+ */
+function providePortalAzure(config) {
+    return makeEnvironmentProviders([
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory: () => {
+                const portalService = inject(PortalService);
+                return () => portalService.configure(config);
+            },
+        },
+    ]);
+}
+
+/**
+ * Individual dashboard tile.
+ * Ported from the tile section in home.html (v0.2.346).
+ *
+ * Usage:
+ * ```html
+ * <apa-tile [tile]="myTile" (tileClick)="onTileClick($event)" />
+ * ```
+ */
+class TileComponent {
+    tile = input.required(...(ngDevMode ? [{ debugName: "tile" }] : []));
+    tileClick = output();
+    onClick() {
+        this.tileClick.emit(this.tile());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TileComponent, isStandalone: true, selector: "apa-tile", inputs: { tile: { classPropertyName: "tile", publicName: "tile", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tileClick: "tileClick" }, ngImport: i0, template: `
+    <section
+      class="fxs-tile fx-rightClick fxs-flowlayout-element"
+      [class.fxs-tilesize-normal]="tile().size === 'normal'"
+      [class.fxs-tilesize-mini]="tile().size === 'mini'"
+      [class.fxs-tilesize-herowide]="tile().size === 'herowide'"
+      [class.fxs-tilesize-small]="tile().size === 'small'">
+      <div class="fxs-part fxs-part-clickable" (click)="onClick()" style="cursor:pointer;">
+        <header class="fxs-part-title">
+          <h2 class="msportalfx-tooltip-overflow">{{ tile().title }}</h2>
+          @if (tile().subtitle) {
+            <h3 class="msportalfx-tooltip-overflow">{{ tile().subtitle }}</h3>
+          }
+        </header>
+        <section class="fxs-part-content css-scope-HubsExtension"></section>
+      </div>
+      <div class="fxs-tile-overlay"></div>
+    </section>
+  `, isInline: true, styles: [":host{display:contents}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'apa-tile', standalone: true, template: `
+    <section
+      class="fxs-tile fx-rightClick fxs-flowlayout-element"
+      [class.fxs-tilesize-normal]="tile().size === 'normal'"
+      [class.fxs-tilesize-mini]="tile().size === 'mini'"
+      [class.fxs-tilesize-herowide]="tile().size === 'herowide'"
+      [class.fxs-tilesize-small]="tile().size === 'small'">
+      <div class="fxs-part fxs-part-clickable" (click)="onClick()" style="cursor:pointer;">
+        <header class="fxs-part-title">
+          <h2 class="msportalfx-tooltip-overflow">{{ tile().title }}</h2>
+          @if (tile().subtitle) {
+            <h3 class="msportalfx-tooltip-overflow">{{ tile().subtitle }}</h3>
+          }
+        </header>
+        <section class="fxs-part-content css-scope-HubsExtension"></section>
+      </div>
+      <div class="fxs-tile-overlay"></div>
+    </section>
+  `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { tile: [{ type: i0.Input, args: [{ isSignal: true, alias: "tile", required: true }] }], tileClick: [{ type: i0.Output, args: ["tileClick"] }] } });
+
+/**
+ * Panorama (startboard/dashboard) component.
+ * Ported from the fxs-panorama-homearea section in home.html (v0.2.346).
+ *
+ * Displays tiles on the startboard. When a tile is clicked, it opens
+ * the first blade via BladeService.setFirstBlade().
+ *
+ * Usage:
+ * ```html
+ * <apa-panorama />
+ * ```
+ */
+class PanoramaComponent {
+    portal = inject(PortalService);
+    bladeService = inject(BladeService);
+    panorama = this.portal.panorama;
+    onTileClick(tile) {
+        this.bladeService.setFirstBlade(tile.bladePath, tile.title);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PanoramaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PanoramaComponent, isStandalone: true, selector: "apa-panorama", ngImport: i0, template: `
+    @if (portal.isPanoramaVisible()) {
+      <div class="fxs-panorama-homearea" [class.collapsed]="!panorama().showTiles">
+        <div class="fxs-startboard-target fxs-startboard fx-rightClick" [class.collapsed]="!panorama().showTiles">
+          @if (panorama().tiles.length === 0 && panorama().isTilesLoaded) {
+            <div class="fxs-part fxs-part-clickable" style="background-color:var(--apa-surface-raised); padding:25px; max-width:800px; margin-bottom:15px; height:auto;">
+              <header class="fxs-part-title" style="color:var(--apa-text)">
+                <h3 class="msportalfx-tooltip-overflow">Keine Applikationen zugeordnet</h3>
+                <p class="msportalfx-tooltip-overflow" style="margin:0;padding:0">
+                  Wenden Sie sich bitte an den Administrator damit die entsprechenden Applikationen zugeordnet werden koennen.
+                </p>
+              </header>
+            </div>
+          }
+          <div class="fxs-startboard-layout fxs-flowlayout">
+            <div class="fxs-flowlayout-childcontainer">
+              @for (tile of panorama().tiles; track tile.bladePath) {
+                <apa-tile [tile]="tile" (tileClick)="onTileClick($event)" />
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: TileComponent, selector: "apa-tile", inputs: ["tile"], outputs: ["tileClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PanoramaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'apa-panorama', standalone: true, imports: [TileComponent], template: `
+    @if (portal.isPanoramaVisible()) {
+      <div class="fxs-panorama-homearea" [class.collapsed]="!panorama().showTiles">
+        <div class="fxs-startboard-target fxs-startboard fx-rightClick" [class.collapsed]="!panorama().showTiles">
+          @if (panorama().tiles.length === 0 && panorama().isTilesLoaded) {
+            <div class="fxs-part fxs-part-clickable" style="background-color:var(--apa-surface-raised); padding:25px; max-width:800px; margin-bottom:15px; height:auto;">
+              <header class="fxs-part-title" style="color:var(--apa-text)">
+                <h3 class="msportalfx-tooltip-overflow">Keine Applikationen zugeordnet</h3>
+                <p class="msportalfx-tooltip-overflow" style="margin:0;padding:0">
+                  Wenden Sie sich bitte an den Administrator damit die entsprechenden Applikationen zugeordnet werden koennen.
+                </p>
+              </header>
+            </div>
+          }
+          <div class="fxs-startboard-layout fxs-flowlayout">
+            <div class="fxs-flowlayout-childcontainer">
+              @for (tile of panorama().tiles; track tile.bladePath) {
+                <apa-tile [tile]="tile" (tileClick)="onTileClick($event)" />
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+  `, styles: [":host{display:contents}\n"] }]
+        }] });
+
+/**
+ * Root portal shell component.
+ * Ported from the fxs-portal structure in home.html (v0.2.346).
+ *
+ * Provides the top bar (with portal title and avatar menu),
+ * and the main content area. Child components (panorama, blade-host,
+ * notification-panel) are projected via content projection.
+ *
+ * Usage:
+ * ```html
+ * <apa-portal-layout>
+ *   <apa-panorama />
+ *   <apa-blade-host />
+ * </apa-portal-layout>
+ * ```
+ */
+class PortalLayoutComponent {
+    portal = inject(PortalService);
+    static STORAGE_KEY = 'apa-dark-mode';
+    document = inject(DOCUMENT);
+    elementRef = inject(ElementRef);
+    injector = inject(Injector);
+    isDark = signal(false, ...(ngDevMode ? [{ debugName: "isDark" }] : []));
+    constructor() {
+        const stored = localStorage.getItem(PortalLayoutComponent.STORAGE_KEY);
+        const dark = stored === 'true';
+        this.applyTheme(dark);
+        // Scroll to the last blade whenever the blade stack changes
+        const injector = this.injector;
+        effect(() => {
+            const blades = this.portal.blades();
+            if (blades.length === 0)
+                return;
+            afterNextRender(() => {
+                this.scrollToLastBlade();
+            }, { injector });
+        });
+    }
+    toggleDarkMode() {
+        const dark = !this.isDark();
+        localStorage.setItem(PortalLayoutComponent.STORAGE_KEY, String(dark));
+        this.applyTheme(dark);
+    }
+    applyTheme(dark) {
+        this.isDark.set(dark);
+        this.document.documentElement.classList.toggle('apa-dark', dark);
+        this.document.documentElement.classList.toggle('apa-light', !dark);
+    }
+    displayName() {
+        const account = this.portal.avatarMenu().userAccount;
+        return getUserDisplayName(account);
+    }
+    initials() {
+        const a = this.portal.avatarMenu().userAccount;
+        const f = (a.firstName || '')[0] || '';
+        const l = (a.lastName || '')[0] || '';
+        return (f + l).toUpperCase() || '?';
+    }
+    notificationMargin() {
+        const notif = this.portal.notification();
+        return notif.isVisible ? notif.width : 0;
+    }
+    onHomeClick(event) {
+        event.preventDefault();
+        // Clear all blades to show panorama
+        this.portal.blades.set([]);
+    }
+    scrollToLastBlade() {
+        const scrollContainer = this.elementRef.nativeElement.querySelector('.fxs-portal-content');
+        if (!scrollContainer)
+            return;
+        const bladeElements = scrollContainer.querySelectorAll('.azureportalblade');
+        if (bladeElements.length === 0)
+            return;
+        const lastBlade = bladeElements[bladeElements.length - 1];
+        const scrollRect = scrollContainer.getBoundingClientRect();
+        const bladeRect = lastBlade.getBoundingClientRect();
+        // Blade is already fully visible — no scroll needed
+        if (bladeRect.left >= scrollRect.left && bladeRect.right <= scrollRect.right) {
+            return;
+        }
+        const currentScroll = scrollContainer.scrollLeft;
+        const viewportWidth = scrollContainer.clientWidth;
+        let targetScroll;
+        if (bladeElements.length >= 2) {
+            // Use the previous blade's right edge (= where the new blade starts)
+            const prevBlade = bladeElements[bladeElements.length - 2];
+            const prevRect = prevBlade.getBoundingClientRect();
+            // Distance from viewport's left edge to the previous blade's right edge
+            const delta = prevRect.right - scrollRect.left;
+            targetScroll = currentScroll + delta;
+        }
+        else {
+            // First blade — scroll to show it
+            targetScroll = currentScroll + (bladeRect.left - scrollRect.left);
+        }
+        // Cap scroll movement to at most one viewport width
+        targetScroll = Math.min(targetScroll, currentScroll + viewportWidth);
+        scrollContainer.scrollTo({ left: targetScroll, behavior: 'smooth' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PortalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PortalLayoutComponent, isStandalone: true, selector: "apa-portal-layout", ngImport: i0, template: `
+    <div class="fxs-portal fxs-theme-blue">
+      <!-- Top bar -->
+      <div class="fxs-topbar">
+        <div style="padding-left:25px;">
+          <a href="#" class="fxs-topbar-home fxs-has-hover" (click)="onHomeClick($event)">
+            {{ portal.panorama().title }}
+          </a>
+        </div>
+        <div style="display:flex; align-items:center; gap:12px; padding-right:10px;">
+          <button class="apa-darkmode-toggle fxs-has-hover"
+                  (click)="toggleDarkMode()"
+                  [attr.aria-label]="isDark() ? 'Switch to light mode' : 'Switch to dark mode'"
+                  [attr.title]="isDark() ? 'Light mode' : 'Dark mode'">
+            <i [class]="isDark() ? 'ti ti-sun' : 'ti ti-moon'"></i>
+          </button>
+          <div class="fxs-avatarmenu-tenant-container" style="position:relative;">
+            <a class="apa-avatar-trigger fxs-has-hover" (click)="portal.toggleAvatarMenu()">
+              <span class="apa-avatar-initials">{{ initials() }}</span>
+              <span class="apa-avatar-info">
+                <span class="apa-avatar-name">{{ displayName() }}</span>
+                <span class="apa-avatar-email">{{ portal.avatarMenu().userAccount.userName }}</span>
+              </span>
+              <i class="ti" [class.ti-chevron-down]="!portal.avatarMenu().isOpen"
+                            [class.ti-chevron-up]="portal.avatarMenu().isOpen"></i>
+            </a>
+            @if (portal.avatarMenu().isOpen && portal.avatarMenu().items.length > 0) {
+              <div class="apa-avatar-dropdown">
+                @for (item of portal.avatarMenu().items; track item.href) {
+                  <a class="apa-avatar-dropdown-item" [href]="item.href">
+                    @if (item.icon) {
+                      <i [class]="item.icon"></i>
+                    }
+                    <span>{{ item.label }}</span>
+                  </a>
+                }
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+      <!-- Main content area -->
+      <div class="fxs-portal-content fxs-panorama"
+           [style.margin-right.px]="notificationMargin()">
+        <ng-content />
+      </div>
+      <!-- Footer -->
+      <div class="fxs-portal-footer"></div>
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PortalLayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'apa-portal-layout',
+                    standalone: true,
+                    template: `
+    <div class="fxs-portal fxs-theme-blue">
+      <!-- Top bar -->
+      <div class="fxs-topbar">
+        <div style="padding-left:25px;">
+          <a href="#" class="fxs-topbar-home fxs-has-hover" (click)="onHomeClick($event)">
+            {{ portal.panorama().title }}
+          </a>
+        </div>
+        <div style="display:flex; align-items:center; gap:12px; padding-right:10px;">
+          <button class="apa-darkmode-toggle fxs-has-hover"
+                  (click)="toggleDarkMode()"
+                  [attr.aria-label]="isDark() ? 'Switch to light mode' : 'Switch to dark mode'"
+                  [attr.title]="isDark() ? 'Light mode' : 'Dark mode'">
+            <i [class]="isDark() ? 'ti ti-sun' : 'ti ti-moon'"></i>
+          </button>
+          <div class="fxs-avatarmenu-tenant-container" style="position:relative;">
+            <a class="apa-avatar-trigger fxs-has-hover" (click)="portal.toggleAvatarMenu()">
+              <span class="apa-avatar-initials">{{ initials() }}</span>
+              <span class="apa-avatar-info">
+                <span class="apa-avatar-name">{{ displayName() }}</span>
+                <span class="apa-avatar-email">{{ portal.avatarMenu().userAccount.userName }}</span>
+              </span>
+              <i class="ti" [class.ti-chevron-down]="!portal.avatarMenu().isOpen"
+                            [class.ti-chevron-up]="portal.avatarMenu().isOpen"></i>
+            </a>
+            @if (portal.avatarMenu().isOpen && portal.avatarMenu().items.length > 0) {
+              <div class="apa-avatar-dropdown">
+                @for (item of portal.avatarMenu().items; track item.href) {
+                  <a class="apa-avatar-dropdown-item" [href]="item.href">
+                    @if (item.icon) {
+                      <i [class]="item.icon"></i>
+                    }
+                    <span>{{ item.label }}</span>
+                  </a>
+                }
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+      <!-- Main content area -->
+      <div class="fxs-portal-content fxs-panorama"
+           [style.margin-right.px]="notificationMargin()">
+        <ng-content />
+      </div>
+      <!-- Footer -->
+      <div class="fxs-portal-footer"></div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Command bar for a blade.
+ * Ported from the fxs-commandBar section in blade.html (v0.2.346).
+ *
+ * Replaces the 18 individual command buttons with a dynamic BladeCommand[] array.
+ *
+ * Usage:
+ * ```html
+ * <apa-command-bar [commands]="blade.commands" />
+ * ```
+ */
+class CommandBarComponent {
+    commands = input([], ...(ngDevMode ? [{ debugName: "commands" }] : []));
+    visibleCommands() {
+        return this.commands().filter((c) => c.visible);
+    }
+    onCommand(cmd) {
+        if (cmd.enabled && cmd.action) {
+            cmd.action();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CommandBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CommandBarComponent, isStandalone: true, selector: "apa-command-bar", inputs: { commands: { classPropertyName: "commands", publicName: "commands", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="fxs-commandBar">
+      <ul class="fxs-commandBar-itemList">
+        @for (cmd of visibleCommands(); track cmd.key) {
+          <li>
+            <a class="fxs-commandBar-item"
+               [class.apa-disable-click]="!cmd.enabled"
+               (click)="onCommand(cmd)">
+              <span class="fxs-commandBar-item-text">{{ cmd.label }}</span>
+              @if (cmd.icon) {
+                <span class="fxs-commandBar-item-icon apa-commandbar-icon">
+                  <span [class]="cmd.icon"></span>
+                </span>
+              }
+            </a>
+          </li>
+        }
+      </ul>
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CommandBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'apa-command-bar', standalone: true, template: `
+    <div class="fxs-commandBar">
+      <ul class="fxs-commandBar-itemList">
+        @for (cmd of visibleCommands(); track cmd.key) {
+          <li>
+            <a class="fxs-commandBar-item"
+               [class.apa-disable-click]="!cmd.enabled"
+               (click)="onCommand(cmd)">
+              <span class="fxs-commandBar-item-text">{{ cmd.label }}</span>
+              @if (cmd.icon) {
+                <span class="fxs-commandBar-item-icon apa-commandbar-icon">
+                  <span [class]="cmd.icon"></span>
+                </span>
+              }
+            </a>
+          </li>
+        }
+      </ul>
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { commands: [{ type: i0.Input, args: [{ isSignal: true, alias: "commands", required: false }] }] } });
+
+/**
+ * Blade chrome component — the visual container for a single blade.
+ * Ported from blade.html (v0.2.346).
+ *
+ * Renders the blade header (status bar, close/maximize buttons, title,
+ * command bar) and projects blade content via <ng-content>.
+ *
+ * Usage:
+ * ```html
+ * <apa-blade [blade]="myBlade">
+ *   <p>Blade content here</p>
+ * </apa-blade>
+ * ```
+ */
+class BladeComponent {
+    blade = input.required(...(ngDevMode ? [{ debugName: "blade" }] : []));
+    bladeClose = output();
+    bladeService = inject(BladeService);
+    onClose() {
+        const b = this.blade();
+        this.bladeClose.emit(b);
+        this.bladeService.closeBlade(b);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BladeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BladeComponent, isStandalone: true, selector: "apa-blade", inputs: { blade: { classPropertyName: "blade", publicName: "blade", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { bladeClose: "bladeClose" }, ngImport: i0, template: `
+    <section class="fxs-blade-locked fxs-blade fx-rightClick fxs-bladesize-small"
+             [style.width.px]="blade().width">
+      <!-- Header -->
+      <header class="fxs-blade-header">
+        <!-- Status bar -->
+        <div class="fxs-blade-statusbar-wrapper">
+          <div class="fxs-blade-statusbar"
+               [class.apa-statusbar-info]="blade().statusBar.style === 'info'"
+               [class.apa-statusbar-error]="blade().statusBar.style === 'error' || blade().statusBar.style === 'warning'"
+               [class.apa-statusbar-success]="blade().statusBar.style === 'success'">
+            {{ blade().statusBar.text }}
+          </div>
+        </div>
+
+        <!-- Action buttons -->
+        <div class="fxs-blade-actions">
+          <button (click)="onClose()" title="Schliessen">
+            <svg viewBox="0 0 11 11" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg">
+              <g>
+                <polygon class="msportal-fx-svg-placeholder" points="10.4,1.4 9.6,0.6 5.5,4.7 1.4,0.6 0.6,1.4 4.7,5.5 0.6,9.6 1.4,10.4 5.5,6.3 9.6,10.4 10.4,9.6 6.3,5.5"/>
+              </g>
+            </svg>
+          </button>
+        </div>
+
+        <!-- Title -->
+        <div class="fxs-blade-title">
+          <div class="fxs-blade-title-text-container">
+            <h2>{{ blade().title }}</h2>
+            @if (blade().subtitle) {
+              <h3>{{ blade().subtitle }}</h3>
+            }
+          </div>
+        </div>
+
+        <!-- Command bar -->
+        <div class="fxs-blade-commandBarContainer">
+          <apa-command-bar [commands]="blade().commands" />
+        </div>
+      </header>
+
+      <!-- Content area -->
+      <div class="fxs-blade-content fxs-pannable">
+        <div class="fxs-blade-stacklayout">
+          <div class="fxs-stacklayout-child">
+            <ng-content />
+          </div>
+        </div>
+      </div>
+    </section>
+  `, isInline: true, styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: CommandBarComponent, selector: "apa-command-bar", inputs: ["commands"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BladeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'apa-blade', standalone: true, imports: [CommandBarComponent], template: `
+    <section class="fxs-blade-locked fxs-blade fx-rightClick fxs-bladesize-small"
+             [style.width.px]="blade().width">
+      <!-- Header -->
+      <header class="fxs-blade-header">
+        <!-- Status bar -->
+        <div class="fxs-blade-statusbar-wrapper">
+          <div class="fxs-blade-statusbar"
+               [class.apa-statusbar-info]="blade().statusBar.style === 'info'"
+               [class.apa-statusbar-error]="blade().statusBar.style === 'error' || blade().statusBar.style === 'warning'"
+               [class.apa-statusbar-success]="blade().statusBar.style === 'success'">
+            {{ blade().statusBar.text }}
+          </div>
+        </div>
+
+        <!-- Action buttons -->
+        <div class="fxs-blade-actions">
+          <button (click)="onClose()" title="Schliessen">
+            <svg viewBox="0 0 11 11" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg">
+              <g>
+                <polygon class="msportal-fx-svg-placeholder" points="10.4,1.4 9.6,0.6 5.5,4.7 1.4,0.6 0.6,1.4 4.7,5.5 0.6,9.6 1.4,10.4 5.5,6.3 9.6,10.4 10.4,9.6 6.3,5.5"/>
+              </g>
+            </svg>
+          </button>
+        </div>
+
+        <!-- Title -->
+        <div class="fxs-blade-title">
+          <div class="fxs-blade-title-text-container">
+            <h2>{{ blade().title }}</h2>
+            @if (blade().subtitle) {
+              <h3>{{ blade().subtitle }}</h3>
+            }
+          </div>
+        </div>
+
+        <!-- Command bar -->
+        <div class="fxs-blade-commandBarContainer">
+          <apa-command-bar [commands]="blade().commands" />
+        </div>
+      </header>
+
+      <!-- Content area -->
+      <div class="fxs-blade-content fxs-pannable">
+        <div class="fxs-blade-stacklayout">
+          <div class="fxs-stacklayout-child">
+            <ng-content />
+          </div>
+        </div>
+      </div>
+    </section>
+  `, styles: [":host{display:block;height:100%}\n"] }]
+        }], propDecorators: { blade: [{ type: i0.Input, args: [{ isSignal: true, alias: "blade", required: true }] }], bladeClose: [{ type: i0.Output, args: ["bladeClose"] }] } });
+
+/**
+ * Blade host — renders the blade stack (journey area).
+ * Ported from the apa-blade-area section in home.html (v0.2.346).
+ *
+ * Each blade in the stack is rendered horizontally. When a new blade
+ * is added, the portal layout scrolls to show it.
+ *
+ * Consumer apps provide blade content via the [bladeTemplate] input
+ * or by routing. For now, blades are rendered with their path as content.
+ *
+ * Usage:
+ * ```html
+ * <apa-blade-host />
+ * ```
+ */
+class BladeHostComponent {
+    portal = inject(PortalService);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BladeHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BladeHostComponent, isStandalone: true, selector: "apa-blade-host", ngImport: i0, template: `
+    <div id="apa-blade-area" class="fxs-journey-target fxs-journey">
+      <div class="fxs-journey-layout fxs-stacklayout fxs-stacklayout-horizontal">
+        @for (blade of portal.blades(); track blade.path) {
+          <div class="azureportalblade fxs-stacklayout-child">
+            <apa-blade [blade]="blade">
+              <!-- Default content: blade path (consumers override via content projection or custom templates) -->
+              <p style="padding:25px; color:var(--apa-text-secondary);">{{ blade.path }}</p>
+            </apa-blade>
+          </div>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: BladeComponent, selector: "apa-blade", inputs: ["blade"], outputs: ["bladeClose"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BladeHostComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'apa-blade-host', standalone: true, imports: [BladeComponent], template: `
+    <div id="apa-blade-area" class="fxs-journey-target fxs-journey">
+      <div class="fxs-journey-layout fxs-stacklayout fxs-stacklayout-horizontal">
+        @for (blade of portal.blades(); track blade.path) {
+          <div class="azureportalblade fxs-stacklayout-child">
+            <apa-blade [blade]="blade">
+              <!-- Default content: blade path (consumers override via content projection or custom templates) -->
+              <p style="padding:25px; color:var(--apa-text-secondary);">{{ blade.path }}</p>
+            </apa-blade>
+          </div>
+        }
+      </div>
+    </div>
+  `, styles: [":host{display:block;height:100%}\n"] }]
+        }] });
+
+/**
+ * Navigation blade content — renders a list of nav items.
+ * Ported from nav.html (v0.2.346).
+ *
+ * Each nav item shows an icon and title. Clicking a row opens
+ * the target blade via BladeService.
+ *
+ * Usage:
+ * ```html
+ * <apa-blade [blade]="navBlade">
+ *   <apa-blade-nav [items]="navItems" [senderPath]="navBlade.path" />
+ * </apa-blade>
+ * ```
+ */
+class BladeNavComponent {
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    senderPath = input('', ...(ngDevMode ? [{ debugName: "senderPath" }] : []));
+    bladeService = inject(BladeService);
+    visibleItems() {
+        return this.items().filter((item) => item.isVisible);
+    }
+    onItemClick(item) {
+        if (item.hrefPath) {
+            // External link — let the <a> handle it
+            return;
+        }
+        if (item.bladePath) {
+            this.bladeService.addBlade(item.bladePath, this.senderPath());
+        }
+        item.callback?.();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BladeNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BladeNavComponent, isStandalone: true, selector: "apa-blade-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, senderPath: { classPropertyName: "senderPath", publicName: "senderPath", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <table class="azc-grid-full azc-grid-multiselectable">
+      <colgroup>
+        <col class="col0" style="width:28px;">
+        <col class="col1">
+      </colgroup>
+      <tbody class="azc-grid-groupdata" role="rowgroup">
+        @for (item of visibleItems(); track item.bladePath) {
+          <tr role="row" style="cursor:pointer" (click)="onItemClick(item)">
+            <td class="msportalfx-gridcolumn-asseticon" role="gridcell">
+              @if (item.cssClass) {
+                <i [class]="item.cssClass"></i>
+              }
+            </td>
+            <td tabindex="0" role="gridcell">
+              @if (item.hrefPath) {
+                <a [href]="item.hrefPath" target="_blank">{{ item.title }}</a>
+              } @else {
+                <span>{{ item.title }}</span>
+              }
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BladeNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'apa-blade-nav', standalone: true, template: `
+    <table class="azc-grid-full azc-grid-multiselectable">
+      <colgroup>
+        <col class="col0" style="width:28px;">
+        <col class="col1">
+      </colgroup>
+      <tbody class="azc-grid-groupdata" role="rowgroup">
+        @for (item of visibleItems(); track item.bladePath) {
+          <tr role="row" style="cursor:pointer" (click)="onItemClick(item)">
+            <td class="msportalfx-gridcolumn-asseticon" role="gridcell">
+              @if (item.cssClass) {
+                <i [class]="item.cssClass"></i>
+              }
+            </td>
+            <td tabindex="0" role="gridcell">
+              @if (item.hrefPath) {
+                <a [href]="item.hrefPath" target="_blank">{{ item.title }}</a>
+              } @else {
+                <span>{{ item.title }}</span>
+              }
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, styles: [":host{display:flex;flex-direction:column;flex:1}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], senderPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "senderPath", required: false }] }] } });
+
+/**
+ * Grid/list blade content — renders a searchable list of items.
+ * Ported from grid.html + BladeGrid (v0.2.346).
+ *
+ * Displays items in a table with optional search filtering.
+ * Each row shows a title and optional subtitle. Clicking a row
+ * opens the target blade.
+ *
+ * Usage:
+ * ```html
+ * <apa-blade [blade]="gridBlade">
+ *   <apa-blade-grid
+ *     [items]="items"
+ *     [senderPath]="gridBlade.path"
+ *     [displayField]="'title'"
+ *     (itemClick)="onItemClick($event)" />
+ * </apa-blade>
+ * ```
+ */
+class BladeGridComponent {
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    senderPath = input('', ...(ngDevMode ? [{ debugName: "senderPath" }] : []));
+    displayField = input('title', ...(ngDevMode ? [{ debugName: "displayField" }] : []));
+    bladePathField = input('bladePath', ...(ngDevMode ? [{ debugName: "bladePathField" }] : []));
+    searchable = input(true, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    itemClick = output();
+    searchText = '';
+    bladeService = inject(BladeService);
+    filteredItems() {
+        return filterItems(this.items(), this.searchText);
+    }
+    getDisplayValue(item) {
+        return item[this.displayField()] ?? '';
+    }
+    onSearchInput(event) {
+        this.searchText = event.target.value;
+    }
+    onRowClick(item) {
+        this.itemClick.emit(item);
+        const bladePath = item[this.bladePathField()];
+        if (bladePath) {
+            this.bladeService.addBlade(bladePath, this.senderPath());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BladeGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BladeGridComponent, isStandalone: true, selector: "apa-blade-grid", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, senderPath: { classPropertyName: "senderPath", publicName: "senderPath", isSignal: true, isRequired: false, transformFunction: null }, displayField: { classPropertyName: "displayField", publicName: "displayField", isSignal: true, isRequired: false, transformFunction: null }, bladePathField: { classPropertyName: "bladePathField", publicName: "bladePathField", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
+    @if (searchable()) {
+      <div style="padding:0 0 10px 0;">
+        <input type="text"
+               class="form-control"
+               placeholder="Suchen..."
+               [value]="searchText"
+               (input)="onSearchInput($event)" />
+      </div>
+    }
+    <table class="azc-grid-full azc-grid-multiselectable">
+      <colgroup>
+        <col class="col0" style="width:41px;">
+        <col class="col1">
+      </colgroup>
+      <tbody class="azc-grid-groupdata" role="rowgroup">
+        @for (item of filteredItems(); track $index) {
+          <tr role="row" style="cursor:pointer" (click)="onRowClick(item)">
+            <td class="msportalfx-gridcolumn-asseticon" role="gridcell">
+              <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 50 50" focusable="false" style="height:21px;width:21px;">
+                <rect class="msportalfx-svg-c04" x="19.8" y="39.4" width="10.6" height="3.4"/>
+                <polygon class="msportalfx-svg-c04" points="23.1,50 27,50 30.3,46.5 19.8,46.5"/>
+                <path class="msportalfx-svg-c20" d="M41.2 14.7v-.3c0-7.7-6.6-14.1-14.7-14.2-.2-.3-4.8.1-4.8.1-7.3.9-13 7-13 14.1 0 .2-.8 5.8 4.9 10.5 2.6 2.3 5.3 8.5 5.7 10.3l.3.6h10.6l.3-.6c.4-1.8 3.2-8 5.7-10.2C41.9 20.2 41.2 14.9 41.2 14.7z"/>
+              </svg>
+            </td>
+            <td tabindex="0" role="gridcell">
+              <span>{{ getDisplayValue(item) }}</span>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BladeGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'apa-blade-grid', standalone: true, template: `
+    @if (searchable()) {
+      <div style="padding:0 0 10px 0;">
+        <input type="text"
+               class="form-control"
+               placeholder="Suchen..."
+               [value]="searchText"
+               (input)="onSearchInput($event)" />
+      </div>
+    }
+    <table class="azc-grid-full azc-grid-multiselectable">
+      <colgroup>
+        <col class="col0" style="width:41px;">
+        <col class="col1">
+      </colgroup>
+      <tbody class="azc-grid-groupdata" role="rowgroup">
+        @for (item of filteredItems(); track $index) {
+          <tr role="row" style="cursor:pointer" (click)="onRowClick(item)">
+            <td class="msportalfx-gridcolumn-asseticon" role="gridcell">
+              <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 50 50" focusable="false" style="height:21px;width:21px;">
+                <rect class="msportalfx-svg-c04" x="19.8" y="39.4" width="10.6" height="3.4"/>
+                <polygon class="msportalfx-svg-c04" points="23.1,50 27,50 30.3,46.5 19.8,46.5"/>
+                <path class="msportalfx-svg-c20" d="M41.2 14.7v-.3c0-7.7-6.6-14.1-14.7-14.2-.2-.3-4.8.1-4.8.1-7.3.9-13 7-13 14.1 0 .2-.8 5.8 4.9 10.5 2.6 2.3 5.3 8.5 5.7 10.3l.3.6h10.6l.3-.6c.4-1.8 3.2-8 5.7-10.2C41.9 20.2 41.2 14.9 41.2 14.7z"/>
+              </svg>
+            </td>
+            <td tabindex="0" role="gridcell">
+              <span>{{ getDisplayValue(item) }}</span>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, styles: [":host{display:flex;flex-direction:column;flex:1}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], senderPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "senderPath", required: false }] }], displayField: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayField", required: false }] }], bladePathField: [{ type: i0.Input, args: [{ isSignal: true, alias: "bladePathField", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+/**
+ * Detail/edit blade content — renders a form area for editing an item.
+ * Ported from BladeDetail<T> (v0.2.346).
+ *
+ * Provides a content projection area for forms. The blade's commands
+ * (save, delete, cancel, new) are managed via the blade definition.
+ *
+ * This is a thin wrapper that projects content and provides
+ * convenience methods for setting up typical detail blade commands.
+ *
+ * Usage:
+ * ```html
+ * <apa-blade [blade]="detailBlade">
+ *   <apa-blade-detail [blade]="detailBlade">
+ *     <form>
+ *       <!-- form fields here -->
+ *     </form>
+ *   </apa-blade-detail>
+ * </apa-blade>
+ * ```
+ */
+class BladeDetailComponent {
+    blade = input.required(...(ngDevMode ? [{ debugName: "blade" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BladeDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: BladeDetailComponent, isStandalone: true, selector: "apa-blade-detail", inputs: { blade: { classPropertyName: "blade", publicName: "blade", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <div class="apa-blade-detail">
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1}.apa-blade-detail{flex:1}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BladeDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'apa-blade-detail', standalone: true, template: `
+    <div class="apa-blade-detail">
+      <ng-content />
+    </div>
+  `, styles: [":host{display:flex;flex-direction:column;flex:1}.apa-blade-detail{flex:1}\n"] }]
+        }], propDecorators: { blade: [{ type: i0.Input, args: [{ isSignal: true, alias: "blade", required: true }] }] } });
+/**
+ * Create standard detail blade commands (new, save, delete, cancel).
+ * Convenience function for setting up typical detail/edit blade commands
+ * matching the v0.2.346 BladeDetail default commands.
+ */
+function createDetailCommands(handlers) {
+    const commands = [];
+    if (handlers.onNew) {
+        commands.push(createCommand('new', 'neu', handlers.onNew));
+    }
+    if (handlers.onSave) {
+        commands.push(createCommand('save', 'speichern', handlers.onSave));
+    }
+    if (handlers.onDelete) {
+        commands.push(createCommand('delete', 'loeschen', handlers.onDelete));
+    }
+    if (handlers.onCancel) {
+        commands.push(createCommand('cancel', 'abbrechen', handlers.onCancel));
+    }
+    return commands;
+}
+
+/**
+ * Notification panel — right-side overlay panel.
+ * Ported from apa-notification-area in home.html (v0.2.346).
+ *
+ * Usage:
+ * ```html
+ * <apa-notification-panel>
+ *   <!-- Custom notification content -->
+ * </apa-notification-panel>
+ * ```
+ */
+class NotificationPanelComponent {
+    portal = inject(PortalService);
+    onClose() {
+        this.portal.hideNotification();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NotificationPanelComponent, isStandalone: true, selector: "apa-notification-panel", ngImport: i0, template: `
+    @if (portal.notification().isVisible) {
+      <div class="apa-notification-panel"
+           [style.width.px]="portal.notification().width">
+        <button class="apa-notification-close" (click)="onClose()" title="Schliessen">
+          <svg viewBox="0 0 11 11" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg">
+            <polygon class="msportal-fx-svg-placeholder" points="10.4,1.4 9.6,0.6 5.5,4.7 1.4,0.6 0.6,1.4 4.7,5.5 0.6,9.6 1.4,10.4 5.5,6.3 9.6,10.4 10.4,9.6 6.3,5.5"/>
+          </svg>
+        </button>
+        <ng-content />
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:contents}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'apa-notification-panel', standalone: true, template: `
+    @if (portal.notification().isVisible) {
+      <div class="apa-notification-panel"
+           [style.width.px]="portal.notification().width">
+        <button class="apa-notification-close" (click)="onClose()" title="Schliessen">
+          <svg viewBox="0 0 11 11" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg">
+            <polygon class="msportal-fx-svg-placeholder" points="10.4,1.4 9.6,0.6 5.5,4.7 1.4,0.6 0.6,1.4 4.7,5.5 0.6,9.6 1.4,10.4 5.5,6.3 9.6,10.4 10.4,9.6 6.3,5.5"/>
+          </svg>
+        </button>
+        <ng-content />
+      </div>
+    }
+  `, styles: [":host{display:contents}\n"] }]
+        }] });
+
+/**
+ * Avatar menu — user account dropdown in the portal header.
+ * Ported from fxs-avatarmenu CSS structure in v0.2.346.
+ *
+ * Shows the user's name and email. Clicking toggles a dropdown
+ * with optional actions (sign out, etc.).
+ *
+ * Usage:
+ * ```html
+ * <apa-avatar-menu>
+ *   <a href="/Account/SignOut">Abmelden</a>
+ * </apa-avatar-menu>
+ * ```
+ */
+class AvatarMenuComponent {
+    portal = inject(PortalService);
+    userAccount() {
+        return this.portal.avatarMenu().userAccount;
+    }
+    displayName() {
+        return getUserDisplayName(this.userAccount());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AvatarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AvatarMenuComponent, isStandalone: true, selector: "apa-avatar-menu", ngImport: i0, template: `
+    <div class="fxs-avatarmenu">
+      <a class="fxs-has-hover" (click)="portal.toggleAvatarMenu()">
+        <div class="fxs-avatarmenu-header">
+          <span class="fxs-avatarmenu-username">{{ displayName() }}</span>
+          <span class="fxs-avatarmenu-emailaddress">{{ userAccount().emailAddress }}</span>
+        </div>
+      </a>
+      @if (portal.avatarMenu().isOpen) {
+        <div class="fxs-avatarmenu-dropdown" style="display:block;">
+          <ul>
+            <ng-content />
+          </ul>
+        </div>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AvatarMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'apa-avatar-menu',
+                    standalone: true,
+                    template: `
+    <div class="fxs-avatarmenu">
+      <a class="fxs-has-hover" (click)="portal.toggleAvatarMenu()">
+        <div class="fxs-avatarmenu-header">
+          <span class="fxs-avatarmenu-username">{{ displayName() }}</span>
+          <span class="fxs-avatarmenu-emailaddress">{{ userAccount().emailAddress }}</span>
+        </div>
+      </a>
+      @if (portal.avatarMenu().isOpen) {
+        <div class="fxs-avatarmenu-dropdown" style="display:block;">
+          <ul>
+            <ng-content />
+          </ul>
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }] });
+
+/**
+ * Sidebar navigation — optional vertical navigation panel.
+ * New in v0.3.0 (no equivalent in v0.2.346).
+ *
+ * Provides a collapsible sidebar with navigation items that
+ * open blades when clicked.
+ *
+ * Usage:
+ * ```html
+ * <apa-sidebar [items]="sidebarItems" [collapsed]="false" />
+ * ```
+ */
+class SidebarComponent {
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    bladeService = inject(BladeService);
+    visibleItems() {
+        return this.items().filter((item) => item.isVisible);
+    }
+    onItemClick(item) {
+        if (item.bladePath) {
+            this.bladeService.setFirstBlade(item.bladePath, item.title);
+        }
+        item.callback?.();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SidebarComponent, isStandalone: true, selector: "apa-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <nav class="apa-sidebar" [class.apa-sidebar-collapsed]="collapsed()">
+      @for (item of visibleItems(); track item.bladePath) {
+        <a class="apa-sidebar-item"
+           (click)="onItemClick(item)"
+           style="cursor:pointer;">
+          @if (item.cssClass) {
+            <i [class]="item.cssClass" class="apa-sidebar-icon"></i>
+          }
+          @if (!collapsed()) {
+            <span class="apa-sidebar-label">{{ item.title }}</span>
+          }
+        </a>
+      }
+    </nav>
+  `, isInline: true, styles: [".apa-sidebar{display:flex;flex-direction:column;background-color:var(--apa-chrome);width:200px;height:100%;padding-top:10px;transition:width .2s ease}.apa-sidebar-collapsed{width:50px}.apa-sidebar-item{display:flex;align-items:center;padding:10px 15px;color:var(--apa-chrome-text);text-decoration:none;font-size:13px;transition:background-color .15s ease}.apa-sidebar-item:hover{background-color:var(--apa-chrome-hover)}.apa-sidebar-icon{margin-right:10px;width:20px;text-align:center}.apa-sidebar-collapsed .apa-sidebar-icon{margin-right:0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'apa-sidebar', standalone: true, template: `
+    <nav class="apa-sidebar" [class.apa-sidebar-collapsed]="collapsed()">
+      @for (item of visibleItems(); track item.bladePath) {
+        <a class="apa-sidebar-item"
+           (click)="onItemClick(item)"
+           style="cursor:pointer;">
+          @if (item.cssClass) {
+            <i [class]="item.cssClass" class="apa-sidebar-icon"></i>
+          }
+          @if (!collapsed()) {
+            <span class="apa-sidebar-label">{{ item.title }}</span>
+          }
+        </a>
+      }
+    </nav>
+  `, styles: [".apa-sidebar{display:flex;flex-direction:column;background-color:var(--apa-chrome);width:200px;height:100%;padding-top:10px;transition:width .2s ease}.apa-sidebar-collapsed{width:50px}.apa-sidebar-item{display:flex;align-items:center;padding:10px 15px;color:var(--apa-chrome-text);text-decoration:none;font-size:13px;transition:background-color .15s ease}.apa-sidebar-item:hover{background-color:var(--apa-chrome-hover)}.apa-sidebar-icon{margin-right:10px;width:20px;text-align:center}.apa-sidebar-collapsed .apa-sidebar-icon{margin-right:0}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
+
+/*
+ * Public API Surface of @ardimedia/angular-portal-azure
+ */
+// Models
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AvatarMenuComponent, BladeComponent, BladeDetailComponent, BladeGridComponent, BladeHostComponent, BladeNavComponent, BladeService, CommandBarComponent, NotificationPanelComponent, PanoramaComponent, PortalLayoutComponent, PortalService, SidebarComponent, TILE_DIMENSIONS, TileComponent, TileSize, clearStatusBar, createAvatarMenu, createBlade, createCommand, createDataBlade, createDetailCommands, createNavItem, createNotificationPanel, createPanorama, createTile, executeDeleteItem, executeLoadItem, executeLoadItems, executeSaveItem, filterItems, getUserDisplayName, layoutTiles, providePortalAzure, statusBarError, statusBarInfo, statusBarSuccess };
+//# sourceMappingURL=ardimedia-angular-portal-azure.mjs.map