@recursyve/nice-ui-kit.v2 13.2.0-beta.98 → 14.0.0-beta.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recursyve/nice-ui-kit.v2",
-  "version": "13.2.0-beta.98",
+  "version": "14.0.0-beta.100",
   "exports": {
     ".": {
       "sass": "./_index.scss",
@@ -16,16 +16,16 @@
     }
   },
   "peerDependencies": {
-    "@angular/cdk": "^13.0.0",
-    "@angular/common": "^13.0.0",
-    "@angular/core": "^13.0.0",
-    "@angular/forms": "^13.0.0",
-    "@angular/material": "^13.0.0",
+    "@angular/cdk": "^14.0.0",
+    "@angular/common": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/forms": "^14.0.0",
+    "@angular/material": "^14.0.0",
     "@ngx-translate/core": "^14.0.0",
-    "@recursyve/ngx-form-generator": "^13.0.0-beta.19",
-    "ngx-mask": "^13.0.0",
+    "@recursyve/ngx-form-generator": ">= 14.0.0-beta.36",
+    "ngx-mask": "^14.0.0",
     "perfect-scrollbar": "^1.5.3",
-    "uuid": "^3.4.0"
+    "uuid": ">= 9.0.0"
   },
   "dependencies": {
     "tslib": "^2.0.0",

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 {
@@ -42,47 +49,46 @@
         }
 
         .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;
 
+                    gap: var(--nice-assets-carousel-asset-gap);
                     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;
+        }
 
-            -webkit-user-select: none;
-            user-select: none;
-            object-fit: cover;
-            border-radius: 4px;
+        .action-button {
+            @apply absolute w-8 h-8 min-w-8 min-h-8;
+
+            .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 +107,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 +124,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;
+            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;
-                @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};
@@ -143,16 +152,13 @@
         }
 
         .asset {
-            width: 90px;
-            height: 60px;
-            border-radius: 4px;
-
-            margin-right: 12px;
+            width: var(--nice-assets-carousel-asset-width);
+            height: var(--nice-assets-carousel-asset-height);
 
-            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;

package/src/lib/components/chip-list/chip-list.theme.scss

@@ -0,0 +1,14 @@
+@use "../../nice.utils" as nice;
+@import "components/item-list/item-list.theme";
+
+@mixin nice-chip-list-theme($theme) {
+    @include nice-item-list-theme($theme);
+
+    nice-chip-list {
+        @apply w-full;
+
+        .nice-chip-row {
+            @apply gap-2;
+        }
+    }
+}

package/src/lib/components/chip-list/components/item-list/item-list.theme.scss

@@ -0,0 +1,37 @@
+@use "../../../../nice.utils" as nice;
+
+@mixin nice-item-list-theme($theme) {
+    mat-form-field {
+        nice-item-list {
+            .nice-items-row {
+                @apply mt-4;
+            }
+        }
+    }
+
+    nice-item-list {
+        .nice-items-row {
+            @apply flex flex-row flex-wrap items-center gap-2;
+
+            .nice-chip {
+                @apply flex flex-row items-center justify-start rounded-3xl gap-3 px-3 py-0.5 min-w-24;
+
+                .close-icon {
+                    @apply mt-1 opacity-70;
+                }
+
+                &.primary {
+                    @apply bg-primary;
+                }
+
+                &.accent {
+                    @apply bg-accent;
+                }
+
+                &.warn {
+                    @apply bg-warn;
+                }
+            }
+        }
+    }
+}

package/src/lib/components/date-range-picker/date-range-picker.theme.scss

@@ -0,0 +1,47 @@
+@use "@angular/material" as mat;
+
+@mixin nice-date-picker-theme($theme) {
+    $accent: map-get($theme, accent);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    mat-calendar {
+        .mat-calendar-body-in-range::before {
+            background: mat.get-color-from-palette($accent, 0.2) !important;
+        }
+    }
+
+    nice-date-range-picker {
+        .from-to {
+            @apply flex;
+
+            color: map-get($foreground, text);
+        }
+
+        .nice-date-picker-container {
+            @apply flex justify-center items-center;
+
+            .nice-date-picker-header {
+                @apply mr-3;
+            }
+        }
+
+        .separator {
+            @apply px-3;
+        }
+    }
+
+    nice-range-preset {
+        background-color: map-get($background, background);
+
+        button {
+            .mat-button-focus-overlay {
+                background: mat.get-color-from-palette($accent) !important;
+            }
+        }
+
+        .mat-button:hover:not(.mat-button-disabled) .mat-button-focus-overlay {
+            opacity: 0.2 !important;
+        }
+    }
+}

package/src/lib/components/navigation/vertical/styles/appearances/default.theme.scss

@@ -240,6 +240,14 @@
                         opacity: 0.4;
                     }
 
+                    .nice-vertical-navigation-item-icon-wrapper {
+                        position: relative;
+
+                        .nice-vertical-navigation-hint {
+                            display: none;
+                        }
+                    }
+
                     .nice-vertical-navigation-item-icon {
                         margin-right: 16px;
 
@@ -254,6 +262,20 @@
                     }
 
                     .nice-vertical-navigation-item-title-wrapper {
+                        .nice-vertical-navigation-item-title {
+                            position: relative;
+
+                            span {
+                                padding: 16px;
+                            }
+                        }
+
+                        .nice-vertical-navigation-hint {
+                            width: 8px;
+                            height: 8px;
+                            top: -4px;
+                            right: 4px
+                        }
 
                         .nice-vertical-navigation-item-subtitle {
                             font-size: 11px;
@@ -481,6 +503,9 @@
     nice-vertical-navigation-basic-item,
     nice-vertical-navigation-collapsable-item,
     nice-vertical-navigation-group-item {
+        .nice-vertical-navigation-hint {
+            @apply absolute h-2 w-2 rounded-full bg-accent;
+        }
 
         .nice-vertical-navigation-item-wrapper {
 
@@ -602,4 +627,17 @@
             }
         }
     }
+
+    nice-vertical-navigation {
+        &.nice-vertical-navigation-appearance-dense:not(.nice-vertical-navigation-hover):not(.nice-vertical-navigation-has-hint) {
+            .nice-vertical-navigation-hint {
+                display: block !important;
+
+                width: 8px;
+                height: 8px;
+                top: -4px;
+                right: 8px
+            }
+        }
+    }
 }

package/src/lib/components/navigation/vertical/styles/appearances/dense.theme.scss

@@ -94,7 +94,7 @@
                 }
             }
 
-            &:not(.nice-vertical-navigation-hover):not(.nice-vertical-navigation-mode-over) {
+            &:not(.nice-vertical-navigation-hover):not(.nice-vertical-navigation-mode-over):not(.nice-vertical-navigation-has-hint) {
 
                 /* Wrapper */
                 .nice-vertical-navigation-wrapper {
@@ -149,7 +149,7 @@
             }
 
             /* Hover */
-            &.nice-vertical-navigation-hover {
+            &.nice-vertical-navigation-hover, &.nice-vertical-navigation-has-hint {
 
                 .nice-vertical-navigation-wrapper {
                     width: var(--nice-vertical-navigation-width);

package/src/lib/directives/chip-list/chip-list-items/chip-list-items.theme.scss

@@ -0,0 +1,35 @@
+@mixin nice-chip-list-items-theme($theme) {
+    mat-form-field {
+        nice-chip-list-items {
+            .nice-items-row {
+                @apply mt-4;
+            }
+        }
+    }
+
+    nice-chip-list-items {
+        .nice-items-row {
+            @apply flex flex-row flex-wrap items-center gap-2;
+
+            .nice-chip {
+                @apply flex flex-row items-center justify-start rounded-3xl gap-3 px-3 py-0.5 min-w-24;
+
+                .close-icon {
+                    @apply mt-1 opacity-70;
+                }
+
+                &.primary {
+                    @apply bg-primary;
+                }
+
+                &.accent {
+                    @apply bg-accent;
+                }
+
+                &.warn {
+                    @apply bg-warn;
+                }
+            }
+        }
+    }
+}

package/src/lib/nice.theme.scss

@@ -8,19 +8,26 @@
 @import "./components/assets-carousel/assets-carousel.theme";
 @import "./components/base-form/base-form.theme";
 @import "./components/card/card.theme";
+@import "components/date-range-picker/date-range-picker.theme";
 @import "./components/drawer/drawer.theme";
 @import "./components/horizontal-stepper/horizontal-stepper.theme";
 @import "./components/navigation/horizontal/horizontal.theme";
 @import "./components/navigation/vertical/vertical.theme";
 @import "./components/toggle-button-group/toggle-button-group.theme";
+@import "./components/chip-list/chip-list.theme";
+@import "./directives/chip-list/chip-list-items/chip-list-items.theme";
+
 @mixin nice-components-theme($theme) {
     @include nice-alert-theme($theme);
     @include nice-assets-carousel-theme($theme);
     @include nice-base-form-theme($theme);
     @include nice-card-theme($theme);
+    @include nice-date-picker-theme($theme);
     @include nice-drawer-theme($theme);
     @include nice-horizontal-stepper-theme($theme);
     @include nice-toggle-button-group-theme($theme);
+    @include nice-chip-list-theme($theme);
+    @include nice-chip-list-items-theme($theme);
 }
 
 @mixin nice-custom-theme($theme) {