Chore: Cleaned up imports to use Modules.

Feature: Added an eslint rule to sort component imports

bookie/src/app/sales/bill-number/bill-number.component.ts

@@ -1,18 +1,12 @@
-import { CdkScrollable } from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatButton } from '@angular/material/button';
-import { MatOption } from '@angular/material/core';
-import {
-  MatDialogRef,
-  MAT_DIALOG_DATA,
-  MatDialogContent,
-  MatDialogActions,
-  MatDialogClose,
-} from '@angular/material/dialog';
-import { MatFormField, MatLabel } from '@angular/material/form-field';
-import { MatInput } from '@angular/material/input';
-import { MatSelect } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 import { Regime } from 'src/app/core/regime';
 
 @Component({
@@ -20,17 +14,14 @@ import { Regime } from 'src/app/core/regime';
   templateUrl: './bill-number.component.html',
   styleUrls: ['./bill-number.component.css'],
   imports: [
-    CdkScrollable,
-    MatDialogContent,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatOptionModule,
+    MatSelectModule,
     ReactiveFormsModule,
-    MatFormField,
-    MatLabel,
-    MatSelect,
-    MatOption,
-    MatInput,
-    MatDialogActions,
-    MatButton,
-    MatDialogClose,
+    ScrollingModule,
   ],
 })
 export class BillNumberComponent implements OnInit {

bookie/src/app/sales/bill-type/bill-type.component.ts

@@ -1,15 +1,9 @@
-import { CdkScrollable } from '@angular/cdk/scrolling';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { Component } from '@angular/core';
-import { MatButton } from '@angular/material/button';
-import { MatCard } from '@angular/material/card';
-import { MatRipple } from '@angular/material/core';
-import {
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
-  MatDialogActions,
-  MatDialogClose,
-} from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatRippleModule } from '@angular/material/core';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 
 import { VoucherType } from '../bills/voucher-type';
 
@@ -17,16 +11,7 @@ import { VoucherType } from '../bills/voucher-type';
   selector: 'app-bill-type',
   templateUrl: './bill-type.component.html',
   styleUrls: ['./bill-type.component.css'],
-  imports: [
-    MatDialogTitle,
-    CdkScrollable,
-    MatDialogContent,
-    MatCard,
-    MatRipple,
-    MatDialogActions,
-    MatButton,
-    MatDialogClose,
-  ],
+  imports: [CdkScrollableModule, MatButtonModule, MatCardModule, MatDialogModule, MatRippleModule],
 })
 export class BillTypeComponent {
   selected?: string;

bookie/src/app/sales/bills/bills.component.ts

@@ -2,11 +2,11 @@ import { AsyncPipe, CurrencyPipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import { MatCheckbox } from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
-import { MatIcon } from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import { MatTooltip } from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -36,15 +36,15 @@ import { VoucherType } from './voucher-type';
   templateUrl: './bills.component.html',
   styleUrls: ['./bills.component.sass'],
   imports: [
-    MatCardModule,
-    MatTableModule,
-    MatTooltip,
-    MatButtonModule,
-    MatCheckbox,
-    MatIcon,
-    RouterOutlet,
     AsyncPipe,
     CurrencyPipe,
+    MatButtonModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatIconModule,
+    MatTableModule,
+    MatTooltipModule,
+    RouterOutlet,
   ],
 })
 export class BillsComponent implements OnInit {

bookie/src/app/sales/choose-customer/choose-customer.component.ts

@@ -1,21 +1,14 @@
-import { CdkScrollable } from '@angular/cdk/scrolling';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { AsyncPipe } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
-import { MatButton } from '@angular/material/button';
-import { MatCheckbox } from '@angular/material/checkbox';
-import { MatOption } from '@angular/material/core';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
-  MatDialogActions,
-  MatDialogClose,
-} from '@angular/material/dialog';
-import { MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
-import { MatInput } from '@angular/material/input';
+import { MatAutocompleteSelectedEvent, MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatOptionModule } from '@angular/material/core';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { round } from 'mathjs';
 import { Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
@@ -28,22 +21,16 @@ import { CustomerService } from '../../customers/customer.service';
   templateUrl: './choose-customer.component.html',
   styleUrls: ['./choose-customer.component.css'],
   imports: [
-    MatDialogTitle,
-    CdkScrollable,
-    MatDialogContent,
-    ReactiveFormsModule,
-    MatFormField,
-    MatLabel,
-    MatInput,
-    MatAutocompleteTrigger,
-    MatAutocomplete,
-    MatOption,
-    MatCheckbox,
-    MatSuffix,
-    MatDialogActions,
-    MatButton,
-    MatDialogClose,
     AsyncPipe,
+    CdkScrollableModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatOptionModule,
+    ReactiveFormsModule,
   ],
 })
 export class ChooseCustomerComponent {

bookie/src/app/sales/discount/discount.component.ts

@@ -1,30 +1,12 @@
-import { CdkScrollable } from '@angular/cdk/scrolling';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { PercentPipe } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import { FormArray, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { MatButton } from '@angular/material/button';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
-  MatDialogActions,
-  MatDialogClose,
-} from '@angular/material/dialog';
-import { MatFormField, MatSuffix, MatHint } from '@angular/material/form-field';
-import { MatInput } from '@angular/material/input';
-import {
-  MatTable,
-  MatColumnDef,
-  MatHeaderCellDef,
-  MatHeaderCell,
-  MatCellDef,
-  MatCell,
-  MatHeaderRowDef,
-  MatHeaderRow,
-  MatRowDef,
-  MatRow,
-} from '@angular/material/table';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatTableModule } from '@angular/material/table';
 import { round } from 'mathjs';
 import { BehaviorSubject, Observable } from 'rxjs';
 
@@ -36,28 +18,14 @@ import { DiscountItem } from './discount-item';
   templateUrl: './discount.component.html',
   styleUrls: ['./discount.component.css'],
   imports: [
-    MatDialogTitle,
-    CdkScrollable,
-    MatDialogContent,
-    ReactiveFormsModule,
-    MatTable,
-    MatColumnDef,
-    MatHeaderCellDef,
-    MatHeaderCell,
-    MatCellDef,
-    MatCell,
-    MatFormField,
-    MatInput,
-    MatSuffix,
-    MatHint,
-    MatHeaderRowDef,
-    MatHeaderRow,
-    MatRowDef,
-    MatRow,
-    MatDialogActions,
-    MatButton,
-    MatDialogClose,
+    CdkScrollableModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatTableModule,
     PercentPipe,
+    ReactiveFormsModule,
   ],
 })
 export class DiscountComponent {

bookie/src/app/sales/home/sales-home.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { MatCard } from '@angular/material/card';
-import { MatRipple } from '@angular/material/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatRippleModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Observable, of as observableOf } from 'rxjs';
@@ -28,7 +28,7 @@ import { TablesDialogComponent } from '../tables-dialog/tables-dialog.component'
   selector: 'app-sales-home',
   templateUrl: './sales-home.component.html',
   styleUrls: ['./sales-home.component.css'],
-  imports: [MatCard, MatRipple, RouterLink],
+  imports: [MatCardModule, MatRippleModule, RouterLink],
 })
 export class SalesHomeComponent {
   constructor(

bookie/src/app/sales/menu-categories/menu-categories.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { MatCard, MatCardContent } from '@angular/material/card';
-import { MatRipple } from '@angular/material/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatRippleModule } from '@angular/material/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 
 import { MenuCategory } from '../../core/menu-category';
@@ -9,7 +9,7 @@ import { MenuCategory } from '../../core/menu-category';
   selector: 'app-menu-category',
   templateUrl: './menu-categories.component.html',
   styleUrls: ['./menu-categories.component.sass'],
-  imports: [MatCard, MatCardContent, MatRipple, RouterLink],
+  imports: [MatCardModule, MatRippleModule, RouterLink],
 })
 export class MenuCategoriesComponent implements OnInit {
   list: MenuCategory[] = [];

bookie/src/app/sales/modifiers/modifiers.component.ts

@@ -1,11 +1,11 @@
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { AsyncPipe } from '@angular/common';
 import { Component, Inject } from '@angular/core';
-import { MatBadge } from '@angular/material/badge';
-import { MatButton } from '@angular/material/button';
-import { MatCard } from '@angular/material/card';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import { MatChipsModule } from '@angular/material/chips';
-import { MatRipple } from '@angular/material/core';
+import { MatRippleModule } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { MatTabsModule } from '@angular/material/tabs';
 import { Observable } from 'rxjs';
@@ -18,15 +18,15 @@ import { ModifierCategory } from '../../core/modifier-category';
   templateUrl: './modifiers.component.html',
   styleUrls: ['./modifiers.component.css'],
   imports: [
-    CdkScrollable,
-    MatDialogModule,
-    MatTabsModule,
-    MatChipsModule,
-    MatBadge,
-    MatCard,
-    MatRipple,
-    MatButton,
     AsyncPipe,
+    CdkScrollable,
+    MatBadgeModule,
+    MatButtonModule,
+    MatCardModule,
+    MatChipsModule,
+    MatDialogModule,
+    MatRippleModule,
+    MatTabsModule,
   ],
 })
 export class ModifiersComponent {

bookie/src/app/sales/pax/pax.component.ts

@@ -1,33 +1,22 @@
-import { CdkScrollable } from '@angular/cdk/scrolling';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatButton } from '@angular/material/button';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
-  MatDialogActions,
-  MatDialogClose,
-} from '@angular/material/dialog';
-import { MatFormField, MatLabel } from '@angular/material/form-field';
-import { MatInput } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'app-pax',
   templateUrl: './pax.component.html',
   styleUrls: ['./pax.component.css'],
   imports: [
-    MatDialogTitle,
-    CdkScrollable,
-    MatDialogContent,
+    CdkScrollableModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
     ReactiveFormsModule,
-    MatFormField,
-    MatLabel,
-    MatInput,
-    MatDialogActions,
-    MatButton,
-    MatDialogClose,
   ],
 })
 export class PaxComponent implements OnInit {

bookie/src/app/sales/products/products.component.ts

@@ -1,7 +1,7 @@
 import { CurrencyPipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { MatCard, MatCardContent } from '@angular/material/card';
-import { MatRipple } from '@angular/material/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatRippleModule } from '@angular/material/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 
 import { Product } from '../../core/product';
@@ -11,7 +11,7 @@ import { BillService } from '../bill.service';
   selector: 'app-products',
   templateUrl: './products.component.html',
   styleUrls: ['./products.component.css'],
-  imports: [MatCard, MatCardContent, MatRipple, RouterLink, CurrencyPipe],
+  imports: [CurrencyPipe, MatCardModule, MatRippleModule, RouterLink],
 })
 export class ProductsComponent implements OnInit {
   list: Product[] = [];

bookie/src/app/sales/quantity/quantity.component.ts

@@ -1,16 +1,10 @@
-import { CdkScrollable } from '@angular/cdk/scrolling';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatButton } from '@angular/material/button';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogContent,
-  MatDialogActions,
-  MatDialogClose,
-} from '@angular/material/dialog';
-import { MatFormField, MatLabel } from '@angular/material/form-field';
-import { MatInput } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 import { MathService } from '../../shared/math.service';
 
@@ -19,15 +13,12 @@ import { MathService } from '../../shared/math.service';
   templateUrl: './quantity.component.html',
   styleUrls: ['./quantity.component.css'],
   imports: [
-    CdkScrollable,
-    MatDialogContent,
+    CdkScrollableModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
     ReactiveFormsModule,
-    MatFormField,
-    MatLabel,
-    MatInput,
-    MatDialogActions,
-    MatButton,
-    MatDialogClose,
   ],
 })
 export class QuantityComponent implements OnInit {

bookie/src/app/sales/reason/reason.component.ts

@@ -1,29 +1,11 @@
-import { CdkScrollable } from '@angular/cdk/scrolling';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatButton } from '@angular/material/button';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
-  MatDialogActions,
-  MatDialogClose,
-} from '@angular/material/dialog';
-import { MatFormField, MatLabel } from '@angular/material/form-field';
-import { MatInput } from '@angular/material/input';
-import {
-  MatTable,
-  MatColumnDef,
-  MatCellDef,
-  MatCell,
-  MatFooterCellDef,
-  MatFooterCell,
-  MatRowDef,
-  MatRow,
-  MatFooterRowDef,
-  MatFooterRow,
-} from '@angular/material/table';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatTableModule } from '@angular/material/table';
 
 import { ReasonDatasource } from './reason-datasource';
 
@@ -32,26 +14,13 @@ import { ReasonDatasource } from './reason-datasource';
   templateUrl: './reason.component.html',
   styleUrls: ['./reason.component.css'],
   imports: [
-    MatDialogTitle,
-    CdkScrollable,
-    MatDialogContent,
+    CdkScrollableModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatTableModule,
     ReactiveFormsModule,
-    MatTable,
-    MatColumnDef,
-    MatCellDef,
-    MatCell,
-    MatFooterCellDef,
-    MatFooterCell,
-    MatFormField,
-    MatLabel,
-    MatInput,
-    MatRowDef,
-    MatRow,
-    MatFooterRowDef,
-    MatFooterRow,
-    MatDialogActions,
-    MatButton,
-    MatDialogClose,
   ],
 })
 export class ReasonComponent {

bookie/src/app/sales/receive-payment/receive-payment.component.ts

@@ -1,34 +1,12 @@
-import { CdkScrollable } from '@angular/cdk/scrolling';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { CurrencyPipe } from '@angular/common';
 import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatButton } from '@angular/material/button';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
-  MatDialogActions,
-  MatDialogClose,
-} from '@angular/material/dialog';
-import { MatFormField, MatLabel } from '@angular/material/form-field';
-import { MatInput } from '@angular/material/input';
-import {
-  MatTable,
-  MatColumnDef,
-  MatHeaderCellDef,
-  MatHeaderCell,
-  MatCellDef,
-  MatCell,
-  MatFooterCellDef,
-  MatFooterCell,
-  MatHeaderRowDef,
-  MatHeaderRow,
-  MatRowDef,
-  MatRow,
-  MatFooterRowDef,
-  MatFooterRow,
-} from '@angular/material/table';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatTableModule } from '@angular/material/table';
 import { BehaviorSubject } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
@@ -44,31 +22,14 @@ import { ReceivePaymentDatasource } from './receive-payment-datasource';
   templateUrl: './receive-payment.component.html',
   styleUrls: ['./receive-payment.component.css'],
   imports: [
-    MatDialogTitle,
-    CdkScrollable,
-    MatDialogContent,
-    ReactiveFormsModule,
-    MatTable,
-    MatColumnDef,
-    MatHeaderCellDef,
-    MatHeaderCell,
-    MatCellDef,
-    MatCell,
-    MatFooterCellDef,
-    MatFooterCell,
-    MatFormField,
-    MatInput,
-    MatHeaderRowDef,
-    MatHeaderRow,
-    MatRowDef,
-    MatRow,
-    MatFooterRowDef,
-    MatFooterRow,
-    MatLabel,
-    MatDialogActions,
-    MatButton,
-    MatDialogClose,
+    CdkScrollableModule,
     CurrencyPipe,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatTableModule,
+    ReactiveFormsModule,
   ],
 })
 export class ReceivePaymentComponent {

bookie/src/app/sales/running-tables/running-tables.component.ts

@@ -1,7 +1,7 @@
 import { CurrencyPipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { MatCard, MatCardHeader, MatCardTitle, MatCardContent } from '@angular/material/card';
-import { MatRipple } from '@angular/material/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatRippleModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
 import { map } from 'rxjs/operators';
@@ -15,7 +15,7 @@ import { BillNumberComponent } from '../bill-number/bill-number.component';
   selector: 'app-running-tables',
   templateUrl: './running-tables.component.html',
   styleUrls: ['./running-tables.component.sass'],
-  imports: [MatCard, MatCardHeader, MatCardTitle, MatCardContent, MatRipple, CurrencyPipe],
+  imports: [CurrencyPipe, MatCardModule, MatRippleModule],
 })
 export class RunningTablesComponent implements OnInit {
   regimes: Regime[] = [];

bookie/src/app/sales/split-bill/split-bill.component.ts

@@ -1,32 +1,16 @@
-import { CdkScrollable } from '@angular/cdk/scrolling';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { Component, Inject } from '@angular/core';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatButton } from '@angular/material/button';
-import { MatCheckbox } from '@angular/material/checkbox';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
-  MatDialogActions,
-  MatDialogClose,
-} from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-split-bill',
   templateUrl: './split-bill.component.html',
   styleUrls: ['./split-bill.component.css'],
-  imports: [
-    MatDialogTitle,
-    CdkScrollable,
-    MatDialogContent,
-    ReactiveFormsModule,
-    MatCheckbox,
-    MatDialogActions,
-    MatButton,
-    MatDialogClose,
-  ],
+  imports: [CdkScrollableModule, MatButtonModule, MatCheckboxModule, MatDialogModule, ReactiveFormsModule],
 })
 export class SplitBillComponent {
   list: { id: string; name: string; selected: boolean }[] = [];

bookie/src/app/sales/tables-dialog/tables-dialog.component.ts

@@ -1,17 +1,10 @@
-import { CdkScrollable } from '@angular/cdk/scrolling';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { CurrencyPipe } from '@angular/common';
 import { Component, Inject } from '@angular/core';
-import { MatButton } from '@angular/material/button';
-import { MatCard } from '@angular/material/card';
-import { MatRipple } from '@angular/material/core';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
-  MatDialogActions,
-  MatDialogClose,
-} from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatRippleModule } from '@angular/material/core';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
 
 import { Table } from '../../core/table';
@@ -20,17 +13,7 @@ import { Table } from '../../core/table';
   selector: 'app-tables-dialog',
   templateUrl: './tables-dialog.component.html',
   styleUrls: ['./tables-dialog.component.sass'],
-  imports: [
-    MatDialogTitle,
-    CdkScrollable,
-    MatDialogContent,
-    MatCard,
-    MatRipple,
-    MatDialogActions,
-    MatButton,
-    MatDialogClose,
-    CurrencyPipe,
-  ],
+  imports: [CdkScrollableModule, CurrencyPipe, MatButtonModule, MatCardModule, MatDialogModule, MatRippleModule],
 })
 export class TablesDialogComponent {
   list: Table[] = [];