master-control 0.2.89 → 0.2.90
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.
|
@@ -37,12 +37,12 @@ export class ToggleComponent {
|
|
|
37
37
|
this.change.emit(this.inputValue);
|
|
38
38
|
}
|
|
39
39
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, deps: [{ token: i1.MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
40
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ToggleComponent, isStandalone: true, selector: "lib-toggle", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n '--custom-toggle-width': field()?.controlStyle?.width,\r\n }\"\r\n
|
|
40
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ToggleComponent, isStandalone: true, selector: "lib-toggle", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n '--custom-toggle-width': field()?.controlStyle?.width,\r\n }\"\r\n class=\"card toggle-background mt-2\"\r\n >\r\n <div class=\"toggle_switch mt-2\">\r\n <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\r\n '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n }\" class=\"toggle-text mb-2\">\r\n <div>{{field().configData?.leftLabel}}</div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <label class=\"switch\">\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n type=\"checkbox\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [checked]=\"inputValue\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n (change)=\"onToggleChange($event)\"\r\n />\r\n }@else {\r\n <input\r\n type=\"checkbox\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [checked]=\"inputValue\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n (change)=\"onToggleChange($event)\"\r\n />\r\n }\r\n <span class=\"slider round\"></span>\r\n </label>\r\n </div>\r\n <div [ngStyle]=\"{\r\n '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n }\" class=\"toggle-text mb-2\">\r\n <div>{{field()?.label}}</div>\r\n <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\r\n </div>\r\n </div>\r\n </div>\r\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
41
41
|
}
|
|
42
42
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
43
43
|
type: Component,
|
|
44
|
-
args: [{ selector: 'lib-toggle', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n '--custom-toggle-width': field()?.controlStyle?.width,\r\n }\"\r\n
|
|
44
|
+
args: [{ selector: 'lib-toggle', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n '--custom-toggle-width': field()?.controlStyle?.width,\r\n }\"\r\n class=\"card toggle-background mt-2\"\r\n >\r\n <div class=\"toggle_switch mt-2\">\r\n <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\r\n '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n }\" class=\"toggle-text mb-2\">\r\n <div>{{field().configData?.leftLabel}}</div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <label class=\"switch\">\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n type=\"checkbox\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [checked]=\"inputValue\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n (change)=\"onToggleChange($event)\"\r\n />\r\n }@else {\r\n <input\r\n type=\"checkbox\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [checked]=\"inputValue\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n (change)=\"onToggleChange($event)\"\r\n />\r\n }\r\n <span class=\"slider round\"></span>\r\n </label>\r\n </div>\r\n <div [ngStyle]=\"{\r\n '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n }\" class=\"toggle-text mb-2\">\r\n <div>{{field()?.label}}</div>\r\n <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\r\n </div>\r\n </div>\r\n </div>\r\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"] }]
|
|
45
45
|
}], ctorParameters: () => [{ type: i1.MasterControlService }], propDecorators: { change: [{
|
|
46
46
|
type: Output
|
|
47
47
|
}] } });
|
|
48
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
48
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hc3Rlci1jb250cm9sL3NyYy9saWIvdG9nZ2xlL3RvZ2dsZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3RvZ2dsZS90b2dnbGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBQyxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFdEUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7O0FBU3JELE1BQU0sT0FBTyxlQUFlO0lBQ1A7SUFBbkIsWUFBbUIsYUFBb0M7UUFBcEMsa0JBQWEsR0FBYixhQUFhLENBQXVCO0lBQUUsQ0FBQztJQUMxRCxLQUFLLEdBQVMsS0FBSyxDQUFDLFFBQVEsRUFBTyxDQUFDO0lBQ25DLFVBQVUsR0FBUSxJQUFJLENBQUM7SUFDdkIseUJBQXlCLEdBQVMsS0FBSyxFQUFPLENBQUM7SUFDaEQsU0FBUyxHQUFRLENBQUMsVUFBZSxFQUFFLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFDekMsVUFBVSxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUUzQixtREFBbUQ7SUFDekMsTUFBTSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFFM0MsVUFBVSxDQUFDLEdBQVE7UUFDakIsSUFBSSxDQUFDLFVBQVUsR0FBRyxHQUFHLENBQUM7SUFDeEIsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxFQUFFLENBQUM7SUFDdkIsQ0FBQztJQUVELGdCQUFnQixDQUFFLFVBQW1CO1FBQ25DLGtDQUFrQztJQUNwQyxDQUFDO0lBRUQsY0FBYyxDQUFDLEtBQVU7UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQztRQUN2QyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUNoQyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDbEIsNENBQTRDO1FBQzVDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNwQyxDQUFDO3dHQWpDVSxlQUFlOzRGQUFmLGVBQWUsNFpDWjVCLHVzRkF3REEsazJERGhEWSxZQUFZLHVOQUFFLG1CQUFtQjs7NEZBSWhDLGVBQWU7a0JBUDNCLFNBQVM7K0JBQ0UsWUFBWSxjQUNWLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxtQkFBbUIsQ0FBQzt5RkFhbEMsTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCwgT3V0cHV0LEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNYXN0ZXJDb250cm9sU2VydmljZSB9IGZyb20gJy4uL21hc3Rlci1jb250cm9sLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdsaWItdG9nZ2xlJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFJlYWN0aXZlRm9ybXNNb2R1bGVdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi90b2dnbGUuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi90b2dnbGUuY29tcG9uZW50LmNzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIFRvZ2dsZUNvbXBvbmVudCB7XHJcbiAgY29uc3RydWN0b3IocHVibGljIG1hc3RlclNlcnZpY2UgOiBNYXN0ZXJDb250cm9sU2VydmljZSl7fVxyXG4gIGZpZWxkIDogYW55ID0gaW5wdXQucmVxdWlyZWQ8YW55PigpO1xyXG4gICBpbnB1dFZhbHVlOiBhbnkgPSB0cnVlO1xyXG4gICByZWFjdGl2ZUZvcm1Db250cm9sb2JqZWN0IDogYW55ID0gaW5wdXQ8YW55PigpO1xyXG4gIF9vbkNoYW5nZTogYW55ID0gKGlucHV0VmFsdWU6IGFueSkgPT4ge307XHJcbiAgX29uVG91Y2hlZDogYW55ID0gKCkgPT4ge307XHJcbiAgXHJcbiAgLy8gRGVjbGFyZSBPdXRwdXQgZXZlbnQgZW1pdHRlcnMgaGVyZSAoY2xhc3MgbGV2ZWwpXHJcbiAgQE91dHB1dCgpIGNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG5cclxuICB3cml0ZVZhbHVlKG9iajogYW55KTogdm9pZCB7XHJcbiAgICB0aGlzLmlucHV0VmFsdWUgPSBvYmo7XHJcbiAgfVxyXG5cclxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMuX29uQ2hhbmdlID0gZm47XHJcbiAgfVxyXG5cclxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7XHJcbiAgICB0aGlzLl9vblRvdWNoZWQgPSBmbjtcclxuICB9XHJcblxyXG4gIHNldERpc2FibGVkU3RhdGU/KGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcclxuICAgIC8vIEhhbmRsZSBkaXNhYmxlZCBzdGF0ZSBpZiBuZWVkZWRcclxuICB9XHJcblxyXG4gIG9uVG9nZ2xlQ2hhbmdlKGV2ZW50OiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMuaW5wdXRWYWx1ZSA9IGV2ZW50LnRhcmdldC5jaGVja2VkO1xyXG4gICAgdGhpcy5fb25DaGFuZ2UodGhpcy5pbnB1dFZhbHVlKTtcclxuICAgIHRoaXMuX29uVG91Y2hlZCgpO1xyXG4gICAgLy8gRW1pdCB0aGUgY2hhbmdlIGV2ZW50IHRvIHBhcmVudCBjb21wb25lbnRcclxuICAgIHRoaXMuY2hhbmdlLmVtaXQodGhpcy5pbnB1dFZhbHVlKTtcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cIlwiICpuZ0lmPVwiZmllbGQoKSAmJiBmaWVsZCgpPy5pc1Zpc2libGUgJiYgZmllbGQoKS5pc1Nob3dMYWJlbFwiIFtuZ1N0eWxlXT1cIntcclxuICAnLS1jdXN0b20tdG9nZ2xlLWJnLWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5iYWNrZ3JvdW5kLFxyXG4gICctLWN1c3RvbS10b2dnbGUtYm9yZGVyLWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJDb2xvciAsXHJcbiAgJy0tY3VzdG9tLXRvZ2dsZS1ib3JkZXItd2lkdGgnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlcldpZHRoICxcclxuICAnLS1jdXN0b20tdG9nZ2xlLWJvcmRlci1yYWRpdXMnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlclJhZGl1cyxcclxuICAnLS1jdXN0b20tdG9nZ2xlLXdpZHRoJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy53aWR0aCxcclxuICB9XCJcclxuICBjbGFzcz1cImNhcmQgdG9nZ2xlLWJhY2tncm91bmQgbXQtMlwiXHJcbiAgPlxyXG4gICAgPGRpdiBjbGFzcz1cInRvZ2dsZV9zd2l0Y2ggbXQtMlwiPlxyXG4gICAgICA8ZGl2ICpuZ0lmPVwiZmllbGQoKS5jb25maWdEYXRhPy5sZWZ0TGFiZWxcIiBbbmdTdHlsZV09XCJ7XHJcbiAgICAgICAgJy0tY3VzdG9tLXRvZ2dsZS1mb250LXNpemUnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRTaXplICxcclxuICAgICAgICAnLS1jdXN0b20tdG9nZ2xlLWZvbnQtd2VpZ2h0JzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb250V2VpZ2h0ICxcclxuICAgICAgICAnLS1jdXN0b20tdG9nZ2xlLWZvbnQtZmFtaWx5JzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb250RmFtaWx5ICxcclxuICAgICAgICAnLS1jdXN0b20tdG9nZ2xlLWZvbnQtY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmNvbG9yICxcclxuICAgICAgICB9XCIgY2xhc3M9XCJ0b2dnbGUtdGV4dCBtYi0yXCI+XHJcbiAgICAgICAgPGRpdj57e2ZpZWxkKCkuY29uZmlnRGF0YT8ubGVmdExhYmVsfX08L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJtdC0xXCI+XHJcbiAgICAgICAgPGxhYmVsIGNsYXNzPVwic3dpdGNoXCI+XHJcbiAgICAgICAgICBAaWYocmVhY3RpdmVGb3JtQ29udHJvbG9iamVjdCgpKSB7XHJcbiAgICAgICAgICAgIDxpbnB1dFxyXG4gICAgICAgICAgICAgIHR5cGU9XCJjaGVja2JveFwiXHJcbiAgICAgICAgICAgICAgW25hbWVdPVwiZmllbGQoKT8uZmllbGROYW1lXCJcclxuICAgICAgICAgICAgICBbaWRdPVwiZmllbGQoKT8uZmllbGROYW1lXCJcclxuICAgICAgICAgICAgICBbY2hlY2tlZF09XCJpbnB1dFZhbHVlXCJcclxuICAgICAgICAgICAgICBbZGlzYWJsZWRdPVwiZmllbGQoKT8uaXNEaXNhYmxlXCJcclxuICAgICAgICAgICAgICBbcmVxdWlyZWRdPVwiZmllbGQoKT8udmFsaWRhdG9ycz8uaXNSZXF1aXJlZFwiXHJcbiAgICAgICAgICAgICAgW2Zvcm1Db250cm9sXT1cInJlYWN0aXZlRm9ybUNvbnRyb2xvYmplY3QoKVwiXHJcbiAgICAgICAgICAgICAgKGNoYW5nZSk9XCJvblRvZ2dsZUNoYW5nZSgkZXZlbnQpXCJcclxuICAgICAgICAgICAgLz5cclxuICAgICAgICAgIH1AZWxzZSB7XHJcbiAgICAgICAgICAgIDxpbnB1dFxyXG4gICAgICAgICAgICAgIHR5cGU9XCJjaGVja2JveFwiXHJcbiAgICAgICAgICAgICAgW25hbWVdPVwiZmllbGQoKT8uZmllbGROYW1lXCJcclxuICAgICAgICAgICAgICBbaWRdPVwiZmllbGQoKT8uZmllbGROYW1lXCJcclxuICAgICAgICAgICAgICBbY2hlY2tlZF09XCJpbnB1dFZhbHVlXCJcclxuICAgICAgICAgICAgICBbZGlzYWJsZWRdPVwiZmllbGQoKT8uaXNEaXNhYmxlXCJcclxuICAgICAgICAgICAgICBbcmVxdWlyZWRdPVwiZmllbGQoKT8udmFsaWRhdG9ycz8uaXNSZXF1aXJlZFwiXHJcbiAgICAgICAgICAgICAgKGNoYW5nZSk9XCJvblRvZ2dsZUNoYW5nZSgkZXZlbnQpXCJcclxuICAgICAgICAgICAgLz5cclxuICAgICAgICAgIH1cclxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwic2xpZGVyIHJvdW5kXCI+PC9zcGFuPlxyXG4gICAgICAgIDwvbGFiZWw+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgICA8ZGl2IFtuZ1N0eWxlXT1cIntcclxuICAgICAgICAnLS1jdXN0b20tdG9nZ2xlLWZvbnQtc2l6ZSc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9udFNpemUgLFxyXG4gICAgICAgICctLWN1c3RvbS10b2dnbGUtZm9udC13ZWlnaHQnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRXZWlnaHQgLFxyXG4gICAgICAgICctLWN1c3RvbS10b2dnbGUtZm9udC1mYW1pbHknOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRGYW1pbHkgLFxyXG4gICAgICAgICctLWN1c3RvbS10b2dnbGUtZm9udC1jb2xvcic6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uY29sb3IgLFxyXG4gICAgICAgIH1cIiBjbGFzcz1cInRvZ2dsZS10ZXh0IG1iLTJcIj5cclxuICAgICAgICA8ZGl2Pnt7ZmllbGQoKT8ubGFiZWx9fTwvZGl2PlxyXG4gICAgICAgIDxkaXYgc3R5bGU9XCJmb250LXNpemU6IDEwcHg7IGZvbnQtd2VpZ2h0OiA0MDA7XCIgKm5nSWY9XCJmaWVsZCgpLmNvbmZpZ0RhdGE/LnN1YkxhYmVsXCI+e3tmaWVsZCgpPy5jb25maWdEYXRhPy5zdWJMYWJlbH19IDxpbWcgYWx0PVwiXCIgW3NyY109XCJmaWVsZCgpPy5pbWFnZVVybFwiICpuZ0lmPVwiZmllbGQoKT8uaW1hZ2VVcmxcIiAvPiA8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICA8L2Rpdj5cclxuIl19
|
|
@@ -590,11 +590,11 @@ class ToggleComponent {
|
|
|
590
590
|
this.change.emit(this.inputValue);
|
|
591
591
|
}
|
|
592
592
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
593
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ToggleComponent, isStandalone: true, selector: "lib-toggle", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n '--custom-toggle-width': field()?.controlStyle?.width,\r\n }\"\r\n
|
|
593
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ToggleComponent, isStandalone: true, selector: "lib-toggle", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n '--custom-toggle-width': field()?.controlStyle?.width,\r\n }\"\r\n class=\"card toggle-background mt-2\"\r\n >\r\n <div class=\"toggle_switch mt-2\">\r\n <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\r\n '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n }\" class=\"toggle-text mb-2\">\r\n <div>{{field().configData?.leftLabel}}</div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <label class=\"switch\">\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n type=\"checkbox\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [checked]=\"inputValue\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n (change)=\"onToggleChange($event)\"\r\n />\r\n }@else {\r\n <input\r\n type=\"checkbox\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [checked]=\"inputValue\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n (change)=\"onToggleChange($event)\"\r\n />\r\n }\r\n <span class=\"slider round\"></span>\r\n </label>\r\n </div>\r\n <div [ngStyle]=\"{\r\n '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n }\" class=\"toggle-text mb-2\">\r\n <div>{{field()?.label}}</div>\r\n <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\r\n </div>\r\n </div>\r\n </div>\r\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
594
594
|
}
|
|
595
595
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
596
596
|
type: Component,
|
|
597
|
-
args: [{ selector: 'lib-toggle', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n '--custom-toggle-width': field()?.controlStyle?.width,\r\n }\"\r\n
|
|
597
|
+
args: [{ selector: 'lib-toggle', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n '--custom-toggle-width': field()?.controlStyle?.width,\r\n }\"\r\n class=\"card toggle-background mt-2\"\r\n >\r\n <div class=\"toggle_switch mt-2\">\r\n <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\r\n '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n }\" class=\"toggle-text mb-2\">\r\n <div>{{field().configData?.leftLabel}}</div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <label class=\"switch\">\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n type=\"checkbox\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [checked]=\"inputValue\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n (change)=\"onToggleChange($event)\"\r\n />\r\n }@else {\r\n <input\r\n type=\"checkbox\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [checked]=\"inputValue\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n (change)=\"onToggleChange($event)\"\r\n />\r\n }\r\n <span class=\"slider round\"></span>\r\n </label>\r\n </div>\r\n <div [ngStyle]=\"{\r\n '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n }\" class=\"toggle-text mb-2\">\r\n <div>{{field()?.label}}</div>\r\n <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\r\n </div>\r\n </div>\r\n </div>\r\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"] }]
|
|
598
598
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
|
|
599
599
|
type: Output
|
|
600
600
|
}] } });
|