Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(addon-doc): glitch width content between value from DOM and sandbox width from url #9341

Merged
merged 1 commit into from
Oct 7, 2024
+19 −6
Merged

fix(addon-doc): glitch width content between value from DOM and sandbox width from url #9341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions projects/addon-doc/components/demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
class="t-wrapper"
[attr.tuiTheme]="theme()"
[class.t-wrapper_transparent]="!opaque"
[style.visibility]="rendered() ? 'visible' : 'hidden'"
>
<div class="t-content">
<div
Expand Down
24 changes: 18 additions & 6 deletions projects/addon-doc/components/demo/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import {JsonPipe, Location, NgIf, NgTemplateOutlet} from '@angular/common';
import type {ElementRef, OnInit} from '@angular/core';
import type {AfterViewInit, ElementRef} from '@angular/core';
import {
ChangeDetectionStrategy,
Component,
computed,
ContentChild,
DestroyRef,
inject,
Input,
NgZone,
signal,
TemplateRef,
ViewChild,
Expand All @@ -20,6 +22,7 @@ import {TUI_DOC_DEMO_TEXTS, TUI_DOC_URL_STATE_HANDLER} from '@taiga-ui/addon-doc
import type {TuiDemoParams} from '@taiga-ui/addon-doc/types';
import {tuiCleanObject, tuiCoerceValueIsTrue} from '@taiga-ui/addon-doc/utils';
import {TuiResizable, TuiResizer} from '@taiga-ui/cdk/directives/resizer';
import {tuiZonefreeScheduler} from '@taiga-ui/cdk/observables';
import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
import {tuiClamp, tuiToInteger} from '@taiga-ui/cdk/utils/math';
import {tuiPure, tuiPx} from '@taiga-ui/cdk/utils/miscellaneous';
Expand All @@ -32,7 +35,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;

Expand Down Expand Up @@ -65,7 +68,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>;

Expand All @@ -76,6 +79,8 @@ export class TuiDocDemo implements OnInit {
private readonly resizer?: ElementRef<HTMLElement>;

private readonly el = tuiInjectElement();
private readonly destroyRef = inject(DestroyRef);
private readonly ngZone = inject(NgZone);
private readonly locationRef = inject(Location);
private readonly urlSerializer = inject(UrlSerializer);
private readonly urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
Expand All @@ -84,6 +89,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(
Expand Down Expand Up @@ -112,9 +119,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, tuiZonefreeScheduler(this.ngZone))
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(() => {
this.createForm();
this.updateWidth(this.sandboxWidth + this.delta);
this.rendered.set(true);
});
}

protected onResize(): void {
Expand Down
Loading