From c3aa5b3cea25fd62a11767b19415044a2bba770d Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Tue, 16 Apr 2024 10:55:15 +0200
Subject: [PATCH 01/50] feat: add dialog component

---
 apps/demo-app/src/app/app.routes.ts           |   8 ++
 .../dialog-sample/dialog-sample.component.css |   0
 .../dialog-sample.component.html              |  16 +++
 .../dialog-sample.component.spec.ts           |  21 ++++
 .../dialog-sample/dialog-sample.component.ts  |  18 +++
 .../pages/overview/overview.component.html    |   3 +
 .../app/pages/overview/overview.component.ts  |   3 +-
 apps/demo-app/src/styles.css                  |   3 +
 libs/sketch/src/index.ts                      |   1 +
 .../components/dialog/dialog.component.css    |   4 +
 .../components/dialog/dialog.component.html   |  50 +++++++++
 .../dialog/dialog.component.spec.ts           |  21 ++++
 .../lib/components/dialog/dialog.component.ts | 105 ++++++++++++++++++
 .../dialog/service/dialog.service.spec.ts     |  16 +++
 .../dialog/service/dialog.service.ts          |  73 ++++++++++++
 src/lib/dialog.service.spec.ts                |  16 +++
 src/lib/dialog.service.ts                     |   9 ++
 17 files changed, 366 insertions(+), 1 deletion(-)
 create mode 100644 apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
 create mode 100644 apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
 create mode 100644 apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.spec.ts
 create mode 100644 apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
 create mode 100644 libs/sketch/src/lib/components/dialog/dialog.component.css
 create mode 100644 libs/sketch/src/lib/components/dialog/dialog.component.html
 create mode 100644 libs/sketch/src/lib/components/dialog/dialog.component.spec.ts
 create mode 100644 libs/sketch/src/lib/components/dialog/dialog.component.ts
 create mode 100644 libs/sketch/src/lib/components/dialog/service/dialog.service.spec.ts
 create mode 100644 libs/sketch/src/lib/components/dialog/service/dialog.service.ts
 create mode 100644 src/lib/dialog.service.spec.ts
 create mode 100644 src/lib/dialog.service.ts

diff --git a/apps/demo-app/src/app/app.routes.ts b/apps/demo-app/src/app/app.routes.ts
index 0708c1d..790ef5c 100644
--- a/apps/demo-app/src/app/app.routes.ts
+++ b/apps/demo-app/src/app/app.routes.ts
@@ -66,4 +66,12 @@ export const appRoutes: Route[] = [
       },
     ],
   },
+  {
+    path: 'dialog-sample',
+    loadComponent: () =>
+      import('./pages/dialog-sample/dialog-sample.component').then(
+        (m) => m.DialogSampleComponent
+      ),
+  },
+  // TODO: Add routes for the other samples
 ];
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
new file mode 100644
index 0000000..971123b
--- /dev/null
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -0,0 +1,16 @@
+<button (click)="openDialog()">open Dialog!</button>
+
+<sk-dialog
+        [open]="isDialogOpen"
+        dialogId="some-tag"
+        (closeRequested)="isDialogOpen = false"
+        [contentTemplate]="contentTemplate"
+>
+        <!--[backdropClass]="backdropClass"
+        [showCloseButton]="showCloseButton"
+        [contentShadow]="contentShadow"
+        [fullscreen]="false"-->
+    <ng-template #contentTemplate>
+      <p>here comes some content</p>
+    </ng-template>
+</sk-dialog>
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.spec.ts b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.spec.ts
new file mode 100644
index 0000000..320f843
--- /dev/null
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DialogSampleComponent } from './dialog-sample.component';
+
+describe('DialogSampleComponent', () => {
+  let component: DialogSampleComponent;
+  let fixture: ComponentFixture<DialogSampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DialogSampleComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DialogSampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
new file mode 100644
index 0000000..f2473a6
--- /dev/null
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DialogComponent } from '@qupaya/sketch';
+
+@Component({
+  selector: 'app-dialog-sample',
+  standalone: true,
+  imports: [CommonModule, DialogComponent],
+  templateUrl: './dialog-sample.component.html',
+  styleUrl: './dialog-sample.component.css',
+})
+export class DialogSampleComponent {
+  isDialogOpen = false;
+
+  openDialog(): void {
+    this.isDialogOpen = true;
+  }
+}
diff --git a/apps/demo-app/src/app/pages/overview/overview.component.html b/apps/demo-app/src/app/pages/overview/overview.component.html
index c972fa2..df7e4f4 100644
--- a/apps/demo-app/src/app/pages/overview/overview.component.html
+++ b/apps/demo-app/src/app/pages/overview/overview.component.html
@@ -7,3 +7,6 @@
 <app-card label="Select component" [routes]="selectRoutes">
   <span>Lorem ipsum dolor...</span>
 </app-card>
+<app-card label="DialogComponent" link="/dialog-sample">
+  <span>Lorem ipsum dolor...</span>
+</app-card>
diff --git a/apps/demo-app/src/app/pages/overview/overview.component.ts b/apps/demo-app/src/app/pages/overview/overview.component.ts
index 2d606a4..219e409 100644
--- a/apps/demo-app/src/app/pages/overview/overview.component.ts
+++ b/apps/demo-app/src/app/pages/overview/overview.component.ts
@@ -3,11 +3,12 @@ import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { CardComponent } from '../../components/card/card.component';
 import { SAMPLE_DATA } from '../list-sample/list-sample.data';
+import { DialogComponent } from '@qupaya/sketch';
 
 @Component({
   selector: 'app-overview',
   standalone: true,
-  imports: [CommonModule, RouterLink, CardComponent],
+  imports: [CommonModule, RouterLink, CardComponent, DialogComponent],
   templateUrl: './overview.component.html',
   styleUrl: './overview.component.css',
 })
diff --git a/apps/demo-app/src/styles.css b/apps/demo-app/src/styles.css
index 8f42865..3fcfc83 100644
--- a/apps/demo-app/src/styles.css
+++ b/apps/demo-app/src/styles.css
@@ -1,6 +1,9 @@
 @import url('@angular/cdk/overlay-prebuilt.css');
 
 /* You can add global styles to this file, and also import other style files */
+
+@import '@angular/cdk/overlay-prebuilt.css';
+
 :root {
   --sk-top-bar-height: 84px;
   --sk-font-family: 'Montserrat', 'Helevetika Neue', sans-serif;
diff --git a/libs/sketch/src/index.ts b/libs/sketch/src/index.ts
index 2b6503c..93531b4 100644
--- a/libs/sketch/src/index.ts
+++ b/libs/sketch/src/index.ts
@@ -1,3 +1,4 @@
 export * from './lib/components/sketch/sketch.component';
 export * from './lib/components/select';
 export * from './lib/components/list';
+export * from './lib/components/dialog/dialog.component';
\ No newline at end of file
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
new file mode 100644
index 0000000..8b2d8af
--- /dev/null
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -0,0 +1,4 @@
+:host {
+    display: block;
+    position: relative;
+}
\ No newline at end of file
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
new file mode 100644
index 0000000..b6052e9
--- /dev/null
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -0,0 +1,50 @@
+<ng-template #contentWrapperTemplate>
+    <div
+            class="w-full h-screen max-w-full max-h-screen relative"
+            [ngClass]="{ 'q-common-cdk-dialog-without-close-button': !showCloseButton() }"
+            role="dialog"
+    >
+        <div
+                class="absolute top-0 left-0 flex w-full h-full max-w-full max-h-full items-center justify-center"
+                data-testId="dialog-backdrop"
+                (click)="closeRequested.emit()"
+        ></div>
+        <div
+                class="absolute top-0 left-0 flex w-full h-full max-w-full max-h-full items-center justify-center pointer-events-none print:relative"
+        >
+            <div
+                    class="q-common-cdk-dialog-projected-content-wrapper max-h-full"
+                    [ngClass]="{
+          'q-common-cdk-dialog-projected-content-with-shadow': contentShadow()
+        }"
+            >
+                <div
+                        class="q-common-cdk-dialog-projected-content"
+                        [ngClass]="{
+            fullscreen: fullscreen(),
+            '!overflow-hidden': preventContentScrolling()
+          }"
+                        [attr.data-q-dialog-tag]="dialogId()"
+                        [cdkTrapFocus]="true"
+                        [cdkTrapFocusAutoCapture]="focusAutoCapture()"
+                        (keydown.escape)="closeRequested.emit()"
+                        #projectedContent
+                >
+                    <ng-container
+                            [ngTemplateOutlet]="contentTemplate()"
+                    ></ng-container>
+                </div>
+                <button
+                        *ngIf="showCloseButton()"
+                        type="button"
+                        title="Schließen"
+                        class="q-common-cdk-dialog-close-button fill-surface absolute cursor-pointer"
+                        data-testId="q-common-cdk-dialog-close-button"
+                        (click)="closeRequested.emit()"
+                >
+                    <p>close</p> <!--TODO: add SVG-->
+                </button>
+            </div>
+        </div>
+    </div>
+</ng-template>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.spec.ts b/libs/sketch/src/lib/components/dialog/dialog.component.spec.ts
new file mode 100644
index 0000000..124e351
--- /dev/null
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DialogComponent } from './dialog.component';
+
+describe('DialogComponent', () => {
+  let component: DialogComponent;
+  let fixture: ComponentFixture<DialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DialogComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
new file mode 100644
index 0000000..765b377
--- /dev/null
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -0,0 +1,105 @@
+import {
+  Component,
+  HostBinding,
+  TemplateRef,
+  ViewContainerRef,
+  ViewEncapsulation,
+  effect,
+  inject,
+  input,
+  output,
+  signal,
+  viewChild,
+  OnDestroy,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { DialogService } from './service/dialog.service';
+
+@Component({
+  selector: 'sk-dialog[dialogId]',
+  standalone: true,
+  imports: [CommonModule, CdkTrapFocus, OverlayModule],
+  providers: [DialogService],
+  templateUrl: './dialog.component.html',
+  styleUrl: './dialog.component.css',
+  encapsulation: ViewEncapsulation.ShadowDom,
+})
+export class DialogComponent implements OnDestroy {
+  public static readonly defaultBackgroundClass = 'bg-[#00070ba1]';
+
+  private readonly dialogService = inject(DialogService);
+  private readonly viewContainerRef = inject(ViewContainerRef);
+
+  readonly dialogContentTemplate = signal<TemplateRef<unknown> | undefined>(
+    undefined
+  );
+
+  @HostBinding('attr.data-dialog-tag')
+  private _dialogId!: string;
+
+  open = input(false);
+
+  backdropClass = input<string[]>([DialogComponent.defaultBackgroundClass]);
+
+  contentTemplate = input<TemplateRef<unknown> | null>(null);
+
+  /**
+   * Whether the CDK directive cdkTrapFocusAutoCapture should automatically move focus into the trapped region upon initialization and return focus to the previous activeElement upon destruction.
+   *
+   * This can not be desired when the popup is really long and the first button is not visible at start, otherwise the popup will scroll to the first button position!
+   */
+  readonly focusAutoCapture = input<boolean>(true);
+
+  /**
+   * Useful when you want to control how your content is scrolled.
+   */
+  readonly preventContentScrolling = input<boolean>(false);
+
+  /**
+   * It will be appended to the rendered overlay in this way:
+   * ```
+   * [dialogId]="my-tag-name"
+   *
+   * <div data-q-dialog-tag="my-tag-name">
+   * ```
+   */
+  readonly dialogId = input('');
+
+  readonly contentShadow = input<boolean>(true);
+
+  readonly showCloseButton = input<boolean>(true);
+
+  readonly fullscreen = input<boolean>(false);
+
+  readonly closeRequested = output<void>();
+
+  private readonly contentWrapperTemplate = viewChild.required<
+    TemplateRef<HTMLElement>
+  >('contentWrapperTemplate');
+
+  protected readonly updateDialogId = effect(
+    () => (this._dialogId = this.dialogId())
+  );
+
+  protected readonly openEvents = effect(
+    () => {
+      if (this.open()) {
+        this.dialogService.open({
+          template: this.contentWrapperTemplate(),
+          viewContainerRef: this.viewContainerRef,
+          backdropClass: this.backdropClass(),
+          tag: this.dialogId(),
+        });
+      } else {
+        this.dialogService.close(this.dialogId());
+      }
+    },
+    { allowSignalWrites: true }
+  );
+
+  ngOnDestroy(): void {
+    this.dialogService.close(this._dialogId);
+  }
+}
diff --git a/libs/sketch/src/lib/components/dialog/service/dialog.service.spec.ts b/libs/sketch/src/lib/components/dialog/service/dialog.service.spec.ts
new file mode 100644
index 0000000..016507e
--- /dev/null
+++ b/libs/sketch/src/lib/components/dialog/service/dialog.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DialogService } from './dialog.service';
+
+describe('DialogService', () => {
+  let service: DialogService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DialogService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/libs/sketch/src/lib/components/dialog/service/dialog.service.ts b/libs/sketch/src/lib/components/dialog/service/dialog.service.ts
new file mode 100644
index 0000000..0954299
--- /dev/null
+++ b/libs/sketch/src/lib/components/dialog/service/dialog.service.ts
@@ -0,0 +1,73 @@
+import {
+  Injectable,
+  Optional,
+  ViewContainerRef,
+  TemplateRef,
+} from '@angular/core';
+import {
+  Overlay,
+  OverlayRef,
+  ScrollStrategyOptions,
+} from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+
+interface OpenDialogParams {
+  template: TemplateRef<unknown>;
+  viewContainerRef: ViewContainerRef;
+  backdropClass: string[];
+  tag: string;
+}
+
+@Injectable()
+export class DialogService {
+  static dialogIdName = 'data-dialog-tag';
+
+  constructor(
+    @Optional() private readonly overlay: Overlay,
+    private readonly scrollStrategyOptions: ScrollStrategyOptions
+  ) {
+    if (!overlay) {
+      throw new Error(
+        'The Dialog service needs that you inject OverlayModule into your (Lazy load module)'
+      );
+    }
+  }
+
+  private readonly overlaysMap = new Map<string, OverlayRef>();
+
+  open(params: OpenDialogParams): void {
+    if (this.overlaysMap.has(params.tag)) {
+      throw Error(
+        `The Dialog service has already an overlay with the same tag "${params.tag}"`
+      );
+    }
+    const overlayRef = this.overlay.create({
+      hasBackdrop: true,
+      backdropClass: params.backdropClass,
+      width: '100%',
+      height: '100%',
+      disposeOnNavigation: true,
+      scrollStrategy: this.scrollStrategyOptions.block(),
+    });
+    const dialogPortal = new TemplatePortal(
+      params.template,
+      params.viewContainerRef
+    );
+    overlayRef.attach(dialogPortal);
+    overlayRef.hostElement.setAttribute(DialogService.dialogIdName, params.tag);
+    this.overlaysMap.set(params.tag, overlayRef);
+  }
+
+  close(tag: string): void {
+    if (this.overlaysMap.size > 0) {
+      if (this.overlaysMap.has(tag)) {
+        const overlay = this.overlaysMap.get(tag);
+        if (overlay) {
+          overlay.detach();
+          overlay.dispose();
+          this.overlaysMap.delete(tag);
+        }
+      }
+    }
+  }
+}
diff --git a/src/lib/dialog.service.spec.ts b/src/lib/dialog.service.spec.ts
new file mode 100644
index 0000000..016507e
--- /dev/null
+++ b/src/lib/dialog.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DialogService } from './dialog.service';
+
+describe('DialogService', () => {
+  let service: DialogService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DialogService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/lib/dialog.service.ts b/src/lib/dialog.service.ts
new file mode 100644
index 0000000..7d06965
--- /dev/null
+++ b/src/lib/dialog.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DialogService {
+
+  constructor() { }
+}

From e9caceddfc0c30e8376d65867de79ebbcac1a8c8 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Tue, 16 Apr 2024 11:33:44 +0200
Subject: [PATCH 02/50] refactor: change open to model

---
 .../dialog-sample.component.html              | 16 ++--
 .../components/dialog/dialog.component.html   | 79 ++++++++++---------
 .../lib/components/dialog/dialog.component.ts |  8 +-
 3 files changed, 50 insertions(+), 53 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index 971123b..a2ca3e8 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -1,16 +1,16 @@
 <button (click)="openDialog()">open Dialog!</button>
 
 <sk-dialog
-        [open]="isDialogOpen"
-        dialogId="some-tag"
-        (closeRequested)="isDialogOpen = false"
-        [contentTemplate]="contentTemplate"
+  [(open)]="isDialogOpen"
+  dialogId="some-tag"
+  (closeRequested)="isDialogOpen = false"
+  [contentTemplate]="contentTemplate"
 >
-        <!--[backdropClass]="backdropClass"
+  <!--[backdropClass]="backdropClass"
         [showCloseButton]="showCloseButton"
         [contentShadow]="contentShadow"
         [fullscreen]="false"-->
-    <ng-template #contentTemplate>
-      <p>here comes some content</p>
-    </ng-template>
+  <ng-template #contentTemplate>
+    <p>here comes some content</p>
+  </ng-template>
 </sk-dialog>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index b6052e9..264c22e 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -1,50 +1,51 @@
 <ng-template #contentWrapperTemplate>
+  <div
+    class="w-full h-screen max-w-full max-h-screen relative"
+    [ngClass]="{
+      'q-common-cdk-dialog-without-close-button': !showCloseButton()
+    }"
+    role="dialog"
+  >
     <div
-            class="w-full h-screen max-w-full max-h-screen relative"
-            [ngClass]="{ 'q-common-cdk-dialog-without-close-button': !showCloseButton() }"
-            role="dialog"
+      class="absolute top-0 left-0 flex w-full h-full max-w-full max-h-full items-center justify-center"
+      data-testId="dialog-backdrop"
+      (click)="closeRequested.emit()"
+    ></div>
+    <div
+      class="absolute top-0 left-0 flex w-full h-full max-w-full max-h-full items-center justify-center pointer-events-none print:relative"
     >
-        <div
-                class="absolute top-0 left-0 flex w-full h-full max-w-full max-h-full items-center justify-center"
-                data-testId="dialog-backdrop"
-                (click)="closeRequested.emit()"
-        ></div>
-        <div
-                class="absolute top-0 left-0 flex w-full h-full max-w-full max-h-full items-center justify-center pointer-events-none print:relative"
-        >
-            <div
-                    class="q-common-cdk-dialog-projected-content-wrapper max-h-full"
-                    [ngClass]="{
+      <div
+        class="q-common-cdk-dialog-projected-content-wrapper max-h-full"
+        [ngClass]="{
           'q-common-cdk-dialog-projected-content-with-shadow': contentShadow()
         }"
-            >
-                <div
-                        class="q-common-cdk-dialog-projected-content"
-                        [ngClass]="{
+      >
+        <div
+          class="q-common-cdk-dialog-projected-content"
+          [ngClass]="{
             fullscreen: fullscreen(),
             '!overflow-hidden': preventContentScrolling()
           }"
-                        [attr.data-q-dialog-tag]="dialogId()"
-                        [cdkTrapFocus]="true"
-                        [cdkTrapFocusAutoCapture]="focusAutoCapture()"
-                        (keydown.escape)="closeRequested.emit()"
-                        #projectedContent
-                >
-                    <ng-container
-                            [ngTemplateOutlet]="contentTemplate()"
-                    ></ng-container>
-                </div>
-                <button
-                        *ngIf="showCloseButton()"
-                        type="button"
-                        title="Schließen"
-                        class="q-common-cdk-dialog-close-button fill-surface absolute cursor-pointer"
-                        data-testId="q-common-cdk-dialog-close-button"
-                        (click)="closeRequested.emit()"
-                >
-                    <p>close</p> <!--TODO: add SVG-->
-                </button>
-            </div>
+          [attr.data-q-dialog-tag]="dialogId()"
+          [cdkTrapFocus]="true"
+          [cdkTrapFocusAutoCapture]="focusAutoCapture()"
+          (keydown.escape)="closeRequested.emit()"
+          #projectedContent
+        >
+          <ng-container [ngTemplateOutlet]="contentTemplate()"></ng-container>
         </div>
+        <button
+          *ngIf="showCloseButton()"
+          type="button"
+          title="Schließen"
+          class="q-common-cdk-dialog-close-button fill-surface absolute cursor-pointer"
+          data-testId="q-common-cdk-dialog-close-button"
+          (click)="closeRequested.emit()"
+        >
+          close
+          <!--TODO: add SVG-->
+        </button>
+      </div>
     </div>
+  </div>
 </ng-template>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index 765b377..920d0a9 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -8,9 +8,9 @@ import {
   inject,
   input,
   output,
-  signal,
   viewChild,
   OnDestroy,
+  model,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
@@ -32,14 +32,10 @@ export class DialogComponent implements OnDestroy {
   private readonly dialogService = inject(DialogService);
   private readonly viewContainerRef = inject(ViewContainerRef);
 
-  readonly dialogContentTemplate = signal<TemplateRef<unknown> | undefined>(
-    undefined
-  );
-
   @HostBinding('attr.data-dialog-tag')
   private _dialogId!: string;
 
-  open = input(false);
+  open = model(false);
 
   backdropClass = input<string[]>([DialogComponent.defaultBackgroundClass]);
 

From 5fc1986134ec3e3ba80ee3f68ae9d8dfe3924698 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 17 Apr 2024 09:39:31 +0200
Subject: [PATCH 03/50] style: position dialog in center

---
 .../dialog-sample/dialog-sample.component.css |  13 ++
 .../dialog-sample.component.html              |  14 +-
 .../components/dialog/dialog.component.css    | 161 +++++++++++++++++-
 .../components/dialog/dialog.component.html   |  16 +-
 .../lib/components/dialog/dialog.component.ts |  20 ++-
 .../dialog/service/dialog.service.ts          |   8 +
 6 files changed, 206 insertions(+), 26 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index e69de29..5dccc16 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -0,0 +1,13 @@
+.my-backdrop {
+  background-color: green;
+}
+
+button {
+  cursor: pointer;
+}
+
+.my-super-styling-class {
+  background-color: red;
+  border-radius: 50px;
+  padding: 10px;
+}
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index a2ca3e8..7c7a4f7 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -2,15 +2,17 @@
 
 <sk-dialog
   [(open)]="isDialogOpen"
-  dialogId="some-tag"
+  dialogId="test-dialog-id"
   (closeRequested)="isDialogOpen = false"
   [contentTemplate]="contentTemplate"
+  [showCloseButton]="true"
+  [fullscreen]="true"
+  [backdropClass]="['my-backdrop']"
+  [contentShadow]="true"
 >
-  <!--[backdropClass]="backdropClass"
-        [showCloseButton]="showCloseButton"
-        [contentShadow]="contentShadow"
-        [fullscreen]="false"-->
   <ng-template #contentTemplate>
-    <p>here comes some content</p>
+    <div class="my-super-styling-class">
+      <p>here comes some content</p>
+    </div>
   </ng-template>
 </sk-dialog>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index 8b2d8af..7d8f971 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -1,4 +1,161 @@
 :host {
-    display: block;
     position: relative;
-}
\ No newline at end of file
+}
+
+.dialog-outer-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    max-width: 100%;
+    max-height: 100vh;
+}
+
+.dialog-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    min-width: 100%;
+    min-height: 100%;
+}
+
+.dialog-outer-content-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    pointer-events: none;
+}
+
+.hidden-overflow {
+    overflow: hidden !important;
+}
+
+.q-common-cdk-dialog-projected-content-with-shadow {
+    box-shadow: -1px 3px 10px -2px #1f1f1f;
+}
+
+.q-common-cdk-dialog-projected-content-wrapper {
+    position: relative;
+    pointer-events: all;
+    max-height: 100%;
+}
+
+.q-common-cdk-dialog-projected-content {
+    overflow: auto;
+    max-width: calc(100vw - 1rem);
+    max-height: calc(95vh - 3rem);
+    max-height: calc(100dvh - 3rem);
+    border-radius: 4px;
+    margin: auto;
+}
+
+.q-common-cdk-dialog-without-close-button
+.q-common-cdk-dialog-projected-content {
+    max-height: calc(95vh - 1rem);
+    max-height: calc(100dvh - 1rem);
+}
+
+.q-common-cdk-dialog-without-close-button.fullscreen
+.q-common-cdk-dialog-projected-content {
+    max-width: 95vw;
+    max-width: 100dvw;
+    max-height: 95vh;
+    max-height: 100dvh;
+}
+
+.q-common-cdk-dialog-projected-content.fullscreen {
+    max-width: 95vw;
+    max-width: 100dvw;
+    max-height: 95vh;
+    max-height: 100dvh;
+}
+
+.q-common-cdk-dialog-without-close-button
+.q-common-cdk-dialog-projected-content.fullscreen {
+    max-width: 95vw;
+    max-width: 100dvw;
+    max-height: 95vh;
+    max-height: 100dvh;
+}
+
+.q-common-cdk-dialog-close-button {
+    top: -1.5rem;
+    right: 0;
+    fill: black;
+    position: absolute;
+    cursor: pointer;
+}
+
+.q-common-cdk-dialog-close-button svg {
+    filter: drop-shadow(-1px 2px 2px #1f1f1f);
+}
+
+.cdk-overlay-pane {
+    border-radius: 8px;
+}
+
+/*
+@screen sm {
+    .q-common-cdk-dialog-projected-content {
+        overflow: auto;
+        max-width: calc(100vw - 4rem);
+        max-height: calc(95vh - 4rem);
+        max-height: calc(100dvh - 4rem);
+        margin: auto;
+    }
+
+    .q-common-cdk-dialog-without-close-button
+    .q-common-cdk-dialog-projected-content {
+        max-width: calc(100vw - 1rem);
+        max-height: calc(95vh - 1rem);
+        max-height: calc(100dvh - 1rem);
+    }
+
+    .q-common-cdk-dialog-close-button {
+        top: -1.5rem;
+        right: -1.5rem;
+    }
+}
+
+@screen md {
+    .q-common-cdk-dialog-projected-content-wrapper {
+        @apply relative m-8;
+    }
+}
+
+html.cdk-global-scrollblock {
+    @apply !overscroll-none;
+}
+
+!* print *!
+@media print {
+    html.cdk-global-scrollblock {
+        @apply !relative !overflow-visible;
+    }
+
+    html.cdk-global-scrollblock q-root,
+    html.cdk-global-scrollblock .cdk-overlay-backdrop {
+        @apply hidden;
+    }
+
+    html.cdk-global-scrollblock .cdk-overlay-container,
+    html.cdk-global-scrollblock .cdk-overlay-pane,
+    html.cdk-global-scrollblock .q-common-cdk-dialog-projected-content {
+        @apply !relative !w-full !h-auto max-h-none max-w-none;
+    }
+
+    html.cdk-global-scrollblock .q-common-cdk-dialog-projected-content-wrapper {
+        @apply m-0;
+    }
+} */
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 264c22e..b658035 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -1,21 +1,19 @@
 <ng-template #contentWrapperTemplate>
   <div
-    class="w-full h-screen max-w-full max-h-screen relative"
+    class="dialog-outer-wrapper"
     [ngClass]="{
       'q-common-cdk-dialog-without-close-button': !showCloseButton()
     }"
     role="dialog"
   >
     <div
-      class="absolute top-0 left-0 flex w-full h-full max-w-full max-h-full items-center justify-center"
+      class="dialog-backdrop"
       data-testId="dialog-backdrop"
-      (click)="closeRequested.emit()"
+      (click)="closeRequested.emit(); console.log('backdrop has been clicked')"
     ></div>
-    <div
-      class="absolute top-0 left-0 flex w-full h-full max-w-full max-h-full items-center justify-center pointer-events-none print:relative"
-    >
+    <div class="dialog-outer-content-wrapper">
       <div
-        class="q-common-cdk-dialog-projected-content-wrapper max-h-full"
+        class="q-common-cdk-dialog-projected-content-wrapper"
         [ngClass]="{
           'q-common-cdk-dialog-projected-content-with-shadow': contentShadow()
         }"
@@ -24,7 +22,7 @@
           class="q-common-cdk-dialog-projected-content"
           [ngClass]="{
             fullscreen: fullscreen(),
-            '!overflow-hidden': preventContentScrolling()
+            'hidden-overflow': preventContentScrolling()
           }"
           [attr.data-q-dialog-tag]="dialogId()"
           [cdkTrapFocus]="true"
@@ -38,7 +36,7 @@
           *ngIf="showCloseButton()"
           type="button"
           title="Schließen"
-          class="q-common-cdk-dialog-close-button fill-surface absolute cursor-pointer"
+          class="q-common-cdk-dialog-close-button"
           data-testId="q-common-cdk-dialog-close-button"
           (click)="closeRequested.emit()"
         >
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index 920d0a9..16d4f71 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -3,7 +3,6 @@ import {
   HostBinding,
   TemplateRef,
   ViewContainerRef,
-  ViewEncapsulation,
   effect,
   inject,
   input,
@@ -11,6 +10,7 @@ import {
   viewChild,
   OnDestroy,
   model,
+  ViewEncapsulation,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
@@ -24,7 +24,7 @@ import { DialogService } from './service/dialog.service';
   providers: [DialogService],
   templateUrl: './dialog.component.html',
   styleUrl: './dialog.component.css',
-  encapsulation: ViewEncapsulation.ShadowDom,
+  encapsulation: ViewEncapsulation.None,
 })
 export class DialogComponent implements OnDestroy {
   public static readonly defaultBackgroundClass = 'bg-[#00070ba1]';
@@ -46,12 +46,12 @@ export class DialogComponent implements OnDestroy {
    *
    * This can not be desired when the popup is really long and the first button is not visible at start, otherwise the popup will scroll to the first button position!
    */
-  readonly focusAutoCapture = input<boolean>(true);
+  focusAutoCapture = input<boolean>(true);
 
   /**
    * Useful when you want to control how your content is scrolled.
    */
-  readonly preventContentScrolling = input<boolean>(false);
+  preventContentScrolling = input<boolean>(false);
 
   /**
    * It will be appended to the rendered overlay in this way:
@@ -61,15 +61,15 @@ export class DialogComponent implements OnDestroy {
    * <div data-q-dialog-tag="my-tag-name">
    * ```
    */
-  readonly dialogId = input('');
+  dialogId = input('');
 
-  readonly contentShadow = input<boolean>(true);
+  contentShadow = input<boolean>(true);
 
-  readonly showCloseButton = input<boolean>(true);
+  showCloseButton = input<boolean>(true);
 
-  readonly fullscreen = input<boolean>(false);
+  fullscreen = input<boolean>(false);
 
-  readonly closeRequested = output<void>();
+  closeRequested = output<void>();
 
   private readonly contentWrapperTemplate = viewChild.required<
     TemplateRef<HTMLElement>
@@ -98,4 +98,6 @@ export class DialogComponent implements OnDestroy {
   ngOnDestroy(): void {
     this.dialogService.close(this._dialogId);
   }
+
+  protected readonly console = console;
 }
diff --git a/libs/sketch/src/lib/components/dialog/service/dialog.service.ts b/libs/sketch/src/lib/components/dialog/service/dialog.service.ts
index 0954299..cfa1927 100644
--- a/libs/sketch/src/lib/components/dialog/service/dialog.service.ts
+++ b/libs/sketch/src/lib/components/dialog/service/dialog.service.ts
@@ -41,12 +41,20 @@ export class DialogService {
         `The Dialog service has already an overlay with the same tag "${params.tag}"`
       );
     }
+
+    const positionStrategy = this.overlay
+      .position()
+      .global()
+      .centerVertically()
+      .centerHorizontally();
+
     const overlayRef = this.overlay.create({
       hasBackdrop: true,
       backdropClass: params.backdropClass,
       width: '100%',
       height: '100%',
       disposeOnNavigation: true,
+      positionStrategy,
       scrollStrategy: this.scrollStrategyOptions.block(),
     });
     const dialogPortal = new TemplatePortal(

From 412b2738f363475ed2b905bd60142a8cbb0da7ab Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 17 Apr 2024 12:09:33 +0200
Subject: [PATCH 04/50] refactor: change/simplify dialog implementation

---
 .../dialog-sample.component.html              |  12 +-
 .../dialog-sample/dialog-sample.component.ts  |   4 -
 .../components/dialog/dialog.component.css    | 165 +-----------------
 .../components/dialog/dialog.component.html   |  68 +++-----
 .../lib/components/dialog/dialog.component.ts |  67 ++-----
 .../click-backdrop.directive.spec.ts          |   8 +
 .../directive/click-backdrop.directive.ts     |  25 +++
 .../dialog/service/dialog.service.spec.ts     |  16 --
 .../dialog/service/dialog.service.ts          |  81 ---------
 9 files changed, 75 insertions(+), 371 deletions(-)
 create mode 100644 libs/sketch/src/lib/components/dialog/directive/click-backdrop.directive.spec.ts
 create mode 100644 libs/sketch/src/lib/components/dialog/directive/click-backdrop.directive.ts
 delete mode 100644 libs/sketch/src/lib/components/dialog/service/dialog.service.spec.ts
 delete mode 100644 libs/sketch/src/lib/components/dialog/service/dialog.service.ts

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index 7c7a4f7..ada99a9 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -1,18 +1,14 @@
-<button (click)="openDialog()">open Dialog!</button>
+<button (click)="isDialogOpen = true">open Dialog!</button>
 
 <sk-dialog
   [(open)]="isDialogOpen"
   dialogId="test-dialog-id"
   (closeRequested)="isDialogOpen = false"
-  [contentTemplate]="contentTemplate"
   [showCloseButton]="true"
   [fullscreen]="true"
   [backdropClass]="['my-backdrop']"
-  [contentShadow]="true"
 >
-  <ng-template #contentTemplate>
-    <div class="my-super-styling-class">
-      <p>here comes some content</p>
-    </div>
-  </ng-template>
+  <div class="my-super-styling-class">
+    <p>here comes some content</p>
+  </div>
 </sk-dialog>
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
index f2473a6..356ee5a 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
@@ -11,8 +11,4 @@ import { DialogComponent } from '@qupaya/sketch';
 })
 export class DialogSampleComponent {
   isDialogOpen = false;
-
-  openDialog(): void {
-    this.isDialogOpen = true;
-  }
 }
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index 7d8f971..2ec237d 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -1,161 +1,6 @@
-:host {
-    position: relative;
+dialog {
+  padding: 0;
+  border: none;
+  outline: none;
+  background-color: transparent;
 }
-
-.dialog-outer-wrapper {
-    position: relative;
-    width: 100%;
-    height: 100vh;
-    max-width: 100%;
-    max-height: 100vh;
-}
-
-.dialog-backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    min-width: 100%;
-    min-height: 100%;
-}
-
-.dialog-outer-content-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    pointer-events: none;
-}
-
-.hidden-overflow {
-    overflow: hidden !important;
-}
-
-.q-common-cdk-dialog-projected-content-with-shadow {
-    box-shadow: -1px 3px 10px -2px #1f1f1f;
-}
-
-.q-common-cdk-dialog-projected-content-wrapper {
-    position: relative;
-    pointer-events: all;
-    max-height: 100%;
-}
-
-.q-common-cdk-dialog-projected-content {
-    overflow: auto;
-    max-width: calc(100vw - 1rem);
-    max-height: calc(95vh - 3rem);
-    max-height: calc(100dvh - 3rem);
-    border-radius: 4px;
-    margin: auto;
-}
-
-.q-common-cdk-dialog-without-close-button
-.q-common-cdk-dialog-projected-content {
-    max-height: calc(95vh - 1rem);
-    max-height: calc(100dvh - 1rem);
-}
-
-.q-common-cdk-dialog-without-close-button.fullscreen
-.q-common-cdk-dialog-projected-content {
-    max-width: 95vw;
-    max-width: 100dvw;
-    max-height: 95vh;
-    max-height: 100dvh;
-}
-
-.q-common-cdk-dialog-projected-content.fullscreen {
-    max-width: 95vw;
-    max-width: 100dvw;
-    max-height: 95vh;
-    max-height: 100dvh;
-}
-
-.q-common-cdk-dialog-without-close-button
-.q-common-cdk-dialog-projected-content.fullscreen {
-    max-width: 95vw;
-    max-width: 100dvw;
-    max-height: 95vh;
-    max-height: 100dvh;
-}
-
-.q-common-cdk-dialog-close-button {
-    top: -1.5rem;
-    right: 0;
-    fill: black;
-    position: absolute;
-    cursor: pointer;
-}
-
-.q-common-cdk-dialog-close-button svg {
-    filter: drop-shadow(-1px 2px 2px #1f1f1f);
-}
-
-.cdk-overlay-pane {
-    border-radius: 8px;
-}
-
-/*
-@screen sm {
-    .q-common-cdk-dialog-projected-content {
-        overflow: auto;
-        max-width: calc(100vw - 4rem);
-        max-height: calc(95vh - 4rem);
-        max-height: calc(100dvh - 4rem);
-        margin: auto;
-    }
-
-    .q-common-cdk-dialog-without-close-button
-    .q-common-cdk-dialog-projected-content {
-        max-width: calc(100vw - 1rem);
-        max-height: calc(95vh - 1rem);
-        max-height: calc(100dvh - 1rem);
-    }
-
-    .q-common-cdk-dialog-close-button {
-        top: -1.5rem;
-        right: -1.5rem;
-    }
-}
-
-@screen md {
-    .q-common-cdk-dialog-projected-content-wrapper {
-        @apply relative m-8;
-    }
-}
-
-html.cdk-global-scrollblock {
-    @apply !overscroll-none;
-}
-
-!* print *!
-@media print {
-    html.cdk-global-scrollblock {
-        @apply !relative !overflow-visible;
-    }
-
-    html.cdk-global-scrollblock q-root,
-    html.cdk-global-scrollblock .cdk-overlay-backdrop {
-        @apply hidden;
-    }
-
-    html.cdk-global-scrollblock .cdk-overlay-container,
-    html.cdk-global-scrollblock .cdk-overlay-pane,
-    html.cdk-global-scrollblock .q-common-cdk-dialog-projected-content {
-        @apply !relative !w-full !h-auto max-h-none max-w-none;
-    }
-
-    html.cdk-global-scrollblock .q-common-cdk-dialog-projected-content-wrapper {
-        @apply m-0;
-    }
-} */
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index b658035..011e4a6 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -1,49 +1,21 @@
-<ng-template #contentWrapperTemplate>
-  <div
-    class="dialog-outer-wrapper"
-    [ngClass]="{
-      'q-common-cdk-dialog-without-close-button': !showCloseButton()
-    }"
-    role="dialog"
-  >
-    <div
-      class="dialog-backdrop"
-      data-testId="dialog-backdrop"
-      (click)="closeRequested.emit(); console.log('backdrop has been clicked')"
-    ></div>
-    <div class="dialog-outer-content-wrapper">
-      <div
-        class="q-common-cdk-dialog-projected-content-wrapper"
-        [ngClass]="{
-          'q-common-cdk-dialog-projected-content-with-shadow': contentShadow()
-        }"
-      >
-        <div
-          class="q-common-cdk-dialog-projected-content"
-          [ngClass]="{
-            fullscreen: fullscreen(),
-            'hidden-overflow': preventContentScrolling()
-          }"
-          [attr.data-q-dialog-tag]="dialogId()"
-          [cdkTrapFocus]="true"
-          [cdkTrapFocusAutoCapture]="focusAutoCapture()"
-          (keydown.escape)="closeRequested.emit()"
-          #projectedContent
-        >
-          <ng-container [ngTemplateOutlet]="contentTemplate()"></ng-container>
-        </div>
-        <button
-          *ngIf="showCloseButton()"
-          type="button"
-          title="Schließen"
-          class="q-common-cdk-dialog-close-button"
-          data-testId="q-common-cdk-dialog-close-button"
-          (click)="closeRequested.emit()"
-        >
-          close
-          <!--TODO: add SVG-->
-        </button>
-      </div>
-    </div>
+<dialog
+  #dialogElement
+  skClickBackdrop
+  (keydown.escape)="closeRequested.emit()"
+  (clickedBackdrop)="closeRequested.emit()"
+>
+  <div>
+    <ng-content></ng-content>
+    @if (showCloseButton()) {
+    <button
+      type="button"
+      title="Schließen"
+      data-testId="q-common-cdk-dialog-close-button"
+      (click)="closeRequested.emit()"
+    >
+      close
+      <!--TODO: add SVG-->
+    </button>
+    }
   </div>
-</ng-template>
+</dialog>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index 16d4f71..805e7b9 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -1,58 +1,31 @@
 import {
   Component,
-  HostBinding,
-  TemplateRef,
-  ViewContainerRef,
   effect,
-  inject,
   input,
   output,
   viewChild,
-  OnDestroy,
   model,
   ViewEncapsulation,
+  untracked,
+  ElementRef,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CdkTrapFocus } from '@angular/cdk/a11y';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { DialogService } from './service/dialog.service';
+import { ClickBackdropDirective } from './directive/click-backdrop.directive';
 
 @Component({
   selector: 'sk-dialog[dialogId]',
   standalone: true,
-  imports: [CommonModule, CdkTrapFocus, OverlayModule],
-  providers: [DialogService],
+  imports: [ClickBackdropDirective],
   templateUrl: './dialog.component.html',
   styleUrl: './dialog.component.css',
-  encapsulation: ViewEncapsulation.None,
+  encapsulation: ViewEncapsulation.ShadowDom,
 })
-export class DialogComponent implements OnDestroy {
+export class DialogComponent {
   public static readonly defaultBackgroundClass = 'bg-[#00070ba1]';
 
-  private readonly dialogService = inject(DialogService);
-  private readonly viewContainerRef = inject(ViewContainerRef);
-
-  @HostBinding('attr.data-dialog-tag')
-  private _dialogId!: string;
-
   open = model(false);
 
   backdropClass = input<string[]>([DialogComponent.defaultBackgroundClass]);
 
-  contentTemplate = input<TemplateRef<unknown> | null>(null);
-
-  /**
-   * Whether the CDK directive cdkTrapFocusAutoCapture should automatically move focus into the trapped region upon initialization and return focus to the previous activeElement upon destruction.
-   *
-   * This can not be desired when the popup is really long and the first button is not visible at start, otherwise the popup will scroll to the first button position!
-   */
-  focusAutoCapture = input<boolean>(true);
-
-  /**
-   * Useful when you want to control how your content is scrolled.
-   */
-  preventContentScrolling = input<boolean>(false);
-
   /**
    * It will be appended to the rendered overlay in this way:
    * ```
@@ -63,7 +36,7 @@ export class DialogComponent implements OnDestroy {
    */
   dialogId = input('');
 
-  contentShadow = input<boolean>(true);
+  // contentShadow = input<boolean>(true);
 
   showCloseButton = input<boolean>(true);
 
@@ -71,33 +44,19 @@ export class DialogComponent implements OnDestroy {
 
   closeRequested = output<void>();
 
-  private readonly contentWrapperTemplate = viewChild.required<
-    TemplateRef<HTMLElement>
-  >('contentWrapperTemplate');
-
-  protected readonly updateDialogId = effect(
-    () => (this._dialogId = this.dialogId())
-  );
+  private readonly dialogElement =
+    viewChild.required<ElementRef<HTMLDialogElement>>('dialogElement');
 
   protected readonly openEvents = effect(
     () => {
+      const dialog = untracked(this.dialogElement);
+
       if (this.open()) {
-        this.dialogService.open({
-          template: this.contentWrapperTemplate(),
-          viewContainerRef: this.viewContainerRef,
-          backdropClass: this.backdropClass(),
-          tag: this.dialogId(),
-        });
+        dialog.nativeElement.showModal();
       } else {
-        this.dialogService.close(this.dialogId());
+        dialog.nativeElement.close();
       }
     },
     { allowSignalWrites: true }
   );
-
-  ngOnDestroy(): void {
-    this.dialogService.close(this._dialogId);
-  }
-
-  protected readonly console = console;
 }
diff --git a/libs/sketch/src/lib/components/dialog/directive/click-backdrop.directive.spec.ts b/libs/sketch/src/lib/components/dialog/directive/click-backdrop.directive.spec.ts
new file mode 100644
index 0000000..00ca79b
--- /dev/null
+++ b/libs/sketch/src/lib/components/dialog/directive/click-backdrop.directive.spec.ts
@@ -0,0 +1,8 @@
+import { ClickBackdropDirective } from './click-backdrop.directive';
+
+describe('DialogDirective', () => {
+  it('should create an instance', () => {
+    const directive = new ClickBackdropDirective();
+    expect(directive).toBeTruthy();
+  });
+});
diff --git a/libs/sketch/src/lib/components/dialog/directive/click-backdrop.directive.ts b/libs/sketch/src/lib/components/dialog/directive/click-backdrop.directive.ts
new file mode 100644
index 0000000..82da4ab
--- /dev/null
+++ b/libs/sketch/src/lib/components/dialog/directive/click-backdrop.directive.ts
@@ -0,0 +1,25 @@
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  inject,
+  output,
+} from '@angular/core';
+
+@Directive({
+  selector: '[skClickBackdrop]',
+  standalone: true,
+})
+export class ClickBackdropDirective {
+  private readonly dialogElementRef = inject<ElementRef>(ElementRef);
+
+  clickedBackdrop = output<void>();
+
+  @HostListener('click', ['$event'])
+  onDocumentClick(event: PointerEvent): void {
+    const dialogNativeElement = this.dialogElementRef.nativeElement;
+    if (dialogNativeElement === event.target) {
+      this.clickedBackdrop.emit();
+    }
+  }
+}
diff --git a/libs/sketch/src/lib/components/dialog/service/dialog.service.spec.ts b/libs/sketch/src/lib/components/dialog/service/dialog.service.spec.ts
deleted file mode 100644
index 016507e..0000000
--- a/libs/sketch/src/lib/components/dialog/service/dialog.service.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { DialogService } from './dialog.service';
-
-describe('DialogService', () => {
-  let service: DialogService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(DialogService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
diff --git a/libs/sketch/src/lib/components/dialog/service/dialog.service.ts b/libs/sketch/src/lib/components/dialog/service/dialog.service.ts
deleted file mode 100644
index cfa1927..0000000
--- a/libs/sketch/src/lib/components/dialog/service/dialog.service.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import {
-  Injectable,
-  Optional,
-  ViewContainerRef,
-  TemplateRef,
-} from '@angular/core';
-import {
-  Overlay,
-  OverlayRef,
-  ScrollStrategyOptions,
-} from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-
-interface OpenDialogParams {
-  template: TemplateRef<unknown>;
-  viewContainerRef: ViewContainerRef;
-  backdropClass: string[];
-  tag: string;
-}
-
-@Injectable()
-export class DialogService {
-  static dialogIdName = 'data-dialog-tag';
-
-  constructor(
-    @Optional() private readonly overlay: Overlay,
-    private readonly scrollStrategyOptions: ScrollStrategyOptions
-  ) {
-    if (!overlay) {
-      throw new Error(
-        'The Dialog service needs that you inject OverlayModule into your (Lazy load module)'
-      );
-    }
-  }
-
-  private readonly overlaysMap = new Map<string, OverlayRef>();
-
-  open(params: OpenDialogParams): void {
-    if (this.overlaysMap.has(params.tag)) {
-      throw Error(
-        `The Dialog service has already an overlay with the same tag "${params.tag}"`
-      );
-    }
-
-    const positionStrategy = this.overlay
-      .position()
-      .global()
-      .centerVertically()
-      .centerHorizontally();
-
-    const overlayRef = this.overlay.create({
-      hasBackdrop: true,
-      backdropClass: params.backdropClass,
-      width: '100%',
-      height: '100%',
-      disposeOnNavigation: true,
-      positionStrategy,
-      scrollStrategy: this.scrollStrategyOptions.block(),
-    });
-    const dialogPortal = new TemplatePortal(
-      params.template,
-      params.viewContainerRef
-    );
-    overlayRef.attach(dialogPortal);
-    overlayRef.hostElement.setAttribute(DialogService.dialogIdName, params.tag);
-    this.overlaysMap.set(params.tag, overlayRef);
-  }
-
-  close(tag: string): void {
-    if (this.overlaysMap.size > 0) {
-      if (this.overlaysMap.has(tag)) {
-        const overlay = this.overlaysMap.get(tag);
-        if (overlay) {
-          overlay.detach();
-          overlay.dispose();
-          this.overlaysMap.delete(tag);
-        }
-      }
-    }
-  }
-}

From b73ae4ae43653637148c307ad6cb519e231efe2e Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 17 Apr 2024 12:18:51 +0200
Subject: [PATCH 05/50] refactor: comment currently unused classes

---
 .../src/app/pages/dialog-sample/dialog-sample.component.html  | 3 ---
 libs/sketch/src/lib/components/dialog/dialog.component.html   | 2 +-
 libs/sketch/src/lib/components/dialog/dialog.component.ts     | 4 ++--
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index ada99a9..8cae3a5 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -4,9 +4,6 @@
   [(open)]="isDialogOpen"
   dialogId="test-dialog-id"
   (closeRequested)="isDialogOpen = false"
-  [showCloseButton]="true"
-  [fullscreen]="true"
-  [backdropClass]="['my-backdrop']"
 >
   <div class="my-super-styling-class">
     <p>here comes some content</p>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 011e4a6..f9d59a7 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -1,8 +1,8 @@
 <dialog
   #dialogElement
   skClickBackdrop
-  (keydown.escape)="closeRequested.emit()"
   (clickedBackdrop)="closeRequested.emit()"
+  (keydown.escape)="closeRequested.emit()"
 >
   <div>
     <ng-content></ng-content>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index 805e7b9..cfc17b5 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -24,7 +24,7 @@ export class DialogComponent {
 
   open = model(false);
 
-  backdropClass = input<string[]>([DialogComponent.defaultBackgroundClass]);
+  //backdropClass = input<string[]>([DialogComponent.defaultBackgroundClass]);
 
   /**
    * It will be appended to the rendered overlay in this way:
@@ -40,7 +40,7 @@ export class DialogComponent {
 
   showCloseButton = input<boolean>(true);
 
-  fullscreen = input<boolean>(false);
+  //fullscreen = input<boolean>(false);
 
   closeRequested = output<void>();
 

From d39e637d44ce9df42df66fdb4be38dcae5c3e7cf Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 17 Apr 2024 12:52:18 +0200
Subject: [PATCH 06/50] feat: add svg icon to close button and make it more
 generic

---
 apps/demo-app/src/assets/cross.svg                     | 10 ++++++++++
 .../src/lib/components/dialog/dialog.component.css     |  9 +++++++++
 .../src/lib/components/dialog/dialog.component.html    |  7 +++----
 .../src/lib/components/dialog/dialog.component.ts      |  4 ++++
 4 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 apps/demo-app/src/assets/cross.svg

diff --git a/apps/demo-app/src/assets/cross.svg b/apps/demo-app/src/assets/cross.svg
new file mode 100644
index 0000000..dff8053
--- /dev/null
+++ b/apps/demo-app/src/assets/cross.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1182 1182" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.24403,0,0,1.24403,-160.479,-123.601)">
+        <path d="M948.006,158.718C967.613,139.111 999.45,139.111 1019.06,158.718C1038.66,178.325 1038.66,210.161 1019.06,229.768L259.412,989.412C239.805,1009.02 207.969,1009.02 188.362,989.412C168.755,969.805 168.755,937.969 188.362,918.362L948.006,158.718Z"/>
+        <g transform="matrix(-1.83697e-16,1,-1,-1.83697e-16,1177.77,-29.6442)">
+            <path d="M948.006,158.718C967.613,139.111 999.45,139.111 1019.06,158.718C1038.66,178.325 1038.66,210.161 1019.06,229.768L259.412,989.412C239.805,1009.02 207.969,1009.02 188.362,989.412C168.755,969.805 168.755,937.969 188.362,918.362L948.006,158.718Z"/>
+        </g>
+    </g>
+</svg>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index 2ec237d..e3f7494 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -4,3 +4,12 @@ dialog {
   outline: none;
   background-color: transparent;
 }
+
+img {
+  width: 20px;
+  height: 20px;
+}
+
+button {
+  cursor: pointer;
+}
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index f9d59a7..15ea8f6 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -6,15 +6,14 @@
 >
   <div>
     <ng-content></ng-content>
+
     @if (showCloseButton()) {
     <button
       type="button"
-      title="Schließen"
-      data-testId="q-common-cdk-dialog-close-button"
+      [title]="closeButtonTitle()"
       (click)="closeRequested.emit()"
     >
-      close
-      <!--TODO: add SVG-->
+      <img [src]="closeButtonIcon()" [alt]="closeButtonTitle()" />
     </button>
     }
   </div>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index cfc17b5..9f4a125 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -36,6 +36,10 @@ export class DialogComponent {
    */
   dialogId = input('');
 
+  closeButtonTitle = input('Close');
+
+  closeButtonIcon = input('../../../assets/cross.svg');
+
   // contentShadow = input<boolean>(true);
 
   showCloseButton = input<boolean>(true);

From f4f17a7b7508ce7ca3aaf0eacbdd59a1ac8fbe86 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 17 Apr 2024 13:13:11 +0200
Subject: [PATCH 07/50] feat: make styles for close button adjustable

---
 .../dialog-sample.component.html              |  2 +
 .../dialog-sample/dialog-sample.component.ts  | 19 +++++++-
 .../components/dialog/dialog.component.css    |  5 ---
 .../components/dialog/dialog.component.html   | 16 ++++++-
 .../lib/components/dialog/dialog.component.ts | 45 +++++++++++++++++--
 5 files changed, 76 insertions(+), 11 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index 8cae3a5..c54ebeb 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -4,6 +4,8 @@
   [(open)]="isDialogOpen"
   dialogId="test-dialog-id"
   (closeRequested)="isDialogOpen = false"
+  [showCloseButton]="true"
+  [closeButtonProperties]="closeButtonProperties"
 >
   <div class="my-super-styling-class">
     <p>here comes some content</p>
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
index 356ee5a..0e1c16a 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { DialogComponent } from '@qupaya/sketch';
+import { CloseButtonProperties, DialogComponent } from '@qupaya/sketch';
 
 @Component({
   selector: 'app-dialog-sample',
@@ -11,4 +11,21 @@ import { DialogComponent } from '@qupaya/sketch';
 })
 export class DialogSampleComponent {
   isDialogOpen = false;
+
+  closeButtonProperties: CloseButtonProperties = {
+    title: 'Close me',
+    iconSrc: '../../../assets/cross.svg',
+    styles: {
+      iconWidth: 20,
+      iconHeight: 20,
+      backgroundColor: 'transparent',
+      border: 'none',
+      padding: '0',
+      margin: '0',
+    },
+  };
+
+  constructor() {
+    console.log(this.closeButtonProperties.title);
+  }
 }
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index e3f7494..12708c2 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -5,11 +5,6 @@ dialog {
   background-color: transparent;
 }
 
-img {
-  width: 20px;
-  height: 20px;
-}
-
 button {
   cursor: pointer;
 }
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 15ea8f6..8e449b8 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -10,10 +10,22 @@
     @if (showCloseButton()) {
     <button
       type="button"
-      [title]="closeButtonTitle()"
+      [title]="buttonProps().title"
       (click)="closeRequested.emit()"
+      [style.width.px]="buttonProps().styles?.buttonWidth"
+      [style.height.px]="buttonProps().styles?.buttonHeight"
+      [style.borderRadius.px]="buttonProps().styles?.borderRadius"
+      [style.backgroundColor]="buttonProps().styles?.backgroundColor"
+      [style.border]="buttonProps().styles?.border"
+      [style.padding]="buttonProps().styles?.padding"
+      [style.margin]="buttonProps().styles?.margin"
     >
-      <img [src]="closeButtonIcon()" [alt]="closeButtonTitle()" />
+      <img
+        [src]="buttonProps().iconSrc"
+        [alt]="buttonProps().title"
+        [style.width.px]="buttonProps().styles?.iconWidth"
+        [style.height.px]="buttonProps().styles?.iconHeight"
+      />
     </button>
     }
   </div>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index 9f4a125..a20d67c 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -8,9 +8,41 @@ import {
   ViewEncapsulation,
   untracked,
   ElementRef,
+  signal,
 } from '@angular/core';
 import { ClickBackdropDirective } from './directive/click-backdrop.directive';
 
+interface CloseButtonStyles {
+  buttonWidth?: number | string;
+  buttonHeight?: number | string;
+  borderRadius?: number;
+  backgroundColor?: string;
+  border?: string;
+  iconWidth?: number | string;
+  iconHeight?: number | string;
+  padding?: string;
+  margin?: string;
+}
+
+export interface CloseButtonProperties {
+  title?: string;
+  iconSrc?: string;
+  styles?: CloseButtonStyles;
+}
+
+const initalButtonProps: CloseButtonProperties = {
+  title: 'Close',
+  iconSrc: '../../../assets/cross.svg',
+  styles: {
+    iconWidth: 20,
+    iconHeight: 20,
+    backgroundColor: 'transparent',
+    border: 'none',
+    padding: '0',
+    margin: '0',
+  },
+};
+
 @Component({
   selector: 'sk-dialog[dialogId]',
   standalone: true,
@@ -36,13 +68,20 @@ export class DialogComponent {
    */
   dialogId = input('');
 
-  closeButtonTitle = input('Close');
+  closeButtonProperties = input<CloseButtonProperties>();
+  readonly buttonProps = signal<CloseButtonProperties>(initalButtonProps);
 
-  closeButtonIcon = input('../../../assets/cross.svg');
+  protected buttonPropsChanged = effect(
+    () => {
+      const newProps = this.closeButtonProperties();
+      this.buttonProps.update((props) => ({ ...props, ...newProps }));
+    },
+    { allowSignalWrites: true }
+  );
 
   // contentShadow = input<boolean>(true);
 
-  showCloseButton = input<boolean>(true);
+  showCloseButton = input<boolean>(false);
 
   //fullscreen = input<boolean>(false);
 

From 3b22f65e8440a424d5b8f1aa5fc85d015c9bbc55 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 17 Apr 2024 16:18:02 +0200
Subject: [PATCH 08/50] feat: make backdrop style adjustable

---
 .../pages/dialog-sample/dialog-sample.component.css   | 11 +++++++++++
 .../src/lib/components/dialog/dialog.component.css    | 10 ++++++++++
 .../src/lib/components/dialog/dialog.component.html   |  1 +
 .../src/lib/components/dialog/dialog.component.ts     |  4 ----
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index 5dccc16..b172968 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -11,3 +11,14 @@ button {
   border-radius: 50px;
   padding: 10px;
 }
+
+::part(dialog) {
+  --sk-dialog-background: linear-gradient(
+    45deg,
+    magenta,
+    rebeccapurple,
+    dodgerblue,
+    green
+  );
+  --sk-dialog-background-opacity: 0.3;
+}
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index 12708c2..9d36f0d 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -1,3 +1,8 @@
+:host {
+  --sk-dialog-background: black;
+  --sk-dialog-background-opacity: 0.5;
+}
+
 dialog {
   padding: 0;
   border: none;
@@ -8,3 +13,8 @@ dialog {
 button {
   cursor: pointer;
 }
+
+dialog::backdrop {
+  background: var(--sk-dialog-background);
+  opacity: var(--sk-dialog-background-opacity);
+}
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 8e449b8..c928261 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -1,4 +1,5 @@
 <dialog
+  part="dialog"
   #dialogElement
   skClickBackdrop
   (clickedBackdrop)="closeRequested.emit()"
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index a20d67c..82547d6 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -52,12 +52,8 @@ const initalButtonProps: CloseButtonProperties = {
   encapsulation: ViewEncapsulation.ShadowDom,
 })
 export class DialogComponent {
-  public static readonly defaultBackgroundClass = 'bg-[#00070ba1]';
-
   open = model(false);
 
-  //backdropClass = input<string[]>([DialogComponent.defaultBackgroundClass]);
-
   /**
    * It will be appended to the rendered overlay in this way:
    * ```

From 95d5269fd5a14cd914c1da6ea66ad884f5b3ddfb Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 17 Apr 2024 16:21:02 +0200
Subject: [PATCH 09/50] refactor: cleanup and renaming

---
 .../dialog-sample/dialog-sample.component.ts  |  4 ---
 .../components/dialog/dialog.component.html   | 28 +++++++++--------
 .../lib/components/dialog/dialog.component.ts | 30 +++++++++++--------
 3 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
index 0e1c16a..9dfb6b9 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
@@ -24,8 +24,4 @@ export class DialogSampleComponent {
       margin: '0',
     },
   };
-
-  constructor() {
-    console.log(this.closeButtonProperties.title);
-  }
 }
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index c928261..dfffc05 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -11,21 +11,25 @@
     @if (showCloseButton()) {
     <button
       type="button"
-      [title]="buttonProps().title"
+      [title]="defaultCloseButtonProperties().title"
       (click)="closeRequested.emit()"
-      [style.width.px]="buttonProps().styles?.buttonWidth"
-      [style.height.px]="buttonProps().styles?.buttonHeight"
-      [style.borderRadius.px]="buttonProps().styles?.borderRadius"
-      [style.backgroundColor]="buttonProps().styles?.backgroundColor"
-      [style.border]="buttonProps().styles?.border"
-      [style.padding]="buttonProps().styles?.padding"
-      [style.margin]="buttonProps().styles?.margin"
+      [style.width.px]="defaultCloseButtonProperties().styles?.buttonWidth"
+      [style.height.px]="defaultCloseButtonProperties().styles?.buttonHeight"
+      [style.borderRadius.px]="
+        defaultCloseButtonProperties().styles?.borderRadius
+      "
+      [style.backgroundColor]="
+        defaultCloseButtonProperties().styles?.backgroundColor
+      "
+      [style.border]="defaultCloseButtonProperties().styles?.border"
+      [style.padding]="defaultCloseButtonProperties().styles?.padding"
+      [style.margin]="defaultCloseButtonProperties().styles?.margin"
     >
       <img
-        [src]="buttonProps().iconSrc"
-        [alt]="buttonProps().title"
-        [style.width.px]="buttonProps().styles?.iconWidth"
-        [style.height.px]="buttonProps().styles?.iconHeight"
+        [src]="defaultCloseButtonProperties().iconSrc"
+        [alt]="defaultCloseButtonProperties().title"
+        [style.width.px]="defaultCloseButtonProperties().styles?.iconWidth"
+        [style.height.px]="defaultCloseButtonProperties().styles?.iconHeight"
       />
     </button>
     }
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index 82547d6..f45384c 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -30,7 +30,7 @@ export interface CloseButtonProperties {
   styles?: CloseButtonStyles;
 }
 
-const initalButtonProps: CloseButtonProperties = {
+const initialButtonProperties: CloseButtonProperties = {
   title: 'Close',
   iconSrc: '../../../assets/cross.svg',
   styles: {
@@ -64,21 +64,12 @@ export class DialogComponent {
    */
   dialogId = input('');
 
-  closeButtonProperties = input<CloseButtonProperties>();
-  readonly buttonProps = signal<CloseButtonProperties>(initalButtonProps);
+  showCloseButton = input<boolean>(false);
 
-  protected buttonPropsChanged = effect(
-    () => {
-      const newProps = this.closeButtonProperties();
-      this.buttonProps.update((props) => ({ ...props, ...newProps }));
-    },
-    { allowSignalWrites: true }
-  );
+  closeButtonProperties = input<CloseButtonProperties>();
 
   // contentShadow = input<boolean>(true);
 
-  showCloseButton = input<boolean>(false);
-
   //fullscreen = input<boolean>(false);
 
   closeRequested = output<void>();
@@ -86,6 +77,21 @@ export class DialogComponent {
   private readonly dialogElement =
     viewChild.required<ElementRef<HTMLDialogElement>>('dialogElement');
 
+  readonly defaultCloseButtonProperties = signal<CloseButtonProperties>(
+    initialButtonProperties
+  );
+
+  protected buttonPropsChanged = effect(
+    () => {
+      const newButtonProperties = this.closeButtonProperties();
+      this.defaultCloseButtonProperties.update((defaultProps) => ({
+        ...defaultProps,
+        ...newButtonProperties,
+      }));
+    },
+    { allowSignalWrites: true }
+  );
+
   protected readonly openEvents = effect(
     () => {
       const dialog = untracked(this.dialogElement);

From dbe7b7eb25d913849ab2ce83dcd37690df959fa0 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 17 Apr 2024 18:02:56 +0200
Subject: [PATCH 10/50] chore: add doku WIP

---
 .../components/dialog/dialog-dokumentation.md | 213 ++++++++++++++++++
 1 file changed, 213 insertions(+)
 create mode 100644 libs/sketch/src/lib/components/dialog/dialog-dokumentation.md

diff --git a/libs/sketch/src/lib/components/dialog/dialog-dokumentation.md b/libs/sketch/src/lib/components/dialog/dialog-dokumentation.md
new file mode 100644
index 0000000..e891a05
--- /dev/null
+++ b/libs/sketch/src/lib/components/dialog/dialog-dokumentation.md
@@ -0,0 +1,213 @@
+# Dialog
+
+This Dialog gives you the option to show content in an global overlay. It is not connected to any component nor has any routing.
+
+You can use it to provide information or interaction without leaving the context of the page.
+
+## Basic Usage
+
+First, let's have a look at the basic structure of the Dialog:
+
+```html
+<button (click)="isDialogOpen = true">open Dialog!</button>
+
+<sk-dialog [(open)]="isDialogOpen" (closeRequested)="isDialogOpen = false">
+  <div class="styled-wrapper">
+    <p>here comes some content</p>
+  </div>
+</sk-dialog>
+```
+
+This is all you need to get started! But let's have a closer look at the options.
+
+(It is recommended to place the dialog at the end of your code since it is not connected to anything.)
+
+### open Dialog
+
+To open the Dialog just create a starting point (a button for example) with a function that toggles a variable. For example:
+
+```ts
+isDialogOpen = false;
+```
+
+Use this variable in the model (`[(open)]="isDialogOpen"`) to bring your Dialog to life. Once the dialog is open, you can't interact with the underlying page, so pressing buttons or scrolling is not possible. When it is closed, you can interact with the page again.
+
+### close Dialog
+
+Closing can be performed in three different ways:
+
+1. Clicking the [Backdrop](#backdrop)
+2. Pressing Escape on the keyboard
+3. Clicking the [Close button](#close-button)
+
+All of these options are getting recognized by `(closeRequested)`. So just set your variable to false here and the Dialog will be closed.
+
+## Styling
+
+### Close Button
+
+The close button is not shown by default. To show it, set `[showCloseButton]` to true.
+
+It is a transparent button positioned in the top right corner with a black cross in it.
+You can also adjust the styling of the button and the svg icon for your needs.
+
+To customize the styling, create a variable of type `CloseButtonProperties` and assign the variable to this optional input in the template: `[closeButtonProperties]`.
+
+You have different options here:
+
+<table>
+<tr>
+<td> Key </td> <td> Type </td> <td> Required </td> <td> Description </td> <td> Default Value </td>
+</tr>
+<tr>
+<td>
+
+`title`
+
+</td>
+<td>
+
+`string`
+
+</td>
+<td> no/optional </td>
+<td> The title for the Button and the description for the alt tag of the image </td>
+<td>
+
+`Close`
+
+</td>
+</tr>
+<tr>
+<td>
+
+`iconSrc`
+
+</td>
+<td>
+
+`string`
+
+</td>
+<td> no/optional </td>
+<td> If you want to change the icon, add the path to the new icon here </td>
+<td>
+
+the black cross: `'../../../assets/cross.svg'`
+
+</td>
+</tr>
+<tr>
+<td>
+
+`styles`
+
+</td>
+<td>
+
+`CloseButtonStyles`
+
+These are all options:
+
+```ts
+{
+  buttonWidth?: number | string;
+  buttonHeight?: number | string;
+  borderRadius?: number;
+  backgroundColor?: string;
+  border?: string;
+  iconWidth?: number | string;
+  iconHeight?: number | string;
+  padding?: string;
+  margin?: string;
+}
+```
+
+</td>
+<td> no/optional </td>
+<td> You can change different styles for the button and the icon here </td>
+<td>
+
+```ts
+{
+  iconWidth: 20,
+  iconHeight: 20,
+  backgroundColor: 'transparent',
+  border: 'none',
+  padding: '0',
+  margin: '0',
+}
+```
+
+</td>
+</tr>
+</table>
+
+As you see in the table, none of the options are required. You can adjust one, two or all of them - only the value you change will replace the default.
+
+### Backdrop
+
+The Backdrop is the area around the content that covers the whole screen. When you click on it, it will close the Dialog.
+By default, it is black with an opacity of 0.5 (as `rgba()` value) and has no blur.
+
+To change the color, opacity and blur, you need to target the pseudo class `::part` with the `dialog and overwrite the default custom properties `--sk-dialog-background`and`--sk-dialog-background-blur`.
+
+Here is an example:
+
+```css
+::part(dialog) {
+  --sk-dialog-background: rgba(
+    92,
+    107,
+    192,
+    0.4
+  ); /*hsla(231, 44%, 56%, 0.4) or hex: #5c6bc066*/
+  --sk-dialog-background-blur: 2px;
+}
+```
+
+You can also use different color values like `hex` or `hsla` to define your color. It is just important to use a value where you can define the opacity. `rgba` or `hsla` are recommended here, since it is easier to adjust the opacity.
+
+### Content
+
+The Content and the styling of it is completely up to you. It can be basic text or complex components.
+Wrapping your content with a styled container is recommended, because otherwise the content is displayed on a transparent background.
+
+Some basic styling could be a `background-color`, `padding`, `width` and `height`. Of course you can also use `display: flex` to adjust the layout for your needs and everything else possible with css.
+
+### Positioning
+
+By default, the Dialog is placed in the center of the screen.
+
+## Accessibility
+
+The Dialog is fully accessible in its own layer. So you can use the `Tab` key on your keyboard to go through all accessible elements in it. By pressing `Escape` on your keyboard or navigate with `Tab` to the close button you can close the Dialog.
+
+## Multiple Overlays
+
+You can have multiple Overlays within an Overlay. Just add a starting point (like a button) within the first overlay and add the `<sk-dialog>` with the required properties.
+Make sure to add another variable that handles the state. Here is an example:
+
+```html
+<button (click)="isDialogOpen = true">open Dialog!</button>
+
+<sk-dialog [(open)]="isDialogOpen" (closeRequested)="isDialogOpen = false">
+  <div class="styled-wrapper">
+    <p>here comes some content</p>
+
+    <button (click)="isSecondDialogOpen = true">open second Dialog!</button>
+
+    <sk-dialog
+      [(open)]="isSecondDialogOpen"
+      (closeRequested)="isSecondDialogOpen = false"
+    >
+      <div class="second-styled-wrapper">
+        <p>here comes some content inside the nested dialog</p>
+      </div>
+    </sk-dialog>
+  </div></sk-dialog
+>
+```
+
+You can add as many nested Dialogs as you want, but it is recommended to nest only one of them.
+Clicking `Escape` when multiple Overlays are open will close all of them.

From b9e857ab7160288b7a5e1a1f3900a36cd6898eb3 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Thu, 18 Apr 2024 11:12:13 +0200
Subject: [PATCH 11/50] feat: add blur styling option to backdrop

---
 .../dialog-sample/dialog-sample.component.css      | 14 ++++----------
 .../src/lib/components/dialog/dialog.component.css |  8 ++++----
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index b172968..25e03c6 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -7,18 +7,12 @@ button {
 }
 
 .my-super-styling-class {
-  background-color: red;
-  border-radius: 50px;
+  background-color: lightblue;
+  border-radius: 20px;
   padding: 10px;
 }
 
 ::part(dialog) {
-  --sk-dialog-background: linear-gradient(
-    45deg,
-    magenta,
-    rebeccapurple,
-    dodgerblue,
-    green
-  );
-  --sk-dialog-background-opacity: 0.3;
+  --sk-dialog-background: rgb(92 107 192 / 40%);
+  --sk-dialog-background-blur: 2px;
 }
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index 9d36f0d..1ed884c 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -1,6 +1,6 @@
 :host {
-  --sk-dialog-background: black;
-  --sk-dialog-background-opacity: 0.5;
+  --sk-dialog-background: rgb(0 0 0 / 50%);
+  --sk-dialog-background-blur: 0px;
 }
 
 dialog {
@@ -15,6 +15,6 @@ button {
 }
 
 dialog::backdrop {
-  background: var(--sk-dialog-background);
-  opacity: var(--sk-dialog-background-opacity);
+  background-color: var(--sk-dialog-background);
+  backdrop-filter: blur(var(--sk-dialog-background-blur));
 }

From 9704b060a158a3ef88538ec3c7e8e1b53ca64eac Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Thu, 18 Apr 2024 12:25:57 +0200
Subject: [PATCH 12/50] chore: update documentation

---
 .../components/dialog/dialog-dokumentation.md | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog-dokumentation.md b/libs/sketch/src/lib/components/dialog/dialog-dokumentation.md
index e891a05..b339a38 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-dokumentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-dokumentation.md
@@ -156,12 +156,7 @@ Here is an example:
 
 ```css
 ::part(dialog) {
-  --sk-dialog-background: rgba(
-    92,
-    107,
-    192,
-    0.4
-  ); /*hsla(231, 44%, 56%, 0.4) or hex: #5c6bc066*/
+  --sk-dialog-background: rgba(92, 107, 192, 0.4); /*hsla(231, 44%, 56%, 0.4) or hex: #5c6bc066*/
   --sk-dialog-background-blur: 2px;
 }
 ```
@@ -179,6 +174,25 @@ Some basic styling could be a `background-color`, `padding`, `width` and `height
 
 By default, the Dialog is placed in the center of the screen.
 
+### Content Shadow
+
+The Dialog does not come with a Shadow for the content. However, you can add it yourself.
+
+If you have a wrapper class for your actual content (which is recommended), you can add a `box-shadow` and, depending on how large it is, a `margin` to have enough space for the shadow.
+
+Here is an example:
+
+```css
+.styled-wrapper {
+  box-shadow: rgba(0, 0, 0, 0.2) 0 10px 25px;
+  margin: 30px;
+}
+```
+
+### Scrolling
+
+If you have more content than the height of the content box, just add `overflow: scroll` to the wrapper class and you are able to scroll within the Dialog.
+
 ## Accessibility
 
 The Dialog is fully accessible in its own layer. So you can use the `Tab` key on your keyboard to go through all accessible elements in it. By pressing `Escape` on your keyboard or navigate with `Tab` to the close button you can close the Dialog.

From d2c43567123e3e9c5384c4d304adc296174b6563 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Mon, 22 Apr 2024 09:25:31 +0200
Subject: [PATCH 13/50] refactor: simplify backdrop styling

---
 .../pages/dialog-sample/dialog-sample.component.css |  2 +-
 ...log-dokumentation.md => dialog-documentation.md} | 13 +++++++++----
 .../src/lib/components/dialog/dialog.component.css  |  9 ++-------
 .../src/lib/components/dialog/dialog.component.html |  1 -
 4 files changed, 12 insertions(+), 13 deletions(-)
 rename libs/sketch/src/lib/components/dialog/{dialog-dokumentation.md => dialog-documentation.md} (93%)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index 25e03c6..ea02dbf 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -12,7 +12,7 @@ button {
   padding: 10px;
 }
 
-::part(dialog) {
+sk-dialog {
   --sk-dialog-background: rgb(92 107 192 / 40%);
   --sk-dialog-background-blur: 2px;
 }
diff --git a/libs/sketch/src/lib/components/dialog/dialog-dokumentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
similarity index 93%
rename from libs/sketch/src/lib/components/dialog/dialog-dokumentation.md
rename to libs/sketch/src/lib/components/dialog/dialog-documentation.md
index b339a38..1a2cb94 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-dokumentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -148,15 +148,20 @@ As you see in the table, none of the options are required. You can adjust one, t
 ### Backdrop
 
 The Backdrop is the area around the content that covers the whole screen. When you click on it, it will close the Dialog.
-By default, it is black with an opacity of 0.5 (as `rgba()` value) and has no blur.
+By default, it is black with an opacity of 50% (as `rgb()` value) and has no blur.
 
-To change the color, opacity and blur, you need to target the pseudo class `::part` with the `dialog and overwrite the default custom properties `--sk-dialog-background`and`--sk-dialog-background-blur`.
+To change the color, opacity and blur, you need to target the the `sk-dialog` and overwrite the default custom properties `--sk-dialog-background`and`--sk-dialog-background-blur`.
 
 Here is an example:
 
 ```css
-::part(dialog) {
-  --sk-dialog-background: rgba(92, 107, 192, 0.4); /*hsla(231, 44%, 56%, 0.4) or hex: #5c6bc066*/
+sk-dialog {
+  --sk-dialog-background: rgba(
+    92,
+    107,
+    192,
+    0.4
+  ); /*rgb(92 107 192 / 40%) or hsl(231, 44%, 56% / 40%) or hsla(231, 44%, 56%, 0.4) or hex: #5c6bc066*/
   --sk-dialog-background-blur: 2px;
 }
 ```
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index 1ed884c..f2d23e4 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -1,8 +1,3 @@
-:host {
-  --sk-dialog-background: rgb(0 0 0 / 50%);
-  --sk-dialog-background-blur: 0px;
-}
-
 dialog {
   padding: 0;
   border: none;
@@ -15,6 +10,6 @@ button {
 }
 
 dialog::backdrop {
-  background-color: var(--sk-dialog-background);
-  backdrop-filter: blur(var(--sk-dialog-background-blur));
+  background-color: var(--sk-dialog-background, rgb(0 0 0 / 50%));
+  backdrop-filter: blur(var(--sk-dialog-background-blur, 0));
 }
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index dfffc05..4e9a66b 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -1,5 +1,4 @@
 <dialog
-  part="dialog"
   #dialogElement
   skClickBackdrop
   (clickedBackdrop)="closeRequested.emit()"

From 25561bba7518f3863508fd256de1eb57d65bcb07 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Mon, 22 Apr 2024 12:06:45 +0200
Subject: [PATCH 14/50] style: align close button and make width adjustable

---
 .../dialog-sample/dialog-sample.component.css |  5 ++++-
 .../dialog-sample.component.html              |  4 +++-
 .../components/dialog/dialog.component.css    | 22 +++++++++++++++++++
 .../components/dialog/dialog.component.html   |  7 +++---
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index ea02dbf..88ba2df 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -10,9 +10,12 @@ button {
   background-color: lightblue;
   border-radius: 20px;
   padding: 10px;
+  _margin: 20px;
 }
 
 sk-dialog {
-  --sk-dialog-background: rgb(92 107 192 / 40%);
+  --sk-dialog-width: 100%;
+  --sk-dialog-margin: 50px 10px;
+  --sk-dialog-background: rgb(92 107 192 / 50%);
   --sk-dialog-background-blur: 2px;
 }
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index c54ebeb..4556f18 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -8,6 +8,8 @@
   [closeButtonProperties]="closeButtonProperties"
 >
   <div class="my-super-styling-class">
-    <p>here comes some content</p>
+    <div>here comes some content</div>
+    <div>here comes some content</div>
+    <div>here comes some content</div>
   </div>
 </sk-dialog>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index f2d23e4..68e9ec8 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -1,15 +1,37 @@
 dialog {
+  width: var(--sk-dialog-width, auto);
+  max-width: 100%;
   padding: 0;
   border: none;
   outline: none;
   background-color: transparent;
 }
 
+dialog:has(::backdrop) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 button {
+  position: absolute;
   cursor: pointer;
+  top: 0;
+  right: 0;
 }
 
 dialog::backdrop {
   background-color: var(--sk-dialog-background, rgb(0 0 0 / 50%));
   backdrop-filter: blur(var(--sk-dialog-background-blur, 0));
 }
+
+.sk-wrapper {
+  position: relative;
+  overflow: hidden;
+  display: block;
+  margin: var(--sk-dialog-margin, 0);
+}
+
+.sk-inner-content-wrapper {
+  margin: var(--sk-dialog-inner-content-margin, 20px);
+}
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 4e9a66b..07996a0 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -4,9 +4,7 @@
   (clickedBackdrop)="closeRequested.emit()"
   (keydown.escape)="closeRequested.emit()"
 >
-  <div>
-    <ng-content></ng-content>
-
+  <div class="sk-wrapper">
     @if (showCloseButton()) {
     <button
       type="button"
@@ -32,5 +30,8 @@
       />
     </button>
     }
+    <div class="sk-inner-content-wrapper">
+      <ng-content></ng-content>
+    </div>
   </div>
 </dialog>

From edac274a4a587c7ff181b39087f77a9b2188022d Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Mon, 22 Apr 2024 12:32:43 +0200
Subject: [PATCH 15/50] style: make close button position adjustable

---
 .../app/pages/dialog-sample/dialog-sample.component.css  | 6 +++---
 .../src/lib/components/dialog/dialog.component.css       | 9 +++++++++
 .../src/lib/components/dialog/dialog.component.html      | 6 +++++-
 .../sketch/src/lib/components/dialog/dialog.component.ts | 5 ++++-
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index 88ba2df..f05bb89 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -9,13 +9,13 @@ button {
 .my-super-styling-class {
   background-color: lightblue;
   border-radius: 20px;
-  padding: 10px;
-  _margin: 20px;
+  padding: 20px;
 }
 
 sk-dialog {
   --sk-dialog-width: 100%;
-  --sk-dialog-margin: 50px 10px;
+  --sk-dialog-margin: 50px 100px;
   --sk-dialog-background: rgb(92 107 192 / 50%);
   --sk-dialog-background-blur: 2px;
+  --sk-dialog-inner-content-margin: 20px;
 }
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index 68e9ec8..abb7dc8 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -25,6 +25,11 @@ dialog::backdrop {
   backdrop-filter: blur(var(--sk-dialog-background-blur, 0));
 }
 
+.inner-close-button {
+  top: 10px;
+  right: 10px;
+}
+
 .sk-wrapper {
   position: relative;
   overflow: hidden;
@@ -35,3 +40,7 @@ dialog::backdrop {
 .sk-inner-content-wrapper {
   margin: var(--sk-dialog-inner-content-margin, 20px);
 }
+
+.sk-dialog-no-margin {
+  margin: 0;
+}
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 07996a0..ecca935 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -7,6 +7,7 @@
   <div class="sk-wrapper">
     @if (showCloseButton()) {
     <button
+      [ngClass]="{ 'inner-close-button': innerCloseButton() }"
       type="button"
       [title]="defaultCloseButtonProperties().title"
       (click)="closeRequested.emit()"
@@ -30,7 +31,10 @@
       />
     </button>
     }
-    <div class="sk-inner-content-wrapper">
+    <div
+      [ngClass]="{ 'sk-dialog-no-margin': innerCloseButton() }"
+      class="sk-inner-content-wrapper"
+    >
       <ng-content></ng-content>
     </div>
   </div>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index f45384c..b3cbce3 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -11,6 +11,7 @@ import {
   signal,
 } from '@angular/core';
 import { ClickBackdropDirective } from './directive/click-backdrop.directive';
+import { NgClass } from '@angular/common';
 
 interface CloseButtonStyles {
   buttonWidth?: number | string;
@@ -46,7 +47,7 @@ const initialButtonProperties: CloseButtonProperties = {
 @Component({
   selector: 'sk-dialog[dialogId]',
   standalone: true,
-  imports: [ClickBackdropDirective],
+  imports: [ClickBackdropDirective, NgClass],
   templateUrl: './dialog.component.html',
   styleUrl: './dialog.component.css',
   encapsulation: ViewEncapsulation.ShadowDom,
@@ -66,6 +67,8 @@ export class DialogComponent {
 
   showCloseButton = input<boolean>(false);
 
+  innerCloseButton = input<boolean>(false);
+
   closeButtonProperties = input<CloseButtonProperties>();
 
   // contentShadow = input<boolean>(true);

From dd5fb82bc2776387fca43080e0fcc2a5dbe91365 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Mon, 22 Apr 2024 17:01:25 +0200
Subject: [PATCH 16/50] chore: add documentation for content styling

---
 .../dialog-sample/dialog-sample.component.css |  4 +-
 .../dialog-sample.component.html              |  1 +
 .../components/dialog/dialog-documentation.md | 47 ++++++++++++++-----
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index f05bb89..2b11e19 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -14,8 +14,8 @@ button {
 
 sk-dialog {
   --sk-dialog-width: 100%;
-  --sk-dialog-margin: 50px 100px;
+  --sk-dialog-margin: 50px;
+  --sk-dialog-inner-content-margin: 20px;
   --sk-dialog-background: rgb(92 107 192 / 50%);
   --sk-dialog-background-blur: 2px;
-  --sk-dialog-inner-content-margin: 20px;
 }
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index 4556f18..d1ecddc 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -6,6 +6,7 @@
   (closeRequested)="isDialogOpen = false"
   [showCloseButton]="true"
   [closeButtonProperties]="closeButtonProperties"
+  [innerCloseButton]="true"
 >
   <div class="my-super-styling-class">
     <div>here comes some content</div>
diff --git a/libs/sketch/src/lib/components/dialog/dialog-documentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
index 1a2cb94..8ff7e09 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-documentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -20,7 +20,7 @@ First, let's have a look at the basic structure of the Dialog:
 
 This is all you need to get started! But let's have a closer look at the options.
 
-(It is recommended to place the dialog at the end of your code since it is not connected to anything.)
+> It is recommended to place the dialog at the end of your code since it is not connected to anything.
 
 ### open Dialog
 
@@ -30,7 +30,9 @@ To open the Dialog just create a starting point (a button for example) with a fu
 isDialogOpen = false;
 ```
 
-Use this variable in the model (`[(open)]="isDialogOpen"`) to bring your Dialog to life. Once the dialog is open, you can't interact with the underlying page, so pressing buttons or scrolling is not possible. When it is closed, you can interact with the page again.
+Use this variable in the model (`[(open)]="isDialogOpen"`) to bring your Dialog to life.
+Once the dialog is open, you can't interact with the underlying page, so pressing buttons or scrolling behind the dialog is not possible.
+When it is closed, you can interact with the page again.
 
 ### close Dialog
 
@@ -40,7 +42,7 @@ Closing can be performed in three different ways:
 2. Pressing Escape on the keyboard
 3. Clicking the [Close button](#close-button)
 
-All of these options are getting recognized by `(closeRequested)`. So just set your variable to false here and the Dialog will be closed.
+All of these options are getting recognized by `(closeRequested)`. So just set your variable to `false` here and the Dialog will be closed.
 
 ## Styling
 
@@ -48,6 +50,11 @@ All of these options are getting recognized by `(closeRequested)`. So just set y
 
 The close button is not shown by default. To show it, set `[showCloseButton]` to true.
 
+If you want to show it, you can decide if the button is placed inside or outside your content.
+By default, it is placed outside. To place it within the content set `[innerCloseButton]` to `true`.
+
+> When the Close Button is outside the content, you can define the margin of the actual content to the close button. Look at the [Content Section](#content) to see how.
+
 It is a transparent button positioned in the top right corner with a black cross in it.
 You can also adjust the styling of the button and the svg icon for your needs.
 
@@ -150,30 +157,44 @@ As you see in the table, none of the options are required. You can adjust one, t
 The Backdrop is the area around the content that covers the whole screen. When you click on it, it will close the Dialog.
 By default, it is black with an opacity of 50% (as `rgb()` value) and has no blur.
 
-To change the color, opacity and blur, you need to target the the `sk-dialog` and overwrite the default custom properties `--sk-dialog-background`and`--sk-dialog-background-blur`.
+To change the color, opacity and blur, you need to target the `sk-dialog` and overwrite the default custom properties `--sk-dialog-background`and`--sk-dialog-background-blur`.
 
 Here is an example:
 
 ```css
 sk-dialog {
-  --sk-dialog-background: rgba(
-    92,
-    107,
-    192,
-    0.4
-  ); /*rgb(92 107 192 / 40%) or hsl(231, 44%, 56% / 40%) or hsla(231, 44%, 56%, 0.4) or hex: #5c6bc066*/
+  --sk-dialog-background: rgb(92, 107, 192 / 40%);
+  /* 
+    other possible values:
+    rgba(92 107 192, 0.4) or 
+    hsl(231, 44%, 56% / 40%) / hsla(231, 44%, 56%, 0.4) or 
+    hex: #5c6bc066
+    */
   --sk-dialog-background-blur: 2px;
 }
 ```
 
-You can also use different color values like `hex` or `hsla` to define your color. It is just important to use a value where you can define the opacity. `rgba` or `hsla` are recommended here, since it is easier to adjust the opacity.
+You can also use different color values like `rgba`, `hsl/hsla` or `hex` to define your color. It is just important to use a value where you can define the opacity.
+`rgb/rgba` or `hsl/hsla` are recommended here, since it is easier to adjust the opacity.
+
+For the blur, a value up to `5px` is recommended because more make the background nearly invisible.
 
 ### Content
 
 The Content and the styling of it is completely up to you. It can be basic text or complex components.
 Wrapping your content with a styled container is recommended, because otherwise the content is displayed on a transparent background.
 
-Some basic styling could be a `background-color`, `padding`, `width` and `height`. Of course you can also use `display: flex` to adjust the layout for your needs and everything else possible with css.
+Some basic styling could be a `background-color`, `padding` and `border-radius`. Of course you can also use `display: flex` to adjust the layout for your needs and everything else possible with css.
+
+You have some other options for the styling and positioning of your content.
+
+- To change the width, target the `sk-dialog` and overwrite the default custom property `--sk-dialog-width`. The default is `auto` so you can freely decide what you need. When you don't overwrite it, it takes the full width of the screen.
+- To have a proper spacing to the sides, overwrite `--sk-dialog-margin` and set the margin as wanted. By default, this is `0`.
+- When the [Close Button](#close-button) is outside the content, you can define the margin of the actual content to the close button. In this way, you can move it further away if wanted. Just overwrite the `--sk-dialog-inner-content-margin` in the `sk-dialog`. It has a default of `20px`. If `innerCloseButton` is false, this is getting ignored. It is recommended to have at least the same inner content margin as the size of the close button icon.
+
+> The Close Button is part of the content, according to styling. So changing the custom property `--sk-dialog-margin` will not affect the position of the close button.
+>
+> To move it further away, adjust the `--sk-dialog-inner-content-margin` custom property.
 
 ### Positioning
 
@@ -181,7 +202,7 @@ By default, the Dialog is placed in the center of the screen.
 
 ### Content Shadow
 
-The Dialog does not come with a Shadow for the content. However, you can add it yourself.
+The Dialog does not come with a Shadow for the content. However, you can add one yourself.
 
 If you have a wrapper class for your actual content (which is recommended), you can add a `box-shadow` and, depending on how large it is, a `margin` to have enough space for the shadow.
 

From 7f12933817f7e253fe85c939093ee7c5e8a75abd Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Tue, 23 Apr 2024 12:15:32 +0200
Subject: [PATCH 17/50] chore: add overview over all properties to
 documentation

---
 .../components/dialog/dialog-documentation.md | 309 ++++++++++++++++++
 1 file changed, 309 insertions(+)

diff --git a/libs/sketch/src/lib/components/dialog/dialog-documentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
index 8ff7e09..9a93d82 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-documentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -251,3 +251,312 @@ Make sure to add another variable that handles the state. Here is an example:
 
 You can add as many nested Dialogs as you want, but it is recommended to nest only one of them.
 Clicking `Escape` when multiple Overlays are open will close all of them.
+
+## Properties Overview
+
+### Inputs/Outputs
+
+<table>
+<tr>
+<td> Name </td> <td> Type </td> <td> Required </td> <td> Description </td> <td> Default Value </td>
+</tr>
+<tr>
+<td>
+
+`[(open)]`
+
+</td>
+<td>
+
+`boolean`
+
+</td>
+<td> yes </td>
+<td> Determines if the Dialog is open. </td>
+<td>
+
+`false`
+
+</td>
+</tr>
+<tr>
+<td>
+
+`[showCloseButton]`
+
+</td>
+<td>
+
+`boolean`
+
+</td>
+<td> no/optional </td>
+<td> Determines if the Close Button is displayed. </td>
+<td>
+
+`false`
+
+</td>
+</tr>
+<tr>
+<td>
+
+`[innerCloseButton]`
+
+</td>
+<td>
+
+`boolean`
+
+</td>
+<td> no/optional </td>
+<td> Determines if the Close Button is shown inside your Content. </td>
+<td>
+
+`false`
+
+</td>
+</tr>
+<tr>
+<td>
+
+`[closeButtonProperties]`
+
+</td>
+<td>
+
+[`CloseButtonProperties`](#closebuttonproperties)
+
+</td>
+<td> no/optional </td>
+<td>
+
+Makes the title, icon source and icon/button styles adjustable.
+
+</td>
+<td>
+
+`false`
+
+</td>
+</tr>
+</table
+
+<table>
+<tr>
+<td> Name </td> <td> Required </td> <td> Description </td>
+</tr>
+<tr>
+<td>
+
+`(closeRequested)`
+
+</td>
+<td> yes </td>
+<td> Handles the closing of the dialog. </td>
+</tr>
+</table>
+
+### CloseButtonProperties
+
+<table>
+<tr>
+<td> Key </td> <td> Type </td> <td> Required </td> <td> Description </td> <td> Default Value </td>
+</tr>
+<tr>
+<td>
+
+`title`
+
+</td>
+<td>
+
+`string`
+
+</td>
+<td> no/optional </td>
+<td> The title for the Button and the description for the alt tag of the image </td>
+<td>
+
+`Close`
+
+</td>
+</tr>
+<tr>
+<td>
+
+`iconSrc`
+
+</td>
+<td>
+
+`string`
+
+</td>
+<td> no/optional </td>
+<td> If you want to change the icon, add the path to the new icon here </td>
+<td>
+
+the black cross: `'../../../assets/cross.svg'`
+
+</td>
+</tr>
+<tr>
+<td>
+
+`styles`
+
+</td>
+<td>
+
+`CloseButtonStyles`
+
+These are all options:
+
+```ts
+{
+  buttonWidth?: number | string;
+  buttonHeight?: number | string;
+  borderRadius?: number;
+  backgroundColor?: string;
+  border?: string;
+  iconWidth?: number | string;
+  iconHeight?: number | string;
+  padding?: string;
+  margin?: string;
+}
+```
+
+</td>
+<td> no/optional </td>
+<td> You can change different styles for the button and the icon here </td>
+<td>
+
+```ts
+{
+  iconWidth: 20,
+  iconHeight: 20,
+  backgroundColor: 'transparent',
+  border: 'none',
+  padding: '0',
+  margin: '0',
+}
+```
+
+</td>
+</tr>
+</table>
+
+### Styles
+
+None of these are required. All of them need to be changed in `sk-dialog {...}` in your css file.
+
+<table>
+<tr>
+<td> Name </td> <td> Description </td> <td> Default Value </td> <td> Further info </td>
+</tr>
+<tr>
+<td>
+
+`--sk-dialog-width`
+
+</td>
+<td> Define the width of your content. (including background/wrapper) </td>
+<td>
+
+`auto`
+
+</td>
+<td>
+
+[Content](#content)
+
+</td>
+</tr>
+<tr>
+<td>
+
+`--sk-dialog-margin`
+
+</td>
+<td> Define the margin/spacing of your content (including background/wrapper) to the sides. </td>
+<td>
+
+`0`
+
+</td>
+<td>
+
+[Content](#content)
+
+</td>
+</tr>
+<tr>
+<td>
+
+`--sk-dialog-inner-content-margin`
+
+</td>
+<td>
+
+Define the margin/spacing of your content to the close button. Only works with `[innerCloseButton]="false"`
+
+</td>
+<td>
+
+`0`
+
+</td>
+<td>
+
+[Content](#content)
+
+</td>
+</tr>
+<tr>
+<td>
+
+`--sk-dialog-background`
+
+</td>
+<td>
+
+Defines the Color and Opacity of the backdrop.
+Must have a color value with opcaity, otherwise it covers the background completely.
+`rgb/rgba` or `hsl/hsla` are recommended, `hex` (with alpha value) is possible.
+
+</td>
+<td>
+
+`rgb(0 0 0 / 50%)`
+
+</td>
+<td>
+
+[Backdrop](#backdrop)
+
+</td>
+</tr>
+<tr>
+<td>
+
+`--sk-dialog-background-blur`
+
+</td>
+<td>
+
+Defines the blur of the backdrop. A number not higher than `5px` is recommended.
+
+</td>
+<td>
+
+`0`
+
+</td>
+<td>
+
+[Backdrop](#backdrop)
+
+</td>
+</tr>
+</table>

From 251b4635f22522e30e1df4a142827f6704f88f6b Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Tue, 23 Apr 2024 12:38:34 +0200
Subject: [PATCH 18/50] feat: make the position of the inner close button
 adjustable

---
 .../dialog-sample/dialog-sample.component.css |  1 +
 .../dialog-sample.component.html              |  2 +-
 .../components/dialog/dialog-documentation.md | 29 +++++++++++++++++--
 .../components/dialog/dialog.component.css    |  4 +--
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index 2b11e19..12b92f8 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -16,6 +16,7 @@ sk-dialog {
   --sk-dialog-width: 100%;
   --sk-dialog-margin: 50px;
   --sk-dialog-inner-content-margin: 20px;
+  --sk-dialog-inner-close-button-space: 15px;
   --sk-dialog-background: rgb(92 107 192 / 50%);
   --sk-dialog-background-blur: 2px;
 }
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index d1ecddc..6167965 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -6,7 +6,7 @@
   (closeRequested)="isDialogOpen = false"
   [showCloseButton]="true"
   [closeButtonProperties]="closeButtonProperties"
-  [innerCloseButton]="true"
+  [innerCloseButton]="false"
 >
   <div class="my-super-styling-class">
     <div>here comes some content</div>
diff --git a/libs/sketch/src/lib/components/dialog/dialog-documentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
index 9a93d82..210d30e 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-documentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -191,6 +191,7 @@ You have some other options for the styling and positioning of your content.
 - To change the width, target the `sk-dialog` and overwrite the default custom property `--sk-dialog-width`. The default is `auto` so you can freely decide what you need. When you don't overwrite it, it takes the full width of the screen.
 - To have a proper spacing to the sides, overwrite `--sk-dialog-margin` and set the margin as wanted. By default, this is `0`.
 - When the [Close Button](#close-button) is outside the content, you can define the margin of the actual content to the close button. In this way, you can move it further away if wanted. Just overwrite the `--sk-dialog-inner-content-margin` in the `sk-dialog`. It has a default of `20px`. If `innerCloseButton` is false, this is getting ignored. It is recommended to have at least the same inner content margin as the size of the close button icon.
+- When the [Close Button](#close-button) is inside the content, use `--sk-dialog-inner-close-button-space` to define the spacing from your content wrapper. It will move the button proportionally.
 
 > The Close Button is part of the content, according to styling. So changing the custom property `--sk-dialog-margin` will not affect the position of the close button.
 >
@@ -461,7 +462,7 @@ None of these are required. All of them need to be changed in `sk-dialog {...}`
 `--sk-dialog-width`
 
 </td>
-<td> Define the width of your content. (including background/wrapper) </td>
+<td> Defines the width of your content. (including background/wrapper) </td>
 <td>
 
 `auto`
@@ -479,7 +480,7 @@ None of these are required. All of them need to be changed in `sk-dialog {...}`
 `--sk-dialog-margin`
 
 </td>
-<td> Define the margin/spacing of your content (including background/wrapper) to the sides. </td>
+<td> Defines the margin/spacing of your content (including background/wrapper) to the sides. </td>
 <td>
 
 `0`
@@ -499,7 +500,7 @@ None of these are required. All of them need to be changed in `sk-dialog {...}`
 </td>
 <td>
 
-Define the margin/spacing of your content to the close button. Only works with `[innerCloseButton]="false"`
+Defines the margin/spacing of your content to the close button. Only works with `[innerCloseButton]="false"`
 
 </td>
 <td>
@@ -516,6 +517,28 @@ Define the margin/spacing of your content to the close button. Only works with `
 <tr>
 <td>
 
+`--sk-dialog-inner-close-button-space`
+
+</td>
+<td>
+
+Defines the spacing of the inner close button to the content wrapper. Only works with `[innerCloseButton]="true"`
+
+</td>
+<td>
+
+`15px`
+
+</td>
+<td>
+
+[Content](#content)
+
+</td>
+</tr>
+<tr>
+<td>
+
 `--sk-dialog-background`
 
 </td>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index abb7dc8..b05a4c3 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -26,8 +26,8 @@ dialog::backdrop {
 }
 
 .inner-close-button {
-  top: 10px;
-  right: 10px;
+  top: var(--sk-dialog-inner-close-button-space, 15px);
+  right: var(--sk-dialog-inner-close-button-space, 15px);
 }
 
 .sk-wrapper {

From f669e9b5b02db12c5e42f10b8653ff1bdc0a5a17 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Tue, 23 Apr 2024 14:42:07 +0200
Subject: [PATCH 19/50] fix: add class to close button to avoid unwanted
 styling

---
 libs/sketch/src/lib/components/dialog/dialog.component.css  | 2 +-
 libs/sketch/src/lib/components/dialog/dialog.component.html | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index b05a4c3..81fa45e 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -13,7 +13,7 @@ dialog:has(::backdrop) {
   align-items: center;
 }
 
-button {
+.close-button {
   position: absolute;
   cursor: pointer;
   top: 0;
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index ecca935..6b8fb37 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -7,6 +7,7 @@
   <div class="sk-wrapper">
     @if (showCloseButton()) {
     <button
+      class="close-button"
       [ngClass]="{ 'inner-close-button': innerCloseButton() }"
       type="button"
       [title]="defaultCloseButtonProperties().title"

From 74bc640e44bad5c283f8aed0a4ba3877768238ea Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Tue, 23 Apr 2024 14:43:30 +0200
Subject: [PATCH 20/50] refactor: remove unneccassary dialogId input and
 selector

---
 .../pages/dialog-sample/dialog-sample.component.html |  1 -
 .../src/lib/components/dialog/dialog.component.ts    | 12 +-----------
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index 6167965..4463230 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -2,7 +2,6 @@
 
 <sk-dialog
   [(open)]="isDialogOpen"
-  dialogId="test-dialog-id"
   (closeRequested)="isDialogOpen = false"
   [showCloseButton]="true"
   [closeButtonProperties]="closeButtonProperties"
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index b3cbce3..2fa35f2 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -45,7 +45,7 @@ const initialButtonProperties: CloseButtonProperties = {
 };
 
 @Component({
-  selector: 'sk-dialog[dialogId]',
+  selector: 'sk-dialog',
   standalone: true,
   imports: [ClickBackdropDirective, NgClass],
   templateUrl: './dialog.component.html',
@@ -55,16 +55,6 @@ const initialButtonProperties: CloseButtonProperties = {
 export class DialogComponent {
   open = model(false);
 
-  /**
-   * It will be appended to the rendered overlay in this way:
-   * ```
-   * [dialogId]="my-tag-name"
-   *
-   * <div data-q-dialog-tag="my-tag-name">
-   * ```
-   */
-  dialogId = input('');
-
   showCloseButton = input<boolean>(false);
 
   innerCloseButton = input<boolean>(false);

From c6bf213048aea3ed5e3bd9c060e33743a73e7b12 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Tue, 23 Apr 2024 15:31:52 +0200
Subject: [PATCH 21/50] chore: update documentation

---
 .../src/lib/components/dialog/dialog-documentation.md      | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog-documentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
index 210d30e..942869d 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-documentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -205,14 +205,13 @@ By default, the Dialog is placed in the center of the screen.
 
 The Dialog does not come with a Shadow for the content. However, you can add one yourself.
 
-If you have a wrapper class for your actual content (which is recommended), you can add a `box-shadow` and, depending on how large it is, a `margin` to have enough space for the shadow.
+If you have a wrapper class for your actual content (which is recommended), you can add a `box-shadow`. It will be displayed in the margin set in `--sk-dialog-inner-content-margin`, so kep this in mind to avoid cutting the shadow.
 
 Here is an example:
 
 ```css
 .styled-wrapper {
   box-shadow: rgba(0, 0, 0, 0.2) 0 10px 25px;
-  margin: 30px;
 }
 ```
 
@@ -246,8 +245,8 @@ Make sure to add another variable that handles the state. Here is an example:
         <p>here comes some content inside the nested dialog</p>
       </div>
     </sk-dialog>
-  </div></sk-dialog
->
+  </div>
+</sk-dialog>
 ```
 
 You can add as many nested Dialogs as you want, but it is recommended to nest only one of them.

From 76901bac366793a1c5e925d6520d3e00a077af17 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Tue, 23 Apr 2024 16:36:39 +0200
Subject: [PATCH 22/50] feat: add examples in different variants

---
 .../dialog-sample/dialog-sample.component.css |   6 +
 .../dialog-sample.component.html              | 120 +++++++++++++++---
 .../dialog-sample/dialog-sample.component.ts  |  12 +-
 3 files changed, 120 insertions(+), 18 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index 12b92f8..c675d7b 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -20,3 +20,9 @@ sk-dialog {
   --sk-dialog-background: rgb(92 107 192 / 50%);
   --sk-dialog-background-blur: 2px;
 }
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index 4463230..33f5d7a 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -1,15 +1,105 @@
-<button (click)="isDialogOpen = true">open Dialog!</button>
-
-<sk-dialog
-  [(open)]="isDialogOpen"
-  (closeRequested)="isDialogOpen = false"
-  [showCloseButton]="true"
-  [closeButtonProperties]="closeButtonProperties"
-  [innerCloseButton]="false"
->
-  <div class="my-super-styling-class">
-    <div>here comes some content</div>
-    <div>here comes some content</div>
-    <div>here comes some content</div>
-  </div>
-</sk-dialog>
+<div class="layout">
+  <div>
+    <button (click)="isUnstyledBasicDialogOpen = true">
+      open unstyled basic Dialog
+    </button>
+
+    <sk-dialog
+      [(open)]="isUnstyledBasicDialogOpen"
+      (closeRequested)="isUnstyledBasicDialogOpen = false"
+    >
+      <div>here comes some content.</div>
+    </sk-dialog>
+  </div>
+
+  <div>
+    <button (click)="isStyledBasicDialogOpen = true">
+      open styled basic Dialog
+    </button>
+
+    <sk-dialog
+      [(open)]="isStyledBasicDialogOpen"
+      (closeRequested)="isStyledBasicDialogOpen = false"
+    >
+      <div class="my-super-styling-class">
+        <div>here comes some content.</div>
+      </div>
+    </sk-dialog>
+  </div>
+
+  <div>
+    <button (click)="isDialogWithOuterCloseButtonOpen = true">
+      open Dialog with default outer Close Button
+    </button>
+
+    <sk-dialog
+      [(open)]="isDialogWithOuterCloseButtonOpen"
+      (closeRequested)="isDialogWithOuterCloseButtonOpen = false"
+      [showCloseButton]="true"
+    >
+      <div class="my-super-styling-class">
+        <div>here comes some content. show close button true</div>
+      </div>
+    </sk-dialog>
+  </div>
+
+  <div>
+    <button (click)="isDialogWithInnerCloseButtonOpen = true">
+      open Dialog with default inner Close Button
+    </button>
+
+    <sk-dialog
+      [(open)]="isDialogWithInnerCloseButtonOpen"
+      (closeRequested)="isDialogWithInnerCloseButtonOpen = false"
+      [showCloseButton]="true"
+      [innerCloseButton]="true"
+    >
+      <div class="my-super-styling-class">
+        <div>
+          here comes some content. show close button true + inner close button
+        </div>
+      </div>
+    </sk-dialog>
+  </div>
+
+  <div>
+    <button (click)="isDialogWithStyledOuterCloseButtonOpen = true">
+      open Dialog with styled outer Close Button
+    </button>
+
+    <sk-dialog
+      [(open)]="isDialogWithStyledOuterCloseButtonOpen"
+      (closeRequested)="isDialogWithStyledOuterCloseButtonOpen = false"
+      [showCloseButton]="true"
+      [closeButtonProperties]="closeButtonProperties"
+    >
+      <div class="my-super-styling-class">
+        <div>
+          here comes some content. show close button true +
+          closeButtonProperties
+        </div>
+      </div>
+    </sk-dialog>
+  </div>
+
+  <div>
+    <button (click)="isDialogWithStyledInnerCloseButtonOpen = true">
+      open Dialog with styled inner Close Button
+    </button>
+
+    <sk-dialog
+      [(open)]="isDialogWithStyledInnerCloseButtonOpen"
+      (closeRequested)="isDialogWithStyledInnerCloseButtonOpen = false"
+      [showCloseButton]="true"
+      [innerCloseButton]="true"
+      [closeButtonProperties]="closeButtonProperties"
+    >
+      <div class="my-super-styling-class">
+        <div>
+          here comes some content. show close button true +
+          closeButtonProperties
+        </div>
+      </div>
+    </sk-dialog>
+  </div>
+</div>
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
index 9dfb6b9..d3a0471 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
@@ -10,7 +10,12 @@ import { CloseButtonProperties, DialogComponent } from '@qupaya/sketch';
   styleUrl: './dialog-sample.component.css',
 })
 export class DialogSampleComponent {
-  isDialogOpen = false;
+  isUnstyledBasicDialogOpen = false;
+  isStyledBasicDialogOpen = false;
+  isDialogWithOuterCloseButtonOpen = false;
+  isDialogWithInnerCloseButtonOpen = false;
+  isDialogWithStyledOuterCloseButtonOpen = false;
+  isDialogWithStyledInnerCloseButtonOpen = false;
 
   closeButtonProperties: CloseButtonProperties = {
     title: 'Close me',
@@ -18,9 +23,10 @@ export class DialogSampleComponent {
     styles: {
       iconWidth: 20,
       iconHeight: 20,
-      backgroundColor: 'transparent',
+      backgroundColor: 'coral',
+      borderRadius: 10,
       border: 'none',
-      padding: '0',
+      padding: '10px',
       margin: '0',
     },
   };

From 15547b9d6c8bae17fd303fce5ee43acbbeba2cc9 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 24 Apr 2024 11:40:09 +0200
Subject: [PATCH 23/50] feat: make height adjustable

---
 .../dialog-sample/dialog-sample.component.css | 17 ++++++++--------
 .../components/dialog/dialog.component.css    | 20 +++++++++++++++++--
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index c675d7b..36ad379 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -6,19 +6,18 @@ button {
   cursor: pointer;
 }
 
-.my-super-styling-class {
-  background-color: lightblue;
-  border-radius: 20px;
-  padding: 20px;
-}
-
 sk-dialog {
   --sk-dialog-width: 100%;
+  --sk-dialog-height: 100%;
+  --sk-dialog-border-radius: 20px;
+  --sk-dialog-background: lightblue;
   --sk-dialog-margin: 50px;
+  --sk-dialog-inner-content-padding: 40px;
   --sk-dialog-inner-content-margin: 20px;
-  --sk-dialog-inner-close-button-space: 15px;
-  --sk-dialog-background: rgb(92 107 192 / 50%);
-  --sk-dialog-background-blur: 2px;
+  --sk-dialog-inner-close-button-space: 15 px;
+  --sk-dialog-overflow: scroll;
+  --sk-dialog-backdrop: rgb(92 107 192 / 50%);
+  --sk-dialog-backdrop-blur: 2px;
 }
 
 .layout {
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index 81fa45e..da4a3bd 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -1,6 +1,8 @@
 dialog {
   width: var(--sk-dialog-width, auto);
+  height: var(--sk-dialog-height, fit-content);
   max-width: 100%;
+  max-height: 100%;
   padding: 0;
   border: none;
   outline: none;
@@ -21,8 +23,8 @@ dialog:has(::backdrop) {
 }
 
 dialog::backdrop {
-  background-color: var(--sk-dialog-background, rgb(0 0 0 / 50%));
-  backdrop-filter: blur(var(--sk-dialog-background-blur, 0));
+  background-color: var(--sk-dialog-backdrop, rgb(0 0 0 / 50%));
+  backdrop-filter: blur(var(--sk-dialog-backdrop-blur, 0));
 }
 
 .inner-close-button {
@@ -35,10 +37,24 @@ dialog::backdrop {
   overflow: hidden;
   display: block;
   margin: var(--sk-dialog-margin, 0);
+  height: calc(100% - (var(--sk-dialog-margin) * 2));
+  max-height: calc(100svh - (var(--sk-dialog-margin) * 2));
 }
 
 .sk-inner-content-wrapper {
+  padding: var(--sk-dialog-inner-content-padding, 0);
+  height: calc(
+    100% - (var(--sk-dialog-inner-content-margin) * 2) -
+      (var(--sk-dialog-inner-content-padding) * 2)
+  );
   margin: var(--sk-dialog-inner-content-margin, 20px);
+  overflow-y: var(--sk-dialog-overflow, auto);
+  max-height: calc(
+    100svh - (var(--sk-dialog-margin) * 2) -
+      (var(--sk-dialog-inner-content-margin) * 2)
+  );
+  border-radius: var(--sk-dialog-border-radius, 0);
+  background: var(--sk-dialog-background, transparent);
 }
 
 .sk-dialog-no-margin {

From 62fed4eee158042bddb9ce76c64dbbbf64517729 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 24 Apr 2024 13:17:56 +0200
Subject: [PATCH 24/50] feat: add fullscreen input

---
 libs/sketch/src/lib/components/dialog/dialog.component.css  | 4 ++++
 libs/sketch/src/lib/components/dialog/dialog.component.html | 1 +
 libs/sketch/src/lib/components/dialog/dialog.component.ts   | 4 ++--
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index da4a3bd..8472148 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -27,6 +27,10 @@ dialog::backdrop {
   backdrop-filter: blur(var(--sk-dialog-backdrop-blur, 0));
 }
 
+.fullscreen-dialog {
+  height: 100%;
+}
+
 .inner-close-button {
   top: var(--sk-dialog-inner-close-button-space, 15px);
   right: var(--sk-dialog-inner-close-button-space, 15px);
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 6b8fb37..9f55ee2 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -3,6 +3,7 @@
   skClickBackdrop
   (clickedBackdrop)="closeRequested.emit()"
   (keydown.escape)="closeRequested.emit()"
+  [ngClass]="{ 'fullscreen-dialog': fullscreen() }"
 >
   <div class="sk-wrapper">
     @if (showCloseButton()) {
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index 2fa35f2..cacff40 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -61,9 +61,9 @@ export class DialogComponent {
 
   closeButtonProperties = input<CloseButtonProperties>();
 
-  // contentShadow = input<boolean>(true);
+  fullscreen = input<boolean>(false);
 
-  //fullscreen = input<boolean>(false);
+  // contentShadow = input<boolean>(true);
 
   closeRequested = output<void>();
 

From 441ea1dd9e47bc019834a70e4d53e3e4d3845684 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 24 Apr 2024 15:27:45 +0200
Subject: [PATCH 25/50] feat: add contentShadow input

---
 libs/sketch/src/lib/components/dialog/dialog.component.css  | 4 ++++
 libs/sketch/src/lib/components/dialog/dialog.component.html | 5 ++++-
 libs/sketch/src/lib/components/dialog/dialog.component.ts   | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index 8472148..c99003b 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -61,6 +61,10 @@ dialog::backdrop {
   background: var(--sk-dialog-background, transparent);
 }
 
+.sk-dialog-content-shadow {
+  box-shadow: var(--sk-dialog-content-shadow, rgb(0 0 0 / 20%) 0 10px 20px);
+}
+
 .sk-dialog-no-margin {
   margin: 0;
 }
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 9f55ee2..2e06c96 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -34,7 +34,10 @@
     </button>
     }
     <div
-      [ngClass]="{ 'sk-dialog-no-margin': innerCloseButton() }"
+      [ngClass]="{
+        'sk-dialog-no-margin': innerCloseButton(),
+        'sk-dialog-content-shadow': contentShadow()
+      }"
       class="sk-inner-content-wrapper"
     >
       <ng-content></ng-content>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index cacff40..b79487d 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -63,7 +63,7 @@ export class DialogComponent {
 
   fullscreen = input<boolean>(false);
 
-  // contentShadow = input<boolean>(true);
+  contentShadow = input<boolean>(false);
 
   closeRequested = output<void>();
 

From 8fb5cb8aba537ff8553f7901281edc6cf99c3e24 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 24 Apr 2024 17:03:09 +0200
Subject: [PATCH 26/50] refactor: change some default values of the dialog

---
 libs/sketch/src/lib/components/dialog/dialog.component.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index c99003b..412493e 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -32,8 +32,8 @@ dialog::backdrop {
 }
 
 .inner-close-button {
-  top: var(--sk-dialog-inner-close-button-space, 15px);
-  right: var(--sk-dialog-inner-close-button-space, 15px);
+  top: var(--sk-dialog-inner-close-button-space, 10px);
+  right: var(--sk-dialog-inner-close-button-space, 10px);
 }
 
 .sk-wrapper {
@@ -46,7 +46,7 @@ dialog::backdrop {
 }
 
 .sk-inner-content-wrapper {
-  padding: var(--sk-dialog-inner-content-padding, 0);
+  padding: var(--sk-dialog-inner-content-padding, 40px);
   height: calc(
     100% - (var(--sk-dialog-inner-content-margin) * 2) -
       (var(--sk-dialog-inner-content-padding) * 2)

From c548094edb45bdd2a059bfee9ddec5123be1e637 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 24 Apr 2024 17:03:45 +0200
Subject: [PATCH 27/50] chore: update documentation according to new
 implementations

---
 .../components/dialog/dialog-documentation.md | 344 ++++++++++++++----
 1 file changed, 274 insertions(+), 70 deletions(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog-documentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
index 942869d..649c05e 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-documentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -12,9 +12,7 @@ First, let's have a look at the basic structure of the Dialog:
 <button (click)="isDialogOpen = true">open Dialog!</button>
 
 <sk-dialog [(open)]="isDialogOpen" (closeRequested)="isDialogOpen = false">
-  <div class="styled-wrapper">
-    <p>here comes some content</p>
-  </div>
+  <p>here comes some content</p>
 </sk-dialog>
 ```
 
@@ -22,24 +20,21 @@ This is all you need to get started! But let's have a closer look at the options
 
 > It is recommended to place the dialog at the end of your code since it is not connected to anything.
 
-### open Dialog
+### Opening the Dialog
 
-To open the Dialog just create a starting point (a button for example) with a function that toggles a variable. For example:
-
-```ts
-isDialogOpen = false;
-```
+To open the Dialog, just create a starting point (a button for example) with a function that toggles a variable. For example: `isDialogOpen = false;`
 
 Use this variable in the model (`[(open)]="isDialogOpen"`) to bring your Dialog to life.
-Once the dialog is open, you can't interact with the underlying page, so pressing buttons or scrolling behind the dialog is not possible.
-When it is closed, you can interact with the page again.
 
-### close Dialog
+> Once the dialog is open, you can't interact with the underlying page, so pressing buttons or scrolling behind the dialog is not possible.
+> When it is closed, you can interact with the page again.
+
+### Closing the Dialog
 
 Closing can be performed in three different ways:
 
 1. Clicking the [Backdrop](#backdrop)
-2. Pressing Escape on the keyboard
+2. Pressing `Escape` on the keyboard
 3. Clicking the [Close button](#close-button)
 
 All of these options are getting recognized by `(closeRequested)`. So just set your variable to `false` here and the Dialog will be closed.
@@ -48,12 +43,12 @@ All of these options are getting recognized by `(closeRequested)`. So just set y
 
 ### Close Button
 
-The close button is not shown by default. To show it, set `[showCloseButton]` to true.
+The close button is not shown by default. To show it, set `[showCloseButton]` to `true`.
 
-If you want to show it, you can decide if the button is placed inside or outside your content.
+If you want to show it, you can decide if the button is placed inside or outside your Container.
 By default, it is placed outside. To place it within the content set `[innerCloseButton]` to `true`.
 
-> When the Close Button is outside the content, you can define the margin of the actual content to the close button. Look at the [Content Section](#content) to see how.
+> You can define the space of the actual content to the Close Button (inside) and the space of the Container to the Close Button (outside). Look at the [Content Section - Spacing](#content) to see how.
 
 It is a transparent button positioned in the top right corner with a black cross in it.
 You can also adjust the styling of the button and the svg icon for your needs.
@@ -157,43 +152,53 @@ As you see in the table, none of the options are required. You can adjust one, t
 The Backdrop is the area around the content that covers the whole screen. When you click on it, it will close the Dialog.
 By default, it is black with an opacity of 50% (as `rgb()` value) and has no blur.
 
-To change the color, opacity and blur, you need to target the `sk-dialog` and overwrite the default custom properties `--sk-dialog-background`and`--sk-dialog-background-blur`.
+To change the color, opacity and blur, you need to target the `sk-dialog` and overwrite the default custom properties `--sk-dialog-backdrop`and`--sk-dialog-backdrop-blur`.
 
 Here is an example:
 
 ```css
 sk-dialog {
-  --sk-dialog-background: rgb(92, 107, 192 / 40%);
+  --sk-dialog-backdrop: rgb(92, 107, 192 / 40%);
   /* 
     other possible values:
     rgba(92 107 192, 0.4) or 
     hsl(231, 44%, 56% / 40%) / hsla(231, 44%, 56%, 0.4) or 
     hex: #5c6bc066
-    */
-  --sk-dialog-background-blur: 2px;
+  */
+  --sk-dialog-backdrop-blur: 2px;
 }
 ```
 
-You can also use different color values like `rgba`, `hsl/hsla` or `hex` to define your color. It is just important to use a value where you can define the opacity.
-`rgb/rgba` or `hsl/hsla` are recommended here, since it is easier to adjust the opacity.
+You can also use different color values like `rgba`, `hsl/hsla` or `hex` to define your color. Also gradients are possible.
+
+> It is important to use a value where you can define the opacity.
+> `rgb/rgba` or `hsl/hsla` are recommended here, since it is easier to adjust the opacity.
 
-For the blur, a value up to `5px` is recommended because more make the background nearly invisible.
+For the blur, a value up to `5px` is recommended, because more make the background nearly invisible.
 
 ### Content
 
 The Content and the styling of it is completely up to you. It can be basic text or complex components.
-Wrapping your content with a styled container is recommended, because otherwise the content is displayed on a transparent background.
+You don't need a styling wrapper for your content, you style the container with provided custom properties. To do so, target the `sk-dialog {...}` in your css file and adjust the desired custom properties.
+
+You have some other options for the styling and positioning of your content. (See [Styling with custom properties](#styling-with-custom-properties) for a quick overview)
 
-Some basic styling could be a `background-color`, `padding` and `border-radius`. Of course you can also use `display: flex` to adjust the layout for your needs and everything else possible with css.
+#### Container Style
 
-You have some other options for the styling and positioning of your content.
+- To change the width and height of the container, change the custom properties `--sk-dialog-width` and `--sk-dialog-height` (or only one of them). By default the container takes the full width and fit the height of the content.
+- It is recommended to add a background, because by default the container is transparent and the backdrop will shine through. You can adjust it by changing the `--sk-dialog-background` custom property. You can do gradients, solid colors, images etc.
+- The edges are not rounded by default. If you want to have a border-radius, change the `--sk-dialog-border-radius` custom property.
+- By default, the overflow of the container is `auto`, if you'd like to change this behavior, adjust the `--sk-dialog-overflow` custom property.
+- If you want to have a shadow around the container, set `[contentShadow]` to true and adjust `--sk-dialog-content-shadow` if you'd like to change the default shadow. Just keep in mind that should not be larger than the shadow should not be larger than the `--sk-dialog-inner-content-margin` since it would be cut.
+
+#### Container Spacing
 
-- To change the width, target the `sk-dialog` and overwrite the default custom property `--sk-dialog-width`. The default is `auto` so you can freely decide what you need. When you don't overwrite it, it takes the full width of the screen.
 - To have a proper spacing to the sides, overwrite `--sk-dialog-margin` and set the margin as wanted. By default, this is `0`.
-- When the [Close Button](#close-button) is outside the content, you can define the margin of the actual content to the close button. In this way, you can move it further away if wanted. Just overwrite the `--sk-dialog-inner-content-margin` in the `sk-dialog`. It has a default of `20px`. If `innerCloseButton` is false, this is getting ignored. It is recommended to have at least the same inner content margin as the size of the close button icon.
-- When the [Close Button](#close-button) is inside the content, use `--sk-dialog-inner-close-button-space` to define the spacing from your content wrapper. It will move the button proportionally.
+- To archive a good spacing from your content to the container edges, adjust `--sk-dialog-inner-content-padding`, otherwise it will stick to the sides.
+- When the [Close Button](#close-button) is outside the content, you can define the margin of the Container to the Close Button. In this way, you can move it further away if wanted. Just overwrite the `--sk-dialog-inner-content-margin`. It has a default of `20px`. If `innerCloseButton` is `true`, this is getting ignored. It is recommended to have at least the same inner content margin as the size of the close button icon.
+- When the [Close Button](#close-button) is inside the content, use `--sk-dialog-inner-close-button-space` to define the spacing from your content wrapper. It will move the button proportionally. `innerCloseButton` must be `true`, otherwise it is getting ignored.
 
-> The Close Button is part of the content, according to styling. So changing the custom property `--sk-dialog-margin` will not affect the position of the close button.
+> In terms of styling, the Close Button is part of the Container. So changing the custom property `--sk-dialog-margin` will not affect the position of the Close Button.
 >
 > To move it further away, adjust the `--sk-dialog-inner-content-margin` custom property.
 
@@ -203,21 +208,17 @@ By default, the Dialog is placed in the center of the screen.
 
 ### Content Shadow
 
-The Dialog does not come with a Shadow for the content. However, you can add one yourself.
-
-If you have a wrapper class for your actual content (which is recommended), you can add a `box-shadow`. It will be displayed in the margin set in `--sk-dialog-inner-content-margin`, so kep this in mind to avoid cutting the shadow.
+You can add a Shadow to the dialog. By default, it is disabled. To add one, set `[contentShadow]` to true.
 
-Here is an example:
+The default value for the shadow is `rgb(0 0 0 / 20%) 0 10px 20px`. If you'd like to change it, change the `--sk-dialog-content-shadow` custom property in `sk-dialog` in your css file to your desired shadow.
 
-```css
-.styled-wrapper {
-  box-shadow: rgba(0, 0, 0, 0.2) 0 10px 25px;
-}
-```
+> Keep in mind that your shadow should not be larger than the `--sk-dialog-inner-content-margin` to avoid cutting the shadow.
 
 ### Scrolling
 
-If you have more content than the height of the content box, just add `overflow: scroll` to the wrapper class and you are able to scroll within the Dialog.
+If you have more content than the height of the content box, it will automatically be able to scroll to the bottom of the content.
+
+If you'd like to change this behavior, change the `--sk-dialog-overflow` custom property in `sk-dialog` in your css file to adjust the overflow behavior on the y-axis.
 
 ## Accessibility
 
@@ -232,25 +233,22 @@ Make sure to add another variable that handles the state. Here is an example:
 <button (click)="isDialogOpen = true">open Dialog!</button>
 
 <sk-dialog [(open)]="isDialogOpen" (closeRequested)="isDialogOpen = false">
-  <div class="styled-wrapper">
-    <p>here comes some content</p>
-
-    <button (click)="isSecondDialogOpen = true">open second Dialog!</button>
-
-    <sk-dialog
-      [(open)]="isSecondDialogOpen"
-      (closeRequested)="isSecondDialogOpen = false"
-    >
-      <div class="second-styled-wrapper">
-        <p>here comes some content inside the nested dialog</p>
-      </div>
-    </sk-dialog>
-  </div>
+  <p>here comes some content</p>
+
+  <button (click)="isSecondDialogOpen = true">open second Dialog!</button>
+
+  <sk-dialog
+    [(open)]="isSecondDialogOpen"
+    (closeRequested)="isSecondDialogOpen = false"
+  >
+    <p>here comes some content inside the nested dialog</p>
+  </sk-dialog>
 </sk-dialog>
 ```
 
 You can add as many nested Dialogs as you want, but it is recommended to nest only one of them.
-Clicking `Escape` when multiple Overlays are open will close all of them.
+
+> Clicking `Escape` when multiple Overlays are open will close all of them.
 
 ## Properties Overview
 
@@ -325,7 +323,8 @@ Clicking `Escape` when multiple Overlays are open will close all of them.
 </td>
 <td>
 
-[`CloseButtonProperties`](#closebuttonproperties)
+[`CloseButtonProperties`](#closebuttonproperties) <br>
+(See below)
 
 </td>
 <td> no/optional </td>
@@ -340,7 +339,53 @@ Makes the title, icon source and icon/button styles adjustable.
 
 </td>
 </tr>
-</table
+<tr>
+<td>
+
+`[fullscreen]`
+
+</td>
+<td>
+
+`boolean`
+
+</td>
+<td> no/optional </td>
+<td>
+
+Makes the Dialog grow to full width and height.
+
+</td>
+<td>
+
+`false`
+
+</td>
+</tr>
+<tr>
+<td>
+
+`[contentShadow]`
+
+</td>
+<td>
+
+`boolean`
+
+</td>
+<td> no/optional </td>
+<td>
+
+Adds a Shadow to the Dialog.
+
+</td>
+<td>
+
+`false`
+
+</td>
+</tr>
+</table>
 
 <table>
 <tr>
@@ -447,7 +492,7 @@ These are all options:
 </tr>
 </table>
 
-### Styles
+### Styling with custom properties
 
 None of these are required. All of them need to be changed in `sk-dialog {...}` in your css file.
 
@@ -455,13 +500,131 @@ None of these are required. All of them need to be changed in `sk-dialog {...}`
 <tr>
 <td> Name </td> <td> Description </td> <td> Default Value </td> <td> Further info </td>
 </tr>
+
+<tr>
+<td colspan="4" style="text-align: center">Container</td>
+</tr>
 <tr>
 <td>
 
 `--sk-dialog-width`
 
 </td>
-<td> Defines the width of your content. (including background/wrapper) </td>
+<td>
+
+Defines the `width` of the Container.
+
+</td>
+<td>
+
+`auto`
+
+</td>
+<td>
+
+[Content - Container Style](#container-style)
+
+</td>
+</tr>
+<tr>
+<td>
+
+`--sk-dialog-height`
+
+</td>
+<td>
+
+Defines the `height` of the Container.
+
+</td>
+<td>
+
+`fit-content`
+
+</td>
+<td>
+
+[Content - Container Style](#container-style)
+
+</td>
+</tr>
+<tr>
+<td>
+
+`--sk-dialog-border-radius`
+
+</td>
+<td>
+
+Defines the `borderRadius` of the Container.
+
+</td>
+<td>
+
+`0`
+
+</td>
+<td>
+
+[Content - Container Style](#container-style)
+
+</td>
+</tr>
+<tr>
+<td>
+
+`--sk-dialog-background`
+
+</td>
+<td>
+
+Defines the `background` style of the Container.
+
+</td>
+<td>
+
+`transparent`
+
+</td>
+<td>
+
+[Content - Container Style](#container-style)
+
+</td>
+</tr>
+<tr>
+<td>
+
+`--sk-dialog-content-shadow`
+
+</td>
+<td>
+
+Defines the `box-shadow` of the Container.
+
+</td>
+<td>
+
+`rgb(0 0 0 / 20%) 0 10px 20px`
+
+</td>
+<td>
+
+[Content - Container Style](#container-style)
+
+</td>
+</tr>
+<tr>
+<td>
+
+`--sk-dialog-overflow`
+
+</td>
+<td>
+
+Defines the `overflow` behavior of the Container.
+
+</td>
 <td>
 
 `auto`
@@ -469,17 +632,25 @@ None of these are required. All of them need to be changed in `sk-dialog {...}`
 </td>
 <td>
 
-[Content](#content)
+[Content - Container Style](#container-style)
 
 </td>
 </tr>
+
+<tr>
+<td colspan="4" style="text-align: center">Spacing</td>
+</tr>
 <tr>
 <td>
 
 `--sk-dialog-margin`
 
 </td>
-<td> Defines the margin/spacing of your content (including background/wrapper) to the sides. </td>
+<td>
+
+Defines the `margin` of the Container (including Close Button) to the sides.
+
+</td>
 <td>
 
 `0`
@@ -487,7 +658,7 @@ None of these are required. All of them need to be changed in `sk-dialog {...}`
 </td>
 <td>
 
-[Content](#content)
+[Content - Container Spacing](#container-spacing)
 
 </td>
 </tr>
@@ -499,17 +670,44 @@ None of these are required. All of them need to be changed in `sk-dialog {...}`
 </td>
 <td>
 
-Defines the margin/spacing of your content to the close button. Only works with `[innerCloseButton]="false"`
+Defines the `margin` of the Container to the close button.
+
+Only works with `[innerCloseButton]="false"` <br>
+Should have at least the size of the Close Button Icon size.
 
 </td>
 <td>
 
-`0`
+`20px`
 
 </td>
 <td>
 
-[Content](#content)
+[Content - Container Spacing](#container-spacing)
+
+</td>
+</tr>
+<tr>
+<td>
+
+`--sk-dialog-inner-content-padding`
+
+</td>
+<td>
+
+Defines the `padding` of your content to the container.
+
+Should have at least `30px` more than `--sk-dialog-inner-close-button-space` (with `[innerCloseButton]="true"`) to avoid the Close Button overlapping the Content.
+
+</td>
+<td>
+
+`40px`
+
+</td>
+<td>
+
+[Content - Container Spacing](#container-spacing)
 
 </td>
 </tr>
@@ -521,24 +719,30 @@ Defines the margin/spacing of your content to the close button. Only works with
 </td>
 <td>
 
-Defines the spacing of the inner close button to the content wrapper. Only works with `[innerCloseButton]="true"`
+Defines the spacing of the inner Close Button to the Container.
+
+Only works with `[innerCloseButton]="true"`
 
 </td>
 <td>
 
-`15px`
+`10px`
 
 </td>
 <td>
 
-[Content](#content)
+[Content - Container Spacing](#container-spacing)
 
 </td>
 </tr>
+
+<tr>
+<td colspan="4" style="text-align: center">Backdrop</td>
+</tr>
 <tr>
 <td>
 
-`--sk-dialog-background`
+`--sk-dialog-backdrop`
 
 </td>
 <td>
@@ -562,7 +766,7 @@ Must have a color value with opcaity, otherwise it covers the background complet
 <tr>
 <td>
 
-`--sk-dialog-background-blur`
+`--sk-dialog-backdrop-blur`
 
 </td>
 <td>

From a444fa0341ea949104c14920d9fa19c5a0aa10b1 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Thu, 25 Apr 2024 09:53:24 +0200
Subject: [PATCH 28/50] refactor: change background-color to background for
 backdrop

---
 libs/sketch/src/lib/components/dialog/dialog.component.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index 412493e..c4eca42 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -23,7 +23,7 @@ dialog:has(::backdrop) {
 }
 
 dialog::backdrop {
-  background-color: var(--sk-dialog-backdrop, rgb(0 0 0 / 50%));
+  background: var(--sk-dialog-backdrop, rgb(0 0 0 / 50%));
   backdrop-filter: blur(var(--sk-dialog-backdrop-blur, 0));
 }
 

From 8aa906bebe70aeb2bb5451df0f18aa12a3310068 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Thu, 25 Apr 2024 10:50:13 +0200
Subject: [PATCH 29/50] chore: adjust documentation

---
 libs/sketch/src/lib/components/dialog/dialog-documentation.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog-documentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
index 649c05e..e5fd96c 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-documentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -176,7 +176,7 @@ You can also use different color values like `rgba`, `hsl/hsla` or `hex` to defi
 
 For the blur, a value up to `5px` is recommended, because more make the background nearly invisible.
 
-### Content
+### Container and Content
 
 The Content and the styling of it is completely up to you. It can be basic text or complex components.
 You don't need a styling wrapper for your content, you style the container with provided custom properties. To do so, target the `sk-dialog {...}` in your css file and adjust the desired custom properties.
@@ -185,7 +185,7 @@ You have some other options for the styling and positioning of your content. (Se
 
 #### Container Style
 
-- To change the width and height of the container, change the custom properties `--sk-dialog-width` and `--sk-dialog-height` (or only one of them). By default the container takes the full width and fit the height of the content.
+- To change the width and height of the container, change the custom properties `--sk-dialog-width` and `--sk-dialog-height` (or only one of them). By default, the container takes the full width and fits the height of the content. If you want to have a fullscreen Dialog, set `[fullscreen]` to true, you don't need to anything for height and width custom properties.
 - It is recommended to add a background, because by default the container is transparent and the backdrop will shine through. You can adjust it by changing the `--sk-dialog-background` custom property. You can do gradients, solid colors, images etc.
 - The edges are not rounded by default. If you want to have a border-radius, change the `--sk-dialog-border-radius` custom property.
 - By default, the overflow of the container is `auto`, if you'd like to change this behavior, adjust the `--sk-dialog-overflow` custom property.

From f9864e644655783ef32e4dd1014cc44a91d97800 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Thu, 25 Apr 2024 10:58:39 +0200
Subject: [PATCH 30/50] chore: rename close output

---
 .../lib/components/dialog/dialog-documentation.md   | 13 +++++--------
 .../src/lib/components/dialog/dialog.component.html |  6 +++---
 .../src/lib/components/dialog/dialog.component.ts   |  2 +-
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog-documentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
index e5fd96c..3aba21c 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-documentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -11,7 +11,7 @@ First, let's have a look at the basic structure of the Dialog:
 ```html
 <button (click)="isDialogOpen = true">open Dialog!</button>
 
-<sk-dialog [(open)]="isDialogOpen" (closeRequested)="isDialogOpen = false">
+<sk-dialog [(open)]="isDialogOpen" (close)="isDialogOpen = false">
   <p>here comes some content</p>
 </sk-dialog>
 ```
@@ -37,7 +37,7 @@ Closing can be performed in three different ways:
 2. Pressing `Escape` on the keyboard
 3. Clicking the [Close button](#close-button)
 
-All of these options are getting recognized by `(closeRequested)`. So just set your variable to `false` here and the Dialog will be closed.
+All of these options are getting recognized by `(close)`. So just set your variable to `false` here and the Dialog will be closed.
 
 ## Styling
 
@@ -232,15 +232,12 @@ Make sure to add another variable that handles the state. Here is an example:
 ```html
 <button (click)="isDialogOpen = true">open Dialog!</button>
 
-<sk-dialog [(open)]="isDialogOpen" (closeRequested)="isDialogOpen = false">
+<sk-dialog [(open)]="isDialogOpen" (close)="isDialogOpen = false">
   <p>here comes some content</p>
 
   <button (click)="isSecondDialogOpen = true">open second Dialog!</button>
 
-  <sk-dialog
-    [(open)]="isSecondDialogOpen"
-    (closeRequested)="isSecondDialogOpen = false"
-  >
+  <sk-dialog [(open)]="isSecondDialogOpen" (close)="isSecondDialogOpen = false">
     <p>here comes some content inside the nested dialog</p>
   </sk-dialog>
 </sk-dialog>
@@ -394,7 +391,7 @@ Adds a Shadow to the Dialog.
 <tr>
 <td>
 
-`(closeRequested)`
+`(close)`
 
 </td>
 <td> yes </td>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 2e06c96..9ade109 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -1,8 +1,8 @@
 <dialog
   #dialogElement
   skClickBackdrop
-  (clickedBackdrop)="closeRequested.emit()"
-  (keydown.escape)="closeRequested.emit()"
+  (clickedBackdrop)="close.emit()"
+  (keydown.escape)="close.emit()"
   [ngClass]="{ 'fullscreen-dialog': fullscreen() }"
 >
   <div class="sk-wrapper">
@@ -12,7 +12,7 @@
       [ngClass]="{ 'inner-close-button': innerCloseButton() }"
       type="button"
       [title]="defaultCloseButtonProperties().title"
-      (click)="closeRequested.emit()"
+      (click)="close.emit()"
       [style.width.px]="defaultCloseButtonProperties().styles?.buttonWidth"
       [style.height.px]="defaultCloseButtonProperties().styles?.buttonHeight"
       [style.borderRadius.px]="
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index b79487d..fe87de9 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -65,7 +65,7 @@ export class DialogComponent {
 
   contentShadow = input<boolean>(false);
 
-  closeRequested = output<void>();
+  close = output<void>();
 
   private readonly dialogElement =
     viewChild.required<ElementRef<HTMLDialogElement>>('dialogElement');

From b4736c4a0614d42e8caa823e2c9ee7f6c903e05a Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Thu, 25 Apr 2024 11:09:46 +0200
Subject: [PATCH 31/50] refactor: adjust margin and height when no button or
 inner button

---
 libs/sketch/src/lib/components/dialog/dialog.component.css  | 1 +
 libs/sketch/src/lib/components/dialog/dialog.component.html | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index c4eca42..4582ab3 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -67,4 +67,5 @@ dialog::backdrop {
 
 .sk-dialog-no-margin {
   margin: 0;
+  height: calc(100% - (var(--sk-dialog-inner-content-padding) * 2));
 }
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 9ade109..d601aaf 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -35,7 +35,8 @@
     }
     <div
       [ngClass]="{
-        'sk-dialog-no-margin': innerCloseButton(),
+        'sk-dialog-no-margin':
+          !showCloseButton() || (showCloseButton() && innerCloseButton()),
         'sk-dialog-content-shadow': contentShadow()
       }"
       class="sk-inner-content-wrapper"

From 7d89912851ed078adda1524683031010f56373fc Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Thu, 25 Apr 2024 12:05:50 +0200
Subject: [PATCH 32/50] refactor: adjust naming of classes and variables

---
 .../components/dialog/dialog-documentation.md | 119 +++---------------
 .../components/dialog/dialog.component.css    |  36 +++---
 .../components/dialog/dialog.component.html   |  14 +--
 .../lib/components/dialog/dialog.component.ts |   4 +-
 4 files changed, 43 insertions(+), 130 deletions(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog-documentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
index 3aba21c..31d103a 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-documentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -55,97 +55,9 @@ You can also adjust the styling of the button and the svg icon for your needs.
 
 To customize the styling, create a variable of type `CloseButtonProperties` and assign the variable to this optional input in the template: `[closeButtonProperties]`.
 
-You have different options here:
+You can adjust the title, the icon source and the styles (like background, border, width, height, etc.). See [Close Button Properties](#closebuttonproperties) for more information.
 
-<table>
-<tr>
-<td> Key </td> <td> Type </td> <td> Required </td> <td> Description </td> <td> Default Value </td>
-</tr>
-<tr>
-<td>
-
-`title`
-
-</td>
-<td>
-
-`string`
-
-</td>
-<td> no/optional </td>
-<td> The title for the Button and the description for the alt tag of the image </td>
-<td>
-
-`Close`
-
-</td>
-</tr>
-<tr>
-<td>
-
-`iconSrc`
-
-</td>
-<td>
-
-`string`
-
-</td>
-<td> no/optional </td>
-<td> If you want to change the icon, add the path to the new icon here </td>
-<td>
-
-the black cross: `'../../../assets/cross.svg'`
-
-</td>
-</tr>
-<tr>
-<td>
-
-`styles`
-
-</td>
-<td>
-
-`CloseButtonStyles`
-
-These are all options:
-
-```ts
-{
-  buttonWidth?: number | string;
-  buttonHeight?: number | string;
-  borderRadius?: number;
-  backgroundColor?: string;
-  border?: string;
-  iconWidth?: number | string;
-  iconHeight?: number | string;
-  padding?: string;
-  margin?: string;
-}
-```
-
-</td>
-<td> no/optional </td>
-<td> You can change different styles for the button and the icon here </td>
-<td>
-
-```ts
-{
-  iconWidth: 20,
-  iconHeight: 20,
-  backgroundColor: 'transparent',
-  border: 'none',
-  padding: '0',
-  margin: '0',
-}
-```
-
-</td>
-</tr>
-</table>
-
-As you see in the table, none of the options are required. You can adjust one, two or all of them - only the value you change will replace the default.
+> If you change one property, the rest will keep their default values. So you can adjust the values as you want.
 
 ### Backdrop
 
@@ -161,9 +73,12 @@ sk-dialog {
   --sk-dialog-backdrop: rgb(92, 107, 192 / 40%);
   /* 
     other possible values:
-    rgba(92 107 192, 0.4) or 
-    hsl(231, 44%, 56% / 40%) / hsla(231, 44%, 56%, 0.4) or 
-    hex: #5c6bc066
+    - rgba(92 107 192, 0.4) 
+    - hsl(231, 44%, 56% / 40%) / hsla(231, 44%, 56%, 0.4) 
+    - hex: #5c6bc066
+    - gradients:
+        radial-gradient(circle, rgba(238, 174, 202, 0.4) 0%, rgba(148, 187, 233, 0.4) 100%); or
+        linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
   */
   --sk-dialog-backdrop-blur: 2px;
 }
@@ -189,18 +104,18 @@ You have some other options for the styling and positioning of your content. (Se
 - It is recommended to add a background, because by default the container is transparent and the backdrop will shine through. You can adjust it by changing the `--sk-dialog-background` custom property. You can do gradients, solid colors, images etc.
 - The edges are not rounded by default. If you want to have a border-radius, change the `--sk-dialog-border-radius` custom property.
 - By default, the overflow of the container is `auto`, if you'd like to change this behavior, adjust the `--sk-dialog-overflow` custom property.
-- If you want to have a shadow around the container, set `[contentShadow]` to true and adjust `--sk-dialog-content-shadow` if you'd like to change the default shadow. Just keep in mind that should not be larger than the shadow should not be larger than the `--sk-dialog-inner-content-margin` since it would be cut.
+- If you want to have a shadow around the container, set `[contentShadow]` to true and adjust `--sk-dialog-content-shadow` if you'd like to change the default shadow. Just keep in mind that should not be larger than the shadow should not be larger than the `--sk-dialog-container-margin` since it would be cut.
 
 #### Container Spacing
 
 - To have a proper spacing to the sides, overwrite `--sk-dialog-margin` and set the margin as wanted. By default, this is `0`.
-- To archive a good spacing from your content to the container edges, adjust `--sk-dialog-inner-content-padding`, otherwise it will stick to the sides.
-- When the [Close Button](#close-button) is outside the content, you can define the margin of the Container to the Close Button. In this way, you can move it further away if wanted. Just overwrite the `--sk-dialog-inner-content-margin`. It has a default of `20px`. If `innerCloseButton` is `true`, this is getting ignored. It is recommended to have at least the same inner content margin as the size of the close button icon.
+- To archive a good spacing from your content to the container edges, adjust `--sk-dialog-container-padding`, otherwise it will stick to the sides.
+- When the [Close Button](#close-button) is outside the content, you can define the margin of the Container to the Close Button. In this way, you can move it further away if wanted. Just overwrite the `--sk-dialog-container-margin`. It has a default of `20px`. If `innerCloseButton` is `true`, this is getting ignored. It is recommended to have at least the same inner content margin as the size of the close button icon.
 - When the [Close Button](#close-button) is inside the content, use `--sk-dialog-inner-close-button-space` to define the spacing from your content wrapper. It will move the button proportionally. `innerCloseButton` must be `true`, otherwise it is getting ignored.
 
 > In terms of styling, the Close Button is part of the Container. So changing the custom property `--sk-dialog-margin` will not affect the position of the Close Button.
 >
-> To move it further away, adjust the `--sk-dialog-inner-content-margin` custom property.
+> To move it further away, adjust the `--sk-dialog-container-margin` custom property.
 
 ### Positioning
 
@@ -212,7 +127,7 @@ You can add a Shadow to the dialog. By default, it is disabled. To add one, set
 
 The default value for the shadow is `rgb(0 0 0 / 20%) 0 10px 20px`. If you'd like to change it, change the `--sk-dialog-content-shadow` custom property in `sk-dialog` in your css file to your desired shadow.
 
-> Keep in mind that your shadow should not be larger than the `--sk-dialog-inner-content-margin` to avoid cutting the shadow.
+> Keep in mind that your shadow should not be larger than the `--sk-dialog-container-margin` to avoid cutting the shadow.
 
 ### Scrolling
 
@@ -460,7 +375,7 @@ These are all options:
   buttonWidth?: number | string;
   buttonHeight?: number | string;
   borderRadius?: number;
-  backgroundColor?: string;
+  background?: string;
   border?: string;
   iconWidth?: number | string;
   iconHeight?: number | string;
@@ -478,7 +393,7 @@ These are all options:
 {
   iconWidth: 20,
   iconHeight: 20,
-  backgroundColor: 'transparent',
+  background: 'transparent',
   border: 'none',
   padding: '0',
   margin: '0',
@@ -662,7 +577,7 @@ Defines the `margin` of the Container (including Close Button) to the sides.
 <tr>
 <td>
 
-`--sk-dialog-inner-content-margin`
+`--sk-dialog-container-margin`
 
 </td>
 <td>
@@ -687,7 +602,7 @@ Should have at least the size of the Close Button Icon size.
 <tr>
 <td>
 
-`--sk-dialog-inner-content-padding`
+`--sk-dialog-container-padding`
 
 </td>
 <td>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index 4582ab3..fa5abda 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -15,28 +15,28 @@ dialog:has(::backdrop) {
   align-items: center;
 }
 
-.close-button {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  right: 0;
-}
-
 dialog::backdrop {
   background: var(--sk-dialog-backdrop, rgb(0 0 0 / 50%));
   backdrop-filter: blur(var(--sk-dialog-backdrop-blur, 0));
 }
 
-.fullscreen-dialog {
-  height: 100%;
+.sk-dialog-close-button {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  right: 0;
 }
 
-.inner-close-button {
+.sk-dialog-inner-close-button {
   top: var(--sk-dialog-inner-close-button-space, 10px);
   right: var(--sk-dialog-inner-close-button-space, 10px);
 }
 
-.sk-wrapper {
+.sk-dialog-fullscreen-dialog {
+  height: 100%;
+}
+
+.sk-dialog-wrapper {
   position: relative;
   overflow: hidden;
   display: block;
@@ -45,17 +45,17 @@ dialog::backdrop {
   max-height: calc(100svh - (var(--sk-dialog-margin) * 2));
 }
 
-.sk-inner-content-wrapper {
-  padding: var(--sk-dialog-inner-content-padding, 40px);
+.sk-dialog-content-container {
+  padding: var(--sk-dialog-container-padding, 40px);
   height: calc(
-    100% - (var(--sk-dialog-inner-content-margin) * 2) -
-      (var(--sk-dialog-inner-content-padding) * 2)
+    100% - (var(--sk-dialog-container-margin) * 2) -
+      (var(--sk-dialog-container-padding) * 2)
   );
-  margin: var(--sk-dialog-inner-content-margin, 20px);
+  margin: var(--sk-dialog-container-margin, 20px);
   overflow-y: var(--sk-dialog-overflow, auto);
   max-height: calc(
     100svh - (var(--sk-dialog-margin) * 2) -
-      (var(--sk-dialog-inner-content-margin) * 2)
+      (var(--sk-dialog-container-margin) * 2)
   );
   border-radius: var(--sk-dialog-border-radius, 0);
   background: var(--sk-dialog-background, transparent);
@@ -67,5 +67,5 @@ dialog::backdrop {
 
 .sk-dialog-no-margin {
   margin: 0;
-  height: calc(100% - (var(--sk-dialog-inner-content-padding) * 2));
+  height: calc(100% - (var(--sk-dialog-container-padding) * 2));
 }
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index d601aaf..32ecaa6 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -3,13 +3,13 @@
   skClickBackdrop
   (clickedBackdrop)="close.emit()"
   (keydown.escape)="close.emit()"
-  [ngClass]="{ 'fullscreen-dialog': fullscreen() }"
+  [ngClass]="{ 'sk-dialog-fullscreen-dialog': fullscreen() }"
 >
-  <div class="sk-wrapper">
+  <div class="sk-dialog-wrapper">
     @if (showCloseButton()) {
     <button
-      class="close-button"
-      [ngClass]="{ 'inner-close-button': innerCloseButton() }"
+      class="sk-dialog-close-button"
+      [ngClass]="{ 'sk-dialog-inner-close-button': innerCloseButton() }"
       type="button"
       [title]="defaultCloseButtonProperties().title"
       (click)="close.emit()"
@@ -18,9 +18,7 @@
       [style.borderRadius.px]="
         defaultCloseButtonProperties().styles?.borderRadius
       "
-      [style.backgroundColor]="
-        defaultCloseButtonProperties().styles?.backgroundColor
-      "
+      [style.background]="defaultCloseButtonProperties().styles?.background"
       [style.border]="defaultCloseButtonProperties().styles?.border"
       [style.padding]="defaultCloseButtonProperties().styles?.padding"
       [style.margin]="defaultCloseButtonProperties().styles?.margin"
@@ -39,7 +37,7 @@
           !showCloseButton() || (showCloseButton() && innerCloseButton()),
         'sk-dialog-content-shadow': contentShadow()
       }"
-      class="sk-inner-content-wrapper"
+      class="sk-dialog-content-container"
     >
       <ng-content></ng-content>
     </div>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index fe87de9..f889a10 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -17,7 +17,7 @@ interface CloseButtonStyles {
   buttonWidth?: number | string;
   buttonHeight?: number | string;
   borderRadius?: number;
-  backgroundColor?: string;
+  background?: string;
   border?: string;
   iconWidth?: number | string;
   iconHeight?: number | string;
@@ -37,7 +37,7 @@ const initialButtonProperties: CloseButtonProperties = {
   styles: {
     iconWidth: 20,
     iconHeight: 20,
-    backgroundColor: 'transparent',
+    background: 'transparent',
     border: 'none',
     padding: '0',
     margin: '0',

From 4c568d6f574f607ab6d95eb00c3ddeb82e16e908 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Thu, 25 Apr 2024 17:13:01 +0200
Subject: [PATCH 33/50] refactor: adjust dialog custom properties

---
 .../components/dialog/dialog.component.css    | 41 +++++++++++++------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index fa5abda..7eba04b 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -1,6 +1,21 @@
+:host {
+  --sk-dialog-width: auto;
+  --sk-dialog-height: fit-content;
+  --sk-dialog-margin: 0;
+  --sk-dialog-container-padding: 40px;
+  --sk-dialog-container-margin: 20px;
+  --sk-dialog-inner-close-button-space: 10px;
+  --sk-dialog-background: transparent;
+  --sk-dialog-border-radius: 0;
+  --sk-dialog-content-shadow: rgb(0 0 0 / 20%) 0 10px 20px;
+  --sk-dialog-overflow: auto;
+  --sk-dialog-backdrop: rgb(0 0 0 / 50%);
+  --sk-dialog-backdrop-blur: 0;
+}
+
 dialog {
-  width: var(--sk-dialog-width, auto);
-  height: var(--sk-dialog-height, fit-content);
+  width: var(--sk-dialog-width);
+  height: var(--sk-dialog-height);
   max-width: 100%;
   max-height: 100%;
   padding: 0;
@@ -16,8 +31,8 @@ dialog:has(::backdrop) {
 }
 
 dialog::backdrop {
-  background: var(--sk-dialog-backdrop, rgb(0 0 0 / 50%));
-  backdrop-filter: blur(var(--sk-dialog-backdrop-blur, 0));
+  background: var(--sk-dialog-backdrop);
+  backdrop-filter: blur(var(--sk-dialog-backdrop-blur));
 }
 
 .sk-dialog-close-button {
@@ -28,8 +43,8 @@ dialog::backdrop {
 }
 
 .sk-dialog-inner-close-button {
-  top: var(--sk-dialog-inner-close-button-space, 10px);
-  right: var(--sk-dialog-inner-close-button-space, 10px);
+  top: var(--sk-dialog-inner-close-button-space);
+  right: var(--sk-dialog-inner-close-button-space);
 }
 
 .sk-dialog-fullscreen-dialog {
@@ -40,29 +55,29 @@ dialog::backdrop {
   position: relative;
   overflow: hidden;
   display: block;
-  margin: var(--sk-dialog-margin, 0);
+  margin: var(--sk-dialog-margin);
   height: calc(100% - (var(--sk-dialog-margin) * 2));
   max-height: calc(100svh - (var(--sk-dialog-margin) * 2));
 }
 
 .sk-dialog-content-container {
-  padding: var(--sk-dialog-container-padding, 40px);
+  padding: var(--sk-dialog-container-padding);
   height: calc(
     100% - (var(--sk-dialog-container-margin) * 2) -
       (var(--sk-dialog-container-padding) * 2)
   );
-  margin: var(--sk-dialog-container-margin, 20px);
-  overflow-y: var(--sk-dialog-overflow, auto);
+  margin: var(--sk-dialog-container-margin);
+  overflow-y: var(--sk-dialog-overflow);
   max-height: calc(
     100svh - (var(--sk-dialog-margin) * 2) -
       (var(--sk-dialog-container-margin) * 2)
   );
-  border-radius: var(--sk-dialog-border-radius, 0);
-  background: var(--sk-dialog-background, transparent);
+  border-radius: var(--sk-dialog-border-radius);
+  background: var(--sk-dialog-background);
 }
 
 .sk-dialog-content-shadow {
-  box-shadow: var(--sk-dialog-content-shadow, rgb(0 0 0 / 20%) 0 10px 20px);
+  box-shadow: var(--sk-dialog-content-shadow);
 }
 
 .sk-dialog-no-margin {

From 8e5e8069cabf20c87026a2b861bec73cdaa0cda4 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Thu, 25 Apr 2024 17:13:39 +0200
Subject: [PATCH 34/50] feat: add examples

---
 .../dialog-sample/dialog-sample.component.css |  67 +++-
 .../dialog-sample.component.html              | 348 +++++++++++++++---
 .../dialog-sample/dialog-sample.component.ts  |  19 +-
 3 files changed, 363 insertions(+), 71 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index 36ad379..e77d994 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -1,27 +1,64 @@
-.my-backdrop {
-  background-color: green;
-}
-
 button {
   cursor: pointer;
 }
 
-sk-dialog {
-  --sk-dialog-width: 100%;
-  --sk-dialog-height: 100%;
-  --sk-dialog-border-radius: 20px;
+.layout {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* default styles to see results better */
+div:nth-child(n + 3) sk-dialog {
+  --sk-dialog-margin: 50px;
   --sk-dialog-background: lightblue;
+}
+
+/* fully styled Dialog */
+div:nth-child(2) sk-dialog {
+  --sk-dialog-width: 70%;
+  --sk-dialog-height: 50%;
   --sk-dialog-margin: 50px;
-  --sk-dialog-inner-content-padding: 40px;
-  --sk-dialog-inner-content-margin: 20px;
-  --sk-dialog-inner-close-button-space: 15 px;
+  --sk-dialog-container-margin: 30px;
+  --sk-dialog-container-padding: 40px;
+  --sk-dialog-inner-close-button-space: 15px;
+  --sk-dialog-border-radius: 20px;
+  --sk-dialog-background: lightblue;
+  --sk-dialog-content-shadow: rgb(0 0 0 / 20%) 0 10px 20px;
   --sk-dialog-overflow: scroll;
   --sk-dialog-backdrop: rgb(92 107 192 / 50%);
   --sk-dialog-backdrop-blur: 2px;
 }
 
-.layout {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
+/* Dialog with styled close button */
+div:nth-child(5) sk-dialog {
+  --sk-dialog-container-margin: 40px;
+}
+
+/* Dialog with shadow */
+div:nth-child(6) sk-dialog {
+  --sk-dialog-content-shadow: rgb(255 255 255 / 40%) 0 10px 20px;
+  --sk-dialog-container-margin: 30px;
+}
+
+/* Dialog with overflow */
+div:nth-child(8) sk-dialog {
+  _--sk-dialog-height: 60%;
+}
+
+/* Dialog with fancy colors */
+div:nth-child(9) sk-dialog {
+  --sk-dialog-background: radial-gradient(
+    circle,
+    rgb(238 174 202 / 100%) 0%,
+    rgb(148 187 233 / 100%) 100%
+  );
+  --sk-dialog-backdrop: linear-gradient(
+      217deg,
+      rgb(255 0 0 / 80%),
+      rgb(255 0 0 / 0%) 70%
+    ),
+    linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70%),
+    linear-gradient(336deg, rgb(0 0 255 / 80%), rgb(0 0 255 / 0%) 70%);
+  --sk-dialog-backdrop-blur: 3px;
 }
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index 33f5d7a..4e7a6ec 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -1,104 +1,354 @@
 <div class="layout">
   <div>
-    <button (click)="isUnstyledBasicDialogOpen = true">
-      open unstyled basic Dialog
-    </button>
+    <button (click)="isBasicDialogOpen = true">open basic Dialog</button>
 
-    <sk-dialog
-      [(open)]="isUnstyledBasicDialogOpen"
-      (closeRequested)="isUnstyledBasicDialogOpen = false"
-    >
-      <div>here comes some content.</div>
+    <sk-dialog [(open)]="isBasicDialogOpen" (close)="isBasicDialogOpen = false">
+      <div>
+        here comes some content. This is the most basic dialog, no styling, no
+        spacing.
+      </div>
     </sk-dialog>
   </div>
 
   <div>
-    <button (click)="isStyledBasicDialogOpen = true">
-      open styled basic Dialog
+    <button (click)="isCompletelyStyledDialogOpen = true">
+      open completely styled Dialog
     </button>
 
     <sk-dialog
-      [(open)]="isStyledBasicDialogOpen"
-      (closeRequested)="isStyledBasicDialogOpen = false"
+      [(open)]="isCompletelyStyledDialogOpen"
+      (close)="isCompletelyStyledDialogOpen = false"
+      [showCloseButton]="true"
+      [contentShadow]="true"
     >
-      <div class="my-super-styling-class">
-        <div>here comes some content.</div>
+      <div>
+        here comes some content. This is a dialog with height/width,
+        border-radius, background, shadow, margin, padding and a custom backdrop
+        with blur.
       </div>
     </sk-dialog>
   </div>
 
   <div>
-    <button (click)="isDialogWithOuterCloseButtonOpen = true">
-      open Dialog with default outer Close Button
+    <button (click)="isDialogWithOuterButtonOpen = true">
+      open Dialog with outer button
     </button>
 
     <sk-dialog
-      [(open)]="isDialogWithOuterCloseButtonOpen"
-      (closeRequested)="isDialogWithOuterCloseButtonOpen = false"
+      [(open)]="isDialogWithOuterButtonOpen"
+      (close)="isDialogWithOuterButtonOpen = false"
       [showCloseButton]="true"
     >
-      <div class="my-super-styling-class">
-        <div>here comes some content. show close button true</div>
+      <div>
+        here comes some content. This is a dialog with the Close Button outside
+        of the container (default) and a default container margin.
       </div>
     </sk-dialog>
   </div>
 
   <div>
-    <button (click)="isDialogWithInnerCloseButtonOpen = true">
-      open Dialog with default inner Close Button
+    <button (click)="isDialogWithInnerButtonOpen = true">
+      open Dialog with inner button
     </button>
 
     <sk-dialog
-      [(open)]="isDialogWithInnerCloseButtonOpen"
-      (closeRequested)="isDialogWithInnerCloseButtonOpen = false"
+      [(open)]="isDialogWithInnerButtonOpen"
+      (close)="isDialogWithInnerButtonOpen = false"
       [showCloseButton]="true"
       [innerCloseButton]="true"
     >
-      <div class="my-super-styling-class">
-        <div>
-          here comes some content. show close button true + inner close button
-        </div>
+      <div>
+        here comes some content. This is a dialog with the Close Button inside
+        of the container.
       </div>
     </sk-dialog>
   </div>
 
   <div>
-    <button (click)="isDialogWithStyledOuterCloseButtonOpen = true">
-      open Dialog with styled outer Close Button
+    <button (click)="isDialogWithStyledButtonOpen = true">
+      open Dialog with styled outside close button
     </button>
 
     <sk-dialog
-      [(open)]="isDialogWithStyledOuterCloseButtonOpen"
-      (closeRequested)="isDialogWithStyledOuterCloseButtonOpen = false"
+      [(open)]="isDialogWithStyledButtonOpen"
+      (close)="isDialogWithStyledButtonOpen = false"
       [showCloseButton]="true"
       [closeButtonProperties]="closeButtonProperties"
     >
-      <div class="my-super-styling-class">
-        <div>
-          here comes some content. show close button true +
-          closeButtonProperties
-        </div>
+      <div>
+        here comes some content. This is a dialog with a styled Close Button. If
+        padding is added, increase margin to avoid overlapping with the
+        Container.
       </div>
     </sk-dialog>
   </div>
 
   <div>
-    <button (click)="isDialogWithStyledInnerCloseButtonOpen = true">
-      open Dialog with styled inner Close Button
+    <button (click)="isDialogWithShadowOpen = true">
+      open Dialog with custom shadow
     </button>
 
     <sk-dialog
-      [(open)]="isDialogWithStyledInnerCloseButtonOpen"
-      (closeRequested)="isDialogWithStyledInnerCloseButtonOpen = false"
-      [showCloseButton]="true"
-      [innerCloseButton]="true"
-      [closeButtonProperties]="closeButtonProperties"
+      [(open)]="isDialogWithShadowOpen"
+      (close)="isDialogWithShadowOpen = false"
+      [contentShadow]="true"
     >
-      <div class="my-super-styling-class">
-        <div>
-          here comes some content. show close button true +
-          closeButtonProperties
-        </div>
+      <div>
+        here comes some content. This is a dialog with a custom shadow (white)
+        around the container. The margin is slightly increased to not cut the
+        shadow.
+      </div>
+    </sk-dialog>
+  </div>
+
+  <div>
+    <button (click)="isFullscreenDialogOpen = true">
+      open fullscreen Dialog
+    </button>
+
+    <sk-dialog
+      [(open)]="isFullscreenDialogOpen"
+      (close)="isFullscreenDialogOpen = false"
+      [fullscreen]="true"
+    >
+      <div>here comes some content. This is a fullscreen dialog.</div>
+    </sk-dialog>
+  </div>
+
+  <div>
+    <button (click)="isDialogWithOverflowOpen = true">
+      open overflow Dialog
+    </button>
+
+    <sk-dialog
+      [(open)]="isDialogWithOverflowOpen"
+      (close)="isDialogWithOverflowOpen = false"
+    >
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Eget nunc
+        scelerisque viverra mauris in aliquam sem fringilla. Odio euismod
+        lacinia at quis. A pellentesque sit amet porttitor eget dolor morbi non.
+        Sagittis purus sit amet volutpat consequat mauris. Tristique
+        sollicitudin nibh sit amet commodo nulla facilisi nullam. Erat velit
+        scelerisque in dictum non consectetur a. Risus viverra adipiscing at in
+        tellus integer feugiat. Odio morbi quis commodo odio aenean sed
+        adipiscing diam. Odio tempor orci dapibus ultrices in iaculis nunc sed
+        augue. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus.
+        Metus dictum at tempor commodo. Quis eleifend quam adipiscing vitae. Id
+        aliquet risus feugiat in. Amet cursus sit amet dictum sit amet justo.
+        <br />
+        <br />
+        Erat imperdiet sed euismod nisi porta lorem mollis aliquam. Mauris nunc
+        congue nisi vitae suscipit tellus mauris a diam. Urna et pharetra
+        pharetra massa massa. Nunc congue nisi vitae suscipit tellus mauris a
+        diam maecenas. Viverra maecenas accumsan lacus vel. In metus vulputate
+        eu scelerisque. Vitae congue eu consequat ac. Iaculis at erat
+        pellentesque adipiscing commodo elit. A erat nam at lectus urna duis
+        convallis. Vitae aliquet nec ullamcorper sit amet risus. Mauris augue
+        neque gravida in fermentum et sollicitudin. Facilisi cras fermentum odio
+        eu feugiat pretium nibh ipsum consequat. Sollicitudin nibh sit amet
+        commodo nulla facilisi nullam vehicula ipsum. Sed egestas egestas
+        fringilla phasellus. Nibh tellus molestie nunc non blandit massa
+        enim.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nunc
+        scelerisque viverra mauris in aliquam sem fringilla. Odio euismod
+        lacinia at quis. A pellentesque sit amet porttitor eget dolor morbi non.
+        <br />
+        <br />
+        Sagittis purus sit amet volutpat consequat mauris. Tristique
+        sollicitudin nibh sit amet commodo nulla facilisi nullam. Erat velit
+        scelerisque in dictum non consectetur a. Risus viverra adipiscing at in
+        tellus integer feugiat. Odio morbi quis commodo odio aenean sed
+        adipiscing diam. Odio tempor orci dapibus ultrices in iaculis nunc sed
+        augue. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus.
+        Metus dictum at tempor commodo. Quis eleifend quam adipiscing vitae. Id
+        aliquet risus feugiat in. Amet cursus sit amet dictum sit amet justo.
+        Erat imperdiet sed euismod nisi porta lorem mollis aliquam. Mauris nunc
+        congue nisi vitae suscipit tellus mauris a diam. Urna et pharetra
+        pharetra massa massa. Nunc congue nisi vitae suscipit tellus mauris a
+        diam maecenas. Viverra maecenas accumsan lacus vel. In metus vulputate
+        eu scelerisque. Vitae congue eu consequat ac. Iaculis at erat
+        pellentesque adipiscing commodo elit. A erat nam at lectus urna duis
+        convallis. Vitae aliquet nec ullamcorper sit amet risus. Mauris augue
+        neque gravida in fermentum et sollicitudin. Facilisi cras fermentum odio
+        eu feugiat pretium nibh ipsum consequat. Sollicitudin nibh sit amet
+        commodo nulla facilisi nullam vehicula ipsum. Sed egestas egestas
+        fringilla phasellus. Nibh tellus molestie nunc non blandit massa
+        enim.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nunc
+        scelerisque viverra mauris in aliquam sem fringilla. Odio euismod
+        lacinia at quis. A pellentesque sit amet porttitor eget dolor morbi non.
+        <br />
+        <br />
+        Sagittis purus sit amet volutpat consequat mauris. Tristique
+        sollicitudin nibh sit amet commodo nulla facilisi nullam. Erat velit
+        scelerisque in dictum non consectetur a. Risus viverra adipiscing at in
+        tellus integer feugiat. Odio morbi quis commodo odio aenean sed
+        adipiscing diam. Odio tempor orci dapibus ultrices in iaculis nunc sed
+        augue. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus.
+        Metus dictum at tempor commodo. Quis eleifend quam adipiscing vitae. Id
+        aliquet risus feugiat in. Amet cursus sit amet dictum sit amet justo.
+        Erat imperdiet sed euismod nisi porta lorem mollis aliquam. Mauris nunc
+        congue nisi vitae suscipit tellus mauris a diam. Urna et pharetra
+        pharetra massa massa. Nunc congue nisi vitae suscipit tellus mauris a
+        diam maecenas. Viverra maecenas accumsan lacus vel. In metus vulputate
+        eu scelerisque. Vitae congue eu consequat ac. Iaculis at erat
+        pellentesque adipiscing commodo elit. A erat nam at lectus urna duis
+        convallis. Vitae aliquet nec ullamcorper sit amet risus. Mauris augue
+        neque gravida in fermentum et sollicitudin. Facilisi cras fermentum odio
+        eu feugiat pretium nibh ipsum consequat. Sollicitudin nibh sit amet
+        commodo nulla facilisi nullam vehicula ipsum. Sed egestas egestas
+        fringilla phasellus. Nibh tellus molestie nunc non blandit massa
+        enim.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nunc
+        scelerisque viverra mauris in aliquam sem fringilla. Odio euismod
+        lacinia at quis. A pellentesque sit amet porttitor eget dolor morbi non.
+        <br />
+        <br />
+        Sagittis purus sit amet volutpat consequat mauris. Tristique
+        sollicitudin nibh sit amet commodo nulla facilisi nullam. Erat velit
+        scelerisque in dictum non consectetur a. Risus viverra adipiscing at in
+        tellus integer feugiat. Odio morbi quis commodo odio aenean sed
+        adipiscing diam. Odio tempor orci dapibus ultrices in iaculis nunc sed
+        augue. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus.
+        Metus dictum at tempor commodo. Quis eleifend quam adipiscing vitae. Id
+        aliquet risus feugiat in. Amet cursus sit amet dictum sit amet justo.
+        Erat imperdiet sed euismod nisi porta lorem mollis aliquam. Mauris nunc
+        congue nisi vitae suscipit tellus mauris a diam. Urna et pharetra
+        pharetra massa massa. Nunc congue nisi vitae suscipit tellus mauris a
+        diam maecenas. Viverra maecenas accumsan lacus vel. In metus vulputate
+        eu scelerisque. Vitae congue eu consequat ac. Iaculis at erat
+        pellentesque adipiscing commodo elit. A erat nam at lectus urna duis
+        convallis. Vitae aliquet nec ullamcorper sit amet risus. Mauris augue
+        neque gravida in fermentum et sollicitudin. Facilisi cras fermentum odio
+        eu feugiat pretium nibh ipsum consequat. Sollicitudin nibh sit amet
+        commodo nulla facilisi nullam vehicula ipsum. Sed egestas egestas
+        fringilla phasellus. Nibh tellus molestie nunc non blandit massa enim.
+        In ante metus dictum at tempor. Pretium vulputate sapien nec sagittis
+        aliquam malesuada bibendum arcu. Eget aliquet nibh praesent tristique
+        magna sit amet purus gravida. Massa sapien faucibus et molestie ac
+        feugiat. Pellentesque massa placerat duis ultricies lacus sed turpis
+        tincidunt. Dapibus ultrices in iaculis nunc sed augue lacus viverra.
+        <br />
+        <br />
+        Volutpat sed cras ornare arcu. Diam in arcu cursus euismod quis viverra
+        nibh cras. Risus nec feugiat in fermentum. Amet cursus sit amet dictum
+        sit amet. Dui vivamus arcu felis bibendum ut tristique. Commodo viverra
+        maecenas accumsan lacus. Tortor id aliquet lectus proin nibh nisl
+        condimentum id venenatis. Lacinia quis vel eros donec ac odio tempor
+        orci. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim
+        cras tincidunt. Est lorem ipsum dolor sit amet consectetur adipiscing.
+        Ut eu sem integer vitae justo eget magna. Odio ut enim blandit volutpat.
+        Duis at consectetur lorem donec massa sapien faucibus et. In eu mi
+        bibendum neque egestas. Commodo ullamcorper a lacus vestibulum sed arcu.
+        Sed felis eget velit aliquet. Varius morbi enim nunc faucibus a
+        pellentesque sit amet porttitor. Sit amet massa vitae tortor
+        condimentum. Ornare massa eget egestas purus viverra accumsan in nisl.
+        Lacus sed viverra tellus in. In metus vulputate eu scelerisque.
+        Pellentesque sit amet porttitor eget dolor morbi non. Laoreet
+        suspendisse interdum consectetur libero id faucibus nisl tincidunt eget.
+        Dui vivamus arcu felis bibendum ut tristique et egestas quis. Id neque
+        aliquam vestibulum morbi blandit cursus risus at. Sodales ut eu sem
+        integer vitae justo eget magna. Sit amet consectetur adipiscing elit
+        pellentesque habitant. Nunc non blandit massa enim. Odio ut sem nulla
+        pharetra. Faucibus interdum posuere lorem ipsum. Posuere lorem ipsum
+        dolor sit amet consectetur adipiscing elit. Odio ut sem nulla pharetra
+        diam sit amet. Ut ornare lectus sit amet est placerat in egestas. Lorem
+        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+        incididunt ut labore et dolore magna aliqua. Eget nunc scelerisque
+        viverra mauris in aliquam sem fringilla. Odio euismod lacinia at quis. A
+        pellentesque sit amet porttitor eget dolor morbi non. Sagittis purus sit
+        amet volutpat consequat mauris. Tristique sollicitudin nibh sit amet
+        commodo nulla facilisi nullam. Erat velit scelerisque in dictum non
+        consectetur a. Risus viverra adipiscing at in tellus integer feugiat.
+        <br />
+        <br />
+        Odio morbi quis commodo odio aenean sed adipiscing diam. Odio tempor
+        orci dapibus ultrices in iaculis nunc sed augue. Adipiscing vitae proin
+        sagittis nisl rhoncus mattis rhoncus.Lorem ipsum dolor sit amet,
+        consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+        et dolore magna aliqua. Eget nunc scelerisque viverra mauris in aliquam
+        sem fringilla. Odio euismod lacinia at quis. A pellentesque sit amet
+        porttitor eget dolor morbi non. Sagittis purus sit amet volutpat
+        consequat mauris. Tristique sollicitudin nibh sit amet commodo nulla
+        facilisi nullam. Erat velit scelerisque in dictum non consectetur a.
+        Risus viverra adipiscing at in tellus integer feugiat. Odio morbi quis
+        commodo odio aenean sed adipiscing diam. Odio tempor orci dapibus
+        ultrices in iaculis nunc sed augue. Adipiscing vitae proin sagittis nisl
+        rhoncus mattis rhoncus. Pretium lectus quam id leo in vitae. Neque
+        convallis a cras semper auctor neque vitae. Vitae tortor condimentum
+        lacinia quis vel eros donec. Tincidunt lobortis feugiat vivamus at augue
+        eget arcu dictum varius. Et netus et malesuada fames ac turpis egestas
+        sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nunc
+        scelerisque viverra mauris in aliquam sem fringilla. Odio euismod
+        lacinia at quis. A pellentesque sit amet porttitor eget dolor morbi non.
+        <br />
+        <br />
+        Sagittis purus sit amet volutpat consequat mauris. Tristique
+        sollicitudin nibh sit amet commodo nulla facilisi nullam. Erat velit
+        scelerisque in dictum non consectetur a. Risus viverra adipiscing at in
+        tellus integer feugiat. Odio morbi quis commodo odio aenean sed
+        adipiscing diam. Odio tempor orci dapibus ultrices in iaculis nunc sed
+        augue. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus.
+        Metus dictum at tempor commodo. Quis eleifend quam adipiscing vitae. Id
+        aliquet risus feugiat in. Amet cursus sit amet dictum sit amet justo.
+        Erat imperdiet sed euismod nisi porta lorem mollis aliquam. Mauris nunc
+        congue nisi vitae suscipit tellus mauris a diam. Urna et pharetra
+        pharetra massa massa. Nunc congue nisi vitae suscipit tellus mauris a
+        diam maecenas. Viverra maecenas accumsan lacus vel. In metus vulputate
+        eu scelerisque. Vitae congue eu consequat ac. Iaculis at erat
+        pellentesque adipiscing commodo elit. A erat nam at lectus urna duis
+        convallis. Vitae aliquet nec ullamcorper sit amet risus. Mauris augue
+        neque gravida in fermentum et sollicitudin. Facilisi cras fermentum odio
+        eu feugiat pretium nibh ipsum consequat. Sollicitudin nibh sit amet
+        commodo nulla facilisi nullam vehicula ipsum. Sed egestas egestas
+        fringilla phasellus. Nibh tellus molestie nunc non blandit massa enim.
+      </div>
+    </sk-dialog>
+  </div>
+
+  <div>
+    <button (click)="isDialogWithFancyColorsOpen = true">
+      open Dialog with fancy colors
+    </button>
+
+    <sk-dialog
+      [(open)]="isDialogWithFancyColorsOpen"
+      (close)="isDialogWithFancyColorsOpen = false"
+    >
+      <div>
+        here comes some content. This is a dialog with colored gradients in the
+        Backdrop and Container.
+      </div>
+    </sk-dialog>
+  </div>
+
+  <div>
+    <button (click)="isDialogWithNestedDialogOpen = true">
+      open Dialog with nested Dialog
+    </button>
+
+    <sk-dialog
+      [(open)]="isDialogWithNestedDialogOpen"
+      (close)="isDialogWithNestedDialogOpen = false"
+    >
+      <div>
+        here comes some content. This button will open another dialog. <br />
+
+        <button (click)="isNestedDialogOpen = true">open nested Dialog</button>
+
+        <sk-dialog
+          [(open)]="isNestedDialogOpen"
+          (close)="isNestedDialogOpen = false"
+          [showCloseButton]="true"
+        >
+          <div>
+            This is the content of the nested Dialog! This one has the close
+            button.
+          </div>
+        </sk-dialog>
       </div>
     </sk-dialog>
   </div>
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
index d3a0471..436867c 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
@@ -10,12 +10,17 @@ import { CloseButtonProperties, DialogComponent } from '@qupaya/sketch';
   styleUrl: './dialog-sample.component.css',
 })
 export class DialogSampleComponent {
-  isUnstyledBasicDialogOpen = false;
-  isStyledBasicDialogOpen = false;
-  isDialogWithOuterCloseButtonOpen = false;
-  isDialogWithInnerCloseButtonOpen = false;
-  isDialogWithStyledOuterCloseButtonOpen = false;
-  isDialogWithStyledInnerCloseButtonOpen = false;
+  isBasicDialogOpen = false;
+  isCompletelyStyledDialogOpen = false;
+  isDialogWithOuterButtonOpen = false;
+  isDialogWithInnerButtonOpen = false;
+  isDialogWithStyledButtonOpen = false;
+  isDialogWithShadowOpen = false;
+  isFullscreenDialogOpen = false;
+  isDialogWithOverflowOpen = false;
+  isDialogWithFancyColorsOpen = false;
+  isDialogWithNestedDialogOpen = false;
+  isNestedDialogOpen = false;
 
   closeButtonProperties: CloseButtonProperties = {
     title: 'Close me',
@@ -23,7 +28,7 @@ export class DialogSampleComponent {
     styles: {
       iconWidth: 20,
       iconHeight: 20,
-      backgroundColor: 'coral',
+      background: 'coral',
       borderRadius: 10,
       border: 'none',
       padding: '10px',

From ca929d0b92bf3031349ef4ba7c94acea12a9202c Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Thu, 25 Apr 2024 17:24:31 +0200
Subject: [PATCH 35/50] feat: add option to add border

---
 .../dialog-sample/dialog-sample.component.css |  3 ++-
 .../components/dialog/dialog-documentation.md | 23 +++++++++++++++++++
 .../components/dialog/dialog.component.css    |  2 ++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index e77d994..fa9ba14 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -19,10 +19,11 @@ div:nth-child(2) sk-dialog {
   --sk-dialog-width: 70%;
   --sk-dialog-height: 50%;
   --sk-dialog-margin: 50px;
-  --sk-dialog-container-margin: 30px;
+  --sk-dialog-container-margin: 40px;
   --sk-dialog-container-padding: 40px;
   --sk-dialog-inner-close-button-space: 15px;
   --sk-dialog-border-radius: 20px;
+  --sk-dialog-border: 5px solid cornflowerblue;
   --sk-dialog-background: lightblue;
   --sk-dialog-content-shadow: rgb(0 0 0 / 20%) 0 10px 20px;
   --sk-dialog-overflow: scroll;
diff --git a/libs/sketch/src/lib/components/dialog/dialog-documentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
index 31d103a..532bcb3 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-documentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -105,6 +105,7 @@ You have some other options for the styling and positioning of your content. (Se
 - The edges are not rounded by default. If you want to have a border-radius, change the `--sk-dialog-border-radius` custom property.
 - By default, the overflow of the container is `auto`, if you'd like to change this behavior, adjust the `--sk-dialog-overflow` custom property.
 - If you want to have a shadow around the container, set `[contentShadow]` to true and adjust `--sk-dialog-content-shadow` if you'd like to change the default shadow. Just keep in mind that should not be larger than the shadow should not be larger than the `--sk-dialog-container-margin` since it would be cut.
+- You can also add a border if you'd like to by adjusting `--sk-dialog-border`. Keep in mind that you might adjust the `--sk-dialog-container-margin` because the size of the border is added.
 
 #### Container Spacing
 
@@ -529,6 +530,28 @@ Defines the `box-shadow` of the Container.
 <tr>
 <td>
 
+`--sk-dialog-border`
+
+</td>
+<td>
+
+Defines the `border` of the Container.
+
+</td>
+<td>
+
+`0`
+
+</td>
+<td>
+
+[Content - Container Style](#container-style)
+
+</td>
+</tr>
+<tr>
+<td>
+
 `--sk-dialog-overflow`
 
 </td>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index 7eba04b..0c442f3 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -8,6 +8,7 @@
   --sk-dialog-background: transparent;
   --sk-dialog-border-radius: 0;
   --sk-dialog-content-shadow: rgb(0 0 0 / 20%) 0 10px 20px;
+  --sk-dialog-border: 0;
   --sk-dialog-overflow: auto;
   --sk-dialog-backdrop: rgb(0 0 0 / 50%);
   --sk-dialog-backdrop-blur: 0;
@@ -74,6 +75,7 @@ dialog::backdrop {
   );
   border-radius: var(--sk-dialog-border-radius);
   background: var(--sk-dialog-background);
+  border: var(--sk-dialog-border);
 }
 
 .sk-dialog-content-shadow {

From e159ccdbbe2d1748e9e4f4576605ae63474bf9af Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Mon, 29 Apr 2024 10:40:38 +0200
Subject: [PATCH 36/50] feat: add option to move outer close button
 independently of margin

---
 .../dialog-sample/dialog-sample.component.css |  1 +
 .../components/dialog/dialog-documentation.md | 28 ++++++++++++++++++-
 .../components/dialog/dialog.component.css    |  5 ++--
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index fa9ba14..3cf1a72 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -21,6 +21,7 @@ div:nth-child(2) sk-dialog {
   --sk-dialog-margin: 50px;
   --sk-dialog-container-margin: 40px;
   --sk-dialog-container-padding: 40px;
+  --sk-dialog-outer-close-button-space: 20px;
   --sk-dialog-inner-close-button-space: 15px;
   --sk-dialog-border-radius: 20px;
   --sk-dialog-border: 5px solid cornflowerblue;
diff --git a/libs/sketch/src/lib/components/dialog/dialog-documentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
index 532bcb3..55c5ac8 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-documentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -111,7 +111,7 @@ You have some other options for the styling and positioning of your content. (Se
 
 - To have a proper spacing to the sides, overwrite `--sk-dialog-margin` and set the margin as wanted. By default, this is `0`.
 - To archive a good spacing from your content to the container edges, adjust `--sk-dialog-container-padding`, otherwise it will stick to the sides.
-- When the [Close Button](#close-button) is outside the content, you can define the margin of the Container to the Close Button. In this way, you can move it further away if wanted. Just overwrite the `--sk-dialog-container-margin`. It has a default of `20px`. If `innerCloseButton` is `true`, this is getting ignored. It is recommended to have at least the same inner content margin as the size of the close button icon.
+- When the [Close Button](#close-button) is outside the content, you can define the margin of the Container to the Close Button. In this way, you can move it further away if wanted. Just overwrite the `--sk-dialog-container-margin`. It has a default of `20px`. If `innerCloseButton` is `true`, this is getting ignored. It is recommended to have at least the same inner content margin as the size of the close button icon. If you want to place the icon independently form the margin, change `--sk-dialog-outer-close-button-space`. This will move it proportionally closer to the Container (if it has a positive value).
 - When the [Close Button](#close-button) is inside the content, use `--sk-dialog-inner-close-button-space` to define the spacing from your content wrapper. It will move the button proportionally. `innerCloseButton` must be `true`, otherwise it is getting ignored.
 
 > In terms of styling, the Close Button is part of the Container. So changing the custom property `--sk-dialog-margin` will not affect the position of the Close Button.
@@ -130,6 +130,8 @@ The default value for the shadow is `rgb(0 0 0 / 20%) 0 10px 20px`. If you'd lik
 
 > Keep in mind that your shadow should not be larger than the `--sk-dialog-container-margin` to avoid cutting the shadow.
 
+> If your margin moves the close button too far away from the container, use `--sk-dialog-outer-close-button-space` to move it proportionally closer to the container.
+
 ### Scrolling
 
 If you have more content than the height of the content box, it will automatically be able to scroll to the bottom of the content.
@@ -649,6 +651,30 @@ Should have at least `30px` more than `--sk-dialog-inner-close-button-space` (wi
 <tr>
 <td>
 
+`--sk-dialog-outer-close-button-space`
+
+</td>
+<td>
+
+Defines the spacing of the outer Close Button to the Container in case you want to be independent from the margin.
+
+Only works with `[innerCloseButton]="false"`
+
+</td>
+<td>
+
+`0`
+
+</td>
+<td>
+
+[Content - Container Spacing](#container-spacing)
+
+</td>
+</tr>
+<tr>
+<td>
+
 `--sk-dialog-inner-close-button-space`
 
 </td>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index 0c442f3..da90a16 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -4,6 +4,7 @@
   --sk-dialog-margin: 0;
   --sk-dialog-container-padding: 40px;
   --sk-dialog-container-margin: 20px;
+  --sk-dialog-outer-close-button-space: 0;
   --sk-dialog-inner-close-button-space: 10px;
   --sk-dialog-background: transparent;
   --sk-dialog-border-radius: 0;
@@ -39,8 +40,8 @@ dialog::backdrop {
 .sk-dialog-close-button {
   position: absolute;
   cursor: pointer;
-  top: 0;
-  right: 0;
+  top: var(--sk-dialog-outer-close-button-space);
+  right: var(--sk-dialog-outer-close-button-space);
 }
 
 .sk-dialog-inner-close-button {

From 16196546947efbbc09cf8af22c10eb92c09cdaed Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Mon, 29 Apr 2024 10:51:12 +0200
Subject: [PATCH 37/50] fix: add margin if no close button but content shadow

---
 .../src/app/pages/dialog-sample/dialog-sample.component.ts     | 1 +
 libs/sketch/src/lib/components/dialog/dialog.component.html    | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
index 436867c..d0426b0 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
@@ -29,6 +29,7 @@ export class DialogSampleComponent {
       iconWidth: 20,
       iconHeight: 20,
       background: 'coral',
+      buttonHeight: 40,
       borderRadius: 10,
       border: 'none',
       padding: '10px',
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 32ecaa6..7c58996 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -34,7 +34,8 @@
     <div
       [ngClass]="{
         'sk-dialog-no-margin':
-          !showCloseButton() || (showCloseButton() && innerCloseButton()),
+          (!showCloseButton() && !contentShadow()) ||
+          (showCloseButton() && innerCloseButton()),
         'sk-dialog-content-shadow': contentShadow()
       }"
       class="sk-dialog-content-container"

From 1c3d46cb5a40d70cdf35fdc7d63e79755c44f751 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Mon, 29 Apr 2024 12:47:49 +0200
Subject: [PATCH 38/50] fix: add and adjust max-height for content container

---
 .../dialog-sample/dialog-sample.component.css  |  2 +-
 .../dialog-sample/dialog-sample.component.html | 18 ++++++++++++++++++
 .../dialog-sample/dialog-sample.component.ts   |  1 +
 .../lib/components/dialog/dialog.component.css | 10 ++++++----
 .../components/dialog/dialog.component.html    |  4 ++--
 5 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index 3cf1a72..20061ee 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -45,7 +45,7 @@ div:nth-child(6) sk-dialog {
 
 /* Dialog with overflow */
 div:nth-child(8) sk-dialog {
-  _--sk-dialog-height: 60%;
+  --sk-dialog-height: 50%;
 }
 
 /* Dialog with fancy colors */
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index 4e7a6ec..28c9c8f 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -123,6 +123,7 @@
     <sk-dialog
       [(open)]="isDialogWithOverflowOpen"
       (close)="isDialogWithOverflowOpen = false"
+      [showCloseButton]="true"
     >
       <div>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -352,4 +353,21 @@
       </div>
     </sk-dialog>
   </div>
+
+  <div>
+    <button (click)="isDefaultContentShadowOpen = true">
+      open Dialog with default shadow
+    </button>
+
+    <sk-dialog
+      [(open)]="isDefaultContentShadowOpen"
+      (close)="isDefaultContentShadowOpen = false"
+      [contentShadow]="true"
+    >
+      <div>
+        here comes some content. This is a dialog with colored gradients in the
+        Backdrop and Container.
+      </div>
+    </sk-dialog>
+  </div>
 </div>
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
index d0426b0..765f3e9 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
@@ -21,6 +21,7 @@ export class DialogSampleComponent {
   isDialogWithFancyColorsOpen = false;
   isDialogWithNestedDialogOpen = false;
   isNestedDialogOpen = false;
+  isDefaultContentShadowOpen = false;
 
   closeButtonProperties: CloseButtonProperties = {
     title: 'Close me',
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index da90a16..f9b39b2 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -3,7 +3,7 @@
   --sk-dialog-height: fit-content;
   --sk-dialog-margin: 0;
   --sk-dialog-container-padding: 40px;
-  --sk-dialog-container-margin: 20px;
+  --sk-dialog-container-margin: 30px;
   --sk-dialog-outer-close-button-space: 0;
   --sk-dialog-inner-close-button-space: 10px;
   --sk-dialog-background: transparent;
@@ -72,18 +72,20 @@ dialog::backdrop {
   overflow-y: var(--sk-dialog-overflow);
   max-height: calc(
     100svh - (var(--sk-dialog-margin) * 2) -
-      (var(--sk-dialog-container-margin) * 2)
+      (var(--sk-dialog-container-margin) * 2) -
+      (var(--sk-dialog-container-padding) * 2)
   );
   border-radius: var(--sk-dialog-border-radius);
   background: var(--sk-dialog-background);
   border: var(--sk-dialog-border);
 }
 
-.sk-dialog-content-shadow {
+.sk-dialog-content-container-shadow {
   box-shadow: var(--sk-dialog-content-shadow);
 }
 
-.sk-dialog-no-margin {
+.sk-dialog-content-container-no-margin {
   margin: 0;
   height: calc(100% - (var(--sk-dialog-container-padding) * 2));
+  max-height: calc(100svh - (var(--sk-dialog-container-padding) * 5));
 }
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 7c58996..4f29a8d 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -33,10 +33,10 @@
     }
     <div
       [ngClass]="{
-        'sk-dialog-no-margin':
+        'sk-dialog-content-container-no-margin':
           (!showCloseButton() && !contentShadow()) ||
           (showCloseButton() && innerCloseButton()),
-        'sk-dialog-content-shadow': contentShadow()
+        'sk-dialog-content-container-shadow': contentShadow()
       }"
       class="sk-dialog-content-container"
     >

From d19b099a0556c66f05a12db32eaaaa262214df5f Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Mon, 29 Apr 2024 14:48:06 +0200
Subject: [PATCH 39/50] feat: add option to position close button on left side

---
 .../dialog-sample/dialog-sample.component.css | 10 +--
 .../dialog-sample.component.html              | 75 ++++++++++++++-----
 .../dialog-sample/dialog-sample.component.ts  | 10 ++-
 .../components/dialog/dialog-documentation.md | 30 +++++++-
 .../components/dialog/dialog.component.css    | 10 +++
 .../components/dialog/dialog.component.html   |  7 +-
 .../lib/components/dialog/dialog.component.ts |  9 +++
 7 files changed, 122 insertions(+), 29 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index 20061ee..1bd9748 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -33,23 +33,23 @@ div:nth-child(2) sk-dialog {
 }
 
 /* Dialog with styled close button */
-div:nth-child(5) sk-dialog {
+div:nth-child(7) sk-dialog {
   --sk-dialog-container-margin: 40px;
 }
 
-/* Dialog with shadow */
-div:nth-child(6) sk-dialog {
+/* Dialog with custom shadow */
+div:nth-child(9) sk-dialog {
   --sk-dialog-content-shadow: rgb(255 255 255 / 40%) 0 10px 20px;
   --sk-dialog-container-margin: 30px;
 }
 
 /* Dialog with overflow */
-div:nth-child(8) sk-dialog {
+div:nth-child(11) sk-dialog {
   --sk-dialog-height: 50%;
 }
 
 /* Dialog with fancy colors */
-div:nth-child(9) sk-dialog {
+div:nth-child(12) sk-dialog {
   --sk-dialog-background: radial-gradient(
     circle,
     rgb(238 174 202 / 100%) 0%,
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index 28c9c8f..a1aa6c2 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -31,7 +31,7 @@
 
   <div>
     <button (click)="isDialogWithOuterButtonOpen = true">
-      open Dialog with outer button
+      open Dialog with outer button right (default)
     </button>
 
     <sk-dialog
@@ -48,7 +48,7 @@
 
   <div>
     <button (click)="isDialogWithInnerButtonOpen = true">
-      open Dialog with inner button
+      open Dialog with inner button right (default)
     </button>
 
     <sk-dialog
@@ -64,6 +64,43 @@
     </sk-dialog>
   </div>
 
+  <div>
+    <button (click)="isDialogWithOuterButtonLeftOpen = true">
+      open Dialog with outer button left
+    </button>
+
+    <sk-dialog
+      [(open)]="isDialogWithOuterButtonLeftOpen"
+      (close)="isDialogWithOuterButtonLeftOpen = false"
+      [showCloseButton]="true"
+      [closeButtonPosition]="CloseButtonPosition.Left"
+    >
+      <div>
+        here comes some content. This is a dialog with the Close Button outside
+        of the container (default) and a default container margin.
+      </div>
+    </sk-dialog>
+  </div>
+
+  <div>
+    <button (click)="isDialogWithInnerButtonLeftOpen = true">
+      open Dialog with inner button left
+    </button>
+
+    <sk-dialog
+      [(open)]="isDialogWithInnerButtonLeftOpen"
+      (close)="isDialogWithInnerButtonLeftOpen = false"
+      [showCloseButton]="true"
+      [innerCloseButton]="true"
+      [closeButtonPosition]="CloseButtonPosition.Left"
+    >
+      <div>
+        here comes some content. This is a dialog with the Close Button inside
+        of the container.
+      </div>
+    </sk-dialog>
+  </div>
+
   <div>
     <button (click)="isDialogWithStyledButtonOpen = true">
       open Dialog with styled outside close button
@@ -83,6 +120,23 @@
     </sk-dialog>
   </div>
 
+  <div>
+    <button (click)="isDefaultContentShadowOpen = true">
+      open Dialog with default shadow
+    </button>
+
+    <sk-dialog
+      [(open)]="isDefaultContentShadowOpen"
+      (close)="isDefaultContentShadowOpen = false"
+      [contentShadow]="true"
+    >
+      <div>
+        here comes some content. This is a dialog with colored gradients in the
+        Backdrop and Container.
+      </div>
+    </sk-dialog>
+  </div>
+
   <div>
     <button (click)="isDialogWithShadowOpen = true">
       open Dialog with custom shadow
@@ -353,21 +407,4 @@
       </div>
     </sk-dialog>
   </div>
-
-  <div>
-    <button (click)="isDefaultContentShadowOpen = true">
-      open Dialog with default shadow
-    </button>
-
-    <sk-dialog
-      [(open)]="isDefaultContentShadowOpen"
-      (close)="isDefaultContentShadowOpen = false"
-      [contentShadow]="true"
-    >
-      <div>
-        here comes some content. This is a dialog with colored gradients in the
-        Backdrop and Container.
-      </div>
-    </sk-dialog>
-  </div>
 </div>
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
index 765f3e9..e49f2d4 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
@@ -1,6 +1,10 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { CloseButtonProperties, DialogComponent } from '@qupaya/sketch';
+import {
+  CloseButtonPosition,
+  CloseButtonProperties,
+  DialogComponent,
+} from '@qupaya/sketch';
 
 @Component({
   selector: 'app-dialog-sample',
@@ -14,6 +18,8 @@ export class DialogSampleComponent {
   isCompletelyStyledDialogOpen = false;
   isDialogWithOuterButtonOpen = false;
   isDialogWithInnerButtonOpen = false;
+  isDialogWithOuterButtonLeftOpen = false;
+  isDialogWithInnerButtonLeftOpen = false;
   isDialogWithStyledButtonOpen = false;
   isDialogWithShadowOpen = false;
   isFullscreenDialogOpen = false;
@@ -23,6 +29,8 @@ export class DialogSampleComponent {
   isNestedDialogOpen = false;
   isDefaultContentShadowOpen = false;
 
+  readonly CloseButtonPosition = CloseButtonPosition;
+
   closeButtonProperties: CloseButtonProperties = {
     title: 'Close me',
     iconSrc: '../../../assets/cross.svg',
diff --git a/libs/sketch/src/lib/components/dialog/dialog-documentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
index 55c5ac8..96de770 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-documentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -53,12 +53,13 @@ By default, it is placed outside. To place it within the content set `[innerClos
 It is a transparent button positioned in the top right corner with a black cross in it.
 You can also adjust the styling of the button and the svg icon for your needs.
 
-To customize the styling, create a variable of type `CloseButtonProperties` and assign the variable to this optional input in the template: `[closeButtonProperties]`.
-
+To customize the styling, create a variable of type `CloseButtonProperties` and assign the variable to this optional input in the template: `[closeButtonProperties]`. <br>
 You can adjust the title, the icon source and the styles (like background, border, width, height, etc.). See [Close Button Properties](#closebuttonproperties) for more information.
 
 > If you change one property, the rest will keep their default values. So you can adjust the values as you want.
 
+By default, the Close Button is positioned on the right side. If you want to have it on the left side (inner/outer) add this: `[closeButtonPosition]="CloseButtonPosition.Left"`.
+
 ### Backdrop
 
 The Backdrop is the area around the content that covers the whole screen. When you click on it, it will close the Dialog.
@@ -248,9 +249,32 @@ You can add as many nested Dialogs as you want, but it is recommended to nest on
 Makes the title, icon source and icon/button styles adjustable.
 
 </td>
+<td>/</td>
+</tr>
+<tr>
 <td>
 
-`false`
+`[closeButtonPosition]`
+
+</td>
+<td>
+
+`CloseButtonPosition` <br>
+
+```ts
+(Left = 'left'), (Right = 'right');
+```
+
+</td>
+<td> no/optional </td>
+<td>
+
+Defines if the Close Button (inner/outer) is positioned left or right.
+
+</td>
+<td>
+
+`CloseButtonPosition.Right`
 
 </td>
 </tr>
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index f9b39b2..60399a7 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -44,11 +44,21 @@ dialog::backdrop {
   right: var(--sk-dialog-outer-close-button-space);
 }
 
+.sk-dialog-close-button-left {
+  left: var(--sk-dialog-outer-close-button-space);
+  right: auto;
+}
+
 .sk-dialog-inner-close-button {
   top: var(--sk-dialog-inner-close-button-space);
   right: var(--sk-dialog-inner-close-button-space);
 }
 
+.sk-dialog-inner-close-button-left {
+  left: var(--sk-dialog-inner-close-button-space);
+  right: auto;
+}
+
 .sk-dialog-fullscreen-dialog {
   height: 100%;
 }
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 4f29a8d..69bf799 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -9,7 +9,12 @@
     @if (showCloseButton()) {
     <button
       class="sk-dialog-close-button"
-      [ngClass]="{ 'sk-dialog-inner-close-button': innerCloseButton() }"
+      [ngClass]="{
+        'sk-dialog-inner-close-button': innerCloseButton(),
+        'sk-dialog-close-button-left':
+          closeButtonPosition() === CloseButtonPosition.Left,
+          'sk-dialog-inner-close-button-left': innerCloseButton() && closeButtonPosition() === CloseButtonPosition.Left,
+      }"
       type="button"
       [title]="defaultCloseButtonProperties().title"
       (click)="close.emit()"
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index f889a10..c66346b 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -31,6 +31,11 @@ export interface CloseButtonProperties {
   styles?: CloseButtonStyles;
 }
 
+export enum CloseButtonPosition {
+  Left = 'left',
+  Right = 'right',
+}
+
 const initialButtonProperties: CloseButtonProperties = {
   title: 'Close',
   iconSrc: '../../../assets/cross.svg',
@@ -61,10 +66,14 @@ export class DialogComponent {
 
   closeButtonProperties = input<CloseButtonProperties>();
 
+  closeButtonPosition = input<CloseButtonPosition>(CloseButtonPosition.Right);
+
   fullscreen = input<boolean>(false);
 
   contentShadow = input<boolean>(false);
 
+  readonly CloseButtonPosition = CloseButtonPosition;
+
   close = output<void>();
 
   private readonly dialogElement =

From 9aa16981f1070442d761b585200c07f8ec6878d7 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Mon, 29 Apr 2024 16:30:04 +0200
Subject: [PATCH 40/50] refactor: remove closeButtonProperties and add option
 to add own close button component

---
 .../dialog-sample/dialog-sample.component.css |  36 +++--
 .../dialog-sample.component.html              |  62 ++++++---
 .../dialog-sample/dialog-sample.component.ts  |  21 +--
 .../components/dialog/dialog-documentation.md | 131 ++----------------
 .../components/dialog/dialog.component.html   |  29 ++--
 .../lib/components/dialog/dialog.component.ts |  49 -------
 6 files changed, 93 insertions(+), 235 deletions(-)

diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
index 1bd9748..a30b594 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css
@@ -8,6 +8,29 @@ button {
   gap: 20px;
 }
 
+.normal-close-button {
+  border: none;
+  padding: 10px;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+}
+
+.custom-close-button-style {
+  border-radius: 100px;
+  background-color: aquamarine;
+  border: none;
+  padding: 10px;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* default styles to see results better */
 div:nth-child(n + 3) sk-dialog {
   --sk-dialog-margin: 50px;
@@ -21,7 +44,7 @@ div:nth-child(2) sk-dialog {
   --sk-dialog-margin: 50px;
   --sk-dialog-container-margin: 40px;
   --sk-dialog-container-padding: 40px;
-  --sk-dialog-outer-close-button-space: 20px;
+  --sk-dialog-outer-close-button-space: 10px;
   --sk-dialog-inner-close-button-space: 15px;
   --sk-dialog-border-radius: 20px;
   --sk-dialog-border: 5px solid cornflowerblue;
@@ -32,24 +55,19 @@ div:nth-child(2) sk-dialog {
   --sk-dialog-backdrop-blur: 2px;
 }
 
-/* Dialog with styled close button */
-div:nth-child(7) sk-dialog {
-  --sk-dialog-container-margin: 40px;
-}
-
 /* Dialog with custom shadow */
-div:nth-child(9) sk-dialog {
+div:nth-child(8) sk-dialog {
   --sk-dialog-content-shadow: rgb(255 255 255 / 40%) 0 10px 20px;
   --sk-dialog-container-margin: 30px;
 }
 
 /* Dialog with overflow */
-div:nth-child(11) sk-dialog {
+div:nth-child(10) sk-dialog {
   --sk-dialog-height: 50%;
 }
 
 /* Dialog with fancy colors */
-div:nth-child(12) sk-dialog {
+div:nth-child(11) sk-dialog {
   --sk-dialog-background: radial-gradient(
     circle,
     rgb(238 174 202 / 100%) 0%,
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
index a1aa6c2..3341e1f 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.html
@@ -21,6 +21,13 @@
       [showCloseButton]="true"
       [contentShadow]="true"
     >
+      <button
+        class="custom-close-button-style"
+        closeButton
+        (click)="isCompletelyStyledDialogOpen = false"
+      >
+        x
+      </button>
       <div>
         here comes some content. This is a dialog with height/width,
         border-radius, background, shadow, margin, padding and a custom backdrop
@@ -39,6 +46,13 @@
       (close)="isDialogWithOuterButtonOpen = false"
       [showCloseButton]="true"
     >
+      <button
+        class="normal-close-button"
+        closeButton
+        (click)="isDialogWithOuterButtonOpen = false"
+      >
+        x
+      </button>
       <div>
         here comes some content. This is a dialog with the Close Button outside
         of the container (default) and a default container margin.
@@ -57,6 +71,13 @@
       [showCloseButton]="true"
       [innerCloseButton]="true"
     >
+      <button
+        class="normal-close-button"
+        closeButton
+        (click)="isDialogWithInnerButtonOpen = false"
+      >
+        x
+      </button>
       <div>
         here comes some content. This is a dialog with the Close Button inside
         of the container.
@@ -75,6 +96,13 @@
       [showCloseButton]="true"
       [closeButtonPosition]="CloseButtonPosition.Left"
     >
+      <button
+        class="normal-close-button"
+        closeButton
+        (click)="isDialogWithOuterButtonLeftOpen = false"
+      >
+        x
+      </button>
       <div>
         here comes some content. This is a dialog with the Close Button outside
         of the container (default) and a default container margin.
@@ -94,6 +122,13 @@
       [innerCloseButton]="true"
       [closeButtonPosition]="CloseButtonPosition.Left"
     >
+      <button
+        class="normal-close-button"
+        closeButton
+        (click)="isDialogWithInnerButtonLeftOpen = false"
+      >
+        x
+      </button>
       <div>
         here comes some content. This is a dialog with the Close Button inside
         of the container.
@@ -101,25 +136,6 @@
     </sk-dialog>
   </div>
 
-  <div>
-    <button (click)="isDialogWithStyledButtonOpen = true">
-      open Dialog with styled outside close button
-    </button>
-
-    <sk-dialog
-      [(open)]="isDialogWithStyledButtonOpen"
-      (close)="isDialogWithStyledButtonOpen = false"
-      [showCloseButton]="true"
-      [closeButtonProperties]="closeButtonProperties"
-    >
-      <div>
-        here comes some content. This is a dialog with a styled Close Button. If
-        padding is added, increase margin to avoid overlapping with the
-        Container.
-      </div>
-    </sk-dialog>
-  </div>
-
   <div>
     <button (click)="isDefaultContentShadowOpen = true">
       open Dialog with default shadow
@@ -177,7 +193,6 @@
     <sk-dialog
       [(open)]="isDialogWithOverflowOpen"
       (close)="isDialogWithOverflowOpen = false"
-      [showCloseButton]="true"
     >
       <div>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -399,6 +414,13 @@
           (close)="isNestedDialogOpen = false"
           [showCloseButton]="true"
         >
+          <button
+            class="normal-close-button"
+            closeButton
+            (click)="isNestedDialogOpen = false"
+          >
+            x
+          </button>
           <div>
             This is the content of the nested Dialog! This one has the close
             button.
diff --git a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
index e49f2d4..8b51fc6 100644
--- a/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
+++ b/apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.ts
@@ -1,10 +1,6 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import {
-  CloseButtonPosition,
-  CloseButtonProperties,
-  DialogComponent,
-} from '@qupaya/sketch';
+import { CloseButtonPosition, DialogComponent } from '@qupaya/sketch';
 
 @Component({
   selector: 'app-dialog-sample',
@@ -30,19 +26,4 @@ export class DialogSampleComponent {
   isDefaultContentShadowOpen = false;
 
   readonly CloseButtonPosition = CloseButtonPosition;
-
-  closeButtonProperties: CloseButtonProperties = {
-    title: 'Close me',
-    iconSrc: '../../../assets/cross.svg',
-    styles: {
-      iconWidth: 20,
-      iconHeight: 20,
-      background: 'coral',
-      buttonHeight: 40,
-      borderRadius: 10,
-      border: 'none',
-      padding: '10px',
-      margin: '0',
-    },
-  };
 }
diff --git a/libs/sketch/src/lib/components/dialog/dialog-documentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
index 96de770..cd7e90a 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-documentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -48,17 +48,24 @@ The close button is not shown by default. To show it, set `[showCloseButton]` to
 If you want to show it, you can decide if the button is placed inside or outside your Container.
 By default, it is placed outside. To place it within the content set `[innerCloseButton]` to `true`.
 
-> You can define the space of the actual content to the Close Button (inside) and the space of the Container to the Close Button (outside). Look at the [Content Section - Spacing](#content) to see how.
+It is positioned on the right side by default. If you want to have it on the left side (inner/outer) add this: `[closeButtonPosition]="CloseButtonPosition.Left"`.
+
+To add your own button, place the HTML button tag or your component within the `sk-dialog` and add `closeButton` to it to get recognized as such. Also set the variable for the open state to false on click.
 
-It is a transparent button positioned in the top right corner with a black cross in it.
-You can also adjust the styling of the button and the svg icon for your needs.
+Here is an example:
 
-To customize the styling, create a variable of type `CloseButtonProperties` and assign the variable to this optional input in the template: `[closeButtonProperties]`. <br>
-You can adjust the title, the icon source and the styles (like background, border, width, height, etc.). See [Close Button Properties](#closebuttonproperties) for more information.
+```html
+<button (click)="isDialogOpen = true">open Dialog!</button>
 
-> If you change one property, the rest will keep their default values. So you can adjust the values as you want.
+<sk-dialog [(open)]="isDialogOpen" (close)="isDialogOpen = false">
+  <button closeButton (click)="isDialogOpen = false">x</button>
+  <p>here comes some content</p>
+</sk-dialog>
+```
+
+> You can define the space of the actual content to the Close Button (inside) and the space of the Container to the Close Button (outside). Look at the [Content Section - Spacing](#content) to see how.
 
-By default, the Close Button is positioned on the right side. If you want to have it on the left side (inner/outer) add this: `[closeButtonPosition]="CloseButtonPosition.Left"`.
+[comment]: <> (TODO: ADJUST WHEN NG-CONTENT HAS DEFAULT OPTION! The placeholder transparent button positioned in the top right corner with a black cross in it.)
 
 ### Backdrop
 
@@ -234,26 +241,6 @@ You can add as many nested Dialogs as you want, but it is recommended to nest on
 <tr>
 <td>
 
-`[closeButtonProperties]`
-
-</td>
-<td>
-
-[`CloseButtonProperties`](#closebuttonproperties) <br>
-(See below)
-
-</td>
-<td> no/optional </td>
-<td>
-
-Makes the title, icon source and icon/button styles adjustable.
-
-</td>
-<td>/</td>
-</tr>
-<tr>
-<td>
-
 `[closeButtonPosition]`
 
 </td>
@@ -341,96 +328,6 @@ Adds a Shadow to the Dialog.
 </tr>
 </table>
 
-### CloseButtonProperties
-
-<table>
-<tr>
-<td> Key </td> <td> Type </td> <td> Required </td> <td> Description </td> <td> Default Value </td>
-</tr>
-<tr>
-<td>
-
-`title`
-
-</td>
-<td>
-
-`string`
-
-</td>
-<td> no/optional </td>
-<td> The title for the Button and the description for the alt tag of the image </td>
-<td>
-
-`Close`
-
-</td>
-</tr>
-<tr>
-<td>
-
-`iconSrc`
-
-</td>
-<td>
-
-`string`
-
-</td>
-<td> no/optional </td>
-<td> If you want to change the icon, add the path to the new icon here </td>
-<td>
-
-the black cross: `'../../../assets/cross.svg'`
-
-</td>
-</tr>
-<tr>
-<td>
-
-`styles`
-
-</td>
-<td>
-
-`CloseButtonStyles`
-
-These are all options:
-
-```ts
-{
-  buttonWidth?: number | string;
-  buttonHeight?: number | string;
-  borderRadius?: number;
-  background?: string;
-  border?: string;
-  iconWidth?: number | string;
-  iconHeight?: number | string;
-  padding?: string;
-  margin?: string;
-}
-```
-
-</td>
-<td> no/optional </td>
-<td> You can change different styles for the button and the icon here </td>
-<td>
-
-```ts
-{
-  iconWidth: 20,
-  iconHeight: 20,
-  background: 'transparent',
-  border: 'none',
-  padding: '0',
-  margin: '0',
-}
-```
-
-</td>
-</tr>
-</table>
-
 ### Styling with custom properties
 
 None of these are required. All of them need to be changed in `sk-dialog {...}` in your css file.
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 69bf799..419e57a 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -7,7 +7,7 @@
 >
   <div class="sk-dialog-wrapper">
     @if (showCloseButton()) {
-    <button
+    <div
       class="sk-dialog-close-button"
       [ngClass]="{
         'sk-dialog-inner-close-button': innerCloseButton(),
@@ -15,26 +15,15 @@
           closeButtonPosition() === CloseButtonPosition.Left,
           'sk-dialog-inner-close-button-left': innerCloseButton() && closeButtonPosition() === CloseButtonPosition.Left,
       }"
-      type="button"
-      [title]="defaultCloseButtonProperties().title"
-      (click)="close.emit()"
-      [style.width.px]="defaultCloseButtonProperties().styles?.buttonWidth"
-      [style.height.px]="defaultCloseButtonProperties().styles?.buttonHeight"
-      [style.borderRadius.px]="
-        defaultCloseButtonProperties().styles?.borderRadius
-      "
-      [style.background]="defaultCloseButtonProperties().styles?.background"
-      [style.border]="defaultCloseButtonProperties().styles?.border"
-      [style.padding]="defaultCloseButtonProperties().styles?.padding"
-      [style.margin]="defaultCloseButtonProperties().styles?.margin"
     >
-      <img
-        [src]="defaultCloseButtonProperties().iconSrc"
-        [alt]="defaultCloseButtonProperties().title"
-        [style.width.px]="defaultCloseButtonProperties().styles?.iconWidth"
-        [style.height.px]="defaultCloseButtonProperties().styles?.iconHeight"
-      />
-    </button>
+      <!--
+      TODO: add default button when ng-content allows default value!
+      <button title="Close">
+        <img src="../../../assets/cross.svg" alt="Close Button Icon" />
+      </button>
+      -->
+      <ng-content select="[closeButton]"></ng-content>
+    </div>
     }
     <div
       [ngClass]="{
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index c66346b..23fa0ba 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -8,47 +8,15 @@ import {
   ViewEncapsulation,
   untracked,
   ElementRef,
-  signal,
 } from '@angular/core';
 import { ClickBackdropDirective } from './directive/click-backdrop.directive';
 import { NgClass } from '@angular/common';
 
-interface CloseButtonStyles {
-  buttonWidth?: number | string;
-  buttonHeight?: number | string;
-  borderRadius?: number;
-  background?: string;
-  border?: string;
-  iconWidth?: number | string;
-  iconHeight?: number | string;
-  padding?: string;
-  margin?: string;
-}
-
-export interface CloseButtonProperties {
-  title?: string;
-  iconSrc?: string;
-  styles?: CloseButtonStyles;
-}
-
 export enum CloseButtonPosition {
   Left = 'left',
   Right = 'right',
 }
 
-const initialButtonProperties: CloseButtonProperties = {
-  title: 'Close',
-  iconSrc: '../../../assets/cross.svg',
-  styles: {
-    iconWidth: 20,
-    iconHeight: 20,
-    background: 'transparent',
-    border: 'none',
-    padding: '0',
-    margin: '0',
-  },
-};
-
 @Component({
   selector: 'sk-dialog',
   standalone: true,
@@ -64,8 +32,6 @@ export class DialogComponent {
 
   innerCloseButton = input<boolean>(false);
 
-  closeButtonProperties = input<CloseButtonProperties>();
-
   closeButtonPosition = input<CloseButtonPosition>(CloseButtonPosition.Right);
 
   fullscreen = input<boolean>(false);
@@ -79,21 +45,6 @@ export class DialogComponent {
   private readonly dialogElement =
     viewChild.required<ElementRef<HTMLDialogElement>>('dialogElement');
 
-  readonly defaultCloseButtonProperties = signal<CloseButtonProperties>(
-    initialButtonProperties
-  );
-
-  protected buttonPropsChanged = effect(
-    () => {
-      const newButtonProperties = this.closeButtonProperties();
-      this.defaultCloseButtonProperties.update((defaultProps) => ({
-        ...defaultProps,
-        ...newButtonProperties,
-      }));
-    },
-    { allowSignalWrites: true }
-  );
-
   protected readonly openEvents = effect(
     () => {
       const dialog = untracked(this.dialogElement);

From 9b24e68c28d8357b9999ae8ec933a0daccbe8ec0 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Tue, 30 Apr 2024 10:21:03 +0200
Subject: [PATCH 41/50] refactor: add correct route for sample

---
 .../src/app/pages/overview/overview.component.html         | 2 +-
 apps/demo-app/src/app/pages/overview/overview.component.ts | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/demo-app/src/app/pages/overview/overview.component.html b/apps/demo-app/src/app/pages/overview/overview.component.html
index df7e4f4..ea0456b 100644
--- a/apps/demo-app/src/app/pages/overview/overview.component.html
+++ b/apps/demo-app/src/app/pages/overview/overview.component.html
@@ -7,6 +7,6 @@
 <app-card label="Select component" [routes]="selectRoutes">
   <span>Lorem ipsum dolor...</span>
 </app-card>
-<app-card label="DialogComponent" link="/dialog-sample">
+<app-card label="DialogComponent" [routes]="dialogLinks">
   <span>Lorem ipsum dolor...</span>
 </app-card>
diff --git a/apps/demo-app/src/app/pages/overview/overview.component.ts b/apps/demo-app/src/app/pages/overview/overview.component.ts
index 219e409..a6ff313 100644
--- a/apps/demo-app/src/app/pages/overview/overview.component.ts
+++ b/apps/demo-app/src/app/pages/overview/overview.component.ts
@@ -42,6 +42,13 @@ export class OverviewComponent {
     },
   ];
 
+  readonly dialogLinks = [
+    {
+      route: '/dialog-sample',
+      label: 'Dialog Sample',
+    },
+  ];
+
   private randomListSampleRoute(): string {
     let route = 'list-sample/with-styles';
     let random = Math.floor(Math.random() * SAMPLE_DATA.length);

From 78cafe29bd6196aef04abfdb64918d9e030544c3 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Thu, 2 May 2024 09:25:13 +0200
Subject: [PATCH 42/50] feat: add storybook for dialog

---
 .../dialog/dialog.component.stories.ts        | 261 ++++++++++++++++++
 1 file changed, 261 insertions(+)
 create mode 100644 libs/sketch/src/lib/components/dialog/dialog.component.stories.ts

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.stories.ts b/libs/sketch/src/lib/components/dialog/dialog.component.stories.ts
new file mode 100644
index 0000000..f010830
--- /dev/null
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.stories.ts
@@ -0,0 +1,261 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { CloseButtonPosition, DialogComponent } from './dialog.component';
+import { InputSignal } from '@angular/core';
+
+const meta: Meta<DialogComponent> = {
+  component: DialogComponent,
+  title: 'DialogComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule],
+    }),
+  ],
+};
+export default meta;
+type Story = StoryObj<DialogComponent>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+    <style>
+    sk-dialog {
+      --sk-dialog-margin: 50px;
+      --sk-dialog-background: lightblue;
+    }
+    
+    button {
+      cursor: pointer;
+    }
+    
+    .normal-close-button {
+      border: none;
+      padding: 10px;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: transparent;
+    }
+    
+    .custom-close-button-style {
+      border-radius: 100px;
+      background-color: aquamarine;
+      border: none;
+      padding: 10px;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    </style>
+    
+    <button (click)="isDialogOpen = true">open Dialog</button>
+    <sk-dialog [(open)]="isDialogOpen" (close)="isDialogOpen = false" [fullscreen]="fullscreen" [contentShadow]="contentShadow" [showCloseButton]="showCloseButton" [innerCloseButton]="innerCloseButton" [closeButtonPosition]="closeButtonPosition">
+      <button class="normal-close-button" closeButton (click)="isDialogOpen = false">
+        x
+      </button>
+      <p>This is the Content</p>
+    </sk-dialog>
+    `,
+  }),
+};
+Default.args = {
+  fullscreen: false as unknown as InputSignal<boolean>,
+  contentShadow: false as unknown as InputSignal<boolean>,
+  showCloseButton: false as unknown as InputSignal<boolean>,
+  innerCloseButton: false as unknown as InputSignal<boolean>,
+  closeButtonPosition:
+    CloseButtonPosition.Right as unknown as InputSignal<CloseButtonPosition>,
+};
+Default.argTypes = {
+  closeButtonPosition: {
+    options: [CloseButtonPosition.Right, CloseButtonPosition.Left],
+    control: { type: 'radio' },
+  },
+};
+
+export const Styling: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+    <style>
+    sk-dialog:last-child {
+      --sk-dialog-width: 70%;
+      --sk-dialog-height: 50%;
+      --sk-dialog-margin: 50px;
+      --sk-dialog-container-margin: 40px;
+      --sk-dialog-container-padding: 40px;
+      --sk-dialog-outer-close-button-space: 10px;
+      --sk-dialog-inner-close-button-space: 15px;
+      --sk-dialog-border-radius: 20px;
+      --sk-dialog-border: 5px solid cornflowerblue;
+      --sk-dialog-background: lightblue;
+      --sk-dialog-content-shadow: rgb(0 0 0 / 20%) 0 10px 20px;
+      --sk-dialog-overflow: scroll;
+      --sk-dialog-backdrop: rgb(92 107 192 / 50%);
+      --sk-dialog-backdrop-blur: 2px;
+    }
+    
+    button {
+      cursor: pointer;
+    }
+    
+    
+    .normal-close-button {
+      border: none;
+      padding: 10px;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: transparent;
+    }
+    
+    .custom-close-button-style {
+      border-radius: 100px;
+      background-color: aquamarine;
+      border: none;
+      padding: 10px;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    </style>
+    
+    <button (click)="isUnstyledDialogOpen = true">open unstyled Dialog</button>
+    <sk-dialog [(open)]="isUnstyledDialogOpen" (close)="isUnstyledDialogOpen = false" [fullscreen]="fullscreen" [contentShadow]="contentShadow" [showCloseButton]="showCloseButton">
+      <button class="normal-close-button" closeButton (click)="isUnstyledDialogOpen = false">
+        x
+      </button>
+      <p>This is the Content</p>
+    </sk-dialog>
+    
+    <br>
+    <br>
+    
+    <button (click)="isStyledDialogOpen = true">open styled Dialog</button>
+    <sk-dialog [(open)]="isStyledDialogOpen" (close)="isStyledDialogOpen = false" [fullscreen]="fullscreen" [contentShadow]="contentShadow" [showCloseButton]="showCloseButton">
+      <button class="custom-close-button-style" closeButton (click)="isStyledDialogOpen = false">
+        x
+      </button>
+      <p>This is the Content</p>
+    </sk-dialog>
+    `,
+  }),
+};
+Styling.args = {
+  fullscreen: false as unknown as InputSignal<boolean>,
+  contentShadow: false as unknown as InputSignal<boolean>,
+  showCloseButton: false as unknown as InputSignal<boolean>,
+};
+
+export const CloseButton: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+    <style>
+    sk-dialog {
+      --sk-dialog-margin: 50px;
+      --sk-dialog-background: lightblue;
+    }
+    
+    button {
+      cursor: pointer;
+    }
+    
+    .normal-close-button {
+      border: none;
+      padding: 10px;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: transparent;
+    }
+    </style>
+    
+    <button (click)="isDialogOpen = true">open Dialog</button>
+    <sk-dialog [(open)]="isDialogOpen" (close)="isDialogOpen = false" [showCloseButton]="showCloseButton" [innerCloseButton]="innerCloseButton" [closeButtonPosition]="closeButtonPosition">
+      <button class="normal-close-button" closeButton (click)="isDialogOpen = false">
+        x
+      </button>
+      <p>This is the Content</p>
+    </sk-dialog>
+    `,
+  }),
+};
+CloseButton.args = {
+  showCloseButton: true as unknown as InputSignal<boolean>,
+  innerCloseButton: false as unknown as InputSignal<boolean>,
+  closeButtonPosition:
+    CloseButtonPosition.Right as unknown as InputSignal<CloseButtonPosition>,
+};
+CloseButton.argTypes = {
+  closeButtonPosition: {
+    options: [CloseButtonPosition.Right, CloseButtonPosition.Left],
+    control: { type: 'radio' },
+  },
+};
+
+export const NestedDialog: StoryObj<
+  DialogComponent & { showNestedCloseButton: boolean }
+> = {
+  render: (args) => ({
+    props: args,
+    template: `
+    <style>
+      sk-dialog {
+        --sk-dialog-margin: 50px;
+        --sk-dialog-background: lightblue;
+      }
+      
+      sk-dialog:nth-child(3) {
+        --sk-dialog-margin: 50px;
+        --sk-dialog-background: lightpink;
+        --sk-dialog-width: 70%;
+        --sk-dialog-height: 70%;
+      }
+      
+      .normal-close-button {
+        border: none;
+        padding: 10px;
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: transparent;
+      }
+    </style>
+    
+    <button (click)="isDialogOpen = true">open Dialog</button>
+    <sk-dialog [(open)]="isDialogOpen" (close)="isDialogOpen = false" [showCloseButton]="showCloseButton">
+      <button class="normal-close-button" closeButton (click)="isDialogOpen = false">
+        x
+      </button>
+      <p>This is the Content</p>
+      
+      <button (click)="isNestedDialogOpen = true">open nested Dialog</button>
+      <sk-dialog [(open)]="isNestedDialogOpen" (close)="isNestedDialogOpen = false" [showCloseButton]="showNestedCloseButton">
+        <button class="normal-close-button" closeButton (click)="isNestedDialogOpen = false">
+         x
+        </button>
+        
+        <p>This is the Content of the nested Dialog</p>
+      </sk-dialog>
+    </sk-dialog>
+    `,
+  }),
+};
+NestedDialog.args = {
+  showCloseButton: false as unknown as InputSignal<boolean>,
+  showNestedCloseButton: false,
+};

From 82814cbaff3239e1b46b7230621548f189e01044 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Thu, 2 May 2024 16:03:21 +0200
Subject: [PATCH 43/50] fix: adjust max-height of no margin container

---
 libs/sketch/src/lib/components/dialog/dialog.component.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index 60399a7..d76707b 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -97,5 +97,8 @@ dialog::backdrop {
 .sk-dialog-content-container-no-margin {
   margin: 0;
   height: calc(100% - (var(--sk-dialog-container-padding) * 2));
-  max-height: calc(100svh - (var(--sk-dialog-container-padding) * 5));
+  max-height: calc(
+    100svh - (var(--sk-dialog-margin) * 2) -
+      (var(--sk-dialog-container-padding) * 2)
+  );
 }

From d4d8b5b56a354a02041bb68a5dbea16938ff4649 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Fri, 3 May 2024 11:34:42 +0200
Subject: [PATCH 44/50] fix: adjust display of wrapper to avoid interferences
 of innerCloseButton and contentShadow

---
 libs/sketch/src/lib/components/dialog/dialog.component.css  | 4 ++--
 libs/sketch/src/lib/components/dialog/dialog.component.html | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index d76707b..de34064 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -65,14 +65,14 @@ dialog::backdrop {
 
 .sk-dialog-wrapper {
   position: relative;
-  overflow: hidden;
-  display: block;
+  display: flex;
   margin: var(--sk-dialog-margin);
   height: calc(100% - (var(--sk-dialog-margin) * 2));
   max-height: calc(100svh - (var(--sk-dialog-margin) * 2));
 }
 
 .sk-dialog-content-container {
+  flex-grow: 1;
   padding: var(--sk-dialog-container-padding);
   height: calc(
     100% - (var(--sk-dialog-container-margin) * 2) -
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 419e57a..852bafd 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -28,8 +28,7 @@
     <div
       [ngClass]="{
         'sk-dialog-content-container-no-margin':
-          (!showCloseButton() && !contentShadow()) ||
-          (showCloseButton() && innerCloseButton()),
+          !showCloseButton() || (showCloseButton() && innerCloseButton()),
         'sk-dialog-content-container-shadow': contentShadow()
       }"
       class="sk-dialog-content-container"

From e675b2a68b0164003504adf4f5a4035cc11fb0ec Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Fri, 3 May 2024 12:27:03 +0200
Subject: [PATCH 45/50] feat: enhance dialog documentation

---
 .../dialog/dialog.component.stories.ts        | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.stories.ts b/libs/sketch/src/lib/components/dialog/dialog.component.stories.ts
index f010830..6149472 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.stories.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.stories.ts
@@ -5,6 +5,8 @@ import { InputSignal } from '@angular/core';
 
 const meta: Meta<DialogComponent> = {
   component: DialogComponent,
+  tags: ['autodocs'],
+  parameters: {},
   title: 'DialogComponent',
   decorators: [
     moduleMetadata({
@@ -15,6 +17,9 @@ const meta: Meta<DialogComponent> = {
 export default meta;
 type Story = StoryObj<DialogComponent>;
 
+/**
+ * This is the default Dialog with all controls.
+ */
 export const Default: Story = {
   render: (args) => ({
     props: args,
@@ -72,12 +77,33 @@ Default.args = {
     CloseButtonPosition.Right as unknown as InputSignal<CloseButtonPosition>,
 };
 Default.argTypes = {
+  fullscreen: {
+    description: 'the option to take full width and height of viewport',
+    defaultValue: { summary: false },
+  },
+  contentShadow: {
+    description: 'the option to show a shadow (default or custom)',
+    defaultValue: { summary: false },
+  },
+  showCloseButton: {
+    description: 'the option to show or hide the close button',
+    defaultValue: { summary: false },
+  },
+  innerCloseButton: {
+    description: 'the option show the close button inside the container',
+    defaultValue: { summary: false },
+  },
   closeButtonPosition: {
     options: [CloseButtonPosition.Right, CloseButtonPosition.Left],
     control: { type: 'radio' },
+    description: 'the position of the close button',
+    defaultValue: { summary: CloseButtonPosition.Right },
   },
 };
 
+/**
+ * This is one unstyled Dialog and one completely styled Dialog. **Custom Properties** are used to style it.
+ */
 export const Styling: Story = {
   render: (args) => ({
     props: args,
@@ -156,6 +182,9 @@ Styling.args = {
   showCloseButton: false as unknown as InputSignal<boolean>,
 };
 
+/**
+ * Here are all options for the Close Button.
+ */
 export const CloseButton: Story = {
   render: (args) => ({
     props: args,
@@ -205,6 +234,9 @@ CloseButton.argTypes = {
   },
 };
 
+/**
+ * This is a Dialog with a nested Dialog in it. It's possible to show/hide each Close Button.
+ */
 export const NestedDialog: StoryObj<
   DialogComponent & { showNestedCloseButton: boolean }
 > = {

From c5c94da2b9d12050626e20b0ea5d987a699bbc0e Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Fri, 3 May 2024 12:32:39 +0200
Subject: [PATCH 46/50] chore: update documentation

---
 libs/sketch/src/lib/components/dialog/dialog-documentation.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog-documentation.md b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
index cd7e90a..f702eee 100644
--- a/libs/sketch/src/lib/components/dialog/dialog-documentation.md
+++ b/libs/sketch/src/lib/components/dialog/dialog-documentation.md
@@ -108,7 +108,7 @@ You have some other options for the styling and positioning of your content. (Se
 
 #### Container Style
 
-- To change the width and height of the container, change the custom properties `--sk-dialog-width` and `--sk-dialog-height` (or only one of them). By default, the container takes the full width and fits the height of the content. If you want to have a fullscreen Dialog, set `[fullscreen]` to true, you don't need to anything for height and width custom properties.
+- To change the width and height of the container, change the custom properties `--sk-dialog-width` and `--sk-dialog-height` (or only one of them). By default, the container takes the full width and fits the height of the content. If you want to have a fullscreen Dialog, set `[fullscreen]` to true, you don't need to anything for height and width custom properties. If you have set the `--sk-dialog-width` to a custom value, the container with `[fullscreen]="true"` will only grow to full height. Remove the width to have an actual fullscreen.
 - It is recommended to add a background, because by default the container is transparent and the backdrop will shine through. You can adjust it by changing the `--sk-dialog-background` custom property. You can do gradients, solid colors, images etc.
 - The edges are not rounded by default. If you want to have a border-radius, change the `--sk-dialog-border-radius` custom property.
 - By default, the overflow of the container is `auto`, if you'd like to change this behavior, adjust the `--sk-dialog-overflow` custom property.

From a34d522f6263eb66d85d3c67c9a8757069271ff0 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Fri, 3 May 2024 14:47:36 +0200
Subject: [PATCH 47/50] refactor: refactor code

---
 apps/demo-app/src/styles.css                     |  2 --
 .../lib/components/dialog/dialog.component.ts    | 16 +++++++++-------
 src/lib/dialog.service.spec.ts                   | 16 ----------------
 src/lib/dialog.service.ts                        |  9 ---------
 4 files changed, 9 insertions(+), 34 deletions(-)
 delete mode 100644 src/lib/dialog.service.spec.ts
 delete mode 100644 src/lib/dialog.service.ts

diff --git a/apps/demo-app/src/styles.css b/apps/demo-app/src/styles.css
index 3fcfc83..9b25288 100644
--- a/apps/demo-app/src/styles.css
+++ b/apps/demo-app/src/styles.css
@@ -2,8 +2,6 @@
 
 /* You can add global styles to this file, and also import other style files */
 
-@import '@angular/cdk/overlay-prebuilt.css';
-
 :root {
   --sk-top-bar-height: 84px;
   --sk-font-family: 'Montserrat', 'Helevetika Neue', sans-serif;
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
index 23fa0ba..57ea5c2 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.ts
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -26,21 +26,23 @@ export enum CloseButtonPosition {
   encapsulation: ViewEncapsulation.ShadowDom,
 })
 export class DialogComponent {
-  open = model(false);
+  readonly open = model(false);
 
-  showCloseButton = input<boolean>(false);
+  readonly showCloseButton = input<boolean>(false);
 
-  innerCloseButton = input<boolean>(false);
+  readonly innerCloseButton = input<boolean>(false);
 
-  closeButtonPosition = input<CloseButtonPosition>(CloseButtonPosition.Right);
+  readonly closeButtonPosition = input<CloseButtonPosition>(
+    CloseButtonPosition.Right
+  );
 
-  fullscreen = input<boolean>(false);
+  readonly fullscreen = input<boolean>(false);
 
-  contentShadow = input<boolean>(false);
+  readonly contentShadow = input<boolean>(false);
 
   readonly CloseButtonPosition = CloseButtonPosition;
 
-  close = output<void>();
+  readonly close = output<void>();
 
   private readonly dialogElement =
     viewChild.required<ElementRef<HTMLDialogElement>>('dialogElement');
diff --git a/src/lib/dialog.service.spec.ts b/src/lib/dialog.service.spec.ts
deleted file mode 100644
index 016507e..0000000
--- a/src/lib/dialog.service.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { DialogService } from './dialog.service';
-
-describe('DialogService', () => {
-  let service: DialogService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(DialogService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
diff --git a/src/lib/dialog.service.ts b/src/lib/dialog.service.ts
deleted file mode 100644
index 7d06965..0000000
--- a/src/lib/dialog.service.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DialogService {
-
-  constructor() { }
-}

From e1841556d374d2d058c5b912ca256cb511bf94e0 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 8 May 2024 09:38:36 +0200
Subject: [PATCH 48/50] refactor: remove todo comment

---
 libs/sketch/src/lib/components/dialog/dialog.component.html | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 852bafd..35a6e3a 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -16,12 +16,6 @@
           'sk-dialog-inner-close-button-left': innerCloseButton() && closeButtonPosition() === CloseButtonPosition.Left,
       }"
     >
-      <!--
-      TODO: add default button when ng-content allows default value!
-      <button title="Close">
-        <img src="../../../assets/cross.svg" alt="Close Button Icon" />
-      </button>
-      -->
       <ng-content select="[closeButton]"></ng-content>
     </div>
     }

From 41d234363b8082b63f9e39452a908d1fb6427199 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 8 May 2024 14:07:39 +0200
Subject: [PATCH 49/50] refactor: add class to dialog for same css specificity

---
 libs/sketch/src/index.ts                                    | 2 +-
 libs/sketch/src/lib/components/dialog/dialog.component.css  | 6 +++---
 libs/sketch/src/lib/components/dialog/dialog.component.html | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/libs/sketch/src/index.ts b/libs/sketch/src/index.ts
index 93531b4..eff0b5c 100644
--- a/libs/sketch/src/index.ts
+++ b/libs/sketch/src/index.ts
@@ -1,4 +1,4 @@
 export * from './lib/components/sketch/sketch.component';
 export * from './lib/components/select';
 export * from './lib/components/list';
-export * from './lib/components/dialog/dialog.component';
\ No newline at end of file
+export * from './lib/components/dialog/dialog.component';
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
index de34064..8adb9ce 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.css
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -15,7 +15,7 @@
   --sk-dialog-backdrop-blur: 0;
 }
 
-dialog {
+.sk-dialog {
   width: var(--sk-dialog-width);
   height: var(--sk-dialog-height);
   max-width: 100%;
@@ -26,13 +26,13 @@ dialog {
   background-color: transparent;
 }
 
-dialog:has(::backdrop) {
+.sk-dialog:has(::backdrop) {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-dialog::backdrop {
+.sk-dialog::backdrop {
   background: var(--sk-dialog-backdrop);
   backdrop-filter: blur(var(--sk-dialog-backdrop-blur));
 }
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
index 35a6e3a..05f9932 100644
--- a/libs/sketch/src/lib/components/dialog/dialog.component.html
+++ b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -1,4 +1,5 @@
 <dialog
+  class="sk-dialog"
   #dialogElement
   skClickBackdrop
   (clickedBackdrop)="close.emit()"

From f7a25b45140e035a5b24b55db120bc5f2186be26 Mon Sep 17 00:00:00 2001
From: inga <inga@qupaya.com>
Date: Wed, 8 May 2024 14:36:23 +0200
Subject: [PATCH 50/50] refactor: remove unit test

---
 .../dialog/dialog.component.spec.ts           | 21 -------------------
 .../click-backdrop.directive.spec.ts          |  8 -------
 2 files changed, 29 deletions(-)
 delete mode 100644 libs/sketch/src/lib/components/dialog/dialog.component.spec.ts
 delete mode 100644 libs/sketch/src/lib/components/dialog/directive/click-backdrop.directive.spec.ts

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.spec.ts b/libs/sketch/src/lib/components/dialog/dialog.component.spec.ts
deleted file mode 100644
index 124e351..0000000
--- a/libs/sketch/src/lib/components/dialog/dialog.component.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DialogComponent } from './dialog.component';
-
-describe('DialogComponent', () => {
-  let component: DialogComponent;
-  let fixture: ComponentFixture<DialogComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DialogComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/libs/sketch/src/lib/components/dialog/directive/click-backdrop.directive.spec.ts b/libs/sketch/src/lib/components/dialog/directive/click-backdrop.directive.spec.ts
deleted file mode 100644
index 00ca79b..0000000
--- a/libs/sketch/src/lib/components/dialog/directive/click-backdrop.directive.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ClickBackdropDirective } from './click-backdrop.directive';
-
-describe('DialogDirective', () => {
-  it('should create an instance', () => {
-    const directive = new ClickBackdropDirective();
-    expect(directive).toBeTruthy();
-  });
-});