@tilde-nlp/ngx-common 2.0.0 → 2.0.2

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

@@ -0,0 +1,36 @@
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnInit } from '@angular/core';
+import { MatSelectChange } from '@angular/material/select';
+import { FilterBarFilter } 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 {
+    private cdref;
+    private _inputText;
+    get inputText(): string;
+    set inputText(value: string);
+    searchTitle: string;
+    searchTooltip: string;
+    suffixIcon: string;
+    prefixIcon: string;
+    showSuffixIcon: boolean;
+    filters: FilterBarChangeEvent;
+    filterOverflow: boolean;
+    filterBarChange: EventEmitter<FilterBarChangeEvent>;
+    get showSearch(): boolean;
+    get fields(): FilterBarFilter[];
+    settings: FilterBarSettings;
+    filterWrapper: ElementRef;
+    onResize(): void;
+    private readonly defaultScrollWidth;
+    constructor(cdref: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    filterChange(filter: FilterBarFilter, event: MatSelectChange): void;
+    emitFilters(): void;
+    scrollRight(): void;
+    scrollLeft(): void;
+    private checkOverflow;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FilterBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterBarComponent, "tld-filter-bar", never, { "settings": "settings"; }, { "filterBarChange": "filterBarChange"; }, never, never, false>;
+}

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

@@ -0,0 +1,16 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./filter-bar.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@ngx-translate/core";
+import * as i4 from "@angular/material/input";
+import * as i5 from "@angular/material/form-field";
+import * as i6 from "@angular/flex-layout";
+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";
+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 ɵinj: i0.ɵɵInjectorDeclaration<FilterBarModule>;
+}

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

@@ -0,0 +1,3 @@
+export * from './filter-bar.component';
+export * from './filter-bar.module';
+export * from './models';

package/lib/filter-bar/models/filter-bar-change-event.model.d.ts

@@ -0,0 +1,6 @@
+export interface FilterBarChangeEvent {
+    input: string;
+    filters: {
+        [fieldName: string]: any[];
+    };
+}

package/lib/filter-bar/models/filter-bar-filter-item.model.d.ts

@@ -0,0 +1,4 @@
+export interface FilterBarFilterItem {
+    key: string;
+    value: any;
+}

package/lib/filter-bar/models/filter-bar-filter.model.d.ts

@@ -0,0 +1,6 @@
+import { FilterBarFilterItem } from "./filter-bar-filter-item.model";
+export interface FilterBarFilter {
+    fieldName: string;
+    title: string;
+    values: FilterBarFilterItem[];
+}

package/lib/filter-bar/models/filter-bar-settings.model.d.ts

@@ -0,0 +1,19 @@
+import { FilterBarFilter } from "./filter-bar-filter.model";
+export interface FilterBarSettings {
+    /** Show/hide search input. Enabled by default. */
+    hideSearch?: boolean;
+    /**
+     * Title for search input field. Default value: FILTER_BAR.SEARCH
+     */
+    searchTitle?: string;
+    /**
+     * Search tooltip, shown after input field for icon
+     */
+    searchTooltip?: string;
+    /** Prefix icon from material icons. */
+    prefixIcon?: string;
+    /** Suffix icon from material icons. */
+    suffixIcon?: string;
+    showSuffixIcon?: boolean;
+    filters?: FilterBarFilter[];
+}

package/lib/filter-bar/models/index.d.ts

@@ -0,0 +1,3 @@
+export * from './filter-bar-filter.model';
+export * from './filter-bar-settings.model';
+export * from './filter-bar-filter-item.model';

package/lib/helpers/html-element-parse.helper.d.ts

@@ -0,0 +1,3 @@
+export declare class HtmlElementParseHelper {
+    static tableAsCsv(tableElement: HTMLElement): string;
+}

package/lib/helpers/index.d.ts

@@ -1 +1,3 @@
-export * from "./missing-translation-helper";
+export * from "./missing-translation.helper";
+export * from "./save-file.helper";
+export * from "./html-element-parse.helper";

package/lib/helpers/save-file.helper.d.ts

@@ -0,0 +1,3 @@
+export declare class SaveFileHelper {
+    static saveFile(content: string, fileName: string): void;
+}

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

@@ -0,0 +1,3 @@
+export * from './multi-functional-table.component';
+export * from './multi-functional-table.module';
+export * from './models';

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

@@ -0,0 +1,14 @@
+export interface ColumnConfig {
+    /**
+     * Column name. For column to dissapear/be visible, this must be the same as defined for mat-table columns.
+     */
+    name: string;
+    /**
+     * Display name. Component applies translate pipe to this.
+     */
+    displayName: string;
+    /**
+     * Default value to determine if column is selecetd.
+     */
+    selected: boolean;
+}

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

@@ -0,0 +1,14 @@
+import { ColumnConfig } from "./column-config.model";
+/**
+ * Multi functional table configuration for column selecting. Config responsible for configuring columns whose visibilty can be toggled.
+ */
+export interface ColumnSelectConfig {
+    /**
+     * Columns to whom visibility can be changed.
+     */
+    columns: ColumnConfig[];
+    /**
+     * If column select feature is enabled.
+     */
+    enabled?: boolean;
+}

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

@@ -0,0 +1,9 @@
+import { ExportFormat } from "./export-format.enum";
+export interface ExportConfig {
+    enabled: boolean;
+    fileOptions?: {
+        format?: ExportFormat;
+        saveToFile: boolean;
+        fileName: string;
+    };
+}

package/lib/multi-functional-table/models/export-format.enum.d.ts

@@ -0,0 +1,3 @@
+export declare enum ExportFormat {
+    CSV = "csv"
+}

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

@@ -0,0 +1,6 @@
+import { FilterBarSettings } from "../../filter-bar";
+export interface FilterConfig {
+    enabled: boolean;
+    settings: FilterBarSettings;
+    visible?: boolean;
+}

package/lib/multi-functional-table/models/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./multi-functional-table-config.model";
+export * from "./column-config.model";
+export * from "./column-select-config.model";
+export * from "./export-config.model";
+export * from "./export-format.enum";

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

@@ -0,0 +1,29 @@
+import { MatTableDataSource } from "@angular/material/table";
+import { ColumnSelectConfig } from "./column-select-config.model";
+import { ExportConfig } from "./export-config.model";
+import { FilterConfig } from "./filter-config.model";
+/**
+ * Configuration for table with multiple predefined actoins against mat table.
+ */
+export interface MultiFunctionalTableConfig<T> {
+    /**
+     * Mat table dataSource
+     */
+    dataSource: MatTableDataSource<T>;
+    /**
+     * Configuration for toggling displayed columns in mat table
+     */
+    columnSelect?: ColumnSelectConfig;
+    /**
+     * Configuration for filters. For filtering custom filterBar component is used. Note that component does not filter datasource by itself but only emits event when filters are changed.
+     */
+    filter?: FilterConfig;
+    /**
+     * Configuration for exporting data.
+     */
+    export?: ExportConfig;
+    /**
+     * Local storage key to store selected columns and filter visibilty.
+     */
+    localStorageKey?: string;
+}

package/lib/multi-functional-table/models/selected-column-local-storage-config.model.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Object type that is stored in local storage for remembering user choices.
+ */
+export interface SelectedColumnLocalStorageConfig {
+    /**
+     * Settings related to column select.
+     */
+    columns?: {
+        /**
+         * Wether given column was selected.
+         */
+        [columnName: string]: boolean;
+    };
+    /**
+     * Filter settings.
+     */
+    filter?: {
+        visible?: boolean;
+    };
+}

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

@@ -0,0 +1,48 @@
+import { AfterContentInit, AfterViewInit, ElementRef, EventEmitter, OnInit, QueryList } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { MatColumnDef, MatHeaderRowDef, MatNoDataRow, MatRowDef, MatTable } from '@angular/material/table';
+import { TranslateService } from '@ngx-translate/core';
+import { FilterBarSettings } from '../filter-bar';
+import { FilterBarChangeEvent } from '../filter-bar/models/filter-bar-change-event.model';
+import { DOMService } from '../services';
+import { ColumnConfig } from './models/column-config.model';
+import { MultiFunctionalTableConfig } from './models/multi-functional-table-config.model';
+import * as i0 from "@angular/core";
+export declare class MultiFunctionalTableComponent<T> implements OnInit, AfterContentInit, AfterViewInit {
+    private readonly domService;
+    private readonly translateService;
+    config: MultiFunctionalTableConfig<T>;
+    filterBarChange: EventEmitter<FilterBarChangeEvent>;
+    exported: EventEmitter<T[]>;
+    headerRowDefs: QueryList<MatHeaderRowDef>;
+    rowDefs: QueryList<MatRowDef<T>>;
+    columnDefs: QueryList<MatColumnDef>;
+    noDataRow: MatNoDataRow;
+    table: MatTable<T>;
+    sort: MatSort;
+    tableElementRef: ElementRef<HTMLElement>;
+    displayColumns: string[];
+    columnSelectActive: boolean;
+    filterActive: boolean;
+    exportActive: boolean;
+    filterBarVisible: boolean;
+    filterSettings: FilterBarSettings;
+    columns: ColumnConfig[];
+    private localStorageValue;
+    constructor(domService: DOMService, translateService: TranslateService);
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    updateDisplayColumns(initial?: boolean): void;
+    toggleFilterBar(): void;
+    filtersChanged(filters: FilterBarChangeEvent): void;
+    export(): void;
+    private exportToFile;
+    private updateLocalStorage;
+    private readFromLocalStorage;
+    private setFilterProperties;
+    private setColumnProperties;
+    private setExportProperties;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MultiFunctionalTableComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiFunctionalTableComponent<any>, "tld-multi-functional-table", never, { "config": "config"; }, { "filterBarChange": "filterBarChange"; "exported": "exported"; }, ["noDataRow", "headerRowDefs", "rowDefs", "columnDefs"], ["[additionalActions]", "*"], false>;
+}

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

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./multi-functional-table.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/table";
+import * as i4 from "@angular/material/button";
+import * as i5 from "@ngx-translate/core";
+import * as i6 from "@angular/material/menu";
+import * as i7 from "@angular/material/checkbox";
+import * as i8 from "@angular/forms";
+import * as i9 from "../filter-bar/filter-bar.module";
+import * as i10 from "@angular/flex-layout";
+import * as i11 from "@angular/material/sort";
+export declare class MultiFunctionalTableModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MultiFunctionalTableModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MultiFunctionalTableModule, [typeof i1.MultiFunctionalTableComponent], [typeof i2.CommonModule, typeof i3.MatTableModule, typeof i4.MatButtonModule, typeof i5.TranslateModule, typeof i6.MatMenuModule, typeof i7.MatCheckboxModule, typeof i8.FormsModule, typeof i9.FilterBarModule, typeof i10.FlexLayoutModule, typeof i11.MatSortModule], [typeof i1.MultiFunctionalTableComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MultiFunctionalTableModule>;
+}

package/lib/pipes/date-ago/date-ago.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./date-ago.pipe";
+import * as i2 from "@angular/common";
+import * as i3 from "@ngx-translate/core";
+export declare class DateAgoModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateAgoModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DateAgoModule, [typeof i1.DateAgoPipe], [typeof i2.CommonModule, typeof i3.TranslateModule], [typeof i1.DateAgoPipe]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DateAgoModule>;
+}

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

@@ -0,0 +1,20 @@
+import { ChangeDetectorRef, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { DateAgo, DateAgoSettings } from './models';
+import * as i0 from "@angular/core";
+export declare class DateAgoPipe implements PipeTransform {
+    private readonly translate;
+    private readonly _ref;
+    private readonly settings;
+    readonly defaultSettings: DateAgoSettings;
+    get intervals(): import("./models").DateAgoInterval[];
+    get multiplePostfix(): string;
+    get localizationPrefix(): string;
+    get justNowKey(): string;
+    get justNowSeconds(): number;
+    constructor(translate: TranslateService, _ref: ChangeDetectorRef, settings: DateAgoSettings);
+    transform(value: Date, enableMultiplePostfix?: boolean): string;
+    calculateDateAgo(value: Date, enableMultiplePostfix: boolean): DateAgo | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateAgoPipe, [null, null, { optional: true; }]>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<DateAgoPipe, "dateAgo", false>;
+}

package/lib/pipes/date-ago/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date-ago.module';
+export * from './date-ago.pipe';

package/lib/pipes/date-ago/models/date-ago-interval.model.d.ts

@@ -0,0 +1,5 @@
+export interface DateAgoInterval {
+    key: string;
+    interval: number;
+    min: number;
+}

package/lib/pipes/date-ago/models/date-ago-settings.model.d.ts

@@ -0,0 +1,26 @@
+import { DateAgoInterval } from "./date-ago-interval.model";
+/**
+ * Configuration settings for DateAgo pipe.
+ */
+export interface DateAgoSettings {
+    /**
+     * Intervals for defined groups.
+     */
+    intervals: DateAgoInterval[];
+    /**
+     * String to be added to original key if interval group value is bigger than 1. Typically you want to add 'S' to the key, if value is multiple.
+     */
+    multiplePostfix: string;
+    /**
+     * Localization key, that should be before interval key. Do not place '.' at the end of key.
+     */
+    localizationPrefix: string;
+    /**
+     * Key for "Just now"
+     */
+    justNowKey: string;
+    /**
+     * For how many seconds should show just now.
+     */
+    justNowSeconds: number;
+}

package/lib/pipes/date-ago/models/date-ago-settings.token.d.ts

@@ -0,0 +1 @@
+export declare const DateAgoSettingsToken = "DATE_AGO_SETTINGS";

package/lib/pipes/date-ago/models/date-ago.model.d.ts

@@ -0,0 +1,4 @@
+export interface DateAgo {
+    key: string;
+    howMany?: number;
+}

package/lib/pipes/date-ago/models/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./date-ago-settings.token";
+export * from "./date-ago-settings.model";
+export * from "./date-ago.model";
+export * from "./date-ago-interval.model";

package/lib/pipes/index.d.ts

@@ -1,2 +1,3 @@
 export * from './filter-with-highlight';
 export * from './sort-translations';
+export * from './date-ago';

package/package.json

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

package/public-api.d.ts

@@ -9,3 +9,7 @@ export * from './lib/tld-loader';
 export * from './lib/helpers';
 export * from './lib/company-product';
 export * from './lib/footer';
+export * from './lib/file-upload';
+export * from './lib/filter-bar';
+export * from './lib/multi-functional-table';
+export * from './lib/confirmation-modal';

package/styles/components/icons.scss

@@ -1,6 +1,18 @@
 /*Makes icon be aligned with text.*/
 mat-icon {
-    svg {
-        vertical-align: initial;
-    }
-}
+  svg {
+    vertical-align: initial;
+  }
+}
+
+.success-icon {
+  color: var(--success-dark);
+}
+
+.error-icon {
+  color: var(--error-dark);
+}
+
+.icon-center-vertically {
+  vertical-align: middle;
+}

package/styles/mixins/material-overrides/mat-progress-bar-overrides.mixin.scss

@@ -0,0 +1,14 @@
+@mixin mat-progress-bar-overrides() {
+  .mat-progress-bar-fill:after {
+    background-color: var(--accent) !important;
+  }
+
+  .mat-progress-bar-buffer {
+    background-color: var(--base-70) !important;
+  }
+
+  .mat-progress-bar {
+    margin-top: 0.375em;
+    margin-bottom: 0.375em;
+  }
+}

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

@@ -1,7 +1,9 @@
 @use "./mat-button-overrides.mixin.scss" as mat-buttons;
 @use "./mat-form-field-overrides.mixin.scss" as mat-form-field;
+@use "./mat-progress-bar-overrides.mixin.scss" as mat-progress-bar;
 
 @mixin material-overrides($color-map: ()) {
   @include mat-buttons.mat-button-overrides($color-map);
+  @include mat-progress-bar.mat-progress-bar-overrides();
   @include mat-form-field.mat-form-field-overrides($color-map);
 }

package/styles/mixins/tld-all-mixins.mixin.scss

@@ -9,7 +9,15 @@
 @mixin tld-all-mixins($color-map: (), $font: $tld-font) {
   $merged: map.merge($default-colors, $color-map);
 
-  @include tld-font($font);
+  // there might be cases when passed value is null, and scss does not set default value from method definition, so need to check in if
+  @if ($font) {
+    @include tld-font($font);
+  }
+
+  @else {
+    @include tld-font($tld-font);
+  }
+
   @include sass-variables-to-css($merged);
   @include icon-fill($merged);
   @include material-overrides($merged);