@ngx-smz/core 19.2.0

package/lib/modules/smz-tables/models/table-state.d.ts

@@ -0,0 +1,588 @@
+import { FilterMetadata } from 'primeng/api';
+import { Observable } from 'rxjs';
+import { SmzMenuItem } from '../../smz-menu/models/smz-menu-item';
+import { EditableChanges } from './editable-model';
+import { SmzTableCaptionButton, SmzTableColumn, SmzTableContextColumn } from "./table-column";
+export interface SmzTableState {
+    source?: {
+        items$?: Observable<any[]>;
+    };
+    /**
+     * Custom actions
+     */
+    actions?: {
+        /**
+         * Configuration of the popup menu of the rows
+         */
+        menu?: {
+            /**
+             * Controls the visibility of the button menu of the rows
+             */
+            isVisible: boolean;
+            /**
+             * Items for the popup menu
+             */
+            items: SmzMenuItem[];
+            /**
+             * Callback to create a dynamic menu
+             * This callback is called when the user click on the menu button
+             * The menu items will be generated by the callback
+             */
+            callback?: (row: any) => SmzMenuItem[];
+            /**
+             * Styles can change the appearance of the action button
+             * It can be modified automatically by the table size method setSize()
+             */
+            styles: {
+                icon: string;
+                buttonClass: string;
+                styleClass: string;
+            };
+            /**
+             * Overlay behavior shows the menu as a toggle button with dropdown menu items
+             * Button behavior shows the menu as separate buttons in a row
+             */
+            behavior: 'overlay' | 'inline';
+            /**
+             * Overlay behavior shows the menu as a toggle button with dropdown menu items
+             * Button behavior shows the menu as separate buttons in a row
+             */
+            minWidth: string;
+        };
+        /**
+         * Configuration of the actions for multiselection
+         */
+        batchActions?: {
+            /**
+             * Controls the visibility of the button menu of the rows
+             */
+            isVisible: boolean;
+            /**
+             * Items for the buttons
+             */
+            items: SmzMenuItem[];
+            ngStyle: {
+                [style: string]: any;
+            } | null;
+        };
+        /**
+         * Custom actions for all rows
+         */
+        customActions?: {
+            /**
+             * Controls the visibility of the custom action buttons
+             */
+            isVisible: boolean;
+            /**
+             * Width of pixels the column containing the custom actions
+             */
+            columnWidth: number;
+            ngStyle: {
+                [style: string]: any;
+            } | null;
+        };
+        /**
+         * Interaction behaviors for the rows
+         */
+        rowBehavior?: {
+            /**
+             * Controls if the rows are clickable or not
+             */
+            isClickable?: boolean;
+            /**
+             * Controls if the rows click, expands the table row
+             */
+            expandRowOnClick?: boolean;
+            /**
+             * Callback to be executed when the row is clicked
+             */
+            clickCallback?: (event: any) => void;
+            /**
+             * Controls hover effect on the rows
+             */
+            hoverable?: boolean;
+            /**
+             * Highlight a row based on the item id
+             */
+            highlights?: {
+                ids: string[];
+            };
+            /**
+            * Controls the style classes to preserve the layout in small devices
+            */
+            preserveLayoutInSmallDevices?: boolean;
+            cellStyleClass?: string;
+        };
+    };
+    /**
+     * Configuration of the actions to dispatch editable saves
+     */
+    editable?: {
+        isEditable: boolean;
+        update: {
+            isButtonVisible: boolean;
+            isButtonDisabled: boolean;
+            accessClaim: string;
+            overrideActionPayloadCallback: (row: any) => any;
+            condition: (row: any) => boolean;
+            onInit: (row: any) => void;
+        };
+        creation: {
+            isButtonVisible: boolean;
+            isButtonDisabled: boolean;
+            buttonLabel: string;
+            accessClaim: string;
+            overrideActionPayloadCallback: (row: any) => any;
+            onInit: () => void;
+        };
+        remove: {
+            isButtonVisible: boolean;
+            isButtonDisabled: boolean;
+            accessClaim: string;
+            overrideActionPayloadCallback: (row: any) => any;
+            condition: (row: any) => boolean;
+            onInit: (row: any) => void;
+        };
+        actions: {
+            update: any;
+            creation: any;
+            remove: any;
+        };
+        mapResults: Array<(data: any, change: EditableChanges<any>) => any>;
+        ngStyle: {
+            [style: string]: any;
+        } | null;
+    };
+    locale?: {
+        language: string;
+        columnVisibility?: {
+            placeholder: string;
+            selectedItemsLabel: string;
+            pTooltip: string;
+        };
+        globalFilter?: {
+            placeholder: string;
+        };
+        dropdownFilter?: {
+            placeholder: string;
+        };
+        exportToPdf?: {
+            label: string;
+        };
+        exportToExcel?: {
+            label: string;
+        };
+        clearFilters?: {
+            label: string;
+        };
+        rowSelection?: {
+            label: string;
+        };
+        paginator?: {
+            template: string;
+        };
+    };
+    /**
+     * Behavior of everything that is hosted in the caption area of the table
+     */
+    caption?: {
+        /**
+         * Controls de visibility of the entire caption area
+         */
+        isVisible?: boolean;
+        /**
+         * Text of the title presented in the caption area
+         */
+        title?: string;
+        /**
+         * Defines if the toolbar is aligned to the left or to the right
+         */
+        toolbarAlignment?: "start" | "end";
+        /**
+         * Create buttons in the catpion section
+         */
+        buttons: SmzTableCaptionButton[];
+        /**
+         * Allows the end user to manually filter which columns are visible or not
+         */
+        columnVisibility?: {
+            /**
+             * Controls the visibility of the inputs for this feature
+             */
+            showDropdownSelector: boolean;
+            /**
+             * Individual buttons that controls the visibility of each column
+             */
+            showColumnHideButton: boolean;
+        };
+        /**
+         * Options for the global filter
+         */
+        globalFilter?: {
+            /**
+             * Control whether the global filter is visible or not
+             */
+            isVisible: boolean;
+            /**
+             * If true the input will expand to 100% of the width table
+             */
+            expanded: boolean;
+        };
+        /**
+         * Allows the end user to export the table content to PDF
+         */
+        exportToPdf?: {
+            /**
+             * Controls whether the export button should be visible or not
+             */
+            isButtonVisible?: boolean;
+        };
+        /**
+         * Allows the end user to export the table content to EXCEL
+         */
+        exportToExcel?: {
+            /**
+             * Controls whether the export button should be visible or not
+             */
+            isButtonVisible?: boolean;
+            exportHyperLinkAsHtml?: boolean;
+            globalDateFormat?: string;
+            globalNewLineSeparator?: string;
+            filename?: string;
+            maxFilenameLength?: number;
+            maxFilenameShortenSuffix?: string;
+            includeUserAsAuthor?: boolean;
+            sheetName?: string;
+        };
+        /**
+         * Allows the end user to manually clear table filters
+         */
+        clearFilters?: {
+            /**
+             * Controls whether the clear filter button should be visible or not
+             */
+            isButtonVisible?: boolean;
+            /**
+             * callback to be called when the Clear Filter button is clicked
+             */
+            callback?: () => void;
+        };
+        /**
+         * Allows the user to control the behavior of the row selection
+         */
+        rowSelection: {
+            /**
+             * Controls the visibility of the button that alternates between
+             * no selection and multi selection
+             */
+            isButtonVisible: boolean;
+            /**
+             * Width of the column that will host the checkboxes for each row,
+             * indicating which isones are selected
+             */
+            columnWidth?: string;
+            /**
+             * This callback is executed when you enable/disable the selection
+             * This can be used, for instance, in the case you want to open a
+             * side bar when the multi selection is activated
+             */
+            callback?: (selection: any[]) => void;
+            /**
+             * Controls whether the multi selection is enabled or not
+             * Use this when you want to control this through the code instead
+             * of letting the user activate it with the dedicated button
+             */
+            isEnabled: boolean;
+            /**
+             *
+             */
+            validationMode: 'none' | 'required';
+            ngStyle: {
+                [style: string]: any;
+            } | null;
+        };
+    };
+    /**
+     * Behavior of everything that is hosted in the caption area of the table
+     */
+    header?: {
+        /**
+         * Controls de visibility of the header area
+         */
+        isVisible?: boolean;
+    };
+    columns: SmzTableColumn[];
+    /**
+     * Behavior of the initial state of the table
+     */
+    initialState?: {
+        /**
+         * Setup behavior when the data is still not loaded, i.e. the `items`
+         * property is null. This is different from the case when there is no
+         * data to display, i.e. the data came as an empty array from the API
+         */
+        skeleton?: {
+            /**
+             * enables or disables the skeleton behavior
+             */
+            isEnabled?: boolean;
+            /**
+             * How many rows to display in while in the skeleton state
+             */
+            rows?: number;
+        };
+    };
+    /**
+    * Viewport Behavior of the table
+    */
+    viewport?: {
+        /**
+        * WIP: model to save filters and sort states
+        */
+        state?: SmzTableViewportState;
+        /**
+        * when specifies, enables horizontal and/or vertical scrolling.
+        */
+        scrollable: boolean;
+        /**
+         * height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.
+         */
+        scrollHeight: 'flex' | string;
+        /**
+         * orientation of the scrolling, options are "vertical", "horizontal" and "both".
+         */
+        scrollDirection: 'vertical' | 'horizontal' | 'both';
+        /**
+        * when enabled, columns can be resized using drag and drop.
+        */
+        resizableColumns: boolean;
+        /**
+        * defines whether the overall table width should change on column resize, valid values are "fit" and "expand".
+        */
+        columnResizeMode: 'fit' | 'expand';
+    };
+    /**
+     * Behavior of the empty feedback
+     */
+    emptyFeedback?: {
+        /**
+         * Message displayed when the table has no data
+         */
+        isFeatured?: boolean;
+        /**
+         * Message displayed when the table has no data
+         */
+        message?: string;
+        /**
+         * Extra information to be shown below the main message
+         */
+        extraInfo?: string;
+        /**
+         * Controls the behavior the opnional action button. If nothing
+         * is specified, no button is shown
+         */
+        actionButtons?: {
+            /**
+             * Button label
+             */
+            label: string;
+            /**
+             * Button Icon
+             */
+            icon?: string;
+            /**
+             * Callback to be executed on the button is clicked
+             */
+            callback: (event?: MouseEvent) => void;
+        }[];
+        image?: string;
+    };
+    /**
+     * Behavior the pagination of the table
+     */
+    pagination?: {
+        /**
+         * If the pagination area is visible or not
+         */
+        isVisible?: boolean;
+        /**
+         * How many rows of data will be displayed in the table by default
+         */
+        rows?: number;
+        /**
+         * Options to be displayed in the page size dropdown
+         */
+        rowsPerPageOptions?: number[];
+        /**
+         * Configurations for the page report summary, that displays the current
+         * page number, maximum number of the pages, and so on
+         */
+        pageReport?: {
+            /**
+             * Text template, i.e: Showing items {first} to {last} from a total of {totalRecords}
+             */
+            template?: string;
+            /**
+             * Controls whether the summary is visible or not
+             */
+            isVisible?: boolean;
+        };
+        /**
+         * Controls the current pagination state
+         */
+        state: {
+            first: number;
+            rows: number;
+        };
+    };
+    /**
+     * Sorting behavior of the table
+     */
+    sort?: {
+        /**
+         *
+         */
+        field?: string;
+        /**
+         *
+         */
+        mode?: "single" | "multiple";
+        /**
+         *
+         */
+        order?: 1 | -1;
+        /**
+         *
+         */
+        multiSortMeta?: {
+            field: string;
+            order: 1 | -1;
+        }[];
+    };
+    /**
+     * Styles of the table
+     */
+    styles?: {
+        /**
+         * Use striped to add zebra-striping to the row's styles
+         */
+        striped?: boolean;
+        /**
+         * Use showGrid to add borders between cells
+         */
+        showGrid?: boolean;
+        /**
+         * Use size to specify the size and spacing between rows
+         */
+        size?: 'extra-small' | 'small' | 'regular' | 'large';
+        /**
+         * Use columnsWidth to estimate the columns width automatically based on the items samples.
+         */
+        columnsWidth?: {
+            estimate: boolean;
+            samples: number;
+            maxWidth: number;
+            behavior: 'width' | 'min-width';
+            estimateFontBase: string;
+            estimatePadding: number;
+        };
+        tableStyleClass: string;
+    };
+    /**
+     * Settings for Frozen Columns
+     */
+    frozen?: {
+        /**
+         * Enables the hability to lock the frozen columns
+         * Each column has to be configurated as frozen
+         * All frozen columns will be arranged on the left part of the table
+         */
+        isEnabled?: boolean;
+        /**
+         * Set the frozen column width
+         */
+        width?: string;
+    };
+    /**
+   * Allows the user to expand a row to show some content
+   */
+    rowExpansion: {
+        /**
+         * Controls the visibility of the button that expand or collapse the row content
+         */
+        isButtonVisible: boolean;
+        /**
+         * Label of the button
+         */
+        label?: string;
+        /**
+         * Width of the column that will host the toggle button
+         */
+        columnWidth?: number;
+        /**
+         * This callback is executed when you expand/collapse the row
+         * This can be used, for instance, in the case you want to proccess some data
+         */
+        callback?: () => void;
+        /**
+         * Controls whether the toggle is enabled or not
+         * Use this when you want to control this through the code instead
+         * of letting the user activate it with the dedicated button
+         */
+        isEnabled: boolean;
+        /**
+        * Mantain row expansions state sincronized
+        */
+        sincronize?: boolean;
+        highlightNewItems?: boolean;
+        highlightLabel?: string;
+        ngStyle: {
+            [style: string]: any;
+        } | null;
+    };
+    /**
+     * Validation
+     */
+    isValid: boolean;
+    isDebug: boolean;
+}
+export interface SmzTableContext {
+    columns: SmzTableContextColumn[];
+    hideableColumns: SmzTableContextColumn[];
+    visibleColumns: SmzTableContextColumn[];
+    frozenColumns: SmzTableContextColumn[];
+    state: SmzTableState;
+    globalFilter: string[];
+}
+export interface SmzTableViewportState {
+    isEnabled: boolean;
+    /**
+   * If Persist is true, the table component will save the viewport state of the table in the localstorage
+   * The saved data will be loaded when the table starts
+   */
+    persistance: 'none' | 'auto' | 'manual';
+    saveTrigger: 'onChange' | 'onDestroy';
+    auto: {
+        key: string;
+    };
+    manual: {
+        loadCallback: () => SmzTableViewportStateData;
+        saveCallback: (state: SmzTableViewportStateData) => void;
+    };
+    data: SmzTableViewportStateData;
+    onChangeCallback: (state: SmzTableViewportStateData) => void;
+}
+export interface SmzTableViewportStateData {
+    visibility: {
+        key: string;
+        isVisible: boolean;
+    }[];
+    sort: {
+        mode: 'single';
+        field: string;
+        order: any;
+    };
+    filters: {
+        [s: string]: FilterMetadata | FilterMetadata[] | undefined;
+    };
+}

package/lib/modules/smz-tables/ngx-smz-tables.module.d.ts

@@ -0,0 +1,48 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./features/table/table.component";
+import * as i2 from "./pipes/table-context.pipe";
+import * as i3 from "./pipes/table-content.pipe";
+import * as i4 from "./pipes/filter-object.pipe";
+import * as i5 from "./pipes/content-icon-matches.pipe";
+import * as i6 from "./pipes/clone-table-items.pipe";
+import * as i7 from "./components/smz-filter-column.component";
+import * as i8 from "./components/smz-filter-column-2.component";
+import * as i9 from "./pipes/editable-source.pipe";
+import * as i10 from "./pipes/content-errors.pipe";
+import * as i11 from "./components/validation-messages/validation-messages.component";
+import * as i12 from "./components/validation-messages/validation-messages.pipe";
+import * as i13 from "./pipes/sincronize-table.pipe";
+import * as i14 from "./components/table-content/table-content.component";
+import * as i15 from "./components/table-content-actions/table-content-actions.component";
+import * as i16 from "./components/table-caption-buttons/table-caption-buttons.component";
+import * as i17 from "./components/table-header-actions/table-header-actions.component";
+import * as i18 from "@angular/common";
+import * as i19 from "primeng/api";
+import * as i20 from "primeng/table";
+import * as i21 from "primeng/button";
+import * as i22 from "primeng/inputtext";
+import * as i23 from "../../common/data-pipes/data-pipes.module";
+import * as i24 from "primeng/multiselect";
+import * as i25 from "primeng/select";
+import * as i26 from "primeng/datepicker";
+import * as i27 from "@angular/forms";
+import * as i28 from "../../common/table-item-actions/table-item-actions.module";
+import * as i29 from "../../common/stop-click-propagation/click-stop-propagation.module";
+import * as i30 from "../smz-data-info/smz-data-info.module";
+import * as i31 from "primeng/tooltip";
+import * as i32 from "primeng/skeleton";
+import * as i33 from "primeng/textarea";
+import * as i34 from "primeng/overlaypanel";
+import * as i35 from "primeng/inputswitch";
+import * as i36 from "primeng/inputnumber";
+import * as i37 from "../smz-menu/smz-menu.module";
+import * as i38 from "primeng/togglebutton";
+import * as i39 from "../../common/directives/ng-var/ng-var.module";
+import * as i40 from "../rbk-utils/auth/guards/access-control.module";
+import * as i41 from "primeng/iconfield";
+import * as i42 from "primeng/inputicon";
+export declare class NgxSmzTablesModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxSmzTablesModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgxSmzTablesModule, [typeof i1.SmzTableComponent, typeof i2.SmzTableContextPipe, typeof i3.SmzTableContentPipe, typeof i4.SmzFilterObjectPipe, typeof i5.SmzContentIconMatchesPipe, typeof i6.SmzCloneTableItemsPipe, typeof i7.SmzColumnFilterComponent, typeof i8.SmzColumnFilter2Component, typeof i9.SmzEditableSourcePipe, typeof i10.SmzContentErrorsPipe, typeof i11.SmzTableValidationMessagesComponent, typeof i12.ValidationMessagesPipe, typeof i13.SmzSincronizeTablePipe, typeof i14.SmzTableContentComponent, typeof i15.SmzTableContentActionsComponent, typeof i16.SmzTableCaptionButtonsComponent, typeof i17.SmzTableHeaderActionsComponent], [typeof i18.CommonModule, typeof i19.SharedModule, typeof i20.TableModule, typeof i21.ButtonModule, typeof i22.InputTextModule, typeof i23.NgxSmzDataPipesModule, typeof i24.MultiSelectModule, typeof i25.SelectModule, typeof i26.DatePickerModule, typeof i27.FormsModule, typeof i28.TableItemActionsModule, typeof i29.ClickStopPropagationModule, typeof i30.NgxSmzDataInfoModule, typeof i31.TooltipModule, typeof i32.SkeletonModule, typeof i33.TextareaModule, typeof i34.OverlayPanelModule, typeof i27.ReactiveFormsModule, typeof i35.InputSwitchModule, typeof i36.InputNumberModule, typeof i37.NgxSmzMenuModule, typeof i38.ToggleButtonModule, typeof i39.NgVarModule, typeof i40.RbkAccessControlModule, typeof i41.IconFieldModule, typeof i42.InputIconModule], [typeof i1.SmzTableComponent, typeof i13.SmzSincronizeTablePipe, typeof i19.SharedModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NgxSmzTablesModule>;
+}

package/lib/modules/smz-tables/pipes/clone-table-items.pipe.d.ts

@@ -0,0 +1,18 @@
+import { PipeTransform } from '@angular/core';
+import { SmzTableContext } from '../models/table-state';
+import { TableHelperService } from '../services/table-helper.service';
+import * as i0 from "@angular/core";
+export declare class SmzCloneTableItemsPipe implements PipeTransform {
+    private tableHelper;
+    private state;
+    constructor(tableHelper: TableHelperService);
+    transform(items: any[], context: SmzTableContext, tableKey: string, sincronize: boolean): {
+        showSkeleton: boolean;
+        items: any[];
+    };
+    private includeTransformedData;
+    private estimate;
+    private measureText;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SmzCloneTableItemsPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SmzCloneTableItemsPipe, "cloneTableItems", false>;
+}

package/lib/modules/smz-tables/pipes/content-errors.pipe.d.ts

@@ -0,0 +1,10 @@
+import { PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+export declare class SmzContentErrorsPipe implements PipeTransform {
+    private sanitizer;
+    constructor(sanitizer: DomSanitizer);
+    transform(errors: string[]): SafeHtml;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SmzContentErrorsPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SmzContentErrorsPipe, "contentErrors", false>;
+}

package/lib/modules/smz-tables/pipes/content-icon-matches.pipe.d.ts

@@ -0,0 +1,8 @@
+import { PipeTransform } from '@angular/core';
+import { SmzIconContentMatch } from '../models/content-types';
+import * as i0 from "@angular/core";
+export declare class SmzContentIconMatchesPipe implements PipeTransform {
+    transform(options: SmzIconContentMatch[], value: any): SmzIconContentMatch;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SmzContentIconMatchesPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SmzContentIconMatchesPipe, "contentIconMatches", false>;
+}

package/lib/modules/smz-tables/pipes/editable-source.pipe.d.ts

@@ -0,0 +1,11 @@
+import { PipeTransform } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { SmzEditableTypes } from '../models/editable-types';
+import * as i0 from "@angular/core";
+export declare class SmzEditableSourcePipe implements PipeTransform {
+    private store;
+    constructor(store: Store);
+    transform(field: SmzEditableTypes): any[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<SmzEditableSourcePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SmzEditableSourcePipe, "editableSource", false>;
+}

package/lib/modules/smz-tables/pipes/filter-object.pipe.d.ts

@@ -0,0 +1,7 @@
+import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SmzFilterObjectPipe implements PipeTransform {
+    transform(field: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SmzFilterObjectPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SmzFilterObjectPipe, "filterObject", false>;
+}