refactor: simplify panel state management and enhance template syntax in content metadata component

- Replaced inline conditional checks with dedicated methods for panel expansion and editing states.
- Updated template syntax to improve readability and maintainability using @if syntax.
- Removed unused CommonModule import and added AsyncPipe for better performance.

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html

@@ -1,10 +1,13 @@
-@let isExpandedProperties = (currentPanel.panelTitle === DefaultPanels.PROPERTIES && currentPanel.expanded) ?? false;
+@let isExpandedProperties = isPanelExpanded(DefaultPanels.PROPERTIES);
-@let isExpandedTags = (currentPanel.panelTitle === DefaultPanels.TAGS && currentPanel.expanded) ?? false;
+@let isExpandedTags = isPanelExpanded(DefaultPanels.TAGS);
-@let isExpandedCategories = (currentPanel.panelTitle === DefaultPanels.CATEGORIES && currentPanel.expanded) ?? false;
+@let isExpandedCategories = isPanelExpanded(DefaultPanels.CATEGORIES);
+@let isEditingTags = isPanelEditing(DefaultPanels.TAGS);
+@let isEditingCategories = isPanelEditing(DefaultPanels.CATEGORIES);
+@let isEditingProperties = isPanelEditing(DefaultPanels.PROPERTIES);
 
 <mat-accordion displayMode="flat" [multi]="multi" class="adf-metadata-properties">
+    @if (displayDefaultProperties) {
         <mat-expansion-panel
-        *ngIf="displayDefaultProperties"
             class="adf-content-metadata-panel"
             [expanded]="isExpandedProperties"
             (opened)="expandPanel(DefaultPanels.PROPERTIES)"
@@ -18,8 +21,8 @@
                 <adf-content-metadata-header
                     [title]="'CORE.METADATA.BASIC.HEADER'"
                     [expanded]="isExpandedProperties">
+                    @if (!readOnly && !isEditingProperties) {
                         <button
-                    *ngIf="!readOnly && !isPanelEditing(DefaultPanels.PROPERTIES)"
                             mat-icon-button
                             (click)="toggleGroupEditing(DefaultPanels.PROPERTIES, $event)"
                             [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
@@ -28,7 +31,9 @@
                             class="adf-edit-icon-buttons">
                             <mat-icon adf-icon="mode_edit" />
                         </button>
-                <div *ngIf="isPanelEditing(DefaultPanels.PROPERTIES)" class="adf-metadata-action-buttons">
+                    }
+                    @if (isEditingProperties) {
+                        <div class="adf-metadata-action-buttons">
                             <button
                                 mat-icon-button
                                 [attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
@@ -47,20 +52,21 @@
                                 <mat-icon adf-icon="check" />
                             </button>
                         </div>
+                    }
                 </adf-content-metadata-header>
             </mat-expansion-panel-header>
             <adf-card-view
                 class="adf-metadata-properties-expansion-panel"
                 (keydown)="keyDown($event)"
                 [properties]="(basicProperties$ | async) ?? []"
-            [editable]="!readOnly && isPanelEditing(DefaultPanels.PROPERTIES)"
+                [editable]="!readOnly && isEditingProperties"
                 [displayEmpty]="displayEmpty"
                 [copyToClipboardAction]="copyToClipboardAction"
                 [useChipsForMultiValueProperty]="useChipsForMultiValueProperty"
                 [multiValueSeparator]="multiValueSeparator" />
         </mat-expansion-panel>
-
+    }
-    <ng-container *ngIf="displayTags">
+    @if (displayTags) {
         <mat-expansion-panel
             hideToggle
             [expanded]="isExpandedTags"
@@ -73,8 +79,8 @@
                 [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.SECTION' | translate: { sectionName: ('METADATA.BASIC.TAGS' | translate) }"
                 [class.adf-metadata-properties-header-expanded]="isExpandedTags">
                 <adf-content-metadata-header [title]="'METADATA.BASIC.TAGS'" [expanded]="isExpandedTags">
+                    @if (!readOnly && !isEditingTags) {
                         <button
-                        *ngIf="!readOnly && !isPanelEditing(DefaultPanels.TAGS)"
                             mat-icon-button
                             (click)="toggleGroupEditing(DefaultPanels.TAGS, $event)"
                             [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
@@ -83,7 +89,9 @@
                             class="adf-edit-icon-buttons">
                             <mat-icon adf-icon="mode_edit" />
                         </button>
-                    <div *ngIf="isPanelEditing(DefaultPanels.TAGS)" class="adf-metadata-action-buttons">
+                    }
+                    @if (isEditingTags) {
+                        <div class="adf-metadata-action-buttons">
                             <button
                                 mat-icon-button
                                 [attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
@@ -102,27 +110,32 @@
                                 <mat-icon adf-icon="check" />
                             </button>
                         </div>
+                    }
                 </adf-content-metadata-header>
             </mat-expansion-panel-header>
-            <div *ngIf="currentPanel.panelTitle === DefaultPanels.TAGS && editedPanelTitle !== DefaultPanels.TAGS"
+            @if (!isEditingTags) {
-                 class="adf-metadata-properties-tags">
+                <div class="adf-metadata-properties-tags">
                     <adf-dynamic-chip-list [chips]="tagsToDisplay" [showDelete]="false" />
                 </div>
-            <div *ngIf="showEmptyTagMessage" class="adf-metadata-no-item-added">
+            }
+            @if (showEmptyTagMessage) {
+                <div class="adf-metadata-no-item-added">
                     {{ 'METADATA.BASIC.NO_TAGS_ADDED' | translate }}
                 </div>
+            }
+            @if (!readOnly && isEditingTags) {
                 <adf-tags-creator
-                *ngIf="!readOnly && isPanelEditing(DefaultPanels.TAGS)"
                     class="adf-metadata-properties-tags"
                     [tagNameControlVisible]="editing"
                     (tagsChange)="storeTagsToAssign($event)"
                     [mode]="tagsCreatorMode"
                     [tags]="assignedTags"
                     [disabledTagsRemoving]="saving" />
+            }
         </mat-expansion-panel>
-    </ng-container>
+    }
 
-    <ng-container *ngIf="displayCategories">
+    @if (displayCategories) {
         <mat-expansion-panel
             hideToggle
             [expanded]="isExpandedCategories"
@@ -137,8 +150,8 @@
                 <adf-content-metadata-header
                     [title]="'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE'"
                     [expanded]="isExpandedCategories">
+                    @if (!readOnly && !isEditingCategories) {
                         <button
-                        *ngIf="!readOnly && !isPanelEditing(DefaultPanels.CATEGORIES)"
                             mat-icon-button
                             (click)="toggleGroupEditing(DefaultPanels.CATEGORIES, $event)"
                             [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
@@ -147,7 +160,9 @@
                             class="adf-categories-button adf-edit-icon-buttons">
                             <mat-icon adf-icon="mode_edit" />
                         </button>
-                    <div *ngIf="isPanelEditing(DefaultPanels.CATEGORIES)" class="adf-metadata-action-buttons">
+                    }
+                    @if (isEditingCategories) {
+                        <div class="adf-metadata-action-buttons">
                             <button
                                 mat-icon-button
                                 [attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
@@ -166,9 +181,10 @@
                                 <mat-icon adf-icon="check" />
                             </button>
                         </div>
+                    }
                 </adf-content-metadata-header>
             </mat-expansion-panel-header>
-            @if (currentPanel.panelTitle === DefaultPanels.CATEGORIES && editedPanelTitle !== DefaultPanels.CATEGORIES) {
+            @if (!isEditingCategories) {
                 <div>
                     @for (category of categories; track category.id) {
                         <p class="adf-metadata-categories">{{ category.name }}</p>
@@ -180,8 +196,8 @@
                     {{ 'CATEGORIES_MANAGEMENT.NO_CATEGORIES_ADDED' | translate }}
                 </div>
             }
+            @if (!readOnly && isEditingCategories) {
                 <adf-categories-management
-                *ngIf="!readOnly && isPanelEditing(DefaultPanels.CATEGORIES)"
                     class="adf-metadata-categories-header"
                     [categoryNameControlVisible]="editing"
                     [disableRemoval]="saving"
@@ -189,8 +205,9 @@
                     [managementMode]="categoriesManagementMode"
                     [classifiableChanged]="classifiableChanged"
                     (categoriesChange)="storeCategoriesToAssign($event)" />
+            }
         </mat-expansion-panel>
-    </ng-container>
+    }
 
     @for (customPanel of customPanels; track customPanel.panelTitle) {
         @let isExpandedCustomPanel = (currentPanel.panelTitle === customPanel.panelTitle && currentPanel.expanded) ?? false;
@@ -232,8 +249,8 @@
                         [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.SECTION' | translate: { sectionName: (group.title | translate) }"
                         [class.adf-metadata-properties-header-expanded]="isExpandedGroup">
                         <adf-content-metadata-header [title]="group.title" [expanded]="isExpandedGroup">
+                            @if (group.editable && !this.readOnly && !isPanelEditing(group.title)) {
                                 <button
-                                *ngIf="group.editable && !this.readOnly && !isPanelEditing(group.title)"
                                     mat-icon-button
                                     [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                                     [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate: { sectionName: (group.title | translate) }"
@@ -242,7 +259,9 @@
                                     (click)="toggleGroupEditing(group.title, $event)">
                                     <mat-icon adf-icon="mode_edit" />
                                 </button>
-                            <div class="adf-metadata-action-buttons" *ngIf="group.editable && isPanelEditing(group.title)">
+                            }
+                            @if (group.editable && isPanelEditing(group.title)) {
+                                <div class="adf-metadata-action-buttons">
                                     <button
                                         mat-icon-button
                                         [attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
@@ -261,11 +280,14 @@
                                         <mat-icon adf-icon="check" />
                                     </button>
                                 </div>
+                            }
                         </adf-content-metadata-header>
                     </mat-expansion-panel-header>
-                    <div *ngIf="!showGroup(group) && !displayEmpty && group.editable && editedPanelTitle !== group.title" class="adf-metadata-no-item-added">
+                    @if (!showGroup(group) && !displayEmpty && group.editable && editedPanelTitle !== group.title) {
+                        <div class="adf-metadata-no-item-added">
                             {{ 'METADATA.BASIC.NO_ITEMS_MESSAGE' | translate : { groupTitle: group.title | translate } }}
                         </div>
+                    }
                     <adf-card-view
                         class="adf-metadata-properties-expansion-panel"
                         (keydown)="keyDown($event)"

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts

@@ -41,7 +41,6 @@ import { CategoryService } from '../../../category/services/category.service';
 import { CategoriesManagementMode } from '../../../category/categories-management/categories-management-mode';
 import { AllowableOperationsEnum } from '../../../common/models/allowable-operations.enum';
 import { ContentService } from '../../../common/services/content.service';
-import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatExpansionModule } from '@angular/material/expansion';
@@ -52,6 +51,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TranslatePipe } from '@ngx-translate/core';
 import { ContentMetadataHeaderComponent } from './content-metadata-header.component';
 import { CategoriesManagementComponent } from '../../../category/categories-management/categories-management.component';
+import { AsyncPipe } from '@angular/common';
 
 const DEFAULT_SEPARATOR = ', ';
 
@@ -66,7 +66,7 @@ export type DefaultPanels = (typeof DefaultPanels)[keyof typeof DefaultPanels];
 @Component({
     selector: 'adf-content-metadata',
     imports: [
-        CommonModule,
+        AsyncPipe,
         MatExpansionModule,
         ContentMetadataHeaderComponent,
         MatButtonModule,
@@ -246,6 +246,10 @@ export class ContentMetadataComponent implements OnChanges, OnInit {
         );
     }
 
+    isPanelExpanded(panelTitle: string): boolean {
+        return (this.currentPanel.panelTitle === panelTitle && this.currentPanel.expanded) ?? false;
+    }
+
     protected handleUpdateError(error: Error) {
         let statusCode = 0;