@rivet-health/design-system 6.2.1 → 6.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/input/checkbox/checkbox.component.mjs +19 -3
- package/fesm2015/rivet-health-design-system.mjs +18 -2
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +18 -2
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/input/checkbox/checkbox.component.d.ts +6 -2
- package/package.json +1 -1
|
@@ -11,6 +11,19 @@ export class CheckboxComponent {
|
|
|
11
11
|
this.required = false;
|
|
12
12
|
this.valueChange = new EventEmitter();
|
|
13
13
|
}
|
|
14
|
+
emit(v) {
|
|
15
|
+
this.valueChange.emit(v);
|
|
16
|
+
this.ensureSynchronizedState(this.value);
|
|
17
|
+
}
|
|
18
|
+
ensureSynchronizedState(v) {
|
|
19
|
+
if (this.input) {
|
|
20
|
+
this.input.nativeElement.checked = v;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
ngOnChanges(changes) {
|
|
24
|
+
if ('value' in changes)
|
|
25
|
+
this.ensureSynchronizedState(changes['value'].currentValue);
|
|
26
|
+
}
|
|
14
27
|
isCheckboxOnly() {
|
|
15
28
|
return !this.label || this.label.nativeElement.childNodes.length === 1;
|
|
16
29
|
}
|
|
@@ -22,10 +35,10 @@ export class CheckboxComponent {
|
|
|
22
35
|
}
|
|
23
36
|
}
|
|
24
37
|
CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
-
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CheckboxComponent, selector: "riv-checkbox", inputs: { name: "name", identifier: "identifier", value: "value", checkedColorToken: "checkedColorToken", indeterminateColorToken: "indeterminateColorToken", checkboxTooltip: "checkboxTooltip", indeterminate: "indeterminate", disabled: "disabled", required: "required" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, static: 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)=\"
|
|
38
|
+
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CheckboxComponent, selector: "riv-checkbox", inputs: { name: "name", identifier: "identifier", value: "value", checkedColorToken: "checkedColorToken", indeterminateColorToken: "indeterminateColorToken", 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 [style.--checked-background-color]=\"getCheckedBackgroundColor()\"\n [style.--indeterminate-background-color]=\"getIndeterminateBackgroundColor()\"\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(--checked-background-color)}input:indeterminate:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPg==);background-color:var(--indeterminate-background-color)}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: i1.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
26
39
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
27
40
|
type: Component,
|
|
28
|
-
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)=\"
|
|
41
|
+
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 [style.--checked-background-color]=\"getCheckedBackgroundColor()\"\n [style.--indeterminate-background-color]=\"getIndeterminateBackgroundColor()\"\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(--checked-background-color)}input:indeterminate:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPg==);background-color:var(--indeterminate-background-color)}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"] }]
|
|
29
42
|
}], propDecorators: { name: [{
|
|
30
43
|
type: Input
|
|
31
44
|
}], identifier: [{
|
|
@@ -49,5 +62,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
49
62
|
}], label: [{
|
|
50
63
|
type: ViewChild,
|
|
51
64
|
args: ['label', { static: true }]
|
|
65
|
+
}], input: [{
|
|
66
|
+
type: ViewChild,
|
|
67
|
+
args: ['input', { static: true }]
|
|
52
68
|
}] } });
|
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
69
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvaW5wdXQvY2hlY2tib3gvY2hlY2tib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvaW5wdXQvY2hlY2tib3gvY2hlY2tib3guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBRVQsWUFBWSxFQUNaLEtBQUssRUFFTCxNQUFNLEVBRU4sU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDOzs7QUFRdkIsTUFBTSxPQUFPLGlCQUFpQjtJQU45QjtRQWNFLFVBQUssR0FBWSxLQUFLLENBQUM7UUFHdkIsc0JBQWlCLEdBQVcsV0FBVyxDQUFDO1FBR3hDLDRCQUF1QixHQUFXLFlBQVksQ0FBQztRQU0vQyxrQkFBYSxHQUFZLEtBQUssQ0FBQztRQUcvQixhQUFRLEdBQVksS0FBSyxDQUFDO1FBRzFCLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFHMUIsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO0tBaUMzQztJQS9CQyxJQUFJLENBQUMsQ0FBVTtRQUNiLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3pCLElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDM0MsQ0FBQztJQU1ELHVCQUF1QixDQUFDLENBQVU7UUFDaEMsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ2QsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsT0FBTyxHQUFHLENBQUMsQ0FBQztTQUN0QztJQUNILENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLElBQUksT0FBTztZQUNwQixJQUFJLENBQUMsdUJBQXVCLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQ2hFLENBQUM7SUFFRCxjQUFjO1FBQ1osT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsVUFBVSxDQUFDLE1BQU0sS0FBSyxDQUFDLENBQUM7SUFDekUsQ0FBQztJQUVELHlCQUF5QjtRQUN2QixPQUFPLE9BQU8sSUFBSSxDQUFDLGlCQUFpQixHQUFHLENBQUM7SUFDMUMsQ0FBQztJQUVELCtCQUErQjtRQUM3QixPQUFPLE9BQU8sSUFBSSxDQUFDLHVCQUF1QixHQUFHLENBQUM7SUFDaEQsQ0FBQzs7OEdBN0RVLGlCQUFpQjtrR0FBakIsaUJBQWlCLCtrQkNsQjlCLGlsQkFxQkE7MkZESGEsaUJBQWlCO2tCQU43QixTQUFTOytCQUNFLGNBQWMsbUJBR1AsdUJBQXVCLENBQUMsTUFBTTs4QkFJL0MsSUFBSTtzQkFESCxLQUFLO2dCQUlOLFVBQVU7c0JBRFQsS0FBSztnQkFJTixLQUFLO3NCQURKLEtBQUs7Z0JBSU4saUJBQWlCO3NCQURoQixLQUFLO2dCQUlOLHVCQUF1QjtzQkFEdEIsS0FBSztnQkFJTixlQUFlO3NCQURkLEtBQUs7Z0JBSU4sYUFBYTtzQkFEWixLQUFLO2dCQUlOLFFBQVE7c0JBRFAsS0FBSztnQkFJTixRQUFRO3NCQURQLEtBQUs7Z0JBSU4sV0FBVztzQkFEVixNQUFNO2dCQVErQixLQUFLO3NCQUExQyxTQUFTO3VCQUFDLE9BQU8sRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Z0JBRUUsS0FBSztzQkFBMUMsU0FBUzt1QkFBQyxPQUFPLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPdXRwdXQsXG4gIFNpbXBsZUNoYW5nZXMsXG4gIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3Jpdi1jaGVja2JveCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9jaGVja2JveC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NoZWNrYm94LmNvbXBvbmVudC5jc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIENoZWNrYm94Q29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KClcbiAgbmFtZT86IHN0cmluZztcblxuICBASW5wdXQoKVxuICBpZGVudGlmaWVyPzogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIHZhbHVlOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgY2hlY2tlZENvbG9yVG9rZW46IHN0cmluZyA9ICctLXB1cnAtNjAnO1xuXG4gIEBJbnB1dCgpXG4gIGluZGV0ZXJtaW5hdGVDb2xvclRva2VuOiBzdHJpbmcgPSAnLS1iYWxvby01MCc7XG5cbiAgQElucHV0KClcbiAgY2hlY2tib3hUb29sdGlwPzogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIGluZGV0ZXJtaW5hdGU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBkaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIHJlcXVpcmVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQE91dHB1dCgpXG4gIHZhbHVlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gIGVtaXQodjogYm9vbGVhbikge1xuICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCh2KTtcbiAgICB0aGlzLmVuc3VyZVN5bmNocm9uaXplZFN0YXRlKHRoaXMudmFsdWUpO1xuICB9XG5cbiAgQFZpZXdDaGlsZCgnbGFiZWwnLCB7IHN0YXRpYzogdHJ1ZSB9KSBsYWJlbD86IEVsZW1lbnRSZWY8SFRNTExhYmVsRWxlbWVudD47XG5cbiAgQFZpZXdDaGlsZCgnaW5wdXQnLCB7IHN0YXRpYzogdHJ1ZSB9KSBpbnB1dD86IEVsZW1lbnRSZWY8SFRNTElucHV0RWxlbWVudD47XG5cbiAgZW5zdXJlU3luY2hyb25pemVkU3RhdGUodjogYm9vbGVhbikge1xuICAgIGlmICh0aGlzLmlucHV0KSB7XG4gICAgICB0aGlzLmlucHV0Lm5hdGl2ZUVsZW1lbnQuY2hlY2tlZCA9IHY7XG4gICAgfVxuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmICgndmFsdWUnIGluIGNoYW5nZXMpXG4gICAgICB0aGlzLmVuc3VyZVN5bmNocm9uaXplZFN0YXRlKGNoYW5nZXNbJ3ZhbHVlJ10uY3VycmVudFZhbHVlKTtcbiAgfVxuXG4gIGlzQ2hlY2tib3hPbmx5KCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiAhdGhpcy5sYWJlbCB8fCB0aGlzLmxhYmVsLm5hdGl2ZUVsZW1lbnQuY2hpbGROb2Rlcy5sZW5ndGggPT09IDE7XG4gIH1cblxuICBnZXRDaGVja2VkQmFja2dyb3VuZENvbG9yKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGB2YXIoJHt0aGlzLmNoZWNrZWRDb2xvclRva2VufSlgO1xuICB9XG5cbiAgZ2V0SW5kZXRlcm1pbmF0ZUJhY2tncm91bmRDb2xvcigpOiBzdHJpbmcge1xuICAgIHJldHVybiBgdmFyKCR7dGhpcy5pbmRldGVybWluYXRlQ29sb3JUb2tlbn0pYDtcbiAgfVxufVxuIiwiPGxhYmVsXG4gICNsYWJlbFxuICBbY2xhc3MuZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICBbY2xhc3MuaGFzLWNvbnRlbnRdPVwiIWlzQ2hlY2tib3hPbmx5KClcIlxuPlxuICA8aW5wdXRcbiAgICAjaW5wdXRcbiAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgIFtpZF09XCJpZGVudGlmaWVyXCJcbiAgICBbbmFtZV09XCJuYW1lXCJcbiAgICBbcmVxdWlyZWRdPVwicmVxdWlyZWRcIlxuICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgW2NoZWNrZWRdPVwidmFsdWVcIlxuICAgIFtpbmRldGVybWluYXRlXT1cImluZGV0ZXJtaW5hdGVcIlxuICAgIChjaGFuZ2UpPVwiZW1pdCghIWlucHV0LmNoZWNrZWQpXCJcbiAgICBbc3R5bGUuLS1jaGVja2VkLWJhY2tncm91bmQtY29sb3JdPVwiZ2V0Q2hlY2tlZEJhY2tncm91bmRDb2xvcigpXCJcbiAgICBbc3R5bGUuLS1pbmRldGVybWluYXRlLWJhY2tncm91bmQtY29sb3JdPVwiZ2V0SW5kZXRlcm1pbmF0ZUJhY2tncm91bmRDb2xvcigpXCJcbiAgICBbcml2VG9vbHRpcF09XCJjaGVja2JveFRvb2x0aXBcIlxuICAvPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2xhYmVsPlxuIl19
|
|
@@ -1187,6 +1187,19 @@ class CheckboxComponent {
|
|
|
1187
1187
|
this.required = false;
|
|
1188
1188
|
this.valueChange = new EventEmitter();
|
|
1189
1189
|
}
|
|
1190
|
+
emit(v) {
|
|
1191
|
+
this.valueChange.emit(v);
|
|
1192
|
+
this.ensureSynchronizedState(this.value);
|
|
1193
|
+
}
|
|
1194
|
+
ensureSynchronizedState(v) {
|
|
1195
|
+
if (this.input) {
|
|
1196
|
+
this.input.nativeElement.checked = v;
|
|
1197
|
+
}
|
|
1198
|
+
}
|
|
1199
|
+
ngOnChanges(changes) {
|
|
1200
|
+
if ('value' in changes)
|
|
1201
|
+
this.ensureSynchronizedState(changes['value'].currentValue);
|
|
1202
|
+
}
|
|
1190
1203
|
isCheckboxOnly() {
|
|
1191
1204
|
return !this.label || this.label.nativeElement.childNodes.length === 1;
|
|
1192
1205
|
}
|
|
@@ -1198,10 +1211,10 @@ class CheckboxComponent {
|
|
|
1198
1211
|
}
|
|
1199
1212
|
}
|
|
1200
1213
|
CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1201
|
-
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CheckboxComponent, selector: "riv-checkbox", inputs: { name: "name", identifier: "identifier", value: "value", checkedColorToken: "checkedColorToken", indeterminateColorToken: "indeterminateColorToken", checkboxTooltip: "checkboxTooltip", indeterminate: "indeterminate", disabled: "disabled", required: "required" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, static: 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)=\"
|
|
1214
|
+
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CheckboxComponent, selector: "riv-checkbox", inputs: { name: "name", identifier: "identifier", value: "value", checkedColorToken: "checkedColorToken", indeterminateColorToken: "indeterminateColorToken", 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 [style.--checked-background-color]=\"getCheckedBackgroundColor()\"\n [style.--indeterminate-background-color]=\"getIndeterminateBackgroundColor()\"\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(--checked-background-color)}input:indeterminate:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPg==);background-color:var(--indeterminate-background-color)}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 });
|
|
1202
1215
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1203
1216
|
type: Component,
|
|
1204
|
-
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)=\"
|
|
1217
|
+
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 [style.--checked-background-color]=\"getCheckedBackgroundColor()\"\n [style.--indeterminate-background-color]=\"getIndeterminateBackgroundColor()\"\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(--checked-background-color)}input:indeterminate:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPg==);background-color:var(--indeterminate-background-color)}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"] }]
|
|
1205
1218
|
}], propDecorators: { name: [{
|
|
1206
1219
|
type: Input
|
|
1207
1220
|
}], identifier: [{
|
|
@@ -1225,6 +1238,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1225
1238
|
}], label: [{
|
|
1226
1239
|
type: ViewChild,
|
|
1227
1240
|
args: ['label', { static: true }]
|
|
1241
|
+
}], input: [{
|
|
1242
|
+
type: ViewChild,
|
|
1243
|
+
args: ['input', { static: true }]
|
|
1228
1244
|
}] } });
|
|
1229
1245
|
|
|
1230
1246
|
class CardCheckboxComponent extends CheckboxComponent {
|