ngx-edge-slider 1.0.0

package/ngx-edge-slider-workspace/projects/ngx-edge-slider/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/ngx-edge-slider-workspace/projects/ngx-edge-slider/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/ngx-edge-slider-workspace/projects/test-app/src/app/app.component.html

@@ -0,0 +1,11 @@
+
+<lib-ngx-edge-slider #EdgeSlider *ngIf="sliderConfig.slides?.length"
+      [config]="sliderConfig" id="EdgeSlider"
+      [slideTemplate]="EdgeSliderTemplate" (onSlideChange)="onSlideChange($event)"></lib-ngx-edge-slider>
+
+
+<ng-template #EdgeSliderTemplate let-slide="slide" let-index="currentSlide">
+
+    <!-- Template rendering logic here, slide is our entity which props can be accessed slide.id, slide.image -->
+    <img [src]="slide.image">
+</ng-template>

package/ngx-edge-slider-workspace/projects/test-app/src/app/app.component.spec.ts

@@ -0,0 +1,27 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    declarations: [AppComponent]
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'test-app'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('test-app');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('test-app app is running!');
+  });
+});

package/ngx-edge-slider-workspace/projects/test-app/src/app/app.component.ts

@@ -0,0 +1,57 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { SlideConfig } from 'dist/ngx-edge-slider/lib/ngx-edge-slider.interface';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+
+export class AppComponent implements OnInit, OnDestroy {
+  title = 'test-app';
+
+  slides = [
+    {
+     id: 0, 
+     image: "assets/slide2_desktop_1950x.webp",
+    }, 
+
+    {
+      id: 1, 
+      image: "assets/slide2_desktop_1950x.webp"
+    }
+  ];
+
+  isAnimating = false;
+  isMobile: boolean;
+
+  // Config is inside of ngx-edge-slider.interface.ts, check scss file also for string options.
+  sliderConfig: any = {
+    slideWidth: 100, 
+    slidesPerView: 1, 
+    slideChangeDelay: 50,
+    draggable: true,
+    delay: 5000, 
+    navEnabled:true,
+    navHoverable:true,
+    navPosition: 'centered',
+    paginationEnabled: true,
+    paginationPosition: 'thumbs-bottom', 
+    breakpoints: {
+      desktop: { autoplay: true }
+    }
+  };
+
+
+  ngOnInit(): void {
+    this.sliderConfig.slides = this.slides;
+  }
+
+  ngOnDestroy(): void {
+   // slider destroys itself automatic.
+  }
+
+  onSlideChange($event: any): void {
+    console.log($event)
+  }
+}

package/ngx-edge-slider-workspace/projects/test-app/src/app/app.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { NgxEdgeSliderModule } from 'ngx-edge-slider';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    NgxEdgeSliderModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

package/ngx-edge-slider-workspace/projects/test-app/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>TestApp</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/ngx-edge-slider-workspace/projects/test-app/src/main.ts

@@ -0,0 +1,7 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

package/ngx-edge-slider-workspace/projects/test-app/src/styles.scss

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

package/ngx-edge-slider-workspace/projects/test-app/tsconfig.app.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

package/ngx-edge-slider-workspace/projects/test-app/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

package/ngx-edge-slider-workspace/tsconfig.json

@@ -0,0 +1,39 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "strictNullChecks": false,
+    "sourceMap": true,
+    "paths": {
+      "ngx-edge-slider": [
+        "dist/ngx-edge-slider"
+      ]
+    },
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "ngx-edge-slider",
+  "version": "1.0.0",
+  "description": "Edge Slider for Angular 17+, Lightweight library and easy usage.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "edge",
+    "angular",
+    "ngx",
+    "slider"
+  ],
+  "author": "WingmanColt",
+  "license": "ISC",
+  "dependencies": {
+    "loadash": "^1.0.0",
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.13"
+  }
+}