fix(addon-doc): glitch width content between value from DOM and sandb…

…ox width from url
taiga-family · Oct 4, 2024 · 1ece898 · 1ece898
1 parent c0644f4
commit 1ece898
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/projects/addon-doc/components/demo/index.html b/projects/addon-doc/components/demo/index.html
@@ -25,16 +25,17 @@
     class="t-wrapper"
     [attr.tuiTheme]="theme()"
     [class.t-wrapper_transparent]="!opaque"
+    [style.visibility]="rendered() ? 'visible' : 'hidden'"
 >
     <div class="t-content">
         <div
             #content
             id="demo-content"
         >
             <form
-                *ngIf="testForm"
                 class="t-form"
                 [formGroup]="testForm"
+                [style.display]="testForm.get('testValue')?.value ? 'block' : 'none'"
             >
                 <div class="t-input-wrapper">
                     <ng-container [ngTemplateOutlet]="template" />

diff --git a/projects/addon-doc/components/demo/index.ts b/projects/addon-doc/components/demo/index.ts
@@ -1,10 +1,11 @@
-import {JsonPipe, Location, NgIf, NgTemplateOutlet} from '@angular/common';
-import type {ElementRef, OnInit} from '@angular/core';
+import {JsonPipe, Location, NgTemplateOutlet} from '@angular/common';
+import type {AfterViewInit, ElementRef} from '@angular/core';
 import {
     ChangeDetectionStrategy,
     Component,
     computed,
     ContentChild,
+    DestroyRef,
     inject,
     Input,
     signal,
@@ -13,7 +14,7 @@ import {
 } from '@angular/core';
 import {takeUntilDestroyed, toObservable} from '@angular/core/rxjs-interop';
 import type {AbstractControl} from '@angular/forms';
-import {FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import type {Params, UrlTree} from '@angular/router';
 import {UrlSerializer} from '@angular/router';
 import {TUI_DOC_DEMO_TEXTS, TUI_DOC_URL_STATE_HANDLER} from '@taiga-ui/addon-doc/tokens';
@@ -32,7 +33,7 @@ import {TuiSwitch} from '@taiga-ui/kit/components/switch';
 import {TuiChevron} from '@taiga-ui/kit/directives/chevron';
 import {TuiSelectModule} from '@taiga-ui/legacy/components/select';
 import {TuiTextfieldControllerModule} from '@taiga-ui/legacy/directives/textfield-controller';
-import {skip} from 'rxjs';
+import {skip, timer} from 'rxjs';
 
 const MIN_WIDTH = 160;
 
@@ -42,7 +43,6 @@ const MIN_WIDTH = 160;
     imports: [
         FormsModule,
         JsonPipe,
-        NgIf,
         NgTemplateOutlet,
         ReactiveFormsModule,
         TuiButton,
@@ -65,7 +65,7 @@ const MIN_WIDTH = 160;
         '(document:mouseup.silent)': 'onMouseUp()',
     },
 })
-export class TuiDocDemo implements OnInit {
+export class TuiDocDemo implements AfterViewInit {
     @ViewChild(TuiResizable, {static: true})
     private readonly resizable?: ElementRef<HTMLElement>;
 
@@ -76,6 +76,7 @@ export class TuiDocDemo implements OnInit {
     private readonly resizer?: ElementRef<HTMLElement>;
 
     private readonly el = tuiInjectElement();
+    private readonly destroyRef = inject(DestroyRef);
     private readonly locationRef = inject(Location);
     private readonly urlSerializer = inject(UrlSerializer);
     private readonly urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
@@ -84,6 +85,8 @@ export class TuiDocDemo implements OnInit {
     @ContentChild(TemplateRef)
     protected readonly template: TemplateRef<Record<string, unknown>> | null = null;
 
+    protected readonly rendered = signal(false);
+
     protected theme = computed(() => (this.dark() ? 'dark' : 'light'));
 
     protected dark = signal(
@@ -94,7 +97,9 @@ export class TuiDocDemo implements OnInit {
         .pipe(skip(1), takeUntilDestroyed())
         .subscribe((mode) => this.onModeChange(mode));
 
-    protected testForm?: FormGroup;
+    protected testForm = new FormGroup<{testValue: AbstractControl}>({
+        testValue: new FormControl(null),
+    });
 
     protected readonly updateOnVariants = ['change', 'blur', 'submit'] as const;
 
@@ -112,9 +117,14 @@ export class TuiDocDemo implements OnInit {
     @Input()
     public sticky = true;
 
-    public ngOnInit(): void {
-        this.createForm();
-        this.updateWidth(this.sandboxWidth + this.delta);
+    public ngAfterViewInit(): void {
+        timer(0)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+                this.createForm();
+                this.updateWidth(this.sandboxWidth + this.delta);
+                this.rendered.set(true);
+            });
     }
 
     protected onResize(): void {