feat(dropdown): optional truncation of items (#638)

allianz · Jul 15, 2022 · e437cfe · e437cfe
1 parent 22d9d85
commit e437cfe
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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. */