feat(select, autocomplete): ability to override options width

src/framework/theme/components/autocomplete/autocomplete.component.html

@@ -1,7 +1,7 @@
 <nb-option-list *nbPortal
                 [size]="size"
                 [position]="overlayPosition"
-                [style.width.px]="hostWidth"
+                [style.width.px]="optionsWidth"
                 role="listbox"
                 [id]="id"
                 [class.empty]="!options?.length"

src/framework/theme/components/autocomplete/autocomplete.component.ts

@@ -42,7 +42,6 @@ let lastAutocompleteId: number = 0;
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NbAutocompleteComponent<T> implements AfterContentInit, OnDestroy {
-
   protected destroy$: Subject<void> = new Subject<void>();
 
   /**
@@ -55,7 +54,6 @@ export class NbAutocompleteComponent<T> implements AfterContentInit, OnDestroy {
    * */
   id: string = `nb-autocomplete-${lastAutocompleteId++}`;
 
-
   /**
    * @docs-private
    * Current overlay position because of we have to toggle overlayPosition
@@ -83,7 +81,7 @@ export class NbAutocompleteComponent<T> implements AfterContentInit, OnDestroy {
   /**
    * Function passed as input to process each string option value before render.
    * */
-  @Input() handleDisplayFn: ((value: any) => string);
+  @Input() handleDisplayFn: (value: any) => string;
 
   /**
    * Autocomplete size, available sizes:
@@ -106,14 +104,26 @@ export class NbAutocompleteComponent<T> implements AfterContentInit, OnDestroy {
    * */
   @Input() optionsPanelClass: string | string[];
 
+  /**
+   * Specifies width (in pixels) to be set on `nb-option`s container (`nb-option-list`)
+   * */
+  @Input()
+  get optionsWidth(): number {
+    return this._optionsWidth ?? this.hostWidth;
+  }
+  set optionsWidth(value: number) {
+    this._optionsWidth = value;
+  }
+  protected _optionsWidth: number | undefined;
+
   /**
    * Will be emitted when selected value changes.
    * */
   @Output() selectedChange: EventEmitter<T> = new EventEmitter();
 
   /**
-    * List of `NbOptionComponent`'s components passed as content.
-  * */
+   * List of `NbOptionComponent`'s components passed as content.
+   * */
   @ContentChildren(NbOptionComponent, { descendants: true }) options: QueryList<NbOptionComponent<T>>;
 
   /**
@@ -124,9 +134,7 @@ export class NbAutocompleteComponent<T> implements AfterContentInit, OnDestroy {
   constructor(protected cd: ChangeDetectorRef) {}
 
   ngAfterContentInit() {
-    this.options.changes
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(() => this.cd.detectChanges());
+    this.options.changes.pipe(takeUntil(this.destroy$)).subscribe(() => this.cd.detectChanges());
   }
 
   ngOnDestroy() {
@@ -169,5 +177,4 @@ export class NbAutocompleteComponent<T> implements AfterContentInit, OnDestroy {
   get giant(): boolean {
     return this.size === 'giant';
   }
-
 }

src/framework/theme/components/select/select.component.html

@@ -21,6 +21,6 @@
     </nb-icon>
 </button>
 
-<nb-option-list *nbPortal [size]="size" [position]="overlayPosition" [style.width.px]="hostWidth" [ngClass]="optionsListClass">
+<nb-option-list *nbPortal [size]="size" [position]="overlayPosition" [style.width.px]="optionsWidth" [ngClass]="optionsListClass">
   <ng-content select="nb-option, nb-option-group"></ng-content>
 </nb-option-list>

src/framework/theme/components/select/select.component.ts

@@ -63,8 +63,7 @@ export type NbSelectAppearance = 'outline' | 'filled' | 'hero';
   selector: 'nb-select-label',
   template: '<ng-content></ng-content>',
 })
-export class NbSelectLabelComponent {
-}
+export class NbSelectLabelComponent {}
 
 export function nbSelectFormFieldControlConfigFactory() {
   const config = new NbFormFieldControlConfig();
@@ -519,9 +518,9 @@ export function nbSelectFormFieldControlConfigFactory() {
     { provide: NbFormFieldControlConfig, useFactory: nbSelectFormFieldControlConfigFactory },
   ],
 })
-export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy,
-                                          ControlValueAccessor, NbFormFieldControl {
-
+export class NbSelectComponent
+  implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy, ControlValueAccessor, NbFormFieldControl
+{
   /**
    * Select size, available sizes:
    * `tiny`, `small`, `medium` (default), `large`, `giant`
@@ -554,6 +553,18 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
    * */
   @Input() optionsPanelClass: string | string[];
 
+  /**
+   * Specifies width (in pixels) to be set on `nb-option`s container (`nb-option-list`)
+   * */
+  @Input()
+  get optionsWidth(): number {
+    return this._optionsWidth ?? this.hostWidth;
+  }
+  set optionsWidth(value: number) {
+    this._optionsWidth = value;
+  }
+  protected _optionsWidth: number | undefined;
+
   /**
    * Adds `outline` styles
    */
@@ -660,9 +671,7 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
     this.writeValue(value);
   }
   get selected() {
-    return this.multiple
-      ? this.selectionModel.map(o => o.value)
-      : this.selectionModel[0].value;
+    return this.multiple ? this.selectionModel.map((o) => o.value) : this.selectionModel[0].value;
   }
 
   /**
@@ -788,18 +797,19 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
    **/
   fullWidth$ = new BehaviorSubject<boolean>(this.fullWidth);
 
-  constructor(@Inject(NB_DOCUMENT) protected document,
-              protected overlay: NbOverlayService,
-              protected hostRef: ElementRef<HTMLElement>,
-              protected positionBuilder: NbPositionBuilderService,
-              protected triggerStrategyBuilder: NbTriggerStrategyBuilderService,
-              protected cd: ChangeDetectorRef,
-              protected focusKeyManagerFactoryService: NbFocusKeyManagerFactoryService<NbOptionComponent>,
-              protected focusMonitor: NbFocusMonitor,
-              protected renderer: Renderer2,
-              protected zone: NgZone,
-              protected statusService: NbStatusService) {
-  }
+  constructor(
+    @Inject(NB_DOCUMENT) protected document,
+    protected overlay: NbOverlayService,
+    protected hostRef: ElementRef<HTMLElement>,
+    protected positionBuilder: NbPositionBuilderService,
+    protected triggerStrategyBuilder: NbTriggerStrategyBuilderService,
+    protected cd: ChangeDetectorRef,
+    protected focusKeyManagerFactoryService: NbFocusKeyManagerFactoryService<NbOptionComponent>,
+    protected focusMonitor: NbFocusMonitor,
+    protected renderer: Renderer2,
+    protected zone: NgZone,
+    protected statusService: NbStatusService,
+  ) {}
 
   /**
    * Determines is select hidden.
@@ -880,9 +890,11 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
     this.subscribeOnOptionClick();
 
     // TODO: #2254
-    this.zone.runOutsideAngular(() => setTimeout(() => {
-      this.renderer.addClass(this.hostRef.nativeElement, 'nb-transition');
-    }));
+    this.zone.runOutsideAngular(() =>
+      setTimeout(() => {
+        this.renderer.addClass(this.hostRef.nativeElement, 'nb-transition');
+      }),
+    );
   }
 
   ngOnDestroy() {
@@ -1001,7 +1013,7 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
    * */
   protected handleMultipleSelect(option: NbOptionComponent) {
     if (option.selected) {
-      this.selectionModel = this.selectionModel.filter(s => !this._compareWith(s.value, option.value));
+      this.selectionModel = this.selectionModel.filter((s) => !this._compareWith(s.value, option.value));
       option.deselect();
     } else {
       this.selectionModel.push(option);
@@ -1066,23 +1078,19 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
 
   protected subscribeOnTriggers() {
     this.triggerStrategy.show$.subscribe(() => this.show());
-    this.triggerStrategy.hide$
-      .pipe(filter(() => this.isOpen))
-      .subscribe(($event: Event) => {
-        this.hide();
-        if (!this.isClickedWithinComponent($event)) {
-          this.onTouched();
-        }
-      });
+    this.triggerStrategy.hide$.pipe(filter(() => this.isOpen)).subscribe(($event: Event) => {
+      this.hide();
+      if (!this.isClickedWithinComponent($event)) {
+        this.onTouched();
+      }
+    });
   }
 
   protected subscribeOnPositionChange() {
-    this.positionStrategy.positionChange
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((position: NbPosition) => {
-        this.overlayPosition = position;
-        this.cd.detectChanges();
-      });
+    this.positionStrategy.positionChange.pipe(takeUntil(this.destroy$)).subscribe((position: NbPosition) => {
+      this.overlayPosition = position;
+      this.cd.detectChanges();
+    });
   }
 
   protected subscribeOnOptionClick() {
@@ -1095,15 +1103,16 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
       .pipe(
         startWith(this.options),
         switchMap((options: QueryList<NbOptionComponent>) => {
-          return merge(...options.map(option => option.click));
+          return merge(...options.map((option) => option.click));
         }),
         takeUntil(this.destroy$),
       )
       .subscribe((clickedOption: NbOptionComponent) => this.handleOptionClick(clickedOption));
   }
 
   protected subscribeOnOverlayKeys(): void {
-    this.ref.keydownEvents()
+    this.ref
+      .keydownEvents()
       .pipe(
         filter(() => this.isOpen),
         takeUntil(this.destroy$),
@@ -1117,30 +1126,33 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
         }
       });
 
-    this.keyManager.tabOut
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(() => {
-        this.hide();
-        this.onTouched();
-      });
+    this.keyManager.tabOut.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.hide();
+      this.onTouched();
+    });
   }
 
   protected subscribeOnButtonFocus() {
-    this.focusMonitor.monitor(this.button)
+    this.focusMonitor
+      .monitor(this.button)
       .pipe(
-        map(origin => !!origin),
+        map((origin) => !!origin),
         finalize(() => this.focusMonitor.stopMonitoring(this.button)),
         takeUntil(this.destroy$),
       )
       .subscribe(this.focused$);
   }
 
   protected getContainer() {
-    return this.ref && this.ref.hasAttached() && <ComponentRef<any>> {
-      location: {
-        nativeElement: this.ref.overlayElement,
-      },
-    };
+    return (
+      this.ref &&
+      this.ref.hasAttached() &&
+      <ComponentRef<any>>{
+        location: {
+          nativeElement: this.ref.overlayElement,
+        },
+      }
+    );
   }
 
   /**
@@ -1165,17 +1177,17 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
     const isArray: boolean = Array.isArray(safeValue);
 
     if (this.multiple && !isArray && !isResetValue) {
-      throw new Error('Can\'t assign single value if select is marked as multiple');
+      throw new Error("Can't assign single value if select is marked as multiple");
     }
     if (!this.multiple && isArray) {
-      throw new Error('Can\'t assign array if select is not marked as multiple');
+      throw new Error("Can't assign array if select is not marked as multiple");
     }
 
     const previouslySelectedOptions = this.selectionModel;
     this.selectionModel = [];
 
     if (this.multiple) {
-      safeValue.forEach(option => this.selectValue(option));
+      safeValue.forEach((option) => this.selectValue(option));
     } else {
       this.selectValue(safeValue);
     }