[Popover2] Add option to remove keyboard close button

packages/ng/forms/multilanguage-input/multilanguage-input.component.html

@@ -14,6 +14,7 @@
 		<div class="textField-input-affix">
 			<button
 				[luPopover2]="popoverMultilanguage"
+				luPopoverNoCloseButton
 				[customPositions]="popoverPositions"
 				[luTooltip]="intl.toggleMultilanguage"
 				type="button"

packages/ng/popover2/content/popover-content/popover-content.component.html

@@ -1,10 +1,11 @@
 <div class="popover" (cdkObserveContent)="contentChanged()" [debounce]="contentChangedDebounceTime">
+	@if (!config.noCloseButton) {
 	<div>
 		<button type="button" luButton class="popover-close" (click)="close()">
 			<lu-icon icon="signClose"></lu-icon>
 			<span class="u-mask">{{ intl.close }}</span>
 		</button>
 	</div>
-
+	}
 	<ng-container *ngTemplateOutlet="content"></ng-container>
 </div>

packages/ng/popover2/content/popover-content/popover-content.component.ts

@@ -24,16 +24,16 @@ export class PopoverContentComponent implements AfterViewInit {
 
 	#elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
 
-	#config = inject(POPOVER_CONFIG);
+	config = inject(POPOVER_CONFIG);
 
 	destroyRef = inject(DestroyRef);
 
 	@HostBinding('attr.id')
-	contentId = this.#config.contentId;
+	contentId = this.config.contentId;
 
-	content: TemplateRef<unknown> = this.#config.content;
+	content: TemplateRef<unknown> = this.config.content;
 
-	#focusManager = new PopoverFocusTrap(this.#elementRef.nativeElement, this.#config.triggerElement);
+	#focusManager = new PopoverFocusTrap(this.#elementRef.nativeElement, this.config.triggerElement);
 
 	closed$ = new Subject<void>();
 
@@ -54,12 +54,12 @@ export class PopoverContentComponent implements AfterViewInit {
 	}
 
 	contentChanged() {
-		this.#config.ref.updatePosition();
+		this.config.ref.updatePosition();
 	}
 
 	ngAfterViewInit(): void {
 		this.#focusManager.attachAnchors();
-		if (!this.#config.disableFocusManipulation) {
+		if (!this.config.disableFocusManipulation) {
 			void this.#focusManager.focusInitialElementWhenReady();
 		}
 	}
@@ -70,16 +70,16 @@ export class PopoverContentComponent implements AfterViewInit {
 
 	@HostListener('window:keydown.escape')
 	close(): void {
-		if (!this.#config.disableFocusManipulation) {
+		if (!this.config.disableFocusManipulation) {
 			// Focus initial trigger element
-			this.#config.triggerElement.focus();
+			this.config.triggerElement.focus();
 		}
 		// Tell the directive we're closed now
 		this.closed$.next();
 		this.closed$.complete();
 		this.mouseEnter$.complete();
 		this.mouseLeave$.complete();
 		// Detach overlay
-		this.#config.ref.detach();
+		this.config.ref.detach();
 	}
 }

packages/ng/popover2/popover-tokens.ts

@@ -7,6 +7,7 @@ export interface PopoverConfig {
 	ref: OverlayRef;
 	contentId: string;
 	disableFocusManipulation: boolean;
+	noCloseButton: boolean;
 }
 
 export const POPOVER_CONFIG = new InjectionToken<PopoverConfig>('Popover:Config');

packages/ng/popover2/popover.directive.ts

@@ -98,6 +98,12 @@ export class PopoverDirective implements OnDestroy {
 	@Input()
 	customPositions?: ConnectionPositionPair[];
 
+	@Input({ transform: booleanAttribute })
+	/**
+	 * Removes close button entirely, this is bad for a11y but sometimes we want it.
+	 */
+	luPopoverNoCloseButton = false;
+
 	// We have to type these two for Compodoc to find the right type and tell Storybook these aren't strings
 	luPopoverOpenDelay: InputSignal<number> = input<number>(300);
 
@@ -222,6 +228,7 @@ export class PopoverDirective implements OnDestroy {
 				contentId: this.ariaControls,
 				triggerElement: this.#elementRef.nativeElement,
 				disableFocusManipulation: disableFocusHandler,
+				noCloseButton: this.luPopoverNoCloseButton,
 			};
 			this.#componentRef = this.#overlayRef.attach(
 				new ComponentPortal(

stories/documentation/overlays/popover2/popover2.stories.ts

@@ -64,5 +64,6 @@ export const Basic: StoryObj<PopoverDirective> = {
 		luPopoverOpenDelay: 300,
 		luPopoverDisabled: false,
 		luPopoverPosition: 'above',
+		luPopoverNoCloseButton: false,
 	},
 };