@rivet-health/design-system 28.2.0 → 28.2.2
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/overlay/callout/callout.component.mjs +17 -4
- package/esm2020/lib/riv.module.mjs +6 -1
- package/esm2020/lib/visibility/visibility.directive.mjs +34 -0
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/rivet-health-design-system.mjs +54 -4
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +53 -4
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/overlay/callout/callout.component.d.ts +2 -0
- package/lib/riv.module.d.ts +5 -4
- package/lib/visibility/visibility.directive.d.ts +12 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -396,15 +396,28 @@ class CalloutComponent {
|
|
|
396
396
|
this.theme = 'dark';
|
|
397
397
|
this.content = null;
|
|
398
398
|
this.scrim = null;
|
|
399
|
+
this.mouseDownInsideContent = false;
|
|
399
400
|
this.left = 0;
|
|
400
401
|
this.top = 0;
|
|
401
402
|
this.resolvedPosition = this.preferredPosition;
|
|
402
403
|
this.close = new EventEmitter();
|
|
403
404
|
}
|
|
405
|
+
scrimMouseDown(evt) {
|
|
406
|
+
this.mouseDownInsideContent =
|
|
407
|
+
this.content?.nativeElement.contains(evt.target) ?? false;
|
|
408
|
+
}
|
|
404
409
|
scrimClick(evt) {
|
|
405
|
-
|
|
410
|
+
// A click always starts with a mousedown. If a user mouse downs inside the
|
|
411
|
+
// content and then drags to the scrim, this will trigger a click on the scrim.
|
|
412
|
+
// This can happen if the user selects text and drags too far, leading to a
|
|
413
|
+
// bad experience. To prevent that, we track if the mousedown started inside
|
|
414
|
+
// the content. If it did, we ignore the click on the scrim. If it didn't,
|
|
415
|
+
// we allow the click to close the callout.
|
|
416
|
+
if (evt.target === evt.currentTarget && !this.mouseDownInsideContent) {
|
|
406
417
|
this.close.emit();
|
|
407
418
|
}
|
|
419
|
+
// always reset the flag after a click
|
|
420
|
+
this.mouseDownInsideContent = false;
|
|
408
421
|
}
|
|
409
422
|
ngAfterViewInit() {
|
|
410
423
|
this.setPosition();
|
|
@@ -444,10 +457,10 @@ class CalloutComponent {
|
|
|
444
457
|
}
|
|
445
458
|
}
|
|
446
459
|
CalloutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalloutComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
447
|
-
CalloutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalloutComponent, selector: "riv-callout", inputs: { anchor: "anchor", isModal: "isModal", preferredPosition: "preferredPosition", allowedPositions: "allowedPositions", fallbackDirection: "fallbackDirection", showCaret: "showCaret", theme: "theme" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "scrim", first: true, predicate: ["scrim"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div
|
|
460
|
+
CalloutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalloutComponent, selector: "riv-callout", inputs: { anchor: "anchor", isModal: "isModal", preferredPosition: "preferredPosition", allowedPositions: "allowedPositions", fallbackDirection: "fallbackDirection", showCaret: "showCaret", theme: "theme" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "scrim", first: true, predicate: ["scrim"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #scrim\n class=\"scrim\"\n [class.full]=\"isModal\"\n (click)=\"scrimClick($event)\"\n (mousedown)=\"scrimMouseDown($event)\"\n>\n <div\n class=\"callout\"\n (rivClientSize)=\"onContentSizeChanges()\"\n [ngClass]=\"[theme, resolvedPosition]\"\n [class.caret]=\"showCaret\"\n [style.left.px]=\"left\"\n [style.top.px]=\"top\"\n [rivLockScroll]=\"isModal\"\n #content\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.right-top:after{top:var(--size-large);left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.right-bottom:after{left:0;bottom:var(--size-large);transform:translate(-50%,50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.left-bottom:after{right:0;bottom:var(--size-large);transform:translate(50%,50%) rotate(225deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}.callout.caret.left-top:after{top:var(--size-large);right:0;transform:translate(50%,-50%) rotate(225deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: LockScrollDirective, selector: "[rivLockScroll]", inputs: ["rivLockScroll"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
448
461
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalloutComponent, decorators: [{
|
|
449
462
|
type: Component,
|
|
450
|
-
args: [{ selector: 'riv-callout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
463
|
+
args: [{ selector: 'riv-callout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #scrim\n class=\"scrim\"\n [class.full]=\"isModal\"\n (click)=\"scrimClick($event)\"\n (mousedown)=\"scrimMouseDown($event)\"\n>\n <div\n class=\"callout\"\n (rivClientSize)=\"onContentSizeChanges()\"\n [ngClass]=\"[theme, resolvedPosition]\"\n [class.caret]=\"showCaret\"\n [style.left.px]=\"left\"\n [style.top.px]=\"top\"\n [rivLockScroll]=\"isModal\"\n #content\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.right-top:after{top:var(--size-large);left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.right-bottom:after{left:0;bottom:var(--size-large);transform:translate(-50%,50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.left-bottom:after{right:0;bottom:var(--size-large);transform:translate(50%,50%) rotate(225deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}.callout.caret.left-top:after{top:var(--size-large);right:0;transform:translate(50%,-50%) rotate(225deg)}\n"] }]
|
|
451
464
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { anchor: [{
|
|
452
465
|
type: Input
|
|
453
466
|
}], isModal: [{
|
|
@@ -8451,6 +8464,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
8451
8464
|
type: Output
|
|
8452
8465
|
}] } });
|
|
8453
8466
|
|
|
8467
|
+
class VisibilityDirective {
|
|
8468
|
+
constructor(elementRef, zone) {
|
|
8469
|
+
this.elementRef = elementRef;
|
|
8470
|
+
this.rivVisibility = new EventEmitter();
|
|
8471
|
+
this.intersectionObserver = new IntersectionObserver(entries => {
|
|
8472
|
+
zone.run(() => {
|
|
8473
|
+
for (const entry of entries) {
|
|
8474
|
+
this.rivVisibility.emit(entry.isIntersecting);
|
|
8475
|
+
}
|
|
8476
|
+
});
|
|
8477
|
+
}, {
|
|
8478
|
+
threshold: 0.1,
|
|
8479
|
+
});
|
|
8480
|
+
}
|
|
8481
|
+
ngOnInit() {
|
|
8482
|
+
this.intersectionObserver.observe(this.elementRef.nativeElement);
|
|
8483
|
+
}
|
|
8484
|
+
ngOnDestroy() {
|
|
8485
|
+
this.intersectionObserver.unobserve(this.elementRef.nativeElement);
|
|
8486
|
+
}
|
|
8487
|
+
}
|
|
8488
|
+
VisibilityDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VisibilityDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
8489
|
+
VisibilityDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: VisibilityDirective, selector: "[rivVisibility]", outputs: { rivVisibility: "rivVisibility" }, ngImport: i0 });
|
|
8490
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VisibilityDirective, decorators: [{
|
|
8491
|
+
type: Directive,
|
|
8492
|
+
args: [{
|
|
8493
|
+
selector: '[rivVisibility]',
|
|
8494
|
+
}]
|
|
8495
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { rivVisibility: [{
|
|
8496
|
+
type: Output
|
|
8497
|
+
}] } });
|
|
8498
|
+
|
|
8454
8499
|
class RivModule {
|
|
8455
8500
|
}
|
|
8456
8501
|
RivModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -8542,6 +8587,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
|
8542
8587
|
TruncateComponent,
|
|
8543
8588
|
ViewMenuComponent,
|
|
8544
8589
|
ViewsComponent,
|
|
8590
|
+
VisibilityDirective,
|
|
8545
8591
|
ZeroStateComponent], imports: [CommonModule, RouterModule], exports: [AllViewsModalComponent,
|
|
8546
8592
|
AlphabeticFieldComponent,
|
|
8547
8593
|
AutoFocusDirective,
|
|
@@ -8626,6 +8672,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
|
8626
8672
|
TruncateComponent,
|
|
8627
8673
|
ViewMenuComponent,
|
|
8628
8674
|
ViewsComponent,
|
|
8675
|
+
VisibilityDirective,
|
|
8629
8676
|
ZeroStateComponent] });
|
|
8630
8677
|
RivModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, imports: [CommonModule, RouterModule] });
|
|
8631
8678
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, decorators: [{
|
|
@@ -8720,6 +8767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
8720
8767
|
TruncateComponent,
|
|
8721
8768
|
ViewMenuComponent,
|
|
8722
8769
|
ViewsComponent,
|
|
8770
|
+
VisibilityDirective,
|
|
8723
8771
|
ZeroStateComponent,
|
|
8724
8772
|
],
|
|
8725
8773
|
exports: [
|
|
@@ -8807,6 +8855,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
8807
8855
|
TruncateComponent,
|
|
8808
8856
|
ViewMenuComponent,
|
|
8809
8857
|
ViewsComponent,
|
|
8858
|
+
VisibilityDirective,
|
|
8810
8859
|
ZeroStateComponent,
|
|
8811
8860
|
],
|
|
8812
8861
|
imports: [CommonModule, RouterModule],
|
|
@@ -8817,5 +8866,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
8817
8866
|
* Generated bundle index. Do not edit.
|
|
8818
8867
|
*/
|
|
8819
8868
|
|
|
8820
|
-
export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardCheckboxComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MenuComponent, MenuDividerComponent, MenuItemComponent, MetricComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PercentageFieldComponent, PercentagePipe, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SelectComponent, SelectNodeComponent, SideSheetComponent, SimpleSelectComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SizeDirective, SmallCurrencyPipe, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ViewMenuComponent, ViewsComponent, ZeroStateComponent };
|
|
8869
|
+
export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardCheckboxComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MenuComponent, MenuDividerComponent, MenuItemComponent, MetricComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PercentageFieldComponent, PercentagePipe, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SelectComponent, SelectNodeComponent, SideSheetComponent, SimpleSelectComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SizeDirective, SmallCurrencyPipe, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ViewMenuComponent, ViewsComponent, VisibilityDirective, ZeroStateComponent };
|
|
8821
8870
|
//# sourceMappingURL=rivet-health-design-system.mjs.map
|