ngx-edge-slider 1.0.0

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

@@ -0,0 +1,39 @@
+{
+  "name": "ngx-edge-slider-workspace",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^16.2.0",
+    "@angular/common": "^16.2.0",
+    "@angular/compiler": "^16.2.0",
+    "@angular/core": "^16.2.0",
+    "@angular/forms": "^16.2.0",
+    "@angular/platform-browser": "^16.2.0",
+    "@angular/platform-browser-dynamic": "^16.2.0",
+    "@angular/router": "^16.2.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.13.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^16.2.16",
+    "@angular/cli": "^16.2.10",
+    "@angular/compiler-cli": "^16.2.0",
+    "@types/jasmine": "~4.3.0",
+    "jasmine-core": "~4.6.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^16.2.0",
+    "typescript": "~5.1.3"
+  }
+}

package/ngx-edge-slider-workspace/projects/ngx-edge-slider/README.md

@@ -0,0 +1,24 @@
+# NgxEdgeSlider
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ngx-edge-slider` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-edge-slider`.
+> Note: Don't forget to add `--project ngx-edge-slider` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ngx-edge-slider` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ngx-edge-slider`, go to the dist folder `cd dist/ngx-edge-slider` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ngx-edge-slider` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/ngx-edge-slider-workspace/projects/ngx-edge-slider/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-edge-slider",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

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

@@ -0,0 +1,12 @@
+{
+  "name": "ngx-edge-slider",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^16.2.0",
+    "@angular/core": "^16.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/ngx-edge-slider-workspace/projects/ngx-edge-slider/src/lib/assets/icons/arrow-black.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 3.5 23.71 17">
+    <path fill="#212121" fill-rule="evenodd" d="M15.354 3.646a.5.5 0 0 0-.708.708l7.147 7.146H.5a.5.5 0 0 0 0 1h21.293l-7.147 7.146a.5.5 0 0 0 .708.708l8-8 .353-.354-.353-.354-8-8Z" clip-rule="evenodd"/>
+</svg>

package/ngx-edge-slider-workspace/projects/ngx-edge-slider/src/lib/assets/icons/arrow-gray.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 3.5 23.71 17">
+    <path fill="#B3B3B3" fill-rule="evenodd" d="M15.354 3.646a.5.5 0 0 0-.708.708l7.147 7.146H.5a.5.5 0 0 0 0 1h21.293l-7.147 7.146a.5.5 0 0 0 .708.708l8-8 .353-.354-.353-.354-8-8Z" clip-rule="evenodd"/>
+</svg>

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

@@ -0,0 +1,78 @@
+<!-- Navigation Buttons -->
+<div class="slider__controls margin" *ngIf="config.slides?.length > 1 && config.navEnabled && config.navPosition !== 'centered' || config.paginationEnabled && config.paginationPosition == 'thumbs-up' || config.title?.length">
+  <div *ngIf="config.title?.length" class="slider-header">{{ config.title }}</div>
+
+  <div class="slider-buttons-container" >
+  <div class="slider-button left" *ngIf="config.navEnabled" [class.disabled]="!canClickPrevious" title="Previous" (click)="onPreviousClick()">
+  </div>
+  <div class="slider-button right" *ngIf="config.navEnabled" [class.disabled]="!canClickNext" title="Next" (click)="onNextClick()">
+  </div>
+
+  <div *ngIf=" config.paginationEnabled && config.paginationPosition == 'thumbs-up'" class="thumbs">
+    <div class="thumb-dots">
+      <div *ngFor="let dot of pager.visibleDots; let i = index">
+        <span class="thumb-dot"
+          [class.active]="dot === pager.currentPage" 
+          [class.inactive]="dot !== pager.currentPage" >
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+
+<div class="slider" [class.slider--nav-static]="config.navEnabled && !config.navHoverable" [class.slider--nav-hoverable]="config.navEnabled && config.navHoverable" [class.slider-draggable]="config.draggable" [class.slider-vertical]="config.vertical" *ngIf="config.slides?.length > 0">
+
+  <!-- Slide Wrapper -->
+  <div class="slider__wrapper" [style.transform]="this.translateStyle">    
+    
+    <div *ngFor="let slide of config.slides; let i = index; trackBy: trackBySlideId"
+         class="slide"
+         (click)="handleOnSlideClick(i)"
+         [class.slide-draggable]="isDragStarted"
+         [ngClass]="{'slide--current': selectedSlide === i}"
+         [style.width]="config.slideWidth + '%'" >
+         
+     <div class="slide-content">
+      <div class="drag-handle"
+        (mousedown)="onStart($event)"
+        (touchstart)="onStart($event)"
+        (mousemove)="onMove($event)"
+        (touchmove)="onMove($event)"
+        (mousemove)="onThrottledMove($event)"
+        (touchmove)="onThrottledMove($event)"
+        (mouseup)="onEnd($event)"
+        (touchend)="onEnd($event)"
+        (mouseleave)="onLeave()"
+        (touchcancel)="onLeave()">
+
+        <ng-container *ngTemplateOutlet="slideTemplate; context: { slide: slide, index: i, sliding: slideChanging }" ></ng-container>
+      </div>
+    </div>
+    </div>
+  </div>
+    
+</div>
+
+
+<div class="slider__bottom_controls"  *ngIf="config.slides?.length > 1 && config.navEnabled && config.navPosition == 'centered'">
+  <div (click)="onPreviousClick()" [class.disabled]="!canClickPrevious"  class="slider-arrow-prev"></div>
+  <div (click)="onNextClick()" [class.disabled]="!canClickNext" class="slider-arrow-next"></div>
+  </div>
+  
+  <div *ngIf="config.paginationEnabled && config.paginationPosition == 'thumbs-bottom'" class="thumbs">
+    <div class="thumb-dots">
+      <div *ngFor="let dot of pager.visibleDots; let i = index">
+        <span 
+          class="thumb-dot"
+          [class.active]="dot === pager.currentPage" 
+          [class.inactive]="dot !== pager.currentPage" >
+        </span>
+      </div>
+    </div>
+  </div>
+
+<!--          
+  'slide--next': !isPreviousSlide(i) && isNextSlide(i) && !isCurrentSlide(i),
+  'slide--previous': isPreviousSlide(i) && !isNextSlide(i) && !isCurrentSlide(i)
+-->

package/ngx-edge-slider-workspace/projects/ngx-edge-slider/src/lib/ngx-edge-slider.component.scss

@@ -0,0 +1,344 @@
+$base-duration: 1000ms;
+$base-ease: cubic-bezier(0.25, 0.46, 0.45, 0.84);
+$color-accent: #1D1F2F;
+
+:host {
+  position: relative;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  z-index: 1;
+}
+
+.overflow-visible {
+  overflow: visible;
+}
+
+/* Default Hidden State */
+.slider + .slider__bottom_controls {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+/* Hover on .slider or .slider__bottom_controls */
+.slider:hover + .slider__bottom_controls,
+.slider + .slider__bottom_controls:hover {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.2s ease-out;
+}
+
+/* Always-visible State */
+
+.slider.slider--nav-static + .slider__bottom_controls {
+  opacity: 1;
+  visibility: visible;
+
+  .slider-arrow-next,
+  .slider-arrow-prev {
+    &.disabled {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+}
+
+/* Hover-enabled State */
+.slider.slider--nav-hoverable:hover + .slider__bottom_controls {
+  opacity: 1;
+  visibility: visible;
+}
+
+.slider {
+  width: 100%;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  list-style: none;
+  overflow: hidden;
+
+  /* Fix of Webkit flickering */
+  z-index: 1;
+  display: block;
+
+  &.slider-vertical {
+    .slider__wrapper {
+      flex-direction: column;
+      height: 100%;
+      width: 100%;
+      transition: transform $base-duration $base-ease;
+    }
+
+    .slide {
+      height: calc(100% / slidesPerViewAdjusted);
+      width: 100%;
+      flex-shrink: 0;
+      transition: transform 0.3s ease;
+    }
+
+    .thumbs {
+      flex-direction: column;
+      align-items: center;
+      margin: 10px 0;
+    }
+
+    .slider__controls {
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+
+  @media (max-width: 1023px) {
+    .slider__bottom_controls {
+      .slider-arrow-next,
+      .slider-arrow-prev {
+        background: rgba(255, 255, 255, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='4.51 0.01 10.99 19.97'%3E%3Cpath fill='%23000' d='m4.508 18.968 1.006 1.006 9.983-9.984L5.514.005 4.508 1.011l8.984 8.984-8.984 8.973Z'/%3E%3C/svg%3E") no-repeat center center/11px 18px;
+      }
+    }
+
+    .slider.slider-vertical {
+      .slider__wrapper {
+        height: auto;
+        margin: 16px auto;
+      }
+    }
+  }
+}
+
+.slider__wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  box-sizing: content-box;
+  will-change: transform;
+  transition: transform $base-duration $base-ease;
+  transform: translate3d(0, 0, 0); /* GPU acceleration */
+}
+
+.slider__wrapper.no-translate {
+  transform: none !important;
+}
+
+.slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition: transform 0.3s ease;
+  
+/*  &.slide-draggable {
+    cursor: grab;
+    
+    img, a, div, button, p, span {
+      pointer-events: auto;
+    }
+  }*/
+  
+  /*img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }*/
+}
+
+.slide-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .drag-handle {
+    width: 100%;
+    height: 100%;
+    cursor: grab;
+    z-index: 10;
+    pointer-events: all;
+  }
+}
+
+::ng-deep .slide-content img {
+  width: 100%;
+  height: 100%;
+}
+
+.slide__image-wrapper {
+  background-color: $color-accent;
+  border-radius: 1%;
+  height: 100%;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  transition: transform calc(#{$base-duration} / 4) $base-ease;
+  width: 100%;
+}
+
+.slide__image {
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  object-fit: cover;
+  position: absolute;
+}
+
+.slider__controls {
+  position: relative;
+  z-index: initial;
+  align-items: center;
+  justify-content: space-between;
+  display: flex;
+
+  &.margin {
+    margin: 96px 10px 32px 10px;
+  }
+  
+  .slider-header {
+    font-family: FixelText, sans-serif;
+    font-weight: 500;
+    font-size: 26px;
+    line-height: 40px;
+    color: #212121;
+    text-align: center;
+    margin: 0;
+    flex: 1;
+  }
+
+  .slider-buttons-container {
+    display: flex;
+    gap: 45px;
+    margin-left: auto;
+  }
+
+  .slider-button {
+    height: 28px;
+    width: 28px;
+    transition: opacity 0.2s ease-in-out;
+    background: url("assets/icons/arrow-black.svg") no-repeat center center;
+    cursor: pointer;
+
+    &.disabled {
+      background: url("assets/icons/arrow-gray.svg") no-repeat center center;
+      cursor: not-allowed;
+    }
+
+    &.left {
+      transform: rotate(180deg);
+    }
+  }
+
+  @media (max-width: 768px) {
+    flex-direction: row;
+    justify-content: space-between;
+
+    &.margin {
+      margin: 48px 15px 16px 10px;
+    }
+
+    .slider-header {
+      font-size: 20px;
+      line-height: 32px;
+      text-align: left;
+      padding-left: 16px;
+    }
+
+    .slider-buttons-container {
+      gap: 25px;
+      margin-left: 0;
+
+      .slider-button {
+        height: 20px;
+        width: 20px;
+      }
+    }
+  }
+}
+
+.thumbs {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform .2s ease-in-out;
+
+  .slider__controls.thumbs-top {
+    flex-direction: column-reverse;
+  }
+  
+  .slider__controls.thumbs-bottom {
+    flex-direction: column;
+    width: 100%;
+    height: 20px;
+  }
+
+  .thumb-dots {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+  }
+
+  .thumb-dot {
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    margin: 0 0 0 8px;
+    border-radius: 50%;
+    background: #b3b3b3;
+
+    &.active {
+      background: #212121;
+      border: 1px solid #212121;
+    }
+
+    &:hover {
+      background: #212121;
+      border: 1px solid #212121;
+    }
+
+    &.hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}
+
+.slider__bottom_controls {
+  display: block;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.slider-arrow-next,
+.slider-arrow-prev {
+  position: absolute;
+  top: calc(50% - 21px);
+  height: 42px;
+  width: 42px;
+  display: block;
+  background: rgba(255, 255, 255, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='4.51 0.01 10.99 19.97'%3E%3Cpath fill='%23000' d='m4.508 18.968 1.006 1.006 9.983-9.984L5.514.005 4.508 1.011l8.984 8.984-8.984 8.973Z'/%3E%3C/svg%3E") no-repeat center center/11px 18px;
+  z-index: 9;
+  pointer-events: all;
+  cursor: pointer;
+}
+
+.slider-arrow-next {
+  right: 10px;
+}
+
+.slider-arrow-prev {
+  left: 10px;
+  transform:rotate(180deg)
+}
+
+@media (max-width: 1023px) {
+  .slider-arrow-prev {
+    left: 0;
+  }
+
+  .slider-arrow-next {
+    right: 0;
+  }
+}