@rivet-health/design-system 40.2.0 → 40.4.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 +147 -17
- package/esm2020/lib/notification/banner/banner.component.mjs +2 -2
- package/esm2020/lib/table/table/table-search-columns/table-search-columns.component.mjs +2 -2
- package/fesm2015/rivet-health-design-system.mjs +148 -17
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +147 -17
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/input/date/date.component.d.ts +24 -2
- package/package.json +1 -1
|
@@ -4008,29 +4008,35 @@ 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';
|
|
4016
4018
|
this.disabled = false;
|
|
4017
4019
|
this.size = 'medium';
|
|
4018
4020
|
this.showClearButton = true;
|
|
4021
|
+
this.showTodayButton = true;
|
|
4019
4022
|
this.activeYearMonth = timeMonth.floor(new Date());
|
|
4020
4023
|
this.open$ = new BehaviorSubject(false);
|
|
4021
4024
|
this.valueChange = new EventEmitter();
|
|
4025
|
+
this.inputText = '';
|
|
4026
|
+
this.hasFocus = false;
|
|
4027
|
+
this.datePipe = new DatePipe();
|
|
4022
4028
|
}
|
|
4023
4029
|
set value(v) {
|
|
4024
4030
|
var _a;
|
|
4025
4031
|
if (((_a = this._value) === null || _a === void 0 ? void 0 : _a.getTime()) === (v === null || v === void 0 ? void 0 : v.getTime()))
|
|
4026
4032
|
return;
|
|
4027
4033
|
this._value = v;
|
|
4028
|
-
|
|
4029
|
-
|
|
4030
|
-
|
|
4031
|
-
|
|
4032
|
-
|
|
4033
|
-
|
|
4034
|
+
// Skip text sync while typing so we don't stomp the user's in-progress input.
|
|
4035
|
+
if (!this.hasFocus)
|
|
4036
|
+
this.inputText = v ? this.formatValue(v) : '';
|
|
4037
|
+
if (v)
|
|
4038
|
+
this.setActiveMonth(v);
|
|
4039
|
+
this.cdr.markForCheck();
|
|
4034
4040
|
}
|
|
4035
4041
|
get value() {
|
|
4036
4042
|
return this._value;
|
|
@@ -4041,17 +4047,112 @@ class DateComponent extends InputLabelComponent {
|
|
|
4041
4047
|
get open() {
|
|
4042
4048
|
return this.open$.getValue();
|
|
4043
4049
|
}
|
|
4050
|
+
// The callout renders with isModal=false (no full-viewport scrim) and can't
|
|
4051
|
+
// self-close on outside clicks. Any overlay layer — including sibling
|
|
4052
|
+
// overlays like the month/year selects — counts as "inside" the picker.
|
|
4053
|
+
onDocumentMouseDown(target) {
|
|
4054
|
+
if (!this.open$.getValue() || !(target instanceof Element))
|
|
4055
|
+
return;
|
|
4056
|
+
if (this.host.nativeElement.contains(target))
|
|
4057
|
+
return;
|
|
4058
|
+
if (target.closest('.callout, .scrim, .overlay-container'))
|
|
4059
|
+
return;
|
|
4060
|
+
this.open$.next(false);
|
|
4061
|
+
this.cdr.markForCheck();
|
|
4062
|
+
}
|
|
4044
4063
|
clearValue() {
|
|
4045
|
-
this.
|
|
4064
|
+
this.commit(undefined);
|
|
4065
|
+
this.open$.next(false);
|
|
4066
|
+
}
|
|
4067
|
+
selectToday() {
|
|
4068
|
+
const today = timeDay.floor(new Date());
|
|
4069
|
+
if (!DateComponent.isValidDate(today, this.min, this.max))
|
|
4070
|
+
return;
|
|
4071
|
+
this.commit(today);
|
|
4072
|
+
this.open$.next(false);
|
|
4073
|
+
}
|
|
4074
|
+
get isTodaySelectable() {
|
|
4075
|
+
return DateComponent.isValidDate(timeDay.floor(new Date()), this.min, this.max);
|
|
4076
|
+
}
|
|
4077
|
+
onInputChange(value) {
|
|
4078
|
+
this.inputText = value;
|
|
4079
|
+
const parsed = this.parseInput(value);
|
|
4080
|
+
this.previewValue = parsed;
|
|
4081
|
+
if (parsed)
|
|
4082
|
+
this.setActiveMonth(parsed);
|
|
4083
|
+
this.cdr.markForCheck();
|
|
4084
|
+
}
|
|
4085
|
+
onInputBlur(event) {
|
|
4086
|
+
this.hasFocus = false;
|
|
4087
|
+
const parsed = this.parseInput(this.inputText);
|
|
4088
|
+
if (parsed) {
|
|
4089
|
+
this.commit(parsed);
|
|
4090
|
+
}
|
|
4091
|
+
else if (!this.inputText.trim()) {
|
|
4092
|
+
this.commit(undefined);
|
|
4093
|
+
}
|
|
4094
|
+
else {
|
|
4095
|
+
// Invalid text — revert to whatever the committed value was.
|
|
4096
|
+
this.inputText = this._value ? this.formatValue(this._value) : '';
|
|
4097
|
+
}
|
|
4098
|
+
this.previewValue = undefined;
|
|
4099
|
+
// Close on keyboard-driven focus changes (Tab out). Stay open if focus
|
|
4100
|
+
// moved into a nested overlay (e.g. the calendar's month/year select).
|
|
4101
|
+
// Mouse clicks inside the calendar preventDefault mousedown so this
|
|
4102
|
+
// handler never runs for them.
|
|
4103
|
+
const nextTarget = event === null || event === void 0 ? void 0 : event.relatedTarget;
|
|
4104
|
+
const stayOpen = nextTarget instanceof Element &&
|
|
4105
|
+
(this.host.nativeElement.contains(nextTarget) ||
|
|
4106
|
+
!!nextTarget.closest('.callout, .scrim, .overlay-container'));
|
|
4107
|
+
if (!stayOpen)
|
|
4108
|
+
this.open$.next(false);
|
|
4109
|
+
this.cdr.markForCheck();
|
|
4110
|
+
}
|
|
4111
|
+
onDateSelect(date) {
|
|
4112
|
+
this.commit(timeDay.floor(date));
|
|
4046
4113
|
this.open$.next(false);
|
|
4047
4114
|
}
|
|
4115
|
+
onInputFocus() {
|
|
4116
|
+
this.hasFocus = true;
|
|
4117
|
+
this.open$.next(true);
|
|
4118
|
+
}
|
|
4119
|
+
toggleCalendar() {
|
|
4120
|
+
this.open$.next(!this.open$.getValue());
|
|
4121
|
+
}
|
|
4122
|
+
formatValue(date) {
|
|
4123
|
+
return this.datePipe.transform(date);
|
|
4124
|
+
}
|
|
4125
|
+
parseInput(text) {
|
|
4126
|
+
const parsed = DateComponent.parseDate(text);
|
|
4127
|
+
return parsed && DateComponent.isValidDate(parsed, this.min, this.max)
|
|
4128
|
+
? timeDay.floor(parsed)
|
|
4129
|
+
: undefined;
|
|
4130
|
+
}
|
|
4131
|
+
setActiveMonth(date) {
|
|
4132
|
+
const month = timeMonth.floor(date);
|
|
4133
|
+
if (month.getTime() !== this.activeYearMonth.getTime()) {
|
|
4134
|
+
this.activeYearMonth = month;
|
|
4135
|
+
}
|
|
4136
|
+
}
|
|
4137
|
+
commit(next) {
|
|
4138
|
+
var _a;
|
|
4139
|
+
const unchanged = (next === null || next === void 0 ? void 0 : next.getTime()) === ((_a = this._value) === null || _a === void 0 ? void 0 : _a.getTime());
|
|
4140
|
+
this._value = next;
|
|
4141
|
+
this.inputText = next ? this.formatValue(next) : '';
|
|
4142
|
+
this.previewValue = undefined;
|
|
4143
|
+
if (next)
|
|
4144
|
+
this.setActiveMonth(next);
|
|
4145
|
+
if (!unchanged)
|
|
4146
|
+
this.valueChange.emit(next);
|
|
4147
|
+
this.cdr.markForCheck();
|
|
4148
|
+
}
|
|
4048
4149
|
}
|
|
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 <
|
|
4150
|
+
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 });
|
|
4151
|
+
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", showTodayButton: "showTodayButton", 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 || showTodayButton\" class=\"buttons\">\n <button\n *ngIf=\"showClearButton\"\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"clearValue(); input.blur()\"\n type=\"button\"\n >\n Clear\n </button>\n <button\n *ngIf=\"showTodayButton\"\n class=\"today\"\n rivButton\n [size]=\"'small'\"\n [variant]=\"'basic'\"\n [disabled]=\"!isTodaySelectable\"\n (click)=\"selectToday(); input.blur()\"\n type=\"button\"\n >\n Today\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-xlarge)}.buttons{padding:0 var(--size-xlarge) var(--size-xlarge);display:flex;justify-content:space-between}.buttons .today{margin-left:auto}\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
4152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
|
|
4052
4153
|
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: [{
|
|
4154
|
+
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 || showTodayButton\" class=\"buttons\">\n <button\n *ngIf=\"showClearButton\"\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"clearValue(); input.blur()\"\n type=\"button\"\n >\n Clear\n </button>\n <button\n *ngIf=\"showTodayButton\"\n class=\"today\"\n rivButton\n [size]=\"'small'\"\n [variant]=\"'basic'\"\n [disabled]=\"!isTodaySelectable\"\n (click)=\"selectToday(); input.blur()\"\n type=\"button\"\n >\n Today\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-xlarge)}.buttons{padding:0 var(--size-xlarge) var(--size-xlarge);display:flex;justify-content:space-between}.buttons .today{margin-left:auto}\n"] }]
|
|
4155
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { min: [{
|
|
4055
4156
|
type: Input
|
|
4056
4157
|
}], max: [{
|
|
4057
4158
|
type: Input
|
|
@@ -4065,6 +4166,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4065
4166
|
type: Input
|
|
4066
4167
|
}], showClearButton: [{
|
|
4067
4168
|
type: Input
|
|
4169
|
+
}], showTodayButton: [{
|
|
4170
|
+
type: Input
|
|
4068
4171
|
}], headerTemplate: [{
|
|
4069
4172
|
type: ContentChild,
|
|
4070
4173
|
args: ['header']
|
|
@@ -4072,6 +4175,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4072
4175
|
type: Input
|
|
4073
4176
|
}], valueChange: [{
|
|
4074
4177
|
type: Output
|
|
4178
|
+
}], onDocumentMouseDown: [{
|
|
4179
|
+
type: HostListener,
|
|
4180
|
+
args: ['document:mousedown', ['$event.target']]
|
|
4075
4181
|
}] } });
|
|
4076
4182
|
(function (DateComponent) {
|
|
4077
4183
|
DateComponent.Sizes = [
|
|
@@ -4081,6 +4187,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4081
4187
|
'large',
|
|
4082
4188
|
'xlarge',
|
|
4083
4189
|
];
|
|
4190
|
+
// Accepts MM/DD/YYYY, M/D/YY, and YYYY-MM-DD with /, -, or . separators.
|
|
4191
|
+
// A 4-digit leading segment is treated as year.
|
|
4192
|
+
function parseDate(input) {
|
|
4193
|
+
const parts = input.trim().split(/[/.-]/);
|
|
4194
|
+
if (parts.length !== 3)
|
|
4195
|
+
return undefined;
|
|
4196
|
+
const nums = parts.map(p => parseInt(p, 10));
|
|
4197
|
+
if (nums.some(isNaN))
|
|
4198
|
+
return undefined;
|
|
4199
|
+
let [year, month, day] = parts[0].length === 4 ? nums : [nums[2], nums[0], nums[1]];
|
|
4200
|
+
if (parts[0].length !== 4 && year < 100)
|
|
4201
|
+
year += year < 50 ? 2000 : 1900;
|
|
4202
|
+
const date = new Date(year, month - 1, day);
|
|
4203
|
+
return date.getFullYear() === year &&
|
|
4204
|
+
date.getMonth() === month - 1 &&
|
|
4205
|
+
date.getDate() === day
|
|
4206
|
+
? date
|
|
4207
|
+
: undefined;
|
|
4208
|
+
}
|
|
4209
|
+
DateComponent.parseDate = parseDate;
|
|
4210
|
+
function isValidDate(date, min, max) {
|
|
4211
|
+
const time = date.getTime();
|
|
4212
|
+
return time >= min.getTime() && time <= max.getTime();
|
|
4213
|
+
}
|
|
4214
|
+
DateComponent.isValidDate = isValidDate;
|
|
4084
4215
|
})(DateComponent || (DateComponent = {}));
|
|
4085
4216
|
|
|
4086
4217
|
const ZWS = '';
|
|
@@ -6309,10 +6440,10 @@ class BannerComponent {
|
|
|
6309
6440
|
}
|
|
6310
6441
|
}
|
|
6311
6442
|
BannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6312
|
-
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)
|
|
6443
|
+
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 });
|
|
6313
6444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BannerComponent, decorators: [{
|
|
6314
6445
|
type: Component,
|
|
6315
|
-
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)
|
|
6446
|
+
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"] }]
|
|
6316
6447
|
}], propDecorators: { variant: [{
|
|
6317
6448
|
type: Input
|
|
6318
6449
|
}, {
|
|
@@ -8142,10 +8273,10 @@ class TableSearchColumnsComponent {
|
|
|
8142
8273
|
}
|
|
8143
8274
|
}
|
|
8144
8275
|
TableSearchColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableSearchColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8145
|
-
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 });
|
|
8276
|
+
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 });
|
|
8146
8277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableSearchColumnsComponent, decorators: [{
|
|
8147
8278
|
type: Component,
|
|
8148
|
-
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"] }]
|
|
8279
|
+
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"] }]
|
|
8149
8280
|
}], propDecorators: { manager: [{
|
|
8150
8281
|
type: Input
|
|
8151
8282
|
}], disabled: [{
|