Create & Integrate tuiContainer layout component

projects/demo/src/modules/components/multi-select/examples/9/index.html

@@ -33,7 +33,7 @@
     #template
     let-data="data"
 >
-    <div class="tui-container_fullwidth">
+    <div tuiContainer="fullwidth">
         <div class="tui-row tui-form__row_multi-fields tui-row_adaptive">
             <label class="tui-col_md-12">
                 Star Wars persons

projects/demo/src/modules/components/multi-select/examples/9/index.ts

@@ -5,6 +5,7 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 import type {TuiDialogContext, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {TuiButton, TuiDataList, TuiDialogService} from '@taiga-ui/core';
 import {TuiDataListWrapper} from '@taiga-ui/kit';
+import {TuiContainer} from '@taiga-ui/layout';
 import {TuiMultiSelectModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 
@@ -13,6 +14,7 @@ import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
     imports: [
         ReactiveFormsModule,
         TuiButton,
+        TuiContainer,
         TuiDataList,
         TuiDataListWrapper,
         TuiMultiSelectModule,

projects/demo/src/modules/markup/form/examples/1/index.html

@@ -1,4 +1,4 @@
-<div class="tui-container">
+<div tuiContainer>
     <div class="stepper">
         <tui-stepper [activeItemIndex]="0">
             <button

projects/demo/src/modules/markup/form/examples/1/index.ts

@@ -13,6 +13,7 @@ import {
     TuiRadio,
     TuiStepper,
 } from '@taiga-ui/kit';
+import {TuiContainer} from '@taiga-ui/layout';
 import {
     TuiInputDateModule,
     TuiInputModule,
@@ -55,6 +56,7 @@ class Account {
         TuiBlock,
         TuiButton,
         TuiCheckbox,
+        TuiContainer,
         TuiCurrencyPipe,
         TuiDataListWrapper,
         TuiError,

projects/layout/components/container/container.directive.ts

@@ -0,0 +1,35 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Directive,
+    Input,
+    ViewEncapsulation,
+} from '@angular/core';
+import {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';
+
+@Component({
+    standalone: true,
+    template: '',
+    styleUrls: ['./container.styles.less'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        class: 'tui-container',
+    },
+})
+class TuiContainerStyles {}
+
+@Directive({
+    standalone: true,
+    selector: '[tuiContainer]',
+    host: {
+        tuiContainer: '',
+        '[attr.data-type]': 'type',
+    },
+})
+export class TuiContainer {
+    protected readonly nothing = tuiWithStyles(TuiContainerStyles);
+
+    @Input({alias: 'tuiContainer', required: true})
+    public type!: '' | 'adaptive' | 'fixed' | 'fullwidth' | 'menu';
+}

projects/layout/components/container/container.styles.less

@@ -0,0 +1,63 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+[tuiContainer] {
+    margin-right: auto;
+    margin-left: auto;
+
+    &[data-type='adaptive'] {
+        @media @tui-desktop-lg-min {
+            inline-size: 69rem;
+        }
+
+        @media @tui-desktop {
+            inline-size: 51.5rem;
+        }
+
+        @media @tui-mobile {
+            inline-size: 100%;
+            padding: 0 1rem;
+            box-sizing: border-box;
+        }
+    }
+
+    @media @tui-desktop-lg-min {
+        inline-size: 69rem;
+    }
+
+    @media @tui-desktop {
+        inline-size: 51.5rem;
+        padding: 0 3rem;
+    }
+
+    &[data-type='menu'] {
+        @media @tui-desktop-lg-min {
+            inline-size: 69rem;
+        }
+
+        @media @tui-desktop-interval {
+            inline-size: 51.5rem;
+        }
+
+        @media @tui-mobile {
+            inline-size: auto;
+            padding: 0 1rem;
+            box-sizing: border-box;
+        }
+    }
+
+    &[data-type='fullwidth'] {
+        inline-size: auto;
+        padding: 0 1.5rem;
+
+        @media @tui-mobile {
+            padding: 0 1rem;
+            box-sizing: border-box;
+        }
+    }
+
+    &[data-type='fixed'] {
+        @media @tui-desktop {
+            inline-size: 69rem;
+        }
+    }
+}

projects/layout/components/container/index.ts

@@ -0,0 +1 @@
+export * from './container.directive';

projects/layout/components/container/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

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/container';
 export * from '@taiga-ui/layout/components/form';
 export * from '@taiga-ui/layout/components/header';
 export * from '@taiga-ui/layout/components/navigation';