chore: remove Toggle Icon directive and related references

- Deleted the Toggle Icon directive implementation and its associated tests.
- Updated documentation to reflect the removal of the directive.
- Adjusted components to eliminate dependencies on the Toggle Icon directive.

docs/README.md

@@ -323,7 +323,6 @@ for more information about installing and using the source code.
 | [Node Favorite directive](content-services/directives/node-favorite.directive.md) | Selectively toggles nodes as favorites. | [Source](../lib/content-services/src/lib/directives/node-favorite.directive.ts) |
 | [Node Lock directive](content-services/directives/node-lock.directive.md) | Locks or unlocks a node. | [Source](../lib/content-services/src/lib/directives/node-lock.directive.ts) |
 | [Node Restore directive](content-services/directives/node-restore.directive.md) | Restores deleted nodes to their original location. | [Source](../lib/content-services/src/lib/directives/node-restore.directive.ts) |
-| [Toggle Icon directive](content-services/directives/toggle-icon.directive.md) | Toggle icon on mouse or keyboard event for a selectable element. | [Source](../lib/content-services/src/lib/upload/directives/toggle-icon.directive.ts) |
 | [Version Compatibility Directive](content-services/directives/version-compatibility.directive.md) | Enables/disables components based on ACS version in use. | [Source](../lib/content-services/src/lib/version-compatibility/version-compatibility.directive.ts) |
 
 ### Dialogs

docs/content-services/directives/toggle-icon.directive.md

@@ -1,27 +0,0 @@
----
-Title: Toggle Icon directive
-Added: v2.0.0
-Status: Active
-Last reviewed: 2019-04-09
----
-
-# [Toggle Icon directive](../../../lib/content-services/src/lib/upload/directives/toggle-icon.directive.ts "Defined in toggle-icon.directive.ts")
-
-Toggle icon on mouse or keyboard event for a selectable element.
-
-## Example Usage
-
-```html
-<button mat-icon-button adf-toggle-icon #toggle="toggleIcon">
-    <mat-icon *ngIf="!toggle.isToggled">
-        check_circle
-    </mat-icon>
-
-    <mat-icon *ngIf="toggle.isToggled">
-        remove_circle
-    </mat-icon>
-    <button></button>
-</button>
-```
-
-## Class members

docs/versionIndex.md

@@ -663,7 +663,6 @@ backend services have been tested with each released version of ADF.
 -   [Text mask component](core/components/text-mask.component.md)
 -   [Thumbnail service](core/services/thumbnail.service.md)
 -   [Time ago pipe](core/pipes/time-ago.pipe.md)
--   [Toggle icon directive](content-services/directives/toggle-icon.directive.md)
 -   [Toolbar divider component](core/components/toolbar-divider.component.md)
 -   [Toolbar title component](core/components/toolbar-title.component.md)
 -   [Toolbar component](core/components/toolbar.component.md)

lib/content-services/src/lib/upload/components/file-uploading-list-row.component.html

@@ -26,20 +26,22 @@
     <div
       tabindex="0"
       role="button"
-      #toggleIcon="toggleIcon"
-      adf-toggle-icon
+      (mouseenter)="onToggleMouseEnter(toggleIconState)"
+      (mouseleave)="onToggleMouseLeave(toggleIconState)"
+      (focus)="onToggleFocus(toggleIconState)"
+      (blur)="onToggleBlur(toggleIconState)"
       (keyup.enter)="onCancel(file)"
       (click)="onCancel(file)"
       data-automation-id="cancel-upload-progress"
       [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.STOP_FILE_UPLOAD' | translate: { file: file.name }"
       class="adf-file-uploading-row__group adf-file-uploading-row__group--toggle"
       title="{{ 'ADF_FILE_UPLOAD.BUTTON.STOP_FILE' | translate }}">
-      @if (!toggleIcon.isToggled) {
+      @if (!toggleIconState.isToggled) {
         <span class="adf-file-uploading-row__status">
           {{ file.progress.loaded | adfFileSize }} / {{ file.progress.total | adfFileSize }}
         </span>
       }
-      @if (toggleIcon.isToggled) {
+      @if (toggleIconState.isToggled) {
         <mat-icon class="adf-file-uploading-row__action adf-file-uploading-row__action--cancel" adf-icon="clear" />
       }
     </div>
@@ -47,8 +49,10 @@
 
   @if (isUploadComplete()) {
     <button mat-icon-button
-      adf-toggle-icon
-      #toggleIcon="toggleIcon"
+      (mouseenter)="onToggleMouseEnter(toggleIconState)"
+      (mouseleave)="onToggleMouseLeave(toggleIconState)"
+      (focus)="onToggleFocus(toggleIconState)"
+      (blur)="onToggleBlur(toggleIconState)"
       class="adf-file-uploading-row__group"
       [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.UPLOAD_SUCCESSFUL' | translate: { file: file.name }"
       title="{{ 'ADF_FILE_UPLOAD.BUTTON.UPLOAD_SUCCESSFUL' | translate }}">
@@ -67,18 +71,20 @@
 
   @if (canCancelUpload()) {
     <button
-      adf-toggle-icon
-      #toggleIconCancel="toggleIcon"
+      (mouseenter)="onToggleMouseEnter(toggleIconCancelState)"
+      (mouseleave)="onToggleMouseLeave(toggleIconCancelState)"
+      (focus)="onToggleFocus(toggleIconCancelState)"
+      (blur)="onToggleBlur(toggleIconCancelState)"
       mat-icon-button
       (click)="onCancel(file)"
       data-automation-id="cancel-upload-queue"
       class="adf-file-uploading-row__group"
       title="{{ 'ADF_FILE_UPLOAD.BUTTON.STOP_FILE' | translate }}"
       [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.STOP_FILE' | translate: { file: file.name }">
-      @if (!toggleIconCancel.isToggled) {
+      @if (!toggleIconCancelState.isToggled) {
         <mat-icon class="adf-file-uploading-row__status adf-file-uploading-row__status--pending" adf-icon="schedule" />
       }
-      @if (toggleIconCancel.isToggled) {
+      @if (toggleIconCancelState.isToggled) {
         <mat-icon class="adf-file-uploading-row__action adf-file-uploading-row__action--remove" adf-icon="remove_circle" />
       }
     </button>

lib/content-services/src/lib/upload/components/file-uploading-list-row.component.ts

@@ -22,12 +22,16 @@ import { MatListModule } from '@angular/material/list';
 import { FileSizePipe, IconModule } from '@alfresco/adf-core';
 import { MatChipsModule } from '@angular/material/chips';
 import { TranslatePipe } from '@ngx-translate/core';
-import { ToggleIconDirective } from '../directives/toggle-icon.directive';
 import { MatButtonModule } from '@angular/material/button';
 
+interface ToggleIconState {
+    isFocused: boolean;
+    isToggled: boolean;
+}
+
 @Component({
     selector: 'adf-file-uploading-list-row',
-    imports: [IconModule, MatListModule, MatChipsModule, TranslatePipe, ToggleIconDirective, FileSizePipe, MatButtonModule],
+    imports: [IconModule, MatListModule, MatChipsModule, TranslatePipe, FileSizePipe, MatButtonModule],
     templateUrl: './file-uploading-list-row.component.html',
     styleUrls: ['./file-uploading-list-row.component.scss'],
     encapsulation: ViewEncapsulation.None
@@ -39,10 +43,40 @@ export class FileUploadingListRowComponent {
     @Output()
     cancel = new EventEmitter<FileModel>();
 
+    toggleIconState: ToggleIconState = { isFocused: false, isToggled: false };
+    toggleIconCancelState: ToggleIconState = { isFocused: false, isToggled: false };
+
     onCancel(file: FileModel): void {
         this.cancel.emit(file);
     }
 
+    onToggleMouseEnter(state: ToggleIconState): void {
+        if (!state.isFocused) {
+            state.isToggled = true;
+        }
+    }
+
+    onToggleMouseLeave(state: ToggleIconState): void {
+        if (!state.isFocused) {
+            state.isToggled = false;
+        }
+
+        if (state.isFocused && state.isToggled) {
+            state.isFocused = false;
+            state.isToggled = false;
+        }
+    }
+
+    onToggleFocus(state: ToggleIconState): void {
+        state.isFocused = true;
+        state.isToggled = true;
+    }
+
+    onToggleBlur(state: ToggleIconState): void {
+        state.isFocused = false;
+        state.isToggled = false;
+    }
+
     showCancelledStatus(): boolean {
         return (
             this.file.status === FileUploadStatus.Cancelled ||

lib/content-services/src/lib/upload/directives/toggle-icon.directive.spec.ts

@@ -1,86 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * 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.
- */
-
-import { Component, ViewChild } from '@angular/core';
-import { ToggleIconDirective } from './toggle-icon.directive';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-@Component({
-    selector: 'adf-test-component',
-    imports: [ToggleIconDirective],
-    template: ` <button id="testButton" adf-toggle-icon>test</button> `
-})
-class TestComponent {
-    @ViewChild(ToggleIconDirective)
-    directive: ToggleIconDirective;
-}
-
-describe('ToggleIconDirective', () => {
-    let fixture: ComponentFixture<TestComponent>;
-    let component: TestComponent;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [TestComponent]
-        });
-        fixture = TestBed.createComponent(TestComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should set toggle to true on mouseenter', () => {
-        const button: HTMLElement = fixture.nativeElement.querySelector('#testButton');
-        button.dispatchEvent(new MouseEvent('mouseenter'));
-
-        expect(component.directive.isToggled).toBe(true);
-    });
-
-    it('should set toggle to false on mouseleave if element is not focused', () => {
-        const button: HTMLElement = fixture.nativeElement.querySelector('#testButton');
-        button.dispatchEvent(new MouseEvent('mouseleave'));
-
-        expect(component.directive.isToggled).toBe(false);
-    });
-
-    it('should set toggle and focus to false on mouseleave when element is focused', () => {
-        const button: HTMLElement = fixture.nativeElement.querySelector('#testButton');
-        button.dispatchEvent(new Event('focus'));
-        expect(component.directive.isToggled).toBe(true);
-
-        button.dispatchEvent(new MouseEvent('mouseleave'));
-
-        expect(component.directive.isToggled).toBe(false);
-        expect(component.directive.isFocused).toBe(false);
-    });
-
-    it('should set toggle and focus to true when element is focused', () => {
-        const button: HTMLElement = fixture.nativeElement.querySelector('#testButton');
-        button.dispatchEvent(new Event('focus'));
-
-        expect(component.directive.isToggled).toBe(true);
-        expect(component.directive.isFocused).toBe(true);
-    });
-
-    it('should set toggle and focus to true when element blur event', () => {
-        const button: HTMLElement = fixture.nativeElement.querySelector('#testButton');
-        button.dispatchEvent(new Event('focus'));
-        button.dispatchEvent(new Event('blur'));
-
-        expect(component.directive.isToggled).toBe(false);
-        expect(component.directive.isFocused).toBe(false);
-    });
-});

lib/content-services/src/lib/upload/directives/toggle-icon.directive.ts

@@ -1,62 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * 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.
- */
-
-import { Directive, HostListener } from '@angular/core';
-
-@Directive({
-    selector: '[adf-toggle-icon]',
-    exportAs: 'toggleIcon'
-})
-export class ToggleIconDirective {
-    private isFocus: boolean = false;
-    private toggle: boolean = false;
-
-    @HostListener('mouseenter') onMouseEnter() {
-        if (!this.isFocus) {
-            this.toggle = true;
-        }
-    }
-
-    @HostListener('mouseleave') onMouseLeave() {
-        if (!this.isFocus) {
-            this.toggle = false;
-        }
-
-        if (this.isFocus && this.toggle) {
-            this.isFocus = false;
-            this.toggle = false;
-        }
-    }
-
-    @HostListener('focus') onFocus() {
-        this.isFocus = true;
-        this.toggle = true;
-    }
-
-    @HostListener('blur') onBlur() {
-        this.isFocus = false;
-        this.toggle = false;
-    }
-
-    get isToggled(): boolean {
-        return this.toggle;
-    }
-
-    get isFocused(): boolean {
-        return this.isFocus;
-    }
-}

lib/content-services/src/lib/upload/public-api.ts

@@ -24,7 +24,6 @@ export * from './components/file-uploading-list-row.component';
 export * from './components/upload-files.event';
 
 export * from './directives/file-draggable.directive';
-export * from './directives/toggle-icon.directive';
 
 export * from './components/base-upload/upload-base';
 

lib/content-services/src/lib/upload/upload.module.ts

@@ -23,11 +23,9 @@ import { UploadButtonComponent } from './components/upload-button.component';
 import { UploadVersionButtonComponent } from './components/upload-version-button.component';
 import { UploadDragAreaComponent } from './components/upload-drag-area.component';
 import { FileDraggableDirective } from './directives/file-draggable.directive';
-import { ToggleIconDirective } from './directives/toggle-icon.directive';
 
 export const CONTENT_UPLOAD_DIRECTIVES = [
     FileDraggableDirective,
-    ToggleIconDirective,
     UploadDragAreaComponent,
     UploadButtonComponent,
     UploadVersionButtonComponent,