matcha-components 1.0.5 → 1.0.7

package/src/lib/matcha-chips/matcha-chips.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[matchaChips]'
+})
+export class MatchaChipsDirective {
+
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    ) {
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement,'matcha-chips')
+    }
+
+}

package/src/lib/matcha-components.module.ts

@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+import { MatchaCardModule } from './matcha-card/card.module';
+import { MatchaHeadersModule } from './matcha-headers/headers.module';
+
+import { MatchaAutocompleteModule } from './matcha-autocomplete/autocomplete.module';
+import { MatchaBadgeModule } from './matcha-badge/badge.module';
+import { MatchaTabsModule } from './matcha-tabs/tabs.module';
+import { MatchaBottomSheetModule } from './matcha-bottom-sheet/bottom-sheet.module';
+import { MatchaButtonToggleModule } from './matcha-button-toggle/button-toggle.module';
+import { MatchaButtonModule } from './matcha-button/button.module';
+import { MatchaCheckboxModule } from './matcha-checkbox/checkbox.module';
+import { MatchaChipsModule } from './matcha-chips/chips.module';
+import { MatchaDatepickerModule } from './matcha-datepicker/datepicker.module';
+import { MatchaDialogModule } from './matcha-dialog/dialog.module';
+import { MatchaDividerModule } from './matcha-divider/divider.module';
+import { MatchaElevationModule } from './matcha-elevation/elevation.module';
+import { MatchaExpansionModule } from './matcha-expansion/expansion.module';
+import { MatchaFormsModule } from './matcha-forms/forms.module';
+import { MatchaIconModule } from './matcha-icon/icon.module';
+import { MatchaInputModule } from './matcha-input/input.module';
+import { MatchaListModule } from './matcha-list/list.module';
+import { MatchaMenuModule } from './matcha-menu/menu.module';
+import { MatchaSidenavModule } from './matcha-sidenav/sidenav.module';
+import { MatchaPaginatorModule } from './matcha-paginator/paginator.module';
+import { MatchaProgressBarModule } from './matcha-progress-bar/progress-bar.module';
+import { MatchaProgressSpinnerModule } from './matcha-progress-spinner/progress-spinner.module';
+import { MatchaRadioButtonModule } from './matcha-radio-button/radio-button.module';
+import { MatchaSelectModule } from './matcha-select/select.module';
+import { MatchaSlideToggleModule } from './matcha-slide-toggle/slide-toggle.module';
+import { MatchaSliderModule } from './matcha-slider/slider.module';
+import { MatchaSnackBarModule } from './matcha-snackbar/snack-bar.module';
+import { MatchaSortHeaderModule } from './matcha-sort-header/sort-header.module';
+import { MatchaStepperModule } from './matcha-stepper/stepper.module';
+import { MatchaTableModule } from './matcha-table/table.module';
+import { MatchaTooltipModule } from './matcha-tooltip/tooltip.module';
+import { MatchaTreeModule } from './matcha-tree/tree.module';
+
+@NgModule({
+    declarations: [],
+    imports: [MatchaCardModule, MatchaHeadersModule],
+    exports: [MatchaCardModule, MatchaHeadersModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaStepperModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule],
+})
+export class MatchaComponentsModule {}

package/src/lib/matcha-datepicker/datepicker.argtypes.ts

@@ -0,0 +1,63 @@
+export const datepickerArgtypes = {
+    disabled: {
+        description: 'Whether the datepicker-input is disabled.',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            defaultValue: { summary: true },
+        },
+    },
+    dateFilter: {
+        description:
+            'Function that can be used to filter out dates within the datepicker.',
+        control: 'function',
+        table: {
+            type: { summary: 'DateFilterFn<D>' },
+        },
+    },
+    matDatepicker: {
+        description: 'The datepicker that this input is associated with.',
+        control: null, // Como é uma referência a um componente MatDatepicker, não precisa de um controle.
+        table: {
+            disable: true, // Desativamos a tabela para evitar a exibição de informações desnecessárias.
+        },
+    },
+    max: {
+        description: 'The maximum valid date.',
+        control: 'date',
+        table: {
+            type: { summary: 'D | null' },
+        },
+    },
+    min: {
+        description: 'The minimum valid date.',
+        control: 'date',
+        table: {
+            type: { summary: 'D | null' },
+        },
+    },
+    value: {
+        description: 'The value of the input.',
+        control: 'date',
+        table: {
+            type: { summary: 'D | null' },
+        },
+    },
+    dateChange: {
+        description: 'Emits when a change event is fired on this <input>.',
+        action: 'dateChange',
+    },
+    dateInput: {
+        description: 'Emits when a change event is fired on this <input>.',
+        action: 'dateInput',
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

package/src/lib/matcha-datepicker/datepicker.directive.ts

@@ -0,0 +1,14 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[matcha-datepicker]',
+})
+export class MatchaDatepickerDirective {
+    constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(
+            this._elementRef.nativeElement,
+            'matcha-datepicker'
+        );
+    }
+}

package/src/lib/matcha-datepicker/datepicker.mdx

@@ -0,0 +1,73 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./datepicker.stories";
+
+<Meta title="Atoms / Datepicker / Documentação" />
+
+# Datepicker
+
+> _datepicker_ permite que os usuários insiram uma data por meio de entrada de texto ou escolhendo uma data no calendário. É composto por vários componentes, diretivas e módulo de implementação de datas que funcionam em conjunto.
+
+---
+
+### Modes
+
+<div class="d-flex-column gap-16">
+    <div class="d-flex-column">
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <span class="h5">Datepicker - Date range picker comparison ranges</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.DatepickerComparison} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <form>
+                    <mat-form-field matcha-datepicker appearance="outline" [color]="color">
+                        <mat-label>First campaign</mat-label>
+                        <mat-date-range-input
+                            [formGroup]="campaignOne"
+                            [rangePicker]="campaignOnePicker"
+                            [comparisonStart]="campaignTwo.value.start"
+                            [comparisonEnd]="campaignTwo.value.end">
+                            <input matStartDate placeholder="Start date" formControlName="start">
+                            <input matEndDate placeholder="End date" formControlName="end">
+                        </mat-date-range-input>
+                        <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                        <mat-datepicker-toggle matIconSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
+                        <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
+                    </mat-form-field>
+
+                    <mat-form-field matcha-datepicker appearance="outline" [color]="color">
+                        <mat-label>Second campaign</mat-label>
+                        <mat-date-range-input
+                            [formGroup]="campaignTwo"
+                            [rangePicker]="campaignTwoPicker"
+                            [comparisonStart]="campaignOne.value.start"
+                            [comparisonEnd]="campaignOne.value.end">
+                            <input matStartDate placeholder="Start date" formControlName="start">
+                            <input matEndDate placeholder="End date" formControlName="end">
+                        </mat-date-range-input>
+                        <mat-datepicker-toggle matIconSuffix [for]="campaignTwoPicker"></mat-datepicker-toggle>
+                        <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                        <mat-date-range-picker #campaignTwoPicker></mat-date-range-picker>
+                    </mat-form-field>
+                </form>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatDatepickerModule} from '@angular/material/datepicker';`
+
+[Official documentation](https://https://material.angular.io/components/datepicker/overview)
+
+<br />

package/src/lib/matcha-datepicker/datepicker.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { MatchaDatepickerDirective } from './datepicker.directive';
+
+@NgModule({
+    declarations: [MatchaDatepickerDirective],
+    imports: [],
+    exports: [MatchaDatepickerDirective],
+})
+export class MatchaDatepickerModule {}

package/src/lib/matcha-datepicker/datepicker.stories.ts

@@ -0,0 +1,277 @@
+import {
+    applicationConfig,
+    Meta,
+    moduleMetadata,
+    StoryObj,
+} from '@storybook/angular';
+import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
+import {
+    FormControl,
+    FormGroup,
+    FormsModule,
+    ReactiveFormsModule,
+} from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import {
+    MatCalendarCellClassFunction,
+    MatDatepickerModule,
+} from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatchaDatepickerDirective } from './datepicker.directive';
+import { datepickerArgtypes } from './datepicker.argtypes';
+
+export default {
+    title: 'Atoms / Datepicker',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+        moduleMetadata({
+            imports: [
+                CommonModule,
+                FormsModule,
+                MatFormFieldModule,
+                MatInputModule,
+                MatDatepickerModule,
+                MatNativeDateModule,
+                MatButtonModule,
+                ReactiveFormsModule,
+                NgIf,
+                JsonPipe,
+                NgFor,
+                AsyncPipe,
+            ],
+            declarations: [MatchaDatepickerDirective],
+        }),
+    ],
+    args: {
+        color: 'accent',
+    },
+    argTypes: datepickerArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+const today = new Date();
+const month = today.getMonth();
+const year = today.getFullYear();
+
+const campaignOne = new FormGroup({
+    start: new FormControl(new Date(year, month, 13)),
+    end: new FormControl(new Date(year, month, 16)),
+});
+const campaignTwo = new FormGroup({
+    start: new FormControl(new Date(year, month, 15)),
+    end: new FormControl(new Date(year, month, 19)),
+});
+
+export const DatepickerComparison: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            campaignOne,
+            campaignTwo,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256">
+                <mat-form-field matcha-datepicker appearance="outline" [color]="color">
+                    <mat-label>First campaign</mat-label>
+                    <mat-date-range-input
+                        [formGroup]="campaignOne"
+                        [rangePicker]="campaignOnePicker"
+                        [comparisonStart]="campaignTwo.value.start"
+                        [comparisonEnd]="campaignTwo.value.end">
+                        <input matStartDate placeholder="Start date" formControlName="start">
+                        <input matEndDate placeholder="End date" formControlName="end">
+                    </mat-date-range-input>
+                    <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                    <mat-datepicker-toggle matIconSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
+                    <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
+                </mat-form-field>
+                
+                <mat-form-field matcha-datepicker appearance="outline" [color]="color">
+                    <mat-label>Second campaign</mat-label>
+                    <mat-date-range-input
+                        [formGroup]="campaignTwo"
+                        [rangePicker]="campaignTwoPicker"
+                        [comparisonStart]="campaignOne.value.start"
+                        [comparisonEnd]="campaignOne.value.end">
+                        <input matStartDate placeholder="Start date" formControlName="start">
+                        <input matEndDate placeholder="End date" formControlName="end">
+                    </mat-date-range-input>
+                    <mat-datepicker-toggle matIconSuffix [for]="campaignTwoPicker"></mat-datepicker-toggle>
+                    <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                    <mat-date-range-picker #campaignTwoPicker></mat-date-range-picker>
+                </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Datepicker comparison',
+};
+
+const range = new FormGroup({
+    start: new FormControl<Date | null>(null),
+    end: new FormControl<Date | null>(null),
+});
+
+export const DatepickerIntegration: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            range,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256">
+                <mat-form-field matcha-datepicker appearance="outline" [color]="color">
+                        
+                    <mat-label>Enter a date range</mat-label>
+                    <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
+                    <input matStartDate formControlName="start" placeholder="Start date">
+                    <input matEndDate formControlName="end" placeholder="End date">
+                    </mat-date-range-input>
+                    <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+                    <mat-date-range-picker #picker></mat-date-range-picker>
+                
+                    <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
+                    <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
+                    
+                </mat-form-field>
+                <p>Selected range: {{range.value | json}}</p>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Datepicker Integration',
+};
+
+export const DatepickerOpenMethod: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            range,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256">
+                <mat-form-field matcha-datepicker appearance="outline" [color]="color">
+                    <mat-label>Choose a date</mat-label>
+                    <input matInput [matDatepicker]="picker">
+                    <mat-hint>MM/DD/YYYY</mat-hint>
+                    <mat-datepicker #picker></mat-datepicker>
+                </mat-form-field>
+                <button mat-raised-button (click)="picker.open()">Open</button>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Datepicker Open Method',
+};
+
+export const DatepickerBasic: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256">
+                <mat-form-field appearance="outline" [color]="color">
+                    <mat-label>Enter a date range</mat-label>
+                    <mat-date-range-input [rangePicker]="picker">
+                    <input matStartDate placeholder="Start date">
+                    <input matEndDate placeholder="End date">
+                    </mat-date-range-input>
+                    <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+                    <mat-date-range-picker #picker></mat-date-range-picker>
+                </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Basic Datepicker',
+};
+
+export const DatepickerActionButtons: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256">
+            <mat-form-field appearance="outline" [color]="color">
+                <mat-label>Choose a date</mat-label>
+                <input matInput [matDatepicker]="datepicker">
+                <mat-hint>MM/DD/YYYY</mat-hint>
+                <mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
+                <mat-datepicker #datepicker>
+                <mat-datepicker-actions>
+                    <button mat-button matDatepickerCancel>Cancel</button>
+                    <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
+                </mat-datepicker-actions>
+                </mat-datepicker>
+            </mat-form-field>
+
+            <mat-form-field appearance="outline" [color]="color">
+                <mat-label>Enter a date range</mat-label>
+                <mat-date-range-input [rangePicker]="rangePicker">
+                <input matStartDate placeholder="Start date">
+                <input matEndDate placeholder="End date">
+                </mat-date-range-input>
+                <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                <mat-datepicker-toggle matIconSuffix [for]="rangePicker"></mat-datepicker-toggle>
+                <mat-date-range-picker #rangePicker>
+                <mat-date-range-picker-actions>
+                    <button mat-button matDateRangePickerCancel>Cancel</button>
+                    <button mat-raised-button color="primary" matDateRangePickerApply>Apply</button>
+                </mat-date-range-picker-actions>
+                </mat-date-range-picker>
+            </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Action Buttons',
+};
+
+const dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
+    // Only highligh dates inside the month view.
+    if (view === 'month') {
+        const date = cellDate.getDate();
+        // Highlight the 1st and 20th day of each month.
+        return date === 1 || date === 20
+            ? 'background-accent-alpha border-radius-circle'
+            : '';
+    }
+    return '';
+};
+export const DatepickerCustomDateHighlight: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            dateClass,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256">
+            <mat-form-field appearance="outline" [color]="color">
+            
+                <mat-label>Choose a date</mat-label>
+                <input matInput [matDatepicker]="picker">
+                <mat-hint>MM/DD/YYYY</mat-hint>
+                <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+                <mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>
+                
+            </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Custom Date Highlight',
+};

package/src/lib/matcha-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,39 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+    template: `
+        <section>
+            <button mat-stroked-button (click)="openDialog()">OPEN DIALOG</button>
+        </section>
+    `,
+    styles: ['section {display: flex; justify-content: center; align-items: center; height: 100%}', '.dialog-border mat-dialog-container {border-radius: 20px; border: 5px solid green} '],
+    standalone: true,
+    imports: [MatDialogModule, MatButtonModule],
+    encapsulation: ViewEncapsulation.None,
+})
+export class ConfirmationDialogComponent {
+    constructor(private readonly dialog: MatDialog) {}
+
+    openDialog(): void {
+        this.dialog.open(ConfirmationDialogDialogComponent, {
+            width: '460px',
+            autoFocus: false,
+            panelClass: 'dialog-border',
+        });
+    }
+}
+
+@Component({
+    template: `
+        <mat-icon>check_circle</mat-icon>
+        <h3>Your order has been created successfully!</h3>
+        <button mat-stroked-button mat-dialog-close>TRACK MY ORDER</button>
+    `,
+    styles: [':host  {display: flex; justify-content: center; align-items: center; flex-direction: column}', 'h3 {text-align: center}', 'mat-icon {color: green; height: 6rem; width: 6rem; font-size: 6rem}'],
+    standalone: true,
+    imports: [MatIconModule, MatButtonModule, MatDialogModule],
+})
+class ConfirmationDialogDialogComponent {}

package/src/lib/matcha-dialog/confirmation-dialog.stories.ts

@@ -0,0 +1,21 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { ConfirmationDialogComponent } from './confirmation-dialog.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+export default {
+    title: 'Atoms / Dialog',
+    component: ConfirmationDialogComponent,
+    decorators: [
+        moduleMetadata({
+            imports: [BrowserAnimationsModule],
+        }),
+    ],
+    parameters: {},
+} as Meta;
+
+export const Template: StoryObj<ConfirmationDialogComponent> = {
+    render: (args) => ({
+        props: args,
+    }),
+    name: 'success (custom css)',
+};

package/src/lib/matcha-dialog/dialog.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaDialogDirective } from './matcha-dialog.directive';
+
+@NgModule({
+  declarations: [MatchaDialogDirective],
+  imports: [
+    CommonModule
+  ],
+  exports:[
+      MatchaDialogDirective
+  ]
+})
+export class MatchaDialogModule { }

package/src/lib/matcha-dialog/matcha-dialog.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[matchaDialog]'
+})
+export class MatchaDialogDirective {
+
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    ) {
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement,'matcha-dialog')
+    }
+
+}

package/src/lib/matcha-dialog2/confirmation-dialog.component.ts.txt

@@ -0,0 +1,54 @@
+import {Component, ViewEncapsulation} from "@angular/core";
+import {MatDialog, MatDialogModule} from "@angular/material/dialog";
+import {MatIconModule} from "@angular/material/icon";
+import {MatButtonModule} from "@angular/material/button";
+
+@Component({
+  template: `
+    <section>
+      <button mat-stroked-button (click)="openDialog()">OPEN DIALOG</button>
+    </section>
+  `,
+  styles: [
+    'section {display: flex; justify-content: center; align-items: center; height: 100%}',
+    '.dialog-border mat-dialog-container {border-radius: 20px; border: 5px solid green} '
+  ],
+  standalone: true,
+  imports: [
+    MatDialogModule,
+    MatButtonModule
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class ConfirmationDialogComponent {
+  constructor(private readonly dialog: MatDialog) {}
+
+  openDialog(): void {
+    this.dialog.open(ConfirmationDialogDialogComponent, {
+      width: '250px',
+      autoFocus: false,
+      panelClass: 'dialog-border'
+    });
+  }
+}
+
+@Component({
+  template: `
+    <mat-icon>check_circle</mat-icon>
+    <h3>Your order has been created successfully!</h3>
+    <button mat-stroked-button mat-dialog-close>TRACK MY ORDER</button>
+  `,
+  styles: [
+    ':host  {display: flex; justify-content: center; align-items: center; flex-direction: column}',
+    'h3 {text-align: center}',
+    'mat-icon {color: green; height: 6rem; width: 6rem; font-size: 6rem}'
+  ],
+  standalone: true,
+  imports: [
+    MatIconModule,
+    MatButtonModule,
+    MatDialogModule
+  ]
+})
+class ConfirmationDialogDialogComponent {
+}