@rivet-health/design-system 6.2.2 → 7.0.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/card-checkbox/card-checkbox.component.mjs +3 -3
- package/esm2020/lib/input/checkbox/checkbox.component.mjs +3 -15
- package/esm2020/lib/input/switch-checkbox/switch-checkbox.component.mjs +3 -3
- package/fesm2015/rivet-health-design-system.mjs +6 -18
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +6 -18
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/input/checkbox/checkbox.component.d.ts +1 -5
- package/package.json +1 -1
|
@@ -1171,8 +1171,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1171
1171
|
class CheckboxComponent {
|
|
1172
1172
|
constructor() {
|
|
1173
1173
|
this.value = false;
|
|
1174
|
-
this.checkedColorToken = '--purp-60';
|
|
1175
|
-
this.indeterminateColorToken = '--baloo-50';
|
|
1176
1174
|
this.indeterminate = false;
|
|
1177
1175
|
this.disabled = false;
|
|
1178
1176
|
this.required = false;
|
|
@@ -1194,28 +1192,18 @@ class CheckboxComponent {
|
|
|
1194
1192
|
isCheckboxOnly() {
|
|
1195
1193
|
return !this.label || this.label.nativeElement.childNodes.length === 1;
|
|
1196
1194
|
}
|
|
1197
|
-
getCheckedBackgroundColor() {
|
|
1198
|
-
return `var(${this.checkedColorToken})`;
|
|
1199
|
-
}
|
|
1200
|
-
getIndeterminateBackgroundColor() {
|
|
1201
|
-
return `var(${this.indeterminateColorToken})`;
|
|
1202
|
-
}
|
|
1203
1195
|
}
|
|
1204
1196
|
CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1205
|
-
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CheckboxComponent, selector: "riv-checkbox", inputs: { name: "name", identifier: "identifier", value: "value",
|
|
1197
|
+
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CheckboxComponent, selector: "riv-checkbox", inputs: { name: "name", identifier: "identifier", value: "value", checkboxTooltip: "checkboxTooltip", indeterminate: "indeterminate", disabled: "disabled", required: "required" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], 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 [checked]=\"value\"\n [indeterminate]=\"indeterminate\"\n (change)=\"emit(!!input.checked)\"\n [rivTooltip]=\"checkboxTooltip\"\n />\n <ng-content></ng-content>\n</label>\n", styles: [":host{display:inline-flex}label{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:center}label.has-content{padding:var(--size-xsmall) var(--size-small);border-radius:var(--border-radius-xsmall)}label.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}input{--size: calc(var(--base-grid-size) * 4);margin:0;width:var(--size);height:var(--size);position:relative;cursor:pointer;flex-shrink:0}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-blend);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(--purp-60)}input:indeterminate:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPg==);background-color:var(--baloo-50)}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)}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1206
1198
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1207
1199
|
type: Component,
|
|
1208
|
-
args: [{ selector: 'riv-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, 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 [checked]=\"value\"\n [indeterminate]=\"indeterminate\"\n (change)=\"emit(!!input.checked)\"\n [
|
|
1200
|
+
args: [{ selector: 'riv-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, 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 [checked]=\"value\"\n [indeterminate]=\"indeterminate\"\n (change)=\"emit(!!input.checked)\"\n [rivTooltip]=\"checkboxTooltip\"\n />\n <ng-content></ng-content>\n</label>\n", styles: [":host{display:inline-flex}label{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:center}label.has-content{padding:var(--size-xsmall) var(--size-small);border-radius:var(--border-radius-xsmall)}label.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}input{--size: calc(var(--base-grid-size) * 4);margin:0;width:var(--size);height:var(--size);position:relative;cursor:pointer;flex-shrink:0}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-blend);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(--purp-60)}input:indeterminate:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPg==);background-color:var(--baloo-50)}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)}\n"] }]
|
|
1209
1201
|
}], propDecorators: { name: [{
|
|
1210
1202
|
type: Input
|
|
1211
1203
|
}], identifier: [{
|
|
1212
1204
|
type: Input
|
|
1213
1205
|
}], value: [{
|
|
1214
1206
|
type: Input
|
|
1215
|
-
}], checkedColorToken: [{
|
|
1216
|
-
type: Input
|
|
1217
|
-
}], indeterminateColorToken: [{
|
|
1218
|
-
type: Input
|
|
1219
1207
|
}], checkboxTooltip: [{
|
|
1220
1208
|
type: Input
|
|
1221
1209
|
}], indeterminate: [{
|
|
@@ -1237,10 +1225,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1237
1225
|
class CardCheckboxComponent extends CheckboxComponent {
|
|
1238
1226
|
}
|
|
1239
1227
|
CardCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CardCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1240
|
-
CardCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CardCheckboxComponent, 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
|
|
1228
|
+
CardCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CardCheckboxComponent, 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 (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-blend)}label:not(.disabled){cursor:pointer}label.disabled,label:hover{background-color:var(--surface-light-1)}.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-blend)}.checkbox.checked{background-color:var(--purp-60)}.checkbox.indeterminate{background-color:var(--baloo-50)}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", type: CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkboxTooltip", "indeterminate", "disabled", "required"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1241
1229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CardCheckboxComponent, decorators: [{
|
|
1242
1230
|
type: Component,
|
|
1243
|
-
args: [{ selector: 'riv-card-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [class.disabled]=\"disabled\">\n <div\n class=\"checkbox\"\n [class.checked]=\"value\"\n [class.indeterminate]=\"indeterminate\"\n
|
|
1231
|
+
args: [{ selector: 'riv-card-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, 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 (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-blend)}label:not(.disabled){cursor:pointer}label.disabled,label:hover{background-color:var(--surface-light-1)}.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-blend)}.checkbox.checked{background-color:var(--purp-60)}.checkbox.indeterminate{background-color:var(--baloo-50)}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"] }]
|
|
1244
1232
|
}] });
|
|
1245
1233
|
|
|
1246
1234
|
/**
|
|
@@ -2248,10 +2236,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2248
2236
|
class SwitchCheckboxComponent extends CheckboxComponent {
|
|
2249
2237
|
}
|
|
2250
2238
|
SwitchCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SwitchCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2251
|
-
SwitchCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SwitchCheckboxComponent, selector: "riv-switch-checkbox", usesInheritance: true, ngImport: i0, template: "<label
|
|
2239
|
+
SwitchCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SwitchCheckboxComponent, selector: "riv-switch-checkbox", usesInheritance: true, ngImport: i0, template: "<label [class.checked]=\"value\" [class.disabled]=\"disabled\">\n <input\n #input\n type=\"checkbox\"\n [name]=\"name\"\n [id]=\"identifier\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"valueChange.emit(!!input.checked)\"\n />\n <ng-content></ng-content>\n</label>\n", styles: [":host{display:inline-flex}label{position:relative;flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:center;--slide-width: calc(var(--base-grid-size) * 12);--switch-size: calc(var(--base-grid-size) * 6);--transition-params: .15s cubic-bezier(.52, .19, .98, .43);cursor:pointer}label:before{content:\"\";display:inline-block;box-sizing:border-box;width:var(--slide-width);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--switch-size);transition:background-color var(--transition-params)}label.disabled:before{background-color:var(--black-20)}label.checked:before{background-color:var(--purp-60)}label.disabled.checked:before{background-color:var(--black-60)}label:after{content:\"\";position:absolute;width:var(--switch-size);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light-blend);border-radius:100%;box-shadow:var(--depth-1);transition:transform var(--transition-params)}label.checked:after{transform:translate(calc(var(--slide-width) - var(--switch-size)))}input{position:absolute;opacity:0;z-index:-1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2252
2240
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SwitchCheckboxComponent, decorators: [{
|
|
2253
2241
|
type: Component,
|
|
2254
|
-
args: [{ selector: 'riv-switch-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label
|
|
2242
|
+
args: [{ selector: 'riv-switch-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [class.checked]=\"value\" [class.disabled]=\"disabled\">\n <input\n #input\n type=\"checkbox\"\n [name]=\"name\"\n [id]=\"identifier\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"valueChange.emit(!!input.checked)\"\n />\n <ng-content></ng-content>\n</label>\n", styles: [":host{display:inline-flex}label{position:relative;flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:center;--slide-width: calc(var(--base-grid-size) * 12);--switch-size: calc(var(--base-grid-size) * 6);--transition-params: .15s cubic-bezier(.52, .19, .98, .43);cursor:pointer}label:before{content:\"\";display:inline-block;box-sizing:border-box;width:var(--slide-width);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--switch-size);transition:background-color var(--transition-params)}label.disabled:before{background-color:var(--black-20)}label.checked:before{background-color:var(--purp-60)}label.disabled.checked:before{background-color:var(--black-60)}label:after{content:\"\";position:absolute;width:var(--switch-size);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light-blend);border-radius:100%;box-shadow:var(--depth-1);transition:transform var(--transition-params)}label.checked:after{transform:translate(calc(var(--slide-width) - var(--switch-size)))}input{position:absolute;opacity:0;z-index:-1}\n"] }]
|
|
2255
2243
|
}] });
|
|
2256
2244
|
|
|
2257
2245
|
class CalloutService {
|