@esfaenza/forms-and-validations 11.2.104 → 11.2.105

package/bundles/esfaenza-forms-and-validations.umd.js

@@ -423,7 +423,9 @@
     /** Chiave che indica il prefisso dei Contesti Applicativi per permettere l'abilitazione/disabilitazione di input in maniera contestuale */
     var ACO_CUSTOMKEY = new core.InjectionToken('ACO_CUSTOMKEY');
     /** Token che indica la lingua da utilizzare, sono supportate "it-IT" ed "en-US" */
-    var FAV_DEBUG_MODE = new core.InjectionToken('FAV_DEBUG_MODE');
+    var FAV_DEBUG_MODE = new core.InjectionToken('FAV_DEBUG_MODE');
+    /** Token che indica se far apparire l'input delle checkbox come slider o come input nativi */
+    var FAV_SLIDER_MODE = new core.InjectionToken('FAV_SLIDER_MODE');
 
     // Angular
     /**
@@ -3058,11 +3060,18 @@
     var FormCheckboxComponent = /** @class */ (function (_super) {
         __extends(FormCheckboxComponent, _super);
         /** @ignore Costruttore  */
-        function FormCheckboxComponent(lc, cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY) {
+        function FormCheckboxComponent(lc, cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY, FAV_SLIDER_MODE) {
             var _this = _super.call(this, cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY, true) || this;
             _this.lc = lc;
+            _this.FAV_SLIDER_MODE = FAV_SLIDER_MODE;
+            /** Mostra l'input checkbox con lo stile di uno slider */
+            _this.SliderMode = null;
             return _this;
         }
+        FormCheckboxComponent.prototype.ngOnInit = function () {
+            if (this.SliderMode == null)
+                this.SliderMode = this.FAV_SLIDER_MODE;
+        };
         /** @ignore */
         FormCheckboxComponent.prototype.writeValue = function (obj) {
             obj = obj ? (obj === true || obj.toLowerCase() == "true") : false;
@@ -3080,8 +3089,9 @@
     FormCheckboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "form-checkbox",
-                    template: "<!-- Uguale in tutti i componenti --------------------------------------------------------------------------->\r\n<ng-container *ngIf=\"!FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\">\r\n    <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">\r\n        <ng-container *ngIf=\"DisplayLayout == 'form'\">{{ EvaluatedModel }}</ng-container>\r\n        <div *ngIf=\"DisplayLayout == 'inline'\" class=\"app-inline\">{{ EvaluatedModel }}</div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n    <div [hidden]=\"DisplayMode\" class=\"app-inline-block\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\" class=\"{{FormGroupClass + (Last ? ' app-margin-bottom-0 app-margin-right-0 ' : '') + (DisplayLayout == 'inline' && DisplayMode ? (' app-inline-block ' + (!Last ? 'app-margin-right-10' : '')) : ' form-group row')}}\">\r\n\r\n    <label class=\"col-md-{{(DisplayMode && DisplayLayout == 'inline' ? 'none app-bold app-margin-bottom-0' : LabelColWidth) + (DisplayMode ? ' app-bold' : ' m-t-5') }}\">{{Label}}{{Required && !DisplayMode ? '*' : ''}}:</label>\r\n    <span *ngIf=\"DisplayMode && DisplayLayout == 'inline'\">&nbsp;</span>\r\n    <div class=\"col-md-{{DisplayMode && DisplayLayout == 'inline' ? 'none app-inline-block' : InputColWidth}}\">\r\n\r\n        <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">{{ EvaluatedModel }}</ng-container>\r\n        <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n        <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n<!----------------------------------------------------------------------------------------------------------->\r\n\r\n<ng-template #controlTemplate>\r\n    <input class=\"app-pointer\" [disabled]=\"Readonly ? true : null\" type=\"checkbox\" [(ngModel)]=\"Model\" id=\"{{GeneratedName}}\" name=\"{{GeneratedName}}\" #validationControl=\"ngModel\" (ngModelChange)=\"changed(); finalized()\" (click)=\"focused($event)\" />\r\n</ng-template>",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush
+                    template: "<!-- Uguale in tutti i componenti --------------------------------------------------------------------------->\r\n<ng-container *ngIf=\"!FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\">\r\n    <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">\r\n        <ng-container *ngIf=\"DisplayLayout == 'form'\">{{ EvaluatedModel }}</ng-container>\r\n        <div *ngIf=\"DisplayLayout == 'inline'\" class=\"app-inline\">{{ EvaluatedModel }}</div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n    <div [hidden]=\"DisplayMode\" class=\"app-inline-block\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\" class=\"{{FormGroupClass + (Last ? ' app-margin-bottom-0 app-margin-right-0 ' : '') + (DisplayLayout == 'inline' && DisplayMode ? (' app-inline-block ' + (!Last ? 'app-margin-right-10' : '')) : ' form-group row')}}\">\r\n\r\n    <label class=\"col-md-{{(DisplayMode && DisplayLayout == 'inline' ? 'none app-bold app-margin-bottom-0' : LabelColWidth) + (DisplayMode ? ' app-bold' : ' m-t-5') }}\">{{Label}}{{Required && !DisplayMode ? '*' : ''}}:</label>\r\n    <span *ngIf=\"DisplayMode && DisplayLayout == 'inline'\">&nbsp;</span>\r\n    <div class=\"col-md-{{DisplayMode && DisplayLayout == 'inline' ? 'none app-inline-block' : InputColWidth}}\">\r\n\r\n        <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">{{ EvaluatedModel }}</ng-container>\r\n        <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n        <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n<!----------------------------------------------------------------------------------------------------------->\r\n\r\n<ng-template #controlTemplate>\r\n    <ng-container *ngIf=\"SliderMode\">\r\n        <label class=\"toggler-wrapper slider-checkbox\">\r\n            <input [disabled]=\"Readonly ? true : null\" type=\"checkbox\" [(ngModel)]=\"Model\" id=\"{{GeneratedName}}\" name=\"{{GeneratedName}}\" #validationControl=\"ngModel\" (ngModelChange)=\"changed(); finalized()\" (click)=\"focused($event)\" >\r\n            <div class=\"toggler-slider\">\r\n              <div class=\"toggler-knob\"></div>\r\n            </div>\r\n        </label>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!SliderMode\">\r\n        <input class=\"app-pointer\" [disabled]=\"Readonly ? true : null\" type=\"checkbox\" [(ngModel)]=\"Model\" id=\"{{GeneratedName}}\" name=\"{{GeneratedName}}\" #validationControl=\"ngModel\" (ngModelChange)=\"changed(); finalized()\" (click)=\"focused($event)\"/>\r\n    </ng-container>\r\n</ng-template>",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [".toggler-wrapper{display:block;width:45px;height:25px;cursor:pointer;position:relative}.toggler-wrapper input[type=checkbox]{display:none}.toggler-wrapper input[type=checkbox]:checked+.toggler-slider{background-color:#007bff}.toggler-wrapper .toggler-slider{background-color:#ccc;border-radius:100px;top:0;left:0;width:100%;height:100%}.toggler-wrapper .toggler-knob,.toggler-wrapper .toggler-slider{position:absolute;transition:all .3s ease}.slider-checkbox{margin-top:3px}.toggler-wrapper.slider-checkbox input[type=checkbox]:checked+.toggler-slider .toggler-knob{left:calc(100% - 19px - 3px)}.toggler-wrapper.slider-checkbox .toggler-slider:after{position:absolute;top:50%;right:-25px;transform:translateY(-50%);font-size:75%;text-transform:uppercase;font-weight:500;opacity:.7}.toggler-wrapper.slider-checkbox .toggler-knob{width:calc(25px - 6px);height:calc(25px - 6px);border-radius:50%;left:3px;top:3px;background-color:#fff}"]
                 },] }
     ];
     FormCheckboxComponent.ctorParameters = function () { return [
@@ -3091,8 +3101,12 @@
         { type: Array, decorators: [{ type: core.Optional }, { type: core.Host }, { type: core.Inject, args: [forms.NG_VALIDATORS,] }] },
         { type: accessControl.AccessControlService },
         { type: accessControl.ComponentContext, decorators: [{ type: core.Optional }] },
-        { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [ACO_CUSTOMKEY,] }] }
-    ]; };
+        { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [ACO_CUSTOMKEY,] }] },
+        { type: Boolean, decorators: [{ type: core.Optional }, { type: core.Inject, args: [FAV_SLIDER_MODE,] }] }
+    ]; };
+    FormCheckboxComponent.propDecorators = {
+        SliderMode: [{ type: core.Input }]
+    };
 
     /** Componente che dà all'utente la possibilità di selezionare una data */
     var FormDateComponent = /** @class */ (function (_super) {
@@ -3955,6 +3969,7 @@
                     { provide: FAV_DEBUG_MODE, useValue: (config === null || config === void 0 ? void 0 : config.debugMode) != null ? config === null || config === void 0 ? void 0 : config.debugMode : false },
                     { provide: ACO_CUSTOMKEY, useValue: (config === null || config === void 0 ? void 0 : config.acocustom) || null },
                     { provide: datetimePicker.NGX_MAT_DATE_FORMATS, useValue: formats_long },
+                    { provide: FAV_SLIDER_MODE, useValue: (config === null || config === void 0 ? void 0 : config.sliderMode) != null ? config === null || config === void 0 ? void 0 : config.sliderMode : false },
                     { provide: datetimePicker.NgxMatDateAdapter, useClass: NgxExpandedDayJsDateAdapter },
                 ]
             };
@@ -4008,14 +4023,15 @@
     exports.ɵc = FAV_LOCALE;
     exports.ɵd = ACO_CUSTOMKEY;
     exports.ɵe = FAV_DEBUG_MODE;
-    exports.ɵf = CustomRequiredDirective;
-    exports.ɵg = BaseFormControl;
-    exports.ɵh = FormSelectComponentLoc;
-    exports.ɵi = FormAdaptiveComponentLoc;
-    exports.ɵj = FormMultiSelectComponent;
-    exports.ɵk = FormMultiSelectComponentLoc;
-    exports.ɵl = FormFileComponentLoc;
-    exports.ɵm = FormAutocompleteComponentLoc;
+    exports.ɵf = FAV_SLIDER_MODE;
+    exports.ɵg = CustomRequiredDirective;
+    exports.ɵh = BaseFormControl;
+    exports.ɵi = FormSelectComponentLoc;
+    exports.ɵj = FormAdaptiveComponentLoc;
+    exports.ɵk = FormMultiSelectComponent;
+    exports.ɵl = FormMultiSelectComponentLoc;
+    exports.ɵm = FormFileComponentLoc;
+    exports.ɵn = FormAutocompleteComponentLoc;
 
     Object.defineProperty(exports, '__esModule', { value: true });