@progressio_resources/gravity-design-system 2.5.15 → 2.5.17
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/esm2022/lib/components/gravity-checkbox/gravity-checkbox.component.mjs +8 -3
- package/fesm2022/progressio_resources-gravity-design-system.mjs +7 -2
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-checkbox/gravity-checkbox.component.d.ts +3 -2
- package/package.json +1 -1
- package/src/lib/styles/foundations/colors/themes/_hero.theme.scss +16 -0
- package/src/lib/styles/foundations/colors/tokens/_hero.tokens.scss +16 -0
|
@@ -13,6 +13,11 @@ export class GravityCheckboxComponent {
|
|
|
13
13
|
this.isCheckboxActive = this.checked;
|
|
14
14
|
this.change.emit({ value: this.value, checked: this.isCheckboxActive });
|
|
15
15
|
}
|
|
16
|
+
ngOnChanges(changes) {
|
|
17
|
+
if (changes['checked']) {
|
|
18
|
+
this.isCheckboxActive = changes['checked'].currentValue;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
16
21
|
toggleCheckbox() {
|
|
17
22
|
if (!this.disabled) {
|
|
18
23
|
this.isCheckboxActive = !this.isCheckboxActive;
|
|
@@ -20,11 +25,11 @@ export class GravityCheckboxComponent {
|
|
|
20
25
|
}
|
|
21
26
|
}
|
|
22
27
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: { checked: "checked", disabled: "disabled", name: "name", value: "value" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n <input [checked]=\"isCheckboxActive\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n\n type=\"checkbox\">\n <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n </span>\n <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
28
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: { checked: "checked", disabled: "disabled", name: "name", value: "value" }, outputs: { change: "change" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n <input [checked]=\"isCheckboxActive\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n\n type=\"checkbox\">\n <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n </span>\n <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;bottom:0;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;margin:auto 0;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
24
29
|
}
|
|
25
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, decorators: [{
|
|
26
31
|
type: Component,
|
|
27
|
-
args: [{ selector: 'gravity-checkbox', template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n <input [checked]=\"isCheckboxActive\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n\n type=\"checkbox\">\n <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n </span>\n <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"] }]
|
|
32
|
+
args: [{ selector: 'gravity-checkbox', template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n <input [checked]=\"isCheckboxActive\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n\n type=\"checkbox\">\n <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n </span>\n <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;bottom:0;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;margin:auto 0;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"] }]
|
|
28
33
|
}], propDecorators: { checked: [{
|
|
29
34
|
type: Input
|
|
30
35
|
}], disabled: [{
|
|
@@ -36,4 +41,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
36
41
|
}], change: [{
|
|
37
42
|
type: Output
|
|
38
43
|
}] } });
|
|
39
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
44
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3Jhdml0eS1jaGVja2JveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2dyYXZpdHktY2hlY2tib3gvZ3Jhdml0eS1jaGVja2JveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2dyYXZpdHktY2hlY2tib3gvZ3Jhdml0eS1jaGVja2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWdCLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFhLE1BQU0sRUFBZ0IsTUFBTSxlQUFlLENBQUM7Ozs7QUFPOUcsTUFBTSxPQUFPLHdCQUF3QjtJQUxyQztRQU1rQixZQUFPLEdBQVksS0FBSyxDQUFDO1FBQ3pCLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFHekIsV0FBTSxHQUFzRCxJQUFJLFlBQVksRUFBdUMsQ0FBQztRQUU5SCxxQkFBZ0IsR0FBWSxLQUFLLENBQUM7S0FtQjFDO0lBakJDLGVBQWU7UUFDYixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQztRQUNyQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxFQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLE9BQU8sRUFBRSxJQUFJLENBQUMsZ0JBQWdCLEVBQUMsQ0FBQyxDQUFDO0lBQ3hFLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsU0FBUyxDQUFDLEVBQUU7WUFDdEIsSUFBSSxDQUFDLGdCQUFnQixHQUFHLE9BQU8sQ0FBQyxTQUFTLENBQUMsQ0FBQyxZQUFZLENBQUM7U0FDekQ7SUFDSCxDQUFDO0lBRUQsY0FBYztRQUNaLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2xCLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQztZQUMvQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxFQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLE9BQU8sRUFBRSxJQUFJLENBQUMsZ0JBQWdCLEVBQUMsQ0FBQyxDQUFDO1NBQ3ZFO0lBQ0gsQ0FBQzsrR0F6QlUsd0JBQXdCO21HQUF4Qix3QkFBd0IsZ01DUHJDLCtiQVlBOzs0RkRMYSx3QkFBd0I7a0JBTHBDLFNBQVM7K0JBQ0Usa0JBQWtCOzhCQUtaLE9BQU87c0JBQXRCLEtBQUs7Z0JBQ1UsUUFBUTtzQkFBdkIsS0FBSztnQkFDVSxJQUFJO3NCQUFuQixLQUFLO2dCQUNVLEtBQUs7c0JBQXBCLEtBQUs7Z0JBQ1csTUFBTTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7QWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkNoYW5nZXMsIE91dHB1dCwgU2ltcGxlQ2hhbmdlc30gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2dyYXZpdHktY2hlY2tib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vZ3Jhdml0eS1jaGVja2JveC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2dyYXZpdHktY2hlY2tib3guY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBHcmF2aXR5Q2hlY2tib3hDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkNoYW5nZXMge1xuICBASW5wdXQoKSBwdWJsaWMgY2hlY2tlZDogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBwdWJsaWMgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgcHVibGljIG5hbWU6IHN0cmluZztcbiAgQElucHV0KCkgcHVibGljIHZhbHVlOiBzdHJpbmc7XG4gIEBPdXRwdXQoKSBwdWJsaWMgY2hhbmdlOiBFdmVudEVtaXR0ZXI8eyB2YWx1ZTogc3RyaW5nLCBjaGVja2VkOiBib29sZWFuIH0+ID0gbmV3IEV2ZW50RW1pdHRlcjx7IHZhbHVlOiBzdHJpbmcsIGNoZWNrZWQ6IGJvb2xlYW4gfT4oKTtcblxuICBwdWJsaWMgaXNDaGVja2JveEFjdGl2ZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICB0aGlzLmlzQ2hlY2tib3hBY3RpdmUgPSB0aGlzLmNoZWNrZWQ7XG4gICAgdGhpcy5jaGFuZ2UuZW1pdCh7dmFsdWU6IHRoaXMudmFsdWUsIGNoZWNrZWQ6IHRoaXMuaXNDaGVja2JveEFjdGl2ZX0pO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGlmIChjaGFuZ2VzWydjaGVja2VkJ10pIHtcbiAgICAgIHRoaXMuaXNDaGVja2JveEFjdGl2ZSA9IGNoYW5nZXNbJ2NoZWNrZWQnXS5jdXJyZW50VmFsdWU7XG4gICAgfVxuICB9XG5cbiAgdG9nZ2xlQ2hlY2tib3goKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLmRpc2FibGVkKSB7XG4gICAgICB0aGlzLmlzQ2hlY2tib3hBY3RpdmUgPSAhdGhpcy5pc0NoZWNrYm94QWN0aXZlO1xuICAgICAgdGhpcy5jaGFuZ2UuZW1pdCh7dmFsdWU6IHRoaXMudmFsdWUsIGNoZWNrZWQ6IHRoaXMuaXNDaGVja2JveEFjdGl2ZX0pO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImdyYXZpdHktY2hlY2tib3gtZmllbGRcIiBbY2xhc3MuZGlzYWJsZWRdPVwiZGlzYWJsZWRcIj5cbiAgPGlucHV0IFtjaGVja2VkXT1cImlzQ2hlY2tib3hBY3RpdmVcIlxuICAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgICAgIFtuYW1lXT1cIm5hbWVcIlxuICAgICAgICAgW3ZhbHVlXT1cInZhbHVlXCJcblxuICAgICAgICAgdHlwZT1cImNoZWNrYm94XCI+XG4gIDxzcGFuIGNsYXNzPVwiY2hlY2ttYXJrXCIgKGNsaWNrKT1cInRvZ2dsZUNoZWNrYm94KClcIj5cbiAgICA8Z3Jhdml0eS1pY29uIFtpY29uTmFtZV09XCInY2hlY2snXCIgW2ljb25TaXplXT1cIidzbS0xMidcIiAqbmdJZj1cImlzQ2hlY2tib3hBY3RpdmVcIj48L2dyYXZpdHktaWNvbj5cbiAgPC9zcGFuPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -1258,6 +1258,11 @@ class GravityCheckboxComponent {
|
|
|
1258
1258
|
this.isCheckboxActive = this.checked;
|
|
1259
1259
|
this.change.emit({ value: this.value, checked: this.isCheckboxActive });
|
|
1260
1260
|
}
|
|
1261
|
+
ngOnChanges(changes) {
|
|
1262
|
+
if (changes['checked']) {
|
|
1263
|
+
this.isCheckboxActive = changes['checked'].currentValue;
|
|
1264
|
+
}
|
|
1265
|
+
}
|
|
1261
1266
|
toggleCheckbox() {
|
|
1262
1267
|
if (!this.disabled) {
|
|
1263
1268
|
this.isCheckboxActive = !this.isCheckboxActive;
|
|
@@ -1265,11 +1270,11 @@ class GravityCheckboxComponent {
|
|
|
1265
1270
|
}
|
|
1266
1271
|
}
|
|
1267
1272
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1268
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: { checked: "checked", disabled: "disabled", name: "name", value: "value" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n <input [checked]=\"isCheckboxActive\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n\n type=\"checkbox\">\n <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n </span>\n <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
1273
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: { checked: "checked", disabled: "disabled", name: "name", value: "value" }, outputs: { change: "change" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n <input [checked]=\"isCheckboxActive\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n\n type=\"checkbox\">\n <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n </span>\n <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;bottom:0;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;margin:auto 0;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
|
|
1269
1274
|
}
|
|
1270
1275
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, decorators: [{
|
|
1271
1276
|
type: Component,
|
|
1272
|
-
args: [{ selector: 'gravity-checkbox', template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n <input [checked]=\"isCheckboxActive\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n\n type=\"checkbox\">\n <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n </span>\n <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"] }]
|
|
1277
|
+
args: [{ selector: 'gravity-checkbox', template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n <input [checked]=\"isCheckboxActive\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n\n type=\"checkbox\">\n <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n </span>\n <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;bottom:0;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;margin:auto 0;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"] }]
|
|
1273
1278
|
}], propDecorators: { checked: [{
|
|
1274
1279
|
type: Input
|
|
1275
1280
|
}], disabled: [{
|