From 1f9be1334421d6c967f3af5eb919b5613bff42ba Mon Sep 17 00:00:00 2001 From: kolyaevtikhovich Date: Mon, 13 Sep 2021 14:15:17 +0300 Subject: [PATCH 1/6] feat(select): ability to override width --- src/framework/theme/components/select/select.component.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 33dc6ec41c..8ea5135904 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -554,6 +554,11 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent * */ @Input() optionsPanelClass: string | string[]; + /** + * Specifies width to be set on `nb-option`s container (`nb-option-list`) + * */ + @Input() optionsWidth: number; + /** * Adds `outline` styles */ @@ -812,7 +817,7 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent * Returns width of the select button. * */ get hostWidth(): number { - return this.button.nativeElement.getBoundingClientRect().width; + return this.optionsWidth ?? this.button.nativeElement.getBoundingClientRect().width; } get selectButtonClasses(): string[] { From db185e35866ba8e3454526a2749e28ab0fa7722c Mon Sep 17 00:00:00 2001 From: kolyaevtikhovich Date: Mon, 13 Sep 2021 17:13:31 +0300 Subject: [PATCH 2/6] fix(select): hostWidth method --- .../theme/components/select/select.component.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 8ea5135904..0628959a71 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -557,7 +557,13 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent /** * Specifies width to be set on `nb-option`s container (`nb-option-list`) * */ - @Input() optionsWidth: number; + @Input() + get optionsWidth(): number { + return this._optionsWidth ?? this.hostWidth; + } + set optionsWidth(value: number) { + this._optionsWidth = value; + } /** * Adds `outline` styles @@ -755,6 +761,8 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent protected keyManager: NbFocusKeyManager; + private _optionsWidth: number | undefined; + /** * If a user assigns value before content nb-options's rendered the value will be putted in this variable. * And then applied after content rendered. @@ -817,7 +825,7 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent * Returns width of the select button. * */ get hostWidth(): number { - return this.optionsWidth ?? this.button.nativeElement.getBoundingClientRect().width; + return this.button.nativeElement.getBoundingClientRect().width; } get selectButtonClasses(): string[] { From c066250d7c788811142e5e25d3bdc27766e56710 Mon Sep 17 00:00:00 2001 From: kolyaevtikhovich Date: Mon, 13 Sep 2021 17:16:35 +0300 Subject: [PATCH 3/6] feat(select): optionsWidth --- src/framework/theme/components/select/select.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/framework/theme/components/select/select.component.html b/src/framework/theme/components/select/select.component.html index 680ea0d3d7..cc20b42b1f 100644 --- a/src/framework/theme/components/select/select.component.html +++ b/src/framework/theme/components/select/select.component.html @@ -21,6 +21,6 @@ - + From fd306dfa6c00a02099e278f266b0cabe606c3cd1 Mon Sep 17 00:00:00 2001 From: kolyaevtikhovich Date: Mon, 13 Sep 2021 19:01:04 +0300 Subject: [PATCH 4/6] feat(autocomplete): optionsWidth --- .../autocomplete/autocomplete.component.html | 2 +- .../autocomplete/autocomplete.component.ts | 13 +++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/framework/theme/components/autocomplete/autocomplete.component.html b/src/framework/theme/components/autocomplete/autocomplete.component.html index d871b037db..2abd94df28 100644 --- a/src/framework/theme/components/autocomplete/autocomplete.component.html +++ b/src/framework/theme/components/autocomplete/autocomplete.component.html @@ -1,7 +1,7 @@ implements AfterContentInit, OnDestroy { */ _overlayPosition: NbPosition = '' as NbPosition; + private _optionsWidth: number | undefined; + get overlayPosition(): NbPosition { return this._overlayPosition; } @@ -106,6 +108,17 @@ export class NbAutocompleteComponent implements AfterContentInit, OnDestroy { * */ @Input() optionsPanelClass: string | string[]; + /** + * Specifies width 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; + } + /** * Will be emitted when selected value changes. * */ From 59eb2f2850bfbdd18e0f67f2d4f5b09b7c6060d2 Mon Sep 17 00:00:00 2001 From: kolyaevtikhovich Date: Tue, 14 Sep 2021 19:35:51 +0300 Subject: [PATCH 5/6] style(autocomplete): optionsWidth --- .../theme/components/autocomplete/autocomplete.component.ts | 3 +-- src/framework/theme/components/select/select.component.ts | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/framework/theme/components/autocomplete/autocomplete.component.ts b/src/framework/theme/components/autocomplete/autocomplete.component.ts index 6a2e1b5afa..e05919803c 100644 --- a/src/framework/theme/components/autocomplete/autocomplete.component.ts +++ b/src/framework/theme/components/autocomplete/autocomplete.component.ts @@ -63,8 +63,6 @@ export class NbAutocompleteComponent implements AfterContentInit, OnDestroy { */ _overlayPosition: NbPosition = '' as NbPosition; - private _optionsWidth: number | undefined; - get overlayPosition(): NbPosition { return this._overlayPosition; } @@ -118,6 +116,7 @@ export class NbAutocompleteComponent implements AfterContentInit, OnDestroy { set optionsWidth(value: number) { this._optionsWidth = value; } + protected _optionsWidth: number | undefined; /** * Will be emitted when selected value changes. diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 0628959a71..1c9b4bd30f 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -564,6 +564,7 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent set optionsWidth(value: number) { this._optionsWidth = value; } + protected _optionsWidth: number | undefined; /** * Adds `outline` styles @@ -761,8 +762,6 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent protected keyManager: NbFocusKeyManager; - private _optionsWidth: number | undefined; - /** * If a user assigns value before content nb-options's rendered the value will be putted in this variable. * And then applied after content rendered. From 86b60ba7b5e56d25e0cfbedcd0786c9a99e9b913 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 8 Nov 2021 13:48:23 +0300 Subject: [PATCH 6/6] docs: clarify units --- .../autocomplete/autocomplete.component.ts | 15 +-- .../components/select/select.component.ts | 114 +++++++++--------- 2 files changed, 62 insertions(+), 67 deletions(-) diff --git a/src/framework/theme/components/autocomplete/autocomplete.component.ts b/src/framework/theme/components/autocomplete/autocomplete.component.ts index e05919803c..d733634d55 100644 --- a/src/framework/theme/components/autocomplete/autocomplete.component.ts +++ b/src/framework/theme/components/autocomplete/autocomplete.component.ts @@ -42,7 +42,6 @@ let lastAutocompleteId: number = 0; changeDetection: ChangeDetectionStrategy.OnPush, }) export class NbAutocompleteComponent implements AfterContentInit, OnDestroy { - protected destroy$: Subject = new Subject(); /** @@ -55,7 +54,6 @@ export class NbAutocompleteComponent 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 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: @@ -107,7 +105,7 @@ export class NbAutocompleteComponent implements AfterContentInit, OnDestroy { @Input() optionsPanelClass: string | string[]; /** - * Specifies width to be set on `nb-option`s container (`nb-option-list`) + * Specifies width (in pixels) to be set on `nb-option`s container (`nb-option-list`) * */ @Input() get optionsWidth(): number { @@ -124,8 +122,8 @@ export class NbAutocompleteComponent implements AfterContentInit, OnDestroy { @Output() selectedChange: EventEmitter = new EventEmitter(); /** - * List of `NbOptionComponent`'s components passed as content. - * */ + * List of `NbOptionComponent`'s components passed as content. + * */ @ContentChildren(NbOptionComponent, { descendants: true }) options: QueryList>; /** @@ -136,9 +134,7 @@ export class NbAutocompleteComponent 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() { @@ -181,5 +177,4 @@ export class NbAutocompleteComponent implements AfterContentInit, OnDestroy { get giant(): boolean { return this.size === 'giant'; } - } diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 06a0cf3a61..fa4753e7b0 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -63,8 +63,7 @@ export type NbSelectAppearance = 'outline' | 'filled' | 'hero'; selector: 'nb-select-label', template: '', }) -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` @@ -555,7 +554,7 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent @Input() optionsPanelClass: string | string[]; /** - * Specifies width to be set on `nb-option`s container (`nb-option-list`) + * Specifies width (in pixels) to be set on `nb-option`s container (`nb-option-list`) * */ @Input() get optionsWidth(): number { @@ -672,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; } /** @@ -800,18 +797,19 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent **/ fullWidth$ = new BehaviorSubject(this.fullWidth); - constructor(@Inject(NB_DOCUMENT) protected document, - protected overlay: NbOverlayService, - protected hostRef: ElementRef, - protected positionBuilder: NbPositionBuilderService, - protected triggerStrategyBuilder: NbTriggerStrategyBuilderService, - protected cd: ChangeDetectorRef, - protected focusKeyManagerFactoryService: NbFocusKeyManagerFactoryService, - protected focusMonitor: NbFocusMonitor, - protected renderer: Renderer2, - protected zone: NgZone, - protected statusService: NbStatusService) { - } + constructor( + @Inject(NB_DOCUMENT) protected document, + protected overlay: NbOverlayService, + protected hostRef: ElementRef, + protected positionBuilder: NbPositionBuilderService, + protected triggerStrategyBuilder: NbTriggerStrategyBuilderService, + protected cd: ChangeDetectorRef, + protected focusKeyManagerFactoryService: NbFocusKeyManagerFactoryService, + protected focusMonitor: NbFocusMonitor, + protected renderer: Renderer2, + protected zone: NgZone, + protected statusService: NbStatusService, + ) {} /** * Determines is select hidden. @@ -892,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() { @@ -1013,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); @@ -1078,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() { @@ -1107,7 +1103,7 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent .pipe( startWith(this.options), switchMap((options: QueryList) => { - return merge(...options.map(option => option.click)); + return merge(...options.map((option) => option.click)); }), takeUntil(this.destroy$), ) @@ -1115,7 +1111,8 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent } protected subscribeOnOverlayKeys(): void { - this.ref.keydownEvents() + this.ref + .keydownEvents() .pipe( filter(() => this.isOpen), takeUntil(this.destroy$), @@ -1129,18 +1126,17 @@ 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$), ) @@ -1148,11 +1144,15 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent } protected getContainer() { - return this.ref && this.ref.hasAttached() && > { - location: { - nativeElement: this.ref.overlayElement, - }, - }; + return ( + this.ref && + this.ref.hasAttached() && + >{ + location: { + nativeElement: this.ref.overlayElement, + }, + } + ); } /** @@ -1177,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); }