@recursyve/nice-ui-kit.v2 14.0.0-beta.98 → 15.0.0-beta.119

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

@@ -12,7 +12,11 @@
             @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;
+                @apply flex flex-row items-center justify-start rounded-3xl gap-3 px-3 py-1 min-w-24;
+
+                button {
+                    @apply w-6 h-6;
+                }
 
                 .close-icon {
                     @apply mt-1 opacity-70;

package/src/lib/nice.theme.scss

@@ -8,6 +8,8 @@
 @import "./components/assets-carousel/assets-carousel.theme";
 @import "./components/base-form/base-form.theme";
 @import "./components/card/card.theme";
+@import "./components/collapsable/collapsable.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";
@@ -21,6 +23,8 @@
     @include nice-assets-carousel-theme($theme);
     @include nice-base-form-theme($theme);
     @include nice-card-theme($theme);
+    @include nice-collapsable-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);
@@ -257,15 +261,28 @@ $palettes: ();
 
 @mixin core() {
     /** Include the core Angular Material styles */
-    @include mat.core(
-        mat.define-typography-config(
-            $font-family: theme('fontFamily.sans'),
-            $title: mat.define-typography-level(1.25rem, 2rem, 600),
-            $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
-            $button: mat.define-typography-level(0.875rem, 0.875rem, 500),
-            $input: mat.define-typography-level(0.875rem, 1.2857142857, 400) // line-height: 20px
-        )
-    );
+    @include mat.core();
+    /* Create a base theme without any color to set the density and typography */
+    @include mat.all-component-themes((
+            color: null,
+            density: 0,
+            typography: mat.define-typography-config(
+                $font-family: theme('fontFamily.sans'),
+                $headline-1: mat.define-typography-level(1.875rem, 2.25rem, 800, theme('fontFamily.sans')),
+                $headline-2: mat.define-typography-level(1.25rem, 1.75rem, 700, theme('fontFamily.sans')),
+                $headline-3: mat.define-typography-level(1.125rem, 1.75rem, 600, theme('fontFamily.sans')),
+                $headline-4: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
+                $headline-5: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+                $headline-6: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+                $subtitle-1: mat.define-typography-level(1rem, 1.75rem, 400, theme('fontFamily.sans')),
+                $subtitle-2: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
+                $body-1: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+                $body-2: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+                $caption: mat.define-typography-level(0.75rem, 1rem, 400, theme('fontFamily.sans')),
+                $button: mat.define-typography-level(0.875rem, 0.875rem, 500, theme('fontFamily.sans')),
+                $overline: mat.define-typography-level(0.75rem, 2rem, 500, theme('fontFamily.sans'))
+            )
+    ));
 
     body.light,
     body .light {

package/styles/main.scss

@@ -1,7 +1,4 @@
-/* 1. Core */
-@import "core/tailwind-config";
-
-/* 3. Overrides */
+/* 1. Overrides */
 @import "overrides/angular-material";
 @import "overrides/fullcalendar";
 @import "overrides/perfect-scrollbar";