@mediusinc/mng-commons 0.19.3 → 0.20.0

package/lib/components/action/editor/action-editor.component.d.ts

@@ -5,6 +5,7 @@ import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Observable } from 'rxjs';
 import { IEditorDataProvider } from '../../../data-providers';
 import { ActionDescriptor, ActionEditorDescriptor } from '../../../descriptors';
+import { ActionEditorSubmitTypeEnum } from '../../../descriptors/types';
 import { MngTemplateDirective } from '../../../directives';
 import { IViewContainer } from '../../../models';
 import { MngActionExecutorService, MngCommonsService, MngNavigationService, MngViewContainerComponentService } from '../../../services';
@@ -22,6 +23,8 @@ export declare class MngActionEditorComponent<T, S> implements OnInit, OnDestroy
     private dialogRef;
     private dialogConfig;
     private viewContainerService;
+    readonly actionEditorSubmitTypeSubmit = ActionEditorSubmitTypeEnum.Submit;
+    readonly actionDefaultLoadingInput: Observable<boolean>;
     action: ActionEditorDescriptor<T>;
     itemId?: IdType;
     item?: T;
@@ -43,6 +46,7 @@ export declare class MngActionEditorComponent<T, S> implements OnInit, OnDestroy
     footerRightActions: ActionDescriptor<T>[];
     private loadingSubject;
     loading$: Observable<boolean>;
+    private submitActionIdSubject;
     private submitLoadingSubject;
     submitLoading$: Observable<boolean>;
     private isFinished;

package/lib/components/form/formly/fields/formly-field-input/formly-field-input.component.d.ts

@@ -1,23 +1,28 @@
 import { OnDestroy, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormArray, FormBuilder, FormControl } from '@angular/forms';
 import { FieldType } from '@ngx-formly/core';
 import { FieldInputDescriptor } from '../../../../../descriptors';
 import { MngFormlyFieldConfig } from '../../models';
 import * as i0 from "@angular/core";
 export declare class MngFormlyFieldInputComponent<ET> extends FieldType<MngFormlyFieldConfig> implements OnInit, OnDestroy {
     applicationLocale: string;
+    private formBuilder;
     iFormControl: FormControl;
     descriptor: FieldInputDescriptor<ET>;
     numberFieldMode: 'decimal' | 'currency';
     currency?: string;
     private files;
+    imageFormArray: FormArray;
     private subscriptions;
-    constructor(applicationLocale: string);
+    constructor(applicationLocale: string, formBuilder: FormBuilder);
     ngOnInit(): void;
     ngOnDestroy(): void;
     onFileSelect(event: any): void;
     onFileRemove(event: any): void;
     onFileClear(event: Event): void;
+    addImageUrl(value?: string | null): void;
+    removeImageUrlAt(idx: number): void;
+    onImageUrlLoadError(idx: number, event: Event): void;
     private updateFileFormControl;
     static ɵfac: i0.ɵɵFactoryDeclaration<MngFormlyFieldInputComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MngFormlyFieldInputComponent<any>, "mng-formly-field-input", never, {}, {}, never, never, false>;

package/lib/components/form/formly/formly.config.d.ts

@@ -7,6 +7,8 @@ export declare const formlyTypesConfig: MngFormlyTypeConfig[];
 export declare function getRequiredValidationMessage(translate: TranslateService): (error: any, field: MngFormlyFieldConfig) => Observable<string>;
 export declare function getMinLengthValidationMessage(translate: TranslateService): (error: any, field: MngFormlyFieldConfig) => Observable<string> | undefined;
 export declare function getMaxLengthValidationMessage(translate: TranslateService): (error: any, field: MngFormlyFieldConfig) => Observable<string> | undefined;
+export declare function getMinValidationMessage(translate: TranslateService): (error: any, field: MngFormlyFieldConfig) => Observable<string> | undefined;
+export declare function getMaxValidationMessage(translate: TranslateService): (error: any, field: MngFormlyFieldConfig) => Observable<string> | undefined;
 export declare function getTextPatternValidationMessage(translate: TranslateService): (error: any, field: MngFormlyFieldConfig) => Observable<string> | undefined;
 export declare function getEmailValidationMessage(translate: TranslateService): (error: any, field: MngFormlyFieldConfig) => Observable<string> | undefined;
 export declare const getFormlyValidationMessages: (translate: TranslateService) => any[];

package/lib/components/tableview/table/column-value/column-value.component.d.ts

@@ -2,27 +2,32 @@ import { ElementRef, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { MessageService } from 'primeng/api';
 import { ColumnDescriptor } from '../../../../descriptors';
-import { ColumnTypeEnum } from '../../../../descriptors/types';
+import { ColumnDisplayTypeEnum } from '../../../../descriptors/types';
+import { JsonPathPipe, MngGetterPipe, MngTemplatePipe } from '../../../../pipes';
 import * as i0 from "@angular/core";
 export declare class MngTableColumnValueComponent<T, TT> implements OnInit {
     private elementRef;
     private messageService;
     private translate;
-    readonly columnTypeString: ColumnTypeEnum;
-    readonly columnTypeNumber: ColumnTypeEnum;
-    readonly columnTypeCurrency: ColumnTypeEnum;
-    readonly columnTypeBoolean: ColumnTypeEnum;
-    readonly columnTypeDate: ColumnTypeEnum;
-    readonly columnTypeEnum: ColumnTypeEnum;
-    readonly columnTypeCustom: ColumnTypeEnum;
-    readonly columnTypeHtml: ColumnTypeEnum;
+    private jsonPathPipe;
+    private getterPipe;
+    private templatePipe;
+    readonly columnDisplayTypeString: ColumnDisplayTypeEnum;
+    readonly columnDisplayTypeNumber: ColumnDisplayTypeEnum;
+    readonly columnDisplayTypeCurrency: ColumnDisplayTypeEnum;
+    readonly columnDisplayTypeBoolean: ColumnDisplayTypeEnum;
+    readonly columnDisplayTypeDate: ColumnDisplayTypeEnum;
+    readonly columnDisplayTypeEnum: ColumnDisplayTypeEnum;
+    readonly columnDisplayTypeComponent: ColumnDisplayTypeEnum;
+    readonly columnDisplayTypeHtml: ColumnDisplayTypeEnum;
     descriptor: ColumnDescriptor<T, TT>;
     item: any;
     styleMaxWidth: number | null;
     className: string;
     currency?: string;
     jsonPath: string;
-    constructor(elementRef: ElementRef, messageService: MessageService, translate: TranslateService);
+    value: any;
+    constructor(elementRef: ElementRef, messageService: MessageService, translate: TranslateService, jsonPathPipe: JsonPathPipe, getterPipe: MngGetterPipe, templatePipe: MngTemplatePipe);
     ngOnInit(): void;
     copyToClipboard(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MngTableColumnValueComponent<any, any>, never>;

package/lib/descriptors/column.descriptor.d.ts

@@ -3,11 +3,12 @@ import { IColumnValueComponent } from '../models';
 import { ClassType, EnumConstantType, EnumType } from '../types';
 import { FilterDescriptor, FilterLookupDescriptor, FilterLookupEnumDescriptor } from './filter.descriptor';
 import { TableDescriptor, TableDynamicDescriptor } from './table.descriptor';
-import { ColumnTypeEnum } from './types';
+import { ColumnDisplayTypeEnum, ColumnTypeEnum } from './types';
 export declare class ColumnDescriptor<T, TT> {
     protected readonly _table: TableDescriptor<TT>;
     protected readonly _property: string;
     private _columnType;
+    private _columnDisplayType;
     protected _title?: string;
     private _jsonPath?;
     private _isSortEnabled;
@@ -36,6 +37,7 @@ export declare class ColumnDescriptor<T, TT> {
     private _hasCopyToClipboard;
     constructor(table: TableDescriptor<TT>, property: string);
     get columnType(): ColumnTypeEnum;
+    get columnDisplayType(): ColumnDisplayTypeEnum;
     get title(): string | undefined;
     get jsonPath(): string | undefined;
     get isSortEnabled(): boolean;
@@ -69,7 +71,7 @@ export declare class ColumnDescriptor<T, TT> {
      * @param type column type enum
      * @param args any additional arguments for column (optional)
      */
-    asType(type: ColumnTypeEnum, ...args: any[]): this;
+    asType(type: ColumnTypeEnum, displayType?: ColumnDisplayTypeEnum, ...args: any[]): this;
     asNumber(displayFormat?: string, locale?: string): this;
     asCurrency(currencyCode?: string, currencyFromProperty?: string, currencyDisplay?: 'symbol' | 'code' | 'name', displayFormat?: string, locale?: string): this;
     asDate(displayFormat?: string): this;

package/lib/descriptors/field.descriptor.d.ts

@@ -89,12 +89,13 @@ export declare abstract class AFieldDescriptor<T, ET> extends AGenericFieldDescr
     get events$(): Observable<MngFormFieldEvent<T, ET>>;
     protected copyFieldsTo(obj: AFieldDescriptor<T, ET>): void;
 }
-export declare class FieldInputDescriptor<ET> extends AFieldDescriptor<string | number | boolean | Date | File | File[], ET> {
+export declare class FieldInputDescriptor<ET> extends AFieldDescriptor<string | string[] | number | boolean | Date | File | File[], ET> {
     private _fieldType;
     private _rows?;
     private _numberMin?;
     private _numberMax?;
     private _numberStep?;
+    private _numberAutoCorrect;
     private _numberMinFractionDigits?;
     private _numberMaxFractionDigits?;
     private _numberUseGrouping;
@@ -117,6 +118,8 @@ export declare class FieldInputDescriptor<ET> extends AFieldDescriptor<string |
     private _fileMaxFileSize;
     private _fileAccept?;
     private _fileOnSelectHandler?;
+    private _imagePreview;
+    private _imageUrlInputHiddenOnDisabled;
     private _customComponentName?;
     constructor(editor: EditorDescriptor<ET>, property: string);
     /**
@@ -130,6 +133,7 @@ export declare class FieldInputDescriptor<ET> extends AFieldDescriptor<string |
     get numberMin(): number | undefined;
     get numberMax(): number | undefined;
     get numberStep(): number | undefined;
+    get numberAutoCorrect(): boolean;
     get numberMinFractionDigits(): number | undefined;
     get numberMaxFractionDigits(): number | undefined;
     get numberUseGrouping(): boolean;
@@ -148,6 +152,8 @@ export declare class FieldInputDescriptor<ET> extends AFieldDescriptor<string |
     get fileMaxFileSize(): number;
     get fileAccept(): string | undefined;
     get fileOnSelectHandler(): ((file: File[] | null, control: AbstractControl<any, any>) => void) | undefined;
+    get imagePreview(): boolean;
+    get imageUrlInputVisibleOnDisabled(): boolean;
     get customComponentName(): string | undefined;
     get locale(): string | undefined;
     get currency(): string | undefined;
@@ -165,8 +171,10 @@ export declare class FieldInputDescriptor<ET> extends AFieldDescriptor<string |
     asDatePicker(format?: string, min?: Date, max?: Date, showTime?: boolean, showSeconds?: boolean): this;
     asMask(mask: string, slotChar: string): this;
     asFile(multiple?: boolean, maxFileSize?: number, accept?: string): this;
+    asImageFile(multiple?: boolean, maxFileSize?: number, accept?: string): this;
+    asImageUrl(multiple?: boolean, preview?: boolean, inputVisibleOnDisabled?: boolean): this;
     asCustomComponent(customComponentName: string): this;
-    withNumberValidation(min?: number, max?: number, step?: number): this;
+    withNumberValidation(min?: number, max?: number, step?: number, autoCorrect?: boolean): this;
     withLocale(locale: string): this;
     withNumberFractions(min?: number, max?: number): this;
     withNumberGrouping(useGrouping?: boolean): this;

package/lib/descriptors/table.descriptor.d.ts

@@ -6,7 +6,7 @@ import { TableviewAttributeDef } from '../models/tableview-attr.model';
 import { ClassType, EnumType } from '../types';
 import { ColumnDescriptor, ColumnDynamicDescriptor } from './column.descriptor';
 import { ModelDescriptor } from './model.descriptor';
-import { ColumnTypeEnum, TableDynamicColumnsModeEnum, TableFilterDisplayEnum, TablePaginationModeEnum, TableSizeEnum } from './types';
+import { ColumnDisplayTypeEnum, ColumnTypeEnum, TableDynamicColumnsModeEnum, TableFilterDisplayEnum, TablePaginationModeEnum, TableSizeEnum } from './types';
 export declare class TableDescriptor<T> {
     private readonly _model;
     private _modelType;
@@ -108,7 +108,7 @@ export declare class TableDescriptor<T> {
      * @param columnType modified type
      * @param args additional attributes
      */
-    withColumnModifiedType(property: string, columnType?: ColumnTypeEnum, ...args: any[]): this;
+    withColumnModifiedType(property: string, columnType?: ColumnTypeEnum, columnDisplayType?: ColumnDisplayTypeEnum, ...args: any[]): this;
     /**
      * defines custom enum type for column
      * @param property column name
@@ -156,7 +156,7 @@ export declare class TableDynamicDescriptor extends TableDescriptor<any> {
      * @param type custom type for column
      * @param args addition arguments for column
      */
-    withColumnModifiedType(property: string, type: ColumnTypeEnum, ...args: any[]): this;
+    withColumnModifiedType(property: string, type: ColumnTypeEnum, displayType?: ColumnDisplayTypeEnum, ...args: any[]): this;
     /**
      * sets title to column with given property and returns this table
      * @param property column's property

package/lib/descriptors/tableview.descriptor.d.ts

@@ -5,7 +5,7 @@ import { IColumnValueComponent } from '../models';
 import { TableviewAttributeDef } from '../models/tableview-attr.model';
 import { ClassType, EnumConstantType, EnumType } from '../types';
 import { AFieldDescriptor, ColumnDescriptor, EditorDescriptor, FieldInputDescriptor, FieldLookupDescriptor, FieldLookupEnumDescriptor, FieldManyEditorDescriptor, FieldManyToManyEditorDescriptor, ModelDescriptor, TableDescriptor, TableDynamicDescriptor } from './index';
-import { ColumnTypeEnum, FieldInputTypeEnum, TableviewEditorTypeEnum } from './types';
+import { ColumnDisplayTypeEnum, ColumnTypeEnum, FieldInputTypeEnum, TableviewEditorTypeEnum } from './types';
 export declare class TableviewDescriptor<T> {
     private readonly _model;
     private _modelType;
@@ -79,7 +79,7 @@ export declare class TableviewDescriptor<T> {
      * @param columnType required column type
      * @param fieldType optional, if not provided it is converted from column type
      */
-    withModifiedType(property: string, columnType: ColumnTypeEnum, fieldType?: FieldInputTypeEnum): this;
+    withModifiedType(property: string, columnType: ColumnTypeEnum, fieldType?: FieldInputTypeEnum, columnDisplayType?: ColumnDisplayTypeEnum): this;
     /**
      * creates column with enum type
      * if fields exists, it is replaced

package/lib/descriptors/types/column.type.d.ts

@@ -1,10 +1,18 @@
 export declare enum ColumnTypeEnum {
-    String = 0,
-    Number = 1,
-    Currency = 2,
-    Boolean = 3,
-    Date = 4,
-    Enum = 5,
-    Custom = 6,
-    Html = 7
+    String = "STRING",
+    Number = "NUMBER",
+    Boolean = "BOOLEAN",
+    Date = "DATE",
+    Enum = "ENUM",
+    Custom = "CUSTOM"
+}
+export declare enum ColumnDisplayTypeEnum {
+    String = "STRING",
+    Number = "NUMBER",
+    Currency = "CURRENCY",
+    Boolean = "BOOLEAN",
+    Date = "DATE",
+    Enum = "ENUM",
+    Component = "COMPONENT",
+    Html = "HTML"
 }

package/lib/descriptors/types/field.type.d.ts

@@ -15,7 +15,9 @@ export declare enum FieldInputTypeEnum {
     Datepicker = 8,
     Mask = 9,
     File = 10,
-    Custom = 11
+    ImageFile = 11,
+    ImageUrl = 12,
+    Custom = 13
 }
 export declare enum FieldLookupTypeEnum {
     Dropdown = 0,

package/lib/mng-commons.module.d.ts

@@ -85,10 +85,11 @@ import * as i80 from "primeng/tabview";
 import * as i81 from "primeng/fieldset";
 import * as i82 from "primeng/multiselect";
 import * as i83 from "primeng/skeleton";
+import * as i84 from "primeng/image";
 export declare const primeNgModules: (typeof InputTextModule)[];
 export declare class MngCommonsModule {
     static forRoot(config: MngModuleConfig): ModuleWithProviders<MngCommonsModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MngCommonsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MngCommonsModule, [typeof i1.MngComponentDirective, typeof i2.MngTemplateDirective, typeof i3.JsonPathPipe, typeof i4.MngEnumPipe, typeof i5.MngBooleanPipe, typeof i6.MngI18nPropertyPipe, typeof i7.MngParametrizePipe, typeof i8.MngGetterPipe, typeof i9.MngTemplatePipe, typeof i10.MngClassMapPipe, typeof i11.MngEnumeratePipe, typeof i12.MngEnumerateAsyncPipe, typeof i13.MngBreadcrumbComponent, typeof i14.MngFooterComponent, typeof i15.MngMainLayoutComponent, typeof i16.MngMenuComponent, typeof i17.MngMenuItemComponent, typeof i18.MngTopbarComponent, typeof i19.MngVersionComponent, typeof i20.MngAutocompleteComponent, typeof i21.MngDropdownComponent, typeof i22.MngDateRangeComponent, typeof i23.MngFormlyFieldWrapperComponent, typeof i24.MngFormlyFieldNoLabelWrapperComponent, typeof i25.MngFormlyFieldInputComponent, typeof i26.MngFormlyFieldLabelComponent, typeof i27.MngFormlyFieldDropdownComponent, typeof i28.MngFormlyFieldAutocompleteComponent, typeof i29.MngFormlyFieldLookupDialogComponent, typeof i30.MngFormlyFieldTableDialogMultiselectComponent, typeof i31.MngFormlyFieldTableDialogFormComponent, typeof i32.MngFormlyFieldTabsComponent, typeof i33.MngFormlyFieldFieldsetComponent, typeof i34.MngFormlyFieldActionComponent, typeof i35.MngTableComponent, typeof i36.MngTableviewComponent, typeof i37.MngTableColumnValueComponent, typeof i38.MngTableColumnFilterComponent, typeof i39.MngTableviewRouteComponent, typeof i40.MngFormEditorComponent, typeof i41.MngActionComponent, typeof i42.MngActionEditorComponent, typeof i43.MngActionRouteComponent], [typeof i44.CommonModule, typeof i45.RouterModule, typeof i46.HttpClientModule, typeof i47.ReactiveFormsModule, typeof i48.TranslateModule, typeof i49.FormlyModule, typeof i50.AutoCompleteModule, typeof i51.BreadcrumbModule, typeof i52.ButtonModule, typeof i53.CalendarModule, typeof i54.CardModule, typeof i55.CheckboxModule, typeof i56.ChipModule, typeof i57.ConfirmDialogModule, typeof i58.ConfirmPopupModule, typeof i59.DialogModule, typeof i60.DynamicDialogModule, typeof i61.DropdownModule, typeof i62.FileUploadModule, typeof i63.InputNumberModule, typeof i64.InputMaskModule, typeof i65.InputSwitchModule, typeof i66.InputTextModule, typeof i67.InputTextareaModule, typeof i68.PaginatorModule, typeof i69.RadioButtonModule, typeof i70.RippleModule, typeof i71.SelectButtonModule, typeof i72.TableModule, typeof i73.TagModule, typeof i74.ToastModule, typeof i75.ToggleButtonModule, typeof i76.ToolbarModule, typeof i77.TooltipModule, typeof i78.MessagesModule, typeof i79.ProgressSpinnerModule, typeof i80.TabViewModule, typeof i81.FieldsetModule, typeof i82.MultiSelectModule, typeof i83.SkeletonModule], [typeof i50.AutoCompleteModule, typeof i51.BreadcrumbModule, typeof i52.ButtonModule, typeof i53.CalendarModule, typeof i54.CardModule, typeof i55.CheckboxModule, typeof i56.ChipModule, typeof i57.ConfirmDialogModule, typeof i58.ConfirmPopupModule, typeof i59.DialogModule, typeof i60.DynamicDialogModule, typeof i61.DropdownModule, typeof i62.FileUploadModule, typeof i63.InputNumberModule, typeof i64.InputMaskModule, typeof i65.InputSwitchModule, typeof i66.InputTextModule, typeof i67.InputTextareaModule, typeof i68.PaginatorModule, typeof i69.RadioButtonModule, typeof i70.RippleModule, typeof i71.SelectButtonModule, typeof i72.TableModule, typeof i73.TagModule, typeof i74.ToastModule, typeof i75.ToggleButtonModule, typeof i76.ToolbarModule, typeof i77.TooltipModule, typeof i78.MessagesModule, typeof i79.ProgressSpinnerModule, typeof i80.TabViewModule, typeof i81.FieldsetModule, typeof i82.MultiSelectModule, typeof i83.SkeletonModule, typeof i1.MngComponentDirective, typeof i2.MngTemplateDirective, typeof i3.JsonPathPipe, typeof i4.MngEnumPipe, typeof i5.MngBooleanPipe, typeof i6.MngI18nPropertyPipe, typeof i7.MngParametrizePipe, typeof i8.MngGetterPipe, typeof i9.MngTemplatePipe, typeof i10.MngClassMapPipe, typeof i11.MngEnumeratePipe, typeof i12.MngEnumerateAsyncPipe, typeof i13.MngBreadcrumbComponent, typeof i14.MngFooterComponent, typeof i15.MngMainLayoutComponent, typeof i16.MngMenuComponent, typeof i17.MngMenuItemComponent, typeof i18.MngTopbarComponent, typeof i19.MngVersionComponent, typeof i20.MngAutocompleteComponent, typeof i21.MngDropdownComponent, typeof i22.MngDateRangeComponent, typeof i23.MngFormlyFieldWrapperComponent, typeof i24.MngFormlyFieldNoLabelWrapperComponent, typeof i25.MngFormlyFieldInputComponent, typeof i26.MngFormlyFieldLabelComponent, typeof i27.MngFormlyFieldDropdownComponent, typeof i28.MngFormlyFieldAutocompleteComponent, typeof i29.MngFormlyFieldLookupDialogComponent, typeof i30.MngFormlyFieldTableDialogMultiselectComponent, typeof i31.MngFormlyFieldTableDialogFormComponent, typeof i32.MngFormlyFieldTabsComponent, typeof i33.MngFormlyFieldFieldsetComponent, typeof i34.MngFormlyFieldActionComponent, typeof i35.MngTableComponent, typeof i36.MngTableviewComponent, typeof i37.MngTableColumnValueComponent, typeof i38.MngTableColumnFilterComponent, typeof i39.MngTableviewRouteComponent, typeof i40.MngFormEditorComponent, typeof i41.MngActionComponent, typeof i42.MngActionEditorComponent, typeof i43.MngActionRouteComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MngCommonsModule, [typeof i1.MngComponentDirective, typeof i2.MngTemplateDirective, typeof i3.JsonPathPipe, typeof i4.MngEnumPipe, typeof i5.MngBooleanPipe, typeof i6.MngI18nPropertyPipe, typeof i7.MngParametrizePipe, typeof i8.MngGetterPipe, typeof i9.MngTemplatePipe, typeof i10.MngClassMapPipe, typeof i11.MngEnumeratePipe, typeof i12.MngEnumerateAsyncPipe, typeof i13.MngBreadcrumbComponent, typeof i14.MngFooterComponent, typeof i15.MngMainLayoutComponent, typeof i16.MngMenuComponent, typeof i17.MngMenuItemComponent, typeof i18.MngTopbarComponent, typeof i19.MngVersionComponent, typeof i20.MngAutocompleteComponent, typeof i21.MngDropdownComponent, typeof i22.MngDateRangeComponent, typeof i23.MngFormlyFieldWrapperComponent, typeof i24.MngFormlyFieldNoLabelWrapperComponent, typeof i25.MngFormlyFieldInputComponent, typeof i26.MngFormlyFieldLabelComponent, typeof i27.MngFormlyFieldDropdownComponent, typeof i28.MngFormlyFieldAutocompleteComponent, typeof i29.MngFormlyFieldLookupDialogComponent, typeof i30.MngFormlyFieldTableDialogMultiselectComponent, typeof i31.MngFormlyFieldTableDialogFormComponent, typeof i32.MngFormlyFieldTabsComponent, typeof i33.MngFormlyFieldFieldsetComponent, typeof i34.MngFormlyFieldActionComponent, typeof i35.MngTableComponent, typeof i36.MngTableviewComponent, typeof i37.MngTableColumnValueComponent, typeof i38.MngTableColumnFilterComponent, typeof i39.MngTableviewRouteComponent, typeof i40.MngFormEditorComponent, typeof i41.MngActionComponent, typeof i42.MngActionEditorComponent, typeof i43.MngActionRouteComponent], [typeof i44.CommonModule, typeof i45.RouterModule, typeof i46.HttpClientModule, typeof i47.ReactiveFormsModule, typeof i48.TranslateModule, typeof i49.FormlyModule, typeof i50.AutoCompleteModule, typeof i51.BreadcrumbModule, typeof i52.ButtonModule, typeof i53.CalendarModule, typeof i54.CardModule, typeof i55.CheckboxModule, typeof i56.ChipModule, typeof i57.ConfirmDialogModule, typeof i58.ConfirmPopupModule, typeof i59.DialogModule, typeof i60.DynamicDialogModule, typeof i61.DropdownModule, typeof i62.FileUploadModule, typeof i63.InputNumberModule, typeof i64.InputMaskModule, typeof i65.InputSwitchModule, typeof i66.InputTextModule, typeof i67.InputTextareaModule, typeof i68.PaginatorModule, typeof i69.RadioButtonModule, typeof i70.RippleModule, typeof i71.SelectButtonModule, typeof i72.TableModule, typeof i73.TagModule, typeof i74.ToastModule, typeof i75.ToggleButtonModule, typeof i76.ToolbarModule, typeof i77.TooltipModule, typeof i78.MessagesModule, typeof i79.ProgressSpinnerModule, typeof i80.TabViewModule, typeof i81.FieldsetModule, typeof i82.MultiSelectModule, typeof i83.SkeletonModule, typeof i84.ImageModule], [typeof i50.AutoCompleteModule, typeof i51.BreadcrumbModule, typeof i52.ButtonModule, typeof i53.CalendarModule, typeof i54.CardModule, typeof i55.CheckboxModule, typeof i56.ChipModule, typeof i57.ConfirmDialogModule, typeof i58.ConfirmPopupModule, typeof i59.DialogModule, typeof i60.DynamicDialogModule, typeof i61.DropdownModule, typeof i62.FileUploadModule, typeof i63.InputNumberModule, typeof i64.InputMaskModule, typeof i65.InputSwitchModule, typeof i66.InputTextModule, typeof i67.InputTextareaModule, typeof i68.PaginatorModule, typeof i69.RadioButtonModule, typeof i70.RippleModule, typeof i71.SelectButtonModule, typeof i72.TableModule, typeof i73.TagModule, typeof i74.ToastModule, typeof i75.ToggleButtonModule, typeof i76.ToolbarModule, typeof i77.TooltipModule, typeof i78.MessagesModule, typeof i79.ProgressSpinnerModule, typeof i80.TabViewModule, typeof i81.FieldsetModule, typeof i82.MultiSelectModule, typeof i83.SkeletonModule, typeof i1.MngComponentDirective, typeof i2.MngTemplateDirective, typeof i3.JsonPathPipe, typeof i4.MngEnumPipe, typeof i5.MngBooleanPipe, typeof i6.MngI18nPropertyPipe, typeof i7.MngParametrizePipe, typeof i8.MngGetterPipe, typeof i9.MngTemplatePipe, typeof i10.MngClassMapPipe, typeof i11.MngEnumeratePipe, typeof i12.MngEnumerateAsyncPipe, typeof i13.MngBreadcrumbComponent, typeof i14.MngFooterComponent, typeof i15.MngMainLayoutComponent, typeof i16.MngMenuComponent, typeof i17.MngMenuItemComponent, typeof i18.MngTopbarComponent, typeof i19.MngVersionComponent, typeof i20.MngAutocompleteComponent, typeof i21.MngDropdownComponent, typeof i22.MngDateRangeComponent, typeof i23.MngFormlyFieldWrapperComponent, typeof i24.MngFormlyFieldNoLabelWrapperComponent, typeof i25.MngFormlyFieldInputComponent, typeof i26.MngFormlyFieldLabelComponent, typeof i27.MngFormlyFieldDropdownComponent, typeof i28.MngFormlyFieldAutocompleteComponent, typeof i29.MngFormlyFieldLookupDialogComponent, typeof i30.MngFormlyFieldTableDialogMultiselectComponent, typeof i31.MngFormlyFieldTableDialogFormComponent, typeof i32.MngFormlyFieldTabsComponent, typeof i33.MngFormlyFieldFieldsetComponent, typeof i34.MngFormlyFieldActionComponent, typeof i35.MngTableComponent, typeof i36.MngTableviewComponent, typeof i37.MngTableColumnValueComponent, typeof i38.MngTableColumnFilterComponent, typeof i39.MngTableviewRouteComponent, typeof i40.MngFormEditorComponent, typeof i41.MngActionComponent, typeof i42.MngActionEditorComponent, typeof i43.MngActionRouteComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MngCommonsModule>;
 }

package/lib/models/tableview-attr.model.d.ts

@@ -1,8 +1,9 @@
 import { AttributeDef } from '../api/models';
-import { ColumnTypeEnum, FieldInputTypeEnum } from '../descriptors/types';
+import { ColumnDisplayTypeEnum, ColumnTypeEnum, FieldInputTypeEnum } from '../descriptors/types';
 import { ClassType, EnumType } from '../types';
 export interface TableviewAttributeDef extends AttributeDef {
     columnType: ColumnTypeEnum;
+    columnDisplayType: ColumnDisplayTypeEnum;
     fieldType?: FieldInputTypeEnum;
     enumType?: EnumType;
     classType?: ClassType<any>;

package/lib/models/view-container.model.d.ts

@@ -39,4 +39,5 @@ export interface ViewContainerEditorResetEvent<T> {
 }
 export interface ViewContainerEditorCloseEvent<T> {
     emitEvent?: boolean;
+    item?: T;
 }

package/lib/utils/tableview.util.d.ts

@@ -1,6 +1,6 @@
 import { AttributeDef } from '../api/models';
 import { ColumnDescriptor } from '../descriptors';
-import { ColumnTypeEnum, FieldInputTypeEnum } from '../descriptors/types';
+import { ColumnDisplayTypeEnum, ColumnTypeEnum, FieldInputTypeEnum } from '../descriptors/types';
 import { TableviewAttributeDef } from '../models/tableview-attr.model';
 import { ClassType } from '../types';
 export declare class TableviewUtil {
@@ -23,9 +23,10 @@ export declare class TableviewUtil {
     static stringColumnConverter(column: ColumnDescriptor<any, any>, value: any): ColumnDescriptor<any, any>;
     /**
      * converts string type to column type enum, default is string
-     * @param property
+     * @param propertyType
      */
-    static toColumnType(property: string): ColumnTypeEnum;
+    static toColumnType(propertyType: string): ColumnTypeEnum;
+    static toColumnDisplayType(columnType: ColumnTypeEnum, propertyType: string): ColumnDisplayTypeEnum;
     /**
      * converts string type to type enum, default is text
      * @param property
@@ -35,5 +36,5 @@ export declare class TableviewUtil {
      * convert column type to equivalent field input type
      * @param type column type
      */
-    static toFieldInputTypeFromColumnType(type: ColumnTypeEnum): FieldInputTypeEnum;
+    static toFieldInputTypeFromColumnType(type: ColumnTypeEnum, displayType?: ColumnDisplayTypeEnum): FieldInputTypeEnum;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediusinc/mng-commons",
-  "version": "0.19.3",
+  "version": "0.20.0",
   "peerDependencies": {
     "@angular/common": "^14.1.0",
     "@angular/core": "^14.1.0",

package/scss/common/theme/designer/_components.scss

@@ -87,6 +87,7 @@
 
 //MultiMedia
 // @import './components/multimedia/_galleria';
+@import './components/multimedia/_image';
 
 //Misc
 // @import './components/misc/_avatar';

package/scss/common/theme/designer/components/multimedia/_image.scss

@@ -0,0 +1,44 @@
+.p-image-mask {
+    --maskbg: #{$imageMaskBg};
+}
+
+.p-image-preview-indicator {
+    background-color: transparent;
+    color: $imagePreviewIndicatorColor;
+    transition: $actionIconTransition;
+}
+
+.p-image-preview-container {
+    &:hover {
+        > .p-image-preview-indicator {
+            background-color: $imagePreviewIndicatorBg;
+        }
+    }
+}
+
+.p-image-toolbar {
+    padding: $imagePreviewToolbarPadding;
+}
+
+.p-image-action.p-link {
+    color: $imagePreviewActionIconColor;
+    background-color: $imagePreviewActionIconBg;
+    width: $imagePreviewActionIconWidth;
+    height: $imagePreviewActionIconHeight;
+    border-radius: $imagePreviewActionIconBorderRadius;
+    transition: $actionIconTransition;
+    margin-right: $inlineSpacing;
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    &:hover {
+        color: $imagePreviewActionIconHoverColor;
+        background-color: $imagePreviewActionIconHoverBg;
+    }
+
+    i {
+        font-size: $imagePreviewActionIconFontSize;
+    }
+}

package/scss/common/variables/theme/_theme_dark.scss

@@ -38,7 +38,7 @@ $primeIconFontSize: 1rem !default;
 $divider: 1px solid $shade500 !default;
 $inlineSpacing: 0.5rem !default; //spacing between inline elements
 $disabledOpacity: 0.4 !default; //opacity of a disabled item
-$maskBg: rgba(0, 0, 0, 0.05) !default; //modal mask bg color
+$maskBg: rgba(0, 0, 0, 0.4) !default; //modal mask bg color
 $loadingIconFontSize: 2rem !default;
 $errorColor: #fc6161 !default;
 
@@ -869,6 +869,20 @@ $dockBorder: 1px solid rgba(255, 255, 255, 0.2) !default;
 $dockPadding: 0.5rem 0.5rem !default;
 $dockBorderRadius: 0.5rem !default;
 
+//image
+$imageMaskBg: rgba(0, 0, 0, 0.9) !default;
+$imagePreviewToolbarPadding: 1rem !default;
+$imagePreviewIndicatorColor: #f8f9fa !default;
+$imagePreviewIndicatorBg: rgba(0, 0, 0, 0.5) !default;
+$imagePreviewActionIconBg: transparent !default;
+$imagePreviewActionIconColor: #f8f9fa !default;
+$imagePreviewActionIconHoverBg: rgba(255, 255, 255, 0.1) !default;
+$imagePreviewActionIconHoverColor: #f8f9fa !default;
+$imagePreviewActionIconWidth: 3rem !default;
+$imagePreviewActionIconHeight: 3rem !default;
+$imagePreviewActionIconFontSize: 1.5rem !default;
+$imagePreviewActionIconBorderRadius: 50% !default;
+
 :root {
     --surface-a: #{$shade200};
     --surface-b: #{$shade500};

package/scss/common/variables/theme/_theme_light.scss

@@ -38,7 +38,7 @@ $primeIconFontSize: 1rem !default;
 $divider: 1px solid $shade300 !default;
 $inlineSpacing: 0.5rem !default;
 $disabledOpacity: 0.6 !default;
-$maskBg: rgba(0, 0, 0, 0.05) !default;
+$maskBg: rgba(0, 0, 0, 0.4) !default;
 $loadingIconFontSize: 2rem !default;
 $errorColor: #fc6161 !default;
 
@@ -870,6 +870,20 @@ $dockBorder: 1px solid rgba(255, 255, 255, 0.2) !default;
 $dockPadding: 0.5rem 0.5rem !default;
 $dockBorderRadius: 0.5rem !default;
 
+//image
+$imageMaskBg: rgba(0, 0, 0, 0.9) !default;
+$imagePreviewToolbarPadding: 1rem !default;
+$imagePreviewIndicatorColor: #f8f9fa !default;
+$imagePreviewIndicatorBg: rgba(0, 0, 0, 0.5) !default;
+$imagePreviewActionIconBg: transparent !default;
+$imagePreviewActionIconColor: #f8f9fa !default;
+$imagePreviewActionIconHoverBg: rgba(255, 255, 255, 0.1) !default;
+$imagePreviewActionIconHoverColor: #f8f9fa !default;
+$imagePreviewActionIconWidth: 3rem !default;
+$imagePreviewActionIconHeight: 3rem !default;
+$imagePreviewActionIconFontSize: 1.5rem !default;
+$imagePreviewActionIconBorderRadius: 50% !default;
+
 :root {
     --surface-a: #{$shade000};
     --surface-b: #{$shade100};

package/scss/mng-overrides/_theme_forms.scss

@@ -6,6 +6,11 @@ form {
             flex-grow: 0;
             flex-shrink: 0;
             width: 50px;
+            padding: 0;
+
+            img {
+                max-width: 100%;
+            }
         }
 
         .p-fileupload-row .p-button {

package/scss/mng-overrides/_theme_image.scss

@@ -0,0 +1,27 @@
+.mng-image {
+    &.p-image-preview-container {
+        height: 150px;
+
+        img {
+            max-height: 100%;
+        }
+
+        &.no-image {
+            width: 150px;
+
+            .p-image-preview-indicator {
+                background-color: $imagePreviewIndicatorBg;
+                height: 100%;
+                opacity: 1;
+                cursor: default;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .p-image-preview-icon {
+                    font-size: 1.5rem;
+                }
+            }
+        }
+    }
+}

package/scss/mng-overrides/_theme_styles.scss

@@ -8,6 +8,7 @@
 @import './_theme_datepicker';
 @import './_theme_toolbar';
 @import './_theme_autocomplete';
+@import './_theme_image';
 
 .p-tabview-title-error {
     color: $errorColor !important;

package/version-info.json

@@ -1,10 +1,10 @@
 {
     "name": "@mediusinc/mng-commons",
-    "version": "0.19.3",
-    "tag": "v0.19.3",
+    "version": "0.20.0",
+    "tag": "v0.20.0",
     "distance": 0,
-    "hash": "9a1520ab",
+    "hash": "f845527c",
     "dirty": false,
-    "semver": "0.19.3",
-    "raw": "v0.19.3-9a1520ab"
+    "semver": "0.20.0",
+    "raw": "v0.20.0-f845527c"
 }