@kms-ngx-ui/presentational 16.8.4 → 16.9.0

package/lib/models/image-snippet.d.ts

@@ -0,0 +1,15 @@
+/**
+ * General Image Model
+ */
+export declare class ImageSnippet {
+    src: string;
+    fileName: string;
+    srcType: ImageSourceType;
+    status: string;
+    constructor(src: string, fileName: string, srcType?: ImageSourceType);
+}
+export declare enum ImageSourceType {
+    Ident = "Idnet",
+    ByteArray = "ByteArray",
+    URL = "URL"
+}

package/lib/models/index.d.ts

@@ -1,4 +1,5 @@
 export * from './iconSize.enum';
+export * from './image-snippet.model';
 export * from './is-value.function';
 export * from './types/attached-file-dto.model';
 export * from './types/nullable.type';

package/lib/ui/image-slider/image-slider.component.d.ts

@@ -1,16 +1,24 @@
 /**
  * @copyright KMS GmbH
  */
-import { EventEmitter } from '@angular/core';
-import { ImageSnippet } from '../../models/image-snippet.model';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { AfterViewInit, ElementRef, EventEmitter, OnChanges } from '@angular/core';
+import { ImageSnippet } from '../../models/image-snippet';
 import * as i0 from "@angular/core";
-export declare class ImageSliderComponent {
-    slides: string[] | undefined;
+export declare class ImageSliderComponent implements OnChanges, AfterViewInit {
+    private el;
+    slides?: string[];
     editMode: boolean;
-    imagesTOSave: ImageSnippet[] | undefined;
-    orderChanged: EventEmitter<ImageSnippet[]>;
+    imagesToSave?: ImageSnippet[];
     deleteImageEvent: EventEmitter<number>;
+    orderChanged: EventEmitter<ImageSnippet[]>;
+    constructor(el: ElementRef);
+    ngAfterViewInit(): void;
+    ngOnChanges(): void;
+    initializeSwipers(): void;
+    private updateSwipers;
     deleteImage(index: number): void;
+    onOrderChanged(event: CdkDragDrop<string[]>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ImageSliderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ImageSliderComponent, "kms-image-slider", never, { "slides": { "alias": "slides"; "required": false; }; "editMode": { "alias": "editMode"; "required": false; }; "imagesTOSave": { "alias": "imagesTOSave"; "required": false; }; }, { "orderChanged": "orderChanged"; "deleteImageEvent": "deleteImageEvent"; }, never, ["[description]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageSliderComponent, "kms-image-slider", never, { "slides": { "alias": "slides"; "required": false; }; "editMode": { "alias": "editMode"; "required": false; }; "imagesToSave": { "alias": "imagesToSave"; "required": false; }; }, { "deleteImageEvent": "deleteImageEvent"; "orderChanged": "orderChanged"; }, never, never, false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kms-ngx-ui/presentational",
-  "version": "16.8.4",
+  "version": "16.9.0",
   "peerDependencies": {
     "@angular/cdk": "16.2.12",
     "@angular/common": "16.2.12",

package/public-api.d.ts

@@ -4,6 +4,7 @@ export * from './lib/kms-ngx-ui-presentational.service';
 export * from './lib/services/viewport.service';
 export * from './lib/models/button-response-types.enum';
 export * from './lib/models/iconSize.enum';
+export * from './lib/models/image-snippet.model';
 export * from './lib/models/salutation.enum';
 export * from './lib/models/types/nullable.type';
 export * from './lib/ui/back-to-top/back-to-top.component';

package/src/lib/ui/image-slider/image-slider.component.scss

@@ -1,67 +1,56 @@
 @mixin image-slider-theme() {
-  .image-slider {
+  .image-slider-container {
     swiper-container {
-      width: 768px !important;
-      height: 100%;
-      max-width: 100vw;
-      max-height: 100vh;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    swiper-slide {
-      text-align: center;
-      font-size: 18px;
-      background: var(--white);
-      background-size: cover;
-      background-position: center;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      max-width: 800px;
 
-      img {
-        display: block;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
+      --swiper-navigation-color: #fff;
+      --swiper-pagination-color: #fff;
     }
 
-    &__swiper-container {
-      --swiper-navigation-size: 20px;
-      --swiper-navigation-color: var(--black);
-      --swiper-pagination-color: var(--black);
-
-      height: 80%;
-      width: 100%;
+    swiper-container.swiper-main-view-container {
+      height: 600px;
+      margin: 20px auto;
     }
 
-    &__swiper-preview-container {
-      height: 20%;
+    swiper-container.swiper-carousel-container {
+      height: 200px;
+      width: 100%;
       box-sizing: border-box;
-      padding: 10px 0;
 
+      swiper-slide {
+        width: calc(25% - 10px) !important;
+        margin-right: 10px;
+        opacity: 0.5;
+        position: relative;
+        .mat-mdc-menu-item {
+          position: absolute;
+          top: 0;
+          &.delete-button {
+            background: rgba(255, 255, 255, 0.6);
+            width: 44px;
+            height: 44px;
+            right: 0;
+            border-end-start-radius: 30px;
+          }
+          &.drag-button {
+            width: 100%;
+            height: 100%;
+            left: 0;
+          }
+        }
+      }
       .swiper-slide-thumb-active {
         opacity: 1;
       }
+    }
 
-      swiper-slide {
-        width: 25%;
+    swiper-slide {
+      img {
+        display: block;
+        width: 100%;
         height: 100%;
-        opacity: 0.4;
-
-        img {
-          border: 1px solid var(--grey08);
-          border-radius: 8px;
-        }
+        object-fit: cover;
       }
     }
-
-    &__delete-button.mat-mdc-menu-item {
-      position: absolute;
-      top: 0;
-      width: fit-content;
-      right: 0;
-    }
   }
 }