@recursyve/nice-data-filter-kit 13.0.1 → 13.0.5

package/lib/components/base-list/base-list.component.d.ts

@@ -1,10 +1,9 @@
 import { EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from "@angular/core";
-import { MediaObserver } from "@angular/flex-layout";
 import { MatBottomSheet } from "@angular/material/bottom-sheet";
 import { PageEvent } from "@angular/material/paginator";
 import { Sort } from "@angular/material/sort";
 import { ActivatedRoute, Router } from "@angular/router";
-import { ExportStrategy } from "@recursyve/nice-ui-kit.v2";
+import { ExportStrategy, NiceMediaWatcherService } from "@recursyve/nice-ui-kit.v2";
 import { Observable } from "rxjs";
 import { FilterConfigurationModel } from "../../models/filter.model";
 import { QueryModel, QueryRuleModel } from "../../models/query.model";
@@ -25,7 +24,7 @@ export declare class NiceBaseListComponent implements OnInit, OnDestroy, OnChang
     private readonly activatedRoute;
     private readonly bottomSheet;
     private readonly router;
-    private mediaObserver;
+    private readonly mediaWatcher;
     title: TemplateRef<any>;
     buttons: NiceBaseListButtonsDirective[];
     table: TemplateRef<any>;
@@ -64,7 +63,7 @@ export declare class NiceBaseListComponent implements OnInit, OnDestroy, OnChang
     rules$: Observable<QueryModel[]>;
     rulesCount$: Observable<number>;
     private searchText$;
-    constructor(enableQueryBuilder: boolean, listLayout: BaseListLayout, columns: TableColumns[], exportsSettings: ExportSettings, query: NiceBaseListQuery, service: NiceBaseListService, activatedRoute: ActivatedRoute, bottomSheet: MatBottomSheet, router: Router, mediaObserver: MediaObserver);
+    constructor(enableQueryBuilder: boolean, listLayout: BaseListLayout, columns: TableColumns[], exportsSettings: ExportSettings, query: NiceBaseListQuery, service: NiceBaseListService, activatedRoute: ActivatedRoute, bottomSheet: MatBottomSheet, router: Router, mediaWatcher: NiceMediaWatcherService);
     get prefixButtons(): TemplateRef<any> | undefined;
     get suffixButtons(): TemplateRef<any> | undefined;
     ngOnInit(): Promise<void>;

package/lib/components/multi-state-list/multi-state-list.component.d.ts

@@ -1,6 +1,6 @@
-import { MediaObserver } from "@angular/flex-layout";
 import { MatBottomSheet } from "@angular/material/bottom-sheet";
 import { ActivatedRoute, Router } from "@angular/router";
+import { NiceMediaWatcherService } from "@recursyve/nice-ui-kit.v2";
 import { NiceBaseListComponent } from "../base-list/base-list.component";
 import { ExportSettings } from "../base-list/models/export.model";
 import { BaseListLayout } from "../base-list/models/layout.model";
@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
 export declare class NiceMultiStateListComponent extends NiceBaseListComponent {
     private multiStateListService;
     set state(state: string);
-    constructor(enableQueryBuilder: boolean, listLayout: BaseListLayout, exportsSetting: ExportSettings, query: NiceMultiStateListQuery, activatedRoute: ActivatedRoute, bottomSheet: MatBottomSheet, router: Router, mediaObserver: MediaObserver, multiStateListService: NiceMultiStateListService);
+    constructor(enableQueryBuilder: boolean, listLayout: BaseListLayout, exportsSetting: ExportSettings, query: NiceMultiStateListQuery, activatedRoute: ActivatedRoute, bottomSheet: MatBottomSheet, router: Router, mediaWatcher: NiceMediaWatcherService, multiStateListService: NiceMultiStateListService);
     private switchState;
     static ɵfac: i0.ɵɵFactoryDeclaration<NiceMultiStateListComponent, [{ optional: true; }, null, null, null, null, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NiceMultiStateListComponent, "nice-multi-state-list", never, { "state": "state"; }, {}, never, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recursyve/nice-data-filter-kit",
-  "version": "13.0.1",
+  "version": "13.0.5",
   "exports": {
     ".": {
       "sass": "./_index.scss",
@@ -16,15 +16,14 @@
     }
   },
   "peerDependencies": {
-    "@angular/cdk": "~13.0.0",
-    "@angular/common": "~13.0.0",
-    "@angular/core": "~13.0.0",
-    "@angular/flex-layout": "^13.0.0-beta.36",
-    "@angular/forms": "~13.0.0",
-    "@angular/material": "~13.0.0",
+    "@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",
     "@datorama/akita": "^7.0.0",
     "@ngx-translate/core": "^14.0.0",
-    "@recursyve/nice-ui-kit.v2": "^13.0.0-beta.42",
+    "@recursyve/nice-ui-kit.v2": "^13.0.0-beta.44",
     "@recursyve/ngx-form-generator": "^13.0.0-beta.19"
   },
   "dependencies": {

package/src/lib/components/query-builder/filter-selection/filter-selection.theme.scss

@@ -0,0 +1,41 @@
+@mixin filter-selection-theme() {
+    nice-filter-selection {
+        .filter-selection-container {
+            min-width: 150px;
+            min-height: 150px;
+            max-width: 600px;
+            padding: 8px;
+
+            .mat-list {
+                &.double-groups {
+                    max-width: 50%;
+                }
+
+                &:not(.double-groups) {
+                    max-width: 100%;
+                }
+            }
+        }
+
+        .mat-list-item {
+            height: auto !important;
+            min-height: 32px !important;
+
+            strong {
+                font-weight: 700 !important;
+            }
+
+            &.filter {
+                padding: 8px 24px;
+                cursor: pointer;
+                user-select: none;
+
+                font-size: 14px !important;
+
+                @screen md {
+                    padding: 8px 48px;
+                }
+            }
+        }
+    }
+}

package/src/lib/components/query-builder/query-builder.theme.scss

@@ -1,6 +1,8 @@
+@import "./filter-selection/filter-selection.theme";
 @import "./rule/rule.theme";
 
 @mixin nice-query-builder-theme($theme) {
+    @include filter-selection-theme();
     @include rule-theme($theme);
 
     $background: map-get($theme, background);

package/src/lib/components/query-builder/rule/rule.theme.scss

@@ -6,6 +6,88 @@
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
 
+    nice-rule {
+        background: transparent;
+
+        .select-filter {
+            @apply flex flex-full;
+
+            height: 36px;
+            max-width: 150px;
+        }
+
+        .config-name {
+            @apply flex flex-full flex-grow-0 truncate;
+
+            max-width: 90px;
+        }
+
+        .config-name-icon {
+            @apply flex flex-full;
+
+            max-width: 24px;
+        }
+
+        .rule-operator {
+            @apply flex flex-full;
+
+            max-width: 100%;
+
+            @screen md {
+                max-width: 150px;
+            }
+        }
+
+        .aligned-button,
+        .select-filter {
+            margin-bottom: 1.25em;
+        }
+
+        .aligned-text {
+            margin-bottom: 2em;
+        }
+
+        .filter-select {
+            margin-top: -14px;
+        }
+
+        .mat-form-field-infix {
+            border: none;
+            max-width: 150px;
+
+            @screen md {
+                max-width: none;
+            }
+        }
+
+        .rule-form-field {
+            flex: 0 0 188px;
+            max-width: 188px;
+            min-width: 188px;
+            width: 90%;
+
+            @screen md {
+                width: auto;
+            }
+        }
+
+        .rule-container {
+            padding: 0;
+            max-width: 100%;
+
+            &.is-single-input {
+                @screen md {
+                    max-width: 50%;
+                }
+            }
+
+            @screen md {
+                padding-left: 12px;
+                padding-right: 12px;
+            }
+        }
+    }
+
     .or-button {
         background: map-get($background, card) !important;
         color: map-get($foreground, text) !important;