@recursyve/nice-ui-kit.v2 13.2.0-beta.105 → 13.2.0-beta.107

package/lib/components/assets-carousel/assets-carousel.component.d.ts

@@ -48,10 +48,13 @@ export declare class NiceAssetsCarouselComponent implements ControlValueAccessor
     edit: boolean;
     accept: string[];
     customActions: NiceAssetsCarouselActions[];
+    multipleUpload: boolean;
+    showAddAssetContainer: boolean;
     activeChange: EventEmitter<number>;
     listStyle: {
         transform: string;
     };
+    showOverlay: boolean;
     private propagate;
     set activeVideoElement(activeVideoElement: ElementRef<HTMLVideoElement>);
     set assetsElement(assetsElement: QueryList<ElementRef<HTMLDivElement>>);
@@ -71,5 +74,5 @@ export declare class NiceAssetsCarouselComponent implements ControlValueAccessor
     clickCustom(action: NiceAssetsCarouselActions): void;
     startSyncVideo(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NiceAssetsCarouselComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NiceAssetsCarouselComponent, "nice-assets-carousel", never, { "color": "color"; "edit": "edit"; "accept": "accept"; "customActions": "customActions"; "assets": "assets"; }, { "activeChange": "activeChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NiceAssetsCarouselComponent, "nice-assets-carousel", never, { "color": "color"; "edit": "edit"; "accept": "accept"; "customActions": "customActions"; "multipleUpload": "multipleUpload"; "showAddAssetContainer": "showAddAssetContainer"; "assets": "assets"; }, { "activeChange": "activeChange"; }, never, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recursyve/nice-ui-kit.v2",
-  "version": "13.2.0-beta.105",
+  "version": "13.2.0-beta.107",
   "exports": {
     ".": {
       "sass": "./_index.scss",

package/src/lib/components/assets-carousel/assets-carousel.theme.scss

@@ -42,13 +42,10 @@
         }
 
         .carousel {
-            @apply flex flex-row items-center;
+            @apply relative flex flex-row items-center;
 
             .asset-list-container {
-                @apply flex flex-row overflow-x-hidden;
-
-                min-width: 400px;
-                max-width: 400px;
+                @apply flex flex-row overflow-x-hidden min-w-full max-w-full;
 
                 .asset-list {
                     @apply flex flex-row;
@@ -56,33 +53,34 @@
                     transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
                 }
             }
+        }
 
-            .action-button {
-                @apply mx-2;
-            }
+        .left-arrow {
+            @apply -left-[10%];
+        }
+
+        .right-arrow {
+            @apply -right-[10%];
         }
 
         image, img, video {
-            width: 100%;
-            height: 100%;
+            @apply w-full h-full select-none object-cover rounded;
+        }
+
+        .action-button {
+            @apply absolute w-8 h-8 min-w-8 min-h-8;
 
-            -webkit-user-select: none;
-            user-select: none;
-            object-fit: cover;
-            border-radius: 4px;
+            .mat-button-wrapper {
+                @apply w-full;
+            }
         }
 
         .active-image {
-            @apply mx-14 relative;
-
-            width: 400px;
+            @apply relative cursor-pointer mb-4 w-full rounded;
             height: 280px;
 
-            margin-bottom: 16px;
-            border-radius: 4px;
-
             &.empty-state {
-                @apply border border-white select-none cursor-pointer;
+                @apply border border-white select-none;
 
                 .empty-state-content {
                     @apply h-full flex flex-col justify-center items-center;
@@ -101,10 +99,9 @@
                 @apply absolute top-3 right-3 flex flex-row;
 
                 .mat-icon-button {
-                    @apply bg-white ml-2.5;
+                    @apply bg-white ml-2.5 rounded;
 
                     @include nice.override-mat-icon-size(32, true);
-                    border-radius: 4px;
 
                     &[disabled] * {
                         @apply text-black text-opacity-80 #{!important};
@@ -119,22 +116,26 @@
             }
         }
 
+        .active-image-overlay {
+            @apply absolute top-0 w-full h-full bg-default bg-opacity-50;
+
+            .mat-icon {
+                @include nice.override-mat-icon-size(60, true);
+            }
+        }
+
         .arrows {
             @include nice.override-mat-icon-size(16, true);
         }
 
         .add-asset-container {
-            @apply bg-default z-50 cursor-pointer select-none;
+            @apply bg-default z-50 cursor-pointer select-none mr-3;
 
             min-width: 90px;
             min-height: 60px;
-            margin-right: 12px;
 
             .add-asset {
-                @apply h-full w-full flex justify-center items-center;
-                @apply border border-white border-solid;
-
-                border-radius: 4px;
+                @apply h-full w-full flex justify-center items-center border border-white border-solid rounded;
 
                 .mat-icon {
                     @apply text-default text-opacity-50 #{!important};
@@ -145,11 +146,8 @@
         .asset {
             width: 90px;
             height: 60px;
-            border-radius: 4px;
-
-            margin-right: 12px;
 
-            cursor: pointer;
+            @apply rounded mr-3 cursor-pointer;
 
             &.active {
                 @apply border border-opacity-100 #{!important};