@recursyve/nice-ui-kit.v2 13.2.0-beta.99 → 14.0.0-beta.101

package/lib/pipes/localized-currency.pipe.d.ts

@@ -6,5 +6,5 @@ export declare class LocalizedCurrencyPipe extends CurrencyPipe implements PipeT
     private readonly translateService;
     constructor(translateService: TranslateService);
     static ɵfac: i0.ɵɵFactoryDeclaration<LocalizedCurrencyPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<LocalizedCurrencyPipe, "localizedCurrency">;
+    static ɵpipe: i0.ɵɵPipeDeclaration<LocalizedCurrencyPipe, "localizedCurrency", false>;
 }

package/lib/pipes/localized-date-only.pipe.d.ts

@@ -6,5 +6,5 @@ export declare class LocalizedDateOnlyPipe implements PipeTransform {
     constructor(translateService: TranslateService);
     transform(value: any, pattern?: string, fallbackWithNull?: boolean): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<LocalizedDateOnlyPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<LocalizedDateOnlyPipe, "localizedDateOnly">;
+    static ɵpipe: i0.ɵɵPipeDeclaration<LocalizedDateOnlyPipe, "localizedDateOnly", false>;
 }

package/lib/pipes/localized-date.pipe.d.ts

@@ -7,5 +7,5 @@ export declare class LocalizedDatePipe implements PipeTransform {
     transform(value: any, pattern?: string, fallbackWithNull?: boolean, timeZone?: string): string;
     private getMediumDateWithoutYearPattern;
     static ɵfac: i0.ɵɵFactoryDeclaration<LocalizedDatePipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<LocalizedDatePipe, "localizedDate">;
+    static ɵpipe: i0.ɵɵPipeDeclaration<LocalizedDatePipe, "localizedDate", false>;
 }

package/lib/pipes/minutes-to-time.pipe.d.ts

@@ -3,5 +3,5 @@ import * as i0 from "@angular/core";
 export declare class MinutesToTimePipe implements PipeTransform {
     transform(totalMinutes: number, separator?: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MinutesToTimePipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<MinutesToTimePipe, "minutesToTime">;
+    static ɵpipe: i0.ɵɵPipeDeclaration<MinutesToTimePipe, "minutesToTime", false>;
 }

package/lib/pipes/number-to-ordinal-indicator.pipe.d.ts

@@ -3,5 +3,5 @@ import * as i0 from "@angular/core";
 export declare class NumberToOrdinalIndicatorPipe implements PipeTransform {
     transform(value: number): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<NumberToOrdinalIndicatorPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<NumberToOrdinalIndicatorPipe, "numberToOrdinalIndicator">;
+    static ɵpipe: i0.ɵɵPipeDeclaration<NumberToOrdinalIndicatorPipe, "numberToOrdinalIndicator", false>;
 }

package/lib/pipes/pad.pipe.d.ts

@@ -3,5 +3,5 @@ import * as i0 from "@angular/core";
 export declare class PadPipe implements PipeTransform {
     transform(value: number | string, length: number, direction?: "start" | "end", maxLength?: number, fillString?: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<PadPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<PadPipe, "pad">;
+    static ɵpipe: i0.ɵɵPipeDeclaration<PadPipe, "pad", false>;
 }

package/lib/pipes/phone.pipe.d.ts

@@ -6,5 +6,5 @@ export declare class PhonePipe implements PipeTransform {
     constructor(maskApplierService: MaskApplierService);
     transform(rawPhoneNumber: string, extension?: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<PhonePipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<PhonePipe, "phone">;
+    static ɵpipe: i0.ɵɵPipeDeclaration<PhonePipe, "phone", false>;
 }

package/lib/pipes/postal-code.pipe.d.ts

@@ -6,5 +6,5 @@ export declare class PostalCodePipe implements PipeTransform {
     constructor(maskApplierService: MaskApplierService);
     transform(postalCode: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<PostalCodePipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<PostalCodePipe, "postalCode">;
+    static ɵpipe: i0.ɵɵPipeDeclaration<PostalCodePipe, "postalCode", false>;
 }

package/lib/pipes/range.pipe.d.ts

@@ -3,5 +3,5 @@ import * as i0 from "@angular/core";
 export declare class RangePipe implements PipeTransform {
     transform(value: number): number[];
     static ɵfac: i0.ɵɵFactoryDeclaration<RangePipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<RangePipe, "range">;
+    static ɵpipe: i0.ɵɵPipeDeclaration<RangePipe, "range", false>;
 }

package/lib/pipes/round.pipe.d.ts

@@ -3,5 +3,5 @@ import * as i0 from "@angular/core";
 export declare class RoundPipe implements PipeTransform {
     transform(input: number): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<RoundPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<RoundPipe, "round">;
+    static ɵpipe: i0.ɵɵPipeDeclaration<RoundPipe, "round", false>;
 }

package/lib/pipes/sanitize-bypass.pipe.d.ts

@@ -6,5 +6,5 @@ export declare class SanitizeBypassPipe implements PipeTransform {
     constructor(sanitizer: DomSanitizer);
     transform(value: any, bypass: "html" | "style"): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<SanitizeBypassPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<SanitizeBypassPipe, "sanitizeBypass">;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SanitizeBypassPipe, "sanitizeBypass", false>;
 }

package/lib/pipes/seconds-to-time.pipe.d.ts

@@ -3,5 +3,5 @@ import * as i0 from "@angular/core";
 export declare class SecondsToTimePipe implements PipeTransform {
     transform(value: number, separator?: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<SecondsToTimePipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<SecondsToTimePipe, "secondsToTime">;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SecondsToTimePipe, "secondsToTime", false>;
 }

package/lib/utils/array.utils.d.ts

@@ -8,7 +8,7 @@ export declare class ArrayUtils {
     }): boolean;
     private static unorderedShallowEquals;
     static sortByKey(array: any[], key: string): any[];
-    static sortByKeyFn(key: string): (a: any, b: any) => 0 | 1 | -1;
+    static sortByKeyFn(key: string): (a: any, b: any) => 1 | -1 | 0;
     static groupBy<Item, Key, Value>(array: Item[], keySelector: (item: Item) => Key, valueSelector: (item: Item) => Value[] | Value): Map<Key, Value[]>;
 }
 declare global {

package/lib/utils/keyboard.utils.d.ts

@@ -2,5 +2,6 @@ export declare enum KeyboardCodes {
     ArrowUp = "ArrowUp",
     ArrowDown = "ArrowDown",
     Enter = "Enter",
-    Shift = "Shift"
+    Shift = "Shift",
+    Comma = "Comma"
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@recursyve/nice-ui-kit.v2",
-  "version": "13.2.0-beta.99",
+  "version": "14.0.0-beta.101",
   "exports": {
     ".": {
       "sass": "./_index.scss",
-      "types": "./recursyve-nice-ui-kit.v2.d.ts",
+      "types": "./index.d.ts",
       "esm2020": "./esm2020/recursyve-nice-ui-kit.v2.mjs",
       "es2020": "./fesm2020/recursyve-nice-ui-kit.v2.mjs",
       "es2015": "./fesm2015/recursyve-nice-ui-kit.v2.mjs",
@@ -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",
@@ -37,6 +37,6 @@
   "esm2020": "esm2020/recursyve-nice-ui-kit.v2.mjs",
   "fesm2020": "fesm2020/recursyve-nice-ui-kit.v2.mjs",
   "fesm2015": "fesm2015/recursyve-nice-ui-kit.v2.mjs",
-  "typings": "recursyve-nice-ui-kit.v2.d.ts",
+  "typings": "index.d.ts",
   "sideEffects": false
 }

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/collapsable/collapsable.theme.scss

@@ -0,0 +1,51 @@
+/* From https://github.com/saadeghi/daisyui/blob/master/src/components/unstyled/collapse.css */
+
+@mixin nice-collapsable-theme($theme) {
+    nice-collapsable {
+        .collapse.collapse {
+            @apply visible;
+        }
+        .collapse {
+            @apply relative grid overflow-hidden;
+        }
+        .collapse-title,
+        .collapse > input[type="checkbox"],
+        .collapse-content {
+            @apply col-start-1 row-start-1;
+        }
+        .collapse > input[type="checkbox"] {
+            @apply opacity-0;
+
+            appearance: none;
+            -webkit-appearance: none;
+            -ms-progress-appearance: none;
+        }
+        .collapse-content {
+            @apply row-start-2 overflow-hidden;
+            max-height: 0px;
+        }
+        .collapse-open .collapse-content,
+        .collapse:focus:not(.collapse-close) .collapse-content,
+        .collapse:not(.collapse-close)
+        input[type="checkbox"]:checked
+        ~ .collapse-content {
+            max-height: 9000px;
+        }
+
+        .collapse-title {
+            @apply bg-card p-4;
+        }
+
+        .peer:hover ~ .collapse-title {
+            @apply shadow-2xl;
+        }
+
+        .collapse-content {
+            @apply bg-card;
+        }
+
+        .peer:checked ~ .collapse-content {
+            @apply p-4;
+        }
+    }
+}

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/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);