@paperless/angular 2.0.1-beta.96 → 2.0.1-beta.97

package/lib/modules/table/components/table/table.component.d.ts

@@ -1,10 +1,12 @@
-import { ChangeDetectorRef, EventEmitter, OnChanges, OnInit, QueryList, SimpleChanges, TemplateRef } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnInit, QueryList, SimpleChanges, TemplateRef } from '@angular/core';
 import { Params } from '@angular/router';
-import { QuickFilter, RowClickEvent } from '@paperless/core';
+import { QuickFilter, RowClickEvent, cn } from '@paperless/core';
 import { IconVariant, IllustrationVariant } from '@paperless/core/dist/types/components';
 import { BehaviorSubject } from 'rxjs';
 import { TableColumn } from '../table-column/table-column.component';
 import { AsyncItem, TableRowAction, TableRowActionQueryParams, TableRowActionRouterLink } from '../table-row-action/table-row-action.component';
+import { TableCell } from '../table-cell/table-cell.component';
+import { PTableRow } from 'projects/paperless/src/public-api';
 import * as i0 from "@angular/core";
 export declare class Table implements OnInit, OnChanges {
     private _changeDetection;
@@ -221,6 +223,17 @@ export declare class Table implements OnInit, OnChanges {
     emptyStateFilteredIllustration: IllustrationVariant;
     emptyStateFilteredHeader: string;
     emptyStateFilteredContent: string;
+    /**
+     * Wether to enable scrolling
+     */
+    enableScroll: boolean;
+    tableRows: QueryList<ElementRef<PTableRow>>;
+    tableCells: QueryList<ElementRef<TableCell>>;
+    scrollContainer: ElementRef<HTMLDivElement>;
+    reachedScrollStart$: BehaviorSubject<boolean>;
+    reachedScrollEnd$: BehaviorSubject<boolean>;
+    private _totalWidth;
+    private _calculateColumnWidthsTimeout?;
     /**
      * Event whenever the empty state is clicked
      */
@@ -263,9 +276,11 @@ export declare class Table implements OnInit, OnChanges {
     private _inputEnableRowSelection;
     private _inputRowSelectionLimit;
     footerHidden$: BehaviorSubject<boolean>;
+    cn: typeof cn;
     constructor(_changeDetection: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
     onResize(): void;
     keyDown({ key }: {
         key: string;
@@ -282,6 +297,7 @@ export declare class Table implements OnInit, OnChanges {
     onFilterModalReset(resetQuickFilter?: boolean): void;
     emptyStateClicked(): void;
     parseRowActionsRow(actions: TableRowAction[] | null, rowIndex: number): TableRowAction[];
+    onContainerXScroll(ev: any): void;
     private _parseItems;
     private _generateColumns;
     _checkboxDisabled(item: any, rowIndex: number): boolean;
@@ -302,6 +318,10 @@ export declare class Table implements OnInit, OnChanges {
     private _showFloatingMenu;
     private _parseDefinitions;
     private _parseDefinitionSizes;
+    private _calculateColumnWidths;
+    private _setRowsWidth;
+    private _resetScrollPosition;
+    private _calculateScrollPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<Table, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Table, "p-table-ngx", never, { "items": "items"; "loading": "loading"; "headerLoading": "headerLoading"; "footerLoading": "footerLoading"; "amountOfLoadingRows": "amountOfLoadingRows"; "enableRowSelection": "enableRowSelection"; "rowSelectionLimit": "rowSelectionLimit"; "enableRowClick": "enableRowClick"; "selectedRows": "selectedRows"; "selectionKey": "selectionKey"; "canSelectKey": "canSelectKey"; "enableFloatingMenu": "enableFloatingMenu"; "floatingMenuAmountSelectedText": "floatingMenuAmountSelectedText"; "floatingMenuAmountSelectedTemplate": "floatingMenuAmountSelectedTemplate"; "enableHeader": "enableHeader"; "quickFilters": "quickFilters"; "activeQuickFilterIdentifier": "activeQuickFilterIdentifier"; "enableSearch": "enableSearch"; "query": "query"; "enableFilter": "enableFilter"; "enableFilterDesktop": "enableFilterDesktop"; "selectedFiltersAmount": "selectedFiltersAmount"; "filterButtonTemplate": "filterButtonTemplate"; "enableAction": "enableAction"; "actionButtonLoading": "actionButtonLoading"; "actionButtonIcon": "actionButtonIcon"; "actionButtonEnabled": "actionButtonEnabled"; "actionButtonText": "actionButtonText"; "actionButtonTemplate": "actionButtonTemplate"; "enableFooter": "enableFooter"; "enablePaginationSize": "enablePaginationSize"; "enablePaginationPages": "enablePaginationPages"; "enableExport": "enableExport"; "page": "page"; "total": "total"; "pageSize": "pageSize"; "pageSizeOptions": "pageSizeOptions"; "hideOnSinglePage": "hideOnSinglePage"; "emptyStateType": "emptyStateType"; "emptyStateIllustration": "emptyStateIllustration"; "emptyStateHeader": "emptyStateHeader"; "emptyStateContent": "emptyStateContent"; "emptyStateAction": "emptyStateAction"; "emptyStateActionIcon": "emptyStateActionIcon"; "enableEmptyStateAction": "enableEmptyStateAction"; "emptyStateFilteredIllustration": "emptyStateFilteredIllustration"; "emptyStateFilteredHeader": "emptyStateFilteredHeader"; "emptyStateFilteredContent": "emptyStateFilteredContent"; "shadow": "shadow"; "filterModalHeaderText": "filterModalHeaderText"; "filterModalSaveText": "filterModalSaveText"; "filterModalCancelText": "filterModalCancelText"; "filterModalResetText": "filterModalResetText"; "filterModalShowReset": "filterModalShowReset"; "filterModalShowResetMobile": "filterModalShowResetMobile"; }, { "selectedRowsChange": "selectedRowsChange"; "rowClick": "rowClick"; "rowSelected": "rowSelected"; "rowDeselected": "rowDeselected"; "quickFilter": "quickFilter"; "queryChange": "queryChange"; "filter": "filter"; "action": "action"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "export": "export"; "emptyStateActionClick": "emptyStateActionClick"; "filterModalShow": "filterModalShow"; "filterModalSave": "filterModalSave"; "filterModalReset": "filterModalReset"; }, ["headerCustomFilterTemplate", "headerCustomActionsTemplate", "filterModalTemplate", "columnDefinitions", "rowActions"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Table, "p-table-ngx", never, { "items": "items"; "loading": "loading"; "headerLoading": "headerLoading"; "footerLoading": "footerLoading"; "amountOfLoadingRows": "amountOfLoadingRows"; "enableRowSelection": "enableRowSelection"; "rowSelectionLimit": "rowSelectionLimit"; "enableRowClick": "enableRowClick"; "selectedRows": "selectedRows"; "selectionKey": "selectionKey"; "canSelectKey": "canSelectKey"; "enableFloatingMenu": "enableFloatingMenu"; "floatingMenuAmountSelectedText": "floatingMenuAmountSelectedText"; "floatingMenuAmountSelectedTemplate": "floatingMenuAmountSelectedTemplate"; "enableHeader": "enableHeader"; "quickFilters": "quickFilters"; "activeQuickFilterIdentifier": "activeQuickFilterIdentifier"; "enableSearch": "enableSearch"; "query": "query"; "enableFilter": "enableFilter"; "enableFilterDesktop": "enableFilterDesktop"; "selectedFiltersAmount": "selectedFiltersAmount"; "filterButtonTemplate": "filterButtonTemplate"; "enableAction": "enableAction"; "actionButtonLoading": "actionButtonLoading"; "actionButtonIcon": "actionButtonIcon"; "actionButtonEnabled": "actionButtonEnabled"; "actionButtonText": "actionButtonText"; "actionButtonTemplate": "actionButtonTemplate"; "enableFooter": "enableFooter"; "enablePaginationSize": "enablePaginationSize"; "enablePaginationPages": "enablePaginationPages"; "enableExport": "enableExport"; "page": "page"; "total": "total"; "pageSize": "pageSize"; "pageSizeOptions": "pageSizeOptions"; "hideOnSinglePage": "hideOnSinglePage"; "emptyStateType": "emptyStateType"; "emptyStateIllustration": "emptyStateIllustration"; "emptyStateHeader": "emptyStateHeader"; "emptyStateContent": "emptyStateContent"; "emptyStateAction": "emptyStateAction"; "emptyStateActionIcon": "emptyStateActionIcon"; "enableEmptyStateAction": "enableEmptyStateAction"; "emptyStateFilteredIllustration": "emptyStateFilteredIllustration"; "emptyStateFilteredHeader": "emptyStateFilteredHeader"; "emptyStateFilteredContent": "emptyStateFilteredContent"; "enableScroll": "enableScroll"; "shadow": "shadow"; "filterModalHeaderText": "filterModalHeaderText"; "filterModalSaveText": "filterModalSaveText"; "filterModalCancelText": "filterModalCancelText"; "filterModalResetText": "filterModalResetText"; "filterModalShowReset": "filterModalShowReset"; "filterModalShowResetMobile": "filterModalShowResetMobile"; }, { "selectedRowsChange": "selectedRowsChange"; "rowClick": "rowClick"; "rowSelected": "rowSelected"; "rowDeselected": "rowDeselected"; "quickFilter": "quickFilter"; "queryChange": "queryChange"; "filter": "filter"; "action": "action"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "export": "export"; "emptyStateActionClick": "emptyStateActionClick"; "filterModalShow": "filterModalShow"; "filterModalSave": "filterModalSave"; "filterModalReset": "filterModalReset"; }, ["headerCustomFilterTemplate", "headerCustomActionsTemplate", "filterModalTemplate", "columnDefinitions", "rowActions"], never, false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paperless/angular",
-  "version": "2.0.1-beta.96",
+  "version": "2.0.1-beta.97",
   "peerDependencies": {
     "@angular/cdk": "^13.3.0 || ^14.0.0 || ^15.0.0 || ^17.0.0",
     "@angular/common": "^13.3.0 || ^14.0.0 || ^15.0.0",

package/paperless.css

@@ -6,6 +6,10 @@
   position: static !important
 }
 
+.relative {
+  position: relative !important
+}
+
 .sticky {
   position: sticky !important
 }
@@ -160,6 +164,10 @@
   flex: 1 1 0% !important
 }
 
+.flex-shrink-0 {
+  flex-shrink: 0 !important
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
 }
@@ -252,6 +260,10 @@
   overflow: hidden !important
 }
 
+.overflow-x-auto {
+  overflow-x: auto !important
+}
+
 .rounded {
   border-radius: 0.25rem !important
 }
@@ -281,6 +293,10 @@
   opacity: 0 !important
 }
 
+.opacity-100 {
+  opacity: 1 !important
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important
 }
@@ -323,6 +339,146 @@
   animation-timing-function: cubic-bezier(0, 0, 0.2, 1) !important
 }
 
+.before\:absolute::before {
+  content: var(--tw-content) !important;
+  position: absolute !important
+}
+
+.before\:left-0::before {
+  content: var(--tw-content) !important;
+  left: 0px !important
+}
+
+.before\:top-0::before {
+  content: var(--tw-content) !important;
+  top: 0px !important
+}
+
+.before\:z-\[1\]::before {
+  content: var(--tw-content) !important;
+  z-index: 1 !important
+}
+
+.before\:h-full::before {
+  content: var(--tw-content) !important;
+  height: 100% !important
+}
+
+.before\:w-\[10\%\]::before {
+  content: var(--tw-content) !important;
+  width: 10% !important
+}
+
+.before\:bg-gradient-to-r::before {
+  content: var(--tw-content) !important;
+  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important
+}
+
+.before\:from-white::before {
+  content: var(--tw-content) !important;
+  --tw-gradient-from: #FFFFFF var(--tw-gradient-from-position) !important;
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important
+}
+
+.before\:via-white\/80::before {
+  content: var(--tw-content) !important;
+  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position) !important;
+  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to) !important
+}
+
+.before\:to-transparent::before {
+  content: var(--tw-content) !important;
+  --tw-gradient-to: transparent var(--tw-gradient-to-position) !important
+}
+
+.before\:opacity-0::before {
+  content: var(--tw-content) !important;
+  opacity: 0 !important
+}
+
+.before\:opacity-100::before {
+  content: var(--tw-content) !important;
+  opacity: 1 !important
+}
+
+.before\:transition-opacity::before {
+  content: var(--tw-content) !important;
+  transition-property: opacity !important;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  transition-duration: 150ms !important
+}
+
+.after\:absolute::after {
+  content: var(--tw-content) !important;
+  position: absolute !important
+}
+
+.after\:right-0::after {
+  content: var(--tw-content) !important;
+  right: 0px !important
+}
+
+.after\:top-0::after {
+  content: var(--tw-content) !important;
+  top: 0px !important
+}
+
+.after\:z-\[0\]::after {
+  content: var(--tw-content) !important;
+  z-index: 0 !important
+}
+
+.after\:h-full::after {
+  content: var(--tw-content) !important;
+  height: 100% !important
+}
+
+.after\:w-\[10\%\]::after {
+  content: var(--tw-content) !important;
+  width: 10% !important
+}
+
+.after\:bg-gradient-to-l::after {
+  content: var(--tw-content) !important;
+  background-image: linear-gradient(to left, var(--tw-gradient-stops)) !important
+}
+
+.after\:from-white::after {
+  content: var(--tw-content) !important;
+  --tw-gradient-from: #FFFFFF var(--tw-gradient-from-position) !important;
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important
+}
+
+.after\:via-white\/80::after {
+  content: var(--tw-content) !important;
+  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position) !important;
+  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to) !important
+}
+
+.after\:to-transparent::after {
+  content: var(--tw-content) !important;
+  --tw-gradient-to: transparent var(--tw-gradient-to-position) !important
+}
+
+.after\:opacity-0::after {
+  content: var(--tw-content) !important;
+  opacity: 0 !important
+}
+
+.after\:opacity-100::after {
+  content: var(--tw-content) !important;
+  opacity: 1 !important
+}
+
+.after\:transition-opacity::after {
+  content: var(--tw-content) !important;
+  transition-property: opacity !important;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  transition-duration: 150ms !important
+}
+
 .group:hover .group-hover\:flex {
   display: flex !important
 }