@colijnit/transaction 255.1.38 → 255.1.39

package/lib/component/delivery-planning/service/delivery-planning.service.d.ts

@@ -16,6 +16,7 @@ import { RelationListObject } from "@colijnit/transactionapi/build/model/relatio
 import { UserGroup } from "@colijnit/transactionapi/build/model/user-group.bo";
 import { DeliveryPlanningOverviewTileComponent } from "../../delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/delivery-planning-overview-tile.component";
 import { DeliveryPlanningTileModes } from "../../../enum/delivery-planning-tile-modes.enum";
+import { Subject } from "rxjs";
 export declare class DeliveryPlanningService {
     private _transaction;
     private _dragging;
@@ -33,7 +34,9 @@ export declare class DeliveryPlanningService {
     currentPlanningMode: DeliveryPlanningModes;
     currentPlanning: Planning;
     currentStartDate: Date;
+    currentTransId: number;
     linesPlanOrder: PlanOrder;
+    availabilityCheckEvent: Subject<number>;
     get dragging(): boolean;
     get planTransportWeek(): PlanningTransportWeek[];
     get deliveryMethods(): DeliveryMethod[];
@@ -56,4 +59,5 @@ export declare class DeliveryPlanningService {
     addHours(date: Date, hours: number): Date;
     queryListTile(transportId: number): DeliveryPlanningOverviewTileComponent;
     getPlanningTransportWeek(): Promise<any[]>;
+    totalAssemblyTime(planOrder: PlanOrder): number;
 }

package/lib/component/delivery-planning/style/_layout.scss

@@ -1,12 +1,29 @@
 @include export-module('cc-delivery-planning-layout') {
   @import "../../delivery-planning-main/style/material";
   .co-delivery-planning {
+    position: relative;
     * {
       font-family: $font-family;
     }
     .row {
       display: flex;
       flex-direction: row;
+      .wrapper {
+        .delivery-main-wrapper {
+          .co-delivery-planning-overview {
+            .delivery-overview-wrapper {
+              .tile-view-modes {
+                top: 30px;
+                right: 60px;
+                .co-icon {
+                  width: 35px;
+                  height: 35px;
+                }
+              }
+            }
+          }
+        }
+      }
     }
     .co-delivery-planning-main {
       width: 100%;
@@ -14,7 +31,6 @@
         gap: 2em;
         .transactions-wrapper {
           .block {
-
             height: 1200px
           }
         }
@@ -74,6 +90,11 @@
       .co-delivery-planning-overview {
         .delivery-overview-wrapper {
           width: 100%;
+          .tile-view-modes {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+          }
           .block {
             flex: 1;
             margin: 1em;

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-popup/delivery-planning-overview-popup.component.d.ts

@@ -10,22 +10,25 @@ import { DeliveryPlanningService } from "../../../../../delivery-planning/servic
 export declare class DeliveryPlanningOverviewPopupComponent implements OnDestroy {
     iconCacheService: IconCacheService;
     private _transaction;
-    private _deliveryPlanningService;
+    deliveryPlanningService: DeliveryPlanningService;
+    private _transportWeekDay;
     icons: typeof Icon;
     planOrder: PlanOrder;
     transaction: TransactionInfoResponse;
-    transportDay: PlanningTransportWeekDay;
+    set transportDay(transportWeekDay: PlanningTransportWeekDay);
+    get transportDay(): PlanningTransportWeekDay;
     week: PlanningTransportWeek;
     closeEvent: EventEmitter<void>;
     onSucceededPlanAction: EventEmitter<[PlanOrder, PlanningTransportWeekDay, PlanningTransportWeek]>;
     showClass(): boolean;
-    constructor(iconCacheService: IconCacheService, _transaction: TransactionService, _deliveryPlanningService: DeliveryPlanningService);
+    constructor(iconCacheService: IconCacheService, _transaction: TransactionService, deliveryPlanningService: DeliveryPlanningService);
     ngOnDestroy(): void;
-    totalAssemblyTime(planOrder: PlanOrder): number;
+    impactTime(): number;
     closePopup(): void;
     handleCommitClick(): void;
     startTimeForOrder(): Date;
     endTimeForOrder(): Date;
-    handleStartTimeChange(date: Date): void;
-    handleEndTimeChange(date: Date): void;
+    handleStartTimeChange(timeString: string): void;
+    handleEndTimeChange(timeString: string): void;
+    handleInitialTimePlanning(transportWeekDay: PlanningTransportWeekDay): void;
 }

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/component/delivery-planning-overview-tile-line/delivery-planning-overview-tile-line.component.d.ts

@@ -8,11 +8,14 @@ export declare class DeliveryPlanningOverviewTileLineComponent {
     readonly icons: typeof Icon;
     expanded: boolean;
     linesActive: boolean;
+    orderLines: boolean;
     order: PlanOrder;
+    isActive: boolean;
     deleteLineEvent: EventEmitter<PlanOrder>;
     showClass(): boolean;
     constructor(iconCacheService: IconCacheService);
     handleDeleteLineClick(order: PlanOrder): void;
     setLinesActive(): void;
+    showOrderLines(event: Event): void;
     getPlannedLines(lines: PlanOrderLine[]): PlanOrderLine[];
 }

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/component/delivery-planning-overview-tile-line/style/_layout.scss

@@ -1,7 +1,6 @@
 @include export-module('cc-delivery-planning-overview-tile-line-layout') {
   .co-delivery-planning-overview-tile-line {
     display: flex;
-    border: 1px solid #f8f8fa;
     border-radius: 3px;
     .planning-line-wrapper {
       width: 100%;
@@ -10,14 +9,17 @@
       justify-content: space-between;
       position: relative;
       &.active-lines {
-        &:before {
-          content: '';
-          width: 4px;
-          height: 100%;
-          position: absolute;
-          left: 0;
-          top: 0;
-          background: #1a73e8;
+        .order-line-list-wrapper {
+          position: relative;
+          &:before {
+            content: '';
+            width: 4px;
+            height: 100%;
+            position: absolute;
+            left: 4px;
+            top: 0;
+            background: #1a73e8;
+          }
         }
       }
     }
@@ -38,6 +40,11 @@
       }
       .planning-line-actions {
         display: flex;
+        co-icon {
+          width: 12px;
+          height: 12px;
+          cursor: pointer;
+        }
       }
       .planning-line-extend {
         co-icon {
@@ -46,6 +53,15 @@
           cursor: pointer;
         }
       }
+      .planning-order {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        .co-icon {
+          width: 12px;
+          height: 12px;
+        }
+      }
     }
     .order-line-list-wrapper {
       animation: activeIn 0.5s forwards;
@@ -54,7 +70,6 @@
       align-items: flex-start;
       gap: 3px;
       padding: 20px 20px;
-      background: #f8f8fa;
       .order-lines {
         display: flex;
         gap: 10px;

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/delivery-planning-overview-tile.component.d.ts

@@ -21,12 +21,17 @@ export declare class DeliveryPlanningOverviewTileComponent implements OnInit {
     getTransportOrdersEvent: EventEmitter<PlanningTransportWeekDay>;
     updatePlanningTransportWeek: EventEmitter<void>;
     openSettingsDialogEvent: EventEmitter<PlanningTransportWeekDay>;
+    calendarPlanEvent: EventEmitter<{
+        currentHour: string;
+        data: string;
+    }>;
     get tileMode(): DeliveryPlanningTileModes;
     expanded: boolean;
     showClass(): boolean;
     constructor(_datePipe: DatePipe, _deliveryPlanningService: DeliveryPlanningService, iconCacheService: IconCacheService);
     ngOnInit(): Promise<void>;
     drop(event: CdkDragDrop<string[]>): void;
+    handleDrop(event: DragEvent): void;
     formattedDate(date: Date): string;
     expandedChange(): void;
     handleDeleteLineClick(order: PlanOrder): void;
@@ -34,4 +39,8 @@ export declare class DeliveryPlanningOverviewTileComponent implements OnInit {
     onCustomDragStart(event: DragEvent, obj: PlanOrder): void;
     openSettingsDialog(): void;
     handleTimeChangeEvent(obj: Object): void;
+    handleCalendarPlanEvent(data: {
+        currentHour: string;
+        data: string;
+    }): void;
 }

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/style/_layout.scss

@@ -103,5 +103,18 @@
         }
       }
     }
+    .co-hour-scheduling {
+      padding: 15px 0;
+      .time-block {
+        .object-half {
+          padding: 0;
+          .co-delivery-planning-overview-tile-line {
+            .planning-line-wrapper {
+              padding: 5px;
+            }
+          }
+        }
+      }
+    }
   }
 }

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile-settings-popup/delivery-planning-overview-tile-settings-popup.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, OnInit } from "@angular/core";
+import { EventEmitter, OnDestroy, OnInit } from "@angular/core";
 import { PlanningTransportWeekDay } from "@colijnit/transactionapi/build/model/planning-transport-week-day.bo";
 import { District } from "@colijnit/transactionapi/build/model/district.bo";
 import { DeliveryMethod } from "@colijnit/transactionapi/build/model/delivery-method.bo";
@@ -8,22 +8,31 @@ import { UserGroup } from "@colijnit/transactionapi/build/model/user-group.bo";
 import { DeliveryPlanningService } from "../../../../../delivery-planning/service/delivery-planning.service";
 import { Icon } from "../../../../../../enum/icon.enum";
 import { IconCacheService } from "../../../../../../service/icon-cache.service";
-export declare class DeliveryPlanningOverviewTileSettingsPopupComponent implements OnInit {
+import { TransactionConnectorService } from "../../../../../../service/transaction-connector.service";
+import { PlanOrder } from "@colijnit/transactionapi/build/model/plan-order.bo";
+export declare class DeliveryPlanningOverviewTileSettingsPopupComponent implements OnInit, OnDestroy {
     private _deliveryPlanningService;
     iconCacheService: IconCacheService;
+    private _transaction;
     readonly icons: typeof Icon;
     settingsChanged: boolean;
+    private _subs;
     transportDay: PlanningTransportWeekDay;
     closeEvent: EventEmitter<void>;
     onSaveAction: EventEmitter<boolean>;
+    availabilityChecked: EventEmitter<{
+        transportDay: PlanningTransportWeekDay;
+        available: boolean;
+    }>;
     get districts(): District[];
     get deliveryMethods(): DeliveryMethod[];
     get employees(): RelationListObject[];
     get skills(): Skill[];
     get userGroups(): UserGroup[];
     showClass(): boolean;
-    constructor(_deliveryPlanningService: DeliveryPlanningService, iconCacheService: IconCacheService);
+    constructor(_deliveryPlanningService: DeliveryPlanningService, iconCacheService: IconCacheService, _transaction: TransactionConnectorService);
     ngOnInit(): void;
+    ngOnDestroy(): void;
     districtsForTransportDay(transportDay: PlanningTransportWeekDay): District[];
     deliveryMethodsForTransportDay(transportDay: PlanningTransportWeekDay): DeliveryMethod[];
     skillsForTransportDay(transportDay: PlanningTransportWeekDay): Skill[];
@@ -33,4 +42,6 @@ export declare class DeliveryPlanningOverviewTileSettingsPopupComponent implemen
     handleDistrictsChange(event: District[]): void;
     closePopup(): void;
     handleCommitClick(): void;
+    handleAvailabilityChecked(transId: number): Promise<void>;
+    getOrderLinesPlanned(planOrder: PlanOrder): Promise<void>;
 }

package/lib/component/delivery-planning-main/component/delivery-planning-overview/delivery-planning-overview.component.d.ts

@@ -24,6 +24,10 @@ export declare class DeliveryPlanningOverviewComponent implements AfterViewCheck
     readonly icons: typeof Icon;
     readonly tileModes: typeof DeliveryPlanningTileModes;
     deliveryPlanningViewModes: typeof DeliveryPlanningViewModes;
+    availability: {
+        transportDay: PlanningTransportWeekDay;
+        available: boolean;
+    }[];
     set tiles(tiles: QueryList<DeliveryPlanningOverviewTileComponent>);
     rowContainer: any;
     columnElem: any;
@@ -67,4 +71,16 @@ export declare class DeliveryPlanningOverviewComponent implements AfterViewCheck
     handlePopupPlanEvent(event: [PlanOrder, PlanningTransportWeekDay, PlanningTransportWeek]): Promise<void>;
     handleSettingsSave(changed: boolean): void;
     openSettingsDialog(transportDay: PlanningTransportWeekDay): void;
+    handleCalendarPlanEvent(data: {
+        currentHour: string;
+        data: string;
+    }, transportWeekDay: PlanningTransportWeekDay, week: PlanningTransportWeek): Promise<void>;
+    calculateStartTime(transportWeekDay: PlanningTransportWeekDay, currentHour: string): Date;
+    calculateEndTime(startDate: Date, currentHour: string, planOrder: PlanOrder): Date;
+    openPlanningPopup(planOrder: PlanOrder, transportDay: PlanningTransportWeekDay, week: PlanningTransportWeek): void;
+    handleAvailabilityChecked(value: {
+        transportDay: PlanningTransportWeekDay;
+        available: boolean;
+    }): void;
+    checkAvailable(transportDay: PlanningTransportWeekDay): boolean;
 }

package/lib/component/delivery-planning-main/component/delivery-planning-overview/style/_layout.scss

@@ -49,7 +49,7 @@
     }
     .sc-agenda {
       .month-description {
-        top: -15px;
+        top: -30px;
       }
     }
   }
@@ -59,14 +59,17 @@
   }
 
   .tile-view-modes{
-    gap: 1em;
-    padding: 0.5em;
-
+    right: 10px;
+    gap: 5px;
     co-icon {
       fill: black;
-
+      cursor: pointer;
+      padding: 5px;
+      width: 30px;
+      height: 30px;
       &.active {
-        fill: $color-action;
+        background: $color-action;
+        fill: white;
       }
     }
   }

package/lib/component/delivery-planning-main/style/_layout.scss

@@ -5,7 +5,6 @@
       .co-delivery-planning-main {
         .wrapper {
           .transactions-wrapper {
-
           }
         }
       }

package/lib/component/transaction/transaction.component.d.ts

@@ -35,6 +35,7 @@ export declare class TransactionComponent implements OnChanges {
     cancelIconData: SafeHtml;
     showSaveCancelLabels: boolean;
     saveCancelMovable: boolean;
+    transactionPlanning: boolean;
     showClass(): boolean;
     checkTransaction(): any;
     checkRollBack(): void;

package/lib/component/transaction-card/transaction-card-planning/transaction-card-planning.component.d.ts

@@ -1,11 +1,30 @@
+import { ChangeDetectorRef } from '@angular/core';
 import { TransactionBaseComponent } from '../../core/base/transaction-base.component';
 import { TransactionLineActionButtonsComponent } from '../../transaction-line-action-buttons/transaction-line-action-buttons.component';
 import { TransactionLineInfo } from '@colijnit/transactionapi/build/model/transaction-line-info.bo';
 import { StatusBarCfgNames } from '../../../interface/status-bar-cfg-names.interface';
 import { LineDiscountCfgNames } from "../../../interface/line-discount-cfg-names.interface";
+import { DeliveryPlanningService } from "../../delivery-planning/service/delivery-planning.service";
+import { TransactionEventService } from "../../../service/transaction-event.service";
+import { IconCacheService } from "../../../service/icon-cache.service";
+import { TransactionScreenConfigurationService } from "../../../service/transaction-screen-configuration.service";
+import { OrderLineSetService } from "../../../service/order-line-set-service";
+import { TransactionImageService } from "../../../service/transaction-image.service";
+import { DictionaryService } from "../../../service/dictionary.service";
+import { TransactionService } from "../../../service/transaction.service";
 export declare class TransactionCardPlanningComponent extends TransactionBaseComponent {
+    private _deliveryPlanningService;
+    transactionEventService: TransactionEventService;
+    iconCacheService: IconCacheService;
+    screenConfigService: TransactionScreenConfigurationService;
+    orderLineSetService: OrderLineSetService;
+    protected imageService: TransactionImageService;
+    protected dictionaryService: DictionaryService;
+    protected transactionService: TransactionService;
+    protected changeDetector: ChangeDetectorRef;
     transactionLineActionButtons: TransactionLineActionButtonsComponent;
     showClass(): boolean;
+    constructor(_deliveryPlanningService: DeliveryPlanningService, transactionEventService: TransactionEventService, iconCacheService: IconCacheService, screenConfigService: TransactionScreenConfigurationService, orderLineSetService: OrderLineSetService, imageService: TransactionImageService, dictionaryService: DictionaryService, transactionService: TransactionService, changeDetector: ChangeDetectorRef);
     expanded: boolean;
     handleShowSidePanel(line: TransactionLineInfo): void;
     statusBarConfigNames: StatusBarCfgNames;

package/lib/component/transaction-internal/style/_layout.scss

@@ -114,6 +114,12 @@
       @media(max-width: 900px) {
         grid-template-columns: 100%;
       }
+      &.planning-cards {
+        grid-template-columns: 50% 50%;
+        @media(max-width: 900px) {
+          grid-template-columns: 100%;
+        }
+      }
     }
     .transaction-lines-wrapper {
       padding: $tp-transaction-transaction-lines-wrapper-padding;

package/lib/component/transaction-internal/transaction-internal.component.d.ts

@@ -55,6 +55,7 @@ export declare class TransactionInternalComponent implements OnDestroy {
     get transaction(): TransactionInfoResponse;
     showHeader: boolean;
     showViewModeButtons: boolean;
+    transactionPlanning: boolean;
     relationChange: EventEmitter<RelationAnyType>;
     showQuickAccess: boolean;
     showButtonBar: boolean;

package/lib/component/transaction-line-side-panel-planning/style/_layout.scss

@@ -5,30 +5,24 @@
   co-transaction-line-side-panel-planning {
     .wrapper {
       padding: 1em;
-
       .delivery-method-wrapper {
         .methods-wrapper {
           padding: 1em;
           display: flex;
           flex-direction: row;
           justify-content: space-between;
-
           .method {
             &.selected {
               border: 2px solid $planning-lsp-method-selected-color;
             }
-
             padding: 0.5em 1em;
             height: 100px;
             display: flex;
             flex-direction: row;
-
             .radio-wrapper {
-
               display: flex;
               justify-content: center;
               align-items: center;
-
               co-input-radio-button {
                 .outer-circle {
                   border-color: $planning-lsp-radio-color;
@@ -39,7 +33,6 @@
                 }
               }
             }
-
             .body-wrapper {
               width: 75%;
               display: flex;
@@ -55,13 +48,11 @@
           }
         }
       }
-
       .send-button-wrapper {
         display: flex;
         width: 100%;
         justify-content: start;
         padding: 1em;
-
         co-button {
           display: flex;
           justify-content: center;
@@ -71,14 +62,11 @@
           color: $planning-lsp-send-button-text-color;
           background-color: $planning-lsp-send-button-color;
         }
-
       }
-
       .header-info-wrapper {
         display: flex;
         flex-direction: row;
         gap: 1em;
-
         .block {
           padding: 1em;
           display: flex;
@@ -86,36 +74,51 @@
           justify-content: center;
           align-items: center;
           gap: 0.5em;
-
           .header {
             text-align: center;
             color: $planning-lsp-header-text-color;
           }
-
           .text {
             text-align: center;
           }
         }
       }
-
       .track-and-trace-header {
         padding: 1em;
         font-weight: bold;
         font-size: 12px;
       }
-
       .track-and-trace-body-wrapper {
         .code-wrapper {
           display: flex;
           flex-direction: row;
           gap: 1em;
         }
-
         display: flex;
         gap: 0.5em;
         flex-direction: column;
         padding: 1em;
       }
+      &.line-side-planning {
+        position: relative;
+        .co-delivery-planning {
+          .co-delivery-planning-main {
+            .co-delivery-planning-overview {
+              .delivery-overview-wrapper {
+                position: unset;
+                .tile-view-modes {
+                  right: 30px;
+                  top: 30px;
+                  .co-icon {
+                    width: 30px;
+                    height: 30px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
 }

package/lib/component/transaction-line-side-panel-sales/transaction-line-side-panel-sales-reservation/transaction-line-side-panel-sales-reservation/style/_layout.scss

@@ -1,14 +1,26 @@
 @include export-module('cc-transaction-line-side-panel-sales-reservation-layout') {
   .co-transaction-line-side-panel-sales-reservation {
-
     .wrapper{
       display: flex;
       width: 100%;
       height: 100%;
-      justify-content: center;
-      margin: 2em;
       flex-direction: column;
-      gap: 1em;
+      gap: 15px;
+      padding: 15px 16px 15px 30px;
+    }
+    .save-cancel-wrapper {
+      position: sticky;
+      bottom: 0;
+      padding: 30px 0;
+      background: #f8f8fa;
+    }
+    .reservation-title {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 14px;
+      font-weight: bold;
+      margin-bottom: 5px;
     }
   }
 }

package/lib/component/transaction-line-side-panel-sales/transaction-line-side-panel-sales-reservation/transaction-line-side-panel-sales-reservation/transaction-line-side-panel-sales-reservation.component.d.ts

@@ -3,12 +3,16 @@ import { PurchaseReservationPurchaseLine } from "@colijnit/transactionapi/build/
 import { PurchaseReservationService } from "../../../../service/purchase-reservation.service";
 import { TransactionService } from "../../../../service/transaction.service";
 import { TransactionEventService } from "../../../../service/transaction-event.service";
+import { IconCacheService } from "../../../../service/icon-cache.service";
+import { Icon } from "../../../../enum/icon.enum";
 export declare class TransactionLineSidePanelSalesReservationComponent implements OnInit {
     private _purchaseReservationService;
     private _transactionService;
     private _transactionEventService;
+    iconCacheService: IconCacheService;
+    readonly icons: typeof Icon;
     showClass(): boolean;
-    constructor(_purchaseReservationService: PurchaseReservationService, _transactionService: TransactionService, _transactionEventService: TransactionEventService);
+    constructor(_purchaseReservationService: PurchaseReservationService, _transactionService: TransactionService, _transactionEventService: TransactionEventService, iconCacheService: IconCacheService);
     reservationOrderLines: PurchaseReservationPurchaseLine[];
     ngOnInit(): void;
     processReservation(): Promise<void>;

package/lib/component/transaction-search/transaction-search-tile/transaction-purchase-reservation-order-tile/style/_layout.scss

@@ -1,48 +1,54 @@
 @include export-module('cc-transaction-purchase-reservation-order-tile-layout') {
   .co-transaction-purchase-reservation-order-tile {
-
+    width: 100%;
+    height: 200px;
     .column {
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
+      gap: 10px;
+      justify-content: space-between;
     }
-
-    width: 400px;
-    height: 200px;
-
     .transaction-tile-wrapper {
-      padding: 1em;
+      padding: 15px 20px;
       height: 100%;
       width: 100%;
-      border: 1px solid rgba(black, 0.1);
-      border-radius: 8px;
+      box-shadow: 0 2px 4px 0 #0000005c;
+      border-left: 4px solid #45b8bf;
+      border-radius: 5px;
       display: flex;
       flex-direction: column;
       .tile {
         height: 100%;
         width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
         .tile-header {
           display: flex;
           flex-direction: row;
+          justify-content: space-between;
           gap: 0.5em;
         }
-
         .tile-upper-right{
           display: flex;
-          flex-direction: row;
-          gap: 1em;
-
-          .title{
-            color: #8083A3;
-          }
-
+          flex-direction: column;
+          gap: 5px;
         }
-
         .tile-footer {
-          align-items: flex-end;
+          align-items: center;
           display: flex;
-          justify-content: space-evenly;
+          justify-content: space-between;
           flex-direction: row;
           gap: 0.5em;
+          .tile-bottom-left {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            .co-icon {
+              width: 22px;
+              height: 22px;
+            }
+          }
         }
 
         .header {