@recursyve/nice-ui-kit.v2 17.0.0-beta.140 → 18.0.0-beta.144

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from "@angular/core";
 import { PictureModalService } from "./picture-modal/picture-modal.service";
+import { NiceCarouselIconOptions } from "./interfaces/carousel-options.interface";
 import * as i0 from "@angular/core";
 export interface Picture {
     id: number;
@@ -7,15 +8,16 @@ export interface Picture {
 }
 export declare class CarouselComponent {
     private pictureModalService;
+    icons?: NiceCarouselIconOptions;
     currentImages: Picture[];
     set images(urls: Picture[]);
     direction: "ltr" | "rtl" | "utd" | "dtu";
     layout: "row" | "column";
     editable: boolean;
     delete: EventEmitter<Picture>;
-    constructor(pictureModalService: PictureModalService);
+    constructor(pictureModalService: PictureModalService, icons?: NiceCarouselIconOptions);
     clickView(picture: Picture): void;
     clickDelete(picture: Picture): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CarouselComponent, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CarouselComponent, [null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CarouselComponent, "nice-carousel", never, { "images": { "alias": "images"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, { "delete": "delete"; }, never, never, false, never>;
 }

package/lib/components/carousel/carousel.constant.d.ts

@@ -0,0 +1,2 @@
+import { InjectionToken } from "@angular/core";
+export declare const CAROUSEL_ICONS: InjectionToken<unknown>;

package/lib/components/carousel/carousel.module.d.ts

@@ -1,3 +1,5 @@
+import { ModuleWithProviders } from "@angular/core";
+import { NiceCarouselOptions } from "./interfaces/carousel-options.interface";
 import * as i0 from "@angular/core";
 import * as i1 from "./carousel.component";
 import * as i2 from "./picture-modal/picture-modal.component";
@@ -8,6 +10,7 @@ import * as i6 from "@angular/material/button";
 import * as i7 from "@ngx-translate/core";
 import * as i8 from "@angular/material/icon";
 export declare class NiceCarouselModule {
+    static forRoot(options?: NiceCarouselOptions): ModuleWithProviders<NiceCarouselModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NiceCarouselModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<NiceCarouselModule, [typeof i1.CarouselComponent, typeof i2.PictureModalComponent, typeof i3.CarouselLayoutPipe], [typeof i4.CommonModule, typeof i5.MatCardModule, typeof i6.MatButtonModule, typeof i7.TranslateModule, typeof i8.MatIconModule], [typeof i1.CarouselComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NiceCarouselModule>;

package/lib/components/carousel/interfaces/carousel-options.interface.d.ts

@@ -0,0 +1,9 @@
+export type NiceCarouselIcons = {
+    svgIcon: string;
+};
+export interface NiceCarouselIconOptions {
+    remove?: NiceCarouselIcons;
+}
+export interface NiceCarouselOptions {
+    icons?: NiceCarouselIconOptions;
+}

package/lib/components/form-error/control-status.directive.d.ts

@@ -10,10 +10,10 @@ export declare class NiceControlStatusDirective implements AfterViewInit, OnDest
     private ref;
     private control;
     private unsubscribeAll$;
+    onChange: () => void;
     constructor(el: ElementRef<HTMLElement>, vcr: ViewContainerRef, formField: MatFormField, translateService: TranslateService);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    onChange(): void;
     setError(text: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NiceControlStatusDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NiceControlStatusDirective, "[niceControlStatus]", never, {}, {}, never, never, false, never>;

package/lib/components/translation-form/directives/translation-context.directive.d.ts

@@ -1,9 +1,10 @@
-import { OnDestroy, OnInit } from "@angular/core";
+import { EventEmitter, OnDestroy, OnInit } from "@angular/core";
 import { BehaviorSubject } from "rxjs";
 import { NiceTranslationFormService } from "../providers/nice-translation-form.service";
 import * as i0 from "@angular/core";
 export declare class TranslationContextDirective implements OnInit, OnDestroy {
     private translationFormService;
+    activeLanguageChange: EventEmitter<string>;
     activeLanguage$: BehaviorSubject<string>;
     private _unsubscribeAll$;
     constructor(translationFormService: NiceTranslationFormService);
@@ -12,5 +13,5 @@ export declare class TranslationContextDirective implements OnInit, OnDestroy {
     updateLanguage(language: string): void;
     reset(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TranslationContextDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TranslationContextDirective, "[niceTranslationContext]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TranslationContextDirective, "[niceTranslationContext]", never, {}, { "activeLanguageChange": "activeLanguageChange"; }, never, never, false, never>;
 }

package/lib/utils/file.utils.d.ts

@@ -2,6 +2,9 @@ export declare class FileUtils {
     static getFileFromUrl(url?: string, name?: string): Promise<File | undefined>;
     static selectFile(accept: string, multiple?: boolean): Promise<File | File[]>;
     static downloadFile(fileName: string, content: Blob, downloadLink?: HTMLAnchorElement): void;
+    static openFile(file: Blob, options?: {
+        openInNewTab: boolean;
+    }): void;
     static downloadUrl(url: string): void;
     static openPrintableWindow(content: string): void;
     static filenameToExtension(filename: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recursyve/nice-ui-kit.v2",
-  "version": "17.0.0-beta.140",
+  "version": "18.0.0-beta.144",
   "exports": {
     ".": {
       "sass": "./_index.scss",
@@ -14,13 +14,13 @@
     }
   },
   "peerDependencies": {
-    "@angular/cdk": "^17.0.0",
-    "@angular/common": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.0.0",
-    "@angular/material": "^17.0.0",
-    "@recursyve/ngx-form-generator": ">= 17.0.0-beta.50",
-    "ngx-mask": "^17.0.0",
+    "@angular/cdk": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/material": "^18.0.0",
+    "@recursyve/ngx-form-generator": ">= 18.0.0-beta.50",
+    "ngx-mask": "^18.0.0",
     "perfect-scrollbar": "^1.5.5",
     "uuid": ">= 9.0.0"
   },

package/src/lib/components/base-form/base-form.theme.scss

@@ -5,16 +5,16 @@
 
     .nice-form {
         .mat-step-icon-selected {
-            background-color: mat.get-color-from-palette($accent);
+            background-color: mat.m2-get-color-from-palette($accent);
         }
 
         .mat-step-icon-state-done {
-            background-color: mat.get-color-from-palette($accent, 400);
+            background-color: mat.m2-get-color-from-palette($accent, 400);
         }
 
         .mat-list-item {
             .field-group-icon {
-                color: mat.get-color-from-palette($accent);
+                color: mat.m2-get-color-from-palette($accent);
             }
         }
     }

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

@@ -36,7 +36,7 @@
 
         button {
             .mat-button-focus-overlay {
-                background: mat.get-color-from-palette($accent) !important;
+                background: mat.m2-get-color-from-palette($accent) !important;
             }
         }
 

package/src/lib/components/horizontal-stepper/horizontal-stepper.theme.scss

@@ -6,11 +6,11 @@
 
     nice-horizontal-stepper {
         .step {
-            background: mat.get-color-from-palette($primary, 500, 0.3);
+            background: mat.m2-get-color-from-palette($primary, 500, 0.3);
         }
 
         .step.active {
-            background: mat.get-color-from-palette($accent);
+            background: mat.m2-get-color-from-palette($accent);
         }
     }
 }

package/src/lib/components/toggle-button-group/toggle-button-group.theme.scss

@@ -15,19 +15,19 @@
                 &.selected {
                     &.bg-selected-accent {
                         .toggle-button-inner {
-                            color: mat.get-color-from-palette($accent, default-contrast);
+                            color: mat.m2-get-color-from-palette($accent, default-contrast);
                         }
                     }
 
                     &.bg-selected-primary {
                         .toggle-button-inner {
-                            color: mat.get-contrast-color-from-palette($primary, 500);
+                            color: mat.m2-get-contrast-color-from-palette($primary, 500);
                         }
                     }
 
                     &.bg-selected-warn {
                         .toggle-button-inner {
-                            color: mat.get-contrast-color-from-palette($warn, 500);
+                            color: mat.m2-get-contrast-color-from-palette($warn, 500);
                         }
                     }
                 }

package/src/lib/nice.theme.scss

@@ -85,7 +85,7 @@
 
     .mat-tab-group:not(.keep-material-style) {
         &.mat-accent .mat-tab-label-active, .mat-tab-label:focus:not(.mat-tab-disabled) {
-            color: mat.get-color-from-palette($accent);
+            color: mat.m2-get-color-from-palette($accent);
         }
     }
 }
@@ -206,7 +206,7 @@ $palettes: ();
     set. We can just create one light and one dark theme and then switch the
     CSS Custom Properties to dynamically switch the colors. */
 @function nice-light-theme() {
-    $base-light-theme: mat.define-light-theme((
+    $base-light-theme: mat.m2-define-light-theme((
             color: ($palettes)
     ));
 
@@ -233,7 +233,7 @@ $palettes: ();
 }
 
 @function nice-dark-theme() {
-    $base-dark-theme: mat.define-dark-theme((
+    $base-dark-theme: mat.m2-define-dark-theme((
             color: ($palettes)
     ));
 
@@ -266,21 +266,21 @@ $palettes: ();
     @include mat.all-component-themes((
             color: null,
             density: 0,
-            typography: mat.define-typography-config(
+            typography: mat.m2-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'))
+                $headline-1: mat.m2-define-typography-level(1.875rem, 2.25rem, 800, theme('fontFamily.sans')),
+                $headline-2: mat.m2-define-typography-level(1.25rem, 1.75rem, 700, theme('fontFamily.sans')),
+                $headline-3: mat.m2-define-typography-level(1.125rem, 1.75rem, 600, theme('fontFamily.sans')),
+                $headline-4: mat.m2-define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
+                $headline-5: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+                $headline-6: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+                $subtitle-1: mat.m2-define-typography-level(1rem, 1.75rem, 400, theme('fontFamily.sans')),
+                $subtitle-2: mat.m2-define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
+                $body-1: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+                $body-2: mat.m2-define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+                $caption: mat.m2-define-typography-level(0.75rem, 1rem, 400, theme('fontFamily.sans')),
+                $button: mat.m2-define-typography-level(0.875rem, 0.875rem, 500, theme('fontFamily.sans')),
+                $overline: mat.m2-define-typography-level(0.75rem, 2rem, 500, theme('fontFamily.sans'))
             )
     ));