fix(legacy): during serialization angular was unable to find an eleme…

…nt in the DOM (#9063)

Co-authored-by: taiga-family-bot <[email protected]>

projects/legacy/components/arrow/arrow.component.ts

@@ -25,6 +25,7 @@ import {TUI_ARROW_OPTIONS} from './arrow.options';
     styleUrls: ['./arrow.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
+        ngSkipHydration: 'true',
         '[class._rotated]': 'rotated',
         '[class._small]': 'small',
     },

projects/legacy/components/color-selector/color-edit/color-edit.component.ts

@@ -16,6 +16,9 @@ const HEX_MODE_LENGTH = 6;
     templateUrl: './color-edit.template.html',
     styleUrls: ['./color-edit.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        ngSkipHydration: 'true',
+    },
 })
 export class TuiColorEditComponent {
     @Input()

projects/legacy/components/color-selector/color-picker/color-picker.component.ts

@@ -19,6 +19,9 @@ import type {TuiPoint} from '@taiga-ui/core/types';
     templateUrl: './color-picker.template.html',
     styleUrls: ['./color-picker.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        ngSkipHydration: 'true',
+    },
 })
 export class TuiColorPickerComponent {
     private readonly sanitizer = inject(DomSanitizer);

projects/legacy/components/color-selector/color-selector.component.ts

@@ -28,6 +28,9 @@ import {
     templateUrl: './color-selector.template.html',
     styleUrls: ['./color-selector.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        ngSkipHydration: 'true',
+    },
 })
 export class TuiColorSelectorComponent {
     private readonly selectorOptions = inject(TUI_COLOR_SELECTOR_OPTIONS);

projects/legacy/components/color-selector/flat-picker/flat-picker.component.ts

@@ -18,6 +18,9 @@ import {TuiPickerService} from '../services/picker.service';
     styleUrls: ['./flat-picker.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [TuiPickerService],
+    host: {
+        ngSkipHydration: 'true',
+    },
 })
 export class TuiFlatPickerComponent {
     protected readonly $ = inject(TuiPickerService)

projects/legacy/components/color-selector/linear-multi-picker/linear-multi-picker.component.ts

@@ -18,6 +18,7 @@ import {TuiPickerService} from '../services/picker.service';
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [TuiPickerService],
     host: {
+        ngSkipHydration: 'true',
         '(document:mouseup)': 'onMouseUp()',
     },
 })

projects/legacy/components/color-selector/linear-picker/linear-picker.component.ts

@@ -17,6 +17,9 @@ import {TuiPickerService} from '../services/picker.service';
     styleUrls: ['./linear-picker.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [TuiPickerService],
+    host: {
+        ngSkipHydration: 'true',
+    },
 })
 export class TuiLinearPickerComponent {
     protected readonly $ = inject(TuiPickerService)

projects/legacy/components/color-selector/palette/palette.component.ts

@@ -13,6 +13,9 @@ import {
     templateUrl: './palette.template.html',
     styleUrls: ['./palette.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        ngSkipHydration: 'true',
+    },
 })
 export class TuiPaletteComponent {
     @Input()

projects/legacy/components/combo-box/combo-box.component.ts

@@ -57,6 +57,7 @@ import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
     ],
     viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
     },
 })

projects/legacy/components/input-color/input-color.component.ts

@@ -32,6 +32,7 @@ type MaskMode = 'gradient' | 'hex' | 'rgb';
     changeDetection: ChangeDetectionStrategy.OnPush,
     viewProviders: [tuiDropdownOptionsProvider({maxHeight: 600})],
     host: {
+        ngSkipHydration: 'true',
         '(click)': 'onClick()',
     },
 })

projects/legacy/components/input-copy/input-copy.component.ts

@@ -43,6 +43,7 @@ import {TUI_INPUT_COPY_OPTIONS} from './input-copy.options';
         tuiAsControl(TuiInputCopyComponent),
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
     },
 })

projects/legacy/components/input-date-multi/input-date-multi.component.ts

@@ -57,6 +57,7 @@ import {map} from 'rxjs';
         TUI_MOBILE_CALENDAR_PROVIDER,
     ],
     host: {
+        ngSkipHydration: 'true',
         '[class._editable]': 'editable',
         '[attr.data-size]': 'size',
         '(click)': 'onClick()',

projects/legacy/components/input-date-range/input-date-range.component.ts

@@ -69,6 +69,7 @@ import {map} from 'rxjs';
         TUI_MOBILE_CALENDAR_PROVIDER,
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
         '(click)': 'onClick()',
     },

projects/legacy/components/input-date-time/input-date-time.component.ts

@@ -61,6 +61,7 @@ const DATE_TIME_SEPARATOR = ', ';
         tuiDateStreamWithTransformer(TUI_DATE_TIME_VALUE_TRANSFORMER),
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
         '(click)': 'onClick()',
     },

projects/legacy/components/input-date/input-date.component.ts

@@ -67,6 +67,7 @@ import {map} from 'rxjs';
         TUI_MOBILE_CALENDAR_PROVIDER,
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
         '(click)': 'onClick()',
     },

projects/legacy/components/input-month-range/input-month-range.component.ts

@@ -36,6 +36,7 @@ import {
         TuiMonthPipe,
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
     },
 })

projects/legacy/components/input-month/input-month.component.ts

@@ -37,6 +37,7 @@ import {
         TuiMonthPipe,
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
     },
 })

projects/legacy/components/input-number/input-number.component.ts

@@ -57,6 +57,7 @@ export const TUI_NUMBER_VALUE_TRANSFORMER = new InjectionToken<
         TEXTFIELD_CONTROLLER_PROVIDER,
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
         '(keydown.arrowDown)': 'onArrow(-step)',
         '(keydown.arrowUp)': 'onArrow(step)',

projects/legacy/components/input-password/input-password.component.ts

@@ -31,6 +31,7 @@ import {TUI_INPUT_PASSWORD_OPTIONS} from './input-password.options';
         tuiAsControl(TuiInputPasswordComponent),
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
     },
 })

projects/legacy/components/input-phone-international/input-phone-international.component.ts

@@ -89,6 +89,7 @@ const MASK_SYMBOLS = /[ \-_()]/g;
     ],
     viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
         '(paste.capture.prevent.stop)': 'onPaste($event)',
         '(drop.capture.prevent.stop)': 'onPaste($event)',

projects/legacy/components/input-phone/input-phone.component.ts

@@ -55,6 +55,7 @@ function isText(value: string): boolean {
     ],
     viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
     },
 })

projects/legacy/components/input-range/input-range.component.ts

@@ -48,6 +48,7 @@ import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
         TEXTFIELD_CONTROLLER_PROVIDER,
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'controller.size',
         '[class._label-outside]': 'controller.labelOutside',
     },

projects/legacy/components/input-slider/input-slider.component.ts

@@ -43,6 +43,7 @@ import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
         TEXTFIELD_CONTROLLER_PROVIDER,
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'controller.size',
         '[class._label-outside]': 'controller.labelOutside',
     },

projects/legacy/components/input-tag/input-tag.component.ts

@@ -76,6 +76,7 @@ const TAG_VERTICAL_SPACE_REM = 0.125;
     ],
     viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
         '[class._icon-start]': 'iconStart',
         '[class._expandable]': 'expandable',

projects/legacy/components/input-time/input-time.component.ts

@@ -48,6 +48,7 @@ import {TUI_INPUT_TIME_OPTIONS} from './input-time.options';
     ],
     viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
     host: {
+        ngSkipHydration: 'true',
         '(click)': 'onClick()',
         '[attr.data-size]': 'size',
     },

projects/legacy/components/input-time/native-time/native-time.component.ts

@@ -21,6 +21,7 @@ import type {TuiInputTimeDirective} from '../input-time.directive';
     styleUrls: ['./native-time.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
+        ngSkipHydration: 'true',
         type: 'time',
         '[attr.list]': 'autoId',
         '[tabIndex]': '-1',

projects/legacy/components/input-year/input-year.component.ts

@@ -33,6 +33,7 @@ const UP_TO_4_DIGITS_REG = /^\d{0,4}$/;
         tuiAsControl(TuiInputYearComponent),
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
     },
 })

projects/legacy/components/input/input.component.ts

@@ -41,6 +41,7 @@ import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
     ],
     viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
     },
 })

projects/legacy/components/multi-select-option/multi-select-option.component.ts

@@ -9,6 +9,9 @@ import {TuiSelectOptionComponent} from '@taiga-ui/legacy/components/select-optio
     templateUrl: './multi-select-option.template.html',
     styleUrls: ['./multi-select-option.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        ngSkipHydration: 'true',
+    },
 })
 export class TuiMultiSelectOptionComponent<
     T extends any[],

projects/legacy/components/multi-select/multi-select-group/multi-select-group.component.ts

@@ -28,6 +28,7 @@ import {combineLatest, map} from 'rxjs';
     styleUrls: ['./multi-select-group.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
+        ngSkipHydration: 'true',
         '[class._label]': 'label',
     },
 })

projects/legacy/components/multi-select/multi-select.component.ts

@@ -67,6 +67,7 @@ import {AbstractTuiNativeMultiSelect} from './native-multi-select/native-multi-s
     ],
     viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
         '[class._editable]': 'editable',
         '[class._expandable]': 'rows > 1',

projects/legacy/components/multi-select/native-multi-select/native-multi-select-group.component.ts

@@ -21,6 +21,7 @@ import {AbstractTuiNativeMultiSelect} from './native-multi-select';
         },
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.aria-invalid]': 'host.invalid',
         '[disabled]': 'host.disabled || control.readOnly',
         '[tabIndex]': 'host.focusable ? 0 : -1',

projects/legacy/components/multi-select/native-multi-select/native-multi-select.component.ts

@@ -20,6 +20,7 @@ import {AbstractTuiNativeMultiSelect} from './native-multi-select';
         },
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.aria-invalid]': 'host.invalid',
         '[disabled]': 'host.disabled || control.readOnly',
         '[tabIndex]': 'host.focusable ? 0 : -1',

projects/legacy/components/primitive-textfield/primitive-textfield.component.ts

@@ -52,6 +52,7 @@ export const TUI_ICON_START_PADDINGS: Record<TuiSizeL | TuiSizeS, number> = {
         TEXTFIELD_CONTROLLER_PROVIDER,
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
         '[class._readonly]': 'readOnly',
         '[class._hidden]': 'inputHidden',

projects/legacy/components/primitive-textfield/textfield/textfield.component.ts

@@ -16,6 +16,7 @@ import {TUI_TEXTFIELD_HOST} from '@taiga-ui/legacy/tokens';
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [TEXTFIELD_CONTROLLER_PROVIDER],
     host: {
+        ngSkipHydration: 'true',
         type: 'text',
         '[attr.id]': 'id',
         '[attr.inputMode]': 'inputMode',

projects/legacy/components/primitive-textfield/value-decoration/value-decoration.component.ts

@@ -20,6 +20,7 @@ import type {TuiPrimitiveTextfield} from '../primitive-textfield-types';
     // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
     changeDetection: ChangeDetectionStrategy.Default,
     host: {
+        ngSkipHydration: 'true',
         '[class._table]': 'isContextTable',
         '[class._filler]': 'filler',
         '(animationstart)': 'ngDoCheck()',

projects/legacy/components/select-option/select-option.component.ts

@@ -23,6 +23,9 @@ import {distinctUntilChanged, EMPTY, map, merge, startWith, Subject} from 'rxjs'
     templateUrl: './select-option.template.html',
     styleUrls: ['./select-option.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        ngSkipHydration: 'true',
+    },
 })
 export class TuiSelectOptionComponent<T> implements OnInit, DoCheck {
     private readonly host = inject<TuiDataListHost<T>>(TUI_DATA_LIST_HOST);

projects/legacy/components/select/native-select/native-select-group.component.ts

@@ -22,6 +22,7 @@ import type {TuiSelectDirective} from '../select.directive';
         },
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.aria-invalid]': 'host.invalid',
         '[disabled]': 'host.disabled || control.readOnly',
         '[tabIndex]': 'host.focusable ? 0 : -1',

projects/legacy/components/select/native-select/native-select.component.ts

@@ -22,6 +22,7 @@ import type {TuiSelectDirective} from '../select.directive';
         },
     ],
     host: {
+        ngSkipHydration: 'true',
         '[attr.aria-invalid]': 'host.invalid',
         '[disabled]': 'host.disabled || control.readOnly',
         '[tabIndex]': 'host.focusable ? 0 : -1',

projects/legacy/components/select/select.component.ts

@@ -57,6 +57,7 @@ import {TUI_SELECT_OPTIONS} from './select.options';
     ],
     viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
     host: {
+        ngSkipHydration: 'true',
         '[attr.data-size]': 'size',
     },
 })

projects/legacy/components/sheet/components/sheet-bar/sheet-bar.component.ts

@@ -11,6 +11,9 @@ import {TUI_SHEET, TUI_SHEET_SCROLL} from '../../sheet-tokens';
     templateUrl: './sheet-bar.template.html',
     styleUrls: ['./sheet-bar.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        ngSkipHydration: 'true',
+    },
 })
 export class TuiSheetBarComponent {
     private readonly sheet = inject(TUI_SHEET);

projects/legacy/components/sheet/components/sheet-heading/sheet-heading.component.ts

@@ -13,6 +13,9 @@ export const TUI_SHEET_ID = 'tui-sheet-id';
     templateUrl: './sheet-heading.template.html',
     styleUrls: ['./sheet-heading.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        ngSkipHydration: 'true',
+    },
 })
 export class TuiSheetHeadingComponent implements AfterViewInit {
     private readonly el = tuiInjectElement();

projects/legacy/components/sheet/components/sheet/sheet.component.ts

@@ -33,6 +33,7 @@ import {TUI_SHEET_PROVIDERS} from './sheet.providers';
     providers: TUI_SHEET_PROVIDERS,
     animations: [tuiSlideInTop],
     host: {
+        ngSkipHydration: 'true',
         role: 'dialog',
         '[attr.aria-labelledby]': 'id',
         '[class._ios]': 'isIos',

projects/legacy/components/sheet/components/sheets-host/sheets-host.component.ts

@@ -23,6 +23,9 @@ import {TuiSheetService} from '../../sheet.service';
     styleUrls: ['./sheets-host.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     animations: [tuiSlideInTop, tuiFadeIn],
+    host: {
+        ngSkipHydration: 'true',
+    },
 })
 export class TuiSheetsHostComponent implements OnInit {
     private readonly service = inject(TuiSheetService);

projects/legacy/components/svg/svg.component.ts

@@ -49,6 +49,9 @@ export interface TuiIconError {
     templateUrl: './svg.template.html',
     styleUrls: ['./svg.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        ngSkipHydration: 'true',
+    },
 })
 export class TuiSvgComponent {
     private icon: TuiSafeHtml = '';

projects/legacy/components/table-bar/table-bar.component.ts

@@ -30,6 +30,7 @@ import type {TuiTableBarOptions} from './table-bar.options';
     changeDetection: ChangeDetectionStrategy.OnPush,
     animations: [tuiSlideInTop, tuiParentAnimation],
     host: {
+        ngSkipHydration: 'true',
         '[@tuiSlideInTop]': 'animation',
         '[attr.data-appearance]': 'context.mode',
     },