@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
|
@@ -8432,10 +8432,10 @@ var TableColumnHelpers;
|
|
|
8432
8432
|
function getAlignment(metadata, index, allowSelection) {
|
|
8433
8433
|
return getColumnAlignment(metadata.dataType, index === 0 && !allowSelection);
|
|
8434
8434
|
}
|
|
8435
|
-
function resolveColumns(state, supportedColumns, columnNameMap, allowSelection) {
|
|
8435
|
+
function resolveColumns(state, supportedColumns, columnNameMap, allowSelection, filterTo) {
|
|
8436
8436
|
const allColumns = getAllColumns(state, supportedColumns, columnNameMap);
|
|
8437
8437
|
return allColumns
|
|
8438
|
-
.filter(({ enabled }) => enabled)
|
|
8438
|
+
.filter(({ enabled }) => (filterTo === 'enabled' ? enabled : !enabled))
|
|
8439
8439
|
.reduce((fullColumns, settings, i) => {
|
|
8440
8440
|
const metadata = supportedColumns.get(settings.key);
|
|
8441
8441
|
const resolvedWidth = settings.preferredWidth === 'auto'
|
|
@@ -8547,11 +8547,21 @@ var TableColumnHelpers;
|
|
|
8547
8547
|
TableColumnHelpers.changeColumnEnabled = changeColumnEnabled;
|
|
8548
8548
|
function enableAllColumns(state, columns, columnNameMap, enabled) {
|
|
8549
8549
|
const allColumns = getAllColumns(state, columns, columnNameMap);
|
|
8550
|
-
if (enabled && allColumns.length > RivTable.ColumnsMaxShown)
|
|
8550
|
+
if (enabled && allColumns.length > RivTable.ColumnsMaxShown) {
|
|
8551
8551
|
return state;
|
|
8552
|
-
|
|
8553
|
-
|
|
8554
|
-
|
|
8552
|
+
}
|
|
8553
|
+
const updatedColumnSettings = allColumns.map(currentColumnSettings => {
|
|
8554
|
+
var _a;
|
|
8555
|
+
const currentColumnMetadata = columns.get(currentColumnSettings.key);
|
|
8556
|
+
const isColumnAlwaysVisible = (_a = currentColumnMetadata === null || currentColumnMetadata === void 0 ? void 0 : currentColumnMetadata.alwaysVisible) !== null && _a !== void 0 ? _a : false;
|
|
8557
|
+
if (isColumnAlwaysVisible) {
|
|
8558
|
+
return Object.assign(Object.assign({}, currentColumnSettings), { enabled: true });
|
|
8559
|
+
}
|
|
8560
|
+
return Object.assign(Object.assign({}, currentColumnSettings), { enabled: enabled,
|
|
8561
|
+
// Unpin if being unchecked
|
|
8562
|
+
pinned: !enabled ? false : currentColumnSettings.pinned });
|
|
8563
|
+
});
|
|
8564
|
+
return Object.assign(Object.assign({}, state), { display: Object.assign(Object.assign({}, state.display), { columnSettings: orderIntentionally(updatedColumnSettings, columnNameMap) }) });
|
|
8555
8565
|
}
|
|
8556
8566
|
TableColumnHelpers.enableAllColumns = enableAllColumns;
|
|
8557
8567
|
function changeColumnWidth(state, columns, columnNameMap, column, preferredWidth) {
|
|
@@ -8577,10 +8587,29 @@ var TableColumnHelpers;
|
|
|
8577
8587
|
clickPreventDefault: metadata.clickPreventDefault,
|
|
8578
8588
|
clickStopPropagation: metadata.clickStopPropagation,
|
|
8579
8589
|
displayName: metadata.displayName,
|
|
8590
|
+
alwaysVisible: metadata.alwaysVisible,
|
|
8591
|
+
tooltipForHideIcon: metadata.tooltipForHideIcon,
|
|
8580
8592
|
},
|
|
8581
8593
|
]));
|
|
8582
8594
|
}
|
|
8583
8595
|
TableColumnHelpers.createColumnMetadataMap = createColumnMetadataMap;
|
|
8596
|
+
function getColumnSettingsColumnList(state) {
|
|
8597
|
+
const allColumnMetadata = [
|
|
8598
|
+
...state.display.columns,
|
|
8599
|
+
...state.display.disabledColumns,
|
|
8600
|
+
];
|
|
8601
|
+
const columnsLength = state.display.allColumns.length;
|
|
8602
|
+
const allColumns = state.display.allColumns.map((column, i) => {
|
|
8603
|
+
var _a, _b;
|
|
8604
|
+
const nextColumnPinned = i + 2 <= columnsLength
|
|
8605
|
+
? state.display.allColumns[i + 1].pinned
|
|
8606
|
+
: false;
|
|
8607
|
+
const currentColumnMetadata = allColumnMetadata.find(metadata => metadata.key === column.key);
|
|
8608
|
+
return Object.assign(Object.assign({}, column), { resolvedName: (_a = state.display.columnNameMap.get(column.key)) !== null && _a !== void 0 ? _a : column.key, stateIndex: i, isLastPinnedColumn: column.pinned && !nextColumnPinned, alwaysVisible: (_b = currentColumnMetadata === null || currentColumnMetadata === void 0 ? void 0 : currentColumnMetadata.alwaysVisible) !== null && _b !== void 0 ? _b : false, tooltipForHideIcon: currentColumnMetadata === null || currentColumnMetadata === void 0 ? void 0 : currentColumnMetadata.tooltipForHideIcon, highlightIndices: [] });
|
|
8609
|
+
});
|
|
8610
|
+
return allColumns;
|
|
8611
|
+
}
|
|
8612
|
+
TableColumnHelpers.getColumnSettingsColumnList = getColumnSettingsColumnList;
|
|
8584
8613
|
})(TableColumnHelpers || (TableColumnHelpers = {}));
|
|
8585
8614
|
|
|
8586
8615
|
var TableResultHelpers;
|
|
@@ -9384,7 +9413,8 @@ var RivTable;
|
|
|
9384
9413
|
const csvExportAllowed = !((options === null || options === void 0 ? void 0 : options.getRowSpanForCell) || (options === null || options === void 0 ? void 0 : options.customSummaryRow));
|
|
9385
9414
|
// Augment state with derived state, and subscribe.
|
|
9386
9415
|
const state = connectable(coreState.pipe(map(({ state: s }) => {
|
|
9387
|
-
const resolvedColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!(options === null || options === void 0 ? void 0 : options.allowSelection));
|
|
9416
|
+
const resolvedColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!(options === null || options === void 0 ? void 0 : options.allowSelection), 'enabled');
|
|
9417
|
+
const resolvedDisabledColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!(options === null || options === void 0 ? void 0 : options.allowSelection), 'disabled');
|
|
9388
9418
|
if (TableResultHelpers.isGroupResult(s.result)) {
|
|
9389
9419
|
return deriveFullStateFromGroupResult({
|
|
9390
9420
|
s,
|
|
@@ -9394,6 +9424,7 @@ var RivTable;
|
|
|
9394
9424
|
pluralEntityName,
|
|
9395
9425
|
columnNameMap,
|
|
9396
9426
|
resolvedColumns,
|
|
9427
|
+
resolvedDisabledColumns,
|
|
9397
9428
|
searchableColumnMap,
|
|
9398
9429
|
csvExportAllowed,
|
|
9399
9430
|
options,
|
|
@@ -9408,6 +9439,7 @@ var RivTable;
|
|
|
9408
9439
|
pluralEntityName,
|
|
9409
9440
|
columnNameMap,
|
|
9410
9441
|
resolvedColumns,
|
|
9442
|
+
resolvedDisabledColumns,
|
|
9411
9443
|
searchableColumnMap,
|
|
9412
9444
|
csvExportAllowed,
|
|
9413
9445
|
options,
|
|
@@ -9422,6 +9454,7 @@ var RivTable;
|
|
|
9422
9454
|
pluralEntityName,
|
|
9423
9455
|
columnNameMap,
|
|
9424
9456
|
resolvedColumns,
|
|
9457
|
+
resolvedDisabledColumns,
|
|
9425
9458
|
searchableColumnMap,
|
|
9426
9459
|
csvExportAllowed,
|
|
9427
9460
|
options,
|
|
@@ -9443,7 +9476,7 @@ var RivTable;
|
|
|
9443
9476
|
}
|
|
9444
9477
|
RivTable.createManager = createManager;
|
|
9445
9478
|
function deriveFullStateFromGroupResult(props) {
|
|
9446
|
-
const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
9479
|
+
const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, resolvedDisabledColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
9447
9480
|
if (options === null || options === void 0 ? void 0 : options.getRowSpanForCell) {
|
|
9448
9481
|
// eslint-disable-next-line no-console
|
|
9449
9482
|
console.warn('Heads up! Custom row spans are not supported for grouped tables.');
|
|
@@ -9474,7 +9507,7 @@ var RivTable;
|
|
|
9474
9507
|
if (!TableResultHelpers.isGroupResult(dataSet)) {
|
|
9475
9508
|
throw new Error('Returned non-grouped CSV data for grouped table');
|
|
9476
9509
|
}
|
|
9477
|
-
const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection);
|
|
9510
|
+
const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection, 'enabled');
|
|
9478
9511
|
const data = [];
|
|
9479
9512
|
data.push(fullColumns.map(({ key }) => { var _a; return (_a = columnNameMap.get(key)) !== null && _a !== void 0 ? _a : key; }));
|
|
9480
9513
|
if (groupCellFormatter) {
|
|
@@ -9506,13 +9539,14 @@ var RivTable;
|
|
|
9506
9539
|
pluralEntityName: pluralEntityName,
|
|
9507
9540
|
columnNameMap: columnNameMap,
|
|
9508
9541
|
resolvedColumns: resolvedColumns,
|
|
9542
|
+
resolvedDisabledColumns: resolvedDisabledColumns,
|
|
9509
9543
|
searchableColumnMap: searchableColumnMap,
|
|
9510
9544
|
csvExportAllowed: csvExportAllowed,
|
|
9511
9545
|
options: options,
|
|
9512
9546
|
}), selection: derivedFullStateSelection(s, options), result: Object.assign(Object.assign({}, stateResult), { isGrouped: true, resultType: 'table-grouping', rowGroups, rows: rowGroups.flatMap(group => group.rows), csvData, csvFilename: TableResultHelpers.getCsvFilename(pluralEntityName, options) }) });
|
|
9513
9547
|
}
|
|
9514
9548
|
function deriveFullStateFromNestedResult(props) {
|
|
9515
|
-
const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
9549
|
+
const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, resolvedDisabledColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
9516
9550
|
if (options === null || options === void 0 ? void 0 : options.getRowSpanForCell) {
|
|
9517
9551
|
// eslint-disable-next-line no-console
|
|
9518
9552
|
console.warn('Heads up! Custom row spans are not supported for tables with nested data.');
|
|
@@ -9546,7 +9580,7 @@ var RivTable;
|
|
|
9546
9580
|
if (TableResultHelpers.isGroupResult(dataSet)) {
|
|
9547
9581
|
throw new Error('Returned grouped CSV data for a nested with header result table');
|
|
9548
9582
|
}
|
|
9549
|
-
const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection);
|
|
9583
|
+
const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection, 'enabled');
|
|
9550
9584
|
const data = [];
|
|
9551
9585
|
data.push(fullColumns.map(({ key }) => { var _a; return (_a = columnNameMap.get(key)) !== null && _a !== void 0 ? _a : key; }));
|
|
9552
9586
|
const allRows = TableResultHelpers.getAllRowsFromResult(dataSet);
|
|
@@ -9570,13 +9604,14 @@ var RivTable;
|
|
|
9570
9604
|
pluralEntityName: pluralEntityName,
|
|
9571
9605
|
columnNameMap: columnNameMap,
|
|
9572
9606
|
resolvedColumns: resolvedColumns,
|
|
9607
|
+
resolvedDisabledColumns: resolvedDisabledColumns,
|
|
9573
9608
|
searchableColumnMap: searchableColumnMap,
|
|
9574
9609
|
csvExportAllowed: csvExportAllowed,
|
|
9575
9610
|
options: options,
|
|
9576
9611
|
}), selection: derivedFullStateSelection(s, options), result: Object.assign(Object.assign({}, stateResult), { rows: [], isGrouped: false, resultType: 'nested-rows', nestedHeaderRows: fullNestedHeaderRows, csvData, csvFilename: TableResultHelpers.getCsvFilename(pluralEntityName, options) }) });
|
|
9577
9612
|
}
|
|
9578
9613
|
function deriveFullStateFromRegularResult(props) {
|
|
9579
|
-
const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
9614
|
+
const { s, stateResult, source, columns, pluralEntityName, columnNameMap, resolvedColumns, resolvedDisabledColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
9580
9615
|
const rows = stateResult.currentPageData.map(row => (Object.assign(Object.assign({}, row), { rowLink: (options === null || options === void 0 ? void 0 : options.rowLink) ? options.rowLink(row) : null, selected: TableSelectionHelpers.isRowSelected(s, row.id), isCollapsed: false })));
|
|
9581
9616
|
const cellRowSpanCache = TableDisplayHelpers.memoizedCellRowSpan(s, resolvedColumns, options);
|
|
9582
9617
|
const cellRowSpan = (rowIndex, column) => { var _a, _b; return (_b = (_a = cellRowSpanCache === null || cellRowSpanCache === void 0 ? void 0 : cellRowSpanCache.get(column)) === null || _a === void 0 ? void 0 : _a[rowIndex]) !== null && _b !== void 0 ? _b : 1; };
|
|
@@ -9603,7 +9638,7 @@ var RivTable;
|
|
|
9603
9638
|
if (TableResultHelpers.isNestedResult(dataSet)) {
|
|
9604
9639
|
throw new Error('Returned nested CSV data for non-nested table');
|
|
9605
9640
|
}
|
|
9606
|
-
const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection);
|
|
9641
|
+
const fullColumns = TableColumnHelpers.resolveColumns(s, columns, columnNameMap, !!options.allowSelection, 'enabled');
|
|
9607
9642
|
const data = [];
|
|
9608
9643
|
data.push(fullColumns.map(({ key }) => { var _a; return (_a = columnNameMap.get(key)) !== null && _a !== void 0 ? _a : key; }));
|
|
9609
9644
|
for (const record of dataSet.currentPageData) {
|
|
@@ -9627,6 +9662,7 @@ var RivTable;
|
|
|
9627
9662
|
pluralEntityName: pluralEntityName,
|
|
9628
9663
|
columnNameMap: columnNameMap,
|
|
9629
9664
|
resolvedColumns: resolvedColumns,
|
|
9665
|
+
resolvedDisabledColumns: resolvedDisabledColumns,
|
|
9630
9666
|
searchableColumnMap: searchableColumnMap,
|
|
9631
9667
|
csvExportAllowed: csvExportAllowed,
|
|
9632
9668
|
options: options,
|
|
@@ -9656,8 +9692,8 @@ var RivTable;
|
|
|
9656
9692
|
}
|
|
9657
9693
|
function derivedFullStateDisplay(props, partialDisplay = {}) {
|
|
9658
9694
|
var _a;
|
|
9659
|
-
const { coreState, columns, pluralEntityName, columnNameMap, resolvedColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
9660
|
-
return Object.assign(Object.assign(Object.assign({}, coreState.display), { columns: resolvedColumns, allColumns: TableColumnHelpers.getAllColumns(coreState, columns, columnNameMap), columnNameMap: columnNameMap, searchableColumnMap: searchableColumnMap, zeroStateMessage: TableDisplayHelpers.getZeroStateMessage(coreState, pluralEntityName), columnsAreFreezable: !!(options === null || options === void 0 ? void 0 : options.columnsAreFreezable), columnsAreHideable: !!(options === null || options === void 0 ? void 0 : options.columnsAreHideable), columnsAreReorderable: (_a = options === null || options === void 0 ? void 0 : options.columnsAreReorderable) !== null && _a !== void 0 ? _a : true, rowsAreGrayed: !!(options === null || options === void 0 ? void 0 : options.rowsAreGrayed), customSummaryRow: !!(options === null || options === void 0 ? void 0 : options.customSummaryRow), csvExportAllowed: csvExportAllowed, enabledCount: resolvedColumns.length, hidePageSizeSelector: !!(options === null || options === void 0 ? void 0 : options.hidePageSizeSelector), cellRowSpan: (_i, _column) => 1, needsRightBorder: () => false }), partialDisplay);
|
|
9695
|
+
const { coreState, columns, pluralEntityName, columnNameMap, resolvedColumns, resolvedDisabledColumns, searchableColumnMap, csvExportAllowed, options, } = props;
|
|
9696
|
+
return Object.assign(Object.assign(Object.assign({}, coreState.display), { columns: resolvedColumns, disabledColumns: resolvedDisabledColumns, allColumns: TableColumnHelpers.getAllColumns(coreState, columns, columnNameMap), columnNameMap: columnNameMap, searchableColumnMap: searchableColumnMap, zeroStateMessage: TableDisplayHelpers.getZeroStateMessage(coreState, pluralEntityName), columnsAreFreezable: !!(options === null || options === void 0 ? void 0 : options.columnsAreFreezable), columnsAreHideable: !!(options === null || options === void 0 ? void 0 : options.columnsAreHideable), columnsAreReorderable: (_a = options === null || options === void 0 ? void 0 : options.columnsAreReorderable) !== null && _a !== void 0 ? _a : true, rowsAreGrayed: !!(options === null || options === void 0 ? void 0 : options.rowsAreGrayed), customSummaryRow: !!(options === null || options === void 0 ? void 0 : options.customSummaryRow), csvExportAllowed: csvExportAllowed, enabledCount: resolvedColumns.length, hidePageSizeSelector: !!(options === null || options === void 0 ? void 0 : options.hidePageSizeSelector), cellRowSpan: (_i, _column) => 1, needsRightBorder: () => false }), partialDisplay);
|
|
9661
9697
|
}
|
|
9662
9698
|
function derivedFullStateSelection(coreState, options) {
|
|
9663
9699
|
var _a;
|
|
@@ -10300,14 +10336,7 @@ class TableColumnSettingsSideSheetComponent {
|
|
|
10300
10336
|
ngOnInit() {
|
|
10301
10337
|
this.columnList = combineLatest([
|
|
10302
10338
|
this.manager.state.pipe(map(s => {
|
|
10303
|
-
const
|
|
10304
|
-
const allColumns = s.display.allColumns.map((column, i) => {
|
|
10305
|
-
var _a;
|
|
10306
|
-
const nextColumnPinned = i + 2 <= columnsLength
|
|
10307
|
-
? s.display.allColumns[i + 1].pinned
|
|
10308
|
-
: false;
|
|
10309
|
-
return Object.assign(Object.assign({}, column), { resolvedName: (_a = s.display.columnNameMap.get(column.key)) !== null && _a !== void 0 ? _a : column.key, stateIndex: i, isLastPinnedColumn: column.pinned && !nextColumnPinned });
|
|
10310
|
-
});
|
|
10339
|
+
const allColumns = TableColumnHelpers.getColumnSettingsColumnList(s);
|
|
10311
10340
|
const fuse = new Fuse(allColumns, {
|
|
10312
10341
|
keys: ['resolvedName'],
|
|
10313
10342
|
ignoreLocation: true,
|
|
@@ -10333,9 +10362,9 @@ class TableColumnSettingsSideSheetComponent {
|
|
|
10333
10362
|
disabledColumns,
|
|
10334
10363
|
};
|
|
10335
10364
|
}
|
|
10336
|
-
const
|
|
10337
|
-
const enabledColumns =
|
|
10338
|
-
const disabledColumns =
|
|
10365
|
+
const allVisibleColumns = allColumns.map(column => (Object.assign(Object.assign({}, column), { highlightIndices: [] })));
|
|
10366
|
+
const enabledColumns = allVisibleColumns.filter(column => column.enabled);
|
|
10367
|
+
const disabledColumns = allVisibleColumns.filter(column => !column.enabled);
|
|
10339
10368
|
return {
|
|
10340
10369
|
enabledColumns: enabledColumns,
|
|
10341
10370
|
disabledColumns: disabledColumns,
|
|
@@ -10460,10 +10489,10 @@ class TableColumnSettingsSideSheetComponent {
|
|
|
10460
10489
|
}
|
|
10461
10490
|
}
|
|
10462
10491
|
TableColumnSettingsSideSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableColumnSettingsSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10463
|
-
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 });
|
|
10492
|
+
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 });
|
|
10464
10493
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableColumnSettingsSideSheetComponent, decorators: [{
|
|
10465
10494
|
type: Component,
|
|
10466
|
-
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"] }]
|
|
10495
|
+
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"] }]
|
|
10467
10496
|
}], propDecorators: { manager: [{
|
|
10468
10497
|
type: Input
|
|
10469
10498
|
}], anchor: [{
|