@recursyve/nice-ui-kit.v2 13.2.0-beta.109 → 13.2.0-beta.110

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

@@ -49,6 +49,7 @@ export declare class NiceAssetsCarouselComponent implements ControlValueAccessor
     accept: string[];
     customActions: NiceAssetsCarouselActions[];
     multipleUpload: boolean;
+    visiblePreviewAsset: number;
     showAddAssetContainer: boolean;
     activeChange: EventEmitter<number>;
     removedAsset: EventEmitter<NiceAssets>;
@@ -75,5 +76,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"; "multipleUpload": "multipleUpload"; "showAddAssetContainer": "showAddAssetContainer"; "assets": "assets"; }, { "activeChange": "activeChange"; "removedAsset": "removedAsset"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NiceAssetsCarouselComponent, "nice-assets-carousel", never, { "color": "color"; "edit": "edit"; "accept": "accept"; "customActions": "customActions"; "multipleUpload": "multipleUpload"; "visiblePreviewAsset": "visiblePreviewAsset"; "showAddAssetContainer": "showAddAssetContainer"; "assets": "assets"; }, { "activeChange": "activeChange"; "removedAsset": "removedAsset"; }, never, never>;
 }

package/package.json

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

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

@@ -1,5 +1,12 @@
 @use "../../nice.utils" as nice;
 
+/* Variables */
+:root {
+    --nice-assets-carousel-asset-width: 90px;
+    --nice-assets-carousel-asset-height: 60px;
+    --nice-assets-carousel-asset-gap: 0.75rem;
+}
+
 @mixin nice-assets-carousel-theme($theme) {
     nice-assets-carousel {
         .carousel-container {
@@ -50,6 +57,7 @@
                 .asset-list {
                     @apply flex flex-row;
 
+                    gap: var(--nice-assets-carousel-asset-gap);
                     transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
                 }
             }
@@ -64,7 +72,7 @@
         }
 
         image, img, video {
-            @apply w-full h-full select-none object-cover rounded;
+            @apply w-full h-full select-none object-cover;
         }
 
         .action-button {
@@ -131,8 +139,8 @@
         .add-asset-container {
             @apply bg-default z-50 cursor-pointer select-none mr-3;
 
-            min-width: 90px;
-            min-height: 60px;
+            min-width: var(--nice-assets-carousel-asset-width);
+            min-height: var(--nice-assets-carousel-asset-height);
 
             .add-asset {
                 @apply h-full w-full flex justify-center items-center border border-white border-solid rounded;
@@ -144,13 +152,13 @@
         }
 
         .asset {
-            width: 90px;
-            height: 60px;
+            width: var(--nice-assets-carousel-asset-width);
+            height: var(--nice-assets-carousel-asset-height);
 
-            @apply rounded mr-3 cursor-pointer;
+            @apply rounded cursor-pointer overflow-hidden border border-transparent;
 
             &.active {
-                @apply border border-opacity-100 #{!important};
+                @apply border-opacity-100 #{!important};
 
                 &.primary {
                     @apply border-primary;