fix(dialog): update samples content

live-editing/configs/DialogConfigGenerator.ts

@@ -10,32 +10,32 @@ export class DialogConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // dialog sample 1
+        // dialog overview
         configs.push(new Config({
-            component: 'DialogSample1Component',
+            component: 'DialogOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/interactions/dialog/"
         }));
 
-        // dialog sample 2
+        // dialog types
         configs.push(new Config({
-            component: 'DialogSample2Component',
+            component: 'DialogTypesComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/interactions/dialog/"
         }));
 
-        // dialog sample 3
+        // dialog styling
         configs.push(new Config({
-            component: 'DialogSample3Component',
+            component: 'DialogStylingComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/interactions/dialog/"
         }));
 
+        // dialog tailwind styling
         configs.push(new Config({
-            component: 'DialogStylingSampleComponent',
-            additionalFiles: ["/src/app/interactions/dialog/dialog-styling-sample/layout.scss"],
+            component: 'DialogTailwindStylingComponent',
             appConfig: BaseAppConfig,
-            shortenComponentPathBy: "/interactions/"
+            shortenComponentPathBy: "/interactions/dialog/"
         }));
 
         return configs;

src/app/interactions/dialog/dialog-overview/dialog-overview.component.html

@@ -0,0 +1,12 @@
+<button igxButton="outlined" type="button" class="open-button" (click)="dialog.open()">Open dialog</button>
+
+<igx-dialog #dialog
+    title="Confirmation"
+    message="Your email will be permanently deleted"
+    [positionSettings]="positionSettings"
+    [isOpen]="isBrowser">
+    <div igxDialogActions>
+        <button igxButton="flat" type="button" (click)="dialog.close()">Cancel</button>
+        <button igxButton="flat" type="button" (click)="dialog.close()">OK</button>
+    </div>
+</igx-dialog>

src/app/interactions/dialog/dialog-overview/dialog-overview.component.scss

@@ -0,0 +1,26 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.9375rem 1rem 1rem;
+}
+
+.open-button {
+    width: 11.25rem;
+}
+
+igx-dialog {
+    --ig-overlay-background-color: transparent;
+    --ig-dialog-message-color: var(--ig-gray-700);
+}
+
+igx-dialog ::ng-deep .igx-dialog__window {
+    width: 17.5rem;
+    margin-top: 6.9375rem;
+}
+
+igx-dialog [igxButton] {
+    --ig-size: var(--ig-size-medium);
+
+    min-width: auto;
+}

src/app/interactions/dialog/dialog-overview/dialog-overview.component.ts

@@ -0,0 +1,19 @@
+import { isPlatformBrowser } from '@angular/common';
+import { Component, inject, PLATFORM_ID } from '@angular/core';
+import { PositionSettings, VerticalAlignment } from 'igniteui-angular/core';
+import { IgxDialogActionsDirective, IgxDialogComponent } from 'igniteui-angular/dialog';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+
+@Component({
+    selector: 'app-dialog-overview',
+    styleUrls: ['./dialog-overview.component.scss'],
+    templateUrl: './dialog-overview.component.html',
+    imports: [IgxButtonDirective, IgxDialogComponent, IgxDialogActionsDirective]
+})
+export class DialogOverviewComponent {
+    public isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+
+    public positionSettings: PositionSettings = {
+        verticalDirection: VerticalAlignment.Top
+    };
+}

src/app/interactions/dialog/dialog-styling/dialog-styling.component.html

@@ -0,0 +1,36 @@
+<igx-dialog class="sign-in-dialog">
+    <igx-dialog-title class="sign-in-header">
+        <button igxButton="fab" type="button" class="sign-in-avatar" aria-label="Profile">
+            <igx-icon>person</igx-icon>
+        </button>
+        <span class="sign-in-title">Welcome back</span>
+    </igx-dialog-title>
+
+    <span class="sign-in-message">Sign in to your workspace</span>
+    <div class="sign-in-fields">
+        <igx-input-group class="sign-in-input">
+            <igx-prefix>
+                <igx-icon>notifications</igx-icon>
+            </igx-prefix>
+            <label igxLabel for="email">E-mail</label>
+            <input igxInput id="email" type="email" placeholder="dean@company.com" />
+        </igx-input-group>
+        <igx-input-group class="sign-in-input">
+            <igx-prefix>
+                <igx-icon>lock</igx-icon>
+            </igx-prefix>
+            <label igxLabel for="password">Password</label>
+            <input igxInput id="password" type="password" placeholder="***********" />
+        </igx-input-group>
+    </div>
+
+    <div igxDialogActions class="sign-in-footer">
+        <div class="sign-in-actions">
+            <button igxButton="outlined" type="button" class="cancel-button">Cancel</button>
+            <button igxButton="contained" type="button" class="submit-button">Sign in</button>
+        </div>
+        <span class="sign-up">
+            No account? <a href="#" (click)="$event.preventDefault()">Create workspace</a>
+        </span>
+    </div>
+</igx-dialog>