@rivet-health/design-system 28.2.1 → 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/fesm2015/rivet-health-design-system.mjs +17 -3
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +16 -3
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/overlay/callout/callout.component.d.ts +2 -0
- package/package.json +1 -1
|
@@ -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: [{
|