From 8a36a5d5381f6918075ef8768f96a4d686828c7a Mon Sep 17 00:00:00 2001 From: splincode Date: Tue, 17 Sep 2024 13:42:37 +0300 Subject: [PATCH 1/2] fix(legacy): during serialization angular was unable to find an element in the DOM --- projects/legacy/components/arrow/arrow.component.ts | 1 + .../color-selector/color-edit/color-edit.component.ts | 3 +++ .../color-selector/color-picker/color-picker.component.ts | 3 +++ .../components/color-selector/color-selector.component.ts | 3 +++ .../color-selector/flat-picker/flat-picker.component.ts | 3 +++ .../linear-multi-picker/linear-multi-picker.component.ts | 1 + .../color-selector/linear-picker/linear-picker.component.ts | 3 +++ .../components/color-selector/palette/palette.component.ts | 3 +++ projects/legacy/components/combo-box/combo-box.component.ts | 1 + .../legacy/components/input-color/input-color.component.ts | 1 + projects/legacy/components/input-copy/input-copy.component.ts | 1 + .../components/input-date-multi/input-date-multi.component.ts | 1 + .../components/input-date-range/input-date-range.component.ts | 1 + .../components/input-date-time/input-date-time.component.ts | 1 + projects/legacy/components/input-date/input-date.component.ts | 1 + .../input-month-range/input-month-range.component.ts | 1 + .../legacy/components/input-month/input-month.component.ts | 1 + .../legacy/components/input-number/input-number.component.ts | 1 + .../components/input-password/input-password.component.ts | 1 + .../input-phone-international.component.ts | 1 + .../legacy/components/input-phone/input-phone.component.ts | 1 + .../legacy/components/input-range/input-range.component.ts | 1 + .../legacy/components/input-slider/input-slider.component.ts | 1 + projects/legacy/components/input-tag/input-tag.component.ts | 1 + projects/legacy/components/input-time/input-time.component.ts | 1 + .../components/input-time/native-time/native-time.component.ts | 1 + projects/legacy/components/input-year/input-year.component.ts | 1 + projects/legacy/components/input/input.component.ts | 1 + .../multi-select-option/multi-select-option.component.ts | 3 +++ .../multi-select-group/multi-select-group.component.ts | 1 + .../legacy/components/multi-select/multi-select.component.ts | 1 + .../native-multi-select/native-multi-select-group.component.ts | 1 + .../native-multi-select/native-multi-select.component.ts | 1 + .../primitive-textfield/primitive-textfield.component.ts | 1 + .../primitive-textfield/textfield/textfield.component.ts | 1 + .../value-decoration/value-decoration.component.ts | 1 + .../legacy/components/select-option/select-option.component.ts | 3 +++ .../select/native-select/native-select-group.component.ts | 1 + .../components/select/native-select/native-select.component.ts | 1 + projects/legacy/components/select/select.component.ts | 1 + .../sheet/components/sheet-bar/sheet-bar.component.ts | 3 +++ .../sheet/components/sheet-heading/sheet-heading.component.ts | 3 +++ .../components/sheet/components/sheet/sheet.component.ts | 1 + .../sheet/components/sheets-host/sheets-host.component.ts | 3 +++ projects/legacy/components/svg/svg.component.ts | 3 +++ projects/legacy/components/table-bar/table-bar.component.ts | 1 + .../legacy/components/table-bar/table-bars-host.component.ts | 3 +++ projects/legacy/components/tag/tag.component.ts | 1 + projects/legacy/components/textarea/textarea.component.ts | 1 + projects/legacy/components/tooltip/tooltip.component.ts | 1 + 50 files changed, 76 insertions(+) diff --git a/projects/legacy/components/arrow/arrow.component.ts b/projects/legacy/components/arrow/arrow.component.ts index 198d217b54b0..e01a98c6ed64 100644 --- a/projects/legacy/components/arrow/arrow.component.ts +++ b/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', }, diff --git a/projects/legacy/components/color-selector/color-edit/color-edit.component.ts b/projects/legacy/components/color-selector/color-edit/color-edit.component.ts index d9f56db54748..8b9a222812a6 100644 --- a/projects/legacy/components/color-selector/color-edit/color-edit.component.ts +++ b/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() diff --git a/projects/legacy/components/color-selector/color-picker/color-picker.component.ts b/projects/legacy/components/color-selector/color-picker/color-picker.component.ts index dadb3f485f80..82b2e713147e 100644 --- a/projects/legacy/components/color-selector/color-picker/color-picker.component.ts +++ b/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); diff --git a/projects/legacy/components/color-selector/color-selector.component.ts b/projects/legacy/components/color-selector/color-selector.component.ts index f27df313dec3..c759f96d873e 100644 --- a/projects/legacy/components/color-selector/color-selector.component.ts +++ b/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); diff --git a/projects/legacy/components/color-selector/flat-picker/flat-picker.component.ts b/projects/legacy/components/color-selector/flat-picker/flat-picker.component.ts index 623210560fbb..5184ceaef387 100644 --- a/projects/legacy/components/color-selector/flat-picker/flat-picker.component.ts +++ b/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 { @Input() diff --git a/projects/legacy/components/color-selector/linear-multi-picker/linear-multi-picker.component.ts b/projects/legacy/components/color-selector/linear-multi-picker/linear-multi-picker.component.ts index 4973e9864bea..9bde15df17bf 100644 --- a/projects/legacy/components/color-selector/linear-multi-picker/linear-multi-picker.component.ts +++ b/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()', }, }) diff --git a/projects/legacy/components/color-selector/linear-picker/linear-picker.component.ts b/projects/legacy/components/color-selector/linear-picker/linear-picker.component.ts index a95a73c6ca6e..1a535d508c1c 100644 --- a/projects/legacy/components/color-selector/linear-picker/linear-picker.component.ts +++ b/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 { @Input() diff --git a/projects/legacy/components/color-selector/palette/palette.component.ts b/projects/legacy/components/color-selector/palette/palette.component.ts index d59ec3649ffc..06765310e7fe 100644 --- a/projects/legacy/components/color-selector/palette/palette.component.ts +++ b/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() diff --git a/projects/legacy/components/combo-box/combo-box.component.ts b/projects/legacy/components/combo-box/combo-box.component.ts index ae24822c09c6..aac3048023af 100644 --- a/projects/legacy/components/combo-box/combo-box.component.ts +++ b/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', }, }) diff --git a/projects/legacy/components/input-color/input-color.component.ts b/projects/legacy/components/input-color/input-color.component.ts index ecc834c93e67..86019256a56d 100644 --- a/projects/legacy/components/input-color/input-color.component.ts +++ b/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()', }, }) diff --git a/projects/legacy/components/input-copy/input-copy.component.ts b/projects/legacy/components/input-copy/input-copy.component.ts index cb1f12b57d80..f38714bd17c5 100644 --- a/projects/legacy/components/input-copy/input-copy.component.ts +++ b/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', }, }) diff --git a/projects/legacy/components/input-date-multi/input-date-multi.component.ts b/projects/legacy/components/input-date-multi/input-date-multi.component.ts index 7debfe86aaff..b45ac87e415d 100644 --- a/projects/legacy/components/input-date-multi/input-date-multi.component.ts +++ b/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()', diff --git a/projects/legacy/components/input-date-range/input-date-range.component.ts b/projects/legacy/components/input-date-range/input-date-range.component.ts index d68e4fcd533d..28b4c2924aae 100644 --- a/projects/legacy/components/input-date-range/input-date-range.component.ts +++ b/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()', }, diff --git a/projects/legacy/components/input-date-time/input-date-time.component.ts b/projects/legacy/components/input-date-time/input-date-time.component.ts index 73041919526d..8e5e1926e1fe 100644 --- a/projects/legacy/components/input-date-time/input-date-time.component.ts +++ b/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()', }, diff --git a/projects/legacy/components/input-date/input-date.component.ts b/projects/legacy/components/input-date/input-date.component.ts index 54ed21a20a6a..d82d94802803 100644 --- a/projects/legacy/components/input-date/input-date.component.ts +++ b/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()', }, diff --git a/projects/legacy/components/input-month-range/input-month-range.component.ts b/projects/legacy/components/input-month-range/input-month-range.component.ts index 25243ae2a607..f8f3dbc8cf09 100644 --- a/projects/legacy/components/input-month-range/input-month-range.component.ts +++ b/projects/legacy/components/input-month-range/input-month-range.component.ts @@ -36,6 +36,7 @@ import { TuiMonthPipe, ], host: { + ngSkipHydration: 'true', '[attr.data-size]': 'size', }, }) diff --git a/projects/legacy/components/input-month/input-month.component.ts b/projects/legacy/components/input-month/input-month.component.ts index 805c374943c7..e6fa26dd0387 100644 --- a/projects/legacy/components/input-month/input-month.component.ts +++ b/projects/legacy/components/input-month/input-month.component.ts @@ -37,6 +37,7 @@ import { TuiMonthPipe, ], host: { + ngSkipHydration: 'true', '[attr.data-size]': 'size', }, }) diff --git a/projects/legacy/components/input-number/input-number.component.ts b/projects/legacy/components/input-number/input-number.component.ts index b6431c41801c..5d4342264300 100644 --- a/projects/legacy/components/input-number/input-number.component.ts +++ b/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)', diff --git a/projects/legacy/components/input-password/input-password.component.ts b/projects/legacy/components/input-password/input-password.component.ts index 2f0b0eabce11..d7d162545035 100644 --- a/projects/legacy/components/input-password/input-password.component.ts +++ b/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', }, }) 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..cd8c479c98d7 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 @@ -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)', diff --git a/projects/legacy/components/input-phone/input-phone.component.ts b/projects/legacy/components/input-phone/input-phone.component.ts index c0eddd6366fc..737829ae8d76 100644 --- a/projects/legacy/components/input-phone/input-phone.component.ts +++ b/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', }, }) diff --git a/projects/legacy/components/input-range/input-range.component.ts b/projects/legacy/components/input-range/input-range.component.ts index 9a74985d75c3..cf1900410c73 100644 --- a/projects/legacy/components/input-range/input-range.component.ts +++ b/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', }, diff --git a/projects/legacy/components/input-slider/input-slider.component.ts b/projects/legacy/components/input-slider/input-slider.component.ts index f62bdeab1440..242f0b9e069d 100644 --- a/projects/legacy/components/input-slider/input-slider.component.ts +++ b/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', }, diff --git a/projects/legacy/components/input-tag/input-tag.component.ts b/projects/legacy/components/input-tag/input-tag.component.ts index 41e82ab7327c..c6849f1c8887 100644 --- a/projects/legacy/components/input-tag/input-tag.component.ts +++ b/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', diff --git a/projects/legacy/components/input-time/input-time.component.ts b/projects/legacy/components/input-time/input-time.component.ts index 9c871541e6b6..5da46c4b9455 100644 --- a/projects/legacy/components/input-time/input-time.component.ts +++ b/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', }, diff --git a/projects/legacy/components/input-time/native-time/native-time.component.ts b/projects/legacy/components/input-time/native-time/native-time.component.ts index de1fc08a24cb..397860ab7d64 100644 --- a/projects/legacy/components/input-time/native-time/native-time.component.ts +++ b/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', diff --git a/projects/legacy/components/input-year/input-year.component.ts b/projects/legacy/components/input-year/input-year.component.ts index a7c2848881cb..20a1540581ba 100644 --- a/projects/legacy/components/input-year/input-year.component.ts +++ b/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', }, }) diff --git a/projects/legacy/components/input/input.component.ts b/projects/legacy/components/input/input.component.ts index e9fbad0a2c34..2926d6303063 100644 --- a/projects/legacy/components/input/input.component.ts +++ b/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', }, }) diff --git a/projects/legacy/components/multi-select-option/multi-select-option.component.ts b/projects/legacy/components/multi-select-option/multi-select-option.component.ts index a6c97e5d3092..d039e16c4cd6 100644 --- a/projects/legacy/components/multi-select-option/multi-select-option.component.ts +++ b/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[], diff --git a/projects/legacy/components/multi-select/multi-select-group/multi-select-group.component.ts b/projects/legacy/components/multi-select/multi-select-group/multi-select-group.component.ts index be8d7bd1f465..3100feba8cf5 100644 --- a/projects/legacy/components/multi-select/multi-select-group/multi-select-group.component.ts +++ b/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', }, }) diff --git a/projects/legacy/components/multi-select/multi-select.component.ts b/projects/legacy/components/multi-select/multi-select.component.ts index 732b5de9de41..1fe9acffaee0 100644 --- a/projects/legacy/components/multi-select/multi-select.component.ts +++ b/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', diff --git a/projects/legacy/components/multi-select/native-multi-select/native-multi-select-group.component.ts b/projects/legacy/components/multi-select/native-multi-select/native-multi-select-group.component.ts index 4c9775021bc1..653fc3c08046 100644 --- a/projects/legacy/components/multi-select/native-multi-select/native-multi-select-group.component.ts +++ b/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', diff --git a/projects/legacy/components/multi-select/native-multi-select/native-multi-select.component.ts b/projects/legacy/components/multi-select/native-multi-select/native-multi-select.component.ts index f202a8288fcc..2105d611dbe4 100644 --- a/projects/legacy/components/multi-select/native-multi-select/native-multi-select.component.ts +++ b/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', diff --git a/projects/legacy/components/primitive-textfield/primitive-textfield.component.ts b/projects/legacy/components/primitive-textfield/primitive-textfield.component.ts index dafacd6d6fcd..690a2e8c7245 100644 --- a/projects/legacy/components/primitive-textfield/primitive-textfield.component.ts +++ b/projects/legacy/components/primitive-textfield/primitive-textfield.component.ts @@ -52,6 +52,7 @@ export const TUI_ICON_START_PADDINGS: Record = { TEXTFIELD_CONTROLLER_PROVIDER, ], host: { + ngSkipHydration: 'true', '[attr.data-size]': 'size', '[class._readonly]': 'readOnly', '[class._hidden]': 'inputHidden', diff --git a/projects/legacy/components/primitive-textfield/textfield/textfield.component.ts b/projects/legacy/components/primitive-textfield/textfield/textfield.component.ts index e3c03ea22a56..075d83ba318b 100644 --- a/projects/legacy/components/primitive-textfield/textfield/textfield.component.ts +++ b/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', diff --git a/projects/legacy/components/primitive-textfield/value-decoration/value-decoration.component.ts b/projects/legacy/components/primitive-textfield/value-decoration/value-decoration.component.ts index 2792c3d4f1f2..c2eeab56a7c4 100644 --- a/projects/legacy/components/primitive-textfield/value-decoration/value-decoration.component.ts +++ b/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()', diff --git a/projects/legacy/components/select-option/select-option.component.ts b/projects/legacy/components/select-option/select-option.component.ts index cee9ef2d55ef..2d35d8861973 100644 --- a/projects/legacy/components/select-option/select-option.component.ts +++ b/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 implements OnInit, DoCheck { private readonly host = inject>(TUI_DATA_LIST_HOST); diff --git a/projects/legacy/components/select/native-select/native-select-group.component.ts b/projects/legacy/components/select/native-select/native-select-group.component.ts index d0aa532b9917..1a25824a8039 100644 --- a/projects/legacy/components/select/native-select/native-select-group.component.ts +++ b/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', diff --git a/projects/legacy/components/select/native-select/native-select.component.ts b/projects/legacy/components/select/native-select/native-select.component.ts index 083ae9e23c98..9cc6da21af52 100644 --- a/projects/legacy/components/select/native-select/native-select.component.ts +++ b/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', diff --git a/projects/legacy/components/select/select.component.ts b/projects/legacy/components/select/select.component.ts index 5a13989fb5db..d43699612f4f 100644 --- a/projects/legacy/components/select/select.component.ts +++ b/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', }, }) diff --git a/projects/legacy/components/sheet/components/sheet-bar/sheet-bar.component.ts b/projects/legacy/components/sheet/components/sheet-bar/sheet-bar.component.ts index 77d2ac00071c..e3727651ae27 100644 --- a/projects/legacy/components/sheet/components/sheet-bar/sheet-bar.component.ts +++ b/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); diff --git a/projects/legacy/components/sheet/components/sheet-heading/sheet-heading.component.ts b/projects/legacy/components/sheet/components/sheet-heading/sheet-heading.component.ts index cb07f7e0b6ab..98238625d9af 100644 --- a/projects/legacy/components/sheet/components/sheet-heading/sheet-heading.component.ts +++ b/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(); diff --git a/projects/legacy/components/sheet/components/sheet/sheet.component.ts b/projects/legacy/components/sheet/components/sheet/sheet.component.ts index ac5bf1b7985f..2b48715d7576 100644 --- a/projects/legacy/components/sheet/components/sheet/sheet.component.ts +++ b/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', diff --git a/projects/legacy/components/sheet/components/sheets-host/sheets-host.component.ts b/projects/legacy/components/sheet/components/sheets-host/sheets-host.component.ts index 506dec8754b8..eab14681ed98 100644 --- a/projects/legacy/components/sheet/components/sheets-host/sheets-host.component.ts +++ b/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); diff --git a/projects/legacy/components/svg/svg.component.ts b/projects/legacy/components/svg/svg.component.ts index 6f1ccaf1a8d8..e5e2c1c0766d 100644 --- a/projects/legacy/components/svg/svg.component.ts +++ b/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 = ''; diff --git a/projects/legacy/components/table-bar/table-bar.component.ts b/projects/legacy/components/table-bar/table-bar.component.ts index 059299d32fea..1cb5b9c0126f 100644 --- a/projects/legacy/components/table-bar/table-bar.component.ts +++ b/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', }, diff --git a/projects/legacy/components/table-bar/table-bars-host.component.ts b/projects/legacy/components/table-bar/table-bars-host.component.ts index 38a585957a00..8577f30332f0 100644 --- a/projects/legacy/components/table-bar/table-bars-host.component.ts +++ b/projects/legacy/components/table-bar/table-bars-host.component.ts @@ -25,6 +25,9 @@ import {TUI_TABLE_BARS} from './table-bar.options'; styleUrls: ['./table-bars-host.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, animations: [tuiParentAnimation], + host: { + ngSkipHydration: 'true', + }, }) export class TuiTableBarsHostComponent { protected bars$ = inject(TUI_TABLE_BARS); diff --git a/projects/legacy/components/tag/tag.component.ts b/projects/legacy/components/tag/tag.component.ts index 39c283208d14..522ab0546acd 100644 --- a/projects/legacy/components/tag/tag.component.ts +++ b/projects/legacy/components/tag/tag.component.ts @@ -29,6 +29,7 @@ import {TUI_TAG_OPTIONS} from './tag.options'; styleUrls: ['./tag.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, host: { + ngSkipHydration: 'true', '[attr.data-size]': 'size', '[attr.data-status]': 'status', '[class._editing]': 'editing', diff --git a/projects/legacy/components/textarea/textarea.component.ts b/projects/legacy/components/textarea/textarea.component.ts index ccb013b085df..092ab74b359a 100644 --- a/projects/legacy/components/textarea/textarea.component.ts +++ b/projects/legacy/components/textarea/textarea.component.ts @@ -43,6 +43,7 @@ export const LINE_HEIGHT_L = 24; TEXTFIELD_CONTROLLER_PROVIDER, ], host: { + ngSkipHydration: 'true', '[attr.data-size]': 'size', '[class._ios]': 'isIOS', '[class._expandable]': 'expandable', diff --git a/projects/legacy/components/tooltip/tooltip.component.ts b/projects/legacy/components/tooltip/tooltip.component.ts index 73c4fda7fd9d..7bca7a320c8a 100644 --- a/projects/legacy/components/tooltip/tooltip.component.ts +++ b/projects/legacy/components/tooltip/tooltip.component.ts @@ -20,6 +20,7 @@ import {TuiHintHover, TuiHintOptionsDirective} from '@taiga-ui/core/directives/h changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['content', 'direction', 'appearance', 'showDelay', 'hideDelay'], host: { + ngSkipHydration: 'true', '[attr.data-appearance]': 'computedAppearance', '(mousedown)': 'stopOnMobile($event)', }, From a23a18c07f66ec369654146985aaae72ce5bbd90 Mon Sep 17 00:00:00 2001 From: taiga-family-bot Date: Tue, 17 Sep 2024 10:47:49 +0000 Subject: [PATCH 2/2] chore: apply changes after linting [bot] --- .../sheet/components/sheet-bar/sheet-bar.component.ts | 2 +- .../sheet/components/sheet-heading/sheet-heading.component.ts | 2 +- .../sheet/components/sheets-host/sheets-host.component.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/legacy/components/sheet/components/sheet-bar/sheet-bar.component.ts b/projects/legacy/components/sheet/components/sheet-bar/sheet-bar.component.ts index e3727651ae27..1fd21e954b2d 100644 --- a/projects/legacy/components/sheet/components/sheet-bar/sheet-bar.component.ts +++ b/projects/legacy/components/sheet/components/sheet-bar/sheet-bar.component.ts @@ -13,7 +13,7 @@ import {TUI_SHEET, TUI_SHEET_SCROLL} from '../../sheet-tokens'; changeDetection: ChangeDetectionStrategy.OnPush, host: { ngSkipHydration: 'true', - } + }, }) export class TuiSheetBarComponent { private readonly sheet = inject(TUI_SHEET); diff --git a/projects/legacy/components/sheet/components/sheet-heading/sheet-heading.component.ts b/projects/legacy/components/sheet/components/sheet-heading/sheet-heading.component.ts index 98238625d9af..932cf5654503 100644 --- a/projects/legacy/components/sheet/components/sheet-heading/sheet-heading.component.ts +++ b/projects/legacy/components/sheet/components/sheet-heading/sheet-heading.component.ts @@ -15,7 +15,7 @@ export const TUI_SHEET_ID = 'tui-sheet-id'; changeDetection: ChangeDetectionStrategy.OnPush, host: { ngSkipHydration: 'true', - } + }, }) export class TuiSheetHeadingComponent implements AfterViewInit { private readonly el = tuiInjectElement(); diff --git a/projects/legacy/components/sheet/components/sheets-host/sheets-host.component.ts b/projects/legacy/components/sheet/components/sheets-host/sheets-host.component.ts index eab14681ed98..04e14fc57348 100644 --- a/projects/legacy/components/sheet/components/sheets-host/sheets-host.component.ts +++ b/projects/legacy/components/sheet/components/sheets-host/sheets-host.component.ts @@ -25,7 +25,7 @@ import {TuiSheetService} from '../../sheet.service'; animations: [tuiSlideInTop, tuiFadeIn], host: { ngSkipHydration: 'true', - } + }, }) export class TuiSheetsHostComponent implements OnInit { private readonly service = inject(TuiSheetService);