From 647cc90aa5f826193b8c5f810b0c867776c32046 Mon Sep 17 00:00:00 2001
From: demensky <dmitry@demensky.com>
Date: Wed, 6 Dec 2023 10:27:09 +0200
Subject: [PATCH] docs(demo): display emission in `@Output` wherever possible

---
 ...umentation-property-connector.directive.ts | 22 +++++++++++++-
 .../inherited-documentation.component.ts      | 12 +++++++-
 .../inherited-documentation.template.html     |  1 +
 .../components/button/button.template.html    |  4 ++-
 .../calendar-month.component.ts               | 12 +-------
 .../calendar-month.template.html              |  3 +-
 .../components/calendar/calendar.component.ts | 17 ++---------
 .../calendar/calendar.template.html           |  3 +-
 .../checkbox-block.template.html              |  4 +++
 .../checkbox-labeled.template.html            |  4 +++
 .../checkbox/checkbox.template.html           |  4 +++
 .../combo-box/combo-box.template.html         |  6 +++-
 .../components/filter/filter.component.ts     | 13 ++-------
 .../components/filter/filter.template.html    |  3 +-
 .../input-card-grouped.component.ts           | 14 +--------
 .../input-card-grouped.template.html          |  6 ++--
 .../input-card/input-card.component.ts        | 29 ++++++++++---------
 .../input-card/input-card.template.html       |  8 +++--
 .../input-copy/input-copy.template.html       |  3 +-
 .../input-count/input-count.template.html     |  3 +-
 .../input-date-multi.template.html            |  6 +++-
 .../input-date-range.template.html            |  3 +-
 .../input-date-time.template.html             |  6 +++-
 .../input-date/input-date.template.html       |  6 +++-
 .../input-files/input-files.template.html     |  6 ++--
 .../input-month-range.template.html           |  3 +-
 .../input-month/input-month.template.html     |  3 +-
 .../input-number/input-number.template.html   |  3 +-
 .../input-password.template.html              |  3 +-
 .../input-phone-international.template.html   |  3 +-
 .../input-phone/input-phone.template.html     |  6 +++-
 .../input-slider/input-slider.template.html   |  3 +-
 .../input-tag/input-tag.template.html         |  6 +++-
 .../input-time/input-time.template.html       |  3 +-
 .../input-year/input-year.template.html       |  3 +-
 .../components/input/input.template.html      |  6 +++-
 .../line-clamp/line-clamp.template.html       |  2 ++
 .../mobile-calendar.template.html             |  4 +++
 .../multi-select/multi-select.template.html   |  6 +++-
 .../primitive-textfield.template.html         |  3 +-
 .../modules/components/push/push.component.ts | 11 +------
 .../components/push/push.template.html        |  3 +-
 .../radio-block/radio-block.template.html     |  4 +++
 .../radio-labeled/radio-labeled.template.html |  4 +++
 .../radio-list/radio-list.template.html       |  2 ++
 .../components/radio/radio.template.html      |  4 +++
 .../components/select/select.template.html    |  6 +++-
 .../modules/components/tag/tag.template.html  |  3 +-
 .../textarea/textarea.template.html           |  3 +-
 .../components/toggle/toggle.template.html    |  3 +-
 .../table-pagination.template.html            |  1 +
 51 files changed, 188 insertions(+), 111 deletions(-)

diff --git a/projects/addon-doc/components/documentation/documentation-property-connector.directive.ts b/projects/addon-doc/components/documentation/documentation-property-connector.directive.ts
index 5169f04f6a8f0..f2e45d439b1ef 100644
--- a/projects/addon-doc/components/documentation/documentation-property-connector.directive.ts
+++ b/projects/addon-doc/components/documentation/documentation-property-connector.directive.ts
@@ -13,6 +13,7 @@ import {ActivatedRoute, Params, UrlSerializer, UrlTree} from '@angular/router';
 import {TUI_DOC_URL_STATE_HANDLER} from '@taiga-ui/addon-doc/tokens';
 import {tuiCoerceValue} from '@taiga-ui/addon-doc/utils';
 import {tuiIsNumber, TuiStringHandler} from '@taiga-ui/cdk';
+import {TuiAlertService} from '@taiga-ui/core';
 import {BehaviorSubject, Subject} from 'rxjs';
 
 const SERIALIZED_SUFFIX = '$';
@@ -66,6 +67,7 @@ export class TuiDocDocumentationPropertyConnectorDirective<T>
         @Inject(UrlSerializer) private readonly urlSerializer: UrlSerializer,
         @Inject(TUI_DOC_URL_STATE_HANDLER)
         private readonly urlStateHandler: TuiStringHandler<UrlTree>,
+        @Inject(TuiAlertService) private readonly alerts: TuiAlertService,
     ) {}
 
     ngOnInit(): void {
@@ -103,11 +105,29 @@ export class TuiDocDocumentationPropertyConnectorDirective<T>
         this.setQueryParam(value);
     }
 
-    emitEvent(event: unknown): void {
+    emitEvent(event: unknown, showAlert = true): void {
         // For more convenient debugging
         console.info(this.attrName, event);
 
         this.emits$.next(this.emits$.value + 1);
+
+        if (!showAlert) {
+            return;
+        }
+
+        let content: string | undefined;
+
+        if (event !== undefined) {
+            content = String(event);
+
+            if (content === '[object Object]') {
+                try {
+                    content = JSON.stringify(event);
+                } catch {}
+            }
+        }
+
+        this.alerts.open(content, {label: this.attrName}).subscribe();
     }
 
     private parseParams(params: Params): void {
diff --git a/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts b/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts
index 19b2a3bed1d35..b257a2eeaeb3a 100644
--- a/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts
+++ b/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts
@@ -1,5 +1,6 @@
-import {Component, Inject, Input} from '@angular/core';
+import {Component, Inject, Input, ViewChild} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocDocumentationPropertyConnectorDirective} from '@taiga-ui/addon-doc';
 import {TUI_HINT_DIRECTIONS} from '@taiga-ui/core';
 
 import {AbstractExampleTuiControl} from '../control';
@@ -14,6 +15,11 @@ import {TuiSupportingDocumentationComponent} from './supporting-documentation-co
     changeDetection,
 })
 export class InheritedDocumentationComponent {
+    @ViewChild('documentationPropertyFocusedChange', {
+        read: TuiDocDocumentationPropertyConnectorDirective,
+    })
+    propertyFocusedChange?: TuiDocDocumentationPropertyConnectorDirective<unknown>;
+
     @Input()
     dropdown = false;
 
@@ -51,4 +57,8 @@ export class InheritedDocumentationComponent {
     ): documentedComponent is AbstractExampleTuiHint {
         return documentedComponent instanceof AbstractExampleTuiHint;
     }
+
+    emitFocusedChange(event: boolean): void {
+        this.propertyFocusedChange?.emitEvent(event, false);
+    }
 }
diff --git a/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.template.html b/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.template.html
index 4c9550e515129..e6da4dcb61005 100644
--- a/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.template.html
+++ b/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.template.html
@@ -76,6 +76,7 @@ <h6 class="tui-text_h6">
             Visual pressed state
         </ng-template>
         <ng-template
+            #documentationPropertyFocusedChange
             documentationPropertyMode="output"
             documentationPropertyName="focusedChange"
             documentationPropertyType="boolean"
diff --git a/projects/demo/src/modules/components/button/button.template.html b/projects/demo/src/modules/components/button/button.template.html
index 43594ded52521..c847f87067c45 100644
--- a/projects/demo/src/modules/components/button/button.template.html
+++ b/projects/demo/src/modules/components/button/button.template.html
@@ -97,6 +97,7 @@
                     [shape]="shape"
                     [showLoader]="showLoader"
                     [size]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 ></button>
                 <ng-template #button>
                     <button
@@ -113,6 +114,7 @@
                         [shape]="shape"
                         [showLoader]="showLoader"
                         [size]="size"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         Content
                     </button>
@@ -198,7 +200,7 @@
                 Size
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
     </ng-template>
 
     <ng-template pageTab>
diff --git a/projects/demo/src/modules/components/calendar-month/calendar-month.component.ts b/projects/demo/src/modules/components/calendar-month/calendar-month.component.ts
index 63e1ef3f209e5..3de74e50dd985 100644
--- a/projects/demo/src/modules/components/calendar-month/calendar-month.component.ts
+++ b/projects/demo/src/modules/components/calendar-month/calendar-month.component.ts
@@ -1,4 +1,4 @@
-import {Component, Inject} from '@angular/core';
+import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {
@@ -11,7 +11,6 @@ import {
     TuiMonthRange,
     TuiYear,
 } from '@taiga-ui/cdk';
-import {TuiAlertService} from '@taiga-ui/core';
 
 @Component({
     selector: 'example-tui-calendar-month',
@@ -68,13 +67,4 @@ export class ExampleTuiCalendarMonthComponent {
     ];
 
     year = this.yearVariants[0];
-
-    constructor(
-        @Inject(TuiAlertService)
-        private readonly alerts: TuiAlertService,
-    ) {}
-
-    onMonthClick(month: TuiMonth): void {
-        this.alerts.open(String(month)).subscribe();
-    }
 }
diff --git a/projects/demo/src/modules/components/calendar-month/calendar-month.template.html b/projects/demo/src/modules/components/calendar-month/calendar-month.template.html
index 923a0ee9deab8..795fdd52063eb 100644
--- a/projects/demo/src/modules/components/calendar-month/calendar-month.template.html
+++ b/projects/demo/src/modules/components/calendar-month/calendar-month.template.html
@@ -39,7 +39,7 @@
                 [min]="min"
                 [value]="value"
                 [year]="year"
-                (monthClick)="onMonthClick($event)"
+                (monthClick)="documentationPropertyMonthClick.emitEvent($event)"
             ></tui-calendar-month>
         </tui-doc-demo>
         <tui-doc-documentation>
@@ -91,6 +91,7 @@
                 Current year
             </ng-template>
             <ng-template
+                #documentationPropertyMonthClick="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="monthClick"
                 documentationPropertyType="TuiMonth"
diff --git a/projects/demo/src/modules/components/calendar/calendar.component.ts b/projects/demo/src/modules/components/calendar/calendar.component.ts
index b1de8921bf494..531bfa297e11b 100644
--- a/projects/demo/src/modules/components/calendar/calendar.component.ts
+++ b/projects/demo/src/modules/components/calendar/calendar.component.ts
@@ -1,4 +1,4 @@
-import {Component, Inject} from '@angular/core';
+import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {
@@ -10,11 +10,7 @@ import {
     TuiDayRange,
     TuiMonth,
 } from '@taiga-ui/cdk';
-import {
-    TUI_DEFAULT_MARKER_HANDLER,
-    TuiAlertService,
-    TuiMarkerHandler,
-} from '@taiga-ui/core';
+import {TUI_DEFAULT_MARKER_HANDLER, TuiMarkerHandler} from '@taiga-ui/core';
 
 const TWO_DOTS: [string, string] = ['var(--tui-primary)', 'var(--tui-info-fill)'];
 const ONE_DOT: [string] = ['var(--tui-success-fill)'];
@@ -123,13 +119,4 @@ export class ExampleTuiCalendarComponent {
     month = TuiMonth.currentLocal();
 
     hoveredItem: TuiDay | null = null;
-
-    constructor(
-        @Inject(TuiAlertService)
-        private readonly alerts: TuiAlertService,
-    ) {}
-
-    onDayClick(day: TuiDay): void {
-        this.alerts.open(String(day)).subscribe();
-    }
 }
diff --git a/projects/demo/src/modules/components/calendar/calendar.template.html b/projects/demo/src/modules/components/calendar/calendar.template.html
index 4504f5e934d0b..0839356d04f3e 100644
--- a/projects/demo/src/modules/components/calendar/calendar.template.html
+++ b/projects/demo/src/modules/components/calendar/calendar.template.html
@@ -110,7 +110,7 @@
                 [value]="value"
                 [(hoveredItem)]="hoveredItem"
                 [(month)]="month"
-                (dayClick)="onDayClick($event)"
+                (dayClick)="documentationPropertyDayClick.emitEvent($event)"
             ></tui-calendar>
         </tui-doc-demo>
         <tui-doc-documentation>
@@ -204,6 +204,7 @@
                 Selected day or range
             </ng-template>
             <ng-template
+                #documentationPropertyDayClick="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="dayClick"
                 documentationPropertyType="TuiDay"
diff --git a/projects/demo/src/modules/components/checkbox-block/checkbox-block.template.html b/projects/demo/src/modules/components/checkbox-block/checkbox-block.template.html
index 976341360341e..eaad03a4626a0 100644
--- a/projects/demo/src/modules/components/checkbox-block/checkbox-block.template.html
+++ b/projects/demo/src/modules/components/checkbox-block/checkbox-block.template.html
@@ -51,6 +51,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="currentSize"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         One option
                     </tui-checkbox-block>
@@ -66,6 +67,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="currentSize"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         An alternative one
                     </tui-checkbox-block>
@@ -81,6 +83,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="currentSize"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         Other
                     </tui-checkbox-block>
@@ -125,6 +128,7 @@
             </ng-template>
         </tui-doc-documentation>
         <inherited-documentation
+            #inherited
             [withHint]="false"
             [withTextFieldController]="false"
         ></inherited-documentation>
diff --git a/projects/demo/src/modules/components/checkbox-labeled/checkbox-labeled.template.html b/projects/demo/src/modules/components/checkbox-labeled/checkbox-labeled.template.html
index 369bda611afe6..5280f6c3fd1dd 100644
--- a/projects/demo/src/modules/components/checkbox-labeled/checkbox-labeled.template.html
+++ b/projects/demo/src/modules/components/checkbox-labeled/checkbox-labeled.template.html
@@ -48,6 +48,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="size"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         An option
                     </tui-checkbox-labeled>
@@ -61,6 +62,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="size"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         An alternative one
                     </tui-checkbox-labeled>
@@ -74,6 +76,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="size"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         Other
                     </tui-checkbox-labeled>
@@ -101,6 +104,7 @@
             </ng-template>
         </tui-doc-documentation>
         <inherited-documentation
+            #inherited
             [withHint]="false"
             [withTextFieldController]="false"
         ></inherited-documentation>
diff --git a/projects/demo/src/modules/components/checkbox/checkbox.template.html b/projects/demo/src/modules/components/checkbox/checkbox.template.html
index aa13e3f275f7f..027a8a302942a 100644
--- a/projects/demo/src/modules/components/checkbox/checkbox.template.html
+++ b/projects/demo/src/modules/components/checkbox/checkbox.template.html
@@ -57,6 +57,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="size"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     ></tui-checkbox>
                     <tui-checkbox
                         formControlName="testValue2"
@@ -67,6 +68,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="size"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     ></tui-checkbox>
                     <tui-checkbox
                         formControlName="testValue3"
@@ -77,6 +79,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="size"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     ></tui-checkbox>
                 </form>
             </ng-template>
@@ -102,6 +105,7 @@
             </ng-template>
         </tui-doc-documentation>
         <inherited-documentation
+            #inherited
             [withHint]="false"
             [withTextFieldController]="false"
         ></inherited-documentation>
diff --git a/projects/demo/src/modules/components/combo-box/combo-box.template.html b/projects/demo/src/modules/components/combo-box/combo-box.template.html
index 77bbb6ef3c6f9..1464b3b007b82 100644
--- a/projects/demo/src/modules/components/combo-box/combo-box.template.html
+++ b/projects/demo/src/modules/components/combo-box/combo-box.template.html
@@ -131,6 +131,7 @@
                     [tuiTextfieldSize]="size"
                     [valueContent]="valueContent"
                     [(search)]="search"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                     (tuiDropdownOpenChange)="dropdownOpen.next($event)"
                 >
                     Choose an account
@@ -255,7 +256,10 @@
                 A template for custom view of selected value
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation [dropdown]="true"></inherited-documentation>
+        <inherited-documentation
+            #inherited
+            [dropdown]="true"
+        ></inherited-documentation>
     </ng-template>
     <ng-template pageTab>
         <ol class="b-demo-steps">
diff --git a/projects/demo/src/modules/components/filter/filter.component.ts b/projects/demo/src/modules/components/filter/filter.component.ts
index 2ae3579076f64..b8c5bf620e855 100644
--- a/projects/demo/src/modules/components/filter/filter.component.ts
+++ b/projects/demo/src/modules/components/filter/filter.component.ts
@@ -1,9 +1,9 @@
-import {Component, Inject} from '@angular/core';
+import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {ALWAYS_FALSE_HANDLER, TuiBooleanHandler, TuiHandler} from '@taiga-ui/cdk';
-import {TuiAlertService, TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
+import {TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
 
 class ItemWithBadge {
     constructor(
@@ -86,13 +86,4 @@ export class ExampleTuiFilterComponent {
     readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeXS> = ['xs', 's', 'm', 'l'];
 
     size = this.sizeVariants[2];
-
-    constructor(
-        @Inject(TuiAlertService)
-        private readonly alerts: TuiAlertService,
-    ) {}
-
-    onToggledItemChange(item: unknown): void {
-        this.alerts.open(String(item)).subscribe();
-    }
 }
diff --git a/projects/demo/src/modules/components/filter/filter.template.html b/projects/demo/src/modules/components/filter/filter.template.html
index cfdc451252980..c846c96c3c101 100644
--- a/projects/demo/src/modules/components/filter/filter.template.html
+++ b/projects/demo/src/modules/components/filter/filter.template.html
@@ -52,7 +52,7 @@
                     [formControl]="control"
                     [items]="items"
                     [size]="size"
-                    (toggledItem)="onToggledItemChange($event)"
+                    (toggledItem)="documentationPropertyToggledItem.emitEvent($event)"
                 ></tui-filter>
             </ng-template>
         </tui-doc-demo>
@@ -118,6 +118,7 @@
                 Size
             </ng-template>
             <ng-template
+                #documentationPropertyToggledItem="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="toggledItem"
                 documentationPropertyType="T"
diff --git a/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.component.ts b/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.component.ts
index 52ff3d0528e0b..5598ee7dc4826 100644
--- a/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.component.ts
+++ b/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.component.ts
@@ -1,10 +1,9 @@
-import {Component, forwardRef, Inject} from '@angular/core';
+import {Component, forwardRef} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiCodeCVCLength} from '@taiga-ui/addon-commerce';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {tuiIsString} from '@taiga-ui/cdk';
-import {TuiAlertService} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
@@ -77,13 +76,6 @@ export class ExampleTuiInputCardGroupedComponent extends AbstractExampleTuiInter
 
     control = new FormControl();
 
-    constructor(
-        @Inject(TuiAlertService)
-        private readonly alerts: TuiAlertService,
-    ) {
-        super();
-    }
-
     get cardSrc(): PolymorpheusContent {
         return tuiIsString(this.cardSrcSelected)
             ? this.cards[this.cardSrcSelected]
@@ -102,10 +94,6 @@ export class ExampleTuiInputCardGroupedComponent extends AbstractExampleTuiInter
         }
     }
 
-    onBinChange(bin: string | null): void {
-        this.alerts.open(`bin: ${bin}`).subscribe();
-    }
-
     getContentVariants(
         template: PolymorpheusContent,
     ): readonly PolymorpheusContent[] | null {
diff --git a/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.template.html b/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.template.html
index 1abe9054dc51f..30a8149e1d2f2 100644
--- a/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.template.html
+++ b/projects/demo/src/modules/components/input-card-grouped/input-card-grouped.template.html
@@ -65,7 +65,8 @@
                     [pseudoHover]="pseudoHovered"
                     [pseudoInvalid]="pseudoInvalid"
                     [readOnly]="readOnly"
-                    (binChange)="onBinChange($event)"
+                    (binChange)="documentationPropertyBinChange.emitEvent($event)"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 ></tui-input-card-grouped>
             </ng-template>
         </tui-doc-demo>
@@ -131,6 +132,7 @@
                 Code length
             </ng-template>
             <ng-template
+                #documentationPropertyBinChange="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="binChange"
                 documentationPropertyType="string | null"
@@ -138,7 +140,7 @@
                 BIN value (card first 6 symbols)
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
     </ng-template>
 
     <ng-template pageTab>
diff --git a/projects/demo/src/modules/components/input-card/input-card.component.ts b/projects/demo/src/modules/components/input-card/input-card.component.ts
index 057268a02ebf6..365c7531764ae 100644
--- a/projects/demo/src/modules/components/input-card/input-card.component.ts
+++ b/projects/demo/src/modules/components/input-card/input-card.component.ts
@@ -1,12 +1,16 @@
-import {Component, forwardRef, Inject} from '@angular/core';
+import {Component, forwardRef, ViewChild} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiCodeCVCLength, tuiCreateLuhnValidator} from '@taiga-ui/addon-commerce';
-import {TuiDocExample} from '@taiga-ui/addon-doc';
-import {TuiAlertService, TuiHintOptions} from '@taiga-ui/core';
+import {
+    TuiDocDocumentationPropertyConnectorDirective,
+    TuiDocExample,
+} from '@taiga-ui/addon-doc';
+import {TuiHintOptions} from '@taiga-ui/core';
 
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
+import {InheritedDocumentationComponent} from '../abstract/inherited-documentation/inherited-documentation.component';
 
 @Component({
     selector: 'example-input-card',
@@ -21,6 +25,14 @@ import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstr
     ],
 })
 export class ExampleTuiInputCardComponent extends AbstractExampleTuiControl {
+    @ViewChild('documentationPropertyBinChange', {
+        read: TuiDocDocumentationPropertyConnectorDirective,
+    })
+    binChangeProperty?: TuiDocDocumentationPropertyConnectorDirective<unknown>;
+
+    @ViewChild('inheritedDocumentation')
+    inherited?: InheritedDocumentationComponent;
+
     readonly exampleModule = import('./examples/import/import-module.md?raw');
     readonly exampleHtml = import('./examples/import/insert-template.md?raw');
 
@@ -73,13 +85,6 @@ export class ExampleTuiInputCardComponent extends AbstractExampleTuiControl {
         cvc: new FormControl('', Validators.required),
     });
 
-    constructor(
-        @Inject(TuiAlertService)
-        private readonly alerts: TuiAlertService,
-    ) {
-        super();
-    }
-
     get cardSrc(): string | null {
         return this.cardSrcSelected === null ? null : this.cards[this.cardSrcSelected];
     }
@@ -121,8 +126,4 @@ export class ExampleTuiInputCardComponent extends AbstractExampleTuiControl {
 
         this.control.get(control)!.enable();
     }
-
-    onBinChange(bin: string | null): void {
-        this.alerts.open(`bin: ${bin}`).subscribe();
-    }
 }
diff --git a/projects/demo/src/modules/components/input-card/input-card.template.html b/projects/demo/src/modules/components/input-card/input-card.template.html
index 3d36c27897f73..6ea83f3c2a017 100644
--- a/projects/demo/src/modules/components/input-card/input-card.template.html
+++ b/projects/demo/src/modules/components/input-card/input-card.template.html
@@ -47,7 +47,8 @@
                         [tuiTextfieldCleaner]="cleaner"
                         [tuiTextfieldLabelOutside]="labelOutside"
                         [tuiTextfieldSize]="size"
-                        (binChange)="onBinChange($event)"
+                        (binChange)="binChangeProperty?.emitEvent($event)"
+                        (focusedChange)="inherited?.emitFocusedChange($event)"
                     >
                         Card number
                     </tui-input-card>
@@ -63,6 +64,7 @@
                         [readOnly]="readOnly"
                         [tuiTextfieldLabelOutside]="labelOutside"
                         [tuiTextfieldSize]="size"
+                        (focusedChange)="inherited?.emitFocusedChange($event)"
                     >
                         Expire date
                     </tui-input-expire>
@@ -82,6 +84,7 @@
                         [tuiHintDirection]="hintDirectionCVC"
                         [tuiTextfieldLabelOutside]="labelOutside"
                         [tuiTextfieldSize]="size"
+                        (focusedChange)="inherited?.emitFocusedChange($event)"
                     >
                         CVC/CVV
                     </tui-input-cvc>
@@ -135,6 +138,7 @@
                             SVG card icon
                         </ng-template>
                         <ng-template
+                            #documentationPropertyBinChange
                             documentationPropertyMode="output"
                             documentationPropertyName="binChange"
                             documentationPropertyType="string | null"
@@ -142,7 +146,7 @@
                             BIN value (card first 6 symbols)
                         </ng-template>
                     </tui-doc-documentation>
-                    <inherited-documentation></inherited-documentation>
+                    <inherited-documentation #inheritedDocumentation></inherited-documentation>
                 </ng-template>
             </tui-accordion-item>
 
diff --git a/projects/demo/src/modules/components/input-copy/input-copy.template.html b/projects/demo/src/modules/components/input-copy/input-copy.template.html
index 9a7614f92b166..72b219d654af3 100644
--- a/projects/demo/src/modules/components/input-copy/input-copy.template.html
+++ b/projects/demo/src/modules/components/input-copy/input-copy.template.html
@@ -41,6 +41,7 @@
                 [tuiTextfieldIconLeft]="iconLeft"
                 [tuiTextfieldLabelOutside]="labelOutside"
                 [tuiTextfieldSize]="size"
+                (focusedChange)="inherited.emitFocusedChange($event)"
             >
                 Type a text
             </tui-input-copy>
@@ -83,7 +84,7 @@
                 Message tooltip mode
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/input-count/input-count.template.html b/projects/demo/src/modules/components/input-count/input-count.template.html
index 1c1b24f82e7e9..7178dc37ef257 100644
--- a/projects/demo/src/modules/components/input-count/input-count.template.html
+++ b/projects/demo/src/modules/components/input-count/input-count.template.html
@@ -96,6 +96,7 @@
                     [tuiTextfieldIconLeft]="iconLeft"
                     [tuiTextfieldLabelOutside]="labelOutside"
                     [tuiTextfieldSize]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 >
                     Number of accounts
                 </tui-input-count>
@@ -169,7 +170,7 @@
                 Step for buttons
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/input-date-multi/input-date-multi.template.html b/projects/demo/src/modules/components/input-date-multi/input-date-multi.template.html
index 4a484576fcee4..4e742dee937dd 100644
--- a/projects/demo/src/modules/components/input-date-multi/input-date-multi.template.html
+++ b/projects/demo/src/modules/components/input-date-multi/input-date-multi.template.html
@@ -38,6 +38,7 @@
                     [tuiTextfieldIconLeft]="iconLeft"
                     [tuiTextfieldLabelOutside]="labelOutside"
                     [tuiTextfieldSize]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                     (tuiDropdownOpenChange)="dropdownOpen.next($event)"
                 >
                     Choose a date
@@ -111,7 +112,10 @@
                 mode
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation [dropdown]="true"></inherited-documentation>
+        <inherited-documentation
+            #inherited
+            [dropdown]="true"
+        ></inherited-documentation>
     </ng-template>
 
     <ng-template pageTab>
diff --git a/projects/demo/src/modules/components/input-date-range/input-date-range.template.html b/projects/demo/src/modules/components/input-date-range/input-date-range.template.html
index 2ce353f6786b7..b9b7afe9c75b3 100644
--- a/projects/demo/src/modules/components/input-date-range/input-date-range.template.html
+++ b/projects/demo/src/modules/components/input-date-range/input-date-range.template.html
@@ -152,6 +152,7 @@ <h3>DI-tokens for input-configurations:</h3>
                     [tuiTextfieldIconLeft]="iconLeft"
                     [tuiTextfieldLabelOutside]="labelOutside"
                     [tuiTextfieldSize]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 >
                     Choose dates
                 </tui-input-date-range>
@@ -242,7 +243,7 @@ <h3>DI-tokens for input-configurations:</h3>
                 Maximal length of range
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/input-date-time/input-date-time.template.html b/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
index bb2093ec15997..892678ac334c3 100644
--- a/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
+++ b/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
@@ -132,6 +132,7 @@ <h3>DI-tokens for input-configurations:</h3>
                     [tuiTextfieldIconLeft]="iconLeft"
                     [tuiTextfieldLabelOutside]="labelOutside"
                     [tuiTextfieldSize]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                     (tuiDropdownOpenChange)="dropdownOpen.next($event)"
                 >
                     Choose date and time
@@ -196,7 +197,10 @@ <h3>DI-tokens for input-configurations:</h3>
                 Time modes for SS and MS support
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation [dropdown]="true"></inherited-documentation>
+        <inherited-documentation
+            #inherited
+            [dropdown]="true"
+        ></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/input-date/input-date.template.html b/projects/demo/src/modules/components/input-date/input-date.template.html
index 7839731eb7a30..f22c6d164d34e 100644
--- a/projects/demo/src/modules/components/input-date/input-date.template.html
+++ b/projects/demo/src/modules/components/input-date/input-date.template.html
@@ -146,6 +146,7 @@ <h3>DI-tokens for input-configurations:</h3>
                     [tuiTextfieldIconLeft]="iconLeft"
                     [tuiTextfieldLabelOutside]="labelOutside"
                     [tuiTextfieldSize]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                     (tuiDropdownOpenChange)="dropdownOpen.next($event)"
                 >
                     Choose a date
@@ -210,7 +211,10 @@ <h3>DI-tokens for input-configurations:</h3>
                 Maximum date
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation [dropdown]="true"></inherited-documentation>
+        <inherited-documentation
+            #inherited
+            [dropdown]="true"
+        ></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/input-files/input-files.template.html b/projects/demo/src/modules/components/input-files/input-files.template.html
index 6bedbcbe1da8e..083b80ee49d91 100644
--- a/projects/demo/src/modules/components/input-files/input-files.template.html
+++ b/projects/demo/src/modules/components/input-files/input-files.template.html
@@ -72,7 +72,7 @@
                 [pseudoActive]="pseudoPressed"
                 [pseudoFocus]="pseudoFocused"
                 [pseudoHover]="pseudoHovered"
-                (reject)="updateRejected($event)"
+                (reject)="updateRejected($event); documentationPropertyReject.emitEvent($event)"
             >
                 <input
                     tuiInputFiles
@@ -94,7 +94,7 @@
                             [showDelete]="showDelete"
                             [showSize]="showSize"
                             [size]="size"
-                            (removed)="removeFile(file)"
+                            (removed)="removeFile(file); documentationPropertyRemoved.emitEvent($event)"
                         ></tui-file>
                     </ng-container>
                 </ng-container>
@@ -161,6 +161,7 @@
                 Max file size in bytes (30 MB by default — 30 * 1000 * 1000)
             </ng-template>
             <ng-template
+                #documentationPropertyReject="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="reject"
                 documentationPropertyType="TuiFileLike"
@@ -263,6 +264,7 @@
                 Component size
             </ng-template>
             <ng-template
+                #documentationPropertyRemoved="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="removed"
                 documentationPropertyType="TuiFileLike"
diff --git a/projects/demo/src/modules/components/input-month-range/input-month-range.template.html b/projects/demo/src/modules/components/input-month-range/input-month-range.template.html
index 11b8609357aa8..8b6a5aaf754f2 100644
--- a/projects/demo/src/modules/components/input-month-range/input-month-range.template.html
+++ b/projects/demo/src/modules/components/input-month-range/input-month-range.template.html
@@ -60,6 +60,7 @@
                     [tuiTextfieldIconLeft]="iconLeft"
                     [tuiTextfieldLabelOutside]="labelOutside"
                     [tuiTextfieldSize]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 >
                     Months
                 </tui-input-month-range>
@@ -105,7 +106,7 @@
                 Maximum date
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/input-month/input-month.template.html b/projects/demo/src/modules/components/input-month/input-month.template.html
index 04d448d4bf29c..6f035107bcddc 100644
--- a/projects/demo/src/modules/components/input-month/input-month.template.html
+++ b/projects/demo/src/modules/components/input-month/input-month.template.html
@@ -57,6 +57,7 @@
                     [tuiTextfieldIconLeft]="iconLeft"
                     [tuiTextfieldLabelOutside]="labelOutside"
                     [tuiTextfieldSize]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 >
                     Month
                 </tui-input-month>
@@ -102,7 +103,7 @@
                 Maximum date
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/input-number/input-number.template.html b/projects/demo/src/modules/components/input-number/input-number.template.html
index 5a4b8147dc120..bd67bd920d873 100644
--- a/projects/demo/src/modules/components/input-number/input-number.template.html
+++ b/projects/demo/src/modules/components/input-number/input-number.template.html
@@ -176,6 +176,7 @@ <h3>There are also other components to input numbers:</h3>
                     [tuiTextfieldPostfix]="postfix"
                     [tuiTextfieldPrefix]="prefix"
                     [tuiTextfieldSize]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 >
                     Type a sum
                 </tui-input-number>
@@ -262,7 +263,7 @@ <h3>There are also other components to input numbers:</h3>
                 Step to increase/decrease value with keyboard and buttons on the side
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/input-password/input-password.template.html b/projects/demo/src/modules/components/input-password/input-password.template.html
index 4f7f7dfef3b35..b21db5a78b9a8 100644
--- a/projects/demo/src/modules/components/input-password/input-password.template.html
+++ b/projects/demo/src/modules/components/input-password/input-password.template.html
@@ -45,6 +45,7 @@
                     [tuiTextfieldIconLeft]="iconLeft"
                     [tuiTextfieldLabelOutside]="labelOutside"
                     [tuiTextfieldSize]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 >
                     Type a password
                 </tui-input-password>
@@ -61,7 +62,7 @@
                 )
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/input-phone-international/input-phone-international.template.html b/projects/demo/src/modules/components/input-phone-international/input-phone-international.template.html
index 7533fb6279e5b..7a3df224ac9ce 100644
--- a/projects/demo/src/modules/components/input-phone-international/input-phone-international.template.html
+++ b/projects/demo/src/modules/components/input-phone-international/input-phone-international.template.html
@@ -55,6 +55,7 @@
                     [tuiTextfieldPrefix]="prefix"
                     [tuiTextfieldSize]="size"
                     [(countryIsoCode)]="countryIsoCode"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 >
                     Type a phone number
                 </tui-input-phone-international>
@@ -89,7 +90,7 @@
                 ISO-code of selected country
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
     </ng-template>
 
     <ng-template pageTab>
diff --git a/projects/demo/src/modules/components/input-phone/input-phone.template.html b/projects/demo/src/modules/components/input-phone/input-phone.template.html
index f019c99859cf9..a1b2e14849628 100644
--- a/projects/demo/src/modules/components/input-phone/input-phone.template.html
+++ b/projects/demo/src/modules/components/input-phone/input-phone.template.html
@@ -73,6 +73,7 @@
                     [tuiTextfieldPostfix]="postfix"
                     [tuiTextfieldPrefix]="prefix"
                     [tuiTextfieldSize]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                     (tuiDropdownOpenChange)="dropdownOpen.next($event)"
                 >
                     Type a phone number
@@ -119,7 +120,10 @@
                 Textfield value to subscribe on input or setting it from the outside
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation [dropdown]="true"></inherited-documentation>
+        <inherited-documentation
+            #inherited
+            [dropdown]="true"
+        ></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/input-slider/input-slider.template.html b/projects/demo/src/modules/components/input-slider/input-slider.template.html
index 0292969d65ee8..1d25503003273 100644
--- a/projects/demo/src/modules/components/input-slider/input-slider.template.html
+++ b/projects/demo/src/modules/components/input-slider/input-slider.template.html
@@ -124,6 +124,7 @@
                     [tuiTextfieldPrefix]="prefix"
                     [tuiTextfieldSize]="size"
                     [valueContent]="valueContent"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 >
                     Range
                 </tui-input-slider>
@@ -232,7 +233,7 @@
                 instead
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
     </ng-template>
 
     <ng-template pageTab>
diff --git a/projects/demo/src/modules/components/input-tag/input-tag.template.html b/projects/demo/src/modules/components/input-tag/input-tag.template.html
index 5643f29da98cf..895c09eab14ab 100644
--- a/projects/demo/src/modules/components/input-tag/input-tag.template.html
+++ b/projects/demo/src/modules/components/input-tag/input-tag.template.html
@@ -132,6 +132,7 @@
                     [tuiTextfieldSize]="size"
                     [uniqueTags]="uniqueTags"
                     [(search)]="search"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                     (tuiDropdownOpenChange)="dropdownOpen.next($event)"
                 >
                     Please enter Pythons' names
@@ -259,7 +260,10 @@
                 </a>
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation [dropdown]="true"></inherited-documentation>
+        <inherited-documentation
+            #inherited
+            [dropdown]="true"
+        ></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/input-time/input-time.template.html b/projects/demo/src/modules/components/input-time/input-time.template.html
index f012e10d041b2..38d7dfe17a300 100644
--- a/projects/demo/src/modules/components/input-time/input-time.template.html
+++ b/projects/demo/src/modules/components/input-time/input-time.template.html
@@ -92,6 +92,7 @@
                     [tuiTextfieldPostfix]="postfix"
                     [tuiTextfieldPrefix]="prefix"
                     [tuiTextfieldSize]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 >
                     Input time
                 </tui-input-time>
@@ -154,7 +155,7 @@
                 Modes for seconds and ms support
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/input-year/input-year.template.html b/projects/demo/src/modules/components/input-year/input-year.template.html
index 4d5e7e9a1800f..1dca89702d8c9 100644
--- a/projects/demo/src/modules/components/input-year/input-year.template.html
+++ b/projects/demo/src/modules/components/input-year/input-year.template.html
@@ -52,6 +52,7 @@
                     [tuiTextfieldPostfix]="postfix"
                     [tuiTextfieldPrefix]="prefix"
                     [tuiTextfieldSize]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 >
                     Year
                 </tui-input-year>
@@ -97,7 +98,7 @@
                 Maximum year
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/input/input.template.html b/projects/demo/src/modules/components/input/input.template.html
index e74712460b818..d2e21b1057ca4 100644
--- a/projects/demo/src/modules/components/input/input.template.html
+++ b/projects/demo/src/modules/components/input/input.template.html
@@ -245,6 +245,7 @@
                     [tuiTextfieldPostfix]="postfix"
                     [tuiTextfieldPrefix]="prefix"
                     [tuiTextfieldSize]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                     (tuiDropdownOpenChange)="dropdownOpen.next($event)"
                 >
                     Label
@@ -295,7 +296,10 @@
                 to set it)
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation [dropdown]="true"></inherited-documentation>
+        <inherited-documentation
+            #inherited
+            [dropdown]="true"
+        ></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/line-clamp/line-clamp.template.html b/projects/demo/src/modules/components/line-clamp/line-clamp.template.html
index 33347ba41dbea..7bf3dd8d449e4 100644
--- a/projects/demo/src/modules/components/line-clamp/line-clamp.template.html
+++ b/projects/demo/src/modules/components/line-clamp/line-clamp.template.html
@@ -54,6 +54,7 @@
                 [lineHeight]="lineHeight"
                 [linesLimit]="linesLimit"
                 [style.maxWidth.px]="maxWidth"
+                (overflownChange)="documentationPropertyOverflownChange.emitEvent($event)"
             ></tui-line-clamp>
             <ng-template #defaultExampleContent>
                 Lorem ipsum
@@ -91,6 +92,7 @@
                 Number of visible lines
             </ng-template>
             <ng-template
+                #documentationPropertyOverflownChange="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="overflownChange"
                 documentationPropertyType="boolean"
diff --git a/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.template.html b/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.template.html
index 5808a854d25b8..c37bad8827de8 100644
--- a/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.template.html
+++ b/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.template.html
@@ -77,6 +77,8 @@
                 [max]="max"
                 [min]="min"
                 [single]="single"
+                (cancel)="documentationPropertyCancel.emitEvent($event)"
+                (confirm)="documentationPropertyConfirm.emitEvent($event)"
             ></tui-mobile-calendar>
         </tui-doc-demo>
 
@@ -119,6 +121,7 @@
                 Single date or a range
             </ng-template>
             <ng-template
+                #documentationPropertyCancel="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="cancel"
                 documentationPropertyType="void"
@@ -126,6 +129,7 @@
                 "Cancel" clicked
             </ng-template>
             <ng-template
+                #documentationPropertyConfirm="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="confirm"
                 documentationPropertyType="TuiDayRange | TuiDay"
diff --git a/projects/demo/src/modules/components/multi-select/multi-select.template.html b/projects/demo/src/modules/components/multi-select/multi-select.template.html
index 9835cf6b55e93..cd8799a01c65d 100644
--- a/projects/demo/src/modules/components/multi-select/multi-select.template.html
+++ b/projects/demo/src/modules/components/multi-select/multi-select.template.html
@@ -150,6 +150,7 @@
                     [tuiTextfieldSize]="size"
                     [valueContent]="valueContent"
                     [(search)]="search"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                     (tuiDropdownOpenChange)="dropdownOpen.next($event)"
                 >
                     Choose an account
@@ -283,7 +284,10 @@
                 Placeholder
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation [dropdown]="true"></inherited-documentation>
+        <inherited-documentation
+            #inherited
+            [dropdown]="true"
+        ></inherited-documentation>
     </ng-template>
 
     <ng-template pageTab>
diff --git a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html
index 85060cae8d7d9..7e73441cc1b61 100644
--- a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html
+++ b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html
@@ -75,6 +75,7 @@
                 [tuiTextfieldPrefix]="prefix"
                 [tuiTextfieldSize]="size"
                 [(value)]="value"
+                (focusedChange)="inherited.emitFocusedChange($event)"
             >
                 Component label
             </tui-primitive-textfield>
@@ -203,7 +204,7 @@
         </tui-doc-documentation>
         <hint-controller-documentation></hint-controller-documentation>
         <textfield-controller-documentation></textfield-controller-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/push/push.component.ts b/projects/demo/src/modules/components/push/push.component.ts
index 39d9e7351898e..c6c6dd1dd697b 100644
--- a/projects/demo/src/modules/components/push/push.component.ts
+++ b/projects/demo/src/modules/components/push/push.component.ts
@@ -1,8 +1,7 @@
-import {Component, Inject} from '@angular/core';
+import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
-import {TuiAlertService} from '@taiga-ui/core';
 
 @Component({
     selector: 'example-tui-push',
@@ -34,12 +33,4 @@ export class ExampleTuiPushComponent {
     heading = '';
     type = '';
     timestamp = 0;
-
-    constructor(@Inject(TuiAlertService) private readonly alert: TuiAlertService) {}
-
-    onClose(): void {
-        this.alert
-            .open('Close button is visible when you subscribe to (close) output')
-            .subscribe();
-    }
 }
diff --git a/projects/demo/src/modules/components/push/push.template.html b/projects/demo/src/modules/components/push/push.template.html
index 0d4917005c548..d75fce2191f88 100644
--- a/projects/demo/src/modules/components/push/push.template.html
+++ b/projects/demo/src/modules/components/push/push.template.html
@@ -36,7 +36,7 @@
                 [heading]="heading"
                 [timestamp]="timestamp"
                 [type]="type"
-                (close)="onClose()"
+                (close)="documentationPropertyClose.emitEvent($event)"
             >
                 <img
                     alt=""
@@ -91,6 +91,7 @@
                 pipe.
             </ng-template>
             <ng-template
+                #documentationPropertyClose="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="close"
                 documentationPropertyType="void"
diff --git a/projects/demo/src/modules/components/radio-block/radio-block.template.html b/projects/demo/src/modules/components/radio-block/radio-block.template.html
index 21a67a9842afb..e895ca41dc7ee 100644
--- a/projects/demo/src/modules/components/radio-block/radio-block.template.html
+++ b/projects/demo/src/modules/components/radio-block/radio-block.template.html
@@ -60,6 +60,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="currentSize"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         Oranges
                     </tui-radio-block>
@@ -76,6 +77,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="currentSize"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         Apples
                     </tui-radio-block>
@@ -92,6 +94,7 @@
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
                         [size]="currentSize"
+                        (focusedChange)="inherited.emitFocusedChange($event)"
                     >
                         Pinapples
                     </tui-radio-block>
@@ -155,6 +158,7 @@
             </ng-template>
         </tui-doc-documentation>
         <inherited-documentation
+            #inherited
             [withHint]="false"
             [withTextFieldController]="false"
         ></inherited-documentation>
diff --git a/projects/demo/src/modules/components/radio-labeled/radio-labeled.template.html b/projects/demo/src/modules/components/radio-labeled/radio-labeled.template.html
index 01395ead65c0b..5061d8c9781dc 100644
--- a/projects/demo/src/modules/components/radio-labeled/radio-labeled.template.html
+++ b/projects/demo/src/modules/components/radio-labeled/radio-labeled.template.html
@@ -56,6 +56,7 @@
                     [pseudoInvalid]="pseudoInvalid"
                     [readOnly]="readOnly"
                     [size]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 >
                     One
                 </tui-radio-labeled>
@@ -71,6 +72,7 @@
                     [pseudoInvalid]="pseudoInvalid"
                     [readOnly]="readOnly"
                     [size]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 >
                     Two
                 </tui-radio-labeled>
@@ -86,6 +88,7 @@
                     [pseudoInvalid]="pseudoInvalid"
                     [readOnly]="readOnly"
                     [size]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 >
                     Three
                 </tui-radio-labeled>
@@ -131,6 +134,7 @@
             </ng-template>
         </tui-doc-documentation>
         <inherited-documentation
+            #inherited
             [withHint]="false"
             [withTextFieldController]="false"
         ></inherited-documentation>
diff --git a/projects/demo/src/modules/components/radio-list/radio-list.template.html b/projects/demo/src/modules/components/radio-list/radio-list.template.html
index 79817c4cbc867..691ffa2866310 100644
--- a/projects/demo/src/modules/components/radio-list/radio-list.template.html
+++ b/projects/demo/src/modules/components/radio-list/radio-list.template.html
@@ -42,6 +42,7 @@
                     [pseudoInvalid]="pseudoInvalid"
                     [readOnly]="readOnly"
                     [size]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 ></tui-radio-list>
             </ng-template>
         </tui-doc-demo>
@@ -93,6 +94,7 @@
             </ng-template>
         </tui-doc-documentation>
         <inherited-documentation
+            #inherited
             [withHint]="false"
             [withTextFieldController]="false"
         ></inherited-documentation>
diff --git a/projects/demo/src/modules/components/radio/radio.template.html b/projects/demo/src/modules/components/radio/radio.template.html
index f71df20580a9a..745236cab0c02 100644
--- a/projects/demo/src/modules/components/radio/radio.template.html
+++ b/projects/demo/src/modules/components/radio/radio.template.html
@@ -55,6 +55,7 @@
                     [pseudoInvalid]="pseudoInvalid"
                     [readOnly]="readOnly"
                     [size]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 ></tui-radio>
                 <tui-radio
                     class="tui-space_bottom-3"
@@ -69,6 +70,7 @@
                     [pseudoInvalid]="pseudoInvalid"
                     [readOnly]="readOnly"
                     [size]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 ></tui-radio>
                 <tui-radio
                     class="tui-space_bottom-3"
@@ -83,6 +85,7 @@
                     [pseudoInvalid]="pseudoInvalid"
                     [readOnly]="readOnly"
                     [size]="size"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                 ></tui-radio>
             </ng-template>
         </tui-doc-demo>
@@ -136,6 +139,7 @@
             </ng-template>
         </tui-doc-documentation>
         <inherited-documentation
+            #inherited
             [withHint]="false"
             [withTextFieldController]="false"
         ></inherited-documentation>
diff --git a/projects/demo/src/modules/components/select/select.template.html b/projects/demo/src/modules/components/select/select.template.html
index d1311379d8382..8f9fea13fc350 100644
--- a/projects/demo/src/modules/components/select/select.template.html
+++ b/projects/demo/src/modules/components/select/select.template.html
@@ -158,6 +158,7 @@
                     [tuiTextfieldLabelOutside]="labelOutside"
                     [tuiTextfieldSize]="size"
                     [valueContent]="valueContent"
+                    (focusedChange)="inherited.emitFocusedChange($event)"
                     (tuiDropdownOpenChange)="dropdownOpen.next($event)"
                 >
                     Choose an account
@@ -229,7 +230,10 @@
                 A template for custom view of selected value
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation [dropdown]="true"></inherited-documentation>
+        <inherited-documentation
+            #inherited
+            [dropdown]="true"
+        ></inherited-documentation>
     </ng-template>
 
     <ng-template pageTab>
diff --git a/projects/demo/src/modules/components/tag/tag.template.html b/projects/demo/src/modules/components/tag/tag.template.html
index 0da0f2340cbcb..8a8f961b894f6 100644
--- a/projects/demo/src/modules/components/tag/tag.template.html
+++ b/projects/demo/src/modules/components/tag/tag.template.html
@@ -77,7 +77,7 @@
                 [size]="size"
                 [status]="status"
                 [value]="value"
-                (edited)="editTag($event)"
+                (edited)="editTag($event); documentationPropertyModeEdited.emitEvent($event)"
             ></tui-tag>
             <ng-template #errorIcon>
                 <tui-svg
@@ -180,6 +180,7 @@
                 String value of tag
             </ng-template>
             <ng-template
+                #documentationPropertyModeEdited="documentationProperty"
                 documentationPropertyMode="output"
                 documentationPropertyName="edited"
                 documentationPropertyType="string"
diff --git a/projects/demo/src/modules/components/textarea/textarea.template.html b/projects/demo/src/modules/components/textarea/textarea.template.html
index d0f4f730b0d02..ee32708ebfe12 100644
--- a/projects/demo/src/modules/components/textarea/textarea.template.html
+++ b/projects/demo/src/modules/components/textarea/textarea.template.html
@@ -84,6 +84,7 @@
                 [tuiTextfieldIconLeft]="iconLeft"
                 [tuiTextfieldLabelOutside]="labelOutside"
                 [tuiTextfieldSize]="size"
+                (focusedChange)="inherited.emitFocusedChange($event)"
             >
                 Textfield for multiline input. It can grow with its content.
                 <textarea
@@ -141,7 +142,7 @@
                 Icon content. If content is a string, it is used as stringified svg or a name of an icon
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
         <tui-doc-documentation heading="Native <textarea> inside TuiTextarea">
             <p>
                 Learn more how to set some attributes or listen to events on native textarea in this
diff --git a/projects/demo/src/modules/components/toggle/toggle.template.html b/projects/demo/src/modules/components/toggle/toggle.template.html
index 7e55d81ef2c1a..dda0d9c065373 100644
--- a/projects/demo/src/modules/components/toggle/toggle.template.html
+++ b/projects/demo/src/modules/components/toggle/toggle.template.html
@@ -34,6 +34,7 @@
                 [showLoader]="showLoader"
                 [singleColor]="singleColor"
                 [size]="size"
+                (focusedChange)="inherited.emitFocusedChange($event)"
             ></tui-toggle>
         </tui-doc-demo>
         <tui-doc-documentation>
@@ -80,7 +81,7 @@
                 Size
             </ng-template>
         </tui-doc-documentation>
-        <inherited-documentation></inherited-documentation>
+        <inherited-documentation #inherited></inherited-documentation>
     </ng-template>
 
     <ng-template pageTab>
diff --git a/projects/demo/src/modules/tables/table-pagination/table-pagination.template.html b/projects/demo/src/modules/tables/table-pagination/table-pagination.template.html
index 950407c9714ce..a155d01c64623 100644
--- a/projects/demo/src/modules/tables/table-pagination/table-pagination.template.html
+++ b/projects/demo/src/modules/tables/table-pagination/table-pagination.template.html
@@ -54,6 +54,7 @@
                 [(page)]="page"
                 [(size)]="size"
                 (pageChange)="documentationPropertyPageChange.emitEvent($event)"
+                (paginationChange)="documentationPropertyPaginationChange.emitEvent($event)"
                 (sizeChange)="documentationPropertySizeChange.emitEvent($event)"
             ></tui-table-pagination>
         </tui-doc-demo>