@rivet-health/design-system 40.1.0 → 40.3.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/input/date/date.component.mjs +134 -17
- package/esm2020/lib/navigation/views/view-menu/view-menu.component.mjs +1 -1
- package/esm2020/lib/notification/banner/banner.component.mjs +2 -2
- package/esm2020/lib/overlay/modal/dialog/dialog.component.mjs +9 -3
- package/esm2020/lib/table/table/table-search-columns/table-search-columns.component.mjs +2 -2
- package/fesm2015/rivet-health-design-system.mjs +144 -20
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +143 -20
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/input/date/date.component.d.ts +20 -1
- package/lib/overlay/modal/dialog/dialog.component.d.ts +3 -1
- package/package.json +1 -1
- package/styles/global.css +14 -0
|
@@ -4008,8 +4008,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4008
4008
|
})(DateRangeComponent || (DateRangeComponent = {}));
|
|
4009
4009
|
|
|
4010
4010
|
class DateComponent extends InputLabelComponent {
|
|
4011
|
-
constructor() {
|
|
4012
|
-
super(
|
|
4011
|
+
constructor(cdr, host) {
|
|
4012
|
+
super();
|
|
4013
|
+
this.cdr = cdr;
|
|
4014
|
+
this.host = host;
|
|
4013
4015
|
this.min = CalendarComponent.defaultMin;
|
|
4014
4016
|
this.max = CalendarComponent.defaultMax;
|
|
4015
4017
|
this.placeholder = 'Select date';
|
|
@@ -4019,18 +4021,21 @@ class DateComponent extends InputLabelComponent {
|
|
|
4019
4021
|
this.activeYearMonth = timeMonth.floor(new Date());
|
|
4020
4022
|
this.open$ = new BehaviorSubject(false);
|
|
4021
4023
|
this.valueChange = new EventEmitter();
|
|
4024
|
+
this.inputText = '';
|
|
4025
|
+
this.hasFocus = false;
|
|
4026
|
+
this.datePipe = new DatePipe();
|
|
4022
4027
|
}
|
|
4023
4028
|
set value(v) {
|
|
4024
4029
|
var _a;
|
|
4025
4030
|
if (((_a = this._value) === null || _a === void 0 ? void 0 : _a.getTime()) === (v === null || v === void 0 ? void 0 : v.getTime()))
|
|
4026
4031
|
return;
|
|
4027
4032
|
this._value = v;
|
|
4028
|
-
|
|
4029
|
-
|
|
4030
|
-
|
|
4031
|
-
|
|
4032
|
-
|
|
4033
|
-
|
|
4033
|
+
// Skip text sync while typing so we don't stomp the user's in-progress input.
|
|
4034
|
+
if (!this.hasFocus)
|
|
4035
|
+
this.inputText = v ? this.formatValue(v) : '';
|
|
4036
|
+
if (v)
|
|
4037
|
+
this.setActiveMonth(v);
|
|
4038
|
+
this.cdr.markForCheck();
|
|
4034
4039
|
}
|
|
4035
4040
|
get value() {
|
|
4036
4041
|
return this._value;
|
|
@@ -4041,17 +4046,102 @@ class DateComponent extends InputLabelComponent {
|
|
|
4041
4046
|
get open() {
|
|
4042
4047
|
return this.open$.getValue();
|
|
4043
4048
|
}
|
|
4049
|
+
// The callout renders with isModal=false (no full-viewport scrim) and can't
|
|
4050
|
+
// self-close on outside clicks. Any overlay layer — including sibling
|
|
4051
|
+
// overlays like the month/year selects — counts as "inside" the picker.
|
|
4052
|
+
onDocumentMouseDown(target) {
|
|
4053
|
+
if (!this.open$.getValue() || !(target instanceof Element))
|
|
4054
|
+
return;
|
|
4055
|
+
if (this.host.nativeElement.contains(target))
|
|
4056
|
+
return;
|
|
4057
|
+
if (target.closest('.callout, .scrim, .overlay-container'))
|
|
4058
|
+
return;
|
|
4059
|
+
this.open$.next(false);
|
|
4060
|
+
this.cdr.markForCheck();
|
|
4061
|
+
}
|
|
4044
4062
|
clearValue() {
|
|
4045
|
-
this.
|
|
4063
|
+
this.commit(undefined);
|
|
4046
4064
|
this.open$.next(false);
|
|
4047
4065
|
}
|
|
4066
|
+
onInputChange(value) {
|
|
4067
|
+
this.inputText = value;
|
|
4068
|
+
const parsed = this.parseInput(value);
|
|
4069
|
+
this.previewValue = parsed;
|
|
4070
|
+
if (parsed)
|
|
4071
|
+
this.setActiveMonth(parsed);
|
|
4072
|
+
this.cdr.markForCheck();
|
|
4073
|
+
}
|
|
4074
|
+
onInputBlur(event) {
|
|
4075
|
+
this.hasFocus = false;
|
|
4076
|
+
const parsed = this.parseInput(this.inputText);
|
|
4077
|
+
if (parsed) {
|
|
4078
|
+
this.commit(parsed);
|
|
4079
|
+
}
|
|
4080
|
+
else if (!this.inputText.trim()) {
|
|
4081
|
+
this.commit(undefined);
|
|
4082
|
+
}
|
|
4083
|
+
else {
|
|
4084
|
+
// Invalid text — revert to whatever the committed value was.
|
|
4085
|
+
this.inputText = this._value ? this.formatValue(this._value) : '';
|
|
4086
|
+
}
|
|
4087
|
+
this.previewValue = undefined;
|
|
4088
|
+
// Close on keyboard-driven focus changes (Tab out). Stay open if focus
|
|
4089
|
+
// moved into a nested overlay (e.g. the calendar's month/year select).
|
|
4090
|
+
// Mouse clicks inside the calendar preventDefault mousedown so this
|
|
4091
|
+
// handler never runs for them.
|
|
4092
|
+
const nextTarget = event === null || event === void 0 ? void 0 : event.relatedTarget;
|
|
4093
|
+
const stayOpen = nextTarget instanceof Element &&
|
|
4094
|
+
(this.host.nativeElement.contains(nextTarget) ||
|
|
4095
|
+
!!nextTarget.closest('.callout, .scrim, .overlay-container'));
|
|
4096
|
+
if (!stayOpen)
|
|
4097
|
+
this.open$.next(false);
|
|
4098
|
+
this.cdr.markForCheck();
|
|
4099
|
+
}
|
|
4100
|
+
onDateSelect(date) {
|
|
4101
|
+
this.commit(timeDay.floor(date));
|
|
4102
|
+
this.open$.next(false);
|
|
4103
|
+
}
|
|
4104
|
+
onInputFocus() {
|
|
4105
|
+
this.hasFocus = true;
|
|
4106
|
+
this.open$.next(true);
|
|
4107
|
+
}
|
|
4108
|
+
toggleCalendar() {
|
|
4109
|
+
this.open$.next(!this.open$.getValue());
|
|
4110
|
+
}
|
|
4111
|
+
formatValue(date) {
|
|
4112
|
+
return this.datePipe.transform(date);
|
|
4113
|
+
}
|
|
4114
|
+
parseInput(text) {
|
|
4115
|
+
const parsed = DateComponent.parseDate(text);
|
|
4116
|
+
return parsed && DateComponent.isValidDate(parsed, this.min, this.max)
|
|
4117
|
+
? timeDay.floor(parsed)
|
|
4118
|
+
: undefined;
|
|
4119
|
+
}
|
|
4120
|
+
setActiveMonth(date) {
|
|
4121
|
+
const month = timeMonth.floor(date);
|
|
4122
|
+
if (month.getTime() !== this.activeYearMonth.getTime()) {
|
|
4123
|
+
this.activeYearMonth = month;
|
|
4124
|
+
}
|
|
4125
|
+
}
|
|
4126
|
+
commit(next) {
|
|
4127
|
+
var _a;
|
|
4128
|
+
const unchanged = (next === null || next === void 0 ? void 0 : next.getTime()) === ((_a = this._value) === null || _a === void 0 ? void 0 : _a.getTime());
|
|
4129
|
+
this._value = next;
|
|
4130
|
+
this.inputText = next ? this.formatValue(next) : '';
|
|
4131
|
+
this.previewValue = undefined;
|
|
4132
|
+
if (next)
|
|
4133
|
+
this.setActiveMonth(next);
|
|
4134
|
+
if (!unchanged)
|
|
4135
|
+
this.valueChange.emit(next);
|
|
4136
|
+
this.cdr.markForCheck();
|
|
4137
|
+
}
|
|
4048
4138
|
}
|
|
4049
|
-
DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, deps:
|
|
4050
|
-
DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", showClearButton: "showClearButton", open: "open" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [state]=\"state\"\n [errorMessage]=\"errorMessage\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <
|
|
4139
|
+
DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4140
|
+
DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", showClearButton: "showClearButton", open: "open" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event.target)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [state]=\"state\"\n [errorMessage]=\"errorMessage\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <div\n #trigger\n class=\"trigger\"\n [class.xsmall]=\"size === 'xsmall'\"\n [class.small]=\"size === 'small'\"\n [class.large]=\"size === 'large'\"\n [class.xlarge]=\"size === 'xlarge'\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n [class.disabled]=\"disabled\"\n >\n <input\n #input\n class=\"value\"\n [placeholder]=\"placeholder\"\n [value]=\"inputText\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"label || null\"\n [attr.aria-expanded]=\"open$ | async\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n aria-autocomplete=\"none\"\n (input)=\"onInputChange(input.value)\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus()\"\n (keydown.enter)=\"input.blur(); open$.next(false); $event.preventDefault()\"\n type=\"text\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n />\n <button\n class=\"chevron\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"toggleCalendar()\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"(open$ | async) ? 'Close calendar' : 'Open calendar'\"\n type=\"button\"\n tabindex=\"-1\"\n >\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </button>\n </div>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [isModal]=\"false\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false)\"\n >\n <div (mousedown)=\"$event.preventDefault()\">\n <header *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </header>\n <div class=\"content\">\n <riv-calendar\n [activeYearMonth]=\"activeYearMonth\"\n (activeYearMonthChange)=\"activeYearMonth = $event\"\n [displayMin]=\"min\"\n [displayMax]=\"max\"\n [selectableMin]=\"min\"\n [selectableMax]=\"max\"\n [selectedValue]=\"previewValue ?? value\"\n (dateSelect)=\"onDateSelect($event); input.blur()\"\n ></riv-calendar>\n </div>\n <footer *ngIf=\"showClearButton\" class=\"buttons\">\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"clearValue(); input.blur()\"\n type=\"button\"\n >\n Clear\n </button>\n </footer>\n </div>\n </riv-callout>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0);padding-left:var(--size-small);position:relative}.trigger:focus-within{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger.disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre;border:none;background:transparent;outline:none;width:100%}.value::placeholder{color:var(--type-light-disabled)}.value:disabled{color:var(--type-light-disabled)}.trigger.xsmall .value{font:var(--input-small);padding:var(--size-xsmall) 0}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.trigger.xlarge .value{font:var(--input-large);padding:var(--size-large) var(--size-small)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5);border:none;background:transparent;cursor:pointer;color:var(--type-light-high-contrast)}.chevron:disabled{color:var(--type-light-disabled);cursor:not-allowed}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{padding:var(--size-large)}.buttons{padding:var(--size-small);display:flex;justify-content:space-between}\n"], dependencies: [{ 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: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4051
4141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
|
|
4052
4142
|
type: Component,
|
|
4053
|
-
args: [{ selector: 'riv-date', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [state]=\"state\"\n [errorMessage]=\"errorMessage\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <
|
|
4054
|
-
}], propDecorators: { min: [{
|
|
4143
|
+
args: [{ selector: 'riv-date', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [state]=\"state\"\n [errorMessage]=\"errorMessage\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <div\n #trigger\n class=\"trigger\"\n [class.xsmall]=\"size === 'xsmall'\"\n [class.small]=\"size === 'small'\"\n [class.large]=\"size === 'large'\"\n [class.xlarge]=\"size === 'xlarge'\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n [class.disabled]=\"disabled\"\n >\n <input\n #input\n class=\"value\"\n [placeholder]=\"placeholder\"\n [value]=\"inputText\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"label || null\"\n [attr.aria-expanded]=\"open$ | async\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n aria-autocomplete=\"none\"\n (input)=\"onInputChange(input.value)\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus()\"\n (keydown.enter)=\"input.blur(); open$.next(false); $event.preventDefault()\"\n type=\"text\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n />\n <button\n class=\"chevron\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"toggleCalendar()\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"(open$ | async) ? 'Close calendar' : 'Open calendar'\"\n type=\"button\"\n tabindex=\"-1\"\n >\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </button>\n </div>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [isModal]=\"false\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false)\"\n >\n <div (mousedown)=\"$event.preventDefault()\">\n <header *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </header>\n <div class=\"content\">\n <riv-calendar\n [activeYearMonth]=\"activeYearMonth\"\n (activeYearMonthChange)=\"activeYearMonth = $event\"\n [displayMin]=\"min\"\n [displayMax]=\"max\"\n [selectableMin]=\"min\"\n [selectableMax]=\"max\"\n [selectedValue]=\"previewValue ?? value\"\n (dateSelect)=\"onDateSelect($event); input.blur()\"\n ></riv-calendar>\n </div>\n <footer *ngIf=\"showClearButton\" class=\"buttons\">\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"clearValue(); input.blur()\"\n type=\"button\"\n >\n Clear\n </button>\n </footer>\n </div>\n </riv-callout>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0);padding-left:var(--size-small);position:relative}.trigger:focus-within{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger.disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre;border:none;background:transparent;outline:none;width:100%}.value::placeholder{color:var(--type-light-disabled)}.value:disabled{color:var(--type-light-disabled)}.trigger.xsmall .value{font:var(--input-small);padding:var(--size-xsmall) 0}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.trigger.xlarge .value{font:var(--input-large);padding:var(--size-large) var(--size-small)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5);border:none;background:transparent;cursor:pointer;color:var(--type-light-high-contrast)}.chevron:disabled{color:var(--type-light-disabled);cursor:not-allowed}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{padding:var(--size-large)}.buttons{padding:var(--size-small);display:flex;justify-content:space-between}\n"] }]
|
|
4144
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { min: [{
|
|
4055
4145
|
type: Input
|
|
4056
4146
|
}], max: [{
|
|
4057
4147
|
type: Input
|
|
@@ -4072,6 +4162,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4072
4162
|
type: Input
|
|
4073
4163
|
}], valueChange: [{
|
|
4074
4164
|
type: Output
|
|
4165
|
+
}], onDocumentMouseDown: [{
|
|
4166
|
+
type: HostListener,
|
|
4167
|
+
args: ['document:mousedown', ['$event.target']]
|
|
4075
4168
|
}] } });
|
|
4076
4169
|
(function (DateComponent) {
|
|
4077
4170
|
DateComponent.Sizes = [
|
|
@@ -4081,6 +4174,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4081
4174
|
'large',
|
|
4082
4175
|
'xlarge',
|
|
4083
4176
|
];
|
|
4177
|
+
// Accepts MM/DD/YYYY, M/D/YY, and YYYY-MM-DD with /, -, or . separators.
|
|
4178
|
+
// A 4-digit leading segment is treated as year.
|
|
4179
|
+
function parseDate(input) {
|
|
4180
|
+
const parts = input.trim().split(/[/.-]/);
|
|
4181
|
+
if (parts.length !== 3)
|
|
4182
|
+
return undefined;
|
|
4183
|
+
const nums = parts.map(p => parseInt(p, 10));
|
|
4184
|
+
if (nums.some(isNaN))
|
|
4185
|
+
return undefined;
|
|
4186
|
+
let [year, month, day] = parts[0].length === 4 ? nums : [nums[2], nums[0], nums[1]];
|
|
4187
|
+
if (parts[0].length !== 4 && year < 100)
|
|
4188
|
+
year += year < 50 ? 2000 : 1900;
|
|
4189
|
+
const date = new Date(year, month - 1, day);
|
|
4190
|
+
return date.getFullYear() === year &&
|
|
4191
|
+
date.getMonth() === month - 1 &&
|
|
4192
|
+
date.getDate() === day
|
|
4193
|
+
? date
|
|
4194
|
+
: undefined;
|
|
4195
|
+
}
|
|
4196
|
+
DateComponent.parseDate = parseDate;
|
|
4197
|
+
function isValidDate(date, min, max) {
|
|
4198
|
+
const time = date.getTime();
|
|
4199
|
+
return time >= min.getTime() && time <= max.getTime();
|
|
4200
|
+
}
|
|
4201
|
+
DateComponent.isValidDate = isValidDate;
|
|
4084
4202
|
})(DateComponent || (DateComponent = {}));
|
|
4085
4203
|
|
|
4086
4204
|
const ZWS = '';
|
|
@@ -5754,6 +5872,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
5754
5872
|
|
|
5755
5873
|
class DialogComponent {
|
|
5756
5874
|
constructor() {
|
|
5875
|
+
this.customBody = false;
|
|
5876
|
+
this.customFooter = false;
|
|
5757
5877
|
this.close = new EventEmitter();
|
|
5758
5878
|
this.hook = ANIMATION_CONSTANTS.DIALOG.HOOK;
|
|
5759
5879
|
}
|
|
@@ -5765,14 +5885,18 @@ class DialogComponent {
|
|
|
5765
5885
|
}
|
|
5766
5886
|
}
|
|
5767
5887
|
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5768
|
-
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DialogComponent, selector: "riv-dialog", inputs: { title: "title", minWidth: "minWidth" }, outputs: { close: "close" }, host: { listeners: { "document:keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"true\">\n <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n <div class=\"dialog\" [style.min-width]=\"minWidth\">\n <header>\n <span class=\"title\">\n {{ title }}\n </span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n <div class=\"body\">\n <ng-content></ng-content>\n </div>\n <div class=\"footer\">\n <ng-content select=\"footer\"></ng-content>\n </div>\n </div>\n </div>\n</riv-modal>\n", styles: [".wrapper{position:absolute;top:50%;left:50%}.dialog{transform:translate(-50%,-50%);border-radius:var(--border-radius-medium);border:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;max-width:calc(100vw - var(--size-xlarge) * 2);max-height:calc(100vh - var(--size-xlarge) * 2);overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--size-medium);gap:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0);overflow-y:auto;min-height:0}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: ModalComponent, selector: "riv-modal", inputs: ["obscure", "topOffset"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5888
|
+
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DialogComponent, selector: "riv-dialog", inputs: { title: "title", minWidth: "minWidth", customBody: "customBody", customFooter: "customFooter" }, outputs: { close: "close" }, host: { listeners: { "document:keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"true\">\n <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n <div class=\"dialog\" [style.min-width]=\"minWidth\">\n <header>\n <span class=\"title\">\n {{ title }}\n </span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n <div class=\"body\" [class.custom]=\"customBody\">\n <ng-content></ng-content>\n </div>\n <div class=\"footer riv-dialog-footer\" [class.custom]=\"customFooter\">\n <ng-content select=\"footer\"></ng-content>\n </div>\n </div>\n </div>\n</riv-modal>\n", styles: [".wrapper{position:absolute;top:50%;left:50%}.dialog{transform:translate(-50%,-50%);border-radius:var(--border-radius-medium);border:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;max-width:calc(100vw - var(--size-xlarge) * 2);max-height:calc(100vh - var(--size-xlarge) * 2);overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--size-medium);gap:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0);overflow-y:auto;min-height:0}.body:not(.custom){padding:var(--size-large)}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}.footer:not(:has(> footer)){display:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: ModalComponent, selector: "riv-modal", inputs: ["obscure", "topOffset"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5769
5889
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, decorators: [{
|
|
5770
5890
|
type: Component,
|
|
5771
|
-
args: [{ selector: 'riv-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"true\">\n <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n <div class=\"dialog\" [style.min-width]=\"minWidth\">\n <header>\n <span class=\"title\">\n {{ title }}\n </span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n <div class=\"body\">\n <ng-content></ng-content>\n </div>\n <div class=\"footer\">\n <ng-content select=\"footer\"></ng-content>\n </div>\n </div>\n </div>\n</riv-modal>\n", styles: [".wrapper{position:absolute;top:50%;left:50%}.dialog{transform:translate(-50%,-50%);border-radius:var(--border-radius-medium);border:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;max-width:calc(100vw - var(--size-xlarge) * 2);max-height:calc(100vh - var(--size-xlarge) * 2);overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--size-medium);gap:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0);overflow-y:auto;min-height:0}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}\n"] }]
|
|
5891
|
+
args: [{ selector: 'riv-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"true\">\n <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n <div class=\"dialog\" [style.min-width]=\"minWidth\">\n <header>\n <span class=\"title\">\n {{ title }}\n </span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n <div class=\"body\" [class.custom]=\"customBody\">\n <ng-content></ng-content>\n </div>\n <div class=\"footer riv-dialog-footer\" [class.custom]=\"customFooter\">\n <ng-content select=\"footer\"></ng-content>\n </div>\n </div>\n </div>\n</riv-modal>\n", styles: [".wrapper{position:absolute;top:50%;left:50%}.dialog{transform:translate(-50%,-50%);border-radius:var(--border-radius-medium);border:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;max-width:calc(100vw - var(--size-xlarge) * 2);max-height:calc(100vh - var(--size-xlarge) * 2);overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--size-medium);gap:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0);overflow-y:auto;min-height:0}.body:not(.custom){padding:var(--size-large)}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}.footer:not(:has(> footer)){display:none}\n"] }]
|
|
5772
5892
|
}], propDecorators: { title: [{
|
|
5773
5893
|
type: Input
|
|
5774
5894
|
}], minWidth: [{
|
|
5775
5895
|
type: Input
|
|
5896
|
+
}], customBody: [{
|
|
5897
|
+
type: Input
|
|
5898
|
+
}], customFooter: [{
|
|
5899
|
+
type: Input
|
|
5776
5900
|
}], close: [{
|
|
5777
5901
|
type: Output
|
|
5778
5902
|
}], handleKeydown: [{
|
|
@@ -6030,7 +6154,7 @@ class ViewMenuComponent {
|
|
|
6030
6154
|
}
|
|
6031
6155
|
}
|
|
6032
6156
|
ViewMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6033
|
-
ViewMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ViewMenuComponent, selector: "riv-view-menu", inputs: { manager: "manager", view: "view", menuContext: "menuContext" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["menuTrigger"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"view\">\n <riv-menu\n #menu\n [preferredPosition]=\"'bottom-right'\"\n (click)=\"$event.stopPropagation()\"\n >\n <ng-container *ngIf=\"triggerTemplate\">\n <ng-template #trigger>\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n </ng-template>\n </ng-container>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'menu'\n })\n \"\n [disabled]=\"view.system || view.temporary\"\n >\n {{ view.enabled ? 'Hide tab' : 'Show tab' }}\n </button>\n <div class=\"riv-divider\"></div>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEditingView',\n context: { id: view.id, autoRename: false, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Edit view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEditingView',\n context: { id: view.id, autoRename: true, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Rename view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({ type: 'duplicateView', view, menuContext })\n \"\n [disabled]=\"view.temporary\"\n >\n Duplicate view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setDeletingView',\n context: { id: view.id, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Delete view\n </button>\n <div class=\"riv-divider\"></div>\n <button\n riv-menu-item\n (click)=\"manager?.actions?.next({ type: 'copyLinkToView', view })\"\n [disabled]=\"view.temporary\"\n >\n Copy link to view\n </button>\n </riv-menu>\n\n <ng-container *ngIf=\"manager?.state | async; let state\">\n <ng-container *ngIf=\"state.editingViewContext; let editingViewContext\">\n <riv-edit-view\n *ngIf=\"\n editingViewContext.id === view.id &&\n editingViewContext.menuContext === menuContext\n \"\n [view]=\"view\"\n [userSource]=\"state.userSource\"\n [userSelectMode]=\"state.userSelectMode\"\n [onAddUser]=\"state.onAddUser\"\n [newTooltip]=\"state.newTooltip\"\n [autoSelectName]=\"editingViewContext.autoRename\"\n [anchor]=\"el.nativeElement\"\n (save)=\"manager?.actions?.next({ type: 'updateView', view: $event })\"\n (delete)=\"manager?.actions?.next({ type: 'deleteView', view: $event })\"\n (close)=\"\n manager?.actions?.next({ type: 'setEditingView', context: null })\n \"\n ></riv-edit-view>\n </ng-container>\n\n <ng-container *ngIf=\"state.deletingViewContext; let deletingViewContext\">\n <riv-dialog\n *ngIf=\"\n deletingViewContext.id === view.id &&\n deletingViewContext.menuContext === menuContext\n \"\n [title]=\"'Delete view'\"\n (close)=\"\n manager?.actions?.next({ type: 'setDeletingView', context: null })\n \"\n >\n <div class=\"delete-dialog\">\n <div class=\"delete-title\">\n Are you sure you want to delete the following view?\n </div>\n <p>{{ view.title }}</p>\n </div>\n <footer class=\"delete-footer\">\n <button\n rivButton\n (click)=\"\n manager?.actions?.next({ type: 'setDeletingView', context: null })\n \"\n >\n Cancel\n </button>\n <button\n rivButton\n [variant]=\"'danger'\"\n (click)=\"\n manager?.actions?.next({\n type: 'deleteView',\n view\n })\n \"\n >\n Delete view\n </button>\n </footer>\n </riv-dialog>\n </ng-container>\n </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:stretch}riv-menu{width:100%;max-width:100%;height:100%;max-height:100%}.delete-dialog{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 120);max-width:100%}.delete-title{font:var(--title-02)}.delete-footer{padding:var(--size-medium);display:flex;justify-content:space-between;gap:var(--size-medium)}\n"], dependencies: [{ 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: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: DialogComponent, selector: "riv-dialog", inputs: ["title", "minWidth"], outputs: ["close"] }, { kind: "component", type: EditViewComponent, selector: "riv-edit-view", inputs: ["anchor", "autoSelectName", "view", "userSource", "userSelectMode", "onAddUser", "newTooltip", "mode"], outputs: ["save", "delete", "close"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6157
|
+
ViewMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ViewMenuComponent, selector: "riv-view-menu", inputs: { manager: "manager", view: "view", menuContext: "menuContext" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["menuTrigger"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"view\">\n <riv-menu\n #menu\n [preferredPosition]=\"'bottom-right'\"\n (click)=\"$event.stopPropagation()\"\n >\n <ng-container *ngIf=\"triggerTemplate\">\n <ng-template #trigger>\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n </ng-template>\n </ng-container>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'menu'\n })\n \"\n [disabled]=\"view.system || view.temporary\"\n >\n {{ view.enabled ? 'Hide tab' : 'Show tab' }}\n </button>\n <div class=\"riv-divider\"></div>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEditingView',\n context: { id: view.id, autoRename: false, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Edit view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEditingView',\n context: { id: view.id, autoRename: true, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Rename view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({ type: 'duplicateView', view, menuContext })\n \"\n [disabled]=\"view.temporary\"\n >\n Duplicate view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setDeletingView',\n context: { id: view.id, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Delete view\n </button>\n <div class=\"riv-divider\"></div>\n <button\n riv-menu-item\n (click)=\"manager?.actions?.next({ type: 'copyLinkToView', view })\"\n [disabled]=\"view.temporary\"\n >\n Copy link to view\n </button>\n </riv-menu>\n\n <ng-container *ngIf=\"manager?.state | async; let state\">\n <ng-container *ngIf=\"state.editingViewContext; let editingViewContext\">\n <riv-edit-view\n *ngIf=\"\n editingViewContext.id === view.id &&\n editingViewContext.menuContext === menuContext\n \"\n [view]=\"view\"\n [userSource]=\"state.userSource\"\n [userSelectMode]=\"state.userSelectMode\"\n [onAddUser]=\"state.onAddUser\"\n [newTooltip]=\"state.newTooltip\"\n [autoSelectName]=\"editingViewContext.autoRename\"\n [anchor]=\"el.nativeElement\"\n (save)=\"manager?.actions?.next({ type: 'updateView', view: $event })\"\n (delete)=\"manager?.actions?.next({ type: 'deleteView', view: $event })\"\n (close)=\"\n manager?.actions?.next({ type: 'setEditingView', context: null })\n \"\n ></riv-edit-view>\n </ng-container>\n\n <ng-container *ngIf=\"state.deletingViewContext; let deletingViewContext\">\n <riv-dialog\n *ngIf=\"\n deletingViewContext.id === view.id &&\n deletingViewContext.menuContext === menuContext\n \"\n [title]=\"'Delete view'\"\n (close)=\"\n manager?.actions?.next({ type: 'setDeletingView', context: null })\n \"\n >\n <div class=\"delete-dialog\">\n <div class=\"delete-title\">\n Are you sure you want to delete the following view?\n </div>\n <p>{{ view.title }}</p>\n </div>\n <footer class=\"delete-footer\">\n <button\n rivButton\n (click)=\"\n manager?.actions?.next({ type: 'setDeletingView', context: null })\n \"\n >\n Cancel\n </button>\n <button\n rivButton\n [variant]=\"'danger'\"\n (click)=\"\n manager?.actions?.next({\n type: 'deleteView',\n view\n })\n \"\n >\n Delete view\n </button>\n </footer>\n </riv-dialog>\n </ng-container>\n </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:stretch}riv-menu{width:100%;max-width:100%;height:100%;max-height:100%}.delete-dialog{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 120);max-width:100%}.delete-title{font:var(--title-02)}.delete-footer{padding:var(--size-medium);display:flex;justify-content:space-between;gap:var(--size-medium)}\n"], dependencies: [{ 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: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: DialogComponent, selector: "riv-dialog", inputs: ["title", "minWidth", "customBody", "customFooter"], outputs: ["close"] }, { kind: "component", type: EditViewComponent, selector: "riv-edit-view", inputs: ["anchor", "autoSelectName", "view", "userSource", "userSelectMode", "onAddUser", "newTooltip", "mode"], outputs: ["save", "delete", "close"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6034
6158
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewMenuComponent, decorators: [{
|
|
6035
6159
|
type: Component,
|
|
6036
6160
|
args: [{ selector: 'riv-view-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"view\">\n <riv-menu\n #menu\n [preferredPosition]=\"'bottom-right'\"\n (click)=\"$event.stopPropagation()\"\n >\n <ng-container *ngIf=\"triggerTemplate\">\n <ng-template #trigger>\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n </ng-template>\n </ng-container>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'menu'\n })\n \"\n [disabled]=\"view.system || view.temporary\"\n >\n {{ view.enabled ? 'Hide tab' : 'Show tab' }}\n </button>\n <div class=\"riv-divider\"></div>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEditingView',\n context: { id: view.id, autoRename: false, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Edit view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEditingView',\n context: { id: view.id, autoRename: true, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Rename view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({ type: 'duplicateView', view, menuContext })\n \"\n [disabled]=\"view.temporary\"\n >\n Duplicate view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setDeletingView',\n context: { id: view.id, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Delete view\n </button>\n <div class=\"riv-divider\"></div>\n <button\n riv-menu-item\n (click)=\"manager?.actions?.next({ type: 'copyLinkToView', view })\"\n [disabled]=\"view.temporary\"\n >\n Copy link to view\n </button>\n </riv-menu>\n\n <ng-container *ngIf=\"manager?.state | async; let state\">\n <ng-container *ngIf=\"state.editingViewContext; let editingViewContext\">\n <riv-edit-view\n *ngIf=\"\n editingViewContext.id === view.id &&\n editingViewContext.menuContext === menuContext\n \"\n [view]=\"view\"\n [userSource]=\"state.userSource\"\n [userSelectMode]=\"state.userSelectMode\"\n [onAddUser]=\"state.onAddUser\"\n [newTooltip]=\"state.newTooltip\"\n [autoSelectName]=\"editingViewContext.autoRename\"\n [anchor]=\"el.nativeElement\"\n (save)=\"manager?.actions?.next({ type: 'updateView', view: $event })\"\n (delete)=\"manager?.actions?.next({ type: 'deleteView', view: $event })\"\n (close)=\"\n manager?.actions?.next({ type: 'setEditingView', context: null })\n \"\n ></riv-edit-view>\n </ng-container>\n\n <ng-container *ngIf=\"state.deletingViewContext; let deletingViewContext\">\n <riv-dialog\n *ngIf=\"\n deletingViewContext.id === view.id &&\n deletingViewContext.menuContext === menuContext\n \"\n [title]=\"'Delete view'\"\n (close)=\"\n manager?.actions?.next({ type: 'setDeletingView', context: null })\n \"\n >\n <div class=\"delete-dialog\">\n <div class=\"delete-title\">\n Are you sure you want to delete the following view?\n </div>\n <p>{{ view.title }}</p>\n </div>\n <footer class=\"delete-footer\">\n <button\n rivButton\n (click)=\"\n manager?.actions?.next({ type: 'setDeletingView', context: null })\n \"\n >\n Cancel\n </button>\n <button\n rivButton\n [variant]=\"'danger'\"\n (click)=\"\n manager?.actions?.next({\n type: 'deleteView',\n view\n })\n \"\n >\n Delete view\n </button>\n </footer>\n </riv-dialog>\n </ng-container>\n </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:stretch}riv-menu{width:100%;max-width:100%;height:100%;max-height:100%}.delete-dialog{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 120);max-width:100%}.delete-title{font:var(--title-02)}.delete-footer{padding:var(--size-medium);display:flex;justify-content:space-between;gap:var(--size-medium)}\n"] }]
|
|
@@ -6303,10 +6427,10 @@ class BannerComponent {
|
|
|
6303
6427
|
}
|
|
6304
6428
|
}
|
|
6305
6429
|
BannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6306
|
-
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)
|
|
6430
|
+
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)}:host .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 });
|
|
6307
6431
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BannerComponent, decorators: [{
|
|
6308
6432
|
type: Component,
|
|
6309
|
-
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)
|
|
6433
|
+
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)}:host .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"] }]
|
|
6310
6434
|
}], propDecorators: { variant: [{
|
|
6311
6435
|
type: Input
|
|
6312
6436
|
}, {
|
|
@@ -8136,10 +8260,10 @@ class TableSearchColumnsComponent {
|
|
|
8136
8260
|
}
|
|
8137
8261
|
}
|
|
8138
8262
|
TableSearchColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableSearchColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8139
|
-
TableSearchColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableSearchColumnsComponent, selector: "riv-table-search-columns", inputs: { manager: "manager", disabled: "disabled" }, ngImport: i0, template: "<ng-container *ngIf=\"columnList | async; let s\">\n <button #trigger class=\"trigger-button\" (click)=\"open.next(true)\">\n <riv-icon [name]=\"'MoreVertical'\" [size]=\"16\"></riv-icon>\n </button>\n <ng-container *ngIf=\"open | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [preferredPosition]=\"'bottom-left'\"\n [theme]=\"'light'\"\n (close)=\"open.next(false)\"\n >\n <div class=\"content-body\">\n <div class=\"header-container\">\n <riv-help\n [size]=\"12\"\n [help]=\"'Toggle which columns are included in table search results'\"\n ></riv-help\n ><span class=\"header-text\">Search in</span>\n </div>\n\n <ng-container\n [ngTemplateOutlet]=\"optionList\"\n [ngTemplateOutletContext]=\"{ columns: s.activeSearchColumns }\"\n ></ng-container>\n\n <div *ngIf=\"s.hiddenSearchColumns.length > 0\" class=\"column-header\">\n Hidden columns\n </div>\n\n <ng-container\n *ngIf=\"s.hiddenSearchColumns.length > 0\"\n [ngTemplateOutlet]=\"optionList\"\n [ngTemplateOutletContext]=\"{ columns: s.hiddenSearchColumns }\"\n ></ng-container>\n\n <ng-template #optionList let-columns=\"columns\">\n <ng-container *ngFor=\"let column of columns\">\n <ng-container\n [ngTemplateOutlet]=\"option\"\n [ngTemplateOutletContext]=\"{ node: column }\"\n ></ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template #option let-node=\"node\">\n <div class=\"node-container\">\n <span class=\"node-text\">{{ node.title }}</span>\n <riv-switch-checkbox\n [size]=\"'small'\"\n [value]=\"node.searchEnabled\"\n [disabled]=\"s.searchEnabledCount === 1 && node.searchEnabled\"\n [rivTooltip]=\"\n s.searchEnabledCount === 1 && node.searchEnabled\n ? 'At least one search field is required'\n : undefined\n \"\n (valueChange)=\"updateColumns(node.id, $event)\"\n ></riv-switch-checkbox>\n </div>\n </ng-template>\n </div>\n </riv-callout>\n </ng-container>\n</ng-container>\n", styles: [".node-container{display:flex;justify-content:space-between;margin:var(--size-small) var(--size-medium)}.node-text{font:var(--input-medium)}.header-container{margin:calc(var(--base-grid-size) * .75) var(--size-medium);padding-bottom:var(--size-small)}.header-text{font:var(--input-medium);margin-left:var(--size-small)}.footer-container{display:flex;justify-content:end}.trigger-button{margin-top:var(--size-small);border-radius:var(--border-radius-small)}.trigger-button:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}.column-header{margin:var(--size-small) var(--size-medium);font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{display:flex;max-height:50vh;overflow-y:auto;flex-direction:column;align-items:stretch;gap:var(--size-small);padding:var(--size-large);min-width:calc(var(--base-grid-size) * 75)}\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: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SwitchCheckboxComponent, selector: "riv-switch-checkbox", inputs: ["size"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8263
|
+
TableSearchColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableSearchColumnsComponent, selector: "riv-table-search-columns", inputs: { manager: "manager", disabled: "disabled" }, ngImport: i0, template: "<ng-container *ngIf=\"columnList | async; let s\">\n <button #trigger class=\"trigger-button\" (click)=\"open.next(true)\">\n <riv-icon [name]=\"'MoreVertical'\" [size]=\"16\"></riv-icon>\n </button>\n <ng-container *ngIf=\"open | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [preferredPosition]=\"'bottom-left'\"\n [theme]=\"'light'\"\n (close)=\"open.next(false)\"\n >\n <div class=\"content-body\">\n <div class=\"header-container\">\n <riv-help\n [size]=\"12\"\n [help]=\"'Toggle which columns are included in table search results'\"\n ></riv-help\n ><span class=\"header-text\">Search in</span>\n </div>\n\n <ng-container\n [ngTemplateOutlet]=\"optionList\"\n [ngTemplateOutletContext]=\"{ columns: s.activeSearchColumns }\"\n ></ng-container>\n\n <div *ngIf=\"s.hiddenSearchColumns.length > 0\" class=\"column-header\">\n Hidden columns\n </div>\n\n <ng-container\n *ngIf=\"s.hiddenSearchColumns.length > 0\"\n [ngTemplateOutlet]=\"optionList\"\n [ngTemplateOutletContext]=\"{ columns: s.hiddenSearchColumns }\"\n ></ng-container>\n\n <ng-template #optionList let-columns=\"columns\">\n <ng-container *ngFor=\"let column of columns\">\n <ng-container\n [ngTemplateOutlet]=\"option\"\n [ngTemplateOutletContext]=\"{ node: column }\"\n ></ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template #option let-node=\"node\">\n <div class=\"node-container\">\n <span class=\"node-text\">{{ node.title }}</span>\n <riv-switch-checkbox\n [size]=\"'small'\"\n [value]=\"node.searchEnabled\"\n [disabled]=\"s.searchEnabledCount === 1 && node.searchEnabled\"\n [rivTooltip]=\"\n s.searchEnabledCount === 1 && node.searchEnabled\n ? 'At least one search field is required'\n : undefined\n \"\n (valueChange)=\"updateColumns(node.id, $event)\"\n ></riv-switch-checkbox>\n </div>\n </ng-template>\n </div>\n </riv-callout>\n </ng-container>\n</ng-container>\n", styles: [".node-container{display:flex;justify-content:space-between;margin:var(--size-small) var(--size-medium)}.node-text{font:var(--input-medium)}.header-container{margin:calc(var(--base-grid-size) * .75) var(--size-medium);padding-bottom:var(--size-small)}.header-text{font:var(--input-medium);margin-left:var(--size-small)}.footer-container{display:flex;justify-content:flex-end}.trigger-button{margin-top:var(--size-small);border-radius:var(--border-radius-small)}.trigger-button:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}.column-header{margin:var(--size-small) var(--size-medium);font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{display:flex;max-height:50vh;overflow-y:auto;flex-direction:column;align-items:stretch;gap:var(--size-small);padding:var(--size-large);min-width:calc(var(--base-grid-size) * 75)}\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: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SwitchCheckboxComponent, selector: "riv-switch-checkbox", inputs: ["size"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8140
8264
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableSearchColumnsComponent, decorators: [{
|
|
8141
8265
|
type: Component,
|
|
8142
|
-
args: [{ selector: 'riv-table-search-columns', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"columnList | async; let s\">\n <button #trigger class=\"trigger-button\" (click)=\"open.next(true)\">\n <riv-icon [name]=\"'MoreVertical'\" [size]=\"16\"></riv-icon>\n </button>\n <ng-container *ngIf=\"open | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [preferredPosition]=\"'bottom-left'\"\n [theme]=\"'light'\"\n (close)=\"open.next(false)\"\n >\n <div class=\"content-body\">\n <div class=\"header-container\">\n <riv-help\n [size]=\"12\"\n [help]=\"'Toggle which columns are included in table search results'\"\n ></riv-help\n ><span class=\"header-text\">Search in</span>\n </div>\n\n <ng-container\n [ngTemplateOutlet]=\"optionList\"\n [ngTemplateOutletContext]=\"{ columns: s.activeSearchColumns }\"\n ></ng-container>\n\n <div *ngIf=\"s.hiddenSearchColumns.length > 0\" class=\"column-header\">\n Hidden columns\n </div>\n\n <ng-container\n *ngIf=\"s.hiddenSearchColumns.length > 0\"\n [ngTemplateOutlet]=\"optionList\"\n [ngTemplateOutletContext]=\"{ columns: s.hiddenSearchColumns }\"\n ></ng-container>\n\n <ng-template #optionList let-columns=\"columns\">\n <ng-container *ngFor=\"let column of columns\">\n <ng-container\n [ngTemplateOutlet]=\"option\"\n [ngTemplateOutletContext]=\"{ node: column }\"\n ></ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template #option let-node=\"node\">\n <div class=\"node-container\">\n <span class=\"node-text\">{{ node.title }}</span>\n <riv-switch-checkbox\n [size]=\"'small'\"\n [value]=\"node.searchEnabled\"\n [disabled]=\"s.searchEnabledCount === 1 && node.searchEnabled\"\n [rivTooltip]=\"\n s.searchEnabledCount === 1 && node.searchEnabled\n ? 'At least one search field is required'\n : undefined\n \"\n (valueChange)=\"updateColumns(node.id, $event)\"\n ></riv-switch-checkbox>\n </div>\n </ng-template>\n </div>\n </riv-callout>\n </ng-container>\n</ng-container>\n", styles: [".node-container{display:flex;justify-content:space-between;margin:var(--size-small) var(--size-medium)}.node-text{font:var(--input-medium)}.header-container{margin:calc(var(--base-grid-size) * .75) var(--size-medium);padding-bottom:var(--size-small)}.header-text{font:var(--input-medium);margin-left:var(--size-small)}.footer-container{display:flex;justify-content:end}.trigger-button{margin-top:var(--size-small);border-radius:var(--border-radius-small)}.trigger-button:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}.column-header{margin:var(--size-small) var(--size-medium);font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{display:flex;max-height:50vh;overflow-y:auto;flex-direction:column;align-items:stretch;gap:var(--size-small);padding:var(--size-large);min-width:calc(var(--base-grid-size) * 75)}\n"] }]
|
|
8266
|
+
args: [{ selector: 'riv-table-search-columns', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"columnList | async; let s\">\n <button #trigger class=\"trigger-button\" (click)=\"open.next(true)\">\n <riv-icon [name]=\"'MoreVertical'\" [size]=\"16\"></riv-icon>\n </button>\n <ng-container *ngIf=\"open | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [preferredPosition]=\"'bottom-left'\"\n [theme]=\"'light'\"\n (close)=\"open.next(false)\"\n >\n <div class=\"content-body\">\n <div class=\"header-container\">\n <riv-help\n [size]=\"12\"\n [help]=\"'Toggle which columns are included in table search results'\"\n ></riv-help\n ><span class=\"header-text\">Search in</span>\n </div>\n\n <ng-container\n [ngTemplateOutlet]=\"optionList\"\n [ngTemplateOutletContext]=\"{ columns: s.activeSearchColumns }\"\n ></ng-container>\n\n <div *ngIf=\"s.hiddenSearchColumns.length > 0\" class=\"column-header\">\n Hidden columns\n </div>\n\n <ng-container\n *ngIf=\"s.hiddenSearchColumns.length > 0\"\n [ngTemplateOutlet]=\"optionList\"\n [ngTemplateOutletContext]=\"{ columns: s.hiddenSearchColumns }\"\n ></ng-container>\n\n <ng-template #optionList let-columns=\"columns\">\n <ng-container *ngFor=\"let column of columns\">\n <ng-container\n [ngTemplateOutlet]=\"option\"\n [ngTemplateOutletContext]=\"{ node: column }\"\n ></ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template #option let-node=\"node\">\n <div class=\"node-container\">\n <span class=\"node-text\">{{ node.title }}</span>\n <riv-switch-checkbox\n [size]=\"'small'\"\n [value]=\"node.searchEnabled\"\n [disabled]=\"s.searchEnabledCount === 1 && node.searchEnabled\"\n [rivTooltip]=\"\n s.searchEnabledCount === 1 && node.searchEnabled\n ? 'At least one search field is required'\n : undefined\n \"\n (valueChange)=\"updateColumns(node.id, $event)\"\n ></riv-switch-checkbox>\n </div>\n </ng-template>\n </div>\n </riv-callout>\n </ng-container>\n</ng-container>\n", styles: [".node-container{display:flex;justify-content:space-between;margin:var(--size-small) var(--size-medium)}.node-text{font:var(--input-medium)}.header-container{margin:calc(var(--base-grid-size) * .75) var(--size-medium);padding-bottom:var(--size-small)}.header-text{font:var(--input-medium);margin-left:var(--size-small)}.footer-container{display:flex;justify-content:flex-end}.trigger-button{margin-top:var(--size-small);border-radius:var(--border-radius-small)}.trigger-button:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}.column-header{margin:var(--size-small) var(--size-medium);font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{display:flex;max-height:50vh;overflow-y:auto;flex-direction:column;align-items:stretch;gap:var(--size-small);padding:var(--size-large);min-width:calc(var(--base-grid-size) * 75)}\n"] }]
|
|
8143
8267
|
}], propDecorators: { manager: [{
|
|
8144
8268
|
type: Input
|
|
8145
8269
|
}], disabled: [{
|