@tilde-nlp/ngx-common 2.0.10 → 2.0.12

package/lib/filter-bar/filter-bar.component.d.ts

@@ -1,10 +1,10 @@
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnInit } from '@angular/core';
-import { MatSelectChange } from '@angular/material/select';
-import { FilterBarFilter } from './models';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { FilterBarFilterItem } from './models';
 import { FilterBarChangeEvent } from './models/filter-bar-change-event.model';
 import { FilterBarSettings } from './models/filter-bar-settings.model';
 import * as i0 from "@angular/core";
-export declare class FilterBarComponent implements OnInit, AfterViewInit {
+export declare class FilterBarComponent implements OnInit, AfterViewInit, OnDestroy {
     private cdref;
     private _inputText;
     get inputText(): string;
@@ -18,19 +18,35 @@ export declare class FilterBarComponent implements OnInit, AfterViewInit {
     filterOverflow: boolean;
     filterBarChange: EventEmitter<FilterBarChangeEvent>;
     get showSearch(): boolean;
-    get fields(): FilterBarFilter[];
+    get fields(): import("./models").FilterBarFilter[];
     settings: FilterBarSettings;
+    /** To hide filters, but leave chips visible */
+    private _filterRowVisible;
+    set filterRowVisible(value: boolean);
+    get filterRowVisible(): boolean;
     filterWrapper: ElementRef;
     onResize(): void;
+    private formChangesSubscription;
+    readonly inputFormControlName = "input";
+    readonly filterFormGroup: FormGroup<{}>;
+    readonly form: FormGroup<{
+        input: FormControl<string | null>;
+        filters: FormGroup<{}>;
+    }>;
+    get filterFormGroupValue(): {
+        [key: string]: FilterBarFilterItem[];
+    };
     private readonly defaultScrollWidth;
     constructor(cdref: ChangeDetectorRef);
     ngOnInit(): void;
     ngAfterViewInit(): void;
-    filterChange(filter: FilterBarFilter, event: MatSelectChange): void;
+    ngOnDestroy(): void;
     emitFilters(): void;
     scrollRight(): void;
     scrollLeft(): void;
+    removeFilter(key: string, ix: number): void;
     private checkOverflow;
+    private subscribeToFormValueChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FilterBarComponent, "tld-filter-bar", never, { "settings": "settings"; }, { "filterBarChange": "filterBarChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterBarComponent, "tld-filter-bar", never, { "settings": "settings"; "filterRowVisible": "filterRowVisible"; }, { "filterBarChange": "filterBarChange"; }, never, never, false>;
 }

package/lib/filter-bar/filter-bar.module.d.ts

@@ -9,8 +9,10 @@ import * as i7 from "@angular/material/select";
 import * as i8 from "@angular/forms";
 import * as i9 from "@angular/material/tooltip";
 import * as i10 from "@angular/material/button";
+import * as i11 from "@angular/material/chips";
+import * as i12 from "@angular/material/icon";
 export declare class FilterBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FilterBarModule, [typeof i1.FilterBarComponent], [typeof i2.CommonModule, typeof i3.TranslateModule, typeof i4.MatInputModule, typeof i5.MatFormFieldModule, typeof i6.FlexLayoutModule, typeof i7.MatSelectModule, typeof i8.FormsModule, typeof i9.MatTooltipModule, typeof i10.MatButtonModule], [typeof i1.FilterBarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FilterBarModule, [typeof i1.FilterBarComponent], [typeof i2.CommonModule, typeof i3.TranslateModule, typeof i4.MatInputModule, typeof i5.MatFormFieldModule, typeof i6.FlexLayoutModule, typeof i7.MatSelectModule, typeof i8.FormsModule, typeof i9.MatTooltipModule, typeof i10.MatButtonModule, typeof i11.MatChipsModule, typeof i12.MatIconModule, typeof i8.ReactiveFormsModule], [typeof i1.FilterBarComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FilterBarModule>;
 }

package/lib/multi-functional-table/models/export-config.model.d.ts

@@ -1,10 +1,6 @@
 import { ExportFormat } from "./export-format.enum";
 export interface ExportConfig {
     enabled: boolean;
-    /**
-     * If column should not be exported even if it is visible.
-     */
-    ignoreAttributeName?: string;
     fileOptions?: {
         format?: ExportFormat;
         saveToFile: boolean;

package/lib/multi-functional-table/multi-functional-table.component.d.ts

@@ -28,11 +28,13 @@ export declare class MultiFunctionalTableComponent<T> implements OnInit, AfterCo
     table: MatTable<T>;
     sort: MatSort;
     tableElementRef: ElementRef<HTMLElement>;
+    get ignoreAttributeName(): string;
     displayColumns: string[];
     columnSelectActive: boolean;
     get filterActive(): boolean | undefined;
     exportActive: boolean;
     noDataRowActive: boolean;
+    filterEnabled: boolean;
     filterBarVisible: boolean;
     filterSettings: FilterBarSettings;
     noDataRowConfig: NoDataRowConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tilde-nlp/ngx-common",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "peerDependencies": {
     "@angular/common": "^14.0.0",
     "@angular/core": "^14.0.0",

package/styles/components/buttons.scss

@@ -12,7 +12,7 @@
 /// ----------------------------------------
 
 
-
+[mat-menu-item].align-v-middle *,
 button.align-v-middle * {
   vertical-align: middle;
 }

package/styles/components/dialogs.scss

@@ -1,6 +1,15 @@
+@use "../variables/font-size.variables.scss" as fs;
+
 .mat-dialog-container {
   min-width: 22rem;
   width: 40rem !important;
+
+  h1[mat-dialog-title].mat-dialog-title,
+  [mat-dialog-title].mat-dialog-title h1 {
+    font-size: fs.$font-size-2-xl  !important;
+    font-weight: 600 !important;
+    margin-bottom: 0 !important;
+  }
 }
 
 [mat-dialog-actions] {

package/styles/mixins/material-overrides/mat-button-overrides.mixin.scss

@@ -4,9 +4,17 @@
   @each $key,
   $value in $color-map {
 
-    .mat-button.mat-#{$key},
+    .mat-button.mat-#{$key} {
+      color: var(--#{$key}) !important;
+
+      &:hover {
+        color: var(--#{$key}) !important;
+      }
+    }
+
     .mat-stroked-button.mat-#{$key} {
       color: var(--#{$key}) !important;
+      border-color: var(--#{$key}) !important;
 
       &:hover {
         color: var(--#{$key}) !important;