@libs-ui/components-table 0.1.1-1

package/pipes/calculator-column.pipe.d.ts

@@ -0,0 +1,12 @@
+import { PipeTransform } from '@angular/core';
+import { ITableHeaderConfig } from '../interfaces/table-config.interface';
+import { TYPE_OBJECT } from '@libs-ui/interfaces-types';
+import * as i0 from "@angular/core";
+export declare class LibsUiTableCalculatorColumnPipe implements PipeTransform {
+    transform(header: ITableHeaderConfig | undefined, ignoreCalculatorWidthHeader: boolean, offsetWidth: number, headerLeftConfig?: Array<ITableHeaderConfig>, headerRightConfig?: Array<ITableHeaderConfig>): TYPE_OBJECT | undefined;
+    private getWidthPxOfStyle;
+    private getWidthPercentOfStyle;
+    private getStyleUpdate;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiTableCalculatorColumnPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<LibsUiTableCalculatorColumnPipe, "LibsUiTableCalculatorColumnPipe", true>;
+}

package/table.component.d.ts

@@ -0,0 +1,173 @@
+import { ElementRef, OnDestroy, OnInit, WritableSignal } from '@angular/core';
+import { IButton } from '@libs-ui/components-buttons-button';
+import { ISort } from '@libs-ui/components-buttons-sort';
+import { ICheckboxItem } from '@libs-ui/components-checkbox-group';
+import { ICheckboxEvent } from '@libs-ui/components-checkbox-single';
+import { IDropdownFunctionControlEvent, IEmitSelectKey } from '@libs-ui/components-dropdown';
+import { IListConfigItem } from '@libs-ui/components-list';
+import { TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';
+import { IHttpResponseError, IPaging, TYPE_OBJECT } from '@libs-ui/interfaces-types';
+import { IHttpRequestConfig } from '@libs-ui/services-http-request';
+import { IButtonBarEvent, IConfigSelectMoreItem, IConfigTemplateItemCollapseExpand, IHoverButtonActionEvent, ILoadMoreEvent, ISortEvent, ITabelButtonActionEvent, ITableFooterConfig, ITableHeaderConfig, TYPE_DATA_FILTER_TABLE, TYPE_ITEM_DATA_TABLE, TYPE_NEW_DATA_TABLE, TYPE_TABLE_FILTER } from './interfaces';
+import { ITableFunctionControlEvent } from './interfaces/function-control-event.interface';
+import { ITableNoDataConfig } from './interfaces/no-data-config.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsTableComponent implements OnInit, OnDestroy {
+    /** PROPERTY */
+    protected classHeaderContainer: import("@angular/core").Signal<string>;
+    protected classHeaderLeftContainer: import("@angular/core").Signal<string>;
+    protected keysSelected: WritableSignal<any[]>;
+    protected loading: WritableSignal<boolean>;
+    protected stores: WritableSignal<WritableSignal<TYPE_OBJECT>[]>;
+    protected items: WritableSignal<WritableSignal<TYPE_OBJECT>[]>;
+    protected itemFooter: WritableSignal<TYPE_OBJECT | undefined>;
+    protected itemOfIndexHover?: TYPE_ITEM_DATA_TABLE;
+    protected keySearch: WritableSignal<string>;
+    protected totalItemInBackend: WritableSignal<number>;
+    protected hasItemHightLight: WritableSignal<boolean>;
+    protected totalItemDisplay: import("@angular/core").Signal<any>;
+    protected listConfigMoreItem: import("@angular/core").Signal<IListConfigItem>;
+    private hasScroll;
+    private instanceSort;
+    private hasActionButtonDropdownContent;
+    protected pagingStore: WritableSignal<IPaging | undefined>;
+    private loadedLastItem;
+    private storeParamsCallApi;
+    private timeoutLeaveItem;
+    private functionControlSelectMoreItem?;
+    private mouseEnterHeader;
+    /** INPUT */
+    readonly timeHighlighNewItem: import("@angular/core").InputSignalWithTransform<number, number | undefined>;
+    readonly headerLeft: import("@angular/core").InputSignalWithTransform<ITableHeaderConfig[], ITableHeaderConfig[] | undefined>;
+    readonly headerRight: import("@angular/core").InputSignalWithTransform<ITableHeaderConfig[], ITableHeaderConfig[] | undefined>;
+    readonly ignoreCalculatorWidthHeader: import("@angular/core").InputSignal<{
+        headerLeft?: boolean;
+        headerRight?: boolean;
+    } | undefined>;
+    readonly configTemplateItemCollapseExpand: import("@angular/core").InputSignal<IConfigTemplateItemCollapseExpand | undefined>;
+    readonly showFooter: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly ignoreBorderFooter: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly customPositionFooter: import("@angular/core").InputSignalWithTransform<"top" | "bottom", "top" | "bottom" | undefined>;
+    readonly footerLeft: import("@angular/core").InputSignal<ITableFooterConfig[] | undefined>;
+    readonly footerRight: import("@angular/core").InputSignal<ITableFooterConfig[] | undefined>;
+    readonly disableCheckbox: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    readonly enableUnequalChildrenSizes: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    readonly bufferAmount: import("@angular/core").InputSignalWithTransform<number, number | undefined>;
+    readonly totalItem: import("@angular/core").InputSignal<number | undefined>;
+    readonly isDashBorder: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly classHeaderContainerInclude: import("@angular/core").InputSignal<string | undefined>;
+    readonly classHeaderLeftInclude: import("@angular/core").InputSignal<string | undefined>;
+    readonly classBodyInclude: import("@angular/core").InputSignalWithTransform<string, string | undefined>;
+    readonly classFooterInclude: import("@angular/core").InputSignalWithTransform<string, string | undefined>;
+    readonly classTableContainerInclude: import("@angular/core").InputSignalWithTransform<string, string | undefined>;
+    readonly classBarInclude: import("@angular/core").InputSignal<string>;
+    readonly fieldKey: import("@angular/core").InputSignalWithTransform<string, string | undefined>;
+    readonly defaultKeysSelected: import("@angular/core").InputSignal<any[] | undefined>;
+    readonly labelBarNoSelectItem: import("@angular/core").InputSignal<string>;
+    readonly labelBarButtons: import("@angular/core").InputSignalWithTransform<string, string | undefined>;
+    readonly classLabelBarButtons: import("@angular/core").InputSignalWithTransform<string, string | undefined>;
+    readonly barButtons: import("@angular/core").InputSignal<IButton[] | undefined>;
+    readonly sortLocal: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly filterOrSortLocal: import("@angular/core").InputSignal<TYPE_TABLE_FILTER>;
+    readonly httpRequestData: import("@angular/core").InputSignal<IHttpRequestConfig<any> | undefined>;
+    readonly httpRequestDataFooter: import("@angular/core").InputSignal<IHttpRequestConfig<any> | undefined>;
+    readonly newData: import("@angular/core").InputSignal<TYPE_NEW_DATA_TABLE | undefined>;
+    readonly filter: import("@angular/core").InputSignalWithTransform<TYPE_DATA_FILTER_TABLE, TYPE_DATA_FILTER_TABLE | undefined>;
+    readonly ignoreBar: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly classLabelBarNoSelectItem: import("@angular/core").InputSignal<string | undefined>;
+    readonly ignoreClassBgHeader: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly noDataConfig: import("@angular/core").InputSignal<ITableNoDataConfig>;
+    readonly showScrollTablePinnedIfNoData: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly ignoreBorderItemLast: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly isHiddenHeaderWhenNodata: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly maxItemSelected: import("@angular/core").InputSignalWithTransform<number, number | undefined>;
+    readonly configSelectMoreItem: import("@angular/core").InputSignal<IConfigSelectMoreItem | undefined>;
+    readonly onlyShowNoResult: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly ignoreBorderItem: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly activityLoadData: import("@angular/core").InputSignalWithTransform<"scroll-infinity" | "click-pagination", "scroll-infinity" | "click-pagination" | undefined>;
+    readonly paginationSetting: import("@angular/core").InputSignal<{
+        position?: "top" | "bottom";
+        classIncludeContainer?: string;
+        classIncludeItem?: string;
+        disable?: boolean;
+        numberPageDispaly?: number;
+        showTotalPage?: boolean;
+        showInputGotoPage?: boolean;
+        modeDisplayTotalPageAndGotoPage?: "top" | "bottom" | "left" | "right";
+        classDisplayTotalPageAndGotoPage?: string;
+    } | undefined>;
+    readonly templateNoData: import("@angular/core").InputSignal<any>;
+    readonly templateNoResult: import("@angular/core").InputSignal<any>;
+    /** OUTPUT */
+    readonly outLoadMore: import("@angular/core").OutputEmitterRef<ILoadMoreEvent>;
+    readonly outScrollIsGone: import("@angular/core").OutputEmitterRef<ILoadMoreEvent>;
+    readonly outLoading: import("@angular/core").OutputEmitterRef<boolean>;
+    readonly outClickButtonAction: import("@angular/core").OutputEmitterRef<ITabelButtonActionEvent>;
+    readonly outSort: import("@angular/core").OutputEmitterRef<ISortEvent>;
+    readonly outClickBarButton: import("@angular/core").OutputEmitterRef<IButtonBarEvent>;
+    readonly outHoverButtonAction: import("@angular/core").OutputEmitterRef<IHoverButtonActionEvent>;
+    readonly outKeysSelected: import("@angular/core").OutputEmitterRef<{
+        keys: Array<any>;
+    }>;
+    readonly outFunctionsControl: import("@angular/core").OutputEmitterRef<ITableFunctionControlEvent>;
+    readonly outLoadDataComplete: import("@angular/core").OutputEmitterRef<WritableSignal<WritableSignal<any>[]>>;
+    readonly outTotalItem: import("@angular/core").OutputEmitterRef<number>;
+    readonly outLoadDataError: import("@angular/core").OutputEmitterRef<IHttpResponseError>;
+    /**VIEW CHILD */
+    protected headerElementRef: import("@angular/core").Signal<ElementRef<any> | undefined>;
+    protected footerElementRef: import("@angular/core").Signal<ElementRef<any> | undefined>;
+    protected footerLeftElementRef: import("@angular/core").Signal<ElementRef<any> | undefined>;
+    private bodyElementRef;
+    private bodyComponentRef;
+    /**INJECT */
+    private httpRequestService;
+    private destroyRef;
+    private cdr;
+    constructor();
+    ngOnInit(): void;
+    get FunctionsControl(): ITableFunctionControlEvent;
+    protected getIndexRow: (data: {
+        value: TYPE_ITEM_DATA_TABLE;
+    }) => import("rxjs").Observable<number>;
+    private getScrollContainer;
+    private callApiByService;
+    protected fakeResponseApi(): TYPE_OBJECT;
+    private callApiByServiceFooter;
+    private addItems;
+    private checkExistItem;
+    private removeItems;
+    private getCount;
+    private loadMoreSuccess;
+    protected handlerChangeAllChecked(): void;
+    protected handlerChangeCheckedAllItems(event: ICheckboxEvent): void;
+    private checkCancelConditionCheckedItem;
+    protected handlerChangeItemChecked(event: ICheckboxItem, item: TYPE_OBJECT): void;
+    protected handlerChangeSort(sort: ISort): Promise<void>;
+    private handlerSortLocal;
+    protected handlerFunctionControlMoreSelectItem(functionControl: IDropdownFunctionControlEvent): void;
+    protected handlerSelectedMoreItem(event: IEmitSelectKey | undefined): void;
+    private setPerPageSelectMoreItem;
+    private onSortSuccess;
+    protected handlerButtonClick(type: 'button' | 'button-dropdown', buttonDropdownData: any, button: IButton): void;
+    protected handlerBarButtonClick(button: IButton): void;
+    protected handlerButtonDropdownEvent(eventName: TYPE_POPOVER_EVENT): void;
+    protected setIndexHover(e: Event, item: WritableSignal<TYPE_OBJECT>): void;
+    protected resetIndexHoverWhenMouseLeave(e?: Event): void;
+    protected resetIndexHover(e?: Event): void;
+    protected handlerMouseLeaveContainer(event: Event): void;
+    protected handlerMouseEnterHeader(event: Event): void;
+    protected handlerMouseLeaveHeader(event: Event): void;
+    protected handlerMouseEnterFooter(event: Event): void;
+    protected handlerMouseLeaveFooter(event: Event): void;
+    protected handlerScrollHeader(e: Event): void;
+    protected handlerScrollBody(e: Event): void;
+    protected handlerScrollBottom(e: Event): void;
+    protected handlerChangePage(page: number): void;
+    private resetScroll;
+    private reset;
+    private checkScroll;
+    protected get BodyElement(): HTMLElement | undefined;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsTableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsTableComponent, "libs_ui-components-table", never, { "timeHighlighNewItem": { "alias": "timeHighlighNewItem"; "required": false; "isSignal": true; }; "headerLeft": { "alias": "headerLeft"; "required": false; "isSignal": true; }; "headerRight": { "alias": "headerRight"; "required": false; "isSignal": true; }; "ignoreCalculatorWidthHeader": { "alias": "ignoreCalculatorWidthHeader"; "required": false; "isSignal": true; }; "configTemplateItemCollapseExpand": { "alias": "configTemplateItemCollapseExpand"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "ignoreBorderFooter": { "alias": "ignoreBorderFooter"; "required": false; "isSignal": true; }; "customPositionFooter": { "alias": "customPositionFooter"; "required": false; "isSignal": true; }; "footerLeft": { "alias": "footerLeft"; "required": false; "isSignal": true; }; "footerRight": { "alias": "footerRight"; "required": false; "isSignal": true; }; "disableCheckbox": { "alias": "disableCheckbox"; "required": false; "isSignal": true; }; "enableUnequalChildrenSizes": { "alias": "enableUnequalChildrenSizes"; "required": false; "isSignal": true; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; "isSignal": true; }; "totalItem": { "alias": "totalItem"; "required": false; "isSignal": true; }; "isDashBorder": { "alias": "isDashBorder"; "required": false; "isSignal": true; }; "classHeaderContainerInclude": { "alias": "classHeaderContainerInclude"; "required": false; "isSignal": true; }; "classHeaderLeftInclude": { "alias": "classHeaderLeftInclude"; "required": false; "isSignal": true; }; "classBodyInclude": { "alias": "classBodyInclude"; "required": false; "isSignal": true; }; "classFooterInclude": { "alias": "classFooterInclude"; "required": false; "isSignal": true; }; "classTableContainerInclude": { "alias": "classTableContainerInclude"; "required": false; "isSignal": true; }; "classBarInclude": { "alias": "classBarInclude"; "required": false; "isSignal": true; }; "fieldKey": { "alias": "fieldKey"; "required": false; "isSignal": true; }; "defaultKeysSelected": { "alias": "defaultKeysSelected"; "required": false; "isSignal": true; }; "labelBarNoSelectItem": { "alias": "labelBarNoSelectItem"; "required": false; "isSignal": true; }; "labelBarButtons": { "alias": "labelBarButtons"; "required": false; "isSignal": true; }; "classLabelBarButtons": { "alias": "classLabelBarButtons"; "required": false; "isSignal": true; }; "barButtons": { "alias": "barButtons"; "required": false; "isSignal": true; }; "sortLocal": { "alias": "sortLocal"; "required": false; "isSignal": true; }; "filterOrSortLocal": { "alias": "filterOrSortLocal"; "required": false; "isSignal": true; }; "httpRequestData": { "alias": "httpRequestData"; "required": false; "isSignal": true; }; "httpRequestDataFooter": { "alias": "httpRequestDataFooter"; "required": false; "isSignal": true; }; "newData": { "alias": "newData"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "ignoreBar": { "alias": "ignoreBar"; "required": false; "isSignal": true; }; "classLabelBarNoSelectItem": { "alias": "classLabelBarNoSelectItem"; "required": false; "isSignal": true; }; "ignoreClassBgHeader": { "alias": "ignoreClassBgHeader"; "required": false; "isSignal": true; }; "noDataConfig": { "alias": "noDataConfig"; "required": false; "isSignal": true; }; "showScrollTablePinnedIfNoData": { "alias": "showScrollTablePinnedIfNoData"; "required": false; "isSignal": true; }; "ignoreBorderItemLast": { "alias": "ignoreBorderItemLast"; "required": false; "isSignal": true; }; "isHiddenHeaderWhenNodata": { "alias": "isHiddenHeaderWhenNodata"; "required": false; "isSignal": true; }; "maxItemSelected": { "alias": "maxItemSelected"; "required": false; "isSignal": true; }; "configSelectMoreItem": { "alias": "configSelectMoreItem"; "required": false; "isSignal": true; }; "onlyShowNoResult": { "alias": "onlyShowNoResult"; "required": false; "isSignal": true; }; "ignoreBorderItem": { "alias": "ignoreBorderItem"; "required": false; "isSignal": true; }; "activityLoadData": { "alias": "activityLoadData"; "required": false; "isSignal": true; }; "paginationSetting": { "alias": "paginationSetting"; "required": false; "isSignal": true; }; "templateNoData": { "alias": "templateNoData"; "required": false; "isSignal": true; }; "templateNoResult": { "alias": "templateNoResult"; "required": false; "isSignal": true; }; }, { "outLoadMore": "outLoadMore"; "outScrollIsGone": "outScrollIsGone"; "outLoading": "outLoading"; "outClickButtonAction": "outClickButtonAction"; "outSort": "outSort"; "outClickBarButton": "outClickBarButton"; "outHoverButtonAction": "outHoverButtonAction"; "outKeysSelected": "outKeysSelected"; "outFunctionsControl": "outFunctionsControl"; "outLoadDataComplete": "outLoadDataComplete"; "outTotalItem": "outTotalItem"; "outLoadDataError": "outLoadDataError"; }, never, ["div.libs-ui-table-bar-left", "div.libs-ui-table-bar-right"], true, never>;
+}

package/templates/templates.component.d.ts

@@ -0,0 +1,28 @@
+import { OnDestroy } from '@angular/core';
+import { IButton } from '@libs-ui/components-buttons-button';
+import { IDropdownFunctionControlEvent, IEmitMultiKey, IEmitSelectKey } from '@libs-ui/components-dropdown';
+import { TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';
+import { ISwitchEvent } from '@libs-ui/components-switch';
+import { TYPE_ITEM_DATA_TABLE } from '../interfaces';
+import { ITableFieldTemplateConfig, ITableTemplateConfig } from '../interfaces/template-config.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsTableTemplatesComponent implements OnDestroy {
+    private lockClick;
+    private functionControls;
+    protected isImageError: boolean | undefined;
+    readonly isHover: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly configs: import("@angular/core").InputSignal<ITableTemplateConfig[] | undefined>;
+    readonly templateCssWrapper: import("@angular/core").InputSignal<string | undefined>;
+    readonly item: import("@angular/core").InputSignal<TYPE_ITEM_DATA_TABLE>;
+    protected handlerItemClick(event: Event | TYPE_POPOVER_EVENT | undefined, config: ITableFieldTemplateConfig): Promise<void>;
+    protected clickButtonAction(button: IButton): Promise<void>;
+    protected handlerSwitch(switchItem: ISwitchEvent, config: ITableFieldTemplateConfig): Promise<void>;
+    protected handlerSelectItemDropdown(fieldConfig: ITableFieldTemplateConfig, index: number, data?: IEmitSelectKey): Promise<void>;
+    protected handlerSelectItemsDropdown(fieldConfig: ITableFieldTemplateConfig, index: number, data?: IEmitMultiKey): Promise<void>;
+    protected handlerImageError(event: Event): Promise<void>;
+    protected handlerFunctionControl(event: IDropdownFunctionControlEvent, index: number): Promise<void>;
+    private handleLockClick;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsTableTemplatesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsTableTemplatesComponent, "libs_ui-components-table-templates", never, { "isHover": { "alias": "isHover"; "required": false; "isSignal": true; }; "configs": { "alias": "configs"; "required": false; "isSignal": true; }; "templateCssWrapper": { "alias": "templateCssWrapper"; "required": false; "isSignal": true; }; "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}