@rivet-health/design-system 37.4.0 → 37.5.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/notification/banner/banner.component.mjs +11 -3
- package/esm2020/lib/table/table/table-column-settings/table-column-settings-side-sheet.component.mjs +1 -1
- package/fesm2015/rivet-health-design-system.mjs +12 -3
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +11 -3
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/notification/banner/banner.component.d.ts +9 -1
- package/package.json +1 -1
|
@@ -10,6 +10,9 @@ export class BannerComponent {
|
|
|
10
10
|
this.dismissable = false;
|
|
11
11
|
this.dismiss = new EventEmitter();
|
|
12
12
|
}
|
|
13
|
+
get hasHeading() {
|
|
14
|
+
return !!this.heading?.trim();
|
|
15
|
+
}
|
|
13
16
|
getResolvedIcon() {
|
|
14
17
|
if (this.icon === false)
|
|
15
18
|
return null;
|
|
@@ -29,10 +32,10 @@ export class BannerComponent {
|
|
|
29
32
|
}
|
|
30
33
|
}
|
|
31
34
|
BannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
-
BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BannerComponent, selector: "riv-banner", inputs: { variant: "variant", icon: "icon", iconTooltip: "iconTooltip", dismissable: "dismissable" }, outputs: { dismiss: "dismiss" }, host: { properties: { "class": "this.variant" } }, ngImport: i0, template: "<riv-icon\n *ngIf=\"getResolvedIcon(); let icon\"\n [name]=\"icon\"\n [rivTooltip]=\"iconTooltip\"\n [size]=\"20\"\n class=\"icon\"\n></riv-icon>\n<div class=\"content\">\n <ng-content></ng-content>\n</div>\n<button *ngIf=\"dismissable\" class=\"dismiss\" (click)=\"dismiss.emit()\">\n <riv-icon [name]=\"'X'\" [size]=\"20\"></riv-icon>\n</button>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--size-large);padding:var(--size-large);border-radius:var(--border-radius-medium);box-shadow:var(--depth-1);color:var(--type-light-high-contrast);border-left-style:solid;border-left-width:var(--size-small);border-left-color:var(--banner-accent);.icon {color: var(--banner-accent);}}:host.info{background-color:var(--purp-10);--banner-accent: var(--purp-80)}:host.safety{background-color:var(--safety-light);--banner-accent: var(--safety-dark)}:host.warning{background-color:var(--caution-light);--banner-accent: var(--tang-70)}:host.danger{background-color:var(--danger-light);--banner-accent: var(--danger-main)}.icon{margin:var(--size-xxsmall);flex-shrink:0}.content{flex-grow:1;font:var(--body-medium)}.dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xxsmall);cursor:pointer;transition:background-color var(--short-transition);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast)}.dismiss:hover{background-color:var(--black-20)}.dismiss:active{background-color:var(--black-30)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35
|
+
BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BannerComponent, selector: "riv-banner", inputs: { variant: "variant", icon: "icon", iconTooltip: "iconTooltip", heading: "heading", dismissable: "dismissable" }, outputs: { dismiss: "dismiss" }, host: { properties: { "class": "this.variant", "class.has-heading": "this.hasHeading" } }, ngImport: i0, template: "<riv-icon\n *ngIf=\"getResolvedIcon(); let icon\"\n [name]=\"icon\"\n [rivTooltip]=\"iconTooltip\"\n [size]=\"20\"\n class=\"icon\"\n></riv-icon>\n<div *ngIf=\"hasHeading\" class=\"heading\">{{ heading }}</div>\n<div class=\"content\">\n <ng-content></ng-content>\n</div>\n<button *ngIf=\"dismissable\" class=\"dismiss\" (click)=\"dismiss.emit()\">\n <riv-icon [name]=\"'X'\" [size]=\"20\"></riv-icon>\n</button>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--size-large);padding:var(--size-large);border-radius:var(--border-radius-medium);box-shadow:var(--depth-1);color:var(--type-light-high-contrast);border-left-style:solid;border-left-width:var(--size-small);border-left-color:var(--banner-accent);.icon {color: var(--banner-accent);}}:host.has-heading{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"icon heading close\" \". content .\";column-gap:var(--size-large);row-gap:0;align-items:start}:host.has-heading .icon{grid-area:icon}:host.has-heading .heading{grid-area:heading}:host.has-heading .content{grid-area:content}:host.has-heading .dismiss{grid-area:close}.heading{font:var(--body-medium);font-weight:var(--font-weight-heavy);line-height:var(--type-2-line-height-2)}:host.info{background-color:var(--purp-10);--banner-accent: var(--purp-80)}:host.safety{background-color:var(--safety-light);--banner-accent: var(--safety-dark)}:host.warning{background-color:var(--caution-light);--banner-accent: var(--tang-70)}:host.danger{background-color:var(--danger-light);--banner-accent: var(--danger-main)}.icon{margin:var(--size-xxsmall);flex-shrink:0}.content{flex-grow:1;font:var(--body-medium)}.dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xxsmall);cursor:pointer;transition:background-color var(--short-transition);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast)}.dismiss:hover{background-color:var(--black-20)}.dismiss:active{background-color:var(--black-30)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
33
36
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BannerComponent, decorators: [{
|
|
34
37
|
type: Component,
|
|
35
|
-
args: [{ selector: 'riv-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon\n *ngIf=\"getResolvedIcon(); let icon\"\n [name]=\"icon\"\n [rivTooltip]=\"iconTooltip\"\n [size]=\"20\"\n class=\"icon\"\n></riv-icon>\n<div class=\"content\">\n <ng-content></ng-content>\n</div>\n<button *ngIf=\"dismissable\" class=\"dismiss\" (click)=\"dismiss.emit()\">\n <riv-icon [name]=\"'X'\" [size]=\"20\"></riv-icon>\n</button>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--size-large);padding:var(--size-large);border-radius:var(--border-radius-medium);box-shadow:var(--depth-1);color:var(--type-light-high-contrast);border-left-style:solid;border-left-width:var(--size-small);border-left-color:var(--banner-accent);.icon {color: var(--banner-accent);}}:host.info{background-color:var(--purp-10);--banner-accent: var(--purp-80)}:host.safety{background-color:var(--safety-light);--banner-accent: var(--safety-dark)}:host.warning{background-color:var(--caution-light);--banner-accent: var(--tang-70)}:host.danger{background-color:var(--danger-light);--banner-accent: var(--danger-main)}.icon{margin:var(--size-xxsmall);flex-shrink:0}.content{flex-grow:1;font:var(--body-medium)}.dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xxsmall);cursor:pointer;transition:background-color var(--short-transition);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast)}.dismiss:hover{background-color:var(--black-20)}.dismiss:active{background-color:var(--black-30)}\n"] }]
|
|
38
|
+
args: [{ selector: 'riv-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon\n *ngIf=\"getResolvedIcon(); let icon\"\n [name]=\"icon\"\n [rivTooltip]=\"iconTooltip\"\n [size]=\"20\"\n class=\"icon\"\n></riv-icon>\n<div *ngIf=\"hasHeading\" class=\"heading\">{{ heading }}</div>\n<div class=\"content\">\n <ng-content></ng-content>\n</div>\n<button *ngIf=\"dismissable\" class=\"dismiss\" (click)=\"dismiss.emit()\">\n <riv-icon [name]=\"'X'\" [size]=\"20\"></riv-icon>\n</button>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--size-large);padding:var(--size-large);border-radius:var(--border-radius-medium);box-shadow:var(--depth-1);color:var(--type-light-high-contrast);border-left-style:solid;border-left-width:var(--size-small);border-left-color:var(--banner-accent);.icon {color: var(--banner-accent);}}:host.has-heading{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"icon heading close\" \". content .\";column-gap:var(--size-large);row-gap:0;align-items:start}:host.has-heading .icon{grid-area:icon}:host.has-heading .heading{grid-area:heading}:host.has-heading .content{grid-area:content}:host.has-heading .dismiss{grid-area:close}.heading{font:var(--body-medium);font-weight:var(--font-weight-heavy);line-height:var(--type-2-line-height-2)}:host.info{background-color:var(--purp-10);--banner-accent: var(--purp-80)}:host.safety{background-color:var(--safety-light);--banner-accent: var(--safety-dark)}:host.warning{background-color:var(--caution-light);--banner-accent: var(--tang-70)}:host.danger{background-color:var(--danger-light);--banner-accent: var(--danger-main)}.icon{margin:var(--size-xxsmall);flex-shrink:0}.content{flex-grow:1;font:var(--body-medium)}.dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xxsmall);cursor:pointer;transition:background-color var(--short-transition);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast)}.dismiss:hover{background-color:var(--black-20)}.dismiss:active{background-color:var(--black-30)}\n"] }]
|
|
36
39
|
}], propDecorators: { variant: [{
|
|
37
40
|
type: Input
|
|
38
41
|
}, {
|
|
@@ -42,12 +45,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
42
45
|
type: Input
|
|
43
46
|
}], iconTooltip: [{
|
|
44
47
|
type: Input
|
|
48
|
+
}], heading: [{
|
|
49
|
+
type: Input
|
|
45
50
|
}], dismissable: [{
|
|
46
51
|
type: Input
|
|
52
|
+
}], hasHeading: [{
|
|
53
|
+
type: HostBinding,
|
|
54
|
+
args: ['class.has-heading']
|
|
47
55
|
}], dismiss: [{
|
|
48
56
|
type: Output
|
|
49
57
|
}] } });
|
|
50
58
|
(function (BannerComponent) {
|
|
51
59
|
BannerComponent.Variants = ['warning', 'safety', 'danger', 'info'];
|
|
52
60
|
})(BannerComponent || (BannerComponent = {}));
|
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
61
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL25vdGlmaWNhdGlvbi9iYW5uZXIvYmFubmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL25vdGlmaWNhdGlvbi9iYW5uZXIvYmFubmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixXQUFXLEVBQ1gsS0FBSyxFQUNMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFTdkIsTUFBTSxPQUFPLGVBQWU7SUFONUI7UUFTRSxZQUFPLEdBQTRCLE1BQU0sQ0FBQztRQUcxQyxTQUFJLEdBQWlDLElBQUksQ0FBQztRQWUxQyxnQkFBVyxHQUFZLEtBQUssQ0FBQztRQXlCN0IsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7S0FDcEM7SUF4QkMsSUFDSSxVQUFVO1FBQ1osT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQztJQUNoQyxDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksSUFBSSxDQUFDLElBQUksS0FBSyxLQUFLO1lBQUUsT0FBTyxJQUFJLENBQUM7UUFDckMsSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksRUFBRTtZQUN0QixRQUFRLElBQUksQ0FBQyxPQUFPLEVBQUU7Z0JBQ3BCLEtBQUssTUFBTTtvQkFDVCxPQUFPLE1BQU0sQ0FBQztnQkFDaEIsS0FBSyxTQUFTO29CQUNaLE9BQU8sZUFBZSxDQUFDO2dCQUN6QixLQUFLLFFBQVE7b0JBQ1gsT0FBTyxTQUFTLENBQUM7Z0JBQ25CLEtBQUssUUFBUTtvQkFDWCxPQUFPLGFBQWEsQ0FBQzthQUN4QjtTQUNGO1FBQ0QsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDO0lBQ25CLENBQUM7OzRHQTNDVSxlQUFlO2dHQUFmLGVBQWUsd1NDaEI1Qix1YUFjQTsyRkRFYSxlQUFlO2tCQU4zQixTQUFTOytCQUNFLFlBQVksbUJBR0wsdUJBQXVCLENBQUMsTUFBTTs4QkFLL0MsT0FBTztzQkFGTixLQUFLOztzQkFDTCxXQUFXO3VCQUFDLE9BQU87Z0JBSXBCLElBQUk7c0JBREgsS0FBSztnQkFJTixXQUFXO3NCQURWLEtBQUs7Z0JBVU4sT0FBTztzQkFETixLQUFLO2dCQUlOLFdBQVc7c0JBRFYsS0FBSztnQkFJRixVQUFVO3NCQURiLFdBQVc7dUJBQUMsbUJBQW1CO2dCQXVCaEMsT0FBTztzQkFETixNQUFNOztBQUlULFdBQWlCLGVBQWU7SUFDakIsd0JBQVEsR0FBRyxDQUFDLFNBQVMsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLE1BQU0sQ0FBVSxDQUFDO0FBRTNFLENBQUMsRUFIZ0IsZUFBZSxLQUFmLGVBQWUsUUFHL0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RCaW5kaW5nLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tICcuLi8uLi9pY29uL2ljb24uY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncml2LWJhbm5lcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9iYW5uZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9iYW5uZXIuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQmFubmVyQ29tcG9uZW50IHtcbiAgQElucHV0KClcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIHZhcmlhbnQ6IEJhbm5lckNvbXBvbmVudC5WYXJpYW50ID0gJ2luZm8nO1xuXG4gIEBJbnB1dCgpXG4gIGljb246IGJvb2xlYW4gfCBJY29uQ29tcG9uZW50Lk5hbWUgPSB0cnVlO1xuXG4gIEBJbnB1dCgpXG4gIGljb25Ub29sdGlwPzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBPcHRpb25hbCBib2xkIGhlYWRpbmcgcmVuZGVyZWQgYWJvdmUgdGhlIHByb2plY3RlZCBib2R5IGNvbnRlbnQuXG4gICAqIEludGVuZGVkIGZvciBiYW5uZXJzIHRoYXQgbmVlZCBhIHNob3J0IHRpdGxlIHBhaXJlZCB3aXRoIHN1cHBvcnRpbmdcbiAgICogdGV4dCDigJQgYSBiYW5uZXIgd2l0aCBhIGhlYWRpbmcgc2hvdWxkIGFsd2F5cyBpbmNsdWRlIGJvZHkgY29udGVudC5cbiAgICogRW1wdHkgb3Igd2hpdGVzcGFjZS1vbmx5IHZhbHVlcyBhcmUgdHJlYXRlZCBhcyBubyBoZWFkaW5nLlxuICAgKi9cbiAgQElucHV0KClcbiAgaGVhZGluZz86IHN0cmluZztcblxuICBASW5wdXQoKVxuICBkaXNtaXNzYWJsZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MuaGFzLWhlYWRpbmcnKVxuICBnZXQgaGFzSGVhZGluZygpOiBib29sZWFuIHtcbiAgICByZXR1cm4gISF0aGlzLmhlYWRpbmc/LnRyaW0oKTtcbiAgfVxuXG4gIGdldFJlc29sdmVkSWNvbigpOiBJY29uQ29tcG9uZW50Lk5hbWUgfCBudWxsIHtcbiAgICBpZiAodGhpcy5pY29uID09PSBmYWxzZSkgcmV0dXJuIG51bGw7XG4gICAgaWYgKHRoaXMuaWNvbiA9PT0gdHJ1ZSkge1xuICAgICAgc3dpdGNoICh0aGlzLnZhcmlhbnQpIHtcbiAgICAgICAgY2FzZSAnaW5mbyc6XG4gICAgICAgICAgcmV0dXJuICdJbmZvJztcbiAgICAgICAgY2FzZSAnd2FybmluZyc6XG4gICAgICAgICAgcmV0dXJuICdBbGVydFRyaWFuZ2xlJztcbiAgICAgICAgY2FzZSAnZGFuZ2VyJzpcbiAgICAgICAgICByZXR1cm4gJ1hDaXJjbGUnO1xuICAgICAgICBjYXNlICdzYWZldHknOlxuICAgICAgICAgIHJldHVybiAnQ2hlY2tDaXJjbGUnO1xuICAgICAgfVxuICAgIH1cbiAgICByZXR1cm4gdGhpcy5pY29uO1xuICB9XG5cbiAgQE91dHB1dCgpXG4gIGRpc21pc3MgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG59XG5cbmV4cG9ydCBuYW1lc3BhY2UgQmFubmVyQ29tcG9uZW50IHtcbiAgZXhwb3J0IGNvbnN0IFZhcmlhbnRzID0gWyd3YXJuaW5nJywgJ3NhZmV0eScsICdkYW5nZXInLCAnaW5mbyddIGFzIGNvbnN0O1xuICBleHBvcnQgdHlwZSBWYXJpYW50ID0gKHR5cGVvZiBWYXJpYW50cylbbnVtYmVyXTtcbn1cbiIsIjxyaXYtaWNvblxuICAqbmdJZj1cImdldFJlc29sdmVkSWNvbigpOyBsZXQgaWNvblwiXG4gIFtuYW1lXT1cImljb25cIlxuICBbcml2VG9vbHRpcF09XCJpY29uVG9vbHRpcFwiXG4gIFtzaXplXT1cIjIwXCJcbiAgY2xhc3M9XCJpY29uXCJcbj48L3Jpdi1pY29uPlxuPGRpdiAqbmdJZj1cImhhc0hlYWRpbmdcIiBjbGFzcz1cImhlYWRpbmdcIj57eyBoZWFkaW5nIH19PC9kaXY+XG48ZGl2IGNsYXNzPVwiY29udGVudFwiPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbjxidXR0b24gKm5nSWY9XCJkaXNtaXNzYWJsZVwiIGNsYXNzPVwiZGlzbWlzc1wiIChjbGljayk9XCJkaXNtaXNzLmVtaXQoKVwiPlxuICA8cml2LWljb24gW25hbWVdPVwiJ1gnXCIgW3NpemVdPVwiMjBcIj48L3Jpdi1pY29uPlxuPC9idXR0b24+XG4iXX0=
|
package/esm2020/lib/table/table/table-column-settings/table-column-settings-side-sheet.component.mjs
CHANGED
|
@@ -200,7 +200,7 @@ export class TableColumnSettingsSideSheetComponent {
|
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
202
|
TableColumnSettingsSideSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableColumnSettingsSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
203
|
-
TableColumnSettingsSideSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 #trigger rivButton (click)=\"open.next(true)\">Columns</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 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 *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 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 rivButton [variant]=\"'ghost'\" (click)=\"resetToDefault()\">\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 *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 *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 *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 riv-menu-item (click)=\"columnMoveTo(column, 'start')\">\n Move to start\n </button>\n <button riv-menu-item (click)=\"columnMoveTo(column, 'end')\">\n Move to end\n </button>\n <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 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: i2.BannerComponent, selector: "riv-banner", inputs: ["variant", "icon", "iconTooltip", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i5.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i6.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: i7.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "component", type: i8.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: i9.SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
203
|
+
TableColumnSettingsSideSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 #trigger rivButton (click)=\"open.next(true)\">Columns</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 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 *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 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 rivButton [variant]=\"'ghost'\" (click)=\"resetToDefault()\">\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 *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 *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 *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 riv-menu-item (click)=\"columnMoveTo(column, 'start')\">\n Move to start\n </button>\n <button riv-menu-item (click)=\"columnMoveTo(column, 'end')\">\n Move to end\n </button>\n <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 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: i2.BannerComponent, selector: "riv-banner", inputs: ["variant", "icon", "iconTooltip", "heading", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i5.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i6.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: i7.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "component", type: i8.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: i9.SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
204
204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableColumnSettingsSideSheetComponent, decorators: [{
|
|
205
205
|
type: Component,
|
|
206
206
|
args: [{ selector: 'riv-table-column-settings-side-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #trigger rivButton (click)=\"open.next(true)\">Columns</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 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 *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 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 rivButton [variant]=\"'ghost'\" (click)=\"resetToDefault()\">\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 *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 *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 *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 riv-menu-item (click)=\"columnMoveTo(column, 'start')\">\n Move to start\n </button>\n <button riv-menu-item (click)=\"columnMoveTo(column, 'end')\">\n Move to end\n </button>\n <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 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"] }]
|
|
@@ -5846,6 +5846,10 @@ class BannerComponent {
|
|
|
5846
5846
|
this.dismissable = false;
|
|
5847
5847
|
this.dismiss = new EventEmitter();
|
|
5848
5848
|
}
|
|
5849
|
+
get hasHeading() {
|
|
5850
|
+
var _a;
|
|
5851
|
+
return !!((_a = this.heading) === null || _a === void 0 ? void 0 : _a.trim());
|
|
5852
|
+
}
|
|
5849
5853
|
getResolvedIcon() {
|
|
5850
5854
|
if (this.icon === false)
|
|
5851
5855
|
return null;
|
|
@@ -5865,10 +5869,10 @@ class BannerComponent {
|
|
|
5865
5869
|
}
|
|
5866
5870
|
}
|
|
5867
5871
|
BannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5868
|
-
BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BannerComponent, selector: "riv-banner", inputs: { variant: "variant", icon: "icon", iconTooltip: "iconTooltip", dismissable: "dismissable" }, outputs: { dismiss: "dismiss" }, host: { properties: { "class": "this.variant" } }, ngImport: i0, template: "<riv-icon\n *ngIf=\"getResolvedIcon(); let icon\"\n [name]=\"icon\"\n [rivTooltip]=\"iconTooltip\"\n [size]=\"20\"\n class=\"icon\"\n></riv-icon>\n<div class=\"content\">\n <ng-content></ng-content>\n</div>\n<button *ngIf=\"dismissable\" class=\"dismiss\" (click)=\"dismiss.emit()\">\n <riv-icon [name]=\"'X'\" [size]=\"20\"></riv-icon>\n</button>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--size-large);padding:var(--size-large);border-radius:var(--border-radius-medium);box-shadow:var(--depth-1);color:var(--type-light-high-contrast);border-left-style:solid;border-left-width:var(--size-small);border-left-color:var(--banner-accent);.icon {color: var(--banner-accent);}}:host.info{background-color:var(--purp-10);--banner-accent: var(--purp-80)}:host.safety{background-color:var(--safety-light);--banner-accent: var(--safety-dark)}:host.warning{background-color:var(--caution-light);--banner-accent: var(--tang-70)}:host.danger{background-color:var(--danger-light);--banner-accent: var(--danger-main)}.icon{margin:var(--size-xxsmall);flex-shrink:0}.content{flex-grow:1;font:var(--body-medium)}.dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xxsmall);cursor:pointer;transition:background-color var(--short-transition);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast)}.dismiss:hover{background-color:var(--black-20)}.dismiss:active{background-color:var(--black-30)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5872
|
+
BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BannerComponent, selector: "riv-banner", inputs: { variant: "variant", icon: "icon", iconTooltip: "iconTooltip", heading: "heading", dismissable: "dismissable" }, outputs: { dismiss: "dismiss" }, host: { properties: { "class": "this.variant", "class.has-heading": "this.hasHeading" } }, ngImport: i0, template: "<riv-icon\n *ngIf=\"getResolvedIcon(); let icon\"\n [name]=\"icon\"\n [rivTooltip]=\"iconTooltip\"\n [size]=\"20\"\n class=\"icon\"\n></riv-icon>\n<div *ngIf=\"hasHeading\" class=\"heading\">{{ heading }}</div>\n<div class=\"content\">\n <ng-content></ng-content>\n</div>\n<button *ngIf=\"dismissable\" class=\"dismiss\" (click)=\"dismiss.emit()\">\n <riv-icon [name]=\"'X'\" [size]=\"20\"></riv-icon>\n</button>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--size-large);padding:var(--size-large);border-radius:var(--border-radius-medium);box-shadow:var(--depth-1);color:var(--type-light-high-contrast);border-left-style:solid;border-left-width:var(--size-small);border-left-color:var(--banner-accent);.icon {color: var(--banner-accent);}}:host.has-heading{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"icon heading close\" \". content .\";column-gap:var(--size-large);row-gap:0;align-items:start}:host.has-heading .icon{grid-area:icon}:host.has-heading .heading{grid-area:heading}:host.has-heading .content{grid-area:content}:host.has-heading .dismiss{grid-area:close}.heading{font:var(--body-medium);font-weight:var(--font-weight-heavy);line-height:var(--type-2-line-height-2)}:host.info{background-color:var(--purp-10);--banner-accent: var(--purp-80)}:host.safety{background-color:var(--safety-light);--banner-accent: var(--safety-dark)}:host.warning{background-color:var(--caution-light);--banner-accent: var(--tang-70)}:host.danger{background-color:var(--danger-light);--banner-accent: var(--danger-main)}.icon{margin:var(--size-xxsmall);flex-shrink:0}.content{flex-grow:1;font:var(--body-medium)}.dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xxsmall);cursor:pointer;transition:background-color var(--short-transition);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast)}.dismiss:hover{background-color:var(--black-20)}.dismiss:active{background-color:var(--black-30)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5869
5873
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BannerComponent, decorators: [{
|
|
5870
5874
|
type: Component,
|
|
5871
|
-
args: [{ selector: 'riv-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon\n *ngIf=\"getResolvedIcon(); let icon\"\n [name]=\"icon\"\n [rivTooltip]=\"iconTooltip\"\n [size]=\"20\"\n class=\"icon\"\n></riv-icon>\n<div class=\"content\">\n <ng-content></ng-content>\n</div>\n<button *ngIf=\"dismissable\" class=\"dismiss\" (click)=\"dismiss.emit()\">\n <riv-icon [name]=\"'X'\" [size]=\"20\"></riv-icon>\n</button>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--size-large);padding:var(--size-large);border-radius:var(--border-radius-medium);box-shadow:var(--depth-1);color:var(--type-light-high-contrast);border-left-style:solid;border-left-width:var(--size-small);border-left-color:var(--banner-accent);.icon {color: var(--banner-accent);}}:host.info{background-color:var(--purp-10);--banner-accent: var(--purp-80)}:host.safety{background-color:var(--safety-light);--banner-accent: var(--safety-dark)}:host.warning{background-color:var(--caution-light);--banner-accent: var(--tang-70)}:host.danger{background-color:var(--danger-light);--banner-accent: var(--danger-main)}.icon{margin:var(--size-xxsmall);flex-shrink:0}.content{flex-grow:1;font:var(--body-medium)}.dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xxsmall);cursor:pointer;transition:background-color var(--short-transition);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast)}.dismiss:hover{background-color:var(--black-20)}.dismiss:active{background-color:var(--black-30)}\n"] }]
|
|
5875
|
+
args: [{ selector: 'riv-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon\n *ngIf=\"getResolvedIcon(); let icon\"\n [name]=\"icon\"\n [rivTooltip]=\"iconTooltip\"\n [size]=\"20\"\n class=\"icon\"\n></riv-icon>\n<div *ngIf=\"hasHeading\" class=\"heading\">{{ heading }}</div>\n<div class=\"content\">\n <ng-content></ng-content>\n</div>\n<button *ngIf=\"dismissable\" class=\"dismiss\" (click)=\"dismiss.emit()\">\n <riv-icon [name]=\"'X'\" [size]=\"20\"></riv-icon>\n</button>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--size-large);padding:var(--size-large);border-radius:var(--border-radius-medium);box-shadow:var(--depth-1);color:var(--type-light-high-contrast);border-left-style:solid;border-left-width:var(--size-small);border-left-color:var(--banner-accent);.icon {color: var(--banner-accent);}}:host.has-heading{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"icon heading close\" \". content .\";column-gap:var(--size-large);row-gap:0;align-items:start}:host.has-heading .icon{grid-area:icon}:host.has-heading .heading{grid-area:heading}:host.has-heading .content{grid-area:content}:host.has-heading .dismiss{grid-area:close}.heading{font:var(--body-medium);font-weight:var(--font-weight-heavy);line-height:var(--type-2-line-height-2)}:host.info{background-color:var(--purp-10);--banner-accent: var(--purp-80)}:host.safety{background-color:var(--safety-light);--banner-accent: var(--safety-dark)}:host.warning{background-color:var(--caution-light);--banner-accent: var(--tang-70)}:host.danger{background-color:var(--danger-light);--banner-accent: var(--danger-main)}.icon{margin:var(--size-xxsmall);flex-shrink:0}.content{flex-grow:1;font:var(--body-medium)}.dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xxsmall);cursor:pointer;transition:background-color var(--short-transition);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast)}.dismiss:hover{background-color:var(--black-20)}.dismiss:active{background-color:var(--black-30)}\n"] }]
|
|
5872
5876
|
}], propDecorators: { variant: [{
|
|
5873
5877
|
type: Input
|
|
5874
5878
|
}, {
|
|
@@ -5878,8 +5882,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
5878
5882
|
type: Input
|
|
5879
5883
|
}], iconTooltip: [{
|
|
5880
5884
|
type: Input
|
|
5885
|
+
}], heading: [{
|
|
5886
|
+
type: Input
|
|
5881
5887
|
}], dismissable: [{
|
|
5882
5888
|
type: Input
|
|
5889
|
+
}], hasHeading: [{
|
|
5890
|
+
type: HostBinding,
|
|
5891
|
+
args: ['class.has-heading']
|
|
5883
5892
|
}], dismiss: [{
|
|
5884
5893
|
type: Output
|
|
5885
5894
|
}] } });
|
|
@@ -7433,7 +7442,7 @@ class TableColumnSettingsSideSheetComponent {
|
|
|
7433
7442
|
}
|
|
7434
7443
|
}
|
|
7435
7444
|
TableColumnSettingsSideSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableColumnSettingsSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7436
|
-
TableColumnSettingsSideSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 #trigger rivButton (click)=\"open.next(true)\">Columns</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 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 *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 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 rivButton [variant]=\"'ghost'\" (click)=\"resetToDefault()\">\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 *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 *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 *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 riv-menu-item (click)=\"columnMoveTo(column, 'start')\">\n Move to start\n </button>\n <button riv-menu-item (click)=\"columnMoveTo(column, 'end')\">\n Move to end\n </button>\n <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 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", "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"] }, { 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", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7445
|
+
TableColumnSettingsSideSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 #trigger rivButton (click)=\"open.next(true)\">Columns</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 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 *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 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 rivButton [variant]=\"'ghost'\" (click)=\"resetToDefault()\">\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 *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 *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 *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 riv-menu-item (click)=\"columnMoveTo(column, 'start')\">\n Move to start\n </button>\n <button riv-menu-item (click)=\"columnMoveTo(column, 'end')\">\n Move to end\n </button>\n <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 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"] }, { 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", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7437
7446
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableColumnSettingsSideSheetComponent, decorators: [{
|
|
7438
7447
|
type: Component,
|
|
7439
7448
|
args: [{ selector: 'riv-table-column-settings-side-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #trigger rivButton (click)=\"open.next(true)\">Columns</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 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 *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 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 rivButton [variant]=\"'ghost'\" (click)=\"resetToDefault()\">\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 *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 *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 *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 riv-menu-item (click)=\"columnMoveTo(column, 'start')\">\n Move to start\n </button>\n <button riv-menu-item (click)=\"columnMoveTo(column, 'end')\">\n Move to end\n </button>\n <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 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"] }]
|