@theseam/ui-common 0.4.26 → 0.4.28-beta.0

package/datatable/models/datatable-config.d.ts

@@ -0,0 +1,90 @@
+import { InjectionToken } from "@angular/core";
+import { SeamIcon } from "@theseam/ui-common/icon";
+export interface TheSeamDatatableMessages {
+    /**
+     * Message to show when array is presented, but contains no values.
+     *
+     * @default 'No records found'
+     */
+    emptyMessage: string;
+    /**
+     * Footer total message.
+     *
+     * @default 'total'
+     */
+    totalMessage: string;
+    /**
+     * Footer selected message.
+     *
+     * @default 'selected'
+     */
+    selectedMessage: string;
+}
+export type TheSeamDatatableColumnFilterUpdateMethod = 'valueChanges' | 'submit';
+/**
+ * A config object that can be injected at the top level of a project
+ * to apply specific TheSeamDatatable settings site-wide.
+ */
+export interface TheSeamDatatableConfig {
+    /**
+     * See `TheSeamDatatableMessages`.
+     */
+    messages?: Partial<TheSeamDatatableMessages> | undefined | null;
+    /**
+     * Minimum header height in pixels.
+     *
+     * @default 50
+     */
+    headerHeight?: number | undefined | null;
+    /**
+     * Row height in pixels, necessary for calculating scroll height.
+     *
+     * @default 50
+     */
+    rowHeight?: number | undefined | null;
+    /**
+     * Minimum footer height in pixels.
+     *
+     * @default 40
+     */
+    footerHeight?: number | undefined | null;
+    /**
+     * CSS classes for various icon buttons.
+     *
+     * @default
+     *   sortAscending: 'datatable-icon-up',
+     *   sortDescending: 'datatable-icon-down',
+     *   pagerLeftArrow: 'datatable-icon-left',
+     *   pagerRightArrow: 'datatable-icon-right',
+     *   pagerPrevious: 'datatable-icon-prev',
+     *   pagerNext: 'datatable-icon-skip'
+     */
+    cssClasses?: {
+        [key: string]: string;
+    };
+    /**
+     * Icon to display to the left of the column header
+     * when a column is marked "filterable".
+     *
+     * @default faFilter
+     */
+    columnFilterIcon?: SeamIcon;
+    /**
+     * Determines what kind of action causes a filter column to be applied.
+     *
+     * `valueChanges`: Filter is applied on form `valueChanges` event, with an optional debounce set on `columnFilterUpdateDebounce`.
+     *
+     * `submit`: Filter is applied on form submit. No debounce is applied.
+     *
+     * @default "valueChanges"
+     */
+    columnFilterUpdateMethod?: TheSeamDatatableColumnFilterUpdateMethod;
+    /**
+     * Number of milliseconds to debounce a filter form input before applying the filter change.
+     * Only applicable when `columnFilterUpdateMethod` is `valueChanges`.
+     *
+     * @default 400
+     */
+    columnFilterUpdateDebounce?: number;
+}
+export declare const THESEAM_DATATABLE_CONFIG: InjectionToken<TheSeamDatatableConfig>;

package/datatable/models/table-column.d.ts

@@ -11,4 +11,25 @@ export interface TheSeamDatatableColumnHidable {
      */
     hidden?: boolean;
 }
-export type TheSeamDatatableColumn<T extends TableCellTypeName = any, C extends TableCellTypeConfig<T> = any> = TableColumn & TableCellTypeColumn<T, C> & TableCellTypeExportProps & TheSeamDatatableColumnHidable;
+export interface TheSeamDatatableColumnFilterable<T extends TheSeamDatatableColumnFilterableConfig = any> {
+    filterable?: boolean;
+    /**
+     * Additional options for a specific filter type.
+     */
+    filterOptions?: T;
+}
+export interface TheSeamDatatableColumnFilterableConfig {
+    /**
+     * The object name on which to run the filter.
+     *
+     * Defaults to column prop.
+     */
+    filterProp?: string;
+    /**
+     * The type of filter(s) to show in the filter menu.
+     *
+     * If not provided, will look to cellType to determine default filter(s).
+     */
+    filterType?: string;
+}
+export type TheSeamDatatableColumn<T extends TableCellTypeName = any, C extends TableCellTypeConfig<T> = any, F extends TheSeamDatatableColumnFilterableConfig = any> = TableColumn & TableCellTypeColumn<T, C> & TableCellTypeExportProps & TheSeamDatatableColumnHidable & TheSeamDatatableColumnFilterable<F>;

package/datatable/public-api.d.ts

@@ -2,6 +2,10 @@ export * from './datatable/datatable.component';
 export * from './datatable-action-menu/datatable-action-menu.component';
 export * from './datatable-action-menu-item/datatable-action-menu-item.component';
 export * from './datatable-column/datatable-column.component';
+export * from './datatable-column-filter-menu/datatable-column-filter-menu.component';
+export * from './datatable-column-filter-search-date/datatable-column-filter-search-date.component';
+export * from './datatable-column-filter-search-numeric/datatable-column-filter-search-numeric.component';
+export * from './datatable-column-filter-search-text/datatable-column-filter-search-text.component';
 export * from './datatable-column-preferences/datatable-column-preferences.component';
 export * from './datatable-column-preferences-button/datatable-column-preferences-button.component';
 export * from './datatable-export-button/datatable-export-button.component';
@@ -18,9 +22,18 @@ export * from './datatable-row-detail/datatable-row-detail.directive';
 export * from './directives/datatable-action-menu-item.directive';
 export * from './directives/datatable-action-menu-toggle.directive';
 export * from './directives/datatable-cell-tpl.directive';
+export * from './directives/datatable-column-filter-tpl.directive';
+export * from './directives/datatable-column-filter.directive';
 export * from './directives/datatable-filter.directive';
 export * from './directives/datatable-row-action-item.directive';
+export * from './models/columns-data-filter';
+export * from './models/columns-data-filters/search-date.columns-data-filter';
+export * from './models/columns-data-filters/search-numeric.columns-data-filter';
+export * from './models/columns-data-filters/search-text.columns-data-filter';
+export * from './models/columns-data-filters/models';
+export * from './models/columns-data-filters/utils';
 export * from './models/datatable-accessor';
+export * from './models/datatable-config';
 export * from './models/datatable-data-source';
 export * from './models/datatable-gql-data-source';
 export * from './models/menubar-item-data';
@@ -31,6 +44,7 @@ export * from './models/table-column';
 export * from './models/sort-event';
 export * from './models/sort-item';
 export * from './models/table-column';
+export * from './services/columns-filters.service';
 export * from './services/datatable-column-changes.service';
 export * from './services/datatable-preferences.service';
 export * from './services/datatable-scrollbar-helper.service';

package/datatable/services/columns-filters.service.d.ts

@@ -0,0 +1,29 @@
+import { TheSeamDatatableColumn } from '../models/table-column';
+import { DataFilterContainer } from '@theseam/ui-common/data-filters';
+import { ColumnsDataFilter } from '../models/columns-data-filter';
+import { TheSeamDatatableColumnFilterDirective } from '../directives/datatable-column-filter.directive';
+import * as i0 from "@angular/core";
+export declare class ColumnsFiltersService implements DataFilterContainer {
+    private readonly _customColumnsDataFilters?;
+    private readonly _columnFilterTemplates;
+    readonly columnFilterTemplates$: import("rxjs").Observable<TheSeamDatatableColumnFilterDirective[]>;
+    private readonly _columnsFilters;
+    readonly columnsFilters$: import("rxjs").Observable<ColumnsDataFilter<any, import("@angular/forms").FormGroup<any>, any, any>[]>;
+    readonly columnActiveFilterProps$: import("rxjs").Observable<any[]>;
+    constructor(_customColumnsDataFilters?: {
+        name: string;
+        class: any;
+    }[] | undefined);
+    registerColumnFilters(columns: TheSeamDatatableColumn[]): void;
+    setFilterTemplates(tpls: TheSeamDatatableColumnFilterDirective[]): void;
+    createColumnDataFilter(column: TheSeamDatatableColumn, initialValue: any): ColumnsDataFilter | null;
+    private _getColumnsDataFilter;
+    private _getColumnsDataFilterType;
+    getColumnFilterProp(column: TheSeamDatatableColumn | null | undefined): string | null;
+    getColumnFilter(prop: string | null): ColumnsDataFilter | undefined;
+    filters(): ColumnsDataFilter[];
+    addFilter(filter: ColumnsDataFilter): void;
+    removeFilter(filter: ColumnsDataFilter): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnsFiltersService, [{ optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ColumnsFiltersService>;
+}

package/datatable/services/columns-manager.service.d.ts

@@ -5,6 +5,7 @@ import { DatatableColumnComponent } from '../datatable-column/datatable-column.c
 import { DatatableRowActionItemDirective } from '../directives/datatable-row-action-item.directive';
 import { TheSeamDatatableColumn } from '../models/table-column';
 import { DatatableColumnChangesService } from './datatable-column-changes.service';
+import { ActionItemColumnPosition } from '../models/action-item-column-position';
 import * as i0 from "@angular/core";
 export type InternalColumnsGetter = () => TableColumn[];
 export declare class ColumnsManagerService {
@@ -21,6 +22,7 @@ export declare class ColumnsManagerService {
     private _selectionType;
     private _rowActionItem;
     private _actionMenuCellTpl;
+    private _actionItemColumnPosition;
     private _blankHeaderTpl;
     private _treeToggleTpl;
     private _headerTpl;
@@ -33,6 +35,7 @@ export declare class ColumnsManagerService {
     setSelectionType(selectionType: SelectionType | undefined): void;
     getSelectionType(): SelectionType | undefined;
     setRowActionItem(rowActionItem: DatatableRowActionItemDirective | undefined): void;
+    setActionItemColumnPosition(actionItemColumnPosition: ActionItemColumnPosition | undefined): void;
     setActionMenuCellTpl(actionMenuCellTpl: TemplateRef<DataTableColumnDirective> | undefined): void;
     setBlankHeaderTpl(blankHeaderTpl: TemplateRef<DataTableColumnHeaderDirective> | undefined): void;
     setTreeToggleTpl(treeToggleTpl: TemplateRef<DataTableColumnCellTreeToggle> | undefined): void;
@@ -50,6 +53,10 @@ export declare class ColumnsManagerService {
     private _hasColumnsChanged;
     private _shouldAddCheckboxColumn;
     private _shouldAddRowActionColumn;
+    private _rowActionColumnIsFrozenLeft;
+    private _rowActionColumnIsFrozenRight;
+    private _rowActionColumnIsStaticLeft;
+    private _rowActionColumnIsStaticRight;
     private _shouldAddTreeToggleColumn;
     private _shouldAddHeaderTemplate;
     private _shouldAddCellTypeSelectorTpl;

package/datatable/utils/create-action-menu-column.d.ts

@@ -1,3 +1,3 @@
 import { TheSeamDatatableColumn } from '../models/table-column';
 export declare const ACTION_MENU_COLUMN_PROP = "$$__actionMenu__";
-export declare function createActionMenuColumn(cellTemplate: any, headerTemplate: any): TheSeamDatatableColumn;
+export declare function createActionMenuColumn(cellTemplate: any, headerTemplate: any, frozenLeft?: boolean, frozenRight?: boolean): TheSeamDatatableColumn;

package/esm2020/breadcrumbs/breadcrumbs/breadcrumbs.component.mjs

@@ -10,9 +10,9 @@ export class BreadcrumbsComponent {
     }
 }
 BreadcrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BreadcrumbsComponent, deps: [{ token: i1.TheSeamBreadcrumbsService }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BreadcrumbsComponent, selector: "seam-breadcrumbs", ngImport: i0, template: "<nav aria-label=\"breadcrumb\">\n  <ol class=\"breadcrumb mb-0\">\n    <li *ngFor=\"let crumb of crumbs$ | async; last as isLast\"\n      class=\"breadcrumb-item\"\n      [ngClass]=\"{ 'active': isLast }\"\n      [attr.aria-current]=\"isLast ? 'page' : undefined\">\n      <a *ngIf=\"!isLast; else notLink\" [routerLink]=\"crumb.path\">{{ crumb.value }}</a>\n      <ng-template #notLink>{{ crumb.value }}</ng-template>\n    </li>\n  </ol>\n</nav>\n", styles: ["seam-breadcrumbs li{color:#fff}seam-breadcrumbs li a{color:inherit}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+BreadcrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BreadcrumbsComponent, selector: "seam-breadcrumbs", ngImport: i0, template: "<nav aria-label=\"breadcrumb\">\n  <ol class=\"breadcrumb mb-0\">\n    <li *ngFor=\"let crumb of crumbs$ | async; last as isLast\"\n      class=\"breadcrumb-item\"\n      [ngClass]=\"{ 'active': isLast }\"\n      [attr.aria-current]=\"isLast ? 'page' : undefined\">\n      <a *ngIf=\"!isLast; else notLink\" [routerLink]=\"crumb.path\">{{ crumb.value }}</a>\n      <ng-template #notLink>{{ crumb.value }}</ng-template>\n    </li>\n  </ol>\n</nav>\n", styles: ["seam-breadcrumbs li{color:#fff}seam-breadcrumbs li a{color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-breadcrumbs', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav aria-label=\"breadcrumb\">\n  <ol class=\"breadcrumb mb-0\">\n    <li *ngFor=\"let crumb of crumbs$ | async; last as isLast\"\n      class=\"breadcrumb-item\"\n      [ngClass]=\"{ 'active': isLast }\"\n      [attr.aria-current]=\"isLast ? 'page' : undefined\">\n      <a *ngIf=\"!isLast; else notLink\" [routerLink]=\"crumb.path\">{{ crumb.value }}</a>\n      <ng-template #notLink>{{ crumb.value }}</ng-template>\n    </li>\n  </ol>\n</nav>\n", styles: ["seam-breadcrumbs li{color:#fff}seam-breadcrumbs li a{color:inherit}\n"] }]
+            args: [{ selector: 'seam-breadcrumbs', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav aria-label=\"breadcrumb\">\n  <ol class=\"breadcrumb mb-0\">\n    <li *ngFor=\"let crumb of crumbs$ | async; last as isLast\"\n      class=\"breadcrumb-item\"\n      [ngClass]=\"{ 'active': isLast }\"\n      [attr.aria-current]=\"isLast ? 'page' : undefined\">\n      <a *ngIf=\"!isLast; else notLink\" [routerLink]=\"crumb.path\">{{ crumb.value }}</a>\n      <ng-template #notLink>{{ crumb.value }}</ng-template>\n    </li>\n  </ol>\n</nav>\n", styles: ["seam-breadcrumbs li{color:#fff}seam-breadcrumbs li a{color:#fff}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TheSeamBreadcrumbsService }]; } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWktY29tbW9uL2JyZWFkY3J1bWJzL2JyZWFkY3J1bWJzL2JyZWFkY3J1bWJzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWNvbW1vbi9icmVhZGNydW1icy9icmVhZGNydW1icy9icmVhZGNydW1icy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFBOzs7OztBQWFyRixNQUFNLE9BQU8sb0JBQW9CO0lBSS9CLFlBQ1UsWUFBdUM7UUFBdkMsaUJBQVksR0FBWixZQUFZLENBQTJCO1FBRS9DLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUE7SUFDMUMsQ0FBQzs7aUhBUlUsb0JBQW9CO3FHQUFwQixvQkFBb0Isd0RDYmpDLGtjQVdBOzJGREVhLG9CQUFvQjtrQkFQaEMsU0FBUzsrQkFDRSxrQkFBa0IsaUJBR2IsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSdcbmltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tICdyeGpzJ1xuXG5pbXBvcnQgeyBUaGVTZWFtQnJlYWRjcnVtYiB9IGZyb20gJy4uL2JyZWFkY3J1bWInXG5pbXBvcnQgeyBUaGVTZWFtQnJlYWRjcnVtYnNTZXJ2aWNlIH0gZnJvbSAnLi4vYnJlYWRjcnVtYnMuc2VydmljZSdcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2VhbS1icmVhZGNydW1icycsXG4gIHRlbXBsYXRlVXJsOiAnLi9icmVhZGNydW1icy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2JyZWFkY3J1bWJzLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIEJyZWFkY3J1bWJzQ29tcG9uZW50IHtcblxuICBwdWJsaWMgY3J1bWJzJDogT2JzZXJ2YWJsZTxUaGVTZWFtQnJlYWRjcnVtYltdPlxuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgX2JyZWFkY3J1bWJzOiBUaGVTZWFtQnJlYWRjcnVtYnNTZXJ2aWNlXG4gICkge1xuICAgIHRoaXMuY3J1bWJzJCA9IHRoaXMuX2JyZWFkY3J1bWJzLmNydW1icyRcbiAgfVxuXG59XG4iLCI8bmF2IGFyaWEtbGFiZWw9XCJicmVhZGNydW1iXCI+XG4gIDxvbCBjbGFzcz1cImJyZWFkY3J1bWIgbWItMFwiPlxuICAgIDxsaSAqbmdGb3I9XCJsZXQgY3J1bWIgb2YgY3J1bWJzJCB8IGFzeW5jOyBsYXN0IGFzIGlzTGFzdFwiXG4gICAgICBjbGFzcz1cImJyZWFkY3J1bWItaXRlbVwiXG4gICAgICBbbmdDbGFzc109XCJ7ICdhY3RpdmUnOiBpc0xhc3QgfVwiXG4gICAgICBbYXR0ci5hcmlhLWN1cnJlbnRdPVwiaXNMYXN0ID8gJ3BhZ2UnIDogdW5kZWZpbmVkXCI+XG4gICAgICA8YSAqbmdJZj1cIiFpc0xhc3Q7IGVsc2Ugbm90TGlua1wiIFtyb3V0ZXJMaW5rXT1cImNydW1iLnBhdGhcIj57eyBjcnVtYi52YWx1ZSB9fTwvYT5cbiAgICAgIDxuZy10ZW1wbGF0ZSAjbm90TGluaz57eyBjcnVtYi52YWx1ZSB9fTwvbmctdGVtcGxhdGU+XG4gICAgPC9saT5cbiAgPC9vbD5cbjwvbmF2PlxuIl19