move tooltip panel directive to a more reusable and functional archit…

…ecture and small fine tunings and improvements

frontend/src/app/modules/core/components/ms-dialog/component/ms-dialog.component.ts

@@ -25,9 +25,6 @@ export class MsDialogComponent {
 	@Input() isSaveDisabled: boolean = false;
 	@Input() isDismissDisabled: boolean = false;
 
-	@Input() closeDialogOnBackdropClick: boolean = true;
-	@Input() closeDialogOnEscKeyUp: boolean = true;
-
 	@Output() actionEvent: EventEmitter<DialogStatus> = new EventEmitter<DialogStatus>();
 
 	constructor(
@@ -56,7 +53,7 @@ export class MsDialogComponent {
 	}
 
 	private closeDrawerOnBackdropClick(): void {
-		if (!this.closeDialogOnBackdropClick) {
+		if (!this.data.closeDialogOnBackdropClick) {
 			return;
 		}
 
@@ -69,7 +66,7 @@ export class MsDialogComponent {
 	}
 
 	@HostListener('window:keyup.esc') onEscKeyDown(): void {
-		if (!this.closeDialogOnEscKeyUp) {
+		if (!this.data.closeDialogOnEscKeyUp) {
 			return;
 		}
 		this.onDismiss();

frontend/src/app/modules/core/components/ms-dialog/models/interfaces/dialog-config.interface.ts

@@ -28,6 +28,8 @@ export interface DialogConfig extends OverlayConfig {
 	closeButtonLabel?: string;
 	showHeader?: boolean;
 	showFooter?: boolean;
+	closeDialogOnBackdropClick?: boolean;
+	closeDialogOnEscKeyUp?: boolean;
 	width?: DialogCSSSize;
 	height?: DialogCSSSize;
 	actionType?: DialogActionTypeEnum;

frontend/src/app/modules/core/components/ms-dialog/service/dialog.service.ts

@@ -54,6 +54,8 @@ export class DialogService {
 						showCloseButton: true,
 						showHeader: true,
 						showFooter: true,
+						closeDialogOnBackdropClick: true,
+						closeDialogOnEscKeyUp: true,
 						width: config?.width || DEFAULT_DIALOG_WIDTH,
 						height: config?.height || DEFAULT_DIALOG_HEIGHT,
 						...config

frontend/src/app/modules/core/components/ms-drawer/component/ms-drawer.component.ts

@@ -40,9 +40,6 @@ export class MsDrawerComponent {
 	@Input() isSaveDisabled: boolean = false;
 	@Input() isDismissDisabled: boolean = false;
 
-	@Input() closeDialogOnBackdropClick: boolean = true;
-	@Input() closeDialogOnEscKeyUp: boolean = true;
-
 	@Output() actionEvent: EventEmitter<DrawerStatus> = new EventEmitter<DrawerStatus>();
 
 	constructor(
@@ -67,7 +64,7 @@ export class MsDrawerComponent {
 	}
 
 	private closeDrawerOnBackdropClick(): void {
-		if (!this.closeDialogOnBackdropClick) {
+		if (!this.data.closeDialogOnBackdropClick) {
 			return;
 		}
 
@@ -80,7 +77,7 @@ export class MsDrawerComponent {
 	}
 
 	@HostListener('window:keyup.esc') onEscKeyDown(): void {
-		if (!this.closeDialogOnEscKeyUp) {
+		if (!this.data.closeDialogOnEscKeyUp) {
 			return;
 		}
 		this.onDismiss();

frontend/src/app/modules/shared/directives/ms-tooltip-panel/animations/ms-tooltip-panel.animations.ts → frontend/src/app/modules/core/components/ms-drawer/models/constants/drawer.constants.ts

@@ -14,23 +14,6 @@
 
 //   SPDX-License-Identifier: Apache-2.0
 
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import { DrawerCSSSize } from '../types/drawer-css-size.type';
 
-export const tooltipStateAnimation = trigger('tooltipState', [
-	state(
-		'hidden',
-		style({
-			opacity: 0,
-			transform: 'scale(0.9)'
-		})
-	),
-	state(
-		'visible',
-		style({
-			opacity: 1,
-			transform: 'scale(1)'
-		})
-	),
-	transition('hidden => visible', animate('150ms ease-in')), // Ease-in on open
-	transition('visible => hidden', animate('150ms ease-out')) // Ease-out on close
-]);
+export const DEFAUlT_DRAWER_WIDTH: DrawerCSSSize = '768px';

frontend/src/app/modules/core/components/ms-drawer/models/interfaces/drawer-config.interface.ts

@@ -26,6 +26,8 @@ export interface DrawerConfig extends OverlayConfig {
 	showCloseButton?: boolean;
 	saveButtonLabel?: string;
 	closeButtonLabel?: string;
+	closeDialogOnBackdropClick?: boolean;
+	closeDialogOnEscKeyUp?: boolean;
 	width?: DrawerCSSSize;
 	actionType?: DrawerActionTypeEnum;
 }

frontend/src/app/modules/core/components/ms-drawer/service/drawer.service.ts

@@ -19,7 +19,7 @@ import { ComponentPortal, ComponentType } from '@angular/cdk/portal';
 import { Injectable, Injector } from '@angular/core';
 import { DrawerRef } from '../drawer.ref';
 import { DRAWER_DATA } from '../drawer.tokens';
-import { DEFAUlT_DRAWER_WIDTH } from '../models/drawer.constants';
+import { DEFAUlT_DRAWER_WIDTH } from '../models/constants/drawer.constants';
 import { DrawerConfig } from '../models/interfaces/drawer-config.interface';
 
 @Injectable()
@@ -53,6 +53,8 @@ export class DrawerService {
 						closeButtonLabel: 'Close',
 						showSaveButton: true,
 						showCloseButton: true,
+						closeDialogOnBackdropClick: true,
+						closeDialogOnEscKeyUp: true,
 						width: config?.width || DEFAUlT_DRAWER_WIDTH,
 						...config
 					}

frontend/src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.html

@@ -0,0 +1,29 @@
+<!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+  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.
+
+  SPDX-License-Identifier: Apache-2.0 -->
+
+<div class="tooltip-container" [ngClass]="data.position" [ngStyle]="data.width | iconPanelSizeStyles: data.height">
+	<div class="tooltip-arrow"></div>
+
+	<div class="popover-content">
+		<ng-content></ng-content>
+	</div>
+
+	<div class="close-button">
+		<button mat-icon-button (click)="onClose()">
+			<mat-icon fontSet="ms" fontIcon="icon-X" class="mat-error size-20"></mat-icon>
+		</button>
+	</div>
+</div>

frontend/src/app/modules/shared/directives/ms-tooltip-panel/component/ms-tooltip-panel.component.scss → frontend/src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.scss

@@ -20,11 +20,8 @@
 	color: var(--terminal-color);
 	border-radius: 6px;
 	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
 
-.tooltip-wrapper {
-	display: flex;
-	padding: 2px 6px;
+	padding: 10px 8px;
 }
 
 .tooltip-arrow {
@@ -71,7 +68,7 @@
 }
 
 .close-button {
-	right: 0;
-	top: -2;
 	position: absolute;
+	right: 0;
+	top: 0;
 }

frontend/src/app/modules/shared/directives/ms-tooltip-panel/component/ms-tooltip-panel.component.spec.ts → frontend/src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.spec.ts

@@ -15,19 +15,18 @@
 //   SPDX-License-Identifier: Apache-2.0
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MsPopoverComponent } from './ms-popover.component';
 
-import { MsTooltipPanelComponent } from './ms-tooltip-panel.component';
-
-describe('MsTooltipPanelComponent', () => {
-	let component: MsTooltipPanelComponent;
-	let fixture: ComponentFixture<MsTooltipPanelComponent>;
+describe('MsPopoverComponent', () => {
+	let component: MsPopoverComponent;
+	let fixture: ComponentFixture<MsPopoverComponent>;
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-			imports: [MsTooltipPanelComponent]
+			imports: [MsPopoverComponent]
 		}).compileComponents();
 
-		fixture = TestBed.createComponent(MsTooltipPanelComponent);
+		fixture = TestBed.createComponent(MsPopoverComponent);
 		component = fixture.componentInstance;
 		fixture.detectChanges();
 	});

frontend/src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.ts

@@ -0,0 +1,80 @@
+//   Copyright 2024 Cisco Systems, Inc.
+
+//   Licensed under the Apache License, Version 2.0 (the "License");
+//   you may not use this file except in compliance with the License.
+//   You may obtain a copy of the License at
+
+//        http://www.apache.org/licenses/LICENSE-2.0
+
+//   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.
+
+//   SPDX-License-Identifier: Apache-2.0
+
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, HostListener, Inject, Input, Output, TemplateRef } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { PopoverStatus } from '../../models/enums/popover-status.enum';
+import { PopoverConfig } from '../../models/interfaces/popover-config.interface';
+import { PopoverSizeStylesPipe } from '../../pipes/popover-size-style.pipe';
+import { PopoverRef } from '../../popover.ref';
+import { POPOVER_DATA } from '../../popover.tokens';
+
+@UntilDestroy()
+@Component({
+	selector: 'ms-popover',
+	standalone: true,
+	imports: [CommonModule, MatIconModule, MatButtonModule, PopoverSizeStylesPipe],
+	templateUrl: './ms-popover.component.html',
+	styleUrl: './ms-popover.component.scss'
+})
+export class MsPopoverComponent {
+	@Input() contentTemplate?: TemplateRef<any>;
+	@Output() actionEvent: EventEmitter<PopoverStatus> = new EventEmitter<PopoverStatus>();
+
+	constructor(
+		private popoverRef: PopoverRef,
+		@Inject(POPOVER_DATA) public data: PopoverConfig
+	) {
+		this.closeDrawerOnBackdropClick();
+	}
+
+	onClose(): void {
+		this.actionEvent.emit(PopoverStatus.CLOSE);
+		this.popoverRef.close({ status: PopoverStatus.CLOSE });
+	}
+
+	onSave(): void {
+		this.actionEvent.emit(PopoverStatus.SAVE);
+	}
+
+	onDismiss(): void {
+		this.actionEvent.emit(PopoverStatus.DISMISS);
+		this.popoverRef.close({ status: PopoverStatus.DISMISS });
+	}
+
+	private closeDrawerOnBackdropClick(): void {
+		if (!this.data.closePopoverOnBackdropClick) {
+			return;
+		}
+
+		this.popoverRef
+			.backdropClick()
+			.pipe(untilDestroyed(this))
+			.subscribe(() => {
+				this.onDismiss();
+			});
+	}
+
+	@HostListener('window:keyup.esc') onEscKeyDown(): void {
+		if (!this.data.closePopoverOnEscKeyUp) {
+			return;
+		}
+		this.onDismiss();
+	}
+}

frontend/src/app/modules/core/components/ms-popover/index.ts

@@ -0,0 +1,20 @@
+//   Copyright 2024 Cisco Systems, Inc.
+
+//   Licensed under the Apache License, Version 2.0 (the "License");
+//   you may not use this file except in compliance with the License.
+//   You may obtain a copy of the License at
+
+//        http://www.apache.org/licenses/LICENSE-2.0
+
+//   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.
+
+//   SPDX-License-Identifier: Apache-2.0
+
+export * from './models/enums/popover-status.enum';
+export * from './models/interfaces/popover-config.interface';
+export * from './popover.ref';
+export * from './popover.tokens';

frontend/src/app/modules/core/components/ms-popover/models/constants/popover.constants.ts

@@ -0,0 +1,22 @@
+//   Copyright 2024 Cisco Systems, Inc.
+
+//   Licensed under the Apache License, Version 2.0 (the "License");
+//   you may not use this file except in compliance with the License.
+//   You may obtain a copy of the License at
+
+//        http://www.apache.org/licenses/LICENSE-2.0
+
+//   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.
+
+//   SPDX-License-Identifier: Apache-2.0
+
+import { PopoverCSSSize } from '../types/popover-css-size.type';
+
+export const DEFAUlT_POPOVER_WIDTH: PopoverCSSSize = '200px';
+export const DEFAUlT_POPOVER_HEIGHT: PopoverCSSSize = '80px';
+
+export const DEFAULT_POPOVER_POSITION_VALUE = 'top';

frontend/src/app/modules/core/components/ms-popover/models/enums/popover-action-type.enum.ts

@@ -0,0 +1,21 @@
+//   Copyright 2024 Cisco Systems, Inc.
+
+//   Licensed under the Apache License, Version 2.0 (the "License");
+//   you may not use this file except in compliance with the License.
+//   You may obtain a copy of the License at
+
+//        http://www.apache.org/licenses/LICENSE-2.0
+
+//   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.
+
+//   SPDX-License-Identifier: Apache-2.0
+
+export enum PopoverActionTypeEnum {
+	ADD = 'add',
+	EDIT = 'edit',
+	VIEW = 'view'
+}

frontend/src/app/modules/core/components/ms-popover/models/enums/popover-status.enum.ts

@@ -0,0 +1,22 @@
+//   Copyright 2024 Cisco Systems, Inc.
+
+//   Licensed under the Apache License, Version 2.0 (the "License");
+//   you may not use this file except in compliance with the License.
+//   You may obtain a copy of the License at
+
+//        http://www.apache.org/licenses/LICENSE-2.0
+
+//   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.
+
+//   SPDX-License-Identifier: Apache-2.0
+
+export enum PopoverStatus {
+	OPEN = 'open',
+	DISMISS = 'dismiss',
+	SAVE = 'save',
+	CLOSE = 'close'
+}