@flower-city-online/itinerary-lib 0.0.30 → 0.0.32

package/src/lib/itinerary-app/modules/itineraries/components/app-sidebar-desktop/app-sidebar-desktop.component.html

@@ -0,0 +1,64 @@
+  <aside class="w-[260px] min-h-screen text-white p-4 flex flex-col gap-10 space-y-6 font-semibold hidden md:block">
+  <!-- Header -->
+  <ng-template #suffix>
+    <span class="discard"><img [ngSrc]="ICONS['search']" height="17" width="18" /></span>
+  </ng-template>
+  <section class="flex justify-between">
+    <lib-icon-btn (click)="back()" class="checkmark-icon-button">
+      <img [ngSrc]="ICONS['back']" height="17" width="18" />
+    </lib-icon-btn>
+    <h4 class="font-[Calistoga] text-[24px]">{{ "SIDEBAR.ITINERARIES" | translate }}</h4>
+    <lib-icon-btn  (click)="openSearch()" class="checkmark-icon-button">
+      <img [ngSrc]="ICONS['search']" height="17" width="18" />
+    </lib-icon-btn>
+  </section>
+
+  <section class="flex flex-col gap-10">
+    <!-- Explore Section -->
+    <div class="flex flex-col justify-center">
+      <button class="m-auto w-[100px] text-center font-[Calistoga] text-[24px] font-normal" (click)="openExplorePage()">{{ "SIDEBAR.EXPLORE" | translate }}</button>    
+      <h2 *ngIf="currentUrl === '/itineraries/explore'" class="m-auto w-[90px] mt-2 text-center underline-custom"></h2>    
+      <div class="flex justify-center mt-6">
+          <div
+              (click)="openCommentsSearch()"
+              class="flex items-center justify-center rounded-full cursor-pointer"
+              style="
+                  width: 40px;
+                  height: 40px;
+                  background: rgba(39, 36, 44, 1);
+                  box-shadow:
+                  -6.4px -6.4px 20.49px -3.84px rgba(203, 199, 209, 0.25),
+                  14.08px 12.8px 34.57px 3.2px rgba(17, 16, 20, 0.65);
+              "
+              
+              >
+              <img [ngSrc]="ICONS['desktopSearch']" height="17" width="18" class="w-5 h-5" />
+              </div>
+      </div>
+      <div class="flex justify-center mt-6">
+          <button class="custom-button font-[Gilroy] font-normal text-[18px]">{{"SIDEBAR.FEATURED" | translate}}</button>
+      </div>
+      <div class="flex justify-center mt-6">
+          <button class="custom-button font-[Gilroy] font-normal text-[18px]">{{"SIDEBAR.HOT" | translate}}</button>
+      </div>
+      <div class="flex justify-center mt-6">
+          <button class="custom-button [Gilroy] font-normal text-[18px]">{{"SIDEBAR.BEST" | translate}}</button>
+      </div>
+      <div class="flex justify-center mt-6">
+          <button class="custom-button [Gilroy] font-normal text-[18px]">{{"SIDEBAR.NEW" | translate}}</button>
+      </div>
+    </div>
+
+    <!-- Builder Section -->
+    <div class="flex flex-col justify-center">
+      <button class="font-[Calistoga] text-[24px] font-normal" (click)="openBuilderPage()">{{"SIDEBAR.BUILDER" | translate}}</button>
+      <h2 *ngIf="currentUrl === '/itineraries/builder'" class="m-auto w-[90px] mt-2 text-center underline-custom"></h2> 
+    </div>
+
+    <!-- Builder Section -->
+    <div class="flex flex-col justify-center">
+      <button class="font-[Calistoga] text-[24px] font-normal" (click)="openFavoritesPage()">{{"SIDEBAR.FAVOURITE" | translate }}</button>
+      <h2 *ngIf="currentUrl === '/itineraries/favorites'" class="m-auto w-[90px] mt-2 text-center underline-custom"></h2> 
+    </div>
+  </section>
+</aside>

package/src/lib/itinerary-app/modules/itineraries/components/app-sidebar-desktop/app-sidebar-desktop.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppSidebarDesktopComponent } from './app-sidebar-desktop.component';
+
+describe('AppSidebarDesktopComponent', () => {
+  let component: AppSidebarDesktopComponent;
+  let fixture: ComponentFixture<AppSidebarDesktopComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AppSidebarDesktopComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AppSidebarDesktopComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/itineraries/components/app-sidebar-desktop/app-sidebar-desktop.component.ts

@@ -0,0 +1,71 @@
+import { Component } from '@angular/core';
+import { Iicon } from '../../../../_interface/icon';
+import { ICONS } from '../../../../_constants/constants';
+import { NavigationEnd, Router } from '@angular/router';
+import { ItinerariesRoutesEnum } from '../../../../_enums/ItenariesRoutes.enum';
+import { filter } from 'rxjs';
+import { Location } from "@angular/common";
+
+@Component({
+    selector: 'lib-app-sidebar-desktop',
+    templateUrl: './app-sidebar-desktop.component.html',
+    styleUrl: './app-sidebar-desktop.component.css',
+    standalone: false
+})
+export class AppSidebarDesktopComponent {
+  ICONS: Iicon = ICONS;
+  currentUrl = '';
+  back() {
+    this.location.back();
+  }
+
+  constructor(
+    private router: Router,
+    private location: Location
+  ) {
+    this.router.events
+    .pipe(
+      filter(
+        (event): event is NavigationEnd => event instanceof NavigationEnd,
+      ),
+    )
+    .subscribe((event: NavigationEnd) => {
+      this.currentUrl = event.urlAfterRedirects;
+    });
+  }
+
+  openCommentsSearch() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.COMMENT_SEARCH,
+    ]);
+    
+  }
+
+  openSearch() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.SEARCH,
+    ]);
+  }
+
+  openExplorePage() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.EXPLORE,
+    ])
+  }
+
+  openBuilderPage() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.BUILDER,
+    ]);
+  }
+
+  openFavoritesPage() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.FAVORITES,
+    ]);
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/components/comment-filter-menu/comment-filter-menu.component.html

@@ -0,0 +1,11 @@
+<div [class]="cssClass + ' filter-menu py-3'">
+  <lib-selectable
+    class="test"
+    (click)="changeSelection()"
+    (selectionchange)="changeSelection()"
+    [formControl]="filterControl"
+    [options]="options"
+    [singleSelectionOnly]="true"
+  >
+  </lib-selectable>
+</div>

package/src/lib/itinerary-app/modules/itineraries/components/comment-filter-menu/comment-filter-menu.component.scss

@@ -0,0 +1,39 @@
+@use "../../../../_styles/colors" as *;
+
+$box-shadow-primary: 9.026px 8.205px 22.153px 2.051px rgba(17, 16, 20, 0.65);
+$box-shadow-secondary: -4.102px -4.102px 13.128px -2.462px
+  rgba(203, 199, 209, 0.25);
+
+.filter-menu {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.checkmark-icon-btn img {
+  margin-left: 1.6px;
+}
+:root {
+  --lib-list-button-height: 30px
+}
+::ng-deep .selectable-container .btn-selectable.button-solid {
+  --padding-start: 13px;
+  --padding-end: 13px;
+  --padding-top: 7px;
+  --padding-bottom: 7px;
+  font-size: 11.49px;
+  font-weight: 400;
+  line-height: 160%;
+  color: var(--ion-text-color-secondary);
+  margin: 0;
+  letter-spacing: 0px;
+  --background: var(--cyrano-dark-color);
+  --box-shadow: none;
+  border-radius: 34px;
+  min-height: 30px;
+  height: 30px;
+}
+
+::ng-deep .selectable-container .btn-selectable.button-solid.selected {
+  --background: linear-gradient(94.44deg, #FE3C72 1.26%, #E15561 100%);
+}

package/src/lib/itinerary-app/modules/itineraries/components/comment-filter-menu/comment-filter-menu.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentFilterMenuComponent } from './comment-filter-menu.component';
+
+describe('CommentFilterMenuComponent', () => {
+  let component: CommentFilterMenuComponent;
+  let fixture: ComponentFixture<CommentFilterMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CommentFilterMenuComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CommentFilterMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/itineraries/components/comment-filter-menu/comment-filter-menu.component.ts

@@ -0,0 +1,45 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { IFilterMenuOptions } from '../../../../_interface/filterMenuOptions';
+import { Iicon } from '../../../../_interface/icon';
+import { ApiService } from '../../../../_services/api.service';
+import { ICONS } from '../../../../_constants/constants';
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'comment-filter-menu',
+    templateUrl: './comment-filter-menu.component.html',
+    styleUrl: './comment-filter-menu.component.scss',
+    standalone: false
+})
+export class CommentFilterMenuComponent implements OnInit {
+  @Input() cssClass!: string;
+  @Output() onFilterClick: EventEmitter<void> = new EventEmitter<void>();
+  ICONS: Iicon = ICONS;
+  options: IFilterMenuOptions[] = [];
+  filterControl = new FormControl();
+  constructor(
+    public apiService: ApiService,
+    private cdr: ChangeDetectorRef,
+  ) { }
+
+  ngOnInit(): void {
+    this.apiService
+      .get('/assets/filterMenuOptionsData.json')
+      .subscribe((data) => {
+        this.options = data as IFilterMenuOptions[];
+        this.cdr.detectChanges();
+        this.filterControl.setValue(this.options[0].value);
+      });
+  }
+
+  changeSelection(): void { }
+  handleFilterClick = (): void => this.onFilterClick.emit();
+}

package/src/lib/itinerary-app/modules/itineraries/components/delete-itineraries/delete-itineraries.component.html

@@ -0,0 +1,28 @@
+  <div class="delete-modal text-center" [formGroup]="deleteForm">
+    <img [ngSrc]="ICONS['delete']" height="46" width="46" class="mx-auto" />
+    
+    <h3 class="font-[Calistoga] mt-5">
+      {{ "SNACKBAR.DELETE_ITINERARY" | translate }}
+    </h3>
+    
+    <p class="text-white mb-2 max-w-[80%] ml-auto mr-auto mt-1 text-[10px]">
+      {{ "ADMIN.GRID.PERMANENT_DELETION" | translate }}
+    </p>
+    
+    <div class="check-box-field flex items-center justify-center gap-2">
+      <lib-dashed-checkbox formControlName="confirmDelete" class="check-box"></lib-dashed-checkbox>
+      <label class="text-[8px]">{{ "ADMIN.GRID.DELETE_ITEM_WARNING" | translate }}</label>
+    </div>
+    <ng-container *ngIf="showErrorMessage">
+      <p class="error-message text-[8px]">{{ "MAIN_ARCHIVES.DELETE_ERROR_MESSAGE" | translate }}</p>
+    </ng-container>
+    
+    <div class="flex justify-center gap-10 mt-5">
+      <button class="custom-flat-button font-[Calistoga]" (click)="closeModal()">
+        {{ "COMMON.KEEP" | translate }}
+      </button>
+      <button class="custom-flat-button-highlighted-font font-[Calistoga]" (click)="deleteItinerary()">
+        {{ "COMMON.DELETE" | translate }}
+      </button>
+    </div>
+  </div>

package/src/lib/itinerary-app/modules/itineraries/components/delete-itineraries/delete-itineraries.component.scss

@@ -0,0 +1,22 @@
+.check-box-field {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 10px;
+  margin-top: 30px;
+}
+
+.check-box-field {
+  span {
+    margin-left: 8px;
+  }
+}
+
+.check-box {
+  height: 20px !important;
+  width: 20px !important;
+}
+
+.error-message {
+  color: #c7472e;
+}

package/src/lib/itinerary-app/modules/itineraries/components/delete-itineraries/delete-itineraries.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeleteItinerariesComponent } from './delete-itineraries.component';
+
+describe('DeleteItinerariesComponent', () => {
+  let component: DeleteItinerariesComponent;
+  let fixture: ComponentFixture<DeleteItinerariesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DeleteItinerariesComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DeleteItinerariesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/itineraries/components/delete-itineraries/delete-itineraries.component.ts

@@ -0,0 +1,50 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { ModalService } from '../../../../_services/modal.service';
+import { Iicon } from '../../../../_interface/icon'; 
+import { ICONS } from '../../../../_constants/constants';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-delete-itineraries',
+    templateUrl: './delete-itineraries.component.html',
+    styleUrl: './delete-itineraries.component.scss',
+    standalone: false
+})
+export class DeleteItinerariesComponent implements OnInit {
+  @Output() deleteItineraryEvent: EventEmitter<string> = new EventEmitter<string>();
+  ICONS: Iicon = ICONS;
+  deleteForm!: FormGroup;
+  showErrorMessage: boolean = false;
+
+  constructor(
+    public modalService: ModalService,
+    private fb: FormBuilder
+  ) {
+    this.deleteForm = this.fb.group({
+      confirmDelete: [false, Validators.required] // initial value unchecked
+    });
+  }
+
+  closeModal(): void {
+    this.modalService.toggleModal = !this.modalService.toggleModal;
+  }
+
+  ngOnInit() {
+    this.deleteForm.valueChanges.subscribe(() => {
+      this.showErrorMessage = false;
+    });
+  }
+
+  onOk(): void {}
+
+
+  deleteItinerary(): void {
+    if(!this.deleteForm.value.confirmDelete) {
+      this.showErrorMessage = true;
+    } else {
+      this.deleteItineraryEvent.emit();
+      this.modalService.toggleModal = false;
+    }
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/components/filter-menu/filter-menu.component.html

@@ -0,0 +1,13 @@
+<div [class]="cssClass + ' filter-menu py-3'">
+  <lib-selectable
+    (click)="changeSelection()"
+    (selectionchange)="changeSelection()"
+    [formControl]="filterControl"
+    [options]="options"
+    [singleSelectionOnly]="true"
+  >
+  </lib-selectable>
+  <lib-icon-btn (click)="handleFilterClick()">
+    <img [ngSrc]="ICONS['filter']" height="15" width="15" />
+  </lib-icon-btn>
+</div>

package/src/lib/itinerary-app/modules/itineraries/components/filter-menu/filter-menu.component.scss

@@ -0,0 +1,16 @@
+@use "../../../../_styles/colors" as *;
+
+$box-shadow-primary: 9.026px 8.205px 22.153px 2.051px rgba(17, 16, 20, 0.65);
+$box-shadow-secondary: -4.102px -4.102px 13.128px -2.462px
+  rgba(203, 199, 209, 0.25);
+
+.filter-menu {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.checkmark-icon-btn img {
+  margin-left: 1.6px;
+}

package/src/lib/itinerary-app/modules/itineraries/components/filter-menu/filter-menu.component.ts

@@ -0,0 +1,45 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';  
+import { IFilterMenuOptions } from '../../../../_interface/filterMenuOptions';
+import { Iicon } from '../../../../_interface/icon';
+import { ApiService } from '../../../../_services/api.service';
+import { ICONS } from '../../../../_constants/constants';
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-filter-menu',
+    templateUrl: './filter-menu.component.html',
+    styleUrl: './filter-menu.component.scss',
+    standalone: false
+})
+export class FilterMenuComponent implements OnInit {
+  @Input() cssClass!: string;
+  @Output() onFilterClick: EventEmitter<void> = new EventEmitter<void>();
+  ICONS: Iicon = ICONS;
+  options: IFilterMenuOptions[] = [];
+  filterControl = new FormControl();
+  constructor(
+    public apiService: ApiService,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.apiService
+      .get('/assets/filterMenuOptionsData.json')
+      .subscribe((data) => {
+        this.options = data as IFilterMenuOptions[];
+        this.cdr.detectChanges();
+        this.filterControl.setValue(this.options[0].value);
+      });
+  }
+
+  changeSelection(): void {}
+  handleFilterClick = (): void => this.onFilterClick.emit();
+}

package/src/lib/itinerary-app/modules/itineraries/components/no-visual-map-filters/no-visual-map-filters.component.css

@@ -0,0 +1,30 @@
+.filter-title {
+    font-size: 16px;
+}
+
+.filters-description {
+    font-size: var(--font-size-medium);
+}
+
+.filter-button {
+    box-shadow: 4.1px 4.1px 8.2px 0px #00000052 inset;
+    box-shadow: -2.46px -2.46px 3.28px 0px #FFFFFF1A inset;
+    padding: 6.56px 13.13px;
+    border-radius: 27px;
+}
+
+.custom-select {
+    box-shadow: 4.1px 4.1px 8.2px 0px #00000052 inset;
+    box-shadow: -2.46px -2.46px 3.28px 0px #FFFFFF1A inset;
+    background: transparent;
+}
+
+.selectedbutton {
+    background: linear-gradient(94.44deg, #FE3C72 1.26%, #E15561 100%);
+}
+
+.filter-footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}

package/src/lib/itinerary-app/modules/itineraries/components/no-visual-map-filters/no-visual-map-filters.component.html

@@ -0,0 +1,104 @@
+<div>
+  <!-- Header -->
+  <div class="header-main-bar px-5 pt-5 pb-5 mr-3 flex items-center justify-between">
+    <lib-icon-btn class="checkmark-icon-button" (click)="firstButtonClick()">
+      <img [ngSrc]="ICONS['back']" height="12" width="13" />
+    </lib-icon-btn>
+    <div class="flex">
+      <h4 class="mr-1 filter-title font-[Calistoga]">
+        {{ "ITINERARY.MAP_FILTER" | translate }}
+      </h4>
+    </div>
+    <div></div>
+  </div>
+
+  <!-- Body -->
+  <div class="px-5 pt-5 pb-5 mr-3">
+    <div class="filters-description text-center">
+      Create and apply custom advanced filters to the map or select popular preset filters.
+    </div>
+
+    <!-- Preset Filter Buttons -->
+    <div class="preset-filters w-full pt-4 mt-4">
+      <button
+        class="filter-button font-[Gilroy] ml-2"
+        *ngFor="let preset of presetFilters"
+        (click)="applyPreset(preset)"
+        [class.selectedbutton]="selectedPresets?.includes(preset.name)"
+      >
+        {{ preset.name }}
+      </button>
+    </div>
+
+    <h4 class="font-[Gilroy] font-semibold mt-8 mb-2">Filters</h4>
+
+    <!-- Custom Filter Selectors -->
+    <div class="flex justify-left gap-10">
+      <!-- Field Dropdown -->
+      <div class="relative w-64">
+        <select
+          class="custom-select block w-full px-4 py-2 pr-10 text-lg border border-transparent rounded-full appearance-none transition-all duration-200 font-[Gilroy]"
+          [(ngModel)]="selectedField"
+          (change)="onFieldChange()"
+        >
+          <option value="" disabled selected>Field</option>
+          <option *ngFor="let field of filterFields" [value]="field">{{ field }}</option>
+        </select>
+        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
+          <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" fill="#FE3C72">
+            <path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </div>
+
+      <!-- Condition Dropdown -->
+      <div class="relative w-64">
+        <select
+          class="custom-select block w-full px-4 py-2 pr-10 text-lg border border-transparent rounded-full appearance-none transition-all duration-200 font-[Gilroy]"
+          [(ngModel)]="selectedCondition"
+        >
+          <option value="" disabled selected>Condition</option>
+          <option *ngFor="let cond of filterConditions[selectedField]" [value]="cond">{{ cond }}</option>
+        </select>
+        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
+          <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" fill="#FE3C72">
+            <path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-3 mt-3" *ngIf="conditionsArray?.length">
+      <div class="filter-container flex justify-between" *ngFor="let condition of conditionsArray; let i = index; ">
+        <button
+          class="filter-button font-[Gilroy] ml-2 selectedbutton"
+        >
+          {{ condition.name ? condition.name + '|' : '' }} {{ condition.field }} and {{ condition.condition }}
+        </button>
+
+        <img (click)="removeCondition(i)" [ngSrc]="ICONS['deletePink']" height="15" width="16" />
+      </div>
+    </div>
+
+    <!-- Add Filter Button -->
+    <div class="flex gap-2 mt-4">
+      <img src="assets/icons/plus.svg" />
+      <span (click)="applyCustomFilter()">Add Filter</span>
+    </div>
+  </div>
+</div>
+<div class="filter-footer">
+  <lib-footer-shared
+    (continueButtonClick)="applyFilter()"
+    [canContinue]="true"
+    continueButtonText="Apply"
+  ></lib-footer-shared>
+</div>

package/src/lib/itinerary-app/modules/itineraries/components/no-visual-map-filters/no-visual-map-filters.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NoVisualMapFiltersComponent } from './no-visual-map-filters.component';
+
+describe('NoVisualMapFiltersComponent', () => {
+  let component: NoVisualMapFiltersComponent;
+  let fixture: ComponentFixture<NoVisualMapFiltersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NoVisualMapFiltersComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NoVisualMapFiltersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});