From e437cfe7fff2d27835dc67b8b9e7b14b0f5f49cb Mon Sep 17 00:00:00 2001
From: "yevhen.demchenko@allianz.de" <yevhen.demchenko@allianz.com>
Date: Fri, 15 Jul 2022 13:47:41 +0200
Subject: [PATCH]  feat(dropdown): optional truncation of items (#638)

---
 .../src/dropdown/dropdown.control.ts          |  2 ++
 .../ng-aquila/src/dropdown/dropdown.spec.ts   | 11 +++++++++-
 projects/ng-aquila/src/dropdown/dropdown.ts   | 20 +++++++++++++++++++
 .../src/dropdown/item/dropdown-item.html      |  9 +++++++--
 .../src/dropdown/item/dropdown-item.ts        |  9 +++++++++
 5 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/projects/ng-aquila/src/dropdown/dropdown.control.ts b/projects/ng-aquila/src/dropdown/dropdown.control.ts
index 6ac1043a3..173ed58c7 100644
--- a/projects/ng-aquila/src/dropdown/dropdown.control.ts
+++ b/projects/ng-aquila/src/dropdown/dropdown.control.ts
@@ -8,6 +8,8 @@ export abstract class NxDropdownControl extends NxFormfieldControl<any> {
      * Note: Please make sure the value you bind is an array. If not an error is thrown! */
     isMultiSelect = false;
 
+    ignoreItemTrunctation = false;
+
     readonly filterChanges!: Subject<any>;
 
     readonly _closedStream!: Observable<void>;
diff --git a/projects/ng-aquila/src/dropdown/dropdown.spec.ts b/projects/ng-aquila/src/dropdown/dropdown.spec.ts
index 49c0ca484..3cfb5ea1b 100644
--- a/projects/ng-aquila/src/dropdown/dropdown.spec.ts
+++ b/projects/ng-aquila/src/dropdown/dropdown.spec.ts
@@ -560,13 +560,22 @@ describe('NxDropdownComponent', () => {
             dropdownElement.style.width = '200px';
         }));
 
-        it('should not use the whole viewport width', fakeAsync(() => {
+        it('should not use the whole viewport width by default', fakeAsync(() => {
             openDropdownByClick();
             fixture.detectChanges();
             flush();
 
             expect(getDropdown()!.clientWidth).toBe(453);
         }));
+
+        it('should use the whole viewport width with _truncateItems', fakeAsync(() => {
+            dropdownInstance.ignoreItemTrunctation = true;
+            openDropdownByClick();
+            fixture.detectChanges();
+            flush();
+
+            expect(getDropdown()!.clientWidth).toBe(document.body.clientWidth - dropdownInstance._overlayViewportMargin);
+        }));
     });
 
     describe('with scrolling', () => {
diff --git a/projects/ng-aquila/src/dropdown/dropdown.ts b/projects/ng-aquila/src/dropdown/dropdown.ts
index 6f402f025..9e85d8523 100644
--- a/projects/ng-aquila/src/dropdown/dropdown.ts
+++ b/projects/ng-aquila/src/dropdown/dropdown.ts
@@ -146,6 +146,13 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
     /** @docs-private */
     errorState = false;
 
+    /**
+     * Disable truncation of long item texts.
+     * We recommend following UX guidelines and always truncating long items.
+     * Please only disable truncation if it's impossible to use short descriptions.
+     */
+    private _ignoreItemTrunctation = false;
+
     /**
      * Name of this control that is used inside the formfield component
      * @docs-private
@@ -279,6 +286,19 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
         this.stateChanges.next();
     }
 
+    /**
+     * Disable truncation of long item texts.
+     * We recommend following UX guidelines and always truncating long items.
+     * Please only disable truncation if it's impossible to use short descriptions.
+     */
+    @Input('nxIgnoreItemTrunctation')
+    get ignoreItemTrunctation(): boolean {
+        return this._ignoreItemTrunctation;
+    }
+    set ignoreItemTrunctation(value: BooleanInput) {
+        this._ignoreItemTrunctation = coerceBooleanProperty(value);
+    }
+
     /** Whether the dropdown should be shown with an additional filter input. */
     @Input('nxShowFilter') showFilter = false;
 
diff --git a/projects/ng-aquila/src/dropdown/item/dropdown-item.html b/projects/ng-aquila/src/dropdown/item/dropdown-item.html
index 7e93aeb83..a39630b9a 100644
--- a/projects/ng-aquila/src/dropdown/item/dropdown-item.html
+++ b/projects/ng-aquila/src/dropdown/item/dropdown-item.html
@@ -14,11 +14,16 @@
 
 <ng-template #contentTemplate>
     <div class="nx-dropdown-results__option-label">
-        <div #content (cdkObserveContent)="_onLabelChange()" [nxTooltip]="viewValue?.length > 35 ? viewValue : null" class="ellipsis">
+        <div
+            #content
+            (cdkObserveContent)="_onLabelChange()"
+            [nxTooltip]="truncateItems && viewValue?.length > 35 ? viewValue : null"
+            [ngClass]="{ 'ellipsis': truncateItems }"
+        >
             <ng-content></ng-content>
         </div>
 
-        <div [nxTooltip]="value?.length > 35 ? value : null" class="ellipsis">
+        <div [nxTooltip]="truncateItems && value?.length > 35 ? value : null" [ngClass]="{ 'ellipsis': truncateItems }">
             <ng-container *ngIf="_isContentEmpty(content)"> {{_formattedValue }} </ng-container>
         </div>
     </div>
diff --git a/projects/ng-aquila/src/dropdown/item/dropdown-item.ts b/projects/ng-aquila/src/dropdown/item/dropdown-item.ts
index b29a456cb..afbfd26bd 100644
--- a/projects/ng-aquila/src/dropdown/item/dropdown-item.ts
+++ b/projects/ng-aquila/src/dropdown/item/dropdown-item.ts
@@ -111,6 +111,15 @@ export class NxDropdownItemComponent implements Highlightable, OnDestroy, AfterV
         return this._dropdown?.isMultiSelect;
     }
 
+    /**
+     * @docs-private
+     * Whether the parent dropdown allows item truncation.
+     */
+    get truncateItems(): boolean {
+        return !this._dropdown?.ignoreItemTrunctation;
+    }
+
+    /** Emits whenever the component is destroyed. */
     private readonly _destroyed = new Subject<void>();
 
     /** Event emitted when the option is selected or deselected. */