remove swiper

CSETWebNg/package.json

@@ -68,7 +68,6 @@
     "sanitize-html": "^2.17.0",
     "sass": "^1.93.2",
     "style-loader": "^4.0.0",
-    "swiper": "^12.0.2",
     "typescript": "^5.9.3",
     "zone.js": "^0.15.1"
   },
@@ -85,4 +84,4 @@
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2"
   }
-}
+}

CSETWebNg/src/app/app.module.ts

@@ -606,7 +606,6 @@ import { UpgradeComponent } from './assessment/upgrade/upgrade.component';
 import { CodeEditorModule, provideCodeEditor } from '@ngstack/code-editor';
 import { ImportComponent } from './import/import.component';
 import { NewAssessmentComponent } from './initial/new-assessment/new-assessment.component';
-import { register as registerSwiper } from 'swiper/element/bundle';
 import { AdminSettingsComponent } from './initial/admin-settings/admin-settings.component';
 import { UserService } from './services/user.service';
 import { CisaVadrReportComponent } from './reports/cisa-vadr/cisa-vadr-report/cisa-vadr-report.component';
@@ -615,9 +614,6 @@ import { CisaVadrLevelsComponent } from './assessment/prepare/maturity/cisa-vadr
 import { KeyDisplay1Component } from './assessment/results/key-display-1/key-display-1.component';
 import { CoverPageComponent } from './reports/cover-page/cover-page.component';
 
-
-
-registerSwiper();
 ModuleRegistry.registerModules([AllCommunityModule]);
 @NgModule({
     declarations: [

CSETWebNg/src/app/initial/new-assessment/new-assessment.component.ts

@@ -28,7 +28,7 @@ import { GalleryService } from '../../services/gallery.service';
 import { trigger, style, animate, transition, state } from '@angular/animations';
 import { NavigationService } from '../../services/navigation/navigation.service';
 import { TranslocoService } from '@jsverse/transloco';
-import { SwiperOptions } from 'swiper/types';
+
 
 
 
@@ -64,68 +64,7 @@ export class NewAssessmentComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit() {
-    // Set a longer timeout to ensure DOM is fully rendered including dynamic content
-    setTimeout(() => {
-      this.initializeSwipers();
-    }, 100);
-
-    // Listen for changes to the DOM that might affect swiper containers
-    const observer = new MutationObserver(() => {
-      this.initializeSwipers();
-    });
-
-    // Start observing the document for added nodes
-    observer.observe(document.body, { childList: true, subtree: true });
-  }
-
-  private initializeSwipers(): void {
-    // Use querySelectorAll to get all swiper containers
-    const swiperEls = document.querySelectorAll('swiper-container');
-    const swiperConfig: SwiperOptions = {
-      slidesPerView: "auto",
-      spaceBetween: 7,
-      navigation: {
-        nextEl: '.swiper-button-next', // selector for external button
-        prevEl: '.swiper-button-prev', // selector for external button
-        disabledClass: 'swiper-button-hidden'
-      },
-      loop: false,
-      breakpoints: {
-        320: {
-          slidesPerView: 1,
-        },
-        620: {
-          slidesPerView: 2,
-        },
-        800: {
-          slidesPerView: 3,
-        },
-        1220: {
-          slidesPerView: 4,
-        },
-        1460: {
-          slidesPerView: 5,
-        }
-      },
-    }
-
-    // Configure each swiper instance
-    swiperEls.forEach(swiperEl => {
-      // Skip already initialized swipers
-      if (swiperEl.hasAttribute('data-initialized')) {
-        return;
-      }
-
-      // Apply configuration to each swiper element
-      Object.assign(swiperEl, swiperConfig);
-
-      // Mark as initialized
-      swiperEl.setAttribute('data-initialized', 'true');
-
-      // Initialize this particular swiper instance
-      // @ts-ignore - initialize method exists in Swiper web components but might not be in typings
-      swiperEl.initialize();
-    });
+
   }
 
   getImageSrc(src: string) {

CSETWebNg/src/app/initial/search-page/search-page.component.html

@@ -26,12 +26,12 @@ <h4>{{t('titles.search results')}}</h4>
     {{t('no search results')}}
   </div>
   <div *ngFor="let row of rows" class="m-4" style="height: 240px;">
-    <swiper-container class="gallery-slider">
+
       <div class="swiper-wrapper">
-        <swiper-slide *ngFor="let c of row; let i = index">
+        <div *ngFor="let c of row; let i = index">
           <div [attr.id]="'c'+c.item.gallery_Item_Guid" class="card gallery-card"
             (mouseover)="onHover(c.item.gallery_Item_Guid)" (mouseleave)="onHoverOut(-1, c.item.gallery_Item_Guid)"
-            style="width: 300px;">
+            style="width: 290px;margin-right:10px">
 
             <div class="card-body gallery-card-body cursor-pointer"
               style="min-height:150px; max-height:150px; z-index:1" (click)="navSvc.beginNewAssessmentGallery(c.item)">
@@ -52,8 +52,7 @@ <h4>{{t('titles.search results')}}</h4>
                   class="fa-solid fa-play" style="font-size: 18px; z-index:100"></i></button>
             </div>
           </div>
-        </swiper-slide>
+        </div>
       </div>
-    </swiper-container>
   </div>
 </div>

CSETWebNg/src/app/initial/search-page/search-page.component.ts

@@ -31,8 +31,6 @@ import Fuse from 'fuse.js';
 import { map } from 'lodash';
 import { ConfigService } from '../../services/config.service';
 import { NavigationService } from '../../services/navigation/navigation.service';
-import { SwiperOptions } from 'swiper/types';
-
 
 @Component({
   selector: 'app-search-page',
@@ -43,8 +41,6 @@ import { SwiperOptions } from 'swiper/types';
 export class SearchPageComponent implements OnInit, AfterViewInit {
   @Input() searchQuery: string;
 
-  swiperInstance: any;
-
   hoverIndex = -1;
 
   show: boolean = false;
@@ -139,57 +135,11 @@ export class SearchPageComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.initializeSwipers();
     this.checkNavigation();
   }
 
   private initializeSwipers(): void {
-    // Use querySelectorAll to get all swiper containers
-    const swiperEls = document.querySelectorAll('swiper-container');
-    const swiperConfig: SwiperOptions = {
-      slidesPerView: 1,
-      spaceBetween: 7,
-      slidesPerGroup: 1,
-      breakpoints: {
-        200: {
-          slidesPerView: 1,
-        },
-        620: {
-          slidesPerView: 2,
-        },
-        800: {
-          slidesPerView: 3,
-        },
-        1220: {
-          slidesPerView: 4,
-        },
-        1460: {
-          slidesPerView: 5
-        }
-      },
-      on: {
-        resize: () => {
-        }
-      }
-    };
-
-    // Configure each swiper instance
-    swiperEls.forEach(swiperEl => {
-      // Skip already initialized swipers
-      if (swiperEl.hasAttribute('data-initialized')) {
-        return;
-      }
-
-      // Apply configuration to each swiper element
-      Object.assign(swiperEl, swiperConfig);
-
-      // Mark as initialized
-      swiperEl.setAttribute('data-initialized', 'true');
-
-      // Initialize this particular swiper instance
-      // @ts-ignore - initialize method exists in Swiper web components but might not be in typings
-      swiperEl.initialize();
-    });
+
   }
 
   shuffleCards(i: number) {
@@ -210,24 +160,6 @@ export class SearchPageComponent implements OnInit, AfterViewInit {
   }
 
   checkNavigation() {
-    /*let swiperPrev = document.getElementsByClassName('swiper-button-prev');
-    let swiperNext = document.getElementsByClassName('swiper-button-next');
-    if (window.innerWidth < 620) {
-
-      if (swiperPrev != null && swiperNext != null) {
-        for (var i = 0; i < swiperPrev.length; i++) {
-          swiperPrev[i].setAttribute('style', 'display:none');
-          swiperNext[i].setAttribute('style', 'display:none');
-        }
-      }
-    } else {
-      if (swiperPrev != null && swiperNext != null) {
-        for (var i = 0; i < swiperPrev.length; i++) {
-          swiperPrev[i].removeAttribute('style');
-          swiperNext[i].removeAttribute('style');
-        }
-      }
-    }*/
   }
 
   showButtons(show: boolean) {