@rivet-health/design-system 40.35.2 → 40.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/table/table/state-helpers/column-helpers.mjs +48 -10
- package/esm2020/lib/table/table/state.mjs +17 -9
- package/esm2020/lib/table/table/table-column-settings/table-column-settings-side-sheet.component.mjs +8 -18
- package/fesm2015/rivet-health-design-system.mjs +57 -28
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +69 -34
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/table/table/state-helpers/column-helpers.d.ts +11 -1
- package/lib/table/table/state.d.ts +3 -0
- package/lib/table/table/table-column-settings/table-column-settings-side-sheet.component.d.ts +3 -9
- package/package.json +1 -1
|
@@ -8624,10 +8624,10 @@ var TableColumnHelpers;
|
|
|
8624
8624
|
function getAlignment(metadata, index, allowSelection) {
|
|
8625
8625
|
return getColumnAlignment(metadata.dataType, index === 0 && !allowSelection);
|
|
8626
8626
|
}
|
|
8627
|
-
function resolveColumns(state, supportedColumns, columnNameMap, allowSelection) {
|
|
8627
|
+
function resolveColumns(state, supportedColumns, columnNameMap, allowSelection, filterTo) {
|
|
8628
8628
|
const allColumns = getAllColumns(state, supportedColumns, columnNameMap);
|
|
8629
8629
|
return allColumns
|
|
8630
|
-
.filter(({ enabled }) => enabled)
|
|
8630
|
+
.filter(({ enabled }) => (filterTo === 'enabled' ? enabled : !enabled))
|
|
8631
8631
|
.reduce((fullColumns, settings, i) => {
|
|
8632
8632
|
const metadata = supportedColumns.get(settings.key);
|
|
8633
8633
|
const resolvedWidth = settings.preferredWidth === 'auto'
|
|
@@ -8778,18 +8778,30 @@ var TableColumnHelpers;
|
|
|
8778
8778
|
TableColumnHelpers.changeColumnEnabled = changeColumnEnabled;
|
|
8779
8779
|
function enableAllColumns(state, columns, columnNameMap, enabled) {
|
|
8780
8780
|
const allColumns = getAllColumns(state, columns, columnNameMap);
|
|
8781
|
-
if (enabled && allColumns.length > RivTable.ColumnsMaxShown)
|
|
8781
|
+
if (enabled && allColumns.length > RivTable.ColumnsMaxShown) {
|
|
8782
8782
|
return state;
|
|
8783
|
+
}
|
|
8784
|
+
const updatedColumnSettings = allColumns.map(currentColumnSettings => {
|
|
8785
|
+
const currentColumnMetadata = columns.get(currentColumnSettings.key);
|
|
8786
|
+
const isColumnAlwaysVisible = currentColumnMetadata?.alwaysVisible ?? false;
|
|
8787
|
+
if (isColumnAlwaysVisible) {
|
|
8788
|
+
return {
|
|
8789
|
+
...currentColumnSettings,
|
|
8790
|
+
enabled: true,
|
|
8791
|
+
};
|
|
8792
|
+
}
|
|
8793
|
+
return {
|
|
8794
|
+
...currentColumnSettings,
|
|
8795
|
+
enabled: enabled,
|
|
8796
|
+
// Unpin if being unchecked
|
|
8797
|
+
pinned: !enabled ? false : currentColumnSettings.pinned,
|
|
8798
|
+
};
|
|
8799
|
+
});
|
|
8783
8800
|
return {
|
|
8784
8801
|
...state,
|
|
8785
8802
|
display: {
|
|
8786
8803
|
...state.display,
|
|
8787
|
-
columnSettings: orderIntentionally(
|
|
8788
|
-
...c,
|
|
8789
|
-
enabled: enabled,
|
|
8790
|
-
// Unpin if being unchecked
|
|
8791
|
-
pinned: !enabled ? false : c.pinned,
|
|
8792
|
-
})), columnNameMap),
|
|
8804
|
+
columnSettings: orderIntentionally(updatedColumnSettings, columnNameMap),
|
|
8793
8805
|
},
|
|
8794
8806
|
};
|
|
8795
8807
|
}
|
|
@@ -8832,10 +8844,36 @@ var TableColumnHelpers;
|
|
|
8832
8844
|
clickPreventDefault: metadata.clickPreventDefault,
|
|
8833
8845
|
clickStopPropagation: metadata.clickStopPropagation,
|
|
8834
8846
|
displayName: metadata.displayName,
|
|
8847
|
+
alwaysVisible: metadata.alwaysVisible,
|
|
8848
|
+
tooltipForHideIcon: metadata.tooltipForHideIcon,
|
|
8835
8849
|
},
|
|
8836
8850
|
]));
|
|
8837
8851
|
}
|
|
8838
8852
|
TableColumnHelpers.createColumnMetadataMap = createColumnMetadataMap;
|
|
8853
|
+
function getColumnSettingsColumnList(state) {
|
|
8854
|
+
const allColumnMetadata = [
|
|
8855
|
+
...state.display.columns,
|
|
8856
|
+
...state.display.disabledColumns,
|
|
8857
|
+
];
|
|
8858
|
+
const columnsLength = state.display.allColumns.length;
|
|
8859
|
+
const allColumns = state.display.allColumns.map((column, i) => {
|
|
8860
|
+
const nextColumnPinned = i + 2 <= columnsLength
|
|
8861
|
+
? state.display.allColumns[i + 1].pinned
|
|
8862
|
+
: false;
|
|
8863
|
+
const currentColumnMetadata = allColumnMetadata.find(metadata => metadata.key === column.key);
|
|
8864
|
+
return {
|
|
8865
|
+
...column,
|
|
8866
|
+
resolvedName: state.display.columnNameMap.get(column.key) ?? column.key,
|
|
8867
|
+
stateIndex: i,
|
|
8868
|
+
isLastPinnedColumn: column.pinned && !nextColumnPinned,
|
|
8869
|
+
alwaysVisible: currentColumnMetadata?.alwaysVisible ?? false,
|
|
8870
|
+
tooltipForHideIcon: currentColumnMetadata?.tooltipForHideIcon,
|
|
8871
|
+
highlightIndices: [],
|
|
8872
|
+
};
|
|
8873
|
+
});
|
|
8874
|
+
return allColumns;
|
|
8875
|
+
}
|
|
8876
|
+
TableColumnHelpers.getColumnSettingsColumnList = getColumnSettingsColumnList;
|
|
8839
8877
|
})(TableColumnHelpers || (TableColumnHelpers = {}));
|
|
8840
8878
|
|
|
8841
8879
|
var TableResultHelpers;
|
|
@@ -9701,7 +9739,8 @@ var RivTable;
|
|
|
9701
9739
|
const csvExportAllowed = !(options?.getRowSpanForCell || options?.customSummaryRow);
|
|
9702
9740
|
// Augment state with derived state, and subscribe.
|
|
9703
9741
|
const state = connectable(coreState.pipe(map(({ state: s }) => {
|
|
9704
|
-
const resolvedColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options?.allowSelection);
|
|
9742
|
+
const resolvedColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options?.allowSelection, 'enabled');
|
|
9743
|
+
const resolvedDisabledColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options?.allowSelection, 'disabled');
|
|
9705
9744
|
if (TableResultHelpers.isGroupResult(s.result)) {
|
|
9706
9745
|
return deriveFullStateFromGroupResult({
|
|
9707
9746
|
s,
|
|
@@ -9711,6 +9750,7 @@ var RivTable;
|
|
|
9711
9750
|
pluralEntityName,
|
|
9712
9751
|
columnNameMap,
|
|
9713
9752
|
resolvedColumns,
|
|
9753
|
+
resolvedDisabledColumns,
|
|
9714
9754
|
searchableColumnMap,
|
|
9715
9755
|
csvExportAllowed,
|
|
9716
9756
|
options,
|
|
@@ -9725,6 +9765,7 @@ var RivTable;
|
|
|
9725
9765
|
pluralEntityName,
|
|
9726
9766
|
columnNameMap,
|
|
9727
9767
|
resolvedColumns,
|
|
9768
|
+
resolvedDisabledColumns,
|
|
9728
9769
|
searchableColumnMap,
|
|
9729
9770
|
csvExportAllowed,
|
|
9730
9771
|
options,
|
|
@@ -9739,6 +9780,7 @@ var RivTable;
|
|
|
9739
9780
|
pluralEntityName,
|
|
9740
9781
|
columnNameMap,
|
|
9741
9782
|
resolvedColumns,
|
|
9783
|
+
resolvedDisabledColumns,
|
|
9742
9784
|
searchableColumnMap,
|
|
9743
9785
|
csvExportAllowed,
|
|
9744
9786
|
options,
|
|
@@ -9760,7 +9802,7 @@ var RivTable;
|
|
|
9760
9802
|
}
|
|
9761
9803
|
RivTable.createManager = createManager;
|
|
9762
9804
|
function deriveFullStateFromGroupResult(props) {
|
|
9763
|
-
const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
9805
|
+
const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, resolvedDisabledColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
9764
9806
|
if (options?.getRowSpanForCell) {
|
|
9765
9807
|
// eslint-disable-next-line no-console
|
|
9766
9808
|
console.warn('Heads up! Custom row spans are not supported for grouped tables.');
|
|
@@ -9798,7 +9840,7 @@ var RivTable;
|
|
|
9798
9840
|
if (!TableResultHelpers.isGroupResult(dataSet)) {
|
|
9799
9841
|
throw new Error('Returned non-grouped CSV data for grouped table');
|
|
9800
9842
|
}
|
|
9801
|
-
const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection);
|
|
9843
|
+
const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection, 'enabled');
|
|
9802
9844
|
const data = [];
|
|
9803
9845
|
data.push(fullColumns.map(({ key }) => columnNameMap.get(key) ?? key));
|
|
9804
9846
|
if (groupCellFormatter) {
|
|
@@ -9832,6 +9874,7 @@ var RivTable;
|
|
|
9832
9874
|
pluralEntityName: pluralEntityName,
|
|
9833
9875
|
columnNameMap: columnNameMap,
|
|
9834
9876
|
resolvedColumns: resolvedColumns,
|
|
9877
|
+
resolvedDisabledColumns: resolvedDisabledColumns,
|
|
9835
9878
|
searchableColumnMap: searchableColumnMap,
|
|
9836
9879
|
csvExportAllowed: csvExportAllowed,
|
|
9837
9880
|
options: options,
|
|
@@ -9849,7 +9892,7 @@ var RivTable;
|
|
|
9849
9892
|
};
|
|
9850
9893
|
}
|
|
9851
9894
|
function deriveFullStateFromNestedResult(props) {
|
|
9852
|
-
const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
9895
|
+
const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, resolvedDisabledColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
9853
9896
|
if (options?.getRowSpanForCell) {
|
|
9854
9897
|
// eslint-disable-next-line no-console
|
|
9855
9898
|
console.warn('Heads up! Custom row spans are not supported for tables with nested data.');
|
|
@@ -9885,7 +9928,7 @@ var RivTable;
|
|
|
9885
9928
|
if (TableResultHelpers.isGroupResult(dataSet)) {
|
|
9886
9929
|
throw new Error('Returned grouped CSV data for a nested with header result table');
|
|
9887
9930
|
}
|
|
9888
|
-
const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection);
|
|
9931
|
+
const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection, 'enabled');
|
|
9889
9932
|
const data = [];
|
|
9890
9933
|
data.push(fullColumns.map(({ key }) => columnNameMap.get(key) ?? key));
|
|
9891
9934
|
const allRows = TableResultHelpers.getAllRowsFromResult(dataSet);
|
|
@@ -9911,6 +9954,7 @@ var RivTable;
|
|
|
9911
9954
|
pluralEntityName: pluralEntityName,
|
|
9912
9955
|
columnNameMap: columnNameMap,
|
|
9913
9956
|
resolvedColumns: resolvedColumns,
|
|
9957
|
+
resolvedDisabledColumns: resolvedDisabledColumns,
|
|
9914
9958
|
searchableColumnMap: searchableColumnMap,
|
|
9915
9959
|
csvExportAllowed: csvExportAllowed,
|
|
9916
9960
|
options: options,
|
|
@@ -9928,7 +9972,7 @@ var RivTable;
|
|
|
9928
9972
|
};
|
|
9929
9973
|
}
|
|
9930
9974
|
function deriveFullStateFromRegularResult(props) {
|
|
9931
|
-
const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
9975
|
+
const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, resolvedDisabledColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
9932
9976
|
const rows = stateResult.currentPageData.map(row => ({
|
|
9933
9977
|
...row,
|
|
9934
9978
|
rowLink: options?.rowLink ? options.rowLink(row) : null,
|
|
@@ -9962,7 +10006,7 @@ var RivTable;
|
|
|
9962
10006
|
if (TableResultHelpers.isNestedResult(dataSet)) {
|
|
9963
10007
|
throw new Error('Returned nested CSV data for non-nested table');
|
|
9964
10008
|
}
|
|
9965
|
-
const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection);
|
|
10009
|
+
const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection, 'enabled');
|
|
9966
10010
|
const data = [];
|
|
9967
10011
|
data.push(fullColumns.map(({ key }) => columnNameMap.get(key) ?? key));
|
|
9968
10012
|
for (const record of dataSet.currentPageData) {
|
|
@@ -9988,6 +10032,7 @@ var RivTable;
|
|
|
9988
10032
|
pluralEntityName: pluralEntityName,
|
|
9989
10033
|
columnNameMap: columnNameMap,
|
|
9990
10034
|
resolvedColumns: resolvedColumns,
|
|
10035
|
+
resolvedDisabledColumns: resolvedDisabledColumns,
|
|
9991
10036
|
searchableColumnMap: searchableColumnMap,
|
|
9992
10037
|
csvExportAllowed: csvExportAllowed,
|
|
9993
10038
|
options: options,
|
|
@@ -10041,10 +10086,11 @@ var RivTable;
|
|
|
10041
10086
|
};
|
|
10042
10087
|
}
|
|
10043
10088
|
function derivedFullStateDisplay(props, partialDisplay = {}) {
|
|
10044
|
-
const { coreState, columns, pluralEntityName, columnNameMap, resolvedColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
10089
|
+
const { coreState, columns, pluralEntityName, columnNameMap, resolvedColumns, resolvedDisabledColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
10045
10090
|
return {
|
|
10046
10091
|
...coreState.display,
|
|
10047
10092
|
columns: resolvedColumns,
|
|
10093
|
+
disabledColumns: resolvedDisabledColumns,
|
|
10048
10094
|
allColumns: TableColumnHelpers.getAllColumns(coreState, columns, columnNameMap),
|
|
10049
10095
|
columnNameMap: columnNameMap,
|
|
10050
10096
|
searchableColumnMap: searchableColumnMap,
|
|
@@ -10836,18 +10882,7 @@ class TableColumnSettingsSideSheetComponent {
|
|
|
10836
10882
|
ngOnInit() {
|
|
10837
10883
|
this.columnList = combineLatest([
|
|
10838
10884
|
this.manager.state.pipe(map(s => {
|
|
10839
|
-
const
|
|
10840
|
-
const allColumns = s.display.allColumns.map((column, i) => {
|
|
10841
|
-
const nextColumnPinned = i + 2 <= columnsLength
|
|
10842
|
-
? s.display.allColumns[i + 1].pinned
|
|
10843
|
-
: false;
|
|
10844
|
-
return {
|
|
10845
|
-
...column,
|
|
10846
|
-
resolvedName: s.display.columnNameMap.get(column.key) ?? column.key,
|
|
10847
|
-
stateIndex: i,
|
|
10848
|
-
isLastPinnedColumn: column.pinned && !nextColumnPinned,
|
|
10849
|
-
};
|
|
10850
|
-
});
|
|
10885
|
+
const allColumns = TableColumnHelpers.getColumnSettingsColumnList(s);
|
|
10851
10886
|
const fuse = new Fuse(allColumns, {
|
|
10852
10887
|
keys: ['resolvedName'],
|
|
10853
10888
|
ignoreLocation: true,
|
|
@@ -10875,12 +10910,12 @@ class TableColumnSettingsSideSheetComponent {
|
|
|
10875
10910
|
disabledColumns,
|
|
10876
10911
|
};
|
|
10877
10912
|
}
|
|
10878
|
-
const
|
|
10913
|
+
const allVisibleColumns = allColumns.map(column => ({
|
|
10879
10914
|
...column,
|
|
10880
10915
|
highlightIndices: [],
|
|
10881
10916
|
}));
|
|
10882
|
-
const enabledColumns =
|
|
10883
|
-
const disabledColumns =
|
|
10917
|
+
const enabledColumns = allVisibleColumns.filter(column => column.enabled);
|
|
10918
|
+
const disabledColumns = allVisibleColumns.filter(column => !column.enabled);
|
|
10884
10919
|
return {
|
|
10885
10920
|
enabledColumns: enabledColumns,
|
|
10886
10921
|
disabledColumns: disabledColumns,
|
|
@@ -10997,10 +11032,10 @@ class TableColumnSettingsSideSheetComponent {
|
|
|
10997
11032
|
}
|
|
10998
11033
|
}
|
|
10999
11034
|
TableColumnSettingsSideSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableColumnSettingsSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11000
|
-
TableColumnSettingsSideSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableColumnSettingsSideSheetComponent, selector: "riv-table-column-settings-side-sheet", inputs: { manager: "manager" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<button type=\"button\" #trigger rivButton (click)=\"open.next(true)\">\n Columns\n</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n <ng-container *ngIf=\"open | async\">\n <riv-side-sheet (close)=\"open.next(false); filterQuery.next('')\">\n <div class=\"content\">\n <div class=\"title\">\n <span>Columns</span>\n <button\n type=\"button\"\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"open.next(false); filterQuery.next('')\"\n ></button>\n </div>\n <riv-search\n [name]=\"'column-search'\"\n [value]=\"(filterQuery | async) || ''\"\n (valueChange)=\"filterQuery.next($event)\"\n ></riv-search>\n <riv-banner\n *ngIf=\"\n columns.disabledColumns.length > 0 &&\n disableEnablingColumns(columns)\n \"\n [iconTooltip]=\"iconLimitTooltip()\"\n >\n Column limit reached\n </riv-banner>\n <div class=\"columns\">\n <div *ngIf=\"columns.enabledColumns.length > 0\">\n <div\n class=\"column-header drop-zone\"\n (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n >\n <span class=\"column-header-label\">Shown in table</span>\n <button\n type=\"button\"\n *ngIf=\"(searching | async) === false\"\n rivButton\n [variant]=\"'ghost'\"\n [disabled]=\"allColumnsEnabled(columns)\"\n (click)=\"enableAllColumns(false)\"\n >\n Hide all\n </button>\n </div>\n\n <div class=\"options\">\n <ng-container\n *ngFor=\"let column of columns.enabledColumns; let i = index\"\n >\n <div\n class=\"option drop-zone\"\n [attr.draggable]=\"(searching | async) === false\"\n [attr.droppable]=\"(searching | async) === false\"\n (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n (drop)=\"\n drop(\n i,\n column.stateIndex,\n true,\n columns.enabledColumns.length\n )\n \"\n [class.dragged-over-top]=\"\n draggedOverColumnIdx === i &&\n draggedColumnIdx !== null &&\n draggedColumnIdx > i\n \"\n [class.dragged-over-bottom]=\"\n draggedOverColumnIdx === i &&\n draggedColumnIdx !== null &&\n draggedColumnIdx < i\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: { column, columns }\n \"\n ></ng-container>\n </div>\n <div\n *ngIf=\"\n column.isLastPinnedColumn && (searching | async) === false\n \"\n class=\"column scroll-padding\"\n >\n <div class=\"frozen\">\n <span class=\"pinned\">\n <riv-icon [name]=\"'PinInactive'\" [size]=\"20\"></riv-icon>\n </span>\n <span>Frozen through here</span>\n </div>\n\n <button\n type=\"button\"\n class=\"hidden\"\n rivButton\n [rivTooltip]=\"'Un-freeze columns'\"\n class=\"disable-override\"\n [class.disabled]=\"!column.enabled\"\n [variant]=\"'ghost'\"\n [size]=\"'small'\"\n [icon]=\"'X'\"\n (click)=\"\n columnFreezeUpTo(\n false,\n column.stateIndex,\n 'freezeDivider'\n )\n \"\n ></button>\n </div>\n </ng-container>\n </div>\n </div>\n <div\n *ngIf=\"\n columns.enabledColumns.length === 0 &&\n (searching | async) === false\n \"\n class=\"column-header drop-zone\"\n (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n >\n <span>No columns shown</span>\n <button\n type=\"button\"\n rivButton\n [variant]=\"'ghost'\"\n (click)=\"resetToDefault()\"\n >\n Reset to default\n </button>\n </div>\n <div\n class=\"divider\"\n *ngIf=\"\n columns.disabledColumns.length > 0 &&\n ((searching | async) === false ||\n ((searching | async) && columns.enabledColumns.length > 0))\n \"\n ></div>\n <div\n *ngIf=\"columns.disabledColumns.length > 0\"\n (drop)=\"dropEnabledState(false, columns.enabledColumns.length)\"\n (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n >\n <div class=\"column-header\">\n <span class=\"column-header-label\">Hidden from table</span>\n\n <button\n type=\"button\"\n *ngIf=\"\n (searching | async) === false &&\n showAllColumnsVisible(columns)\n \"\n rivButton\n [variant]=\"'ghost'\"\n [disabled]=\"allColumnsDisabled(columns)\"\n (click)=\"enableAllColumns(true)\"\n >\n Show all\n </button>\n </div>\n\n <div class=\"options\">\n <div\n *ngFor=\"let column of columns.disabledColumns; let i = index\"\n [attr.draggable]=\"\n (searching | async) === false &&\n !disableEnablingColumns(columns)\n \"\n [attr.droppable]=\"\n (searching | async) === false &&\n !disableEnablingColumns(columns)\n \"\n [class.drop-zone]=\"!disableEnablingColumns(columns)\"\n (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n (dragenter)=\"\n $event.preventDefault();\n dragOver(i + columns.enabledColumns.length)\n \"\n (drop)=\"\n drop(\n i + columns.enabledColumns.length,\n column.stateIndex,\n false,\n columns.enabledColumns.length\n )\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: { column, columns }\n \"\n ></ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </riv-side-sheet>\n </ng-container>\n</ng-container>\n\n<ng-template #columnTemplate let-column=\"column\" let-columns=\"columns\">\n <div\n class=\"column scroll-padding\"\n [class.disabled]=\"disableEnablingColumn(column, columns)\"\n >\n <div class=\"column\">\n <span\n class=\"reorder\"\n *ngIf=\"(searching | async) === false\"\n [class.disabled]=\"disableEnablingColumn(column, columns)\"\n >\n <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n </span>\n <riv-highlight\n [text]=\"column.resolvedName\"\n [indices]=\"column.highlightIndices\"\n ></riv-highlight>\n </div>\n <div>\n <riv-menu\n class=\"hidden\"\n *ngIf=\"column.enabled || !disableEnablingColumns(columns)\"\n >\n <button\n type=\"button\"\n *ngIf=\"column.enabled && !column.pinned\"\n riv-menu-item\n (click)=\"\n columnFreezeUpTo(true, column.stateIndex, 'optionsMenu', column.key)\n \"\n >\n Freeze up to column\n </button>\n <button\n type=\"button\"\n *ngIf=\"column.enabled && column.pinned\"\n riv-menu-item\n (click)=\"columnFreezeUpTo(false, 0, 'optionsMenu', column.key)\"\n >\n Un-freeze columns\n </button>\n <button\n type=\"button\"\n riv-menu-item\n (click)=\"columnMoveTo(column, 'start')\"\n >\n Move to start\n </button>\n <button\n type=\"button\"\n riv-menu-item\n (click)=\"columnMoveTo(column, 'end')\"\n >\n Move to end\n </button>\n <button\n type=\"button\"\n riv-menu-item\n (click)=\"columnEnabledChange(column, !column.enabled, 'optionsMenu')\"\n >\n {{ column.enabled ? 'Hide column' : 'Show column' }}\n </button>\n </riv-menu>\n <button\n type=\"button\"\n rivButton\n [rivTooltip]=\"\n column.enabled\n ? 'Hide column'\n : disableEnablingColumns(columns)\n ? limitTooltip()\n : 'Show column'\n \"\n class=\"disable-override\"\n [class.disabled]=\"!column.enabled\"\n [disabled]=\"disableEnablingColumn(column, columns)\"\n [variant]=\"'ghost'\"\n [size]=\"'small'\"\n [icon]=\"column.enabled ? 'Eye' : 'EyeOff'\"\n (click)=\"columnEnabledChange(column, !column.enabled, 'eyeIcon')\"\n ></button>\n </div>\n </div>\n</ng-template>\n", styles: [".content{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}.title{font:var(--title-02);display:flex;justify-content:space-between;align-items:center}.column-header{color:var(--type-light-low-contrast);display:flex;justify-content:space-between;align-items:center;font:var(--input-medium)}.column-header-label{padding:var(--size-small) 0}.column{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium)}.column:hover{background-color:var(--surface-light-1)}.column:hover .hidden{opacity:1}.column.disabled{color:var(--type-light-low-contrast)}.reorder{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}.pinned{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch}.frozen{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium);color:var(--type-light-low-contrast)}.disable-override.disabled:hover{cursor:pointer}.hidden{opacity:0}.columns{flex-grow:1;overflow-y:auto}.options{display:flex;flex-direction:column}.option{position:relative}.option.dragged-over-top:before,.option.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.option.dragged-over-top:before{top:0}.option.dragged-over-bottom:before{bottom:0}.scroll-padding{padding-right:var(--base-grid-size)}.divider{border-top:var(--border-width) solid var(--border-light);margin-top:var(--size-medium);margin-bottom:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BannerComponent, selector: "riv-banner", inputs: ["variant", "icon", "iconTooltip", "heading", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition", "disabled"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11035
|
+
TableColumnSettingsSideSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableColumnSettingsSideSheetComponent, selector: "riv-table-column-settings-side-sheet", inputs: { manager: "manager" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<button type=\"button\" #trigger rivButton (click)=\"open.next(true)\">\n Columns\n</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n <ng-container *ngIf=\"open | async\">\n <riv-side-sheet (close)=\"open.next(false); filterQuery.next('')\">\n <div class=\"content\">\n <div class=\"title\">\n <span>Columns</span>\n <button\n type=\"button\"\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"open.next(false); filterQuery.next('')\"\n ></button>\n </div>\n <riv-search\n [name]=\"'column-search'\"\n [value]=\"(filterQuery | async) || ''\"\n (valueChange)=\"filterQuery.next($event)\"\n ></riv-search>\n <riv-banner\n *ngIf=\"\n columns.disabledColumns.length > 0 &&\n disableEnablingColumns(columns)\n \"\n [iconTooltip]=\"iconLimitTooltip()\"\n >\n Column limit reached\n </riv-banner>\n <div class=\"columns\">\n <div *ngIf=\"columns.enabledColumns.length > 0\">\n <div\n class=\"column-header drop-zone\"\n (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n >\n <span class=\"column-header-label\">Shown in table</span>\n <button\n type=\"button\"\n *ngIf=\"(searching | async) === false\"\n rivButton\n [variant]=\"'ghost'\"\n [disabled]=\"allColumnsEnabled(columns)\"\n (click)=\"enableAllColumns(false)\"\n >\n Hide all\n </button>\n </div>\n\n <div class=\"options\">\n <ng-container\n *ngFor=\"let column of columns.enabledColumns; let i = index\"\n >\n <div\n class=\"option drop-zone\"\n [attr.draggable]=\"(searching | async) === false\"\n [attr.droppable]=\"(searching | async) === false\"\n (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n (drop)=\"\n drop(\n i,\n column.stateIndex,\n true,\n columns.enabledColumns.length\n )\n \"\n [class.dragged-over-top]=\"\n draggedOverColumnIdx === i &&\n draggedColumnIdx !== null &&\n draggedColumnIdx > i\n \"\n [class.dragged-over-bottom]=\"\n draggedOverColumnIdx === i &&\n draggedColumnIdx !== null &&\n draggedColumnIdx < i\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: { column, columns }\n \"\n ></ng-container>\n </div>\n <div\n *ngIf=\"\n column.isLastPinnedColumn && (searching | async) === false\n \"\n class=\"column scroll-padding\"\n >\n <div class=\"frozen\">\n <span class=\"pinned\">\n <riv-icon [name]=\"'PinInactive'\" [size]=\"20\"></riv-icon>\n </span>\n <span>Frozen through here</span>\n </div>\n\n <button\n type=\"button\"\n class=\"hidden\"\n rivButton\n [rivTooltip]=\"'Un-freeze columns'\"\n class=\"disable-override\"\n [class.disabled]=\"!column.enabled\"\n [variant]=\"'ghost'\"\n [size]=\"'small'\"\n [icon]=\"'X'\"\n (click)=\"\n columnFreezeUpTo(\n false,\n column.stateIndex,\n 'freezeDivider'\n )\n \"\n ></button>\n </div>\n </ng-container>\n </div>\n </div>\n <div\n *ngIf=\"\n columns.enabledColumns.length === 0 &&\n (searching | async) === false\n \"\n class=\"column-header drop-zone\"\n (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n >\n <span>No columns shown</span>\n <button\n type=\"button\"\n rivButton\n [variant]=\"'ghost'\"\n (click)=\"resetToDefault()\"\n >\n Reset to default\n </button>\n </div>\n <div\n class=\"divider\"\n *ngIf=\"\n columns.disabledColumns.length > 0 &&\n ((searching | async) === false ||\n ((searching | async) && columns.enabledColumns.length > 0))\n \"\n ></div>\n <div\n *ngIf=\"columns.disabledColumns.length > 0\"\n (drop)=\"dropEnabledState(false, columns.enabledColumns.length)\"\n (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n >\n <div class=\"column-header\">\n <span class=\"column-header-label\">Hidden from table</span>\n\n <button\n type=\"button\"\n *ngIf=\"\n (searching | async) === false &&\n showAllColumnsVisible(columns)\n \"\n rivButton\n [variant]=\"'ghost'\"\n [disabled]=\"allColumnsDisabled(columns)\"\n (click)=\"enableAllColumns(true)\"\n >\n Show all\n </button>\n </div>\n\n <div class=\"options\">\n <div\n *ngFor=\"let column of columns.disabledColumns; let i = index\"\n [attr.draggable]=\"\n (searching | async) === false &&\n !disableEnablingColumns(columns)\n \"\n [attr.droppable]=\"\n (searching | async) === false &&\n !disableEnablingColumns(columns)\n \"\n [class.drop-zone]=\"!disableEnablingColumns(columns)\"\n (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n (dragenter)=\"\n $event.preventDefault();\n dragOver(i + columns.enabledColumns.length)\n \"\n (drop)=\"\n drop(\n i + columns.enabledColumns.length,\n column.stateIndex,\n false,\n columns.enabledColumns.length\n )\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: { column, columns }\n \"\n ></ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </riv-side-sheet>\n </ng-container>\n</ng-container>\n\n<ng-template #columnTemplate let-column=\"column\" let-columns=\"columns\">\n <div\n class=\"column scroll-padding\"\n [class.disabled]=\"disableEnablingColumn(column, columns)\"\n >\n <div class=\"column\">\n <ng-container\n *ngTemplateOutlet=\"reorderIcon; context: { column, columns }\"\n ></ng-container>\n\n <riv-highlight\n [text]=\"column.resolvedName\"\n [indices]=\"column.highlightIndices\"\n ></riv-highlight>\n </div>\n <div>\n <riv-menu\n class=\"hidden\"\n *ngIf=\"column.enabled || !disableEnablingColumns(columns)\"\n >\n <button\n type=\"button\"\n *ngIf=\"column.enabled && !column.pinned\"\n riv-menu-item\n (click)=\"\n columnFreezeUpTo(true, column.stateIndex, 'optionsMenu', column.key)\n \"\n >\n Freeze up to column\n </button>\n <button\n type=\"button\"\n *ngIf=\"column.enabled && column.pinned\"\n riv-menu-item\n (click)=\"columnFreezeUpTo(false, 0, 'optionsMenu', column.key)\"\n >\n Un-freeze columns\n </button>\n <button\n type=\"button\"\n riv-menu-item\n (click)=\"columnMoveTo(column, 'start')\"\n >\n Move to start\n </button>\n <button\n type=\"button\"\n riv-menu-item\n (click)=\"columnMoveTo(column, 'end')\"\n >\n Move to end\n </button>\n <button\n *ngIf=\"!column.alwaysVisible\"\n type=\"button\"\n riv-menu-item\n (click)=\"columnEnabledChange(column, !column.enabled, 'optionsMenu')\"\n >\n {{ column.enabled ? 'Hide column' : 'Show column' }}\n </button>\n </riv-menu>\n\n <ng-container\n *ngTemplateOutlet=\"enableIcon; context: { column, columns }\"\n ></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #reorderIcon let-column=\"column\" let-columns=\"columns\">\n <span\n class=\"reorder\"\n *ngIf=\"(searching | async) === false\"\n [class.disabled]=\"disableEnablingColumn(column, columns)\"\n >\n <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n </span>\n</ng-template>\n\n<ng-template #enableIcon let-column=\"column\" let-columns=\"columns\">\n <button\n *ngIf=\"!column.alwaysVisible\"\n type=\"button\"\n rivButton\n [rivTooltip]=\"\n column.enabled\n ? 'Hide column'\n : disableEnablingColumns(columns)\n ? limitTooltip()\n : 'Show column'\n \"\n class=\"disable-override\"\n [class.disabled]=\"!column.enabled\"\n [disabled]=\"disableEnablingColumn(column, columns)\"\n [variant]=\"'ghost'\"\n [size]=\"'small'\"\n [icon]=\"column.enabled ? 'Eye' : 'EyeOff'\"\n (click)=\"columnEnabledChange(column, !column.enabled, 'eyeIcon')\"\n ></button>\n\n <button\n *ngIf=\"column.alwaysVisible\"\n type=\"button\"\n rivButton\n [rivTooltip]=\"column.tooltipForHideIcon\"\n [disabled]=\"true\"\n [variant]=\"'ghost'\"\n [size]=\"'small'\"\n [icon]=\"'Lock'\"\n ></button>\n</ng-template>\n", styles: [".content{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}.title{font:var(--title-02);display:flex;justify-content:space-between;align-items:center}.column-header{color:var(--type-light-low-contrast);display:flex;justify-content:space-between;align-items:center;font:var(--input-medium)}.column-header-label{padding:var(--size-small) 0}.column{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium)}.column:hover{background-color:var(--surface-light-1)}.column:hover .hidden{opacity:1}.column.disabled{color:var(--type-light-low-contrast)}.reorder{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}.pinned{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch}.frozen{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium);color:var(--type-light-low-contrast)}.disable-override.disabled:hover{cursor:pointer}.hidden{opacity:0}.columns{flex-grow:1;overflow-y:auto}.options{display:flex;flex-direction:column}.option{position:relative}.option.dragged-over-top:before,.option.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.option.dragged-over-top:before{top:0}.option.dragged-over-bottom:before{bottom:0}.scroll-padding{padding-right:var(--base-grid-size)}.divider{border-top:var(--border-width) solid var(--border-light);margin-top:var(--size-medium);margin-bottom:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BannerComponent, selector: "riv-banner", inputs: ["variant", "icon", "iconTooltip", "heading", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition", "disabled"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11001
11036
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableColumnSettingsSideSheetComponent, decorators: [{
|
|
11002
11037
|
type: Component,
|
|
11003
|
-
args: [{ selector: 'riv-table-column-settings-side-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" #trigger rivButton (click)=\"open.next(true)\">\n Columns\n</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n <ng-container *ngIf=\"open | async\">\n <riv-side-sheet (close)=\"open.next(false); filterQuery.next('')\">\n <div class=\"content\">\n <div class=\"title\">\n <span>Columns</span>\n <button\n type=\"button\"\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"open.next(false); filterQuery.next('')\"\n ></button>\n </div>\n <riv-search\n [name]=\"'column-search'\"\n [value]=\"(filterQuery | async) || ''\"\n (valueChange)=\"filterQuery.next($event)\"\n ></riv-search>\n <riv-banner\n *ngIf=\"\n columns.disabledColumns.length > 0 &&\n disableEnablingColumns(columns)\n \"\n [iconTooltip]=\"iconLimitTooltip()\"\n >\n Column limit reached\n </riv-banner>\n <div class=\"columns\">\n <div *ngIf=\"columns.enabledColumns.length > 0\">\n <div\n class=\"column-header drop-zone\"\n (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n >\n <span class=\"column-header-label\">Shown in table</span>\n <button\n type=\"button\"\n *ngIf=\"(searching | async) === false\"\n rivButton\n [variant]=\"'ghost'\"\n [disabled]=\"allColumnsEnabled(columns)\"\n (click)=\"enableAllColumns(false)\"\n >\n Hide all\n </button>\n </div>\n\n <div class=\"options\">\n <ng-container\n *ngFor=\"let column of columns.enabledColumns; let i = index\"\n >\n <div\n class=\"option drop-zone\"\n [attr.draggable]=\"(searching | async) === false\"\n [attr.droppable]=\"(searching | async) === false\"\n (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n (drop)=\"\n drop(\n i,\n column.stateIndex,\n true,\n columns.enabledColumns.length\n )\n \"\n [class.dragged-over-top]=\"\n draggedOverColumnIdx === i &&\n draggedColumnIdx !== null &&\n draggedColumnIdx > i\n \"\n [class.dragged-over-bottom]=\"\n draggedOverColumnIdx === i &&\n draggedColumnIdx !== null &&\n draggedColumnIdx < i\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: { column, columns }\n \"\n ></ng-container>\n </div>\n <div\n *ngIf=\"\n column.isLastPinnedColumn && (searching | async) === false\n \"\n class=\"column scroll-padding\"\n >\n <div class=\"frozen\">\n <span class=\"pinned\">\n <riv-icon [name]=\"'PinInactive'\" [size]=\"20\"></riv-icon>\n </span>\n <span>Frozen through here</span>\n </div>\n\n <button\n type=\"button\"\n class=\"hidden\"\n rivButton\n [rivTooltip]=\"'Un-freeze columns'\"\n class=\"disable-override\"\n [class.disabled]=\"!column.enabled\"\n [variant]=\"'ghost'\"\n [size]=\"'small'\"\n [icon]=\"'X'\"\n (click)=\"\n columnFreezeUpTo(\n false,\n column.stateIndex,\n 'freezeDivider'\n )\n \"\n ></button>\n </div>\n </ng-container>\n </div>\n </div>\n <div\n *ngIf=\"\n columns.enabledColumns.length === 0 &&\n (searching | async) === false\n \"\n class=\"column-header drop-zone\"\n (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n >\n <span>No columns shown</span>\n <button\n type=\"button\"\n rivButton\n [variant]=\"'ghost'\"\n (click)=\"resetToDefault()\"\n >\n Reset to default\n </button>\n </div>\n <div\n class=\"divider\"\n *ngIf=\"\n columns.disabledColumns.length > 0 &&\n ((searching | async) === false ||\n ((searching | async) && columns.enabledColumns.length > 0))\n \"\n ></div>\n <div\n *ngIf=\"columns.disabledColumns.length > 0\"\n (drop)=\"dropEnabledState(false, columns.enabledColumns.length)\"\n (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n >\n <div class=\"column-header\">\n <span class=\"column-header-label\">Hidden from table</span>\n\n <button\n type=\"button\"\n *ngIf=\"\n (searching | async) === false &&\n showAllColumnsVisible(columns)\n \"\n rivButton\n [variant]=\"'ghost'\"\n [disabled]=\"allColumnsDisabled(columns)\"\n (click)=\"enableAllColumns(true)\"\n >\n Show all\n </button>\n </div>\n\n <div class=\"options\">\n <div\n *ngFor=\"let column of columns.disabledColumns; let i = index\"\n [attr.draggable]=\"\n (searching | async) === false &&\n !disableEnablingColumns(columns)\n \"\n [attr.droppable]=\"\n (searching | async) === false &&\n !disableEnablingColumns(columns)\n \"\n [class.drop-zone]=\"!disableEnablingColumns(columns)\"\n (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n (dragenter)=\"\n $event.preventDefault();\n dragOver(i + columns.enabledColumns.length)\n \"\n (drop)=\"\n drop(\n i + columns.enabledColumns.length,\n column.stateIndex,\n false,\n columns.enabledColumns.length\n )\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: { column, columns }\n \"\n ></ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </riv-side-sheet>\n </ng-container>\n</ng-container>\n\n<ng-template #columnTemplate let-column=\"column\" let-columns=\"columns\">\n <div\n class=\"column scroll-padding\"\n [class.disabled]=\"disableEnablingColumn(column, columns)\"\n >\n <div class=\"column\">\n <span\n class=\"reorder\"\n *ngIf=\"(searching | async) === false\"\n [class.disabled]=\"disableEnablingColumn(column, columns)\"\n >\n <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n </span>\n <riv-highlight\n [text]=\"column.resolvedName\"\n [indices]=\"column.highlightIndices\"\n ></riv-highlight>\n </div>\n <div>\n <riv-menu\n class=\"hidden\"\n *ngIf=\"column.enabled || !disableEnablingColumns(columns)\"\n >\n <button\n type=\"button\"\n *ngIf=\"column.enabled && !column.pinned\"\n riv-menu-item\n (click)=\"\n columnFreezeUpTo(true, column.stateIndex, 'optionsMenu', column.key)\n \"\n >\n Freeze up to column\n </button>\n <button\n type=\"button\"\n *ngIf=\"column.enabled && column.pinned\"\n riv-menu-item\n (click)=\"columnFreezeUpTo(false, 0, 'optionsMenu', column.key)\"\n >\n Un-freeze columns\n </button>\n <button\n type=\"button\"\n riv-menu-item\n (click)=\"columnMoveTo(column, 'start')\"\n >\n Move to start\n </button>\n <button\n type=\"button\"\n riv-menu-item\n (click)=\"columnMoveTo(column, 'end')\"\n >\n Move to end\n </button>\n <button\n type=\"button\"\n riv-menu-item\n (click)=\"columnEnabledChange(column, !column.enabled, 'optionsMenu')\"\n >\n {{ column.enabled ? 'Hide column' : 'Show column' }}\n </button>\n </riv-menu>\n <button\n type=\"button\"\n rivButton\n [rivTooltip]=\"\n column.enabled\n ? 'Hide column'\n : disableEnablingColumns(columns)\n ? limitTooltip()\n : 'Show column'\n \"\n class=\"disable-override\"\n [class.disabled]=\"!column.enabled\"\n [disabled]=\"disableEnablingColumn(column, columns)\"\n [variant]=\"'ghost'\"\n [size]=\"'small'\"\n [icon]=\"column.enabled ? 'Eye' : 'EyeOff'\"\n (click)=\"columnEnabledChange(column, !column.enabled, 'eyeIcon')\"\n ></button>\n </div>\n </div>\n</ng-template>\n", styles: [".content{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}.title{font:var(--title-02);display:flex;justify-content:space-between;align-items:center}.column-header{color:var(--type-light-low-contrast);display:flex;justify-content:space-between;align-items:center;font:var(--input-medium)}.column-header-label{padding:var(--size-small) 0}.column{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium)}.column:hover{background-color:var(--surface-light-1)}.column:hover .hidden{opacity:1}.column.disabled{color:var(--type-light-low-contrast)}.reorder{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}.pinned{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch}.frozen{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium);color:var(--type-light-low-contrast)}.disable-override.disabled:hover{cursor:pointer}.hidden{opacity:0}.columns{flex-grow:1;overflow-y:auto}.options{display:flex;flex-direction:column}.option{position:relative}.option.dragged-over-top:before,.option.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.option.dragged-over-top:before{top:0}.option.dragged-over-bottom:before{bottom:0}.scroll-padding{padding-right:var(--base-grid-size)}.divider{border-top:var(--border-width) solid var(--border-light);margin-top:var(--size-medium);margin-bottom:var(--size-medium)}\n"] }]
|
|
11038
|
+
args: [{ selector: 'riv-table-column-settings-side-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" #trigger rivButton (click)=\"open.next(true)\">\n Columns\n</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n <ng-container *ngIf=\"open | async\">\n <riv-side-sheet (close)=\"open.next(false); filterQuery.next('')\">\n <div class=\"content\">\n <div class=\"title\">\n <span>Columns</span>\n <button\n type=\"button\"\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"open.next(false); filterQuery.next('')\"\n ></button>\n </div>\n <riv-search\n [name]=\"'column-search'\"\n [value]=\"(filterQuery | async) || ''\"\n (valueChange)=\"filterQuery.next($event)\"\n ></riv-search>\n <riv-banner\n *ngIf=\"\n columns.disabledColumns.length > 0 &&\n disableEnablingColumns(columns)\n \"\n [iconTooltip]=\"iconLimitTooltip()\"\n >\n Column limit reached\n </riv-banner>\n <div class=\"columns\">\n <div *ngIf=\"columns.enabledColumns.length > 0\">\n <div\n class=\"column-header drop-zone\"\n (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n >\n <span class=\"column-header-label\">Shown in table</span>\n <button\n type=\"button\"\n *ngIf=\"(searching | async) === false\"\n rivButton\n [variant]=\"'ghost'\"\n [disabled]=\"allColumnsEnabled(columns)\"\n (click)=\"enableAllColumns(false)\"\n >\n Hide all\n </button>\n </div>\n\n <div class=\"options\">\n <ng-container\n *ngFor=\"let column of columns.enabledColumns; let i = index\"\n >\n <div\n class=\"option drop-zone\"\n [attr.draggable]=\"(searching | async) === false\"\n [attr.droppable]=\"(searching | async) === false\"\n (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n (drop)=\"\n drop(\n i,\n column.stateIndex,\n true,\n columns.enabledColumns.length\n )\n \"\n [class.dragged-over-top]=\"\n draggedOverColumnIdx === i &&\n draggedColumnIdx !== null &&\n draggedColumnIdx > i\n \"\n [class.dragged-over-bottom]=\"\n draggedOverColumnIdx === i &&\n draggedColumnIdx !== null &&\n draggedColumnIdx < i\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: { column, columns }\n \"\n ></ng-container>\n </div>\n <div\n *ngIf=\"\n column.isLastPinnedColumn && (searching | async) === false\n \"\n class=\"column scroll-padding\"\n >\n <div class=\"frozen\">\n <span class=\"pinned\">\n <riv-icon [name]=\"'PinInactive'\" [size]=\"20\"></riv-icon>\n </span>\n <span>Frozen through here</span>\n </div>\n\n <button\n type=\"button\"\n class=\"hidden\"\n rivButton\n [rivTooltip]=\"'Un-freeze columns'\"\n class=\"disable-override\"\n [class.disabled]=\"!column.enabled\"\n [variant]=\"'ghost'\"\n [size]=\"'small'\"\n [icon]=\"'X'\"\n (click)=\"\n columnFreezeUpTo(\n false,\n column.stateIndex,\n 'freezeDivider'\n )\n \"\n ></button>\n </div>\n </ng-container>\n </div>\n </div>\n <div\n *ngIf=\"\n columns.enabledColumns.length === 0 &&\n (searching | async) === false\n \"\n class=\"column-header drop-zone\"\n (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n >\n <span>No columns shown</span>\n <button\n type=\"button\"\n rivButton\n [variant]=\"'ghost'\"\n (click)=\"resetToDefault()\"\n >\n Reset to default\n </button>\n </div>\n <div\n class=\"divider\"\n *ngIf=\"\n columns.disabledColumns.length > 0 &&\n ((searching | async) === false ||\n ((searching | async) && columns.enabledColumns.length > 0))\n \"\n ></div>\n <div\n *ngIf=\"columns.disabledColumns.length > 0\"\n (drop)=\"dropEnabledState(false, columns.enabledColumns.length)\"\n (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n >\n <div class=\"column-header\">\n <span class=\"column-header-label\">Hidden from table</span>\n\n <button\n type=\"button\"\n *ngIf=\"\n (searching | async) === false &&\n showAllColumnsVisible(columns)\n \"\n rivButton\n [variant]=\"'ghost'\"\n [disabled]=\"allColumnsDisabled(columns)\"\n (click)=\"enableAllColumns(true)\"\n >\n Show all\n </button>\n </div>\n\n <div class=\"options\">\n <div\n *ngFor=\"let column of columns.disabledColumns; let i = index\"\n [attr.draggable]=\"\n (searching | async) === false &&\n !disableEnablingColumns(columns)\n \"\n [attr.droppable]=\"\n (searching | async) === false &&\n !disableEnablingColumns(columns)\n \"\n [class.drop-zone]=\"!disableEnablingColumns(columns)\"\n (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n (dragenter)=\"\n $event.preventDefault();\n dragOver(i + columns.enabledColumns.length)\n \"\n (drop)=\"\n drop(\n i + columns.enabledColumns.length,\n column.stateIndex,\n false,\n columns.enabledColumns.length\n )\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: { column, columns }\n \"\n ></ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </riv-side-sheet>\n </ng-container>\n</ng-container>\n\n<ng-template #columnTemplate let-column=\"column\" let-columns=\"columns\">\n <div\n class=\"column scroll-padding\"\n [class.disabled]=\"disableEnablingColumn(column, columns)\"\n >\n <div class=\"column\">\n <ng-container\n *ngTemplateOutlet=\"reorderIcon; context: { column, columns }\"\n ></ng-container>\n\n <riv-highlight\n [text]=\"column.resolvedName\"\n [indices]=\"column.highlightIndices\"\n ></riv-highlight>\n </div>\n <div>\n <riv-menu\n class=\"hidden\"\n *ngIf=\"column.enabled || !disableEnablingColumns(columns)\"\n >\n <button\n type=\"button\"\n *ngIf=\"column.enabled && !column.pinned\"\n riv-menu-item\n (click)=\"\n columnFreezeUpTo(true, column.stateIndex, 'optionsMenu', column.key)\n \"\n >\n Freeze up to column\n </button>\n <button\n type=\"button\"\n *ngIf=\"column.enabled && column.pinned\"\n riv-menu-item\n (click)=\"columnFreezeUpTo(false, 0, 'optionsMenu', column.key)\"\n >\n Un-freeze columns\n </button>\n <button\n type=\"button\"\n riv-menu-item\n (click)=\"columnMoveTo(column, 'start')\"\n >\n Move to start\n </button>\n <button\n type=\"button\"\n riv-menu-item\n (click)=\"columnMoveTo(column, 'end')\"\n >\n Move to end\n </button>\n <button\n *ngIf=\"!column.alwaysVisible\"\n type=\"button\"\n riv-menu-item\n (click)=\"columnEnabledChange(column, !column.enabled, 'optionsMenu')\"\n >\n {{ column.enabled ? 'Hide column' : 'Show column' }}\n </button>\n </riv-menu>\n\n <ng-container\n *ngTemplateOutlet=\"enableIcon; context: { column, columns }\"\n ></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #reorderIcon let-column=\"column\" let-columns=\"columns\">\n <span\n class=\"reorder\"\n *ngIf=\"(searching | async) === false\"\n [class.disabled]=\"disableEnablingColumn(column, columns)\"\n >\n <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n </span>\n</ng-template>\n\n<ng-template #enableIcon let-column=\"column\" let-columns=\"columns\">\n <button\n *ngIf=\"!column.alwaysVisible\"\n type=\"button\"\n rivButton\n [rivTooltip]=\"\n column.enabled\n ? 'Hide column'\n : disableEnablingColumns(columns)\n ? limitTooltip()\n : 'Show column'\n \"\n class=\"disable-override\"\n [class.disabled]=\"!column.enabled\"\n [disabled]=\"disableEnablingColumn(column, columns)\"\n [variant]=\"'ghost'\"\n [size]=\"'small'\"\n [icon]=\"column.enabled ? 'Eye' : 'EyeOff'\"\n (click)=\"columnEnabledChange(column, !column.enabled, 'eyeIcon')\"\n ></button>\n\n <button\n *ngIf=\"column.alwaysVisible\"\n type=\"button\"\n rivButton\n [rivTooltip]=\"column.tooltipForHideIcon\"\n [disabled]=\"true\"\n [variant]=\"'ghost'\"\n [size]=\"'small'\"\n [icon]=\"'Lock'\"\n ></button>\n</ng-template>\n", styles: [".content{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}.title{font:var(--title-02);display:flex;justify-content:space-between;align-items:center}.column-header{color:var(--type-light-low-contrast);display:flex;justify-content:space-between;align-items:center;font:var(--input-medium)}.column-header-label{padding:var(--size-small) 0}.column{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium)}.column:hover{background-color:var(--surface-light-1)}.column:hover .hidden{opacity:1}.column.disabled{color:var(--type-light-low-contrast)}.reorder{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}.pinned{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch}.frozen{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium);color:var(--type-light-low-contrast)}.disable-override.disabled:hover{cursor:pointer}.hidden{opacity:0}.columns{flex-grow:1;overflow-y:auto}.options{display:flex;flex-direction:column}.option{position:relative}.option.dragged-over-top:before,.option.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.option.dragged-over-top:before{top:0}.option.dragged-over-bottom:before{bottom:0}.scroll-padding{padding-right:var(--base-grid-size)}.divider{border-top:var(--border-width) solid var(--border-light);margin-top:var(--size-medium);margin-bottom:var(--size-medium)}\n"] }]
|
|
11004
11039
|
}], propDecorators: { manager: [{
|
|
11005
11040
|
type: Input
|
|
11006
11041
|
}], anchor: [{
|