@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
|
@@ -4097,28 +4097,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4097
4097
|
})(DateRangeComponent || (DateRangeComponent = {}));
|
|
4098
4098
|
|
|
4099
4099
|
class DateComponent extends InputLabelComponent {
|
|
4100
|
-
constructor() {
|
|
4101
|
-
super(
|
|
4100
|
+
constructor(cdr, host) {
|
|
4101
|
+
super();
|
|
4102
|
+
this.cdr = cdr;
|
|
4103
|
+
this.host = host;
|
|
4102
4104
|
this.min = CalendarComponent.defaultMin;
|
|
4103
4105
|
this.max = CalendarComponent.defaultMax;
|
|
4104
4106
|
this.placeholder = 'Select date';
|
|
4105
4107
|
this.disabled = false;
|
|
4106
4108
|
this.size = 'medium';
|
|
4107
4109
|
this.showClearButton = true;
|
|
4110
|
+
this.showTodayButton = true;
|
|
4108
4111
|
this.activeYearMonth = timeMonth.floor(new Date());
|
|
4109
4112
|
this.open$ = new BehaviorSubject(false);
|
|
4110
4113
|
this.valueChange = new EventEmitter();
|
|
4114
|
+
this.inputText = '';
|
|
4115
|
+
this.hasFocus = false;
|
|
4116
|
+
this.datePipe = new DatePipe();
|
|
4111
4117
|
}
|
|
4112
4118
|
set value(v) {
|
|
4113
4119
|
if (this._value?.getTime() === v?.getTime())
|
|
4114
4120
|
return;
|
|
4115
4121
|
this._value = v;
|
|
4116
|
-
|
|
4117
|
-
|
|
4118
|
-
|
|
4119
|
-
|
|
4120
|
-
|
|
4121
|
-
|
|
4122
|
+
// Skip text sync while typing so we don't stomp the user's in-progress input.
|
|
4123
|
+
if (!this.hasFocus)
|
|
4124
|
+
this.inputText = v ? this.formatValue(v) : '';
|
|
4125
|
+
if (v)
|
|
4126
|
+
this.setActiveMonth(v);
|
|
4127
|
+
this.cdr.markForCheck();
|
|
4122
4128
|
}
|
|
4123
4129
|
get value() {
|
|
4124
4130
|
return this._value;
|
|
@@ -4129,17 +4135,111 @@ class DateComponent extends InputLabelComponent {
|
|
|
4129
4135
|
get open() {
|
|
4130
4136
|
return this.open$.getValue();
|
|
4131
4137
|
}
|
|
4138
|
+
// The callout renders with isModal=false (no full-viewport scrim) and can't
|
|
4139
|
+
// self-close on outside clicks. Any overlay layer — including sibling
|
|
4140
|
+
// overlays like the month/year selects — counts as "inside" the picker.
|
|
4141
|
+
onDocumentMouseDown(target) {
|
|
4142
|
+
if (!this.open$.getValue() || !(target instanceof Element))
|
|
4143
|
+
return;
|
|
4144
|
+
if (this.host.nativeElement.contains(target))
|
|
4145
|
+
return;
|
|
4146
|
+
if (target.closest('.callout, .scrim, .overlay-container'))
|
|
4147
|
+
return;
|
|
4148
|
+
this.open$.next(false);
|
|
4149
|
+
this.cdr.markForCheck();
|
|
4150
|
+
}
|
|
4132
4151
|
clearValue() {
|
|
4133
|
-
this.
|
|
4152
|
+
this.commit(undefined);
|
|
4153
|
+
this.open$.next(false);
|
|
4154
|
+
}
|
|
4155
|
+
selectToday() {
|
|
4156
|
+
const today = timeDay.floor(new Date());
|
|
4157
|
+
if (!DateComponent.isValidDate(today, this.min, this.max))
|
|
4158
|
+
return;
|
|
4159
|
+
this.commit(today);
|
|
4134
4160
|
this.open$.next(false);
|
|
4135
4161
|
}
|
|
4162
|
+
get isTodaySelectable() {
|
|
4163
|
+
return DateComponent.isValidDate(timeDay.floor(new Date()), this.min, this.max);
|
|
4164
|
+
}
|
|
4165
|
+
onInputChange(value) {
|
|
4166
|
+
this.inputText = value;
|
|
4167
|
+
const parsed = this.parseInput(value);
|
|
4168
|
+
this.previewValue = parsed;
|
|
4169
|
+
if (parsed)
|
|
4170
|
+
this.setActiveMonth(parsed);
|
|
4171
|
+
this.cdr.markForCheck();
|
|
4172
|
+
}
|
|
4173
|
+
onInputBlur(event) {
|
|
4174
|
+
this.hasFocus = false;
|
|
4175
|
+
const parsed = this.parseInput(this.inputText);
|
|
4176
|
+
if (parsed) {
|
|
4177
|
+
this.commit(parsed);
|
|
4178
|
+
}
|
|
4179
|
+
else if (!this.inputText.trim()) {
|
|
4180
|
+
this.commit(undefined);
|
|
4181
|
+
}
|
|
4182
|
+
else {
|
|
4183
|
+
// Invalid text — revert to whatever the committed value was.
|
|
4184
|
+
this.inputText = this._value ? this.formatValue(this._value) : '';
|
|
4185
|
+
}
|
|
4186
|
+
this.previewValue = undefined;
|
|
4187
|
+
// Close on keyboard-driven focus changes (Tab out). Stay open if focus
|
|
4188
|
+
// moved into a nested overlay (e.g. the calendar's month/year select).
|
|
4189
|
+
// Mouse clicks inside the calendar preventDefault mousedown so this
|
|
4190
|
+
// handler never runs for them.
|
|
4191
|
+
const nextTarget = event?.relatedTarget;
|
|
4192
|
+
const stayOpen = nextTarget instanceof Element &&
|
|
4193
|
+
(this.host.nativeElement.contains(nextTarget) ||
|
|
4194
|
+
!!nextTarget.closest('.callout, .scrim, .overlay-container'));
|
|
4195
|
+
if (!stayOpen)
|
|
4196
|
+
this.open$.next(false);
|
|
4197
|
+
this.cdr.markForCheck();
|
|
4198
|
+
}
|
|
4199
|
+
onDateSelect(date) {
|
|
4200
|
+
this.commit(timeDay.floor(date));
|
|
4201
|
+
this.open$.next(false);
|
|
4202
|
+
}
|
|
4203
|
+
onInputFocus() {
|
|
4204
|
+
this.hasFocus = true;
|
|
4205
|
+
this.open$.next(true);
|
|
4206
|
+
}
|
|
4207
|
+
toggleCalendar() {
|
|
4208
|
+
this.open$.next(!this.open$.getValue());
|
|
4209
|
+
}
|
|
4210
|
+
formatValue(date) {
|
|
4211
|
+
return this.datePipe.transform(date);
|
|
4212
|
+
}
|
|
4213
|
+
parseInput(text) {
|
|
4214
|
+
const parsed = DateComponent.parseDate(text);
|
|
4215
|
+
return parsed && DateComponent.isValidDate(parsed, this.min, this.max)
|
|
4216
|
+
? timeDay.floor(parsed)
|
|
4217
|
+
: undefined;
|
|
4218
|
+
}
|
|
4219
|
+
setActiveMonth(date) {
|
|
4220
|
+
const month = timeMonth.floor(date);
|
|
4221
|
+
if (month.getTime() !== this.activeYearMonth.getTime()) {
|
|
4222
|
+
this.activeYearMonth = month;
|
|
4223
|
+
}
|
|
4224
|
+
}
|
|
4225
|
+
commit(next) {
|
|
4226
|
+
const unchanged = next?.getTime() === this._value?.getTime();
|
|
4227
|
+
this._value = next;
|
|
4228
|
+
this.inputText = next ? this.formatValue(next) : '';
|
|
4229
|
+
this.previewValue = undefined;
|
|
4230
|
+
if (next)
|
|
4231
|
+
this.setActiveMonth(next);
|
|
4232
|
+
if (!unchanged)
|
|
4233
|
+
this.valueChange.emit(next);
|
|
4234
|
+
this.cdr.markForCheck();
|
|
4235
|
+
}
|
|
4136
4236
|
}
|
|
4137
|
-
DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, deps:
|
|
4138
|
-
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 <
|
|
4237
|
+
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 });
|
|
4238
|
+
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 });
|
|
4139
4239
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
|
|
4140
4240
|
type: Component,
|
|
4141
|
-
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 <
|
|
4142
|
-
}], propDecorators: { min: [{
|
|
4241
|
+
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"] }]
|
|
4242
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { min: [{
|
|
4143
4243
|
type: Input
|
|
4144
4244
|
}], max: [{
|
|
4145
4245
|
type: Input
|
|
@@ -4153,6 +4253,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4153
4253
|
type: Input
|
|
4154
4254
|
}], showClearButton: [{
|
|
4155
4255
|
type: Input
|
|
4256
|
+
}], showTodayButton: [{
|
|
4257
|
+
type: Input
|
|
4156
4258
|
}], headerTemplate: [{
|
|
4157
4259
|
type: ContentChild,
|
|
4158
4260
|
args: ['header']
|
|
@@ -4160,6 +4262,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4160
4262
|
type: Input
|
|
4161
4263
|
}], valueChange: [{
|
|
4162
4264
|
type: Output
|
|
4265
|
+
}], onDocumentMouseDown: [{
|
|
4266
|
+
type: HostListener,
|
|
4267
|
+
args: ['document:mousedown', ['$event.target']]
|
|
4163
4268
|
}] } });
|
|
4164
4269
|
(function (DateComponent) {
|
|
4165
4270
|
DateComponent.Sizes = [
|
|
@@ -4169,6 +4274,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4169
4274
|
'large',
|
|
4170
4275
|
'xlarge',
|
|
4171
4276
|
];
|
|
4277
|
+
// Accepts MM/DD/YYYY, M/D/YY, and YYYY-MM-DD with /, -, or . separators.
|
|
4278
|
+
// A 4-digit leading segment is treated as year.
|
|
4279
|
+
function parseDate(input) {
|
|
4280
|
+
const parts = input.trim().split(/[/.-]/);
|
|
4281
|
+
if (parts.length !== 3)
|
|
4282
|
+
return undefined;
|
|
4283
|
+
const nums = parts.map(p => parseInt(p, 10));
|
|
4284
|
+
if (nums.some(isNaN))
|
|
4285
|
+
return undefined;
|
|
4286
|
+
let [year, month, day] = parts[0].length === 4 ? nums : [nums[2], nums[0], nums[1]];
|
|
4287
|
+
if (parts[0].length !== 4 && year < 100)
|
|
4288
|
+
year += year < 50 ? 2000 : 1900;
|
|
4289
|
+
const date = new Date(year, month - 1, day);
|
|
4290
|
+
return date.getFullYear() === year &&
|
|
4291
|
+
date.getMonth() === month - 1 &&
|
|
4292
|
+
date.getDate() === day
|
|
4293
|
+
? date
|
|
4294
|
+
: undefined;
|
|
4295
|
+
}
|
|
4296
|
+
DateComponent.parseDate = parseDate;
|
|
4297
|
+
function isValidDate(date, min, max) {
|
|
4298
|
+
const time = date.getTime();
|
|
4299
|
+
return time >= min.getTime() && time <= max.getTime();
|
|
4300
|
+
}
|
|
4301
|
+
DateComponent.isValidDate = isValidDate;
|
|
4172
4302
|
})(DateComponent || (DateComponent = {}));
|
|
4173
4303
|
|
|
4174
4304
|
const ZWS = '';
|
|
@@ -6484,10 +6614,10 @@ class BannerComponent {
|
|
|
6484
6614
|
}
|
|
6485
6615
|
}
|
|
6486
6616
|
BannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6487
|
-
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)
|
|
6617
|
+
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 });
|
|
6488
6618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BannerComponent, decorators: [{
|
|
6489
6619
|
type: Component,
|
|
6490
|
-
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)
|
|
6620
|
+
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"] }]
|
|
6491
6621
|
}], propDecorators: { variant: [{
|
|
6492
6622
|
type: Input
|
|
6493
6623
|
}, {
|
|
@@ -8637,10 +8767,10 @@ class TableSearchColumnsComponent {
|
|
|
8637
8767
|
}
|
|
8638
8768
|
}
|
|
8639
8769
|
TableSearchColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableSearchColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8640
|
-
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 });
|
|
8770
|
+
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 });
|
|
8641
8771
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableSearchColumnsComponent, decorators: [{
|
|
8642
8772
|
type: Component,
|
|
8643
|
-
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"] }]
|
|
8773
|
+
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"] }]
|
|
8644
8774
|
}], propDecorators: { manager: [{
|
|
8645
8775
|
type: Input
|
|
8646
8776
|
}], disabled: [{
|