matcha-components 1.0.7 → 1.0.14

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

@@ -1,16 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,277 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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 {
-}