diff --git a/.cspell.json b/.cspell.json index a0f99167dd00..cfbdc7d7445f 100644 --- a/.cspell.json +++ b/.cspell.json @@ -3,7 +3,7 @@ "import": ["@taiga-ui/cspell-config/cspell.config.js"], "files": ["*/*.*"], "ignorePaths": ["**/projects/i18n/languages/**", "**/addon-commerce/utils/get-currency-symbol.ts"], - "ignoreWords": ["Wachovia", "bottomsheet", "appbar", "qwertypgj_", "antialiasing"], + "ignoreWords": ["Wachovia", "bottomsheet", "appbar", "qwertypgj_", "antialiasing", "xxxs"], "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"], "overrides": [ { diff --git a/projects/cdk/utils/di/create-options.ts b/projects/cdk/utils/di/create-options.ts index d2f84baa356f..86525cefc7d9 100644 --- a/projects/cdk/utils/di/create-options.ts +++ b/projects/cdk/utils/di/create-options.ts @@ -1,9 +1,12 @@ -import type {FactoryProvider, InjectionToken} from '@angular/core'; +import type {FactoryProvider, InjectionToken, ProviderToken} from '@angular/core'; import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous'; export function tuiCreateOptions( defaults: T, -): [token: InjectionToken, provider: (item: Partial) => FactoryProvider] { +): [ + token: InjectionToken, + provider: (item: Partial | ProviderToken>) => FactoryProvider, +] { const token = tuiCreateToken(defaults); return [token, (options) => tuiProvideOptions(token, options, defaults)]; diff --git a/projects/cdk/utils/miscellaneous/provide-options.ts b/projects/cdk/utils/miscellaneous/provide-options.ts index 9dd009236edf..32c7d3493c49 100644 --- a/projects/cdk/utils/miscellaneous/provide-options.ts +++ b/projects/cdk/utils/miscellaneous/provide-options.ts @@ -1,16 +1,16 @@ -import type {FactoryProvider, InjectionToken} from '@angular/core'; +import type {FactoryProvider, InjectionToken, ProviderToken} from '@angular/core'; import {inject} from '@angular/core'; export function tuiProvideOptions( provide: InjectionToken, - options: Partial, + options: Partial | ProviderToken>, fallback: T, ): FactoryProvider { return { provide, useFactory: (): T => ({ ...(inject(provide, {optional: true, skipSelf: true}) || fallback), - ...options, + ...(inject(options as any, {optional: true}) || options), }), }; } diff --git a/projects/core/components/button/button.options.ts b/projects/core/components/button/button.options.ts index 2d390e343baf..3a18fa46fd19 100644 --- a/projects/core/components/button/button.options.ts +++ b/projects/core/components/button/button.options.ts @@ -1,5 +1,4 @@ -import type {FactoryProvider} from '@angular/core'; -import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous'; +import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di'; import type {TuiAppearanceOptions} from '@taiga-ui/core/directives/appearance'; import type {TuiSizeXL, TuiSizeXS} from '@taiga-ui/core/types'; @@ -12,10 +11,6 @@ export const TUI_BUTTON_DEFAULT_OPTIONS: TuiButtonOptions = { size: 'l', }; -export const TUI_BUTTON_OPTIONS = tuiCreateToken(TUI_BUTTON_DEFAULT_OPTIONS); - -export function tuiButtonOptionsProvider( - options: Partial, -): FactoryProvider { - return tuiProvideOptions(TUI_BUTTON_OPTIONS, options, TUI_BUTTON_DEFAULT_OPTIONS); -} +export const [TUI_BUTTON_OPTIONS, tuiButtonOptionsProvider] = tuiCreateOptions( + TUI_BUTTON_DEFAULT_OPTIONS, +); diff --git a/projects/core/components/notification/notification.options.ts b/projects/core/components/notification/notification.options.ts index 16a6364d4725..53c94c4add50 100644 --- a/projects/core/components/notification/notification.options.ts +++ b/projects/core/components/notification/notification.options.ts @@ -1,6 +1,5 @@ -import type {Provider} from '@angular/core'; import type {TuiStringHandler} from '@taiga-ui/cdk/types'; -import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous'; +import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di'; import type {TuiAppearanceOptions} from '@taiga-ui/core/directives/appearance'; import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; @@ -31,14 +30,5 @@ export const TUI_NOTIFICATION_DEFAULT_OPTIONS: TuiNotificationOptions = { /** * Default parameters for notification alert component */ -export const TUI_NOTIFICATION_OPTIONS = tuiCreateToken(TUI_NOTIFICATION_DEFAULT_OPTIONS); - -export function tuiNotificationOptionsProvider( - options: Partial, -): Provider { - return tuiProvideOptions( - TUI_NOTIFICATION_OPTIONS, - options, - TUI_NOTIFICATION_DEFAULT_OPTIONS, - ); -} +export const [TUI_NOTIFICATION_OPTIONS, tuiNotificationOptionsProvider] = + tuiCreateOptions(TUI_NOTIFICATION_DEFAULT_OPTIONS); diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 389bcf09f238..e07ad4f1c191 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -324,6 +324,11 @@ export const ROUTES: Routes = [ loadComponent: async () => import('../components/input-color'), title: 'InputColor', }), + route({ + path: DemoRoute.FormLayout, + loadComponent: async () => import('../components/form'), + title: 'Form', + }), route({ path: DemoRoute.Group, loadComponent: async () => import('../components/group'), @@ -746,7 +751,7 @@ export const ROUTES: Routes = [ route({ path: DemoRoute.Form, loadComponent: async () => import('../markup/form'), - title: 'Form', + title: 'Form ', }), route({ path: DemoRoute.Lists, diff --git a/projects/demo/src/modules/app/demo-routes.ts b/projects/demo/src/modules/app/demo-routes.ts index 37daefbb4124..e056dd65fac4 100644 --- a/projects/demo/src/modules/app/demo-routes.ts +++ b/projects/demo/src/modules/app/demo-routes.ts @@ -59,6 +59,7 @@ export const DemoRoute = { Expand: '/components/expand', ElasticContainer: '/components/elastic-container', FieldError: '/pipes/field-error', + FormLayout: '/components/form', InputFiles: '/components/input-files', InputColor: '/components/input-color', Group: '/components/group', diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index 8e67d539d559..d978607349e5 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -421,6 +421,12 @@ export const pages: DocRoutePages = [ keywords: 'фильтр, filters', route: DemoRoute.Filter, }, + { + section: 'Components', + title: 'Form', + keywords: 'форма, поле, кнопка, группировка, группа', + route: DemoRoute.FormLayout, + }, { section: 'Components', title: 'Group', diff --git a/projects/demo/src/modules/components/form/examples/1/index.html b/projects/demo/src/modules/components/form/examples/1/index.html new file mode 100644 index 000000000000..797ebade1f2f --- /dev/null +++ b/projects/demo/src/modules/components/form/examples/1/index.html @@ -0,0 +1,87 @@ +
+
+

+ Registration form + Tell us about yourself +

+ + + + + + +
+ +

+ Authenticity required + Please be honest and use your real data +

+ + + + + + + + + + + + + +
+ + +
+ diff --git a/projects/demo/src/modules/components/form/examples/1/index.ts b/projects/demo/src/modules/components/form/examples/1/index.ts new file mode 100644 index 000000000000..40db010e17c5 --- /dev/null +++ b/projects/demo/src/modules/components/form/examples/1/index.ts @@ -0,0 +1,50 @@ +import {AsyncPipe, NgIf} from '@angular/common'; +import {Component} from '@angular/core'; +import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; +import { + TuiAppearance, + TuiButton, + TuiError, + TuiIcon, + TuiNotification, + TuiTextfield, + TuiTitle, +} from '@taiga-ui/core'; +import {TuiFieldErrorPipe, TuiSegmented, TuiSwitch, TuiTooltip} from '@taiga-ui/kit'; +import {TuiCardLarge, TuiForm, TuiHeader} from '@taiga-ui/layout'; + +@Component({ + standalone: true, + imports: [ + AsyncPipe, + NgIf, + ReactiveFormsModule, + TuiAppearance, + TuiButton, + TuiCardLarge, + TuiError, + TuiFieldErrorPipe, + TuiForm, + TuiHeader, + TuiIcon, + TuiNotification, + TuiSegmented, + TuiSwitch, + TuiTextfield, + TuiTitle, + TuiTooltip, + ], + templateUrl: './index.html', + encapsulation, + changeDetection, +}) +export default class Example { + protected readonly form = new FormGroup({ + name: new FormControl('', Validators.required), + email: new FormControl(''), + subscribe: new FormControl(false), + basic: new FormControl(true), + }); +} diff --git a/projects/demo/src/modules/components/form/examples/import/import.md b/projects/demo/src/modules/components/form/examples/import/import.md new file mode 100644 index 000000000000..dd65e0b7cd0c --- /dev/null +++ b/projects/demo/src/modules/components/form/examples/import/import.md @@ -0,0 +1,18 @@ +```ts +import {TuiAppearance} from '@taiga-ui/core'; +import {TuiCardLarge, TuiForm} from '@taiga-ui/layout'; + +// ... + +@Component({ + standalone: true, + imports: [ + // ... + TuiCardLarge, + TuiAppearance, + TuiForm, + ], + // ... +}) +export class Example {} +``` diff --git a/projects/demo/src/modules/components/form/examples/import/template.md b/projects/demo/src/modules/components/form/examples/import/template.md new file mode 100644 index 000000000000..b2a7f6fb927c --- /dev/null +++ b/projects/demo/src/modules/components/form/examples/import/template.md @@ -0,0 +1,9 @@ +```html +
+ +
+``` diff --git a/projects/demo/src/modules/components/form/index.html b/projects/demo/src/modules/components/form/index.html new file mode 100644 index 000000000000..6bddac439cfe --- /dev/null +++ b/projects/demo/src/modules/components/form/index.html @@ -0,0 +1,24 @@ + + + Size sets DI options, therefore it only works for static values like + tuiForm="m" + . If you need dynamic binding for the size, you would have to set it for buttons, segmented control and header + manually as well. + + + + + + + diff --git a/projects/demo/src/modules/components/form/index.less b/projects/demo/src/modules/components/form/index.less new file mode 100644 index 000000000000..b7cd891b0b2b --- /dev/null +++ b/projects/demo/src/modules/components/form/index.less @@ -0,0 +1,3 @@ +.bar { + block-size: 6.25rem; +} diff --git a/projects/demo/src/modules/components/form/index.ts b/projects/demo/src/modules/components/form/index.ts new file mode 100644 index 000000000000..8d7fbeb20e2c --- /dev/null +++ b/projects/demo/src/modules/components/form/index.ts @@ -0,0 +1,14 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiDemo} from '@demo/utils'; + +@Component({ + standalone: true, + imports: [TuiDemo], + templateUrl: './index.html', + styleUrls: ['./index.less'], + changeDetection, +}) +export default class Page { + protected readonly examples = ['Basic']; +} diff --git a/projects/demo/src/modules/components/navigation/examples/1/index.html b/projects/demo/src/modules/components/navigation/examples/1/index.html index fcc07b263026..febbb7ceee88 100644 --- a/projects/demo/src/modules/components/navigation/examples/1/index.html +++ b/projects/demo/src/modules/components/navigation/examples/1/index.html @@ -299,16 +299,54 @@ Primary -
-

- Some random content - A subtitle -

-
+ +
+
+

+ Registration form + Tell us about yourself +

+
+ + + + +
+ + +
+
+
+

+ Sidebar content + Use CSS grid to position +

+
+ diff --git a/projects/demo/src/modules/components/navigation/examples/1/index.ts b/projects/demo/src/modules/components/navigation/examples/1/index.ts index bb67455a4743..2a1d486ef0fa 100644 --- a/projects/demo/src/modules/components/navigation/examples/1/index.ts +++ b/projects/demo/src/modules/components/navigation/examples/1/index.ts @@ -13,6 +13,7 @@ import { TuiDropdown, TuiDropdownService, TuiIcon, + TuiTextfield, TuiTitle, } from '@taiga-ui/core'; import { @@ -25,7 +26,7 @@ import { TuiSwitch, TuiTabs, } from '@taiga-ui/kit'; -import {TuiCardLarge, TuiHeader, TuiNavigation} from '@taiga-ui/layout'; +import {TuiCardLarge, TuiForm, TuiHeader, TuiNavigation} from '@taiga-ui/layout'; const ICON = "data:image/svg+xml,%0A%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' rx='8' fill='url(%23paint0_linear_2036_35276)'/%3E%3Cmask id='mask0_2036_35276' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='6' y='5' width='20' height='21'%3E%3Cpath d='M18.2399 9.36607C21.1347 10.1198 24.1992 9.8808 26 7.4922C26 7.4922 21.5645 5 16.4267 5C11.2888 5 5.36726 8.69838 6.05472 16.6053C6.38707 20.4279 6.65839 23.7948 6.65839 23.7948C8.53323 22.1406 9.03427 19.4433 8.97983 16.9435C8.93228 14.7598 9.55448 12.1668 12.1847 10.4112C14.376 8.94865 16.4651 8.90397 18.2399 9.36607Z' fill='url(%23paint1_linear_2036_35276)'/%3E%3Cpath d='M11.3171 20.2647C9.8683 17.1579 10.7756 11.0789 16.4267 11.0789C20.4829 11.0789 23.1891 12.8651 22.9447 18.9072C22.9177 19.575 22.9904 20.2455 23.2203 20.873C23.7584 22.3414 24.7159 24.8946 24.7159 24.8946C23.6673 24.5452 22.8325 23.7408 22.4445 22.7058L21.4002 19.921L21.2662 19.3848C21.0202 18.4008 20.136 17.7104 19.1217 17.7104H17.5319L17.6659 18.2466C17.9119 19.2306 18.7961 19.921 19.8104 19.921L22.0258 26H10.4754C10.7774 24.7006 12.0788 23.2368 11.3171 20.2647Z' fill='url(%23paint2_linear_2036_35276)'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2036_35276)'%3E%3Crect x='4' y='4' width='24' height='24' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2036_35276' x1='0' y1='0' x2='32' y2='32' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23A681D4'/%3E%3Cstop offset='1' stop-color='%237D31D4'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_2036_35276' x1='6.0545' y1='24.3421' x2='28.8119' y2='3.82775' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.0001' stop-opacity='0.996458'/%3E%3Cstop offset='0.317708'/%3E%3Cstop offset='1' stop-opacity='0.32'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_2036_35276' x1='6.0545' y1='24.3421' x2='28.8119' y2='3.82775' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.0001' stop-opacity='0.996458'/%3E%3Cstop offset='0.317708'/%3E%3Cstop offset='1' stop-opacity='0.32'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A"; @@ -49,12 +50,14 @@ const ICON = TuiDataListDropdownManager, TuiDropdown, TuiFade, + TuiForm, TuiHeader, TuiIcon, TuiNavigation, TuiRepeatTimes, TuiSwitch, TuiTabs, + TuiTextfield, TuiTitle, ], templateUrl: './index.html', diff --git a/projects/kit/components/segmented/segmented.component.ts b/projects/kit/components/segmented/segmented.component.ts index 9302e6a9c990..d05d8b76f055 100644 --- a/projects/kit/components/segmented/segmented.component.ts +++ b/projects/kit/components/segmented/segmented.component.ts @@ -11,6 +11,7 @@ import { import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {ResizeObserverService} from '@ng-web-apis/resize-observer'; import {tuiZonefree} from '@taiga-ui/cdk/observables'; +import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di'; import {tuiInjectElement, tuiIsHTMLElement} from '@taiga-ui/cdk/utils/dom'; import {tuiPx} from '@taiga-ui/cdk/utils/miscellaneous'; import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; @@ -18,6 +19,10 @@ import {tuiBadgeNotificationOptionsProvider} from '@taiga-ui/kit/components/badg import {TuiSegmentedDirective} from './segmented.directive'; +export const [TUI_SEGMENTED_OPTIONS, tuiSegmentedOptionsProvider] = tuiCreateOptions({ + size: 's' as TuiSizeL | TuiSizeS, +}); + @Component({ standalone: true, selector: 'tui-segmented', @@ -39,7 +44,7 @@ export class TuiSegmented implements OnChanges { .subscribe(() => this.refresh()); @Input() - public size: TuiSizeL | TuiSizeS = 's'; + public size: TuiSizeL | TuiSizeS = inject(TUI_SEGMENTED_OPTIONS).size; @Input() public activeItemIndex = 0; diff --git a/projects/layout/components/card/card.styles.less b/projects/layout/components/card/card.styles.less index b55c5176a060..9df6c5272e1d 100644 --- a/projects/layout/components/card/card.styles.less +++ b/projects/layout/components/card/card.styles.less @@ -73,7 +73,7 @@ --t-space: 1.25rem; } - &:not([tuiCell], [tuiHeader]) { + &:not([tuiCell], [tuiHeader], [tuiForm]) { flex-direction: column; gap: var(--t-space); align-items: stretch; diff --git a/projects/layout/components/form/form.directive.ts b/projects/layout/components/form/form.directive.ts new file mode 100644 index 000000000000..ed777416db99 --- /dev/null +++ b/projects/layout/components/form/form.directive.ts @@ -0,0 +1,81 @@ +import type {InjectionToken, Provider} from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + Directive, + inject, + Input, + ViewEncapsulation, +} from '@angular/core'; +import type {TuiStringHandler} from '@taiga-ui/cdk/types'; +import {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous'; +import {tuiButtonOptionsProvider} from '@taiga-ui/core/components/button'; +import {tuiNotificationOptionsProvider} from '@taiga-ui/core/components/notification'; +import {TuiTextfieldOptionsDirective} from '@taiga-ui/core/components/textfield'; +import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; +import {TUI_SEGMENTED_OPTIONS} from '@taiga-ui/kit/components/segmented'; +import {TUI_SWITCH_OPTIONS} from '@taiga-ui/kit/components/switch'; +import {TUI_HEADER_OPTIONS} from '@taiga-ui/layout/components/header'; + +const HEADER_SIZE: Record = { + s: 'xxxs', + m: 'xs', + l: 's', +}; + +@Component({ + standalone: true, + template: '', + styleUrls: ['./form.styles.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + class: 'tui-form', + }, +}) +class TuiFormStyles {} + +@Directive({ + standalone: true, + selector: '[tuiForm]', + providers: [ + tuiButtonOptionsProvider(TuiForm), + tuiNotificationOptionsProvider(TuiForm), + projectSize(TUI_HEADER_OPTIONS, (size) => HEADER_SIZE[size]!), + projectSize(TUI_SWITCH_OPTIONS, (size) => (size === 'l' ? 'm' : 's')), + projectSize(TUI_SEGMENTED_OPTIONS, (size) => (size === 'l' ? 'm' : 's')), + ], + hostDirectives: [ + { + directive: TuiTextfieldOptionsDirective, + inputs: [ + 'tuiTextfieldSize: tuiForm', + 'tuiTextfieldAppearance', + 'tuiTextfieldCleaner', + ], + }, + ], + host: { + tuiForm: '', + '[attr.data-size]': 'size', + }, +}) +export class TuiForm { + protected readonly nothing = tuiWithStyles(TuiFormStyles); + + @Input('tuiForm') + public size: TuiSizeL | TuiSizeS = 'l'; +} + +function projectSize( + provide: InjectionToken, + project: TuiStringHandler, +): Provider { + return { + provide, + useFactory: () => ({ + ...inject(provide, {skipSelf: true}), + size: project(inject(TuiForm).size), + }), + }; +} diff --git a/projects/layout/components/form/form.styles.less b/projects/layout/components/form/form.styles.less new file mode 100644 index 000000000000..ad50c74cee7e --- /dev/null +++ b/projects/layout/components/form/form.styles.less @@ -0,0 +1,63 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +[tuiForm] { + display: flex; + flex-direction: column; + align-items: stretch; + + &[data-size='s'] { + gap: 0.75rem; + font: var(--tui-font-text-s); + + tui-error { + margin-top: -0.75rem; + } + + [tuiHeader] { + padding-bottom: 0.5rem; + + [tuiSubtitle] { + font: var(--tui-font-text-ui-s); + } + } + } + + &[data-size='m'] { + gap: 1rem; + font: var(--tui-font-text-s); + + tui-error { + margin-top: -1rem; + } + } + + &[data-size='l'] { + gap: 1.25rem; + font: var(--tui-font-text-m); + + tui-error { + margin-top: -1.25rem; + } + } + + [tuiHeader] { + padding-bottom: 0.25rem; + } + + footer { + display: flex; + gap: 0.75rem; + margin-top: 0.25rem; + } + + [tuiLabel]:not([data-orientation='vertical']) { + font: inherit; + } + + &[data-size='s'], + &[data-size='m'] { + [tuiLabel]:not([data-orientation='vertical']) [tuiTooltip] { + block-size: 1.25rem; + } + } +} diff --git a/projects/layout/components/form/index.ts b/projects/layout/components/form/index.ts new file mode 100644 index 000000000000..0e186e8f6cea --- /dev/null +++ b/projects/layout/components/form/index.ts @@ -0,0 +1 @@ +export * from './form.directive'; diff --git a/projects/layout/components/form/ng-package.json b/projects/layout/components/form/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/layout/components/form/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/layout/components/header/header.directive.ts b/projects/layout/components/header/header.directive.ts index bb743e8badc5..a94f8884e4f8 100644 --- a/projects/layout/components/header/header.directive.ts +++ b/projects/layout/components/header/header.directive.ts @@ -2,15 +2,21 @@ import { ChangeDetectionStrategy, Component, Directive, + inject, Input, ViewEncapsulation, } from '@angular/core'; +import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di'; import {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous'; import {tuiButtonOptionsProvider} from '@taiga-ui/core/components/button'; import type {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core/types'; import {tuiAvatarOptionsProvider} from '@taiga-ui/kit/components/avatar'; import {tuiBadgeOptionsProvider} from '@taiga-ui/kit/components/badge'; +export const [TUI_HEADER_OPTIONS, tuiHeaderOptionsProvider] = tuiCreateOptions({ + size: 's' as TuiSizeXXL | TuiSizeXXS, +}); + @Component({ standalone: true, template: '', @@ -33,12 +39,13 @@ class TuiHeaderStyles {} ], host: { tuiHeader: '', - '[attr.data-size]': 'size || "s"', + '[attr.data-size]': 'size || options.size', }, }) export class TuiHeader { + protected readonly options = inject(TUI_HEADER_OPTIONS); protected readonly nothing = tuiWithStyles(TuiHeaderStyles); @Input('tuiHeader') - public size: TuiSizeXXL | TuiSizeXXS | '' = 's'; + public size: TuiSizeXXL | TuiSizeXXS | '' = ''; } diff --git a/projects/layout/components/index.ts b/projects/layout/components/index.ts index 63939d44f0a5..274f45e66e9e 100644 --- a/projects/layout/components/index.ts +++ b/projects/layout/components/index.ts @@ -3,6 +3,7 @@ export * from '@taiga-ui/layout/components/block-details'; export * from '@taiga-ui/layout/components/block-status'; export * from '@taiga-ui/layout/components/card'; export * from '@taiga-ui/layout/components/cell'; +export * from '@taiga-ui/layout/components/form'; export * from '@taiga-ui/layout/components/header'; export * from '@taiga-ui/layout/components/navigation'; export * from '@taiga-ui/layout/components/search'; diff --git a/projects/layout/components/navigation/main.style.less b/projects/layout/components/navigation/main.style.less index 8902ef048f1b..0f2a8532a0a3 100644 --- a/projects/layout/components/navigation/main.style.less +++ b/projects/layout/components/navigation/main.style.less @@ -5,6 +5,7 @@ main[tuiNavigationMain] { display: grid; grid-template-columns: repeat(12, minmax(0, 8.5625rem)); + align-items: start; gap: 0 1rem; justify-content: center; flex: 1;