@rivet-health/design-system 41.1.1 → 41.1.3

package/fesm2022/rivet-health-design-system.mjs

@@ -651,8 +651,9 @@ i0.ɵɵngDeclareClassMetadata({
 	}]
 });
 var LockScrollDirective = class LockScrollDirective {
-	constructor(context) {
+	constructor(context, documentRef) {
 		this.context = context;
+		this.documentRef = documentRef;
 		this.lock = false;
 	}
 	ngOnInit() {
@@ -670,16 +671,20 @@ var LockScrollDirective = class LockScrollDirective {
 		}
 	}
 	lockScroll() {
-		this.context.scrollPosition = document.documentElement.scrollTop;
-		document.body.style.position = "fixed";
-		document.body.style.overflow = "hidden";
-		document.body.style.width = "100%";
-		document.body.style.height = "100%";
-		document.body.style.top = `${this.context.scrollPosition * -1}px`;
+		const body = this.documentRef.body;
+		if (!body) return;
+		this.context.scrollPosition = this.documentRef.documentElement.scrollTop;
+		body.style.position = "fixed";
+		body.style.overflow = "hidden";
+		body.style.width = "100%";
+		body.style.height = "100%";
+		body.style.top = `${this.context.scrollPosition * -1}px`;
 	}
 	unlockScroll() {
-		document.body.removeAttribute("style");
-		document.documentElement.scrollTop = this.context.scrollPosition;
+		const body = this.documentRef.body;
+		if (!body) return;
+		body.removeAttribute("style");
+		this.documentRef.documentElement.scrollTop = this.context.scrollPosition;
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -687,7 +692,7 @@ var LockScrollDirective = class LockScrollDirective {
 			version: "22.2.4",
 			ngImport: i0,
 			type: LockScrollDirective,
-			deps: [{ token: LockScrollContextService }],
+			deps: [{ token: LockScrollContextService }, { token: DOCUMENT }],
 			target: i0.ɵɵFactoryTarget.Directive
 		});
 	}
@@ -715,7 +720,13 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: false
 		}]
 	}],
-	ctorParameters: () => [{ type: LockScrollContextService }],
+	ctorParameters: () => [{ type: LockScrollContextService }, {
+		type: Document,
+		decorators: [{
+			type: Inject,
+			args: [DOCUMENT]
+		}]
+	}],
 	propDecorators: { lock: [{
 		type: Input,
 		args: ["rivLockScroll"]
@@ -2869,7 +2880,7 @@ var CheckboxComponent = class CheckboxComponent {
 			}],
 			usesOnChanges: true,
 			ngImport: i0,
-			template: "<label\n  #label\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isCheckboxOnly()\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [checked]=\"value\"\n    [indeterminate]=\"indeterminate\"\n    [class.error]=\"state === 'error'\"\n    (change)=\"emit(!!input.checked)\"\n    [style.--checked-background-color]=\"getCheckedBackgroundColor()\"\n    [style.--indeterminate-background-color]=\"getIndeterminateBackgroundColor()\"\n    [rivTooltip]=\"checkboxTooltip\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n  />\n  <ng-content></ng-content>\n</label>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  class=\"error-message\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n",
+			template: "<label\n  #label\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isCheckboxOnly()\"\n  [rivTooltip]=\"checkboxTooltip\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [checked]=\"value\"\n    [indeterminate]=\"indeterminate\"\n    [class.error]=\"state === 'error'\"\n    (change)=\"emit(!!input.checked)\"\n    [style.--checked-background-color]=\"getCheckedBackgroundColor()\"\n    [style.--indeterminate-background-color]=\"getIndeterminateBackgroundColor()\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n  />\n  <ng-content></ng-content>\n</label>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  class=\"error-message\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n",
 			styles: [":host{display:inline-flex;flex-direction:column}label{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}label.has-content{padding:var(--size-xsmall) var(--size-small);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}label.has-content input{margin:var(--size-xsmall) 0 0 0}label.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}label.has-content:active:not(.disabled){background-color:var(--surface-light-3)}input{--size: calc(var(--base-grid-size) * 4);margin:0;width:var(--size);height:var(--size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);background-color:var(--surface-light-0)}input:after{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);border:var(--border-width) solid var(--border-light);background-repeat:no-repeat;background-position:center center;background-color:var(--surface-light-0)}input:checked:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgZD0iTTMuNSw3LjUgbDMsMyBsNiwtNiIgZmlsbD0ibm9uZSIgLz48L3N2Zz4=);background-color:var(--checked-background-color)}input:indeterminate:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPg==);background-color:var(--indeterminate-background-color)}input.error:after{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.error-message{margin-left:calc(var(--base-grid-size) * 8)}\n"],
 			dependencies: [
 				{
@@ -2919,7 +2930,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "riv-checkbox",
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			standalone: false,
-			template: "<label\n  #label\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isCheckboxOnly()\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [checked]=\"value\"\n    [indeterminate]=\"indeterminate\"\n    [class.error]=\"state === 'error'\"\n    (change)=\"emit(!!input.checked)\"\n    [style.--checked-background-color]=\"getCheckedBackgroundColor()\"\n    [style.--indeterminate-background-color]=\"getIndeterminateBackgroundColor()\"\n    [rivTooltip]=\"checkboxTooltip\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n  />\n  <ng-content></ng-content>\n</label>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  class=\"error-message\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n",
+			template: "<label\n  #label\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isCheckboxOnly()\"\n  [rivTooltip]=\"checkboxTooltip\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [checked]=\"value\"\n    [indeterminate]=\"indeterminate\"\n    [class.error]=\"state === 'error'\"\n    (change)=\"emit(!!input.checked)\"\n    [style.--checked-background-color]=\"getCheckedBackgroundColor()\"\n    [style.--indeterminate-background-color]=\"getIndeterminateBackgroundColor()\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n  />\n  <ng-content></ng-content>\n</label>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  class=\"error-message\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n",
 			styles: [":host{display:inline-flex;flex-direction:column}label{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}label.has-content{padding:var(--size-xsmall) var(--size-small);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}label.has-content input{margin:var(--size-xsmall) 0 0 0}label.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}label.has-content:active:not(.disabled){background-color:var(--surface-light-3)}input{--size: calc(var(--base-grid-size) * 4);margin:0;width:var(--size);height:var(--size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);background-color:var(--surface-light-0)}input:after{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);border:var(--border-width) solid var(--border-light);background-repeat:no-repeat;background-position:center center;background-color:var(--surface-light-0)}input:checked:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgZD0iTTMuNSw3LjUgbDMsMyBsNiwtNiIgZmlsbD0ibm9uZSIgLz48L3N2Zz4=);background-color:var(--checked-background-color)}input:indeterminate:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPg==);background-color:var(--indeterminate-background-color)}input.error:after{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.error-message{margin-left:calc(var(--base-grid-size) * 8)}\n"]
 		}]
 	}],
@@ -2967,7 +2978,7 @@ var CardCheckboxComponent = class CardCheckboxComponent extends CheckboxComponen
 			selector: "riv-card-checkbox",
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<label [class.disabled]=\"disabled\">\n  <div\n    class=\"checkbox\"\n    [class.checked]=\"value\"\n    [class.indeterminate]=\"indeterminate\"\n  >\n    <riv-checkbox\n      [name]=\"name\"\n      [identifier]=\"identifier\"\n      [value]=\"value\"\n      [checkboxTooltip]=\"checkboxTooltip\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      [ariaLabel]=\"ariaLabel\"\n      (valueChange)=\"valueChange.emit($event)\"\n    ></riv-checkbox>\n  </div>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</label>\n",
+			template: "<label [class.disabled]=\"disabled\" [rivTooltip]=\"checkboxTooltip\">\n  <div\n    class=\"checkbox\"\n    [class.checked]=\"value\"\n    [class.indeterminate]=\"indeterminate\"\n  >\n    <riv-checkbox\n      [name]=\"name\"\n      [identifier]=\"identifier\"\n      [value]=\"value\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      [ariaLabel]=\"ariaLabel\"\n      (valueChange)=\"valueChange.emit($event)\"\n    ></riv-checkbox>\n  </div>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</label>\n",
 			styles: [":host{display:inline-flex}label{flex-grow:1;display:inline-flex;align-items:center;border:var(--border-width) solid var(--border-light);transition:background-color var(--short-transition)}label:not(.disabled){cursor:pointer}label.disabled{background-color:var(--surface-light-1)}label:hover:not(.disabled){background-color:var(--surface-light-2)}label:active:not(.disabled){background-color:var(--surface-light-3)}.checkbox{align-self:stretch;padding:var(--size-large) var(--size-small);background-color:var(--surface-light-2);display:flex;justify-content:center;align-items:center;border-right:var(--border-width) solid var(--border-light)}.checkbox.checked,.checkbox.indeterminate{background-color:var(--purp-60)}label.disabled .checkbox{background-color:var(--black-20)}label.disabled .checkbox.checked,label.disabled .checkbox.indeterminate{background-color:var(--black-40)}.content{flex-grow:1}\n"],
 			dependencies: [{
 				kind: "component",
@@ -2988,6 +2999,20 @@ var CardCheckboxComponent = class CardCheckboxComponent extends CheckboxComponen
 					"ariaLabel"
 				],
 				outputs: ["valueChange"]
+			}, {
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[rivTooltip]",
+				inputs: [
+					"rivTooltip",
+					"rivTooltipTheme",
+					"rivTooltipMaxWidth",
+					"rivTooltipPreferredPosition",
+					"rivTooltipAnchor",
+					"rivTooltipCloseDelay",
+					"rivTooltipOpenDelay",
+					"rivTooltipGracePeriod"
+				]
 			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
@@ -3004,7 +3029,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "riv-card-checkbox",
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			standalone: false,
-			template: "<label [class.disabled]=\"disabled\">\n  <div\n    class=\"checkbox\"\n    [class.checked]=\"value\"\n    [class.indeterminate]=\"indeterminate\"\n  >\n    <riv-checkbox\n      [name]=\"name\"\n      [identifier]=\"identifier\"\n      [value]=\"value\"\n      [checkboxTooltip]=\"checkboxTooltip\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      [ariaLabel]=\"ariaLabel\"\n      (valueChange)=\"valueChange.emit($event)\"\n    ></riv-checkbox>\n  </div>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</label>\n",
+			template: "<label [class.disabled]=\"disabled\" [rivTooltip]=\"checkboxTooltip\">\n  <div\n    class=\"checkbox\"\n    [class.checked]=\"value\"\n    [class.indeterminate]=\"indeterminate\"\n  >\n    <riv-checkbox\n      [name]=\"name\"\n      [identifier]=\"identifier\"\n      [value]=\"value\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      [ariaLabel]=\"ariaLabel\"\n      (valueChange)=\"valueChange.emit($event)\"\n    ></riv-checkbox>\n  </div>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</label>\n",
 			styles: [":host{display:inline-flex}label{flex-grow:1;display:inline-flex;align-items:center;border:var(--border-width) solid var(--border-light);transition:background-color var(--short-transition)}label:not(.disabled){cursor:pointer}label.disabled{background-color:var(--surface-light-1)}label:hover:not(.disabled){background-color:var(--surface-light-2)}label:active:not(.disabled){background-color:var(--surface-light-3)}.checkbox{align-self:stretch;padding:var(--size-large) var(--size-small);background-color:var(--surface-light-2);display:flex;justify-content:center;align-items:center;border-right:var(--border-width) solid var(--border-light)}.checkbox.checked,.checkbox.indeterminate{background-color:var(--purp-60)}label.disabled .checkbox{background-color:var(--black-20)}label.disabled .checkbox.checked,label.disabled .checkbox.indeterminate{background-color:var(--black-40)}.content{flex-grow:1}\n"]
 		}]
 	}]