ngx-vector-components 5.148.0 → 5.148.1
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/CHANGELOG.md +6 -0
- package/esm2022/lib/components/fields/checkbox-field/checkbox-field.component.mjs +12 -3
- package/fesm2022/ngx-vector-components.mjs +11 -2
- package/fesm2022/ngx-vector-components.mjs.map +1 -1
- package/lib/components/badge/badge.component.d.ts +1 -1
- package/lib/components/fields/checkbox-field/checkbox-field.component.d.ts +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -23,12 +23,21 @@ export class CheckboxFieldComponent {
|
|
|
23
23
|
this.control?.enable();
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
+
toggleValue() {
|
|
27
|
+
if (this.control) {
|
|
28
|
+
this.control.setValue(!this.control.value);
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
this.value = !this.value;
|
|
32
|
+
this.valueChange.emit(this.value);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
26
35
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CheckboxFieldComponent, selector: "vector-checkbox-field", inputs: { isRequired: "isRequired", control: "control", label: "label", rounded: "rounded", labelSize: "labelSize", value: "value", groupName: "groupName", options: "options", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"checkbox-container flex-wrap\">\r\n <ng-container *ngIf=\"control && groupName; else elseBlock\">\r\n <div class=\"checkbox-item mb-3 mr-3\" *ngFor=\"let option of options\">\r\n <p-checkbox\r\n [name]=\"groupName\"\r\n [formControl]=\"control\"\r\n [value]=\"option\"\r\n checkboxIcon=\"fas fa-check\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [inputId]=\"option.code\"\r\n ></p-checkbox>\r\n <label [for]=\"option.code\"> {{ option.name }}</label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #elseBlock>\r\n <p-checkbox\r\n *ngIf=\"control && !groupName\"\r\n [formControl]=\"control\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <p-checkbox\r\n *ngIf=\"!control && !groupName\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"value = $event; valueChange.emit($event)\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <label *ngIf=\"label\" [class.large-label]=\"labelSize === 'large'\" (click)=\"
|
|
36
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CheckboxFieldComponent, selector: "vector-checkbox-field", inputs: { isRequired: "isRequired", control: "control", label: "label", rounded: "rounded", labelSize: "labelSize", value: "value", groupName: "groupName", options: "options", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"checkbox-container flex-wrap\">\r\n <ng-container *ngIf=\"control && groupName; else elseBlock\">\r\n <div class=\"checkbox-item mb-3 mr-3\" *ngFor=\"let option of options\">\r\n <p-checkbox\r\n [name]=\"groupName\"\r\n [formControl]=\"control\"\r\n [value]=\"option\"\r\n checkboxIcon=\"fas fa-check\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [inputId]=\"option.code\"\r\n ></p-checkbox>\r\n <label [for]=\"option.code\"> {{ option.name }}</label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #elseBlock>\r\n <p-checkbox\r\n *ngIf=\"control && !groupName\"\r\n [formControl]=\"control\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <p-checkbox\r\n *ngIf=\"!control && !groupName\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"value = $event; valueChange.emit($event)\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <label *ngIf=\"label\" [class.large-label]=\"labelSize === 'large'\" (click)=\"toggleValue()\"\r\n >{{ label }}\r\n <span class=\"red-label\" *ngIf=\"isRequired\"> (*)</span>\r\n </label>\r\n </ng-template>\r\n</div>\r\n", styles: [".checkbox-container{display:flex;align-items:center}.checkbox-container label{margin-left:10px}.checkbox-container .large-label{font-size:1em}.checkbox-container .checkbox-item{min-width:80px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] }); }
|
|
28
37
|
}
|
|
29
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
|
|
30
39
|
type: Component,
|
|
31
|
-
args: [{ selector: 'vector-checkbox-field', template: "<div class=\"checkbox-container flex-wrap\">\r\n <ng-container *ngIf=\"control && groupName; else elseBlock\">\r\n <div class=\"checkbox-item mb-3 mr-3\" *ngFor=\"let option of options\">\r\n <p-checkbox\r\n [name]=\"groupName\"\r\n [formControl]=\"control\"\r\n [value]=\"option\"\r\n checkboxIcon=\"fas fa-check\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [inputId]=\"option.code\"\r\n ></p-checkbox>\r\n <label [for]=\"option.code\"> {{ option.name }}</label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #elseBlock>\r\n <p-checkbox\r\n *ngIf=\"control && !groupName\"\r\n [formControl]=\"control\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <p-checkbox\r\n *ngIf=\"!control && !groupName\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"value = $event; valueChange.emit($event)\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <label *ngIf=\"label\" [class.large-label]=\"labelSize === 'large'\" (click)=\"
|
|
40
|
+
args: [{ selector: 'vector-checkbox-field', template: "<div class=\"checkbox-container flex-wrap\">\r\n <ng-container *ngIf=\"control && groupName; else elseBlock\">\r\n <div class=\"checkbox-item mb-3 mr-3\" *ngFor=\"let option of options\">\r\n <p-checkbox\r\n [name]=\"groupName\"\r\n [formControl]=\"control\"\r\n [value]=\"option\"\r\n checkboxIcon=\"fas fa-check\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [inputId]=\"option.code\"\r\n ></p-checkbox>\r\n <label [for]=\"option.code\"> {{ option.name }}</label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #elseBlock>\r\n <p-checkbox\r\n *ngIf=\"control && !groupName\"\r\n [formControl]=\"control\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <p-checkbox\r\n *ngIf=\"!control && !groupName\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"value = $event; valueChange.emit($event)\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <label *ngIf=\"label\" [class.large-label]=\"labelSize === 'large'\" (click)=\"toggleValue()\"\r\n >{{ label }}\r\n <span class=\"red-label\" *ngIf=\"isRequired\"> (*)</span>\r\n </label>\r\n </ng-template>\r\n</div>\r\n", styles: [".checkbox-container{display:flex;align-items:center}.checkbox-container label{margin-left:10px}.checkbox-container .large-label{font-size:1em}.checkbox-container .checkbox-item{min-width:80px}\n"] }]
|
|
32
41
|
}], ctorParameters: () => [], propDecorators: { isRequired: [{
|
|
33
42
|
type: Input
|
|
34
43
|
}], control: [{
|
|
@@ -50,4 +59,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
50
59
|
}], valueChange: [{
|
|
51
60
|
type: Output
|
|
52
61
|
}] } });
|
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
62
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3gtZmllbGQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXZlY3Rvci1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9maWVsZHMvY2hlY2tib3gtZmllbGQvY2hlY2tib3gtZmllbGQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXZlY3Rvci1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9maWVsZHMvY2hlY2tib3gtZmllbGQvY2hlY2tib3gtZmllbGQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFRL0UsTUFBTSxPQUFPLHNCQUFzQjtJQXFCakM7UUFuQk8sZUFBVSxHQUFZLEtBQUssQ0FBQztRQUk1QixVQUFLLEdBQVcsRUFBRSxDQUFDO1FBRW5CLFlBQU8sR0FBWSxLQUFLLENBQUM7UUFFekIsY0FBUyxHQUF3QixTQUFTLENBQUM7UUFFM0MsVUFBSyxHQUF3QixLQUFLLENBQUM7UUFFbkMsY0FBUyxHQUFXLEVBQUUsQ0FBQztRQUV2QixZQUFPLEdBQXNCLElBQUksQ0FBQztRQUVsQyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBRTFCLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztJQUNsQyxDQUFDO0lBRWhCLFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDakIsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLEVBQUUsQ0FBQztTQUN6QjthQUFNO1lBQ0wsSUFBSSxDQUFDLE9BQU8sRUFBRSxNQUFNLEVBQUUsQ0FBQztTQUN4QjtJQUNILENBQUM7SUFFTSxXQUFXO1FBQ2hCLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNoQixJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDNUM7YUFBTTtZQUNMLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDO1lBQ3pCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUNuQztJQUNILENBQUM7K0dBdENVLHNCQUFzQjttR0FBdEIsc0JBQXNCLDhTQ1JuQyxvNUNBdUNBOzs0RkQvQmEsc0JBQXNCO2tCQUxsQyxTQUFTOytCQUNFLHVCQUF1Qjt3REFNMUIsVUFBVTtzQkFEaEIsS0FBSztnQkFHQyxPQUFPO3NCQURiLEtBQUs7Z0JBR0MsS0FBSztzQkFEWCxLQUFLO2dCQUdDLE9BQU87c0JBRGIsS0FBSztnQkFHQyxTQUFTO3NCQURmLEtBQUs7Z0JBR0MsS0FBSztzQkFEWCxLQUFLO2dCQUdDLFNBQVM7c0JBRGYsS0FBSztnQkFHQyxPQUFPO3NCQURiLEtBQUs7Z0JBR0MsUUFBUTtzQkFEZCxLQUFLO2dCQUdDLFdBQVc7c0JBRGpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IExpc3RJdGVtIH0gZnJvbSAnLi4vLi4vLi4vbW9kZWxzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAndmVjdG9yLWNoZWNrYm94LWZpZWxkJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vY2hlY2tib3gtZmllbGQuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2NoZWNrYm94LWZpZWxkLmNvbXBvbmVudC5zY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDaGVja2JveEZpZWxkQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICBASW5wdXQoKVxyXG4gIHB1YmxpYyBpc1JlcXVpcmVkOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KClcclxuICBwdWJsaWMgY29udHJvbDogYW55O1xyXG4gIEBJbnB1dCgpXHJcbiAgcHVibGljIGxhYmVsOiBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoKVxyXG4gIHB1YmxpYyByb3VuZGVkOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KClcclxuICBwdWJsaWMgbGFiZWxTaXplOiAnZGVmYXVsdCcgfCAnbGFyZ2UnID0gJ2RlZmF1bHQnO1xyXG4gIEBJbnB1dCgpXHJcbiAgcHVibGljIHZhbHVlOiBib29sZWFuIHwgdW5kZWZpbmVkID0gZmFsc2U7XHJcbiAgQElucHV0KClcclxuICBwdWJsaWMgZ3JvdXBOYW1lOiBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoKVxyXG4gIHB1YmxpYyBvcHRpb25zOiBMaXN0SXRlbVtdIHwgbnVsbCA9IG51bGw7XHJcbiAgQElucHV0KClcclxuICBwdWJsaWMgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBAT3V0cHV0KClcclxuICBwdWJsaWMgdmFsdWVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcbiAgY29uc3RydWN0b3IoKSB7fVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIGlmICh0aGlzLmRpc2FibGVkKSB7XHJcbiAgICAgIHRoaXMuY29udHJvbD8uZGlzYWJsZSgpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy5jb250cm9sPy5lbmFibGUoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHB1YmxpYyB0b2dnbGVWYWx1ZSgpOiB2b2lkIHtcclxuICAgIGlmICh0aGlzLmNvbnRyb2wpIHtcclxuICAgICAgdGhpcy5jb250cm9sLnNldFZhbHVlKCF0aGlzLmNvbnRyb2wudmFsdWUpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy52YWx1ZSA9ICF0aGlzLnZhbHVlO1xyXG4gICAgICB0aGlzLnZhbHVlQ2hhbmdlLmVtaXQodGhpcy52YWx1ZSk7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJjaGVja2JveC1jb250YWluZXIgZmxleC13cmFwXCI+XHJcbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImNvbnRyb2wgJiYgZ3JvdXBOYW1lOyBlbHNlIGVsc2VCbG9ja1wiPlxyXG4gICAgPGRpdiBjbGFzcz1cImNoZWNrYm94LWl0ZW0gbWItMyBtci0zXCIgKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBvcHRpb25zXCI+XHJcbiAgICAgIDxwLWNoZWNrYm94XHJcbiAgICAgICAgW25hbWVdPVwiZ3JvdXBOYW1lXCJcclxuICAgICAgICBbZm9ybUNvbnRyb2xdPVwiY29udHJvbFwiXHJcbiAgICAgICAgW3ZhbHVlXT1cIm9wdGlvblwiXHJcbiAgICAgICAgY2hlY2tib3hJY29uPVwiZmFzIGZhLWNoZWNrXCJcclxuICAgICAgICBbY2xhc3Mucm91bmRlZC1jaGVja2JveF09XCJyb3VuZGVkXCJcclxuICAgICAgICBbaW5wdXRJZF09XCJvcHRpb24uY29kZVwiXHJcbiAgICAgID48L3AtY2hlY2tib3g+XHJcbiAgICAgIDxsYWJlbCBbZm9yXT1cIm9wdGlvbi5jb2RlXCI+IHt7IG9wdGlvbi5uYW1lIH19PC9sYWJlbD5cclxuICAgIDwvZGl2PlxyXG4gIDwvbmctY29udGFpbmVyPlxyXG5cclxuICA8bmctdGVtcGxhdGUgI2Vsc2VCbG9jaz5cclxuICAgIDxwLWNoZWNrYm94XHJcbiAgICAgICpuZ0lmPVwiY29udHJvbCAmJiAhZ3JvdXBOYW1lXCJcclxuICAgICAgW2Zvcm1Db250cm9sXT1cImNvbnRyb2xcIlxyXG4gICAgICBjaGVja2JveEljb249XCJmYXMgZmEtY2hlY2tcIlxyXG4gICAgICBbYmluYXJ5XT1cInRydWVcIlxyXG4gICAgICBbY2xhc3Mucm91bmRlZC1jaGVja2JveF09XCJyb3VuZGVkXCJcclxuICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcclxuICAgID48L3AtY2hlY2tib3g+XHJcbiAgICA8cC1jaGVja2JveFxyXG4gICAgICAqbmdJZj1cIiFjb250cm9sICYmICFncm91cE5hbWVcIlxyXG4gICAgICBbbmdNb2RlbF09XCJ2YWx1ZVwiXHJcbiAgICAgIChuZ01vZGVsQ2hhbmdlKT1cInZhbHVlID0gJGV2ZW50OyB2YWx1ZUNoYW5nZS5lbWl0KCRldmVudClcIlxyXG4gICAgICBjaGVja2JveEljb249XCJmYXMgZmEtY2hlY2tcIlxyXG4gICAgICBbYmluYXJ5XT1cInRydWVcIlxyXG4gICAgICBbY2xhc3Mucm91bmRlZC1jaGVja2JveF09XCJyb3VuZGVkXCJcclxuICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcclxuICAgID48L3AtY2hlY2tib3g+XHJcbiAgICA8bGFiZWwgKm5nSWY9XCJsYWJlbFwiIFtjbGFzcy5sYXJnZS1sYWJlbF09XCJsYWJlbFNpemUgPT09ICdsYXJnZSdcIiAoY2xpY2spPVwidG9nZ2xlVmFsdWUoKVwiXHJcbiAgICAgID57eyBsYWJlbCB9fVxyXG4gICAgICA8c3BhbiBjbGFzcz1cInJlZC1sYWJlbFwiICpuZ0lmPVwiaXNSZXF1aXJlZFwiPiAoKik8L3NwYW4+XHJcbiAgICA8L2xhYmVsPlxyXG4gIDwvbmctdGVtcGxhdGU+XHJcbjwvZGl2PlxyXG4iXX0=
|
|
@@ -2601,12 +2601,21 @@ class CheckboxFieldComponent {
|
|
|
2601
2601
|
this.control?.enable();
|
|
2602
2602
|
}
|
|
2603
2603
|
}
|
|
2604
|
+
toggleValue() {
|
|
2605
|
+
if (this.control) {
|
|
2606
|
+
this.control.setValue(!this.control.value);
|
|
2607
|
+
}
|
|
2608
|
+
else {
|
|
2609
|
+
this.value = !this.value;
|
|
2610
|
+
this.valueChange.emit(this.value);
|
|
2611
|
+
}
|
|
2612
|
+
}
|
|
2604
2613
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2605
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CheckboxFieldComponent, selector: "vector-checkbox-field", inputs: { isRequired: "isRequired", control: "control", label: "label", rounded: "rounded", labelSize: "labelSize", value: "value", groupName: "groupName", options: "options", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"checkbox-container flex-wrap\">\r\n <ng-container *ngIf=\"control && groupName; else elseBlock\">\r\n <div class=\"checkbox-item mb-3 mr-3\" *ngFor=\"let option of options\">\r\n <p-checkbox\r\n [name]=\"groupName\"\r\n [formControl]=\"control\"\r\n [value]=\"option\"\r\n checkboxIcon=\"fas fa-check\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [inputId]=\"option.code\"\r\n ></p-checkbox>\r\n <label [for]=\"option.code\"> {{ option.name }}</label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #elseBlock>\r\n <p-checkbox\r\n *ngIf=\"control && !groupName\"\r\n [formControl]=\"control\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <p-checkbox\r\n *ngIf=\"!control && !groupName\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"value = $event; valueChange.emit($event)\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <label *ngIf=\"label\" [class.large-label]=\"labelSize === 'large'\" (click)=\"
|
|
2614
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CheckboxFieldComponent, selector: "vector-checkbox-field", inputs: { isRequired: "isRequired", control: "control", label: "label", rounded: "rounded", labelSize: "labelSize", value: "value", groupName: "groupName", options: "options", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"checkbox-container flex-wrap\">\r\n <ng-container *ngIf=\"control && groupName; else elseBlock\">\r\n <div class=\"checkbox-item mb-3 mr-3\" *ngFor=\"let option of options\">\r\n <p-checkbox\r\n [name]=\"groupName\"\r\n [formControl]=\"control\"\r\n [value]=\"option\"\r\n checkboxIcon=\"fas fa-check\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [inputId]=\"option.code\"\r\n ></p-checkbox>\r\n <label [for]=\"option.code\"> {{ option.name }}</label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #elseBlock>\r\n <p-checkbox\r\n *ngIf=\"control && !groupName\"\r\n [formControl]=\"control\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <p-checkbox\r\n *ngIf=\"!control && !groupName\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"value = $event; valueChange.emit($event)\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <label *ngIf=\"label\" [class.large-label]=\"labelSize === 'large'\" (click)=\"toggleValue()\"\r\n >{{ label }}\r\n <span class=\"red-label\" *ngIf=\"isRequired\"> (*)</span>\r\n </label>\r\n </ng-template>\r\n</div>\r\n", styles: [".checkbox-container{display:flex;align-items:center}.checkbox-container label{margin-left:10px}.checkbox-container .large-label{font-size:1em}.checkbox-container .checkbox-item{min-width:80px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] }); }
|
|
2606
2615
|
}
|
|
2607
2616
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
|
|
2608
2617
|
type: Component,
|
|
2609
|
-
args: [{ selector: 'vector-checkbox-field', template: "<div class=\"checkbox-container flex-wrap\">\r\n <ng-container *ngIf=\"control && groupName; else elseBlock\">\r\n <div class=\"checkbox-item mb-3 mr-3\" *ngFor=\"let option of options\">\r\n <p-checkbox\r\n [name]=\"groupName\"\r\n [formControl]=\"control\"\r\n [value]=\"option\"\r\n checkboxIcon=\"fas fa-check\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [inputId]=\"option.code\"\r\n ></p-checkbox>\r\n <label [for]=\"option.code\"> {{ option.name }}</label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #elseBlock>\r\n <p-checkbox\r\n *ngIf=\"control && !groupName\"\r\n [formControl]=\"control\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <p-checkbox\r\n *ngIf=\"!control && !groupName\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"value = $event; valueChange.emit($event)\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <label *ngIf=\"label\" [class.large-label]=\"labelSize === 'large'\" (click)=\"
|
|
2618
|
+
args: [{ selector: 'vector-checkbox-field', template: "<div class=\"checkbox-container flex-wrap\">\r\n <ng-container *ngIf=\"control && groupName; else elseBlock\">\r\n <div class=\"checkbox-item mb-3 mr-3\" *ngFor=\"let option of options\">\r\n <p-checkbox\r\n [name]=\"groupName\"\r\n [formControl]=\"control\"\r\n [value]=\"option\"\r\n checkboxIcon=\"fas fa-check\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [inputId]=\"option.code\"\r\n ></p-checkbox>\r\n <label [for]=\"option.code\"> {{ option.name }}</label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #elseBlock>\r\n <p-checkbox\r\n *ngIf=\"control && !groupName\"\r\n [formControl]=\"control\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <p-checkbox\r\n *ngIf=\"!control && !groupName\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"value = $event; valueChange.emit($event)\"\r\n checkboxIcon=\"fas fa-check\"\r\n [binary]=\"true\"\r\n [class.rounded-checkbox]=\"rounded\"\r\n [disabled]=\"disabled\"\r\n ></p-checkbox>\r\n <label *ngIf=\"label\" [class.large-label]=\"labelSize === 'large'\" (click)=\"toggleValue()\"\r\n >{{ label }}\r\n <span class=\"red-label\" *ngIf=\"isRequired\"> (*)</span>\r\n </label>\r\n </ng-template>\r\n</div>\r\n", styles: [".checkbox-container{display:flex;align-items:center}.checkbox-container label{margin-left:10px}.checkbox-container .large-label{font-size:1em}.checkbox-container .checkbox-item{min-width:80px}\n"] }]
|
|
2610
2619
|
}], ctorParameters: () => [], propDecorators: { isRequired: [{
|
|
2611
2620
|
type: Input
|
|
2612
2621
|
}], control: [{
|