diff --git a/projects/core/components/textfield/textfield.component.ts b/projects/core/components/textfield/textfield.component.ts index ba624786e2a8..6c8bf06b0eed 100644 --- a/projects/core/components/textfield/textfield.component.ts +++ b/projects/core/components/textfield/textfield.component.ts @@ -26,8 +26,8 @@ import {tuiAsDataListHost} from '@taiga-ui/core/components/data-list'; import {TuiLabel} from '@taiga-ui/core/components/label'; import { TuiDropdownDirective, + TuiDropdownFixed, tuiDropdownOpen, - tuiDropdownOptionsProvider, TuiWithDropdownOpen, } from '@taiga-ui/core/directives/dropdown'; import {TuiWithIcons} from '@taiga-ui/core/directives/icons'; @@ -48,11 +48,9 @@ import {TuiWithTextfieldDropdown} from './textfield-dropdown.directive'; styles: ['@import "@taiga-ui/core/styles/components/textfield.less";'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, - providers: [ - tuiAsDataListHost(TuiTextfieldComponent), - tuiDropdownOptionsProvider({limitWidth: 'fixed'}), - ], + providers: [tuiAsDataListHost(TuiTextfieldComponent)], hostDirectives: [ + TuiDropdownFixed, TuiDropdownDirective, TuiWithDropdownOpen, TuiWithTextfieldDropdown, diff --git a/projects/core/directives/dropdown/dropdown-fixed.directive.ts b/projects/core/directives/dropdown/dropdown-fixed.directive.ts new file mode 100644 index 000000000000..39438d3c55c5 --- /dev/null +++ b/projects/core/directives/dropdown/dropdown-fixed.directive.ts @@ -0,0 +1,23 @@ +import {Directive, inject} from '@angular/core'; +import {tuiOverrideOptions} from '@taiga-ui/core/utils/miscellaneous'; + +import { + TUI_DROPDOWN_DEFAULT_OPTIONS, + TUI_DROPDOWN_OPTIONS, + tuiDropdownOptionsProvider, +} from './dropdown-options.directive'; + +@Directive({ + standalone: true, + providers: [tuiDropdownOptionsProvider({})], +}) +export class TuiDropdownFixed { + constructor() { + const override = tuiOverrideOptions( + {limitWidth: 'fixed'}, + TUI_DROPDOWN_DEFAULT_OPTIONS, + ); + + override(inject(TUI_DROPDOWN_OPTIONS, {self: true, optional: true}), null); + } +} diff --git a/projects/core/directives/dropdown/index.ts b/projects/core/directives/dropdown/index.ts index b8d8363f2ccf..de7c6e2448b2 100644 --- a/projects/core/directives/dropdown/index.ts +++ b/projects/core/directives/dropdown/index.ts @@ -6,6 +6,7 @@ export * from './dropdown.driver'; export * from './dropdown.providers'; export * from './dropdown.service'; export * from './dropdown-context.directive'; +export * from './dropdown-fixed.directive'; export * from './dropdown-hover.directive'; export * from './dropdown-hover.options'; export * from './dropdown-manual.directive'; diff --git a/projects/demo/src/modules/components/textfield/examples/3/index.html b/projects/demo/src/modules/components/textfield/examples/3/index.html index 1b35ebdaabb5..c68fed79d370 100644 --- a/projects/demo/src/modules/components/textfield/examples/3/index.html +++ b/projects/demo/src/modules/components/textfield/examples/3/index.html @@ -25,3 +25,20 @@ [items]="items" /> + + + + + + + diff --git a/projects/demo/src/modules/components/textfield/examples/3/index.ts b/projects/demo/src/modules/components/textfield/examples/3/index.ts index 8eda5ffc9120..fa595617c4fa 100644 --- a/projects/demo/src/modules/components/textfield/examples/3/index.ts +++ b/projects/demo/src/modules/components/textfield/examples/3/index.ts @@ -2,7 +2,7 @@ import {Component, inject} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiIcon, TuiTextfield} from '@taiga-ui/core'; +import {TuiDropdownOptionsDirective, TuiIcon, TuiTextfield} from '@taiga-ui/core'; import { TuiChevron, TuiDataListWrapper, @@ -16,6 +16,7 @@ import { FormsModule, TuiChevron, TuiDataListWrapper, + TuiDropdownOptionsDirective, TuiFilterByInputPipe, TuiIcon, TuiTextfield, diff --git a/projects/legacy/components/combo-box/combo-box.component.ts b/projects/legacy/components/combo-box/combo-box.component.ts index ae24822c09c6..9920854addc3 100644 --- a/projects/legacy/components/combo-box/combo-box.component.ts +++ b/projects/legacy/components/combo-box/combo-box.component.ts @@ -24,7 +24,7 @@ import { tuiAsOptionContent, TuiDataListDirective, } from '@taiga-ui/core/components/data-list'; -import {TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown'; +import {TuiDropdownFixed, TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown'; import type { TuiSizeL, TuiSizeM, @@ -40,7 +40,6 @@ import {TUI_SELECT_OPTION} from '@taiga-ui/legacy/components/select-option'; import {TUI_TEXTFIELD_SIZE} from '@taiga-ui/legacy/directives'; import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens'; import {tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens'; -import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/legacy/utils'; import type {PolymorpheusContent} from '@taiga-ui/polymorpheus'; @Component({ @@ -55,7 +54,7 @@ import type {PolymorpheusContent} from '@taiga-ui/polymorpheus'; tuiAsControl(TuiComboBoxComponent), tuiAsOptionContent(TUI_SELECT_OPTION), ], - viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER], + hostDirectives: [TuiDropdownFixed], host: { '[attr.data-size]': 'size', }, diff --git a/projects/legacy/components/input-phone-international/input-phone-international.component.ts b/projects/legacy/components/input-phone-international/input-phone-international.component.ts index 34d4273b96ea..4cc58c8d8ebe 100644 --- a/projects/legacy/components/input-phone-international/input-phone-international.component.ts +++ b/projects/legacy/components/input-phone-international/input-phone-international.component.ts @@ -15,7 +15,7 @@ import {tuiPure} from '@taiga-ui/cdk/utils/miscellaneous'; import {TuiButton} from '@taiga-ui/core/components/button'; import {TuiDataList} from '@taiga-ui/core/components/data-list'; import {TuiAppearance} from '@taiga-ui/core/directives/appearance'; -import {TuiDropdown} from '@taiga-ui/core/directives/dropdown'; +import {TuiDropdown, TuiDropdownFixed} from '@taiga-ui/core/directives/dropdown'; import {TuiGroup} from '@taiga-ui/core/directives/group'; import {TuiHint} from '@taiga-ui/core/directives/hint'; import {TuiFlagPipe} from '@taiga-ui/core/pipes/flag'; @@ -40,11 +40,7 @@ import { import {TuiIsoToCountryCodePipe, TuiToCountryCodePipe} from '@taiga-ui/legacy/pipes'; import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens'; import {TUI_COUNTRIES_MASKS, tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens'; -import { - FIXED_DROPDOWN_CONTROLLER_PROVIDER, - tuiGetMaxAllowedPhoneLength, - tuiIsoToCountryCode, -} from '@taiga-ui/legacy/utils'; +import {tuiGetMaxAllowedPhoneLength, tuiIsoToCountryCode} from '@taiga-ui/legacy/utils'; import type {PolymorpheusContent} from '@taiga-ui/polymorpheus'; import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus'; @@ -87,7 +83,7 @@ const MASK_SYMBOLS = /[ \-_()]/g; tuiAsControl(TuiInputPhoneInternationalComponent), TuiToCountryCodePipe, ], - viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER], + hostDirectives: [TuiDropdownFixed], host: { '[attr.data-size]': 'size', '(paste.capture.prevent.stop)': 'onPaste($event)', diff --git a/projects/legacy/components/input-phone/input-phone.component.ts b/projects/legacy/components/input-phone/input-phone.component.ts index c0eddd6366fc..d1a53c8098fe 100644 --- a/projects/legacy/components/input-phone/input-phone.component.ts +++ b/projects/legacy/components/input-phone/input-phone.component.ts @@ -21,14 +21,13 @@ import { tuiAsDataListHost, TuiDataListDirective, } from '@taiga-ui/core/components/data-list'; -import {TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown'; +import {TuiDropdownFixed, TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown'; import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; import {AbstractTuiControl, tuiAsControl} from '@taiga-ui/legacy/classes'; import {TuiPrimitiveTextfieldComponent} from '@taiga-ui/legacy/components/primitive-textfield'; import {TUI_TEXTFIELD_CLEANER, TUI_TEXTFIELD_SIZE} from '@taiga-ui/legacy/directives'; import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens'; import {tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens'; -import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/legacy/utils'; import {TUI_INPUT_PHONE_OPTIONS} from './input-phone.options'; import { @@ -53,7 +52,7 @@ function isText(value: string): boolean { tuiAsControl(TuiInputPhoneComponent), tuiAsDataListHost(TuiInputPhoneComponent), ], - viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER], + hostDirectives: [TuiDropdownFixed], host: { '[attr.data-size]': 'size', }, diff --git a/projects/legacy/components/input-tag/input-tag.component.ts b/projects/legacy/components/input-tag/input-tag.component.ts index a0e8dbe1790f..94e37c4abdca 100644 --- a/projects/legacy/components/input-tag/input-tag.component.ts +++ b/projects/legacy/components/input-tag/input-tag.component.ts @@ -31,7 +31,7 @@ import { TuiDataListDirective, } from '@taiga-ui/core/components/data-list'; import {TuiScrollbar} from '@taiga-ui/core/components/scrollbar'; -import {TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown'; +import {TuiDropdownFixed, TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown'; import {TuiHintOptionsDirective} from '@taiga-ui/core/directives/hint'; import {TUI_COMMON_ICONS} from '@taiga-ui/core/tokens'; import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; @@ -44,7 +44,6 @@ import { import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens'; import {tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens'; import type {TuiStatus} from '@taiga-ui/legacy/utils'; -import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/legacy/utils'; import type {PolymorpheusContent} from '@taiga-ui/polymorpheus'; import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus'; import {timer} from 'rxjs'; @@ -75,7 +74,7 @@ const TAG_VERTICAL_SPACE_REM = 0.125; tuiAsDataListHost(TuiInputTagComponent), TEXTFIELD_CONTROLLER_PROVIDER, ], - viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER], + hostDirectives: [TuiDropdownFixed], host: { '[attr.data-size]': 'size', '[class._icon-start]': 'iconStart', diff --git a/projects/legacy/components/input-time/input-time.component.ts b/projects/legacy/components/input-time/input-time.component.ts index 9c871541e6b6..5ef16880288c 100644 --- a/projects/legacy/components/input-time/input-time.component.ts +++ b/projects/legacy/components/input-time/input-time.component.ts @@ -19,6 +19,7 @@ import {tuiIsNativeFocused} from '@taiga-ui/cdk/utils/focus'; import {tuiPure} from '@taiga-ui/cdk/utils/miscellaneous'; import type {TuiDataListHost} from '@taiga-ui/core/components/data-list'; import {tuiAsDataListHost, tuiAsOptionContent} from '@taiga-ui/core/components/data-list'; +import {TuiDropdownFixed} from '@taiga-ui/core/directives/dropdown'; import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; import {TUI_TIME_TEXTS, TUI_TIME_VALUE_TRANSFORMER} from '@taiga-ui/kit/tokens'; import {AbstractTuiNullableControl, tuiAsControl} from '@taiga-ui/legacy/classes'; @@ -27,7 +28,6 @@ import {TUI_SELECT_OPTION} from '@taiga-ui/legacy/components/select-option'; import {TUI_TEXTFIELD_SIZE} from '@taiga-ui/legacy/directives'; import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens'; import {tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens'; -import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/legacy/utils'; import type {Observable} from 'rxjs'; import {map, timer} from 'rxjs'; @@ -46,7 +46,7 @@ import {TUI_INPUT_TIME_OPTIONS} from './input-time.options'; tuiAsDataListHost(TuiInputTimeComponent), tuiAsOptionContent(TUI_SELECT_OPTION), ], - viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER], + hostDirectives: [TuiDropdownFixed], host: { '(click)': 'onClick()', '[attr.data-size]': 'size', diff --git a/projects/legacy/components/input/input.component.ts b/projects/legacy/components/input/input.component.ts index e9fbad0a2c34..330f107f7386 100644 --- a/projects/legacy/components/input/input.component.ts +++ b/projects/legacy/components/input/input.component.ts @@ -14,7 +14,7 @@ import { tuiAsDataListHost, TuiDataListDirective, } from '@taiga-ui/core/components/data-list'; -import {TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown'; +import {TuiDropdownFixed, TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown'; import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; import {AbstractTuiControl, tuiAsControl} from '@taiga-ui/legacy/classes'; import {TuiPrimitiveTextfieldComponent} from '@taiga-ui/legacy/components/primitive-textfield'; @@ -24,7 +24,6 @@ import { } from '@taiga-ui/legacy/directives'; import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens'; import {tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens'; -import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/legacy/utils'; import type {PolymorpheusContent} from '@taiga-ui/polymorpheus'; @Component({ @@ -39,7 +38,7 @@ import type {PolymorpheusContent} from '@taiga-ui/polymorpheus'; tuiAsDataListHost(TuiInputComponent), tuiAsControl(TuiInputComponent), ], - viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER], + viewProviders: [TuiDropdownFixed], host: { '[attr.data-size]': 'size', }, diff --git a/projects/legacy/components/multi-select/multi-select.component.ts b/projects/legacy/components/multi-select/multi-select.component.ts index 732b5de9de41..cca406be1f72 100644 --- a/projects/legacy/components/multi-select/multi-select.component.ts +++ b/projects/legacy/components/multi-select/multi-select.component.ts @@ -29,7 +29,7 @@ import { tuiAsDataListHost, TuiDataListDirective, } from '@taiga-ui/core/components/data-list'; -import {TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown'; +import {TuiDropdownFixed, TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown'; import type {TuiSizeL, TuiSizeM, TuiSizeS} from '@taiga-ui/core/types'; import type {TuiItemsHandlers} from '@taiga-ui/kit/tokens'; import {TUI_ITEMS_HANDLERS} from '@taiga-ui/kit/tokens'; @@ -46,7 +46,6 @@ import { } from '@taiga-ui/legacy/directives'; import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens'; import {tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens'; -import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/legacy/utils'; import type {PolymorpheusContent} from '@taiga-ui/polymorpheus'; import type {TuiMultiSelectOptions} from './multi-select.options'; @@ -65,7 +64,7 @@ import {AbstractTuiNativeMultiSelect} from './native-multi-select/native-multi-s tuiAsDataListHost(TuiMultiSelectComponent), TEXTFIELD_CONTROLLER_PROVIDER, ], - viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER], + hostDirectives: [TuiDropdownFixed], host: { '[attr.data-size]': 'size', '[class._editable]': 'editable', diff --git a/projects/legacy/components/select/select.component.ts b/projects/legacy/components/select/select.component.ts index 5a13989fb5db..3edf0ff91b08 100644 --- a/projects/legacy/components/select/select.component.ts +++ b/projects/legacy/components/select/select.component.ts @@ -17,7 +17,7 @@ import { tuiAsOptionContent, TuiDataListDirective, } from '@taiga-ui/core/components/data-list'; -import {TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown'; +import {TuiDropdownFixed, TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown'; import type { TuiSizeL, TuiSizeM, @@ -37,7 +37,6 @@ import {TUI_SELECT_OPTION} from '@taiga-ui/legacy/components/select-option'; import {TUI_TEXTFIELD_CLEANER, TUI_TEXTFIELD_SIZE} from '@taiga-ui/legacy/directives'; import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens'; import {tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens'; -import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/legacy/utils'; import type {PolymorpheusContent} from '@taiga-ui/polymorpheus'; import type {TuiSelectOptions} from './select.options'; @@ -55,7 +54,7 @@ import {TUI_SELECT_OPTIONS} from './select.options'; tuiAsDataListHost(TuiSelectComponent), tuiAsOptionContent(TUI_SELECT_OPTION), ], - viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER], + hostDirectives: [TuiDropdownFixed], host: { '[attr.data-size]': 'size', },