@wavemaker/app-ng-runtime 11.4.0-rc.5351 → 11.4.1-next.140983

app-ng-runtime/components/input/default/bundles/index.umd.js

@@ -611,7 +611,10 @@
         ['shortcutkey', base.PROP_STRING],
         ['show', Object.assign({ value: true }, base.PROP_BOOLEAN)],
         ['tabindex', Object.assign({ value: 0 }, base.PROP_NUMBER)],
-        ['uncheckedvalue', Object.assign({ value: false }, base.PROP_STRING)]
+        ['uncheckedvalue', Object.assign({ value: false }, base.PROP_STRING)],
+        ['togglewithicon', base.PROP_BOOLEAN],
+        ['checkedicon', Object.assign({ value: "wi wi-done" }, base.PROP_STRING)],
+        ['uncheckedicon', Object.assign({ value: "wi wi-close" }, base.PROP_STRING)]
     ]);
     var registerProps$c = function () {
         base.register('wm-checkbox', checkboxProps);
@@ -712,6 +715,16 @@
         CheckboxComponent.prototype.handleChange = function (newVal) {
             this.invokeOnChange(this.datavalue, { type: 'change' }, this.ngModel.valid);
         };
+        CheckboxComponent.prototype.getColor = function () {
+            var labelElement = $("div[widget-id='" + this.widgetId + "'] label");
+            var bgcolor = $(labelElement).css("background-color");
+            return bgcolor;
+        };
+        CheckboxComponent.prototype.onMouseOver = function () {
+            var labelElement = $("div.app-toggle[widget-id='" + this.widgetId + "'] label");
+            var bgcolor = $(labelElement).css("background-color");
+            document.documentElement.style.setProperty('--boxAfterBackColor', bgcolor);
+        };
         CheckboxComponent.prototype.onKeyDown = function ($event) {
             $event.preventDefault();
             this.checkboxEl.nativeElement.click();
@@ -726,7 +739,7 @@
     CheckboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: '[wmCheckbox]',
-                    template: "<label [ngClass]=\"{'unchecked': !proxyModel, 'disabled': (disabled || readonly), 'required': (required && _caption)}\">\n    <input type=\"checkbox\"\n           role=\"checkbox\"\n           #checkbox\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint\"\n           [attr.aria-checked]=\"!!proxyModel\"\n           focus-target\n           [(ngModel)]=\"proxyModel\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [disabled]=\"disabled || readonly\"\n           [attr.accesskey]=\"shortcutkey\"\n           [tabindex]=\"tabindex\"\n           (blur)=\"invokeOnTouched($event)\"\n           (ngModelChange)=\"handleChange($event)\">\n    <span class=\"caption\" [innerHtml]=\"_caption\"></span>\n    <img alt=\"Checkbox Image\" aria-hidden=\"true\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"switch\"/>\n</label>\n<input type=\"hidden\" class=\"ng-hide model-holder\" aria-hidden=\"true\" tabindex=\"-1\" [disabled]=\"disabled\" [value]=\"proxyModel\">\n",
+                    template: "<label [ngClass]=\"{'unchecked': !proxyModel, 'disabled': (disabled || readonly), 'required': (required && _caption)}\" (mouseenter)=\"onMouseOver()\">\n    <input type=\"checkbox\"\n           role=\"checkbox\"\n           #checkbox\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint\"\n           [attr.aria-checked]=\"!!proxyModel\"\n           focus-target\n           [(ngModel)]=\"proxyModel\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [disabled]=\"disabled || readonly\"\n           [attr.accesskey]=\"shortcutkey\"\n           [tabindex]=\"tabindex\"\n           (blur)=\"invokeOnTouched($event)\"\n           (ngModelChange)=\"handleChange($event)\">\n           <span class=\"toggle_slider\" ng-if=\"!isNativeMobileApplicationType\">\n            <i class=\"app-icon {{checkedicon}} toggle-checked\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin, color:getColor(), fontSize:iconwidth}\" *ngIf=\"proxyModel && togglewithicon\"></i>\n            <i class=\"app-icon {{uncheckedicon}} toggle-unchecked\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin, fontSize:iconwidth}\" *ngIf=\"!proxyModel && togglewithicon\"></i>\n           </span>\n           <span class=\"caption\" [innerHtml]=\"_caption\"></span>\n    <img alt=\"Checkbox Image\" aria-hidden=\"true\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"switch\"/>\n</label>\n<input type=\"hidden\" class=\"ng-hide model-holder\" aria-hidden=\"true\" tabindex=\"-1\" [disabled]=\"disabled\" [value]=\"proxyModel\">\n",
                     providers: [
                         base.provideAs(CheckboxComponent, forms.NG_VALUE_ACCESSOR, true),
                         base.provideAs(CheckboxComponent, forms.NG_VALIDATORS, true),