From 739ff25f0d8379738fc0032e1c66e50c7b252513 Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Thu, 7 Nov 2024 12:24:18 +0300
Subject: [PATCH 1/3] feat(core): `Dialog` move close button inside dialog

---
 .../components/dialog/dialog.component.ts     |  4 ++
 .../core/components/dialog/dialog.style.less  | 18 +++---
 .../components/dialog/dialog.template.html    | 57 ++++++++++++++-----
 .../components/dialog/examples/8/index.ts     | 14 +++--
 4 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/projects/core/components/dialog/dialog.component.ts b/projects/core/components/dialog/dialog.component.ts
index 756caa2d5f39..35ef8bf7c57d 100644
--- a/projects/core/components/dialog/dialog.component.ts
+++ b/projects/core/components/dialog/dialog.component.ts
@@ -104,6 +104,10 @@ export class TuiDialogComponent<O, I> {
             : this.animation;
     }
 
+    get mobile(): boolean {
+        return this.isMobile;
+    }
+
     get fullscreen(): boolean {
         return !this.isMobile && (this.size === 'fullscreen' || this.size === 'page');
     }
diff --git a/projects/core/components/dialog/dialog.style.less b/projects/core/components/dialog/dialog.style.less
index f3c6f558a8c7..c4770de54cbd 100644
--- a/projects/core/components/dialog/dialog.style.less
+++ b/projects/core/components/dialog/dialog.style.less
@@ -106,6 +106,7 @@
 
 .t-heading {
     margin: 0;
+    padding-inline-end: 2rem;
     word-wrap: break-word;
     font: var(--tui-font-heading-3);
 
@@ -151,26 +152,27 @@
 
 .t-close {
     .transition(background);
-    position: fixed;
-    top: 1.5rem;
-    right: 1.5rem;
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+
     display: none;
-    color: var(--tui-base-01);
+    color: var(--tui-neutral-fill);
 
     :host-context(.t-dialog:last-of-type) & {
         display: block;
     }
 
-    :host:not([data-size='fullscreen']):not([data-size='page']) & {
+    :host:not([data-size='page']) & {
         animation: tuiFadeIn var(--tui-duration);
-        background: rgba(104, 104, 104, 0.96);
+        background: var(--tui-neutral-bg);
 
         &:hover {
-            background: rgba(159, 159, 159, 0.86);
+            background: var(--tui-neutral-bg-hover);
         }
     }
 
-    :host:not([data-size='fullscreen']).ng-animating & {
+    :host.ng-animating & {
         display: none;
     }
 
diff --git a/projects/core/components/dialog/dialog.template.html b/projects/core/components/dialog/dialog.template.html
index 059192a2c5be..01e07257cb63 100644
--- a/projects/core/components/dialog/dialog.template.html
+++ b/projects/core/components/dialog/dialog.template.html
@@ -33,21 +33,50 @@
 <div class="t-filler"></div>
 
 <!-- Close button is insensitive to `context.closeable === Observable<false>` by design -->
-<div
+<button
+    *ngIf="context.closeable"
+    automation-id="tui-dialog__close"
+    shape="rounded"
+    size="s"
+    tuiIconButton
+    type="button"
+    class="t-close"
+    [appearance]="mobile ? 'icon' : ''"
+    [icon]="icons.close"
+    [title]="closeWord$ | async"
+    (click)="close$.next()"
+    (mousedown.prevent.silent)="(0)"
+></button>
+
+<!-- <button
+    automation-id="tui-dialog__close"
+    shape="rounded"
+    size="s"
+    tuiIconButton
+    type="button"
+    class="t-close"
+    [appearance]="fullscreen ? 'secondary' : ''"
+    [icon]="icons.close"
+    [title]="closeWord$ | async"
+    (click)="close$.next()"
+    (mousedown.prevent.silent)="(0)"
+    ></button> -->
+
+<!-- <div
     *ngIf="context.closeable"
     class="t-wrapper"
->
+    >
     <button
-        automation-id="tui-dialog__close"
-        shape="rounded"
-        size="s"
-        tuiIconButton
-        type="button"
-        class="t-close"
-        [appearance]="fullscreen ? 'secondary' : ''"
-        [icon]="icons.close"
-        [title]="closeWord$ | async"
-        (click)="close$.next()"
-        (mousedown.prevent.silent)="(0)"
+    automation-id="tui-dialog__close"
+    shape="rounded"
+    size="s"
+    tuiIconButton
+    type="button"
+    class="t-close"
+    [appearance]="fullscreen ? 'secondary' : ''"
+    [icon]="icons.close"
+    [title]="closeWord$ | async"
+    (click)="close$.next()"
+    (mousedown.prevent.silent)="(0)"
     ></button>
-</div>
+    </div> -->
diff --git a/projects/demo/src/modules/components/dialog/examples/8/index.ts b/projects/demo/src/modules/components/dialog/examples/8/index.ts
index ff1366f55c6d..7d97848d982f 100644
--- a/projects/demo/src/modules/components/dialog/examples/8/index.ts
+++ b/projects/demo/src/modules/components/dialog/examples/8/index.ts
@@ -33,11 +33,13 @@ export class TuiDialogExampleComponent8 {
             },
         });
 
-        this.dialogs.open(content, {closeable, dismissible: closeable}).subscribe({
-            complete: () => {
-                this.value = '';
-                this.dialogForm.markAsPristine();
-            },
-        });
+        this.dialogs
+            .open(content, {label: 'Form', closeable, dismissible: closeable})
+            .subscribe({
+                complete: () => {
+                    this.value = '';
+                    this.dialogForm.markAsPristine();
+                },
+            });
     }
 }

From e06582a2741485e2c843a0e05efa25ef7ed295be Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Thu, 7 Nov 2024 12:55:59 +0300
Subject: [PATCH 2/3] chore(demo): `Dialog` add label to API example

---
 projects/core/components/dialog/dialog.style.less             | 4 +---
 .../demo/src/modules/components/dialog/dialog.component.ts    | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/projects/core/components/dialog/dialog.style.less b/projects/core/components/dialog/dialog.style.less
index c4770de54cbd..aa666f843c72 100644
--- a/projects/core/components/dialog/dialog.style.less
+++ b/projects/core/components/dialog/dialog.style.less
@@ -152,6 +152,7 @@
 
 .t-close {
     .transition(background);
+
     position: absolute;
     top: 1rem;
     right: 1rem;
@@ -177,9 +178,6 @@
     }
 
     :host-context(tui-root._mobile) & {
-        position: absolute;
-        top: 0;
-        right: 0;
         background: transparent !important;
         color: var(--tui-text-01);
         opacity: 0.5;
diff --git a/projects/demo/src/modules/components/dialog/dialog.component.ts b/projects/demo/src/modules/components/dialog/dialog.component.ts
index 8184dab56c9b..47f29d9db1c3 100644
--- a/projects/demo/src/modules/components/dialog/dialog.component.ts
+++ b/projects/demo/src/modules/components/dialog/dialog.component.ts
@@ -145,7 +145,7 @@ export class ExampleTuiDialogComponent {
 
     size: TuiDialogSize = this.sizeVariants[1];
 
-    label = '';
+    label = 'Form';
 
     appearance = '';
 

From 4cb002cada095c75d99d9be4accfd2474d20b030 Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Thu, 7 Nov 2024 12:59:08 +0300
Subject: [PATCH 3/3] chore(core) `Dialog` remove commented lines

---
 .../components/dialog/dialog.template.html    | 33 -------------------
 1 file changed, 33 deletions(-)

diff --git a/projects/core/components/dialog/dialog.template.html b/projects/core/components/dialog/dialog.template.html
index 01e07257cb63..2c7eb72668d8 100644
--- a/projects/core/components/dialog/dialog.template.html
+++ b/projects/core/components/dialog/dialog.template.html
@@ -47,36 +47,3 @@
     (click)="close$.next()"
     (mousedown.prevent.silent)="(0)"
 ></button>
-
-<!-- <button
-    automation-id="tui-dialog__close"
-    shape="rounded"
-    size="s"
-    tuiIconButton
-    type="button"
-    class="t-close"
-    [appearance]="fullscreen ? 'secondary' : ''"
-    [icon]="icons.close"
-    [title]="closeWord$ | async"
-    (click)="close$.next()"
-    (mousedown.prevent.silent)="(0)"
-    ></button> -->
-
-<!-- <div
-    *ngIf="context.closeable"
-    class="t-wrapper"
-    >
-    <button
-    automation-id="tui-dialog__close"
-    shape="rounded"
-    size="s"
-    tuiIconButton
-    type="button"
-    class="t-close"
-    [appearance]="fullscreen ? 'secondary' : ''"
-    [icon]="icons.close"
-    [title]="closeWord$ | async"
-    (click)="close$.next()"
-    (mousedown.prevent.silent)="(0)"
-    ></button>
-    </div> -->