@valtimo/components 13.49.1 → 13.50.0

package/fesm2022/valtimo-components.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Pipe, NgModule, Injectable, RendererStyleFlags2, Inject, signal, computed, Input, Component, Directive, EventEmitter, Output, ViewContainerRef, ViewChild, HostBinding, HostListener, ChangeDetectionStrategy, ContentChildren, ViewEncapsulation, inject, TemplateRef, ContentChild, ElementRef, forwardRef } from '@angular/core';
-import { combineLatest, map, BehaviorSubject, switchMap, catchError, of, shareReplay, tap, Subscription, Observable, filter as filter$1, fromEvent, Subject, take as take$1, interval, takeUntil, merge, startWith, debounceTime as debounceTime$1, timer, first } from 'rxjs';
+import { InjectionToken, Pipe, NgModule, Injectable, RendererStyleFlags2, Inject, signal, computed, Input, Component, Directive, EventEmitter, Output, ViewContainerRef, ViewChild, HostBinding, HostListener, ChangeDetectionStrategy, ContentChildren, ViewEncapsulation, effect, inject, TemplateRef, ContentChild, ElementRef, forwardRef } from '@angular/core';
+import { combineLatest, map, BehaviorSubject, switchMap, catchError, of, shareReplay, tap, Subscription, Observable, filter as filter$1, fromEvent, Subject, take as take$1, interval, distinctUntilChanged, takeUntil, merge, isObservable, startWith, debounceTime as debounceTime$1, timer, first } from 'rxjs';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader, TranslateService, TranslatePipe } from '@ngx-translate/core';
 import * as i1$2 from '@valtimo/shared';
 import { BaseApiService, IncludeFunction, ROLE_USER, ROLE_ADMIN, ROLE_DEVELOPER, VERSIONS, HttpLoaderFactory, getContextObservable, getCaseManagementRouteParams, getBuildingBlockManagementRouteParams, sanitizeKey, toKebabCase } from '@valtimo/shared';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { filter, map as map$1, take, tap as tap$1, debounceTime, distinctUntilChanged, takeUntil as takeUntil$1, startWith as startWith$1, switchMap as switchMap$1, delay } from 'rxjs/operators';
+import { filter, map as map$1, take, tap as tap$1, debounceTime, distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, startWith as startWith$1, switchMap as switchMap$1, delay } from 'rxjs/operators';
 import * as i1$4 from '@angular/common';
-import { DOCUMENT, CommonModule, registerLocaleData, CurrencyPipe, DecimalPipe, PercentPipe } from '@angular/common';
+import { DOCUMENT, CommonModule, NgComponentOutlet, registerLocaleData, CurrencyPipe, DecimalPipe, PercentPipe } from '@angular/common';
 import * as i1$3 from '@angular/router';
-import { NavigationEnd, NavigationStart, ResolveEnd, RouterModule } from '@angular/router';
+import { NavigationEnd, NavigationStart, ResolveEnd, RouterModule, RouterLink } from '@angular/router';
 import * as i2 from '@angular/forms';
 import { Validators, UntypedFormControl, ReactiveFormsModule, FormsModule, FormControl, FormGroup, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { deepmerge } from 'deepmerge-ts';
@@ -24,7 +24,7 @@ import moment from 'moment';
 import User20 from '@carbon/icons/es/user/20';
 import * as i2$2 from 'keycloak-angular';
 import * as i2$3 from 'carbon-components-angular';
-import { UIShellModule, IconModule, LinkModule, GridModule, TabsModule, StructuredListModule, ToggleModule, TagModule, DropdownModule, LayerModule, SkeletonModule, LoadingModule, Table, TableHeaderItem, TableModel, TableItem, PaginationModule, TableModule as TableModule$1, ContentSwitcherModule, ButtonModule, DialogModule, ModalModule as ModalModule$1, BreadcrumbModule, InputModule as InputModule$1, ComboBoxModule, ComboBox, CheckboxModule, AccordionModule, DatePickerModule as DatePickerModule$1, TimePickerModule, ModalButtonType, TilesModule, SelectModule as SelectModule$1, RadioModule as RadioModule$1, ModalService as ModalService$1, TooltipModule as TooltipModule$1, NotificationModule, ContextMenuModule, ToggletipModule } from 'carbon-components-angular';
+import { UIShellModule, IconModule, LinkModule, GridModule, TabsModule, StructuredListModule, ToggleModule, TagModule, DropdownModule, LayerModule, ButtonModule, TooltipModule as TooltipModule$1, SkeletonModule, LoadingModule, Table, TableHeaderItem, TableModel, TableItem, PaginationModule, TableModule as TableModule$1, ContentSwitcherModule, DialogModule, ModalModule as ModalModule$1, BreadcrumbModule, InputModule as InputModule$1, ComboBoxModule, ComboBox, CheckboxModule, AccordionModule, DatePickerModule as DatePickerModule$1, TimePickerModule, ModalButtonType, TilesModule, SelectModule as SelectModule$1, RadioModule as RadioModule$1, ModalService as ModalService$1, NotificationModule, ContextMenuModule, ToggletipModule } from 'carbon-components-angular';
 import * as i6 from '@angular/platform-browser';
 import * as i2$1 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -35,7 +35,8 @@ import { NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstra
 import { autoUpdate, computePosition, offset, flip, shift, hide } from '@floating-ui/dom';
 import * as i3 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import { Draggable16, OverflowMenuVertical16, ArrowDown16, ArrowUp16, SettingsView16, View16, ViewOff16, ChevronUp16, ChevronDown16, Close16, Add16, Edit16, TrashCan16, Save16, WarningAltFilled16, WarningFilled16, DocumentRequirements16, UserFollow16, Group16, User16 } from '@carbon/icons';
+import { Draggable16, Close16, PinFilled16, OverflowMenuVertical16, ArrowDown16, ArrowUp16, SettingsView16, View16, ViewOff16, ChevronUp16, ChevronDown16, Add16, Edit16, TrashCan16, Save16, WarningAltFilled16, WarningFilled16, DocumentRequirements16, UserFollow16, Group16, User16 } from '@carbon/icons';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
 import * as i3$1 from '@angular/cdk/layout';
 import { LayoutModule } from '@angular/cdk/layout';
 import localeNl from '@angular/common/locales/nl';
@@ -779,6 +780,22 @@ var ValuePathSelectorInputMode;
  * limitations under the License.
  */
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -1185,6 +1202,15 @@ const SEARCH_FIELDS_TEST_IDS = {
  * itself is one level down.
  */
 const SEARCH_FIELD_TEST_ID_PREFIX = 'searchField-';
+const SIDE_PANEL_TEST_IDS = {
+    panel: 'sidePanel',
+    closeButton: 'sidePanelCloseButton',
+    resizeHandle: 'sidePanelResizeHandle',
+    subtitleLink: 'sidePanelSubtitleLink',
+    pinnedIcon: 'sidePanelPinnedIcon',
+    origin: 'sidePanelOrigin',
+    originElsewhere: 'sidePanelOriginElsewhere',
+};
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -2017,6 +2043,12 @@ class PageTitleService {
     get pageActionsFullWidth$() {
         return this._pageActionsFullWidth$.asObservable();
     }
+    get pageActionsWrap$() {
+        return this._pageActionsWrap$.asObservable();
+    }
+    get pageActionsMinWidth$() {
+        return this._pageActionsMinWidth$.asObservable();
+    }
     get pageTitleHidden$() {
         return this._pageTitleHidden$.asObservable();
     }
@@ -2032,6 +2064,8 @@ class PageTitleService {
         this._customPageSubtitleSet$ = new BehaviorSubject(false);
         this._hasPageActions$ = new BehaviorSubject(false);
         this._pageActionsFullWidth$ = new BehaviorSubject(false);
+        this._pageActionsWrap$ = new BehaviorSubject(false);
+        this._pageActionsMinWidth$ = new BehaviorSubject(null);
         this._pageActionsViewContainerRef$ = new BehaviorSubject(null);
         this._pageTitleHidden$ = new BehaviorSubject(false);
         this._currentTitle$ = new BehaviorSubject('');
@@ -2067,6 +2101,16 @@ class PageTitleService {
     setPageActionsFullWidth(value) {
         this._pageActionsFullWidth$.next(value);
     }
+    setPageActionsWrap(value) {
+        this._pageActionsWrap$.next(value);
+    }
+    /**
+     * The narrowest width wrapping page actions can adapt to. They stay beside the title as long as
+     * this fits; null means their natural width.
+     */
+    setPageActionsMinWidth(width) {
+        this._pageActionsMinWidth$.next(width);
+    }
     setCustomPageTitleSet(set) {
         this._customPageTitleSet$.next(set);
     }
@@ -2097,6 +2141,8 @@ class PageTitleService {
             if (pageActionsViewContainerRef && !preventReset) {
                 pageActionsViewContainerRef.clear();
                 this.setHasPageActions(false);
+                this.setPageActionsWrap(false);
+                this.setPageActionsMinWidth(null);
             }
         }))
             .subscribe();
@@ -2901,6 +2947,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1$2.ConfigService }] });
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const SIDE_PANEL_WIDTH_STORAGE_KEY = 'sidePanelWidth';
+const SIDE_PANEL_DEFAULT_WIDTH = 480;
+const SIDE_PANEL_MIN_WIDTH = 320;
+const SIDE_PANEL_MAX_WIDTH = 960;
+class SidePanelHandleImpl {
+    constructor(_onHide, _onWithdraw) {
+        this._onHide = _onHide;
+        this._onWithdraw = _onWithdraw;
+        this._dismissed$ = new Subject();
+        this._replaced$ = new Subject();
+        this._resized$ = new Subject();
+        this.dismissed$ = this._dismissed$.asObservable();
+        this.replaced$ = this._replaced$.asObservable();
+        this.resized$ = this._resized$.asObservable();
+    }
+    hide() {
+        this._onHide(this);
+    }
+    withdraw() {
+        this._onWithdraw(this);
+    }
+    notifyDismissed() {
+        this._dismissed$.next();
+    }
+    notifyReplaced() {
+        this._replaced$.next();
+        this._dismissed$.complete();
+        this._replaced$.complete();
+        this._resized$.complete();
+    }
+    notifyResized(width) {
+        this._resized$.next(width);
+    }
+}
+/**
+ * App-wide side panel next to the routed content. Knows nothing about what it shows: providers
+ * offer content, the latest offer takes over. Dismissing only hides; the content stays alive until
+ * withdrawn or replaced.
+ */
+class SidePanelService {
+    constructor() {
+        this._current$ = new BehaviorSubject(null);
+        this._visible$ = new BehaviorSubject(false);
+        this._preferredWidth$ = new BehaviorSubject(this.loadWidth());
+        /** Width of content that brings its own; such content persists it, not the panel. */
+        this._contentWidth$ = new BehaviorSubject(null);
+        this._currentHandle = null;
+    }
+    get current$() {
+        return this._current$.asObservable();
+    }
+    get visible$() {
+        return this._visible$.asObservable();
+    }
+    /** The content's own width or else the user's preferred width, widened to the content's minimum. */
+    get width$() {
+        return combineLatest([this._preferredWidth$, this._contentWidth$, this._current$]).pipe(map(([preferred, contentWidth, current]) => this.clampWidth(Math.max(contentWidth ?? preferred, current?.minWidth ?? 0))), distinctUntilChanged());
+    }
+    dismiss() {
+        if (!this._visible$.getValue())
+            return;
+        this._visible$.next(false);
+        this._currentHandle?.notifyDismissed();
+    }
+    offer(offer) {
+        const current = this._current$.getValue();
+        if (this._currentHandle && current?.key === offer.key) {
+            // Only a changed width from the provider wins over a resize it has not caught up with yet.
+            if (offer.width !== current.width)
+                this._contentWidth$.next(offer.width ?? null);
+            this._current$.next(offer);
+            this._visible$.next(true);
+            return this._currentHandle;
+        }
+        this._currentHandle?.notifyReplaced();
+        const handle = new SidePanelHandleImpl(hidden => this.hideHandle(hidden), withdrawn => this.withdrawHandle(withdrawn));
+        this._currentHandle = handle;
+        this._contentWidth$.next(offer.width ?? null);
+        this._current$.next(offer);
+        this._visible$.next(true);
+        return handle;
+    }
+    /**
+     * Shows retained content again, also when hidden via `SidePanelHandle.hide()`. Does not notify
+     * the provider.
+     */
+    reopen() {
+        if (this._current$.getValue())
+            this._visible$.next(true);
+    }
+    /** Withdraws the current content only when it still carries [key]. */
+    withdraw(key) {
+        if (this._current$.getValue()?.key === key && this._currentHandle) {
+            this.withdrawHandle(this._currentHandle);
+        }
+    }
+    /** Resizes live. Call [endResize] once the user lets go. */
+    setWidth(width) {
+        const clamped = this.clampWidth(width);
+        if (this._contentWidth$.getValue() !== null) {
+            this._contentWidth$.next(clamped);
+            return;
+        }
+        this._preferredWidth$.next(clamped);
+        localStorage.setItem(SIDE_PANEL_WIDTH_STORAGE_KEY, `${clamped}`);
+    }
+    /** Reports the final width to the provider of the current content. */
+    endResize() {
+        this._currentHandle?.notifyResized(this._contentWidth$.getValue() ?? this._preferredWidth$.getValue());
+    }
+    clampWidth(width) {
+        const max = Math.min(SIDE_PANEL_MAX_WIDTH, Math.floor(window.innerWidth * 0.6));
+        return Math.round(Math.max(SIDE_PANEL_MIN_WIDTH, Math.min(width, max)));
+    }
+    hideHandle(handle) {
+        if (handle === this._currentHandle && this._visible$.getValue())
+            this._visible$.next(false);
+    }
+    loadWidth() {
+        const stored = Number(localStorage.getItem(SIDE_PANEL_WIDTH_STORAGE_KEY));
+        return Number.isFinite(stored) && stored > 0
+            ? this.clampWidth(stored)
+            : SIDE_PANEL_DEFAULT_WIDTH;
+    }
+    withdrawHandle(handle) {
+        if (handle !== this._currentHandle)
+            return;
+        this._currentHandle = null;
+        this._contentWidth$.next(null);
+        this._current$.next(null);
+        this._visible$.next(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SidePanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SidePanelService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SidePanelService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -3415,6 +3618,42 @@ const setRequiredOnSchema = (schema, path, property, isRequired) => {
     return schema;
 };
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Resize observations of [elements]. Lazy: the observer opens on subscribe and disconnects on
+ * unsubscribe. Emits each batch of entries from inside the observer callback, when layout is
+ * fresh, so reading sizes there forces no extra layout. Runs in whatever zone it is subscribed in.
+ */
+const fromResizeObserver = (elements, options) => new Observable(subscriber => {
+    const observer = new ResizeObserver(entries => subscriber.next(entries));
+    (Array.isArray(elements) ? elements : [elements]).forEach(element => observer.observe(element, options));
+    return () => observer.disconnect();
+});
+/** Mutation records of [target]. Lazy like [fromResizeObserver]. */
+const fromMutationObserver = (target, options) => new Observable(subscriber => {
+    const observer = new MutationObserver(records => subscriber.next(records));
+    observer.observe(target, options);
+    return () => observer.disconnect();
+});
+/** The border-box inline size of a resize entry, in CSS pixels. */
+const borderBoxWidth = (entry) => entry.borderBoxSize?.[0]?.inlineSize ?? entry.target.getBoundingClientRect().width;
+/** The content-box inline size of a resize entry, in CSS pixels. */
+const contentBoxWidth = (entry) => entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -4375,7 +4614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
 
 class MenuService {
     get menuItems$() {
-        return this._menuItems$.pipe(distinctUntilChanged((prev, curr) => isEqual(prev, curr)));
+        return this._menuItems$.pipe(distinctUntilChanged$1((prev, curr) => isEqual(prev, curr)));
     }
     get menuItemsLoaded$() {
         return this._menuItems$.pipe(map$1(items => Array.isArray(items) && items.length > 0));
@@ -4409,7 +4648,7 @@ class MenuService {
                 });
             });
             return closestSequence;
-        }), distinctUntilChanged());
+        }), distinctUntilChanged$1());
     }
     constructor(configService, http, logger, menuIncludeService, pendingChangesService, router, userProviderService, keycloakService) {
         this.configService = configService;
@@ -6160,6 +6399,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 }]
         }] });
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const SIDE_PANEL_OFFSET_PROPERTY = '--valtimo-side-panel-offset';
+const SIDE_PANEL_KEYBOARD_RESIZE_STEP = 16;
+/**
+ * Fixed panel at the right edge of the internal layout. Rendered once next to the router outlet so
+ * its content survives navigation; showing and hiding is CSS only, because moving an iframe in the
+ * DOM reloads it. Publishes its occupied width as `--valtimo-side-panel-offset` so the layout can
+ * push the page content aside.
+ */
+class SidePanelComponent {
+    constructor(iconService, router, shellService, sidePanelService) {
+        this.iconService = iconService;
+        this.router = router;
+        this.shellService = shellService;
+        this.sidePanelService = sidePanelService;
+        this.$current = toSignal(this.sidePanelService.current$, { initialValue: null });
+        this.$offers = computed(() => {
+            const current = this.$current();
+            return current ? [current] : [];
+        });
+        /** The origin's label; null while a resolving label has not arrived. */
+        this.$originLabel = toSignal(toObservable(this.$current).pipe(switchMap(current => {
+            const label = current?.origin?.label;
+            if (label === undefined)
+                return of(null);
+            return isObservable(label) ? label.pipe(startWith(null)) : of(label);
+        })), { initialValue: null });
+        /** The user is on a page other than the one the content belongs to. */
+        this.$originElsewhere = computed(() => {
+            const origin = this.$current()?.origin;
+            if (!origin)
+                return false;
+            const originUrl = this.router.serializeUrl(this.router.createUrlTree(origin.route));
+            const url = this._$url().split(/[?#]/)[0];
+            return url !== originUrl && !url.startsWith(`${originUrl}/`);
+        });
+        this.$resizing = signal(false);
+        this.$visible = toSignal(this.sidePanelService.visible$, { initialValue: false });
+        this.$width = toSignal(this.sidePanelService.width$, { requireSync: true });
+        this.testIds = SIDE_PANEL_TEST_IDS;
+        this._endResize = null;
+        this._$largeScreen = toSignal(this.shellService.largeScreen$, { initialValue: true });
+        this._$url = toSignal(this.router.events.pipe(filter$1((event) => event instanceof NavigationEnd), map(event => event.urlAfterRedirects), startWith(this.router.url)), { requireSync: true });
+        this.iconService.registerAll([Close16, PinFilled16]);
+        // Small screens: overlay instead of push.
+        effect(() => {
+            const offset = this.$current() && this.$visible() && this._$largeScreen() ? this.$width() : 0;
+            document.documentElement.style.setProperty(SIDE_PANEL_OFFSET_PROPERTY, `${offset}px`);
+        });
+    }
+    ngOnDestroy() {
+        this._endResize?.();
+        document.documentElement.style.removeProperty(SIDE_PANEL_OFFSET_PROPERTY);
+    }
+    onClose() {
+        this.sidePanelService.dismiss();
+    }
+    onResizeKey(delta) {
+        this.sidePanelService.setWidth(this.$width() + delta * SIDE_PANEL_KEYBOARD_RESIZE_STEP);
+        this.sidePanelService.endResize();
+    }
+    onResizeStart(event) {
+        event.preventDefault();
+        this.$resizing.set(true);
+        document.body.style.setProperty('cursor', 'col-resize');
+        document.body.style.setProperty('user-select', 'none');
+        const onMove = (moveEvent) => this.sidePanelService.setWidth(window.innerWidth - moveEvent.clientX);
+        const onUp = () => {
+            this.$resizing.set(false);
+            document.body.style.removeProperty('cursor');
+            document.body.style.removeProperty('user-select');
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            this.sidePanelService.endResize();
+            this._endResize = null;
+        };
+        this._endResize = onUp;
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SidePanelComponent, deps: [{ token: i2$3.IconService }, { token: i1$3.Router }, { token: ShellService }, { token: SidePanelService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: SidePanelComponent, isStandalone: true, selector: "valtimo-side-panel", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<aside\n  [attr.aria-hidden]=\"!$visible()\"\n  [attr.data-test-id]=\"testIds.panel\"\n  [class.valtimo-side-panel--resizing]=\"$resizing()\"\n  [class.valtimo-side-panel--visible]=\"$visible() && !!$current()\"\n  [style.width.px]=\"$width()\"\n  class=\"valtimo-side-panel\"\n>\n  <div\n    [attr.aria-label]=\"'sidePanel.resize' | translate\"\n    [attr.data-test-id]=\"testIds.resizeHandle\"\n    (keydown.arrowLeft)=\"onResizeKey(1)\"\n    (keydown.arrowRight)=\"onResizeKey(-1)\"\n    (mousedown)=\"onResizeStart($event)\"\n    aria-orientation=\"vertical\"\n    class=\"valtimo-side-panel__resize-handle\"\n    role=\"separator\"\n    tabindex=\"0\"\n  ></div>\n\n  @if ($current(); as current) {\n    <header class=\"valtimo-side-panel__header\">\n      <div class=\"valtimo-side-panel__titles\">\n        <div class=\"valtimo-side-panel__title-row\">\n          @if (current.pinned) {\n            <cds-tooltip [description]=\"'sidePanel.pinned' | translate\" align=\"bottom-left\">\n              <span\n                [attr.aria-label]=\"'sidePanel.pinned' | translate\"\n                [attr.data-test-id]=\"testIds.pinnedIcon\"\n                class=\"valtimo-side-panel__pin\"\n                role=\"img\"\n                tabindex=\"0\"\n              >\n                <svg cdsIcon=\"pin--filled\" size=\"16\"></svg>\n              </span>\n            </cds-tooltip>\n          }\n\n          <h2 class=\"valtimo-side-panel__title\">{{ current.title }}</h2>\n        </div>\n\n        @if (current.subtitle) {\n          @if (current.subtitleLink) {\n            <a\n              [attr.data-test-id]=\"testIds.subtitleLink\"\n              [routerLink]=\"current.subtitleLink\"\n              class=\"valtimo-side-panel__subtitle\"\n              >{{ current.subtitle }}</a\n            >\n          } @else {\n            <span class=\"valtimo-side-panel__subtitle\">{{ current.subtitle }}</span>\n          }\n        }\n\n        @if (current.origin; as origin) {\n          <div [attr.data-test-id]=\"testIds.origin\" class=\"valtimo-side-panel__origin\">\n            <span>{{ 'sidePanel.originFor' | translate }}</span>\n\n            <a [routerLink]=\"origin.route\" class=\"valtimo-side-panel__origin-link\">{{\n              $originLabel() ?? ('sidePanel.originFallback' | translate)\n            }}</a>\n\n            @if ($originElsewhere()) {\n              <cds-tag\n                [attr.data-test-id]=\"testIds.originElsewhere\"\n                [title]=\"\n                  'sidePanel.originElsewhereDescription'\n                    | translate: {label: $originLabel() ?? ('sidePanel.originFallback' | translate)}\n                \"\n                class=\"valtimo-side-panel__origin-tag\"\n                size=\"sm\"\n                type=\"warm-gray\"\n                >{{ 'sidePanel.originElsewhere' | translate }}</cds-tag\n              >\n            }\n          </div>\n        }\n      </div>\n\n      <button\n        [attr.aria-label]=\"'sidePanel.close' | translate\"\n        [attr.data-test-id]=\"testIds.closeButton\"\n        [iconOnly]=\"true\"\n        (click)=\"onClose()\"\n        cdsButton=\"ghost\"\n        class=\"valtimo-side-panel__close\"\n      >\n        <svg cdsIcon=\"close\" class=\"cds--btn__icon\" size=\"16\"></svg>\n      </button>\n    </header>\n  }\n\n  <div class=\"valtimo-side-panel__body\">\n    @for (offer of $offers(); track offer.key) {\n      <ng-container\n        *ngComponentOutlet=\"offer.component; inputs: offer.inputs ?? {}; injector: offer.injector\"\n      ></ng-container>\n    }\n  </div>\n</aside>\n", styles: [".valtimo-side-panel{position:fixed;inset-block:3rem 0;inset-inline-end:0;z-index:7999;display:flex;flex-direction:column;background-color:var(--cds-layer);border-inline-start:1px solid var(--cds-border-subtle);transform:translate(100%);visibility:hidden;transition:transform .11s cubic-bezier(.2,0,.38,.9),visibility 0s linear .11s}.valtimo-side-panel--visible{transform:none;visibility:visible;transition-delay:0s}.valtimo-side-panel--resizing{-webkit-user-select:none;user-select:none}.valtimo-side-panel--resizing ::ng-deep iframe{pointer-events:none}.valtimo-side-panel__resize-handle{position:absolute;top:0;left:0;z-index:1;width:3px;height:100%;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9);outline:none}.valtimo-side-panel__resize-handle:hover,.valtimo-side-panel__resize-handle:focus-visible{opacity:1}.valtimo-side-panel--resizing .valtimo-side-panel__resize-handle{opacity:1}.valtimo-side-panel__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cds-spacing-03);min-height:3rem;padding-inline-start:var(--cds-spacing-05);border-block-end:1px solid var(--cds-border-subtle)}.valtimo-side-panel__titles{display:flex;flex-direction:column;gap:var(--cds-spacing-02);min-width:0;padding-block:var(--cds-spacing-03)}.valtimo-side-panel__close{flex:none;align-self:flex-start;align-items:center;justify-content:center;padding:0}.valtimo-side-panel__title-row{display:flex;align-items:center;gap:var(--cds-spacing-03);min-width:0}.valtimo-side-panel__pin{display:flex;color:var(--cds-icon-secondary);outline:none}.valtimo-side-panel__pin:focus-visible{outline:2px solid var(--cds-focus)}.valtimo-side-panel__pin svg{fill:currentColor}.valtimo-side-panel__origin{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cds-spacing-02) var(--cds-spacing-03);font-size:var(--cds-body-compact-01-font-size);color:var(--cds-text-secondary)}.valtimo-side-panel__origin-link{color:var(--cds-link-primary)}.valtimo-side-panel__origin-tag{margin:0}.valtimo-side-panel__title{font-size:var(--cds-heading-compact-02-font-size);font-weight:var(--cds-heading-compact-02-font-weight);line-height:var(--cds-heading-compact-02-line-height);color:var(--cds-text-primary)}.valtimo-side-panel__subtitle{font-size:var(--cds-body-compact-01-font-size);color:var(--cds-text-secondary)}.valtimo-side-panel a.valtimo-side-panel__subtitle{color:var(--cds-link-primary)}.valtimo-side-panel__body{flex:1;min-height:0;overflow:auto;font-size:var(--cds-body-compact-01-font-size);font-weight:var(--cds-body-compact-01-font-weight);line-height:var(--cds-body-compact-01-line-height);letter-spacing:var(--cds-body-compact-01-letter-spacing)}.valtimo-side-panel__body ::ng-deep>*{display:block;height:100%}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "ngmodule", type: TooltipModule$1 }, { kind: "component", type: i2$3.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SidePanelComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'valtimo-side-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgComponentOutlet,
+                        RouterLink,
+                        TranslateModule,
+                        ButtonModule,
+                        IconModule,
+                        TagModule,
+                        TooltipModule$1,
+                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<aside\n  [attr.aria-hidden]=\"!$visible()\"\n  [attr.data-test-id]=\"testIds.panel\"\n  [class.valtimo-side-panel--resizing]=\"$resizing()\"\n  [class.valtimo-side-panel--visible]=\"$visible() && !!$current()\"\n  [style.width.px]=\"$width()\"\n  class=\"valtimo-side-panel\"\n>\n  <div\n    [attr.aria-label]=\"'sidePanel.resize' | translate\"\n    [attr.data-test-id]=\"testIds.resizeHandle\"\n    (keydown.arrowLeft)=\"onResizeKey(1)\"\n    (keydown.arrowRight)=\"onResizeKey(-1)\"\n    (mousedown)=\"onResizeStart($event)\"\n    aria-orientation=\"vertical\"\n    class=\"valtimo-side-panel__resize-handle\"\n    role=\"separator\"\n    tabindex=\"0\"\n  ></div>\n\n  @if ($current(); as current) {\n    <header class=\"valtimo-side-panel__header\">\n      <div class=\"valtimo-side-panel__titles\">\n        <div class=\"valtimo-side-panel__title-row\">\n          @if (current.pinned) {\n            <cds-tooltip [description]=\"'sidePanel.pinned' | translate\" align=\"bottom-left\">\n              <span\n                [attr.aria-label]=\"'sidePanel.pinned' | translate\"\n                [attr.data-test-id]=\"testIds.pinnedIcon\"\n                class=\"valtimo-side-panel__pin\"\n                role=\"img\"\n                tabindex=\"0\"\n              >\n                <svg cdsIcon=\"pin--filled\" size=\"16\"></svg>\n              </span>\n            </cds-tooltip>\n          }\n\n          <h2 class=\"valtimo-side-panel__title\">{{ current.title }}</h2>\n        </div>\n\n        @if (current.subtitle) {\n          @if (current.subtitleLink) {\n            <a\n              [attr.data-test-id]=\"testIds.subtitleLink\"\n              [routerLink]=\"current.subtitleLink\"\n              class=\"valtimo-side-panel__subtitle\"\n              >{{ current.subtitle }}</a\n            >\n          } @else {\n            <span class=\"valtimo-side-panel__subtitle\">{{ current.subtitle }}</span>\n          }\n        }\n\n        @if (current.origin; as origin) {\n          <div [attr.data-test-id]=\"testIds.origin\" class=\"valtimo-side-panel__origin\">\n            <span>{{ 'sidePanel.originFor' | translate }}</span>\n\n            <a [routerLink]=\"origin.route\" class=\"valtimo-side-panel__origin-link\">{{\n              $originLabel() ?? ('sidePanel.originFallback' | translate)\n            }}</a>\n\n            @if ($originElsewhere()) {\n              <cds-tag\n                [attr.data-test-id]=\"testIds.originElsewhere\"\n                [title]=\"\n                  'sidePanel.originElsewhereDescription'\n                    | translate: {label: $originLabel() ?? ('sidePanel.originFallback' | translate)}\n                \"\n                class=\"valtimo-side-panel__origin-tag\"\n                size=\"sm\"\n                type=\"warm-gray\"\n                >{{ 'sidePanel.originElsewhere' | translate }}</cds-tag\n              >\n            }\n          </div>\n        }\n      </div>\n\n      <button\n        [attr.aria-label]=\"'sidePanel.close' | translate\"\n        [attr.data-test-id]=\"testIds.closeButton\"\n        [iconOnly]=\"true\"\n        (click)=\"onClose()\"\n        cdsButton=\"ghost\"\n        class=\"valtimo-side-panel__close\"\n      >\n        <svg cdsIcon=\"close\" class=\"cds--btn__icon\" size=\"16\"></svg>\n      </button>\n    </header>\n  }\n\n  <div class=\"valtimo-side-panel__body\">\n    @for (offer of $offers(); track offer.key) {\n      <ng-container\n        *ngComponentOutlet=\"offer.component; inputs: offer.inputs ?? {}; injector: offer.injector\"\n      ></ng-container>\n    }\n  </div>\n</aside>\n", styles: [".valtimo-side-panel{position:fixed;inset-block:3rem 0;inset-inline-end:0;z-index:7999;display:flex;flex-direction:column;background-color:var(--cds-layer);border-inline-start:1px solid var(--cds-border-subtle);transform:translate(100%);visibility:hidden;transition:transform .11s cubic-bezier(.2,0,.38,.9),visibility 0s linear .11s}.valtimo-side-panel--visible{transform:none;visibility:visible;transition-delay:0s}.valtimo-side-panel--resizing{-webkit-user-select:none;user-select:none}.valtimo-side-panel--resizing ::ng-deep iframe{pointer-events:none}.valtimo-side-panel__resize-handle{position:absolute;top:0;left:0;z-index:1;width:3px;height:100%;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9);outline:none}.valtimo-side-panel__resize-handle:hover,.valtimo-side-panel__resize-handle:focus-visible{opacity:1}.valtimo-side-panel--resizing .valtimo-side-panel__resize-handle{opacity:1}.valtimo-side-panel__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cds-spacing-03);min-height:3rem;padding-inline-start:var(--cds-spacing-05);border-block-end:1px solid var(--cds-border-subtle)}.valtimo-side-panel__titles{display:flex;flex-direction:column;gap:var(--cds-spacing-02);min-width:0;padding-block:var(--cds-spacing-03)}.valtimo-side-panel__close{flex:none;align-self:flex-start;align-items:center;justify-content:center;padding:0}.valtimo-side-panel__title-row{display:flex;align-items:center;gap:var(--cds-spacing-03);min-width:0}.valtimo-side-panel__pin{display:flex;color:var(--cds-icon-secondary);outline:none}.valtimo-side-panel__pin:focus-visible{outline:2px solid var(--cds-focus)}.valtimo-side-panel__pin svg{fill:currentColor}.valtimo-side-panel__origin{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cds-spacing-02) var(--cds-spacing-03);font-size:var(--cds-body-compact-01-font-size);color:var(--cds-text-secondary)}.valtimo-side-panel__origin-link{color:var(--cds-link-primary)}.valtimo-side-panel__origin-tag{margin:0}.valtimo-side-panel__title{font-size:var(--cds-heading-compact-02-font-size);font-weight:var(--cds-heading-compact-02-font-weight);line-height:var(--cds-heading-compact-02-line-height);color:var(--cds-text-primary)}.valtimo-side-panel__subtitle{font-size:var(--cds-body-compact-01-font-size);color:var(--cds-text-secondary)}.valtimo-side-panel a.valtimo-side-panel__subtitle{color:var(--cds-link-primary)}.valtimo-side-panel__body{flex:1;min-height:0;overflow:auto;font-size:var(--cds-body-compact-01-font-size);font-weight:var(--cds-body-compact-01-font-weight);line-height:var(--cds-body-compact-01-line-height);letter-spacing:var(--cds-body-compact-01-letter-spacing)}.valtimo-side-panel__body ::ng-deep>*{display:block;height:100%}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i2$3.IconService }, { type: i1$3.Router }, { type: ShellService }, { type: SidePanelService }] });
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -9160,29 +9509,29 @@ class PageHeaderComponent {
         this.titleAsBreadcrumb$ = this.pageHeaderService.titleAsBreadcrumb$;
         this.pageActionsHasContent$ = this.pageHeaderService.pageActionsHasContent$;
         this.pageTitleHidden$ = this.pageTitleService.pageTitleHidden$;
+        this.pageActionsWrap$ = this.pageTitleService.pageActionsWrap$;
+        this.pageActionsMinWidth$ = this.pageTitleService.pageActionsMinWidth$;
+        this._pageHeadHeightSubscription = null;
     }
     ngAfterViewInit() {
         this.pageHeaderService.setContentViewContainerRef(this._contentrVcr);
         this.openPageHeadResizeObserver();
     }
     ngOnDestroy() {
-        this._pageHeadResizeObserver?.disconnect();
+        this._pageHeadHeightSubscription?.unsubscribe();
     }
     openPageHeadResizeObserver() {
-        this._pageHeadResizeObserver = new ResizeObserver(entries => {
-            const pageHeadEntry = Array.isArray(entries) && entries[0];
-            const pageHeadHeight = pageHeadEntry?.contentRect?.height;
-            if (pageHeadHeight)
-                this.pageHeaderService.setPageHeadHeight(pageHeadHeight);
-        });
-        this._pageHeadResizeObserver.observe(this._pageHead.nativeElement);
+        // Width-only resizes emit too: FitPage re-fits when content above it reflows.
+        this._pageHeadHeightSubscription = fromResizeObserver(this._pageHead.nativeElement)
+            .pipe(map(entries => entries[entries.length - 1]?.contentRect.height), filter$1((height) => !!height))
+            .subscribe(height => this.pageHeaderService.setPageHeadHeight(height));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PageHeaderComponent, deps: [{ token: UserInterfaceService }, { token: PageHeaderService }, { token: PageTitleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: PageHeaderComponent, isStandalone: false, selector: "valtimo-page-header", viewQueries: [{ propertyName: "_contentrVcr", first: true, predicate: ["contentVcr"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_pageHead", first: true, predicate: ["pageHead"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  #pageHead\n  class=\"page-head\"\n  [ngClass]=\"{\n    'page-head--hidden': (showPageHeader$ | async) === false,\n    'page-head--compact': compactMode$ | async,\n    'page-head--no-content': (compactMode$ | async) && (pageActionsHasContent$ | async) === false,\n    'page-head--no-margin': pageTitleHidden$ | async,\n    'page-head--small-title': smallTitle$ | async,\n    'page-head--title-as-breadcrumb': (titleAsBreadcrumb$ | async) && !(compactMode$ | async),\n  }\"\n>\n  <ng-container #contentVcr></ng-container>\n\n  <valtimo-page-subtitle></valtimo-page-subtitle>\n\n  <valtimo-page-actions></valtimo-page-actions>\n</div>\n\n<ng-container renderPageHeader>\n  <ng-template>\n    <div\n      class=\"page-header-container\"\n      [ngClass]=\"{\n        'page-header-container--compact': compactMode$ | async,\n        'page-header-container--small-title': smallTitle$ | async,\n        'page-header-container--title-as-breadcrumb':\n          (titleAsBreadcrumb$ | async) && !(compactMode$ | async),\n      }\"\n    >\n      <valtimo-breadcrumb-navigation></valtimo-breadcrumb-navigation>\n\n      <valtimo-page-title></valtimo-page-title>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".page-head{display:flex;width:100%;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.page-head--hidden{display:none}.page-head--compact{margin-bottom:16px}.page-head--small-title{align-items:flex-start;margin-bottom:0}.page-head--title-as-breadcrumb{flex-direction:column;align-items:stretch;justify-content:flex-start;margin-bottom:16px}.page-head--title-as-breadcrumb ::ng-deep .page-actions--visible{padding-left:0}.page-head--no-content,.page-head--no-margin{margin-bottom:0}.page-head:not(.page-head--title-as-breadcrumb) valtimo-page-actions{flex:1 0 auto;width:auto}.page-header-container{width:min-content;min-width:0}.page-header-container--compact{display:flex;width:100%;justify-content:space-between;align-items:center;padding-inline:16px}.page-header-container--small-title{display:flex;flex-direction:row;gap:8px;width:min-content}.page-header-container--title-as-breadcrumb{width:max-content}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PageTitleComponent, selector: "valtimo-page-title" }, { kind: "component", type: BreadcrumbNavigationComponent, selector: "valtimo-breadcrumb-navigation" }, { kind: "directive", type: RenderPageHeaderDirective, selector: "[renderPageHeader]" }, { kind: "component", type: PageActionsComponent, selector: "valtimo-page-actions" }, { kind: "component", type: PageSubtitleComponent, selector: "valtimo-page-subtitle" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: PageHeaderComponent, isStandalone: false, selector: "valtimo-page-header", viewQueries: [{ propertyName: "_contentrVcr", first: true, predicate: ["contentVcr"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_pageHead", first: true, predicate: ["pageHead"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  #pageHead\n  class=\"page-head\"\n  [ngClass]=\"{\n    'page-head--hidden': (showPageHeader$ | async) === false,\n    'page-head--compact': compactMode$ | async,\n    'page-head--no-content': (compactMode$ | async) && (pageActionsHasContent$ | async) === false,\n    'page-head--no-margin': pageTitleHidden$ | async,\n    'page-head--small-title': smallTitle$ | async,\n    'page-head--title-as-breadcrumb': (titleAsBreadcrumb$ | async) && !(compactMode$ | async),\n    'page-head--wrap-actions': pageActionsWrap$ | async,\n  }\"\n>\n  <ng-container #contentVcr></ng-container>\n\n  <valtimo-page-subtitle></valtimo-page-subtitle>\n\n  <valtimo-page-actions\n    [style.flex-basis.px]=\"(pageActionsWrap$ | async) ? (pageActionsMinWidth$ | async) : null\"\n  ></valtimo-page-actions>\n</div>\n\n<ng-container renderPageHeader>\n  <ng-template>\n    <div\n      class=\"page-header-container\"\n      [ngClass]=\"{\n        'page-header-container--compact': compactMode$ | async,\n        'page-header-container--small-title': smallTitle$ | async,\n        'page-header-container--title-as-breadcrumb':\n          (titleAsBreadcrumb$ | async) && !(compactMode$ | async),\n      }\"\n    >\n      <valtimo-breadcrumb-navigation></valtimo-breadcrumb-navigation>\n\n      <valtimo-page-title></valtimo-page-title>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".page-head{display:flex;width:100%;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.page-head--hidden{display:none}.page-head--compact{margin-bottom:16px}.page-head--small-title{align-items:flex-start;margin-bottom:0}.page-head--title-as-breadcrumb{flex-direction:column;align-items:stretch;justify-content:flex-start;margin-bottom:16px}.page-head--title-as-breadcrumb ::ng-deep .page-actions--visible{padding-left:0}.page-head--no-content,.page-head--no-margin{margin-bottom:0}.page-head:not(.page-head--title-as-breadcrumb) valtimo-page-actions{flex:1 0 auto;width:auto}.page-head--wrap-actions:not(.page-head--title-as-breadcrumb){flex-wrap:wrap;align-items:center;column-gap:var(--cds-spacing-07);row-gap:var(--cds-spacing-03)}.page-head--wrap-actions:not(.page-head--title-as-breadcrumb)>valtimo-page-subtitle{display:none}.page-head--wrap-actions:not(.page-head--title-as-breadcrumb) .page-header-container{width:max-content;max-width:100%;align-items:baseline}.page-head--wrap-actions:not(.page-head--title-as-breadcrumb) valtimo-page-actions{flex-shrink:1;min-width:0}.page-head--wrap-actions:not(.page-head--title-as-breadcrumb) ::ng-deep .page-actions--visible{min-width:0;padding-left:0}.page-header-container{width:min-content;min-width:0}.page-header-container--compact{display:flex;width:100%;justify-content:space-between;align-items:center;padding-inline:16px}.page-header-container--small-title{display:flex;flex-direction:row;gap:8px;width:min-content}.page-header-container--title-as-breadcrumb{width:max-content}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PageTitleComponent, selector: "valtimo-page-title" }, { kind: "component", type: BreadcrumbNavigationComponent, selector: "valtimo-breadcrumb-navigation" }, { kind: "directive", type: RenderPageHeaderDirective, selector: "[renderPageHeader]" }, { kind: "component", type: PageActionsComponent, selector: "valtimo-page-actions" }, { kind: "component", type: PageSubtitleComponent, selector: "valtimo-page-subtitle" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-page-header', standalone: false, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  #pageHead\n  class=\"page-head\"\n  [ngClass]=\"{\n    'page-head--hidden': (showPageHeader$ | async) === false,\n    'page-head--compact': compactMode$ | async,\n    'page-head--no-content': (compactMode$ | async) && (pageActionsHasContent$ | async) === false,\n    'page-head--no-margin': pageTitleHidden$ | async,\n    'page-head--small-title': smallTitle$ | async,\n    'page-head--title-as-breadcrumb': (titleAsBreadcrumb$ | async) && !(compactMode$ | async),\n  }\"\n>\n  <ng-container #contentVcr></ng-container>\n\n  <valtimo-page-subtitle></valtimo-page-subtitle>\n\n  <valtimo-page-actions></valtimo-page-actions>\n</div>\n\n<ng-container renderPageHeader>\n  <ng-template>\n    <div\n      class=\"page-header-container\"\n      [ngClass]=\"{\n        'page-header-container--compact': compactMode$ | async,\n        'page-header-container--small-title': smallTitle$ | async,\n        'page-header-container--title-as-breadcrumb':\n          (titleAsBreadcrumb$ | async) && !(compactMode$ | async),\n      }\"\n    >\n      <valtimo-breadcrumb-navigation></valtimo-breadcrumb-navigation>\n\n      <valtimo-page-title></valtimo-page-title>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".page-head{display:flex;width:100%;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.page-head--hidden{display:none}.page-head--compact{margin-bottom:16px}.page-head--small-title{align-items:flex-start;margin-bottom:0}.page-head--title-as-breadcrumb{flex-direction:column;align-items:stretch;justify-content:flex-start;margin-bottom:16px}.page-head--title-as-breadcrumb ::ng-deep .page-actions--visible{padding-left:0}.page-head--no-content,.page-head--no-margin{margin-bottom:0}.page-head:not(.page-head--title-as-breadcrumb) valtimo-page-actions{flex:1 0 auto;width:auto}.page-header-container{width:min-content;min-width:0}.page-header-container--compact{display:flex;width:100%;justify-content:space-between;align-items:center;padding-inline:16px}.page-header-container--small-title{display:flex;flex-direction:row;gap:8px;width:min-content}.page-header-container--title-as-breadcrumb{width:max-content}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ selector: 'valtimo-page-header', standalone: false, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  #pageHead\n  class=\"page-head\"\n  [ngClass]=\"{\n    'page-head--hidden': (showPageHeader$ | async) === false,\n    'page-head--compact': compactMode$ | async,\n    'page-head--no-content': (compactMode$ | async) && (pageActionsHasContent$ | async) === false,\n    'page-head--no-margin': pageTitleHidden$ | async,\n    'page-head--small-title': smallTitle$ | async,\n    'page-head--title-as-breadcrumb': (titleAsBreadcrumb$ | async) && !(compactMode$ | async),\n    'page-head--wrap-actions': pageActionsWrap$ | async,\n  }\"\n>\n  <ng-container #contentVcr></ng-container>\n\n  <valtimo-page-subtitle></valtimo-page-subtitle>\n\n  <valtimo-page-actions\n    [style.flex-basis.px]=\"(pageActionsWrap$ | async) ? (pageActionsMinWidth$ | async) : null\"\n  ></valtimo-page-actions>\n</div>\n\n<ng-container renderPageHeader>\n  <ng-template>\n    <div\n      class=\"page-header-container\"\n      [ngClass]=\"{\n        'page-header-container--compact': compactMode$ | async,\n        'page-header-container--small-title': smallTitle$ | async,\n        'page-header-container--title-as-breadcrumb':\n          (titleAsBreadcrumb$ | async) && !(compactMode$ | async),\n      }\"\n    >\n      <valtimo-breadcrumb-navigation></valtimo-breadcrumb-navigation>\n\n      <valtimo-page-title></valtimo-page-title>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".page-head{display:flex;width:100%;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.page-head--hidden{display:none}.page-head--compact{margin-bottom:16px}.page-head--small-title{align-items:flex-start;margin-bottom:0}.page-head--title-as-breadcrumb{flex-direction:column;align-items:stretch;justify-content:flex-start;margin-bottom:16px}.page-head--title-as-breadcrumb ::ng-deep .page-actions--visible{padding-left:0}.page-head--no-content,.page-head--no-margin{margin-bottom:0}.page-head:not(.page-head--title-as-breadcrumb) valtimo-page-actions{flex:1 0 auto;width:auto}.page-head--wrap-actions:not(.page-head--title-as-breadcrumb){flex-wrap:wrap;align-items:center;column-gap:var(--cds-spacing-07);row-gap:var(--cds-spacing-03)}.page-head--wrap-actions:not(.page-head--title-as-breadcrumb)>valtimo-page-subtitle{display:none}.page-head--wrap-actions:not(.page-head--title-as-breadcrumb) .page-header-container{width:max-content;max-width:100%;align-items:baseline}.page-head--wrap-actions:not(.page-head--title-as-breadcrumb) valtimo-page-actions{flex-shrink:1;min-width:0}.page-head--wrap-actions:not(.page-head--title-as-breadcrumb) ::ng-deep .page-actions--visible{min-width:0;padding-left:0}.page-header-container{width:min-content;min-width:0}.page-header-container--compact{display:flex;width:100%;justify-content:space-between;align-items:center;padding-inline:16px}.page-header-container--small-title{display:flex;flex-direction:row;gap:8px;width:min-content}.page-header-container--title-as-breadcrumb{width:max-content}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: UserInterfaceService }, { type: PageHeaderService }, { type: PageTitleService }], propDecorators: { _contentrVcr: [{
                 type: ViewChild,
                 args: ['contentVcr', { static: true, read: ViewContainerRef }]
@@ -10578,12 +10927,12 @@ class FormioComponent {
         this.refreshForm = new EventEmitter();
         this.submission$ = new BehaviorSubject({});
         this._form$ = new BehaviorSubject(undefined);
-        this.form$ = combineLatest([this._form$, this.translateService.stream('key')]).pipe(filter(([form]) => !!form), map$1(([form]) => this.formioTranslationService.translateFormDefinition(form)), distinctUntilChanged((prev, curr) => isEqual(prev, curr)));
+        this.form$ = combineLatest([this._form$, this.translateService.stream('key')]).pipe(filter(([form]) => !!form), map$1(([form]) => this.formioTranslationService.translateFormDefinition(form)), distinctUntilChanged$1((prev, curr) => isEqual(prev, curr)));
         this.options$ = new BehaviorSubject(undefined);
         this.readOnly$ = new BehaviorSubject(false);
         this.errors$ = new BehaviorSubject([]);
         this.languageEventEmitter = new EventEmitter();
-        this.currentLanguage$ = this.translateService.stream('key').pipe(map$1(() => this.translateService.currentLang), distinctUntilChanged(), tap$1(language => this.languageEventEmitter.emit(language)));
+        this.currentLanguage$ = this.translateService.stream('key').pipe(map$1(() => this.translateService.currentLang), distinctUntilChanged$1(), tap$1(language => this.languageEventEmitter.emit(language)));
         this._overrideOptions$ = new BehaviorSubject({});
         this.formioOptions$ = combineLatest([
             this.options$,
@@ -10600,7 +10949,7 @@ class FormioComponent {
                 }),
             };
             return deepmerge(defaultOptions, overrideOptions);
-        }), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), tap$1(options => this.logger.debug('Form.IO options used', options)));
+        }), distinctUntilChanged$1((prev, curr) => isEqual(prev, curr)), tap$1(options => this.logger.debug('Form.IO options used', options)));
         // Only renderOptions reaches form.io itself; getRendererOptions() drops everything else.
         this.renderOptions$ = this.currentLanguage$.pipe(map$1(language => ({ language })));
         this._storeTokenInLocalStorage = !this.configService.getFeatureToggle('disableFormioTokenInLocalStorage');
@@ -10874,7 +11223,7 @@ class FormioBuilderComponent {
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.change = new EventEmitter();
         this.triggerRebuild = new EventEmitter();
-        this.currentLanguage$ = this.translateService.stream('key').pipe(map$1(() => this.translateService.currentLang), distinctUntilChanged(), tap$1(language => this.languageEventEmitter.emit(language)));
+        this.currentLanguage$ = this.translateService.stream('key').pipe(map$1(() => this.translateService.currentLang), distinctUntilChanged$1(), tap$1(language => this.languageEventEmitter.emit(language)));
         this.languageEventEmitter = new EventEmitter();
         this.options$ = new BehaviorSubject(undefined);
         this._overrideOptions$ = new BehaviorSubject({});
@@ -10894,7 +11243,7 @@ class FormioBuilderComponent {
                 }),
             };
             return deepmerge(defaultOptions, overrideOptions);
-        }), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), tap$1(() => this.triggerRebuild.emit()));
+        }), distinctUntilChanged$1((prev, curr) => isEqual(prev, curr)), tap$1(() => this.triggerRebuild.emit()));
         this.editFormModified$ = new BehaviorSubject(false);
         this.modifyEditForm = () => {
             const context$ = getContextObservable(this.route);
@@ -11956,7 +12305,7 @@ class ValuePathSelectorComponent {
         return this.formGroup.get('selectedPath');
     }
     get _selectedPath$() {
-        return this.selectedPath.valueChanges.pipe(startWith(this.selectedPath.value), distinctUntilChanged(), tap(value => {
+        return this.selectedPath.valueChanges.pipe(startWith(this.selectedPath.value), distinctUntilChanged$1(), tap(value => {
             if (this._onChangeFunction) {
                 this._onChangeFunction(value);
             }
@@ -18668,7 +19017,7 @@ class StatusSelectorComponent {
             selected: !!selectedStatuses.find(selectedStatusKey => selectedStatusKey === status.key),
             key: status.key,
             tagType: status.tagType,
-        }))), distinctUntilChanged((previous, current) => isEqual(previous, current)));
+        }))), distinctUntilChanged$1((previous, current) => isEqual(previous, current)));
     }
     itemSelected(event) {
         const newSelectedItems = event?.filter(item => item?.selected) || [];
@@ -19865,7 +20214,7 @@ class CaseTagsSelectorComponent {
             selected: !!selectedCaseTags.find(selectedCaseTagKey => selectedCaseTagKey === caseTag.key),
             key: caseTag.key,
             tagType: caseTag.tagType,
-        }))), distinctUntilChanged((previous, current) => isEqual(previous, current)));
+        }))), distinctUntilChanged$1((previous, current) => isEqual(previous, current)));
     }
     set caseTags(value) {
         this._caseTags$.next((value || []).map(caseTags => ({
@@ -20777,6 +21126,8 @@ class RenderInPageHeaderDirective {
         this.pageTitleService = pageTitleService;
         this.pageHeaderService = pageHeaderService;
         this.fullWidth = false;
+        /** Lets the actions move below the page title when both don't fit on one row. */
+        this.wrap = false;
         this._subscriptions = new Subscription();
     }
     ngOnInit() {
@@ -20797,11 +21148,12 @@ class RenderInPageHeaderDirective {
                 pageActionsVcr.createEmbeddedView(this.templateRef);
                 this.pageTitleService.setHasPageActions(true);
                 this.pageTitleService.setPageActionsFullWidth(this.fullWidth);
+                this.pageTitleService.setPageActionsWrap(this.wrap);
             }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RenderInPageHeaderDirective, deps: [{ token: PageTitleService }, { token: PageHeaderService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: RenderInPageHeaderDirective, isStandalone: true, selector: "[renderInPageHeader]", inputs: { fullWidth: "fullWidth" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: RenderInPageHeaderDirective, isStandalone: true, selector: "[renderInPageHeader]", inputs: { fullWidth: "fullWidth", wrap: "wrap" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RenderInPageHeaderDirective, decorators: [{
             type: Directive,
@@ -20811,6 +21163,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 args: [TemplateRef]
             }], fullWidth: [{
                 type: Input
+            }], wrap: [{
+                type: Input
             }] } });
 
 /*
@@ -21361,7 +21715,7 @@ class MuuriDirective {
         return this._muuriSubject$.getValue();
     }
     get _containerWidth$() {
-        return this._containerWidthSubject$.pipe(distinctUntilChanged());
+        return this._containerWidthSubject$.pipe(distinctUntilChanged$1());
     }
     constructor(elementRef, renderer, ngZone) {
         this.elementRef = elementRef;
@@ -21778,6 +22132,11 @@ class AssignmentComponent {
     get assignButtonTranslationKey() {
         return this.mode === 'case' ? 'assignment.assignThisCase' : 'assignment.assignThisTask';
     }
+    get assignedNames() {
+        return [this._assigneeFullName || this._assigneeId, this._assignedTeamTitle]
+            .filter(name => !!name)
+            .join(' & ');
+    }
     get hasEditChanges() {
         return (this.selectedUserId$.getValue() !== this._initialUserId ||
             this.selectedTeamKey$.getValue() !== this._initialTeamKey);
@@ -21792,6 +22151,8 @@ class AssignmentComponent {
         this._userProviderService = _userProviderService;
         this.mode = 'case';
         this.hasPermission = true;
+        /** Icon-only, for tight layouts; names show as a tooltip. */
+        this.compact = false;
         this.assignmentChangedEvent = new EventEmitter();
         this.unassignedEvent = new EventEmitter();
         this._assigneeId = null;
@@ -21817,7 +22178,7 @@ class AssignmentComponent {
         this._candidateTeamsSubscription = null;
         this._candidateUsersSubscription = null;
         this._subscriptions = new Subscription();
-        this._iconService.registerAll([UserFollow16, Group16, User16]);
+        this._iconService.registerAll([Edit16, UserFollow16, Group16, User16]);
         this._subscriptions.add(this._userProviderService.getUserSubject().subscribe(user => {
             this._currentUser = user;
         }));
@@ -22012,7 +22373,7 @@ class AssignmentComponent {
         this._candidateTeamsSubscription = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AssignmentComponent, deps: [{ token: CdsThemeService }, { token: i2$3.IconService }, { token: i1.TranslateService }, { token: i6$1.UserProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: AssignmentComponent, isStandalone: true, selector: "valtimo-assignment", inputs: { mode: "mode", hasPermission: "hasPermission", assigneeId: "assigneeId", assigneeFullName: "assigneeFullName", assignedTeamKey: "assignedTeamKey", assignedTeamTitle: "assignedTeamTitle", candidateUsers$: "candidateUsers$", candidateTeams$: "candidateTeams$" }, outputs: { assignmentChangedEvent: "assignmentChangedEvent", unassignedEvent: "unassignedEvent" }, host: { properties: { "style.display": "this.hostDisplay" } }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    loading: loading$ | async,\n    userItems: userItems$ | async,\n    teamItems: teamItems$ | async,\n    mouseIsOver: mouseIsOver$ | async,\n    selectedUserId: selectedUserId$ | async,\n    selectedTeamKey: selectedTeamKey$ | async,\n    editToggletipOpen: editToggletipOpen$ | async,\n    showUserComboBox: showUserComboBox$ | async,\n    showTeamComboBox: showTeamComboBox$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"isAssigned || hasPermission\">\n    <div\n      class=\"assignment-container\"\n      (mouseenter)=\"onMouseEnter()\"\n      (mouseleave)=\"onMouseLeave()\"\n    >\n      <!-- Assigned state: display pills with icons -->\n      <div\n        class=\"assigned-display element\"\n        [ngClass]=\"{\n          active: hasPermission\n            ? isAssigned && !obs.mouseIsOver && !obs.editToggletipOpen\n            : isAssigned,\n        }\"\n      >\n        <span class=\"assignment-pill\" *ngIf=\"_assignedTeamKey\">\n          <svg cdsIcon=\"group\" size=\"16\" class=\"pill-icon\"></svg>\n          <span class=\"pill-text\">{{ _assignedTeamTitle }}</span>\n        </span>\n\n        <span class=\"assignment-pill\" *ngIf=\"_assigneeId\">\n          <svg cdsIcon=\"user\" size=\"16\" class=\"pill-icon\"></svg>\n          <span class=\"pill-text\">{{ _assigneeFullName || _assigneeId }}</span>\n        </span>\n      </div>\n\n      <!-- Click to edit button (appears on hover when assigned) -->\n      <cds-toggletip\n        *ngIf=\"hasPermission && isAssigned\"\n        align=\"bottom\"\n        class=\"element\"\n        [autoAlign]=\"true\"\n        [isOpen]=\"open$ | async\"\n        [ngClass]=\"{active: isAssigned && (obs.mouseIsOver || obs.editToggletipOpen)}\"\n        (onOpen)=\"onOpenEditToggletip()\"\n        (onClose)=\"onCloseEditToggletip()\"\n      >\n        <button\n          cdsToggletipButton\n          [removeClassnames]=\"['cds--toggletip-button']\"\n          cdsButton=\"ghost\"\n          size=\"sm\"\n          class=\"click-to-edit-button\"\n        >\n          {{ 'assignment.clickToEdit' | translate }}\n        </button>\n\n        <div cdsToggletipContent class=\"assignment-popover-content\">\n          <cds-combo-box\n            *ngIf=\"obs.showUserComboBox && obs.userItems?.length > 0\"\n            [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n            [label]=\"'assignment.selectUser' | translate\"\n            [placeholder]=\"'assignment.selectUser' | translate\"\n            [appendInline]=\"true\"\n            [dropUp]=\"false\"\n            [cdsLayer]=\"1\"\n            [items]=\"obs.userItems\"\n            [disabled]=\"obs.disabled\"\n            itemValueKey=\"id\"\n            (selected)=\"onUserSelect($event)\"\n            (clear)=\"onUserClear()\"\n          >\n            <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n          </cds-combo-box>\n\n          <cds-combo-box\n            *ngIf=\"obs.showTeamComboBox && obs.teamItems?.length > 0\"\n            [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n            [label]=\"'assignment.selectTeam' | translate\"\n            [placeholder]=\"'assignment.selectTeam' | translate\"\n            [appendInline]=\"true\"\n            [dropUp]=\"false\"\n            [cdsLayer]=\"1\"\n            [items]=\"obs.teamItems\"\n            [disabled]=\"obs.disabled\"\n            itemValueKey=\"id\"\n            (selected)=\"onTeamSelect($event)\"\n            (clear)=\"onTeamClear()\"\n          >\n            <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n          </cds-combo-box>\n\n          <button\n            cdsButton\n            [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n            [cdsLayer]=\"1\"\n            class=\"submit-button\"\n            [disabled]=\"!hasEditChanges || obs.disabled\"\n            (click)=\"onUpdate()\"\n          >\n            {{ 'assignment.update' | translate }}\n          </button>\n\n          <button\n            cdsButton=\"danger--tertiary\"\n            [cdsLayer]=\"1\"\n            [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n            [disabled]=\"obs.disabled\"\n            (click)=\"onUnassign()\"\n          >\n            {{ 'assignment.unassignAll' | translate }}\n          </button>\n        </div>\n      </cds-toggletip>\n\n      <!-- Assign button: always rendered for layout sizing (position: relative via .main).\n           When hasPermission is false it stays hidden and non-interactive. -->\n      <cds-toggletip\n        align=\"bottom\"\n        class=\"element main\"\n        [autoAlign]=\"true\"\n        [isOpen]=\"open$ | async\"\n        [ngClass]=\"{active: hasPermission && !isAssigned}\"\n        (onOpen)=\"onOpenAssignToggletip()\"\n      >\n        <button\n          cdsToggletipButton\n          [removeClassnames]=\"['cds--toggletip-button']\"\n          cdsButton=\"tertiary\"\n          size=\"sm\"\n          class=\"assign-button\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"user--follow\" size=\"16\"></svg>\n\n          {{ assignButtonTranslationKey | translate }}\n        </button>\n\n        <div cdsToggletipContent class=\"assignment-popover-content\">\n          <ng-container *ngIf=\"!obs.loading; else loadingTemplate\">\n            <cds-combo-box\n              *ngIf=\"obs.showUserComboBox && obs.userItems?.length > 0\"\n              [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n              [label]=\"'assignment.selectUser' | translate\"\n              [placeholder]=\"'assignment.selectUser' | translate\"\n              [appendInline]=\"true\"\n              [dropUp]=\"false\"\n              [cdsLayer]=\"1\"\n              [items]=\"obs.userItems\"\n              [disabled]=\"obs.disabled\"\n              (selected)=\"onUserSelect($event)\"\n              (clear)=\"onUserClear()\"\n            >\n              <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n            </cds-combo-box>\n\n            <cds-combo-box\n              *ngIf=\"obs.showTeamComboBox && obs.teamItems?.length > 0\"\n              [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n              [label]=\"'assignment.selectTeam' | translate\"\n              [placeholder]=\"'assignment.selectTeam' | translate\"\n              [appendInline]=\"true\"\n              [dropUp]=\"false\"\n              [cdsLayer]=\"1\"\n              [items]=\"obs.teamItems\"\n              [disabled]=\"obs.disabled\"\n              (selected)=\"onTeamSelect($event)\"\n              (clear)=\"onTeamClear()\"\n            >\n              <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n            </cds-combo-box>\n\n            <button\n              cdsButton\n              [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n              class=\"submit-button\"\n              [disabled]=\"(!obs.selectedUserId && !obs.selectedTeamKey) || obs.disabled\"\n              (click)=\"onConfirm()\"\n            >\n              {{ 'assignment.confirm' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"user--follow\" size=\"16\"></svg>\n            </button>\n          </ng-container>\n\n          <ng-template #loadingTemplate>\n            <span class=\"loading-text\" [attr.data-carbon-theme]=\"toggletipTheme$ | async\">\n              {{ 'assignment.loading' | translate }}\n            </span>\n          </ng-template>\n        </div>\n      </cds-toggletip>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host ::ng-deep .cds--popover-content{max-inline-size:unset}.assignment-container{display:flex;align-items:center;justify-content:center;position:relative;font-weight:400;font-size:14px;line-height:18px;letter-spacing:.16px;color:var(--cds-link-01)}.assigned-display{display:flex;justify-content:flex-start;align-items:center;gap:8px;width:100%}.assignment-pill{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:calc(50% - 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.assignment-pill:only-child{max-width:100%}.assignment-pill .pill-icon{flex-shrink:0;fill:currentColor}.assignment-pill .pill-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.element{opacity:0;visibility:hidden;position:absolute;width:100%;transition:opacity .3s ease-in-out}.element.active{opacity:1;visibility:visible}.element.main{position:relative;width:auto}.assignment-popover-content{width:400px;max-inline-size:400px;display:flex;flex-direction:column;gap:16px}.assignment-popover-content .cds--btn{width:100%;max-width:unset}.assign-button{width:250px}.click-to-edit-button{width:100%}.submit-button{width:100%;max-width:unset}.loading-text{font-size:14px;color:var(--cds-text-secondary)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: ToggletipModule }, { kind: "component", type: i2$3.Toggletip, selector: "cds-toggletip, ibm-toggletip", inputs: ["id", "isOpen"] }, { kind: "directive", type: i2$3.ToggletipButton, selector: "[cdsToggletipButton], [ibmToggletipButton]", inputs: ["ariaLabel"] }, { kind: "directive", type: i2$3.ToggletipContent, selector: "[cdsToggletipContent], [ibmToggletipContent]" }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i2$3.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "directive", type: RemoveClassnamesDirective, selector: "[removeClassnames]", inputs: ["removeClassnames"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: AssignmentComponent, isStandalone: true, selector: "valtimo-assignment", inputs: { mode: "mode", hasPermission: "hasPermission", compact: "compact", assigneeId: "assigneeId", assigneeFullName: "assigneeFullName", assignedTeamKey: "assignedTeamKey", assignedTeamTitle: "assignedTeamTitle", candidateUsers$: "candidateUsers$", candidateTeams$: "candidateTeams$" }, outputs: { assignmentChangedEvent: "assignmentChangedEvent", unassignedEvent: "unassignedEvent" }, host: { properties: { "style.display": "this.hostDisplay" } }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    loading: loading$ | async,\n    userItems: userItems$ | async,\n    teamItems: teamItems$ | async,\n    mouseIsOver: mouseIsOver$ | async,\n    selectedUserId: selectedUserId$ | async,\n    selectedTeamKey: selectedTeamKey$ | async,\n    editToggletipOpen: editToggletipOpen$ | async,\n    showUserComboBox: showUserComboBox$ | async,\n    showTeamComboBox: showTeamComboBox$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"isAssigned || hasPermission\">\n    <div\n      [class.assignment-container--compact]=\"compact\"\n      class=\"assignment-container\"\n      (mouseenter)=\"onMouseEnter()\"\n      (mouseleave)=\"onMouseLeave()\"\n    >\n      <!-- Assigned state: display pills with icons -->\n      <div\n        class=\"assigned-display element\"\n        [ngbTooltip]=\"compact ? assignedNames : null\"\n        [ngClass]=\"{\n          active: hasPermission\n            ? isAssigned && !obs.mouseIsOver && !obs.editToggletipOpen\n            : isAssigned,\n        }\"\n      >\n        <span class=\"assignment-pill\" *ngIf=\"_assignedTeamKey\">\n          <svg cdsIcon=\"group\" size=\"16\" class=\"pill-icon\"></svg>\n          <span *ngIf=\"!compact\" class=\"pill-text\">{{ _assignedTeamTitle }}</span>\n        </span>\n\n        <span class=\"assignment-pill\" *ngIf=\"_assigneeId\">\n          <svg cdsIcon=\"user\" size=\"16\" class=\"pill-icon\"></svg>\n          <span *ngIf=\"!compact\" class=\"pill-text\">{{ _assigneeFullName || _assigneeId }}</span>\n        </span>\n      </div>\n\n      <!-- Click to edit button (appears on hover when assigned) -->\n      <cds-toggletip\n        *ngIf=\"hasPermission && isAssigned\"\n        align=\"bottom\"\n        class=\"element\"\n        [autoAlign]=\"true\"\n        [isOpen]=\"open$ | async\"\n        [ngClass]=\"{active: isAssigned && (obs.mouseIsOver || obs.editToggletipOpen)}\"\n        (onOpen)=\"onOpenEditToggletip()\"\n        (onClose)=\"onCloseEditToggletip()\"\n      >\n        <button\n          cdsToggletipButton\n          [removeClassnames]=\"['cds--toggletip-button']\"\n          cdsButton=\"ghost\"\n          [attr.aria-label]=\"compact ? ('assignment.clickToEdit' | translate) : null\"\n          [iconOnly]=\"compact\"\n          [ngbTooltip]=\"compact ? assignedNames : null\"\n          [size]=\"compact ? 'md' : 'sm'\"\n          class=\"click-to-edit-button\"\n        >\n          @if (compact) {\n            <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n          } @else {\n            {{ 'assignment.clickToEdit' | translate }}\n          }\n        </button>\n\n        <div cdsToggletipContent class=\"assignment-popover-content\">\n          <cds-combo-box\n            *ngIf=\"obs.showUserComboBox && obs.userItems?.length > 0\"\n            [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n            [label]=\"'assignment.selectUser' | translate\"\n            [placeholder]=\"'assignment.selectUser' | translate\"\n            [appendInline]=\"true\"\n            [dropUp]=\"false\"\n            [cdsLayer]=\"1\"\n            [items]=\"obs.userItems\"\n            [disabled]=\"obs.disabled\"\n            itemValueKey=\"id\"\n            (selected)=\"onUserSelect($event)\"\n            (clear)=\"onUserClear()\"\n          >\n            <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n          </cds-combo-box>\n\n          <cds-combo-box\n            *ngIf=\"obs.showTeamComboBox && obs.teamItems?.length > 0\"\n            [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n            [label]=\"'assignment.selectTeam' | translate\"\n            [placeholder]=\"'assignment.selectTeam' | translate\"\n            [appendInline]=\"true\"\n            [dropUp]=\"false\"\n            [cdsLayer]=\"1\"\n            [items]=\"obs.teamItems\"\n            [disabled]=\"obs.disabled\"\n            itemValueKey=\"id\"\n            (selected)=\"onTeamSelect($event)\"\n            (clear)=\"onTeamClear()\"\n          >\n            <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n          </cds-combo-box>\n\n          <button\n            cdsButton\n            [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n            [cdsLayer]=\"1\"\n            class=\"submit-button\"\n            [disabled]=\"!hasEditChanges || obs.disabled\"\n            (click)=\"onUpdate()\"\n          >\n            {{ 'assignment.update' | translate }}\n          </button>\n\n          <button\n            cdsButton=\"danger--tertiary\"\n            [cdsLayer]=\"1\"\n            [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n            [disabled]=\"obs.disabled\"\n            (click)=\"onUnassign()\"\n          >\n            {{ 'assignment.unassignAll' | translate }}\n          </button>\n        </div>\n      </cds-toggletip>\n\n      <!-- Assign button: always rendered for layout sizing (position: relative via .main).\n           When hasPermission is false it stays hidden and non-interactive. -->\n      <cds-toggletip\n        align=\"bottom\"\n        class=\"element main\"\n        [autoAlign]=\"true\"\n        [isOpen]=\"open$ | async\"\n        [ngClass]=\"{active: hasPermission && !isAssigned}\"\n        (onOpen)=\"onOpenAssignToggletip()\"\n      >\n        <button\n          cdsToggletipButton\n          [removeClassnames]=\"['cds--toggletip-button']\"\n          cdsButton=\"tertiary\"\n          [attr.aria-label]=\"compact ? (assignButtonTranslationKey | translate) : null\"\n          [iconOnly]=\"compact\"\n          [ngbTooltip]=\"compact ? (assignButtonTranslationKey | translate) : null\"\n          [size]=\"compact ? 'md' : 'sm'\"\n          class=\"assign-button\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"user--follow\" size=\"16\"></svg>\n\n          @if (!compact) {\n            {{ assignButtonTranslationKey | translate }}\n          }\n        </button>\n\n        <div cdsToggletipContent class=\"assignment-popover-content\">\n          <ng-container *ngIf=\"!obs.loading; else loadingTemplate\">\n            <cds-combo-box\n              *ngIf=\"obs.showUserComboBox && obs.userItems?.length > 0\"\n              [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n              [label]=\"'assignment.selectUser' | translate\"\n              [placeholder]=\"'assignment.selectUser' | translate\"\n              [appendInline]=\"true\"\n              [dropUp]=\"false\"\n              [cdsLayer]=\"1\"\n              [items]=\"obs.userItems\"\n              [disabled]=\"obs.disabled\"\n              (selected)=\"onUserSelect($event)\"\n              (clear)=\"onUserClear()\"\n            >\n              <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n            </cds-combo-box>\n\n            <cds-combo-box\n              *ngIf=\"obs.showTeamComboBox && obs.teamItems?.length > 0\"\n              [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n              [label]=\"'assignment.selectTeam' | translate\"\n              [placeholder]=\"'assignment.selectTeam' | translate\"\n              [appendInline]=\"true\"\n              [dropUp]=\"false\"\n              [cdsLayer]=\"1\"\n              [items]=\"obs.teamItems\"\n              [disabled]=\"obs.disabled\"\n              (selected)=\"onTeamSelect($event)\"\n              (clear)=\"onTeamClear()\"\n            >\n              <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n            </cds-combo-box>\n\n            <button\n              cdsButton\n              [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n              class=\"submit-button\"\n              [disabled]=\"(!obs.selectedUserId && !obs.selectedTeamKey) || obs.disabled\"\n              (click)=\"onConfirm()\"\n            >\n              {{ 'assignment.confirm' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"user--follow\" size=\"16\"></svg>\n            </button>\n          </ng-container>\n\n          <ng-template #loadingTemplate>\n            <span class=\"loading-text\" [attr.data-carbon-theme]=\"toggletipTheme$ | async\">\n              {{ 'assignment.loading' | translate }}\n            </span>\n          </ng-template>\n        </div>\n      </cds-toggletip>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host ::ng-deep .cds--popover-content{max-inline-size:unset}.assignment-container{display:flex;align-items:center;justify-content:center;position:relative;font-weight:400;font-size:14px;line-height:18px;letter-spacing:.16px;color:var(--cds-link-01)}.assigned-display{display:flex;justify-content:flex-start;align-items:center;gap:8px;width:100%}.assignment-pill{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:calc(50% - 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.assignment-pill:only-child{max-width:100%}.assignment-pill .pill-icon{flex-shrink:0;fill:currentColor}.assignment-pill .pill-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.element{opacity:0;visibility:hidden;position:absolute;width:100%;transition:opacity .3s ease-in-out}.element.active{opacity:1;visibility:visible}.element.main{position:relative;width:auto}.assignment-popover-content{width:400px;max-inline-size:400px;display:flex;flex-direction:column;gap:16px}.assignment-popover-content .cds--btn{width:100%;max-width:unset}.assign-button{width:250px}.assignment-container--compact .assign-button,.assignment-container--compact .click-to-edit-button{inline-size:var(--cds-spacing-08);padding:0;align-items:center;justify-content:center}.assignment-container--compact .assigned-display{justify-content:center;gap:var(--cds-spacing-02)}.assignment-container--compact .assignment-pill{max-width:none}.click-to-edit-button{width:100%}.submit-button{width:100%;max-width:unset}.loading-text{font-size:14px;color:var(--cds-text-secondary)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: ToggletipModule }, { kind: "component", type: i2$3.Toggletip, selector: "cds-toggletip, ibm-toggletip", inputs: ["id", "isOpen"] }, { kind: "directive", type: i2$3.ToggletipButton, selector: "[cdsToggletipButton], [ibmToggletipButton]", inputs: ["ariaLabel"] }, { kind: "directive", type: i2$3.ToggletipContent, selector: "[cdsToggletipContent], [ibmToggletipContent]" }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i2$3.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "directive", type: RemoveClassnamesDirective, selector: "[removeClassnames]", inputs: ["removeClassnames"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AssignmentComponent, decorators: [{
             type: Component,
@@ -22025,7 +22386,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         LayerModule,
                         ComboBoxModule,
                         RemoveClassnamesDirective,
-                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    loading: loading$ | async,\n    userItems: userItems$ | async,\n    teamItems: teamItems$ | async,\n    mouseIsOver: mouseIsOver$ | async,\n    selectedUserId: selectedUserId$ | async,\n    selectedTeamKey: selectedTeamKey$ | async,\n    editToggletipOpen: editToggletipOpen$ | async,\n    showUserComboBox: showUserComboBox$ | async,\n    showTeamComboBox: showTeamComboBox$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"isAssigned || hasPermission\">\n    <div\n      class=\"assignment-container\"\n      (mouseenter)=\"onMouseEnter()\"\n      (mouseleave)=\"onMouseLeave()\"\n    >\n      <!-- Assigned state: display pills with icons -->\n      <div\n        class=\"assigned-display element\"\n        [ngClass]=\"{\n          active: hasPermission\n            ? isAssigned && !obs.mouseIsOver && !obs.editToggletipOpen\n            : isAssigned,\n        }\"\n      >\n        <span class=\"assignment-pill\" *ngIf=\"_assignedTeamKey\">\n          <svg cdsIcon=\"group\" size=\"16\" class=\"pill-icon\"></svg>\n          <span class=\"pill-text\">{{ _assignedTeamTitle }}</span>\n        </span>\n\n        <span class=\"assignment-pill\" *ngIf=\"_assigneeId\">\n          <svg cdsIcon=\"user\" size=\"16\" class=\"pill-icon\"></svg>\n          <span class=\"pill-text\">{{ _assigneeFullName || _assigneeId }}</span>\n        </span>\n      </div>\n\n      <!-- Click to edit button (appears on hover when assigned) -->\n      <cds-toggletip\n        *ngIf=\"hasPermission && isAssigned\"\n        align=\"bottom\"\n        class=\"element\"\n        [autoAlign]=\"true\"\n        [isOpen]=\"open$ | async\"\n        [ngClass]=\"{active: isAssigned && (obs.mouseIsOver || obs.editToggletipOpen)}\"\n        (onOpen)=\"onOpenEditToggletip()\"\n        (onClose)=\"onCloseEditToggletip()\"\n      >\n        <button\n          cdsToggletipButton\n          [removeClassnames]=\"['cds--toggletip-button']\"\n          cdsButton=\"ghost\"\n          size=\"sm\"\n          class=\"click-to-edit-button\"\n        >\n          {{ 'assignment.clickToEdit' | translate }}\n        </button>\n\n        <div cdsToggletipContent class=\"assignment-popover-content\">\n          <cds-combo-box\n            *ngIf=\"obs.showUserComboBox && obs.userItems?.length > 0\"\n            [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n            [label]=\"'assignment.selectUser' | translate\"\n            [placeholder]=\"'assignment.selectUser' | translate\"\n            [appendInline]=\"true\"\n            [dropUp]=\"false\"\n            [cdsLayer]=\"1\"\n            [items]=\"obs.userItems\"\n            [disabled]=\"obs.disabled\"\n            itemValueKey=\"id\"\n            (selected)=\"onUserSelect($event)\"\n            (clear)=\"onUserClear()\"\n          >\n            <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n          </cds-combo-box>\n\n          <cds-combo-box\n            *ngIf=\"obs.showTeamComboBox && obs.teamItems?.length > 0\"\n            [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n            [label]=\"'assignment.selectTeam' | translate\"\n            [placeholder]=\"'assignment.selectTeam' | translate\"\n            [appendInline]=\"true\"\n            [dropUp]=\"false\"\n            [cdsLayer]=\"1\"\n            [items]=\"obs.teamItems\"\n            [disabled]=\"obs.disabled\"\n            itemValueKey=\"id\"\n            (selected)=\"onTeamSelect($event)\"\n            (clear)=\"onTeamClear()\"\n          >\n            <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n          </cds-combo-box>\n\n          <button\n            cdsButton\n            [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n            [cdsLayer]=\"1\"\n            class=\"submit-button\"\n            [disabled]=\"!hasEditChanges || obs.disabled\"\n            (click)=\"onUpdate()\"\n          >\n            {{ 'assignment.update' | translate }}\n          </button>\n\n          <button\n            cdsButton=\"danger--tertiary\"\n            [cdsLayer]=\"1\"\n            [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n            [disabled]=\"obs.disabled\"\n            (click)=\"onUnassign()\"\n          >\n            {{ 'assignment.unassignAll' | translate }}\n          </button>\n        </div>\n      </cds-toggletip>\n\n      <!-- Assign button: always rendered for layout sizing (position: relative via .main).\n           When hasPermission is false it stays hidden and non-interactive. -->\n      <cds-toggletip\n        align=\"bottom\"\n        class=\"element main\"\n        [autoAlign]=\"true\"\n        [isOpen]=\"open$ | async\"\n        [ngClass]=\"{active: hasPermission && !isAssigned}\"\n        (onOpen)=\"onOpenAssignToggletip()\"\n      >\n        <button\n          cdsToggletipButton\n          [removeClassnames]=\"['cds--toggletip-button']\"\n          cdsButton=\"tertiary\"\n          size=\"sm\"\n          class=\"assign-button\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"user--follow\" size=\"16\"></svg>\n\n          {{ assignButtonTranslationKey | translate }}\n        </button>\n\n        <div cdsToggletipContent class=\"assignment-popover-content\">\n          <ng-container *ngIf=\"!obs.loading; else loadingTemplate\">\n            <cds-combo-box\n              *ngIf=\"obs.showUserComboBox && obs.userItems?.length > 0\"\n              [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n              [label]=\"'assignment.selectUser' | translate\"\n              [placeholder]=\"'assignment.selectUser' | translate\"\n              [appendInline]=\"true\"\n              [dropUp]=\"false\"\n              [cdsLayer]=\"1\"\n              [items]=\"obs.userItems\"\n              [disabled]=\"obs.disabled\"\n              (selected)=\"onUserSelect($event)\"\n              (clear)=\"onUserClear()\"\n            >\n              <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n            </cds-combo-box>\n\n            <cds-combo-box\n              *ngIf=\"obs.showTeamComboBox && obs.teamItems?.length > 0\"\n              [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n              [label]=\"'assignment.selectTeam' | translate\"\n              [placeholder]=\"'assignment.selectTeam' | translate\"\n              [appendInline]=\"true\"\n              [dropUp]=\"false\"\n              [cdsLayer]=\"1\"\n              [items]=\"obs.teamItems\"\n              [disabled]=\"obs.disabled\"\n              (selected)=\"onTeamSelect($event)\"\n              (clear)=\"onTeamClear()\"\n            >\n              <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n            </cds-combo-box>\n\n            <button\n              cdsButton\n              [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n              class=\"submit-button\"\n              [disabled]=\"(!obs.selectedUserId && !obs.selectedTeamKey) || obs.disabled\"\n              (click)=\"onConfirm()\"\n            >\n              {{ 'assignment.confirm' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"user--follow\" size=\"16\"></svg>\n            </button>\n          </ng-container>\n\n          <ng-template #loadingTemplate>\n            <span class=\"loading-text\" [attr.data-carbon-theme]=\"toggletipTheme$ | async\">\n              {{ 'assignment.loading' | translate }}\n            </span>\n          </ng-template>\n        </div>\n      </cds-toggletip>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host ::ng-deep .cds--popover-content{max-inline-size:unset}.assignment-container{display:flex;align-items:center;justify-content:center;position:relative;font-weight:400;font-size:14px;line-height:18px;letter-spacing:.16px;color:var(--cds-link-01)}.assigned-display{display:flex;justify-content:flex-start;align-items:center;gap:8px;width:100%}.assignment-pill{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:calc(50% - 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.assignment-pill:only-child{max-width:100%}.assignment-pill .pill-icon{flex-shrink:0;fill:currentColor}.assignment-pill .pill-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.element{opacity:0;visibility:hidden;position:absolute;width:100%;transition:opacity .3s ease-in-out}.element.active{opacity:1;visibility:visible}.element.main{position:relative;width:auto}.assignment-popover-content{width:400px;max-inline-size:400px;display:flex;flex-direction:column;gap:16px}.assignment-popover-content .cds--btn{width:100%;max-width:unset}.assign-button{width:250px}.click-to-edit-button{width:100%}.submit-button{width:100%;max-width:unset}.loading-text{font-size:14px;color:var(--cds-text-secondary)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+                        NgbTooltipModule,
+                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    loading: loading$ | async,\n    userItems: userItems$ | async,\n    teamItems: teamItems$ | async,\n    mouseIsOver: mouseIsOver$ | async,\n    selectedUserId: selectedUserId$ | async,\n    selectedTeamKey: selectedTeamKey$ | async,\n    editToggletipOpen: editToggletipOpen$ | async,\n    showUserComboBox: showUserComboBox$ | async,\n    showTeamComboBox: showTeamComboBox$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"isAssigned || hasPermission\">\n    <div\n      [class.assignment-container--compact]=\"compact\"\n      class=\"assignment-container\"\n      (mouseenter)=\"onMouseEnter()\"\n      (mouseleave)=\"onMouseLeave()\"\n    >\n      <!-- Assigned state: display pills with icons -->\n      <div\n        class=\"assigned-display element\"\n        [ngbTooltip]=\"compact ? assignedNames : null\"\n        [ngClass]=\"{\n          active: hasPermission\n            ? isAssigned && !obs.mouseIsOver && !obs.editToggletipOpen\n            : isAssigned,\n        }\"\n      >\n        <span class=\"assignment-pill\" *ngIf=\"_assignedTeamKey\">\n          <svg cdsIcon=\"group\" size=\"16\" class=\"pill-icon\"></svg>\n          <span *ngIf=\"!compact\" class=\"pill-text\">{{ _assignedTeamTitle }}</span>\n        </span>\n\n        <span class=\"assignment-pill\" *ngIf=\"_assigneeId\">\n          <svg cdsIcon=\"user\" size=\"16\" class=\"pill-icon\"></svg>\n          <span *ngIf=\"!compact\" class=\"pill-text\">{{ _assigneeFullName || _assigneeId }}</span>\n        </span>\n      </div>\n\n      <!-- Click to edit button (appears on hover when assigned) -->\n      <cds-toggletip\n        *ngIf=\"hasPermission && isAssigned\"\n        align=\"bottom\"\n        class=\"element\"\n        [autoAlign]=\"true\"\n        [isOpen]=\"open$ | async\"\n        [ngClass]=\"{active: isAssigned && (obs.mouseIsOver || obs.editToggletipOpen)}\"\n        (onOpen)=\"onOpenEditToggletip()\"\n        (onClose)=\"onCloseEditToggletip()\"\n      >\n        <button\n          cdsToggletipButton\n          [removeClassnames]=\"['cds--toggletip-button']\"\n          cdsButton=\"ghost\"\n          [attr.aria-label]=\"compact ? ('assignment.clickToEdit' | translate) : null\"\n          [iconOnly]=\"compact\"\n          [ngbTooltip]=\"compact ? assignedNames : null\"\n          [size]=\"compact ? 'md' : 'sm'\"\n          class=\"click-to-edit-button\"\n        >\n          @if (compact) {\n            <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n          } @else {\n            {{ 'assignment.clickToEdit' | translate }}\n          }\n        </button>\n\n        <div cdsToggletipContent class=\"assignment-popover-content\">\n          <cds-combo-box\n            *ngIf=\"obs.showUserComboBox && obs.userItems?.length > 0\"\n            [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n            [label]=\"'assignment.selectUser' | translate\"\n            [placeholder]=\"'assignment.selectUser' | translate\"\n            [appendInline]=\"true\"\n            [dropUp]=\"false\"\n            [cdsLayer]=\"1\"\n            [items]=\"obs.userItems\"\n            [disabled]=\"obs.disabled\"\n            itemValueKey=\"id\"\n            (selected)=\"onUserSelect($event)\"\n            (clear)=\"onUserClear()\"\n          >\n            <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n          </cds-combo-box>\n\n          <cds-combo-box\n            *ngIf=\"obs.showTeamComboBox && obs.teamItems?.length > 0\"\n            [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n            [label]=\"'assignment.selectTeam' | translate\"\n            [placeholder]=\"'assignment.selectTeam' | translate\"\n            [appendInline]=\"true\"\n            [dropUp]=\"false\"\n            [cdsLayer]=\"1\"\n            [items]=\"obs.teamItems\"\n            [disabled]=\"obs.disabled\"\n            itemValueKey=\"id\"\n            (selected)=\"onTeamSelect($event)\"\n            (clear)=\"onTeamClear()\"\n          >\n            <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n          </cds-combo-box>\n\n          <button\n            cdsButton\n            [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n            [cdsLayer]=\"1\"\n            class=\"submit-button\"\n            [disabled]=\"!hasEditChanges || obs.disabled\"\n            (click)=\"onUpdate()\"\n          >\n            {{ 'assignment.update' | translate }}\n          </button>\n\n          <button\n            cdsButton=\"danger--tertiary\"\n            [cdsLayer]=\"1\"\n            [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n            [disabled]=\"obs.disabled\"\n            (click)=\"onUnassign()\"\n          >\n            {{ 'assignment.unassignAll' | translate }}\n          </button>\n        </div>\n      </cds-toggletip>\n\n      <!-- Assign button: always rendered for layout sizing (position: relative via .main).\n           When hasPermission is false it stays hidden and non-interactive. -->\n      <cds-toggletip\n        align=\"bottom\"\n        class=\"element main\"\n        [autoAlign]=\"true\"\n        [isOpen]=\"open$ | async\"\n        [ngClass]=\"{active: hasPermission && !isAssigned}\"\n        (onOpen)=\"onOpenAssignToggletip()\"\n      >\n        <button\n          cdsToggletipButton\n          [removeClassnames]=\"['cds--toggletip-button']\"\n          cdsButton=\"tertiary\"\n          [attr.aria-label]=\"compact ? (assignButtonTranslationKey | translate) : null\"\n          [iconOnly]=\"compact\"\n          [ngbTooltip]=\"compact ? (assignButtonTranslationKey | translate) : null\"\n          [size]=\"compact ? 'md' : 'sm'\"\n          class=\"assign-button\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"user--follow\" size=\"16\"></svg>\n\n          @if (!compact) {\n            {{ assignButtonTranslationKey | translate }}\n          }\n        </button>\n\n        <div cdsToggletipContent class=\"assignment-popover-content\">\n          <ng-container *ngIf=\"!obs.loading; else loadingTemplate\">\n            <cds-combo-box\n              *ngIf=\"obs.showUserComboBox && obs.userItems?.length > 0\"\n              [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n              [label]=\"'assignment.selectUser' | translate\"\n              [placeholder]=\"'assignment.selectUser' | translate\"\n              [appendInline]=\"true\"\n              [dropUp]=\"false\"\n              [cdsLayer]=\"1\"\n              [items]=\"obs.userItems\"\n              [disabled]=\"obs.disabled\"\n              (selected)=\"onUserSelect($event)\"\n              (clear)=\"onUserClear()\"\n            >\n              <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n            </cds-combo-box>\n\n            <cds-combo-box\n              *ngIf=\"obs.showTeamComboBox && obs.teamItems?.length > 0\"\n              [attr.data-carbon-theme]=\"toggletipDropdownTheme$ | async\"\n              [label]=\"'assignment.selectTeam' | translate\"\n              [placeholder]=\"'assignment.selectTeam' | translate\"\n              [appendInline]=\"true\"\n              [dropUp]=\"false\"\n              [cdsLayer]=\"1\"\n              [items]=\"obs.teamItems\"\n              [disabled]=\"obs.disabled\"\n              (selected)=\"onTeamSelect($event)\"\n              (clear)=\"onTeamClear()\"\n            >\n              <cds-dropdown-list onclick=\"event.stopPropagation()\"></cds-dropdown-list>\n            </cds-combo-box>\n\n            <button\n              cdsButton\n              [attr.data-carbon-theme]=\"toggletipTheme$ | async\"\n              class=\"submit-button\"\n              [disabled]=\"(!obs.selectedUserId && !obs.selectedTeamKey) || obs.disabled\"\n              (click)=\"onConfirm()\"\n            >\n              {{ 'assignment.confirm' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"user--follow\" size=\"16\"></svg>\n            </button>\n          </ng-container>\n\n          <ng-template #loadingTemplate>\n            <span class=\"loading-text\" [attr.data-carbon-theme]=\"toggletipTheme$ | async\">\n              {{ 'assignment.loading' | translate }}\n            </span>\n          </ng-template>\n        </div>\n      </cds-toggletip>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host ::ng-deep .cds--popover-content{max-inline-size:unset}.assignment-container{display:flex;align-items:center;justify-content:center;position:relative;font-weight:400;font-size:14px;line-height:18px;letter-spacing:.16px;color:var(--cds-link-01)}.assigned-display{display:flex;justify-content:flex-start;align-items:center;gap:8px;width:100%}.assignment-pill{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:calc(50% - 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.assignment-pill:only-child{max-width:100%}.assignment-pill .pill-icon{flex-shrink:0;fill:currentColor}.assignment-pill .pill-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.element{opacity:0;visibility:hidden;position:absolute;width:100%;transition:opacity .3s ease-in-out}.element.active{opacity:1;visibility:visible}.element.main{position:relative;width:auto}.assignment-popover-content{width:400px;max-inline-size:400px;display:flex;flex-direction:column;gap:16px}.assignment-popover-content .cds--btn{width:100%;max-width:unset}.assign-button{width:250px}.assignment-container--compact .assign-button,.assignment-container--compact .click-to-edit-button{inline-size:var(--cds-spacing-08);padding:0;align-items:center;justify-content:center}.assignment-container--compact .assigned-display{justify-content:center;gap:var(--cds-spacing-02)}.assignment-container--compact .assignment-pill{max-width:none}.click-to-edit-button{width:100%}.submit-button{width:100%;max-width:unset}.loading-text{font-size:14px;color:var(--cds-text-secondary)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: CdsThemeService }, { type: i2$3.IconService }, { type: i1.TranslateService }, { type: i6$1.UserProviderService }], propDecorators: { hostDisplay: [{
                 type: HostBinding,
                 args: ['style.display']
@@ -22033,6 +22395,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], hasPermission: [{
                 type: Input
+            }], compact: [{
+                type: Input
             }], assigneeId: [{
                 type: Input
             }], assigneeFullName: [{
@@ -22286,5 +22650,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARBITRARY_AMOUNT_VALUE_TEST_IDS, AUTO_KEY_INPUT_TEST_IDS, AdminSettingsService, Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, AssignmentComponent, AutoKeyInputComponent, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, CARBON_CONSTANTS, CARBON_THEME, CASES_WITHOUT_STATUS_KEY, COLOR_PICKER_TEST_IDS, CONFIRMATION_MODAL_TEST_IDS, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CaseCountPipe, CaseTagsSelectorComponent, CdsThemeService, ChoiceFieldService, ColorPickerComponent, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, ContextMenuDirective, CtrlClickDirective, CurrentCarbonTheme, DEFAULT_LIST_TRANSLATIONS, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, DataListComponent, DataListModule, DatePickerComponent, DatePickerModule, DateTimePickerComponent, DigitOnlyDirective, DragDropListComponent, DropzoneComponent, DropzoneModule, EditorComponent, EditorModule, EllipsisPipe, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FitPageDirective, FormComponent, FormIoCurrencyComponent, FormIoCurrentUserComponent, FormIoDomService, FormIoIbanComponent, FormIoMailPreviewComponent, FormIoModule, FormIoStateService, FormIoTagsService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioDummyComponent, FormioOptionsImpl, FormioValueResolverSelectorComponent, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, JSON_EDITOR_TEST_IDS, JsonEditorComponent, KEY_DROPDOWN_VALUE_TEST_IDS, KEY_VALUE_PATH_SELECTOR_TEST_IDS, KEY_VALUE_TEST_IDS, KeyGeneratorService, LeftSidebarComponent, LeftSidebarModule, ListColumnViewComponent, MENU_CONFIGURATION_VERSION, MENU_ITEM_CATALOG, MULTI_INPUT_TEST_IDS, MdiIconSelectorComponent, MdiIconViewerComponent, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MonacoTheme, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, MuuriDirective, MuuriDirectiveModule, MuuriItemComponent, ObjectManagementSelectComponent, ObjectManagementSelectService, ObserveSizeDirective, OverflowMenuComponent, OverflowMenuModule, OverflowMenuOptionComponent, OverflowMenuTriggerComponent, PLUGIN_PAGE_ROUTE, POPULAR_MDI_ICONS, PageHeaderComponent, PageHeaderModule, PageHeaderService, PageSubtitleService, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, QUICK_SEARCH_SERVICE, QuickSearchComponent, QuickSearchStateService, RIGHT_SIDEBAR_TEST_IDS, RadioComponent, RadioModule, ReadOnlyDirective, RemoveClassnamesDirective, RenderInBodyComponent, RenderInPageHeaderDirective, RenderPageHeaderDirective, RightSidebarComponent, RightSidebarModule, SCHEMA_EDITOR_REQUIRED_PROPERTY_TEST_ID_PREFIX, SCHEMA_EDITOR_TEST_IDS, SEARCH_FIELDS_TEST_IDS, SEARCH_FIELD_TEST_ID_PREFIX, SECTION_HEADER_TEXT_CLASS, SINGLE_VALUE_TEST_IDS, STEPPER_FOOTER_STEP_TEST_IDS, SchemaEditorComponent, SearchFieldsComponent, SearchFieldsModule, SelectComponent, SelectModule, SelectableCarbonTheme, ShellService, SpinnerComponent, SpinnerModule, StatusSelectorComponent, StepperContainerComponent, StepperContentComponent, StepperFooterComponent, StepperFooterStepComponent, StepperHeaderComponent, StepperModule, StepperService, StepperStepComponent, TAG_ELLIPSIS_LIMIT, TableComponent, TableModule, TimelineComponent, TimelineItemImpl, TimelineModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VALUE_CONDITION_TREE_TEST_IDS, VALUE_PATH_SELECTOR_DROPDOWN_VALUE_TEST_IDS, VALUE_PATH_SELECTOR_TEST_IDS, VALUE_PATH_SELECTOR_VALUE_TEST_IDS, VModalComponent, VModalModule, ValtimoCdsModalDirective, ValtimoModalService, ValueConditionTreeComponent, ValueConditionTreeService, ValuePathSelectorComponent, ValuePathSelectorInputMode, ValuePathSelectorPrefix, ValuePathSelectorService, ValuePathType, ViewContentService, ViewType, WIDGET_LAYOUT_TRANSLATION_KEYS, WIDGET_LAYOUT_VALUES, WIDGET_ROW_HEIGHT_DEFAULT, WIDGET_ROW_HEIGHT_GAP_FREE, WebcamComponent, WebcamModule, WidgetComponent, WidgetLayout, WidgetLayoutInfoComponent, WidgetModule, applyDataGridPatch, buildMenuConfigurationFromRuntimeMenu, collectObjectLevels, createCustomFormioComponent, customUploaderType, enableCustomFormioComponents, findMenuCatalogEntryByLink, findMenuCatalogGroupEntryByTitle, getMenuCatalogEntry, hasSavedMenuConfiguration, includeFunctionToName, menuInitializer, menuLinkToString, muuriGapFreeLayout, normaliseMenuLink, parseIncludeFunction, pendingChangesGuard, registerCustomFormioComponent, registerCustomTag, registerFormioCurrencyComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioIbanComponent, registerFormioMailPreviewComponent, registerFormioUploadComponent, registerFormioValueResolverSelectorComponent, registerObjectManagementSelectFormioComponent, resolveMenuConfiguration, resolveWidgetLayout, runAfterCarbonModalClosed, serializeIncludeFunction, setRequiredOnSchema };
+export { ARBITRARY_AMOUNT_VALUE_TEST_IDS, AUTO_KEY_INPUT_TEST_IDS, AdminSettingsService, Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, AssignmentComponent, AutoKeyInputComponent, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, CARBON_CONSTANTS, CARBON_THEME, CASES_WITHOUT_STATUS_KEY, COLOR_PICKER_TEST_IDS, CONFIRMATION_MODAL_TEST_IDS, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CaseCountPipe, CaseTagsSelectorComponent, CdsThemeService, ChoiceFieldService, ColorPickerComponent, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, ContextMenuDirective, CtrlClickDirective, CurrentCarbonTheme, DEFAULT_LIST_TRANSLATIONS, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, DataListComponent, DataListModule, DatePickerComponent, DatePickerModule, DateTimePickerComponent, DigitOnlyDirective, DragDropListComponent, DropzoneComponent, DropzoneModule, EditorComponent, EditorModule, EllipsisPipe, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FitPageDirective, FormComponent, FormIoCurrencyComponent, FormIoCurrentUserComponent, FormIoDomService, FormIoIbanComponent, FormIoMailPreviewComponent, FormIoModule, FormIoStateService, FormIoTagsService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioDummyComponent, FormioOptionsImpl, FormioValueResolverSelectorComponent, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, JSON_EDITOR_TEST_IDS, JsonEditorComponent, KEY_DROPDOWN_VALUE_TEST_IDS, KEY_VALUE_PATH_SELECTOR_TEST_IDS, KEY_VALUE_TEST_IDS, KeyGeneratorService, LeftSidebarComponent, LeftSidebarModule, ListColumnViewComponent, MENU_CONFIGURATION_VERSION, MENU_ITEM_CATALOG, MULTI_INPUT_TEST_IDS, MdiIconSelectorComponent, MdiIconViewerComponent, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MonacoTheme, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, MuuriDirective, MuuriDirectiveModule, MuuriItemComponent, ObjectManagementSelectComponent, ObjectManagementSelectService, ObserveSizeDirective, OverflowMenuComponent, OverflowMenuModule, OverflowMenuOptionComponent, OverflowMenuTriggerComponent, PLUGIN_PAGE_ROUTE, POPULAR_MDI_ICONS, PageHeaderComponent, PageHeaderModule, PageHeaderService, PageSubtitleService, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, QUICK_SEARCH_SERVICE, QuickSearchComponent, QuickSearchStateService, RIGHT_SIDEBAR_TEST_IDS, RadioComponent, RadioModule, ReadOnlyDirective, RemoveClassnamesDirective, RenderInBodyComponent, RenderInPageHeaderDirective, RenderPageHeaderDirective, RightSidebarComponent, RightSidebarModule, SCHEMA_EDITOR_REQUIRED_PROPERTY_TEST_ID_PREFIX, SCHEMA_EDITOR_TEST_IDS, SEARCH_FIELDS_TEST_IDS, SEARCH_FIELD_TEST_ID_PREFIX, SECTION_HEADER_TEXT_CLASS, SIDE_PANEL_TEST_IDS, SINGLE_VALUE_TEST_IDS, STEPPER_FOOTER_STEP_TEST_IDS, SchemaEditorComponent, SearchFieldsComponent, SearchFieldsModule, SelectComponent, SelectModule, SelectableCarbonTheme, ShellService, SidePanelComponent, SidePanelService, SpinnerComponent, SpinnerModule, StatusSelectorComponent, StepperContainerComponent, StepperContentComponent, StepperFooterComponent, StepperFooterStepComponent, StepperHeaderComponent, StepperModule, StepperService, StepperStepComponent, TAG_ELLIPSIS_LIMIT, TableComponent, TableModule, TimelineComponent, TimelineItemImpl, TimelineModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VALUE_CONDITION_TREE_TEST_IDS, VALUE_PATH_SELECTOR_DROPDOWN_VALUE_TEST_IDS, VALUE_PATH_SELECTOR_TEST_IDS, VALUE_PATH_SELECTOR_VALUE_TEST_IDS, VModalComponent, VModalModule, ValtimoCdsModalDirective, ValtimoModalService, ValueConditionTreeComponent, ValueConditionTreeService, ValuePathSelectorComponent, ValuePathSelectorInputMode, ValuePathSelectorPrefix, ValuePathSelectorService, ValuePathType, ViewContentService, ViewType, WIDGET_LAYOUT_TRANSLATION_KEYS, WIDGET_LAYOUT_VALUES, WIDGET_ROW_HEIGHT_DEFAULT, WIDGET_ROW_HEIGHT_GAP_FREE, WebcamComponent, WebcamModule, WidgetComponent, WidgetLayout, WidgetLayoutInfoComponent, WidgetModule, applyDataGridPatch, borderBoxWidth, buildMenuConfigurationFromRuntimeMenu, collectObjectLevels, contentBoxWidth, createCustomFormioComponent, customUploaderType, enableCustomFormioComponents, findMenuCatalogEntryByLink, findMenuCatalogGroupEntryByTitle, fromMutationObserver, fromResizeObserver, getMenuCatalogEntry, hasSavedMenuConfiguration, includeFunctionToName, menuInitializer, menuLinkToString, muuriGapFreeLayout, normaliseMenuLink, parseIncludeFunction, pendingChangesGuard, registerCustomFormioComponent, registerCustomTag, registerFormioCurrencyComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioIbanComponent, registerFormioMailPreviewComponent, registerFormioUploadComponent, registerFormioValueResolverSelectorComponent, registerObjectManagementSelectFormioComponent, resolveMenuConfiguration, resolveWidgetLayout, runAfterCarbonModalClosed, serializeIncludeFunction, setRequiredOnSchema };
 //# sourceMappingURL=valtimo-components.mjs.map